> ## Documentation Index
> Fetch the complete documentation index at: https://social-b97141fb-feat-user-history-moderation-detail.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

<Info>
  **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.
</Info>

## 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.

<CardGroup cols={2}>
  <Card title="Group Management" icon="users">
    **Complete Group Control**

    * Create and customize group chats
    * Edit group profiles and settings
    * Privacy controls (public/private)
    * Avatar and name management
  </Card>

  <Card title="Member Administration" icon="user-gear">
    **Advanced Member Controls**

    * Add, remove, and ban members
    * Role-based permissions system
    * Moderator privilege management
    * Member action controls
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Rich Messaging" icon="comments">
    **Interactive Communication**

    * Text, images, and videos
    * Message reactions and replies
    * Edit and delete capabilities for your own messages
    * Real-time message delivery
  </Card>

  <Card title="Moderation Tools" icon="shield">
    **Safety & Control**

    * Message reporting system
    * User banning and management
    * Content moderation tools
    * Notification preferences
  </Card>
</CardGroup>

<Info>
  **Message-level moderation**: Moderator deletion of another member's message is separate from member-level actions such as banning, muting, removing, or changing roles. It is available from iOS UIKit **4.23.0**, Android UIKit **4.23.0**, Web (React) UIKit **4.20.0**, and React Native UIKit **4.3.0**.
</Info>

