> ## Documentation Index
> Fetch the complete documentation index at: https://learn.social.plus/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, and Flutter**. Refer to the platform UIKit for React Native availability.
</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();
      }
      ```
    </CodeGroup>

    <Note>
      **Automatic Management**: The chat home page automatically handles real-time updates, sorting, and network connectivity through the underlying SDK.
    </Note>
  </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();
      }
      ```
    </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 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();
      }
      ```
    </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>