> ## 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

<Info>
  **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.
</Info>

## 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.

<CardGroup cols={2}>
  <Card title="Channel Management" icon="list">
    **Conversation Organization**

    * Channel preview with latest messages
    * Real-time activity sorting
    * Unread message indicators
    * Swipe-to-archive functionality
  </Card>

  <Card title="User Navigation" icon="route">
    **Intuitive Chat Access**

    * Tap to enter conversations
    * Create new conversations
    * Access archived chats
    * Network connectivity indicators
  </Card>
</CardGroup>

<Info>
  **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.
</Info>

## Implementation Guide

<Tabs>
  <Tab title="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

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

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

    <Note>
      **Automatic Management**: The chat home page automatically handles real-time updates, sorting, and network connectivity through the underlying SDK.
    </Note>

    <Info>
      **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.
    </Info>
  </Tab>

  <Tab title="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

    <CodeGroup>
      ```dart Flutter theme={null}
      Widget chatListComponent() {
        return ChatListComponent();
      }
      ```
    </CodeGroup>

    <Note>
      **Real-Time Integration**: The chat list automatically syncs with the SDK to provide live updates for new messages, conversation changes, and user activity.
    </Note>
  </Tab>

  <Tab title="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

    <CodeGroup>
      ```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>
      ```
    </CodeGroup>
  </Tab>

  <Tab title="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

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

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

    <Note>
      **Search Optimization**: The search functionality includes built-in debouncing and result optimization handled by the SDK layer.
    </Note>
  </Tab>
</Tabs>

## Component Management Strategies

<AccordionGroup>
  <Accordion title="Navigation Flow Design" icon="sitemap">
    **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.
  </Accordion>

  <Accordion title="Visual Hierarchy Strategy" icon="layer-group">
    **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.
  </Accordion>

  <Accordion title="User Action Integration" icon="hand-pointer">
    **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.
  </Accordion>
</AccordionGroup>

## Best Practices

<AccordionGroup>
  <Accordion title="Interface Customization" icon="palette">
    **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.
  </Accordion>

  <Accordion title="User Flow Optimization" icon="route">
    **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.
  </Accordion>

  <Accordion title="Responsive Design" icon="mobile">
    **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.
  </Accordion>
</AccordionGroup>

## Related Features

<CardGroup cols={3}>
  <Card title="Conversation Chat" href="/uikit/components/chat/conversation-chat" icon="comments">
    **Individual Chats**
    Navigate to conversation interfaces
  </Card>

  <Card title="Group Chat" href="/uikit/components/chat/group-chat" icon="users">
    **Multi-user Chats**
    Roles & member tools
  </Card>

  <Card title="Live Chat" href="/uikit/components/chat/live-chat" icon="tobroadcast">
    **Streaming Events**
    High-volume interaction
  </Card>
</CardGroup>

<Tip>
  **Implementation Strategy**: Start with AmityChatHomePage as your main chat interface, then add ArchivedChatListComponent and AmityChannelCreateConversationPage as needed to provide complete chat management functionality.
</Tip>


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