​
Chat Components

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.

Conversation Chat

One-on-one and group messaging interface

Live Chat

Real-time chat for live events and streaming

Recent Chats

Chat list and channel management

​
Key Features

​
Platform Support

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

Mobile Native

iOS & Android
  • Native performance and animations
  • Platform-specific UI patterns
  • Keyboard handling and input optimization
  • Push notification integration

Web & Cross-Platform

React Web & React Native
  • Progressive Web App support
  • Responsive design for all screen sizes
  • WebRTC integration for voice/video
  • Service worker for offline support

​
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

import AmityUIKit

// Initialize chat view controller
let chatVC = AmityChatViewController()
chatVC.channelId = "your_channel_id"

// Present chat interface
navigationController?.pushViewController(chatVC, animated: true)

​
Component Architecture

​
Chat System Overview

​
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

​
Theme Configuration

{
  "chat_theme": {
    "light": {
      "message_bubble_sent": "#007AFF",
      "message_bubble_received": "#E5E5EA",
      "text_color_sent": "#FFFFFF",
      "text_color_received": "#000000",
      "timestamp_color": "#8E8E93",
      "background_color": "#FFFFFF"
    },
    "dark": {
      "message_bubble_sent": "#0A84FF",
      "message_bubble_received": "#38383A",
      "text_color_sent": "#FFFFFF",
      "text_color_received": "#FFFFFF",
      "timestamp_color": "#8E8E93",
      "background_color": "#000000"
    }
  }
}

​
Feature Configuration

{
  "chat_features": {
    "message_reactions": true,
    "message_replies": true,
    "message_editing": true,
    "message_deletion": true,
    "file_sharing": true,
    "image_sharing": true,
    "voice_messages": true,
    "typing_indicators": true,
    "read_receipts": true,
    "push_notifications": true
  }
}

​
Performance Considerations

Message Pagination

Efficiently load message history with pagination

Image Optimization

Automatic image compression and caching

Offline Support

Queue messages when offline, sync when online

Memory Management

Optimize memory usage for long conversations

​
Best Practices

​
Security Features

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

Message Encryption

End-to-end encryption for secure messaging

Content Moderation

AI-powered profanity and content filtering

User Controls

Block, mute, and report functionality

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. File sharing - Document and image support
  3. Admin features - Supervisor tools and analytics

​
Next Steps

Conversation Chat

Implement one-on-one and group messaging

Live Chat

Build real-time community chat features

Recent Chats

Create a comprehensive chat list interface