> ## 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.
# Conversation Chat
> Complete messaging interface for one-on-one and group conversations with rich media support and real-time interactions
**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.
**Complete Chat Experience**
* Send and receive text messages
* Rich media support (images and videos)
* Message editing and deletion
* Real-time message delivery
**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
**Complete chat conversation interface**
The 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
```dart Flutter theme={null}
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.
```dart Flutter theme={null}
// 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 composition**
Components 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
```dart Flutter - Message Bubble theme={null}
Widget messageBubbleView(AmityMessage message) {
return AmityMessageBubble(
message: message,
);
}
```
```dart Flutter - Message Composer theme={null}
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.
```dart Flutter theme={null}
// 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 features**
Bottom 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
```dart Flutter theme={null}
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.
### User Actions Configuration
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
```json Default Configuration theme={null}
{
"conversation_chat_user_actions": [
{
"name": "mute",
"enabled": true
},
{
"name": "report",
"enabled": true
},
{
"name": "block",
"enabled": true
}
]
}
```
```json Hide Report Action theme={null}
{
"conversation_chat_user_actions": [
{
"name": "mute",
"enabled": true
},
{
"name": "report",
"enabled": false
},
{
"name": "block",
"enabled": true
}
]
}
```
```json Only Mute Action theme={null}
{
"conversation_chat_user_actions": [
{
"name": "mute",
"enabled": true
},
{
"name": "report",
"enabled": false
},
{
"name": "block",
"enabled": false
}
]
}
```
```json All Actions Disabled theme={null}
{
"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
**Choosing appropriate user actions**
Consider 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.
**Maintaining safe conversation environments**
While 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.
**Validating action configurations**
Test 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
**Integrating chat components into your app**
The 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.
**Tailoring the chat interface**
Customize 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 experiences**
Plan 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 setup**
Configure 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 interfaces**
Focus 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 gracefully**
Implement 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.
## Related Features
**All Chat Components**
Summary & architecture
**Multi-user Features**
Roles & member tools
**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.