> ## Documentation Index
> Fetch the complete documentation index at: /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.

> [card] [Chat Search](/uikit/components/chat/search-chat.md)
>
> Powerful search across channels and messages

> [card] [Recent Chats](/uikit/components/chat/recent-chats.md)
>
> Chat list and channel management

> [card] [Conversation Chat](/uikit/components/chat/conversation-chat.md)
>
> One-on-one and group messaging interface

> [card] [Live Chat](/uikit/components/chat/live-chat.md)
>
> Real-time chat for live events and streaming

## Key Features

> [accordion] Real-Time Messaging
>
> * Instant message delivery and receipt
> * Read and unread message state
> * Message synchronization across devices

> [accordion] Rich Media Support
>
> * Text messages with formatting
> * Image and video sharing

> [accordion] Advanced Features
>
> * Message reactions and replies
> * Mentions in messages
> * Message editing and deletion
> * Message search and filtering
> * Archive and unarchive chats
> * Push notifications

> [accordion] Moderation Tools
>
> * Message reporting
> * User blocking and muting
> * Profanity filtering
> * Admin moderation controls

## Platform Support

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

> [card] Mobile Native
>
> **iOS & Android**
>
> * Native performance and animations
> * Platform-specific UI patterns
> * Keyboard handling and input optimization
> * Push notification integration

> [card] Web & Cross-Platform
>
> **React Web & React Native**
>
> * Embeds as React components via `AmityUiKitProvider`
> * Responsive design for all screen sizes

> [!NOTE]
>
> **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.

## Getting Started

### Basic Implementation

**1. Initialize Chat**

Set up the chat client with your social.plus credentials

**2. Choose Components**

Select the chat components that fit your use case

**3. Customize Appearance**

Apply your brand colors and styling

**4. Configure Features**

Enable or disable specific chat features

### Quick Start Example

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

> [!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.md#add-chat) for the peer dependencies and save-to-gallery permissions chat requires.

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

**1. Authentication**

User authenticates with social.plus credentials

**2. Channel Connection**

Connect to specific chat channels or rooms

**3. Real-Time Sync**

Establish WebSocket connection for live updates

**4. Message Handling**

Send, receive, and display messages in real-time

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

```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.md) and [Localization](/uikit/customization/localization.md).

## Performance Considerations

> [card] Message Pagination
>
> Efficiently load message history with pagination

> [card] Image Optimization
>
> Automatic image compression and caching

> [card] Offline Support
>
> Queue messages when offline, sync when online

> [card] Memory Management
>
> Optimize memory usage for long conversations

### Best Practices

> [accordion] Message Loading
>
> * Implement pagination for message history
> * Use virtual scrolling for large conversations
> * Cache recent messages locally
> * Preload critical attachments

> [accordion] Real-Time Updates
>
> * Use WebSocket connections efficiently
> * Implement proper reconnection logic
> * Handle connection state changes gracefully
> * Optimize update frequency

> [accordion] User Experience
>
> * Show loading states and progress indicators
> * Implement smooth animations and transitions
> * Handle errors gracefully with user feedback
> * Support keyboard shortcuts and accessibility

## Security Features

> [!NOTE]
>
> All chat components include built-in security features to protect user communications and prevent abuse.

> [card] Secure Transport
>
> Messages are encrypted in transit (TLS)

> [card] Content Moderation
>
> AI-powered profanity and content filtering

> [card] User Controls
>
> Block, mute, and report functionality

> [card] Admin Tools
>
> Comprehensive moderation and management tools

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

> [card] [Chat Search](/uikit/components/chat/search-chat.md)
>
> Add powerful search capabilities to your chat

> [card] [Recent Chats](/uikit/components/chat/recent-chats.md)
>
> Create a comprehensive chat list interface

> [card] [Conversation Chat](/uikit/components/chat/conversation-chat.md)
>
> Implement one-on-one and group messaging

> [card] [Live Chat](/uikit/components/chat/live-chat.md)
>
> Build real-time community chat features


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