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

# Chat Components Overview

> Complete guide to social.plus UIKit chat components for building messaging experiences

social.plus UIKit provides a comprehensive set of chat components for building modern messaging experiences. These components are designed to work seamlessly across all platforms with consistent functionality and customizable styling.

<CardGroup cols={2}>
  <Card title="Chat Search" icon="magnifying-glass" href="/uikit/components/chat/search-chat">
    Powerful search across channels and messages
  </Card>

  <Card title="Recent Chats" icon="list" href="/uikit/components/chat/recent-chats">
    Chat list and channel management
  </Card>

  <Card title="Conversation Chat" icon="comments" href="/uikit/components/chat/conversation-chat">
    One-on-one and group messaging interface
  </Card>

  <Card title="Live Chat" icon="broadcast-tower" href="/uikit/components/chat/live-chat">
    Real-time chat for live events and streaming
  </Card>
</CardGroup>

## Key Features

<AccordionGroup>
  <Accordion title="Real-Time Messaging">
    * Instant message delivery and receipt
    * Read and unread message state
    * Message synchronization across devices
  </Accordion>

  <Accordion title="Rich Media Support">
    * Text messages with formatting
    * Image and video sharing
  </Accordion>

  <Accordion title="Advanced Features">
    * Message reactions and replies
    * Mentions in messages
    * Message editing and deletion
    * Message search and filtering
    * Archive and unarchive chats
    * Push notifications
  </Accordion>

  <Accordion title="Moderation Tools">
    * Message reporting
    * User blocking and muting
    * Profanity filtering
    * Admin moderation controls
  </Accordion>
</AccordionGroup>

## Platform Support

All chat components are available across platforms with platform-specific optimizations:

<CardGroup cols={2}>
  <Card title="Mobile Native" icon="mobile">
    **iOS & Android**

    * Native performance and animations
    * Platform-specific UI patterns
    * Keyboard handling and input optimization
    * Push notification integration
  </Card>

  <Card title="Web & Cross-Platform" icon="globe">
    **React Web & React Native**

    * Embeds as React components via `AmityUiKitProvider`
    * Responsive design for all screen sizes
  </Card>
</CardGroup>

<Info>
  **React Native** ships Chat UIKit from v4.3.0 of `@amityco/react-native-social-uikit`, covering the chat list, conversation and group chat, and chat search. Live chat is not included.
</Info>

## Getting Started

### Basic Implementation

<Steps>
  <Step title="Initialize Chat">
    Set up the chat client with your social.plus credentials
  </Step>

  <Step title="Choose Components">
    Select the chat components that fit your use case
  </Step>

  <Step title="Customize Appearance">
    Apply your brand colors and styling
  </Step>

  <Step title="Configure Features">
    Enable or disable specific chat features
  </Step>
</Steps>

### Quick Start Example

<CodeGroup>
  ```swift iOS theme={null}
  import AmityUIKit4

  // AmityChatPage is a SwiftUI view. Wrap it to present it from a UIKit stack.
  let chatPage = AmityChatPage(channelId: "your_channel_id")
  let hostingController = AmitySwiftUIHostingController(rootView: chatPage)

  navigationController?.pushViewController(hostingController, animated: true)
  ```

  ```kotlin Android theme={null}
  import com.amity.socialcloud.uikit.chat.compose.conversation.AmityChatPageActivity

  // The chat page is an Activity. Launch it with its Intent factory.
  startActivity(
      AmityChatPageActivity.newIntent(context, channelId = "your_channel_id")
  )
  ```

  ```tsx React theme={null}
  import { AmityUiKitProvider, AmityUiKitChatV4 } from '@amityco/ui-kit';
  import config from './uikit.config.json';

  function MyChatApp() {
    return (
      <AmityUiKitProvider
        configs={config}
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        apiEndpoint="https://api.{API_REGION}.amity.co"
      >
        <AmityUiKitChatV4 />
      </AmityUiKitProvider>
    );
  }
  ```

  ```jsx React Native theme={null}
  import { AmityUiKitProvider, AmityUiKitChat } from '@amityco/react-native-social-uikit';

  // Requires @amityco/react-native-social-uikit v4.3.0 or later.
  function MyChatApp() {
    return (
      <AmityUiKitProvider
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
      >
        <AmityUiKitChat />
      </AmityUiKitProvider>
    );
  }
  ```
</CodeGroup>

<Note>
  **React Native**: `AmityUiKitChat` opens at the chat list, and every other chat screen is reached from there. From v4.3.1, every chat page is also exported on its own under the same names as the Web UIKit. To open a specific conversation directly — for example from a push notification — render `<AmityChatPage channelId="..." />` inside `AmityPageRenderer`; each component page shows its React Native example. Pages that take props export a `<PageName>Props` type, such as `AmityChatPageProps`. The page you render is the first screen in its stack, so its back button has nothing to go back to — close it from your app's own navigation. See [Installation](/uikit/getting-started/installation#add-chat) for the peer dependencies and save-to-gallery permissions chat requires.