<Info>
  **Platform Support**: Group Chat components are available on **iOS, Android, React, React Native, and Flutter**. On **React Native**, these screens ship from v4.3.0 as part of `AmityUiKitChat`, and from v4.3.1 each page can also be rendered on its own inside `AmityPageRenderer` — see [Quick Start](/uikit/components/chat/overview#quick-start-example). Only pages are exported on React Native; the building-block components shown here (list, bubble, composer, action sheets) aren't.
</Info>

## Implementation Guide

<Tabs>
  <Tab title="Core Group Chat">
    **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

    <CodeGroup>
      ```swift iOS theme={null}
      let page = AmityGroupChatPage(channelId: "your-channel-id")
      let viewController = AmitySwiftUIHostingController(rootView: page)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun groupChatPage() {
          AmityGroupChatPage(channelId = "your-channel-id")
      }
      ```

      ```tsx React theme={null}
      import { AmityGroupChatPage } from '@amityco/ui-kit';

      <AmityGroupChatPage channelId="your-channel-id" />;
      ```

      ```dart Flutter theme={null}
      Widget groupChatPage() {
        return AmityGroupChatPage(
          channelId: 'your-channel-id',
        );
      }
      ```

      ```jsx React Native theme={null}
      <AmityPageRenderer>
        <AmityGroupChatPage channelId="your-channel-id" />
      </AmityPageRenderer>
      ```
    </CodeGroup>

    <Note>
      **Automatic Features**: The group chat page automatically handles real-time updates, message synchronization, link previews, user mentions, and user interactions through the underlying SDK.
    </Note>
  </Tab>

  <Tab title="Group Creation & Setup">
    **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\<AmityUser> | 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

    <CodeGroup>
      ```swift iOS - Create Group theme={null}
      let page = AmityCreateGroupChatPage(selectedUsers: selectedUsers)
      let viewController = AmitySwiftUIHostingController(rootView: page)
      ```

      ```kotlin Android - Create Group theme={null}
      @Composable
      fun createGroupChatPage(selectedUsers: List<AmityUser>) {
          AmityCreateGroupChatPage(selectedUsers = selectedUsers)
      }
      ```

      ```tsx React - Create Group theme={null}
      import { AmityCreateGroupChatPage } from '@amityco/ui-kit';

      <AmityCreateGroupChatPage selectedUsers={selectedUsers} />;
      ```

      ```dart Flutter - Create Group theme={null}
      Widget createGroupChatPage() {
        // Create a list of users for this example
        final List<AmityUser> selectedUsers = [];

        return AmityCreateGroupChatPage(
          selectedUsers: selectedUsers,
        );
      }
      ```

      ```jsx React Native - Create Group theme={null}
      // selectedUsers: Amity.User[] (the members picked for the new group)
      <AmityPageRenderer>
        <AmityCreateGroupChatPage selectedUsers={selectedUsers} />
      </AmityPageRenderer>
      ```

      ```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,
        );
      }
      ```

      ```jsx React Native - Select Members theme={null}
      // selectedGroupMember is optional: users to show as already selected
      <AmityPageRenderer>
        <AmitySelectGroupMemberPage />
      </AmityPageRenderer>
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Group Settings & Administration">
    **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 |

    <Info>
      **React Native** (v4.3.0+): Moderators choose the group's notification mode: **Default** (members get notifications and can turn them off), **Silent** (no notifications for anyone), or **Subscribe** (off by default, and members can opt in). Members turn notifications for the group on or off, unless a moderator has disabled them, in which case a banner explains this.
    </Info>

    ### Code Examples

    <CodeGroup>
      ```swift iOS - Group Settings theme={null}
      let page = AmityGroupSettingPage(channelId: "your-channel-id", isModerator: false)
      let viewController = AmitySwiftUIHostingController(rootView: page)

      // Related pages
      AmityEditGroupProfilePage(channelId: "your-channel-id", displayName: "Team", avatarURL: nil)
      AmityGroupNotificationPreferencePage(channelId: "your-channel-id", isSilentByModerator: false)
      AmityEditGroupMemberPermissionsPage(channelId: "your-channel-id", isMuted: false)
      ```

      ```kotlin Android - Group Settings theme={null}
      @Composable
      fun groupSettingPage() {
          AmityGroupSettingPage(channelId = "your-channel-id")
      }

      // Related pages
      // AmityEditGroupProfilePage(channelId = "your-channel-id")
      // AmityGroupNotificationPreferencePage(channelId = "your-channel-id")
      // AmityEditGroupMemberPermissionsPage(channelId = "your-channel-id")
      ```

      ```tsx React - Group Settings theme={null}
      import {
        AmityGroupSettingPage,
        AmityEditGroupProfilePage,
        AmityGroupNotificationPreferencePage,
        AmityEditGroupMemberPermissionsPage,
      } from '@amityco/ui-kit';

      <AmityGroupSettingPage channelId="your-channel-id" />;
      ```

      ```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,
        );
      }
      ```

      ```jsx React Native - Group Settings theme={null}
      <AmityPageRenderer>
        <AmityGroupSettingPage channelId="your-channel-id" />
      </AmityPageRenderer>
      ```

      ```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,
        );
      }
      ```

      ```jsx React Native - Edit Profile theme={null}
      <AmityPageRenderer>
        <AmityEditGroupProfilePage channelId="your-channel-id" />
      </AmityPageRenderer>
      ```

      ```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,
        );
      }
      ```

      ```jsx React Native - Notification Settings theme={null}
      <AmityPageRenderer>
        <AmityGroupNotificationPreferencePage channelId="your-channel-id" />
      </AmityPageRenderer>
      ```

      ```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,
        );
      }
      ```

      ```jsx React Native - Member Permissions theme={null}
      <AmityPageRenderer>
        <AmityEditGroupMemberPermissionsPage channelId="your-channel-id" />
      </AmityPageRenderer>
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Member Management">
    **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 users by display name and add them 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

    <CodeGroup>
      ```swift iOS - Member List theme={null}
      let page = AmityGroupMemberListPage(channelId: "your-channel-id", isModerator: false)
      let viewController = AmitySwiftUIHostingController(rootView: page)

      // Related pages
      AmityAddGroupMemberPage(channelId: "your-channel-id")
      AmityBannedGroupMemberListPage(channelId: "your-channel-id", isModerator: false)
      ```

      ```kotlin Android - Member List theme={null}
      @Composable
      fun groupMemberListPage() {
          AmityGroupMemberListPage(channelId = "your-channel-id")
      }

      // Related pages
      // AmityAddGroupMemberPage(channelId = "your-channel-id")
      // AmityBannedGroupMemberListPage(channelId = "your-channel-id")
      ```

      ```tsx React - Member List theme={null}
      import {
        AmityGroupMemberListPage,
        AmityAddGroupMemberPage,
        AmityBannedGroupMemberListPage,
      } from '@amityco/ui-kit';

      <AmityGroupMemberListPage channelId="your-channel-id" />;
      ```

      ```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,
        );
      }
      ```

      ```jsx React Native - Member List theme={null}
      <AmityPageRenderer>
        <AmityGroupMemberListPage channelId="your-channel-id" />
      </AmityPageRenderer>
      ```

      ```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,
        );
      }
      ```

      ```jsx React Native - Add Members theme={null}
      <AmityPageRenderer>
        <AmityAddGroupMemberPage channelId="your-channel-id" />
      </AmityPageRenderer>
      ```

      ```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,
        );
      }
      ```

      ```jsx React Native - Banned Members theme={null}
      <AmityPageRenderer>
        <AmityBannedGroupMemberListPage channelId="your-channel-id" />
      </AmityPageRenderer>
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Moderation & Reporting">
    **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 |

    <Info>
      **React Native** (v4.3.0+): Moderators can delete any member's message, not only their own. Members can report and unreport messages and other members. A moderator badge appears on moderators' avatars.
    </Info>

    ### Code Examples

    <CodeGroup>
      ```kotlin Android - Message Reporting theme={null}
      @Composable
      fun messageReportPage() {
          AmityMessageReportPage(messageId = "your-message-id")
      }
      ```

      ```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;
      }
      ```
    </CodeGroup>

    <Note>
      **Moderation Integration**: Report submissions are automatically processed through the SDK's moderation system and can trigger configured moderation workflows.
    </Note>

    ### Moderator Message Deletion

    Group moderators can delete messages authored by other members from iOS UIKit **4.23.0**, Android UIKit **4.23.0**, and Web (React) UIKit **4.20.0**. This is a message-level moderation action, separate from the member-level ban, mute, removal, and role-management actions covered under Member Management.

    ### Behavior

    | Aspect | Detail |
    | - | - |
    | Who can delete | Members holding the channel moderator role |
    | What can be deleted | Any member's message in the group chat |
    | Where it appears | The message action menu in the group chat message list |
    | Integration required | None — the delete action appears automatically once the current user has the moderator role |

    <Note>
      **Scope**: The delete action is gated on the channel moderator role, so in practice it applies to group chat, where that role is assigned. Members without the role can still delete only their own messages.
    </Note>
  </Tab>

  <Tab title="Message Components">
    **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 |

    ### Optional Parameters

    | Parameter | Type | Default | Platforms | Description |
    | - | - | - | - | - |
    | `mediaAttachmentLimit` | int | `10` | Flutter, from UIKit 4.20.18 | Maximum number of media files a user can select in one picker session |

    ### Code Examples

    <CodeGroup>
      ```swift iOS - Message List & Compose Bar theme={null}
      // Both components share one chat room view model.
      let viewModel = AmityChatRoomViewModel(channelId: "your-channel-id")

      AmityChatMessageListComponent(viewModel: viewModel, pageId: .groupChatPage)
      AmityChatMessageComposeBar(viewModel: viewModel, isGroupChat: true)
      ```

      ```kotlin Android - Message List & Compose Bar theme={null}
      @Composable
      fun groupMessages() {
          // Both composables share one page view model.
          val viewModel = remember { AmityGroupChatPageViewModel(channelId = "your-channel-id") }

          AmityGroupChatMessageList(viewModel = viewModel)
          AmityGroupChatMessageComposer(viewModel = viewModel)
      }
      ```

      ```tsx React - Message List & Compose Bar theme={null}
      import { AmityGroupChatPage } from '@amityco/ui-kit';

      // React does not expose the message list or compose bar separately for
      // conversation and group chat — they are rendered by the page component.
      // (AmityLiveChatMessageList and AmityLiveChatMessageComposeBar belong to Live Chat.)
      <AmityGroupChatPage channelId="your-channel-id" />;
      ```

      ```dart Flutter - Message List & Compose Bar theme={null}
      // Flutter renders each message with AmityMessageBubble rather than
      // exposing a list component.
      Widget messageBubbleView(AmityMessage message) {
        return AmityMessageBubble(
          message: message,
        );
      }

      Widget messageComposer() {
        return AmityMessageComposer(
          subChannelId: 'channelId',
          avatarUrl: 'avatarUrl',
          // Optional: cap how many media files the picker allows.
          mediaAttachmentLimit: 10,
          action: MessageComposerAction(
            onMessageCreated: () {
              // Handle message created callback
              print('Message created');
            },
            onDissmiss: () {
              // Handle dismiss callback
              print('Composer dismissed');
            },
          ),
        );
      }
      ```
    </CodeGroup>

    ### Message Bubble Behavior

    Override `AmityMessageBubbleBehavior` to route taps on a sender's **avatar** and on a **mentioned user** to your own screens. The mention-user tap override is available on iOS (UIKit 4.28.0) and Android (UIKit 4.26.0).

    The two taps start from different defaults:

    | Override | Default behavior | Effect of overriding |
    | - | - | - |
    | `onAvatarTap` | Opens the full-screen avatar viewer. Does nothing if the user has no avatar. | Replaces the viewer — it no longer opens unless you open it yourself. |
    | `onMentionUserTap` | Does nothing. | Adds behavior where there was none. |

    <CodeGroup>
      ```swift iOS theme={null}
      class CustomMessageBubbleBehavior: AmityMessageBubbleBehavior {
          override func onAvatarTap(context: AmityMessageBubbleBehavior.Context) {
              // Route the sender-avatar tap to your own screen.
          }

          override func onMentionUserTap(context: AmityMessageBubbleBehavior.Context) {
              // Route a tap on a mentioned user to your own screen.
          }
      }

      // Register once, e.g. at app start.
      AmityUIKit4Manager.behaviour.messageBubbleBehavior = CustomMessageBubbleBehavior()
      ```

      ```kotlin Android theme={null}
      class CustomMessageBubbleBehavior : AmityMessageBubbleBehavior() {
          override fun onAvatarTap(context: Context, userId: String, avatarUrl: String?) {
              // Route the sender-avatar tap to your own screen.
          }

          override fun onMentionUserTap(context: Context, userId: String) {
              // Route a tap on a mentioned user to your own screen.
          }
      }

      // Register once, e.g. at app start.
      AmityChatBehaviorHelper.messageBubbleBehavior = CustomMessageBubbleBehavior()
      ```

      ```dart Flutter theme={null}
      class CustomMessageBubbleBehavior extends AmityMessageBubbleBehavior {
        @override
        void onAvatarTap(
          BuildContext context,
          String? avatarUrl,
          String? userId,
        ) {
          // Route the sender-avatar tap to your own screen.
        }
      }
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Component Management Strategies

