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

# Overview

> Complete guide to social.plus UIKit chat components for conversations, groups, live streaming, and real-time messaging

<Info>
  **Key Benefit**: Build comprehensive chat experiences with pre-built components covering one-on-one conversations, group chats, live streaming interactions, and complete channel management - all optimized for real-time communication.
</Info>

## Feature Overview

social.plus Chat UIKit provides a complete suite of messaging components designed to handle every aspect of modern chat applications. From intimate one-on-one conversations to high-volume live streaming chats, our components are built to scale with your needs while maintaining exceptional user experience.

<Note>
  **Light & dark themes.** Chat components support both light and dark themes. Dark mode is currently verified for **chat** components; other UIKit features adopt the expanded color set in a later release — see [Component styling](/uikit/customization/component-styling).
</Note>

<CardGroup cols={2}>
  <Card title="Conversation Management" icon="comments">
    **Complete Messaging Foundation**

    * One-on-one and group conversations
    * Real-time message delivery and sync
    * Rich media support (images and videos)
    * Message editing, deletion, and reactions
  </Card>

  <Card title="Live Stream Integration" icon="tobroadcast">
    **High-Volume Live Events**

    * Live chat for streaming platforms
    * Real-time reactions and engagement
    * User mentions and role management
    * Performance optimized for live events
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Advanced Group Features" icon="users">
    **Multi-User Collaboration**

    * Group creation and management
    * Role-based permissions system
    * Member administration tools
    * Moderation and safety controls
  </Card>

  <Card title="Channel Organization" icon="list">
    **Chat Discovery & Management**

    * Recent chats and channel lists
    * Archive and organization tools
    * Search and discovery features
    * Network connectivity handling
  </Card>
</CardGroup>

## Chat Component Categories

<Tabs>
  <Tab title="Core Conversations">
    **Essential messaging components for standard chat experiences**

    ### Conversation Chat

    Complete messaging interface for one-on-one and basic group conversations.

    **Key Features:**

    * Real-time messaging with text and media support
    * Message reactions, replies, and rich content
    * Message editing, deletion, and interaction controls
    * Network awareness and offline handling

    **Platform Support:** iOS, Android, React, Flutter

    <Button href="/uikit/components/chat/conversation-chat" variant="outline">
      📱 Conversation Chat Guide
    </Button>

    ### Recent Chats (Chat List)

    Central hub for managing and navigating between all chat conversations.

    **Key Features:**

    * Chat list with previews and unread indicators
    * Real-time activity sorting and updates
    * Swipe-to-archive functionality
    * Create new conversations and access archived chats

    **Platform Support:** iOS, Android, React, Flutter

    <Button href="/uikit/components/chat/recent-chats" variant="outline">
      📋 Recent Chats Guide
    </Button>
  </Tab>

  <Tab title="Group Collaboration">
    **Advanced multi-user conversation features**

    ### Group Chat

    Comprehensive group conversation solution with advanced member management.

    **Key Features:**

    * Group creation with privacy controls
    * Role-based permissions (moderators vs members)
    * Member management (add, remove, ban users)
    * Group settings and profile customization
    * Message reporting and moderation tools

    **Platform Support:** iOS, Android, React, Flutter

    **Components Included:**

    * AmityGroupChatPage - Main group interface
    * AmityCreateGroupChatPage - Group creation flow
    * AmityGroupSettingPage - Group administration
    * AmityGroupMemberListPage - Member management
    * AmityBannedGroupMemberListPage - Moderation tools

    <Button href="/uikit/components/chat/group-chat" variant="outline">
      👥 Group Chat Guide
    </Button>
  </Tab>

  <Tab title="Live Streaming">
    **Real-time chat for live events and streaming**

    ### Live Chat

    High-performance chat interface designed for live streaming and events.

    **Key Features:**

    * Real-time messaging optimized for high volume
    * Message reactions with customizable emojis
    * User mentions (@username and @all)
    * User profiles and role badges
    * Performance optimized for live events

    **Platform Support:** iOS, Android, React

    **Components Included:**

    * AmityLiveChatPage - Complete live chat interface
    * AmityLiveChatHeader - Channel information display
    * AmityLiveChatMessageList - Real-time message display
    * AmityLiveChatMessageComposeBar - Message creation with mentions
    * AmityReactionList - Reaction management

    <Button href="/uikit/components/chat/live-chat" variant="outline">
      📺 Live Chat Guide
    </Button>
  </Tab>
</Tabs>

## Implementation Strategies

<AccordionGroup>
  <Accordion title="Chat Architecture Planning" icon="sitemap">
    **Designing your chat system structure**

    Plan your chat implementation based on your use case: start with basic conversations for simple messaging apps, add group features for collaboration platforms, or implement live chat for streaming applications. Consider user flows between different chat types and how users will discover and manage conversations.
  </Accordion>

  <Accordion title="Platform Considerations" icon="devices">
    **Choosing the right components for your platforms**

    Flutter components provide the most comprehensive chat features, while iOS/Android/React live chat components are optimized for streaming use cases. Plan your cross-platform strategy based on feature requirements and choose components that align with your development approach.
  </Accordion>

  <Accordion title="Scalability and Performance" icon="chart-line">
    **Building for growth and high usage**

    Chat components are built on the SDK foundation that handles caching, real-time updates, and performance optimization. Focus on UI/UX design, user flow optimization, and component configuration rather than low-level performance concerns.
  </Accordion>
