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

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

## 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>
    );
  }
  ```

  ```javascript React Native theme={null}
  import { AmityChatScreen } from '@amityco/react-native-ui-kit';

  function ChatScreen({ route }) {
    const { channelId } = route.params;
    
    return (
      <AmityChatScreen
        channelId={channelId}
        customization={{
          primaryColor: '#007AFF',
          secondaryColor: '#5856D6'
        }}
      />
    );
  }
  ```
</CodeGroup>

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