</Note>

## Component Architecture

### Chat System Overview

```mermaid theme={null}
graph TD
    A[Chat Client] --> B[Recent Chats List]
    A --> C[Conversation View]
    A --> D[Live Chat Room]
    
    B --> E[Channel Preview]
    B --> F[User Status]
    
    C --> G[Message List]
    C --> H[Message Input]
    C --> I[Media Picker]
    
    D --> J[Live Messages]
    D --> K[Participant List]
    D --> L[Moderator Tools]
```

### Data Flow

<Steps>
  <Step title="Authentication">
    User authenticates with social.plus credentials
  </Step>

  <Step title="Channel Connection">
    Connect to specific chat channels or rooms
  </Step>

  <Step title="Real-Time Sync">
    Establish WebSocket connection for live updates
  </Step>

  <Step title="Message Handling">
    Send, receive, and display messages in real-time
  </Step>
</Steps>

## Customization Options

Chat pages follow the UIKit page / component / element ID system. Set a network-wide theme in the top-level `theme`, then override a specific chat surface by its ID under `customizations` in your `uikit.config.json` — the same pattern used across every UIKit page.

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

```json uikit.config.json theme={null}
{
  "preferred_theme": "default",
  "theme": {
    "light": { "primary_color": "#1054DE", "background_color": "#FFFFFF" }
  },
  "excludes": [],
  "customizations": {
    "chat_home_page/*/*": {
      "theme": {
        "light": { "primary_color": "#1054DE" }
      }
    },
    "live_chat/*/*": {
      "theme": {
        "light": { "primary_color": "#1054DE" }
      }
    }
  }
}
```

Chat page IDs include `chat_home_page`, `chat_page`, `group_chat_page`, and `live_chat`. For the full theming and localization model, see [Component styling](/uikit/customization/component-styling) and [Localization](/uikit/customization/localization).

## Performance Considerations

<CardGroup cols={2}>
  <Card title="Message Pagination" icon="page">
    Efficiently load message history with pagination
  </Card>

  <Card title="Image Optimization" icon="image">
    Automatic image compression and caching
  </Card>

  <Card title="Offline Support" icon="wifi-slash">
    Queue messages when offline, sync when online
  </Card>

  <Card title="Memory Management" icon="microchip">
    Optimize memory usage for long conversations
  </Card>
</CardGroup>

### Best Practices

<AccordionGroup>
  <Accordion title="Message Loading">
    * Implement pagination for message history
    * Use virtual scrolling for large conversations
    * Cache recent messages locally
    * Preload critical attachments
  </Accordion>

  <Accordion title="Real-Time Updates">
    * Use WebSocket connections efficiently
    * Implement proper reconnection logic
    * Handle connection state changes gracefully
    * Optimize update frequency
  </Accordion>

  <Accordion title="User Experience">
    * Show loading states and progress indicators
    * Implement smooth animations and transitions
    * Handle errors gracefully with user feedback
    * Support keyboard shortcuts and accessibility
  </Accordion>
</AccordionGroup>

## Security Features

<Info>
  All chat components include built-in security features to protect user communications and prevent abuse.
</Info>

<CardGroup cols={2}>
  <Card title="Secure Transport" icon="lock">
    Messages are encrypted in transit (TLS)
  </Card>

  <Card title="Content Moderation" icon="shield">
    AI-powered profanity and content filtering
  </Card>

  <Card title="User Controls" icon="user-shield">
    Block, mute, and report functionality
  </Card>

  <Card title="Admin Tools" icon="gavel">
    Comprehensive moderation and management tools
  </Card>
</CardGroup>

## Integration Examples

### Simple Chat Integration

For basic one-on-one or group messaging:

1. **Recent Chats List** - Show user's active conversations
2. **Conversation Chat** - Full messaging interface
3. **Basic customization** - Apply brand colors and styling

### Live Event Chat

For live streaming or event chat:

1. **Live Chat Room** - Real-time community messaging
2. **Moderation tools** - Admin controls for large audiences
3. **Custom reactions** - Event-specific reactions and features

### Customer Support Chat

For customer service integration:

1. **Conversation Chat** - Agent-customer messaging
2. **Media sharing** - Image and video support
3. **Admin features** - Supervisor tools and analytics

## Next Steps

<CardGroup cols={2}>
  <Card title="Chat Search" href="/uikit/components/chat/search-chat">
    Add powerful search capabilities to your chat
  </Card>

  <Card title="Recent Chats" href="/uikit/components/chat/recent-chats">
    Create a comprehensive chat list interface
  </Card>

  <Card title="Conversation Chat" href="/uikit/components/chat/conversation-chat">
    Implement one-on-one and group messaging
  </Card>

  <Card title="Live Chat" href="/uikit/components/chat/live-chat">
    Build real-time community chat features
  </Card>
</CardGroup>


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