Skip to main content
Key Benefit: Seamlessly integrate complete chat functionality into your application with pre-built components that handle messaging, media sharing, reactions, and threading out of the box.

​
Feature Overview

This UIKit is designed to seamlessly integrate messaging functionalities into your application, enabling rich conversations between users. Whether you’re building a social network, a community platform, or a customer support system, our Conversation Chat UIKit equips you with everything you need to create engaging messaging experiences.

Core Messaging

Complete Chat Experience
  • Send and receive text messages
  • Rich media support (images, videos, etc.)
  • Message editing and deletion
  • Real-time message delivery

Interactive Features

Enhanced Engagement
  • Message reactions with emojis
  • Message threading and replies
  • User action controls
  • Conversation management
Platform Support: Conversation Chat components are currently supported on Flutter only. Additional platform implementations are in progress.

​
Implementation Guide

  • Main Chat Interface
  • Message Components
  • User Actions
Complete chat conversation interfaceThe AmityChatPage serves as the main component for displaying and interacting with individual chat conversations in your application.

​
Required Parameters

ParameterTypeDescription
channelIdStringUnique identifier for the chat channel
userIdStringCurrent user’s unique identifier
userDisplayNameStringDisplay name for the current user
avatarUrlStringURL for the user’s avatar image

​
Features

FeatureDescription
Conversation ViewComplete chat interface with message history and input controls
Channel ManagementMute/unmute toggle and conversation settings
Network AwarenessOffline mode indication and automatic reconnection
Message OrganizationChronological display with date separators

​
Code Examples

Widget chatPage() {
  return AmityChatPage(
    channelId: 'channelId',
    userId: 'userId',
    userDisplayName: 'displayName',
    avatarUrl: 'avatarUrl',
  );
}
Important Note: The AmityChatPage automatically handles message loading, real-time updates, and user interactions.

​
Component Management Strategies

Integrating chat components into your appThe UIKit components are designed to work seamlessly together. Use AmityChatPage as your main interface, and leverage individual components like MessageBubbleView and MessageComposer when you need granular control over specific parts of the chat experience.
Tailoring the chat interfaceCustomize the appearance and behavior of chat components to match your app’s design. The UIKit provides theming options and component configuration to align with your brand while maintaining core functionality.
Designing intuitive chat experiencesPlan your navigation flow between chat components and other parts of your app. Consider how users will access conversations, manage settings, and interact with message features for the best user experience.

​
Best Practices

Optimizing UIKit setupConfigure the UIKit components properly for your use case. Ensure proper parameter passing between components and handle callback functions appropriately. The underlying SDK handles all performance optimization automatically.
Creating engaging chat interfacesFocus on clear visual hierarchy, intuitive interaction patterns, and responsive design. The UIKit provides pre-built interactions while allowing you to customize the presentation layer to match your app’s experience.
Managing user interactions gracefullyImplement proper error handling for user actions and provide clear feedback for loading states, connection issues, and user interactions. The SDK manages network reliability while the UIKit handles user interface feedback.

Chat Overview

All Chat Components Summary & architecture

Group Chat

Multi-user Features Roles & member tools

Live Chat

Streaming Chat High-volume events
Implementation Strategy: Start with the AmityChatPage component for a complete chat experience, then customize individual components like MessageBubbleView and MessageComposer as needed for your specific use case.