Conversation Chat

Key Benefit: Seamlessly integrate complete chat functionality into your application with pre-built components that handle messaging, media sharing, reactions, and replies 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 and videos)
Message editing and deletion
Real-time message delivery

Interactive Features

Enhanced Engagement

Message reactions with emojis
Message replies and quoted context
User action controls
Conversation management

Platform Support: Conversation Chat components are available on iOS, Android, React, and Flutter. Refer to the platform UIKit for React Native availability.

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

Parameter	Type	Description
`channelId`	String	Unique identifier for the chat channel
`userId`	String	Current user’s unique identifier
`userDisplayName`	String	Display name for the current user
`avatarUrl`	String	URL for the user’s avatar image

Features

Feature	Description
Conversation View	Complete chat interface with message history and input controls
Channel Management	Mute/unmute toggle and conversation settings
Network Awareness	Offline mode indication and automatic reconnection
Message Organization	Chronological display with date separators
Link Preview	Automatic rich preview for shared URLs

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, link previews, and user interactions.

Chat Page Behavior

Customize navigation and interaction behavior for the chat page.

// Example: Custom implementation
class CustomChatPageBehavior extends AmityChatPageBehavior {
  @override
  void onAvatarTap(
    BuildContext context,
    String? avatarUrl,
    String? userId,
  ) {
    // Override the default behavior to navigate to do action when avatar is tapped
  }
}

Individual message rendering and compositionComponents for displaying and creating messages within the chat interface.

Message Bubble Rendering

The AmityMessageBubble renders individual chat messages as bubbles in the conversation view.

Features

Feature	Description
Content Rendering	Support for text, images, videos
Interaction Handlers	Tap, long-press actions for message operations
Rich Content	URL detection, media previews, and thumbnails
Error Handling	Retry options for failed messages

Message Composition

The AmityMessageComposer provides functionality for composing and sending messages within chat conversations.

Required Parameters

Parameter	Type	Description
`subChannelId`	String	Sub-channel identifier for the conversation
`avatarUrl`	String	URL for the user’s avatar image
`action`	MessageComposerAction	Callback actions for message events

Code Examples

Widget messageBubbleView(AmityMessage message) {
  return AmityMessageBubble(
    message: message,
  );
}

Widget messageComposer() {
  return AmityMessageComposer(
    subChannelId: 'channelId',
    avatarUrl: 'avatarUrl',
    action: MessageComposerAction(
      onMessageCreated: () {
        // Handle message created callback
        print('Message created');
      },
      onDissmiss: () {
        // Handle dismiss callback
        print('Composer dismissed');
      },
    ),
  );
}

Message Bubble Behavior

Customize navigation and interaction behavior for message bubbles.

// Example: Custom implementation
class CustomMessageBubbleBehavior extends AmityMessageBubbleBehavior {
  @override
  void onAvatarTap(
    BuildContext context,
    String? avatarUrl,
    String? userId,
  ) {
    // Override the default behavior to navigate to do action when avatar is tapped
  }
}

User interaction and management featuresBottom sheet component for performing actions on users within conversations.

Features

Feature	Description
Notification Control	Mute/unmute notifications for the conversation
User Management	Report/unreport and block/unblock user options
Action Sheet UI	Clean bottom sheet interface for user actions

Required Parameters

Parameter	Type	Description
`user`	AmityUser	User object for the target user
`isMute`	Boolean	Current mute status of the conversation
`isUserBlocked`	Boolean	Current block status of the user

Code Examples

Widget conversationChatUserActionComponent() {
  // Create a user for this example
  final AmityUser user = AmityUser();

  return AmityConversationChatUserActionComponent(
    user: user,
    isMute: false,
    isUserBlocked: false,
  );
}

User Actions: This component provides a comprehensive set of user management actions while maintaining a clean and intuitive interface.

Control which user actions are available in conversation chats through JSON configuration.

Configuration Overview

Configure which actions appear in the user action menu by enabling or disabling specific options in your AmityUIKitConfig.json file. Set "enabled": false for any action you want to hide from the user action menu.

