Chat Components
Recent Chats (Chat List)
Chat list and channel management interface for organizing conversations with real-time updates and archive functionality
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
Platform Support: Recent Chats components are currently supported on Flutter only.
Implementation Guide
Main entry point for chat functionalityThe 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
Automatic Management: The chat home page automatically handles real-time updates, sorting, and network connectivity through the underlying SDK.
Component Management Strategies
Navigation Flow Design
Navigation Flow Design
Visual Hierarchy Strategy
Visual Hierarchy Strategy
Optimizing chat list presentationDesign 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
User Action Integration
Implementing intuitive interactionsConfigure 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
Interface Customization
Tailoring the chat list experienceCustomize 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
User Flow Optimization
Streamlining chat discoveryDesign 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
Responsive Design
Ensuring cross-device compatibilityOptimize 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
Individual Chats
Navigate to specific conversation interfaces
User Search
Find Users
Search and discover users for new conversations
Chat Settings
Configuration
Manage chat preferences and settings
Implementation Strategy: Start with AmityChatHomePage as your main chat interface, then add ArchivedChatListComponent and AmityChannelCreateConversationPage as needed to provide complete chat management functionality.