</AccordionGroup>

## Best Practices

<AccordionGroup>
  <Accordion title="User Experience Design" icon="user-check">
    **Creating intuitive chat interfaces**

    Design clear navigation between different chat types, provide visual hierarchy for message importance, and ensure consistent interaction patterns across all chat components. Consider how users will transition between recent chats, individual conversations, and group management.
  </Accordion>

  <Accordion title="Safety and Moderation" icon="shield">
    **Implementing effective content management**

    Leverage built-in reporting mechanisms, configure appropriate moderation workflows, and provide clear user controls for blocking and muting. Plan role-based permissions for group chats and establish guidelines for live chat moderation.
  </Accordion>

  <Accordion title="Customization Strategy" icon="palette">
    **Aligning chat interfaces with your brand**

    Customize themes, colors, and component behavior to match your application's design system. Consider different chat contexts (private conversations vs live events) and adjust styling accordingly while maintaining usability and accessibility.
  </Accordion>
</AccordionGroup>

## Quick Start Guide

<Steps>
  <Step title="Choose Your Chat Type">
    **Identify your primary use case:**

    * **Simple Messaging**: Start with Conversation Chat and Recent Chats
    * **Community Platform**: Add Group Chat for collaborative features
    * **Live Streaming**: Implement Live Chat for real-time events
    * **Complete Platform**: Combine all components for full chat functionality
  </Step>

  <Step title="Set Up Core Components">
    **Begin with essential functionality:**

    1. Implement conversation management (Recent Chats)
    2. Add individual messaging (Conversation Chat)
    3. Extend with group features if needed
    4. Integrate live chat for streaming use cases
  </Step>

  <Step title="Configure and Customize">
    **Tailor to your application:**

    * Apply your brand theming and styling
    * Configure component behavior and limits
    * Set up moderation and safety features
    * Test user flows and interaction patterns
  </Step>

  <Step title="Deploy and Monitor">
    **Launch and optimize:**

    * Deploy with appropriate user testing
    * Monitor chat usage and performance
    * Gather user feedback for improvements
    * Iterate on features and user experience
  </Step>
</Steps>

## Component Comparison

| Feature                  | Conversation Chat  | Group Chat               | Live Chat             |
| ------------------------ | ------------------ | ------------------------ | --------------------- |
| **Flutter Support**      | ✅ Full Support     | ✅ Full Support           | ❌ Not Available       |
| **iOS Support**          | ✅ Full Support     | ✅ Full Support           | ✅ Full Support        |
| **Android Support**      | ✅ Full Support     | ✅ Full Support           | ✅ Full Support        |
| **React Support**        | ✅ Full Support     | ✅ Full Support           | ✅ Full Support        |
| **React Native Support** | ❌ Not Available    | ❌ Not Available          | ❌ Not Available       |
| **Use Case**             | 1-on-1 messaging   | Multi-user collaboration | Live streaming events |
| **Member Limit**         | 2 users            | Multiple users           | High volume viewers   |
| **Moderation**           | Basic reporting    | Advanced admin tools     | Live event moderation |
| **Performance**          | Standard messaging | Group-optimized          | High-volume optimized |

## Use Cases

<CardGroup cols={2}>
  <Card title="Social Media App" icon="heart">
    **Instagram-style messaging**

    Use Conversation Chat for direct messages and Recent Chats for message management. Add Group Chat for story collaborations or close friends features.
  </Card>

  <Card title="Gaming Platform" icon="gamepad">
    **Discord-like experience**

    Implement Group Chat for team channels, Live Chat for tournament streams, and Recent Chats for server navigation.
  </Card>

  <Card title="Business Collaboration" icon="briefcase">
    **Slack-style workplace chat**

    Use Group Chat for team channels, Conversation Chat for direct messages, and Recent Chats for workspace organization.
  </Card>

  <Card title="Streaming Platform" icon="video">
    **Twitch-style live interaction**

    Focus on Live Chat for viewer engagement, with Conversation Chat for creator-fan direct communication.
  </Card>
</CardGroup>

## Related Features

<CardGroup cols={3}>
  <Card title="Users & Profiles" href="/uikit/components/social/users" icon="user">
    **User Profiles & Social**
    User profiles and social interactions
  </Card>

  <Card title="Moderation Tools" href="/uikit/components/social/moderation" icon="shield">
    **Content Safety**
    Advanced moderation and reporting
  </Card>

  <Card title="Customization" href="/uikit/customization/overview" icon="palette">
    **Theme & Styling**
    Customize chat component appearance
  </Card>
</CardGroup>

<Tip>
  **Getting Started**: Begin with Recent Chats and Conversation Chat for basic messaging functionality, then expand to Group Chat or Live Chat based on your specific use case and user needs.
</Tip>