Available Actions

Action	Description	Default
`mute`	Mute/unmute notifications for the conversation	Enabled
`report`	Report the user for inappropriate behavior	Enabled
`block`	Block/unblock the user	Enabled

Configuration Examples

{
  "conversation_chat_user_actions": [
    {
      "name": "mute",
      "enabled": true
    },
    {
      "name": "report",
      "enabled": true
    },
    {
      "name": "block",
      "enabled": true
    }
  ]
}

{
  "conversation_chat_user_actions": [
    {
      "name": "mute",
      "enabled": true
    },
    {
      "name": "report",
      "enabled": false
    },
    {
      "name": "block",
      "enabled": true
    }
  ]
}

{
  "conversation_chat_user_actions": [
    {
      "name": "mute",
      "enabled": true
    },
    {
      "name": "report",
      "enabled": false
    },
    {
      "name": "block",
      "enabled": false
    }
  ]
}

{
  "conversation_chat_user_actions": [
    {
      "name": "mute",
      "enabled": false
    },
    {
      "name": "report",
      "enabled": false
    },
    {
      "name": "block",
      "enabled": false
    }
  ]
}

Global Configuration: These user action configurations are set at the global level in AmityUIKitConfig.json and apply to all conversation chat components automatically.

Configuration Benefits

Benefit	Description
Flexibility	Enable only the actions that make sense for your app’s use case
User Safety	Control moderation and safety features available to users
Simplified UI	Reduce clutter by hiding unnecessary options
Consistent Experience	Global configuration ensures consistency across all conversations

Best Practices

Action Selection Strategy

Choosing appropriate user actionsConsider your app’s moderation strategy when configuring user actions. If you have a separate reporting system, you might disable the built-in report action. For community-focused apps, keep all safety features enabled to empower users.

User Safety Considerations

Maintaining safe conversation environmentsWhile you can disable actions, consider the impact on user safety. Block and report features are important safety tools. Only disable them if you have alternative mechanisms in place.

Configuration Testing

Validating action configurationsTest your configuration changes thoroughly across different user scenarios. Ensure that disabling actions doesn’t negatively impact user experience or safety features in your application.

Component Management Strategies

Component Integration

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 AmityMessageBubble and MessageComposer when you need granular control over specific parts of the chat experience.

UI Customization Strategy

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.

User Flow Optimization

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

Component Configuration

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.

User Experience Design

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.

Error Handling & Feedback

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 AmityMessageBubble and MessageComposer as needed for your specific use case.

Powered by

Getting Started

Customization

Components

Release Notes

Support

Feature Overview

Core Messaging

Interactive Features

Implementation Guide

Required Parameters

Features

Code Examples

Chat Page Behavior

Message Bubble Rendering

Features

Message Composition

Required Parameters

Code Examples

Message Bubble Behavior

Features

Required Parameters

Code Examples

User Actions Configuration

Configuration Overview

Available Actions

Configuration Examples

Configuration Benefits

Best Practices

Component Management Strategies

Best Practices

Chat Overview

Group Chat

Live Chat

​Feature Overview

Core Messaging

Interactive Features

​Implementation Guide

​Required Parameters

​Features

​Code Examples

​Chat Page Behavior

​Message Bubble Rendering

​Features

​Message Composition

​Required Parameters

​Code Examples

​Message Bubble Behavior

​Features

​Required Parameters

​Code Examples

​User Actions Configuration

​Configuration Overview

​Available Actions

​Configuration Examples

​Configuration Benefits

​Best Practices

​Component Management Strategies

​Best Practices

​Related Features

Chat Overview

Group Chat

Live Chat

Feature Overview

Implementation Guide

Required Parameters

Features

Code Examples

Chat Page Behavior

Message Bubble Rendering

Features

Message Composition

Required Parameters

Code Examples

Message Bubble Behavior

Features

Required Parameters

Code Examples

User Actions Configuration

Configuration Overview

Available Actions

Configuration Examples

Configuration Benefits

Best Practices

Component Management Strategies

Best Practices

Related Features