> ## Documentation Index
> Fetch the complete documentation index at: https://social-b97141fb-feat-user-history-moderation-detail.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Recent Chats (Chat List)

> Chat list and channel management interface for organizing conversations with real-time updates and archive functionality

> [!NOTE]
>
> **Key Benefit**: Provide users with a centralized hub to manage all their chat conversations, featuring real-time updates, unread indicators, and intuitive navigation between active and archived chats.

## Feature Overview

The UIKit provides users with an overview of all their active chat channels. It offers a quick glance at the latest conversations and helps users easily stay on top of ongoing discussions.

> **Channel Management**
>
> **Conversation Organization**
>
> * Channel preview with latest messages
> * Real-time activity sorting
> * Unread message indicators
> * Swipe-to-archive functionality

> **User Navigation**
>
> **Intuitive Chat Access**
>
> * Tap to enter conversations
> * Create new conversations
> * Access archived chats
> * Network connectivity indicators

> [!NOTE]
>
> **Platform Support**: Recent Chats components are available on **iOS, Android, React, React Native, and Flutter**. On **React Native**, these screens ship from v4.3.0 as part of `AmityUiKitChat`, and from v4.3.1 each page can also be rendered on its own inside `AmityPageRenderer` — see [Quick Start](/uikit/components/chat/overview#quick-start-example). Only pages are exported on React Native; the building-block components shown here (list, bubble, composer, action sheets) aren't.

## Implementation Guide

**Chat Home Interface**

**Main entry point for chat functionality**

The AmityChatHomePage serves as the central hub for managing and navigating between conversations.

### Features

| Feature | Description |
| - | - |
| Chat List Display | Displays a list of available chats for the user |
| Network Connectivity Indicator | Shows "Waiting for network..." message when device is offline |
| Create New Conversation | Allows users to create new chat conversations via popup menu |
| Access Archived Chats | Provides access to archived chats through menu option |

### Code Examples

```dart Flutter theme={null}
Widget chatHomePage() {
  return AmityChatHomePage();
}
```

```jsx React Native theme={null}
<AmityPageRenderer>
  <AmityChatHomePage />
</AmityPageRenderer>
```

> [!NOTE]
>
> **Automatic Management**: The chat home page automatically handles real-time updates, sorting, and network connectivity through the underlying SDK.

> [!NOTE]
>
> **React Native** (v4.3.0+): The chat home page is where `AmityUiKitChat` opens. It shows unread and mention badges on each chat and lets users swipe a chat to archive it. When push notifications are disabled for the user's account or for the chat module (for example, by an admin), the list shows a "Push notifications have been disabled by admin" banner.

**Chat List**

**Core chat conversation list**

The ChatListComponent provides a list of chat conversations for the user with real-time updates and navigation capabilities.

### Features

| Feature | Description |
| - | - |
| Display Chat Conversations | Shows a list of chat conversations for the user |
| Real-Time Updates | Automatically updates the chat list with new conversations or changes |

### Code Examples

```dart Flutter theme={null}
Widget chatListComponent() {
  return ChatListComponent();
}
```

> [!NOTE]
>
> **Real-Time Integration**: The chat list automatically syncs with the SDK to provide live updates for new messages, conversation changes, and user activity.

**Archived Chat Management**

**Organized archive functionality**

Components for managing archived conversations separately from active chats.

### Archived Chat List

The ArchivedChatListComponent provides a dedicated interface for viewing and managing archived conversations.

### Features

| Feature | Description |
| - | - |
| Display Archived Chats | Shows a list of archived chat conversations for the user |
| Organized Chat Management | Helps users manage archived chats separately from active conversations |
| Customizable Behavior | Extends the base chat list component for flexibility and customization |

### Code Examples

```dart Flutter theme={null}
Widget archivedChatListComponent() {
  return ArchivedChatListComponent();
}
```

```jsx React Native - Archived Chat Page theme={null}
// React Native exports the full archived chats page, not the list component.
<AmityPageRenderer>
  <AmityArchivedChatPage />
</AmityPageRenderer>
```

**Conversation Creation**

**New conversation interface**

User interface for searching users and initiating new chat conversations.

### Features

| Feature | Description |
| - | - |
| Search Users | Allows users to search for other users by display name by typing at least 3 characters |
| User List Display | Displays a list of users matching the search query |
| Real-Time Search Updates | Updates the user list dynamically as the search query changes |
| Start New Conversation | Enables users to select a user and start a new chat conversation |
| Error Handling | Displays appropriate messages for no results or invalid search queries |

### Code Examples

```dart Flutter theme={null}
Widget createConversationPage() {
  return AmityChannelCreateConversationPage();
}
```

```jsx React Native theme={null}
<AmityPageRenderer>
  <AmityChannelCreateConversationPage />
</AmityPageRenderer>
```

> [!NOTE]
>
> **Search Optimization**: The search functionality includes built-in debouncing and result optimization handled by the SDK layer.

## Component Management Strategies

> **Navigation Flow Design**
>
> **Organizing chat navigation**
>
> Plan the user flow between recent chats, individual conversations, and archived chats. Consider how users will discover and access different chat functionalities while maintaining a clear navigation hierarchy.

> **Visual Hierarchy Strategy**
>
> **Optimizing chat list presentation**
>
> Design clear visual indicators for unread messages, archived conversations, and different conversation types. Use consistent styling patterns to help users quickly identify and navigate to their desired conversations.

> **User Action Integration**
>
> **Implementing intuitive interactions**
>
> Configure swipe actions, tap behaviors, and menu options to provide users with quick access to common chat management actions while maintaining a clean and uncluttered interface.

## Best Practices

> **Interface Customization**
>
> **Tailoring the chat list experience**
>
> Customize the appearance of chat previews, timestamps, and unread indicators to match your app's design system. Focus on readability and clear visual hierarchy to enhance user experience.

> **User Flow Optimization**
>
> **Streamlining chat discovery**
>
> Design clear pathways for users to find existing conversations, create new ones, and manage their chat organization. Consider user habits and common usage patterns when planning the interface.

> **Responsive Design**
>
> **Ensuring cross-device compatibility**
>
> Optimize the chat list interface for different screen sizes and orientations. Ensure touch targets are appropriately sized and that the interface remains usable across various device configurations.

## Related Features

> **[Conversation Chat](/uikit/components/chat/conversation-chat)**
>
> **Individual Chats**
> Navigate to conversation interfaces

> **[Group Chat](/uikit/components/chat/group-chat)**
>
> **Multi-user Chats**
> Roles & member tools

> **[Live Chat](/uikit/components/chat/live-chat)**
>
> **Streaming Events**
> High-volume interaction

> [!TIP]
>
> **Implementation Strategy**: Start with AmityChatHomePage as your main chat interface, then add ArchivedChatListComponent and AmityChannelCreateConversationPage as needed to provide complete chat management functionality.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.