> ## Documentation Index
> Fetch the complete documentation index at: https://social-b97141fb-auto-generate-llmstxt.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Group Chat
> Complete group conversation solution with member management, moderation tools, and rich messaging for multi-user interactions
**Key Benefit**: Build feature-rich group conversations with complete member management, role-based permissions, moderation tools, and interactive messaging capabilities all in pre-built components.
## Feature Overview
The Group Chat UIKit is designed to provide a complete solution for multi-user conversations within your application. It offers rich functionality for group creation, member management, and interactive messaging experiences. This component is ideal for building community spaces, team channels, or any feature requiring conversations among multiple participants.
**Complete Group Control**
* Create and customize group chats
* Edit group profiles and settings
* Privacy controls (public/private)
* Avatar and name management
**Advanced Member Controls**
* Add, remove, and ban members
* Role-based permissions system
* Moderator privilege management
* Member action controls
**Interactive Communication**
* Text, images, and videos
* Message reactions and replies
* Edit and delete capabilities
* Real-time message delivery
**Safety & Control**
* Message reporting system
* User banning and management
* Content moderation tools
* Notification preferences
**Platform Support**: Group Chat components are available on **iOS, Android, React, and Flutter**. Refer to the platform UIKit for React Native availability.
## Implementation Guide
**Main group conversation interface**
The primary components for group chat functionality and conversation management.
### Group Chat Page
The AmityGroupChatPage serves as the main interface for group conversations with real-time messaging capabilities.
### Required Parameters
| Parameter | Type | Description |
| ----------- | ------ | -------------------------------------------- |
| `channelId` | String | Unique identifier for the group chat channel |
### Features
| Feature | Description |
| ------------------- | ---------------------------------------------- |
| Real-time Display | Live message updates and conversation flow |
| Message Composition | Text, images, and videos |
| Message Actions | Reply, edit, delete, and reaction capabilities |
| Member Interaction | User profiles and member-specific actions |
| Link Preview | Automatic rich preview for shared URLs |
| User Mention | Tag and notify members using @ mentions |
### Code Examples
```dart Flutter - Group Chat Page theme={null}
Widget groupChatPage() {
return AmityGroupChatPage(
channelId: 'your-channel-id',
);
}
```
**Automatic Features**: The group chat page automatically handles real-time updates, message synchronization, link previews, user mentions, and user interactions through the underlying SDK.
**Creating and configuring new groups**
Components for setting up new group chats and managing initial configuration.
### Group Creation Flow
Create new group chats with member selection, naming, and privacy settings.
### Required Parameters
| Parameter | Type | Description |
| --------------- | ---------------- | ---------------------------------- |
| `selectedUsers` | List\ | Initial members for the group chat |
### Features
| Feature | Description |
| ----------------- | ---------------------------------------- |
| Group Naming | Set optional group name and description |
| Avatar Upload | Choose or upload group avatar image |
| Privacy Settings | Configure public or private group access |
| Member Management | View and manage selected members |
### Member Selection
Select users when creating groups or adding members to existing groups.
### Code Examples
```dart Flutter - Create Group theme={null}
Widget createGroupChatPage() {
// Create a list of users for this example
final List selectedUsers = [];
return AmityCreateGroupChatPage(
selectedUsers: selectedUsers,
);
}
```
```dart Flutter - Select Members theme={null}
Widget selectGroupMemberPage() {
// Create a channel for this example
final AmityChannel channel = AmityChannel();
channel.channelId = 'your-channel-id';
return AmityAddGroupMemberPage(
channel: channel,
);
}
```
**Group management and configuration**
Comprehensive settings and administrative controls for group management.
### Group Settings Page
Central hub for all group configuration and management options.
### Required Parameters
| Parameter | Type | Description |
| ------------- | ------------ | ------------------------------- |
| `channel` | AmityChannel | Group channel object |
| `isModerator` | Boolean | Current user's moderator status |
### Administrative Features
| Feature | Description |
| --------------------- | --------------------------------------------- |
| Profile Management | Edit group name, avatar, and description |
| Member Permissions | Configure who can post and manage content |
| Notification Settings | Group-wide and personal notification controls |
| Member Management | View, add, remove, and ban members |
| Moderation Tools | Access banned users and reporting features |
### Code Examples
```dart Flutter - Group Settings theme={null}
Widget groupSettingPage() {
// Create a channel for this example
final AmityChannel channel = AmityChannel();
channel.channelId = 'your-channel-id';
return AmityGroupSettingPage(
channel: channel,
isModerator: false,
);
}
```
```dart Flutter - Edit Profile theme={null}
Widget editGroupProfilePage() {
// Create a channel for this example
final AmityChannel channel = AmityChannel();
channel.channelId = 'your-channel-id';
return AmityEditGroupProfilePage(
channel: channel,
);
}
```
```dart Flutter - Notification Settings theme={null}
Widget groupNotificationPreferencePage() {
// Create a channel for this example
final AmityChannel channel = AmityChannel();
channel.channelId = 'your-channel-id';
return AmityGroupNotificationPreferencePage(
channel: channel,
);
}
```
```dart Flutter - Member Permissions theme={null}
Widget editGroupMemberPermissionsPage() {
// Create a channel for this example
final AmityChannel channel = AmityChannel();
channel.channelId = 'your-channel-id';
return AmityEditGroupMemberPermissionsPage(
channel: channel,
);
}
```
**User administration and moderation**
Tools for managing group members, permissions, and moderation actions.
### Member List Management
View and manage all group members with role-based controls.
### Features
| Feature | Description |
| ---------------------- | ---------------------------------------------- |
| Member Directory | List of all members and moderators |
| Member Actions | Report, remove, ban, mute, and promote options |
| Add Members | Search and add new users to the group |
| Banned User Management | View and manage banned members |
| Mute Members | Moderators can mute members from posting |
### Member Action Controls
Bottom sheet component for performing actions on individual group members.
### Required Parameters
| Parameter | Type | Description |
| ------------------------- | --------- | ------------------------------- |
| `user` | AmityUser | Target user for actions |
| `isCurrentUserModerator` | Boolean | Current user's moderator status |
| `isSelectedUserModerator` | Boolean | Target user's moderator status |
### Code Examples
```dart Flutter - Member List theme={null}
Widget groupMemberListPage() {
// Create a channel for this example
final AmityChannel channel = AmityChannel();
channel.channelId = 'your-channel-id';
return AmityGroupMemberListPage(
channel: channel,
);
}
```
```dart Flutter - Member Actions theme={null}
Widget groupMemberActionComponent() {
// Create a user for this example
final AmityUser user = AmityUser();
return AmityGroupMemberActionComponent(
user: user,
isCurrentUserModerator: true,
isSelectedUserModerator: false,
);
}
```
```dart Flutter - Add Members theme={null}
Widget addGroupMemberPage() {
// Create a channel for this example
final AmityChannel channel = AmityChannel();
channel.channelId = 'your-channel-id';
return AmityAddGroupMemberPage(
channel: channel,
);
}
```
```dart Flutter - Banned Members theme={null}
Widget bannedGroupMemberListPage() {
// Create a channel for this example
final AmityChannel channel = AmityChannel();
channel.channelId = 'your-channel-id';
return AmityBannedGroupMemberListPage(
channel: channel,
);
}
```
**Safety and content management tools**
Components for maintaining safe and appropriate group conversations.
### Message Reporting
Allow users to report inappropriate messages with predefined or custom reasons.
### Required Parameters
| Parameter | Type | Description |
| --------- | ------------ | ------------------------ |
| `message` | AmityMessage | Message object to report |
### Features
| Feature | Description |
| -------------------- | ------------------------------------------- |
| Predefined Reasons | Quick selection of common report categories |
| Custom Reporting | Option to provide detailed custom reasons |
| Automated Processing | Integration with moderation workflows |
### Code Examples
```dart Flutter - Message Reporting theme={null}
Widget messageReportComponent() {
// Create a message for this example
final AmityMessage message = AmityMessage();
// Report component
final reportComponent = AmityMessageReportComponent(
message: message,
);
// Return the report component for the example
return reportComponent;
}
```
**Moderation Integration**: Report submissions are automatically processed through the SDK's moderation system and can trigger configured moderation workflows.
**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
}
}
```
## Component Management Strategies
**Planning group creation to deletion workflow**
Design clear user flows for creating groups, managing settings, adding members, and handling group lifecycle events. Consider how users will discover groups, join conversations, and manage their participation.
**Implementing role-based access control**
Plan your group permission structure carefully, considering moderator privileges, member capabilities, and administrative controls. Use the built-in role system to maintain appropriate access levels.
**Building effective content management**
Configure reporting workflows, automated moderation responses, and escalation procedures. Plan how moderators will handle reported content and member management tasks.
## Best Practices
**Creating intuitive group interactions**
Design clear navigation between group functions, provide helpful onboarding for group creation, and ensure member management tools are easily accessible to appropriate users.
**Planning for group growth**
Consider how your groups will scale with member count, message volume, and administrative complexity. Plan appropriate limits and management tools for large groups.
**Maintaining secure group environments**
Implement appropriate privacy controls for different group types, ensure reporting mechanisms are easily accessible, and provide clear moderation capabilities for group administrators.
## Related Features
**Find Content Fast**
Search channels and messages
**Individual Messaging**
One-on-one conversation features
**Chat Management**
Organize and navigate conversations
**Implementation Strategy**: Start with AmityGroupChatPage for basic group messaging, then add AmityCreateGroupChatPage for group creation, and finally integrate the settings and moderation components as needed for your use case.