<AccordionGroup>
  <Accordion title="Group Lifecycle Management" icon="recycle">
    **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.
  </Accordion>

  <Accordion title="Permission Architecture" icon="key">
    **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.
  </Accordion>

  <Accordion title="Moderation Workflow Design" icon="gavel">
    **Building effective content management**

    Configure reporting workflows, automated moderation responses, and escalation procedures. Plan how moderators will handle reported content and member management tasks.
  </Accordion>
</AccordionGroup>

## Best Practices

<AccordionGroup>
  <Accordion title="User Experience Optimization" icon="user-check">
    **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.
  </Accordion>

  <Accordion title="Group Scaling Considerations" icon="chart-line">
    **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.
  </Accordion>

  <Accordion title="Privacy & Safety Implementation" icon="shield-check">
    **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.
  </Accordion>
</AccordionGroup>

## Related Features

<CardGroup cols={3}>
  <Card title="Chat Search" href="/uikit/components/chat/search-chat" icon="magnifying-glass">
    **Find Content Fast**
    Search channels and messages
  </Card>

  <Card title="Conversation Chat" href="/uikit/components/chat/conversation-chat" icon="comments">
    **Individual Messaging**
    One-on-one conversation features
  </Card>

  <Card title="Recent Chats" href="/uikit/components/chat/recent-chats" icon="list">
    **Chat Management**
    Organize and navigate conversations
  </Card>
</CardGroup>

<Tip>
  **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.
</Tip>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.