Group Chat - CometChat Docs

AI Agent Component Spec

Package: @cometchat/chat-uikit-react
Key components: CometChatGroups, CometChatGroupMembers, CometChatCreateGroup, CometChatJoinGroup
Required setup: CometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID")
Features: Create public/private/password-protected groups, manage members, roles, ownership transfer
Sample app: GitHub
Related: All Guides

Implement comprehensive group management functionality including creation, joining, member management, and administrative controls in your React chat app.

Overview

Groups Management provides a complete set of features for creating, managing, and participating in group conversations, including member administration, permissions, and group lifecycle management.

Provides a full set of features for creating and managing group conversations, including member administration, permissions, and lifecycle management.
Enables users to create collaborative spaces, manage team communications, control access through different group types, and maintain group organization through administrative tools.
Your app will support full group lifecycle management from creation to administration, allowing users to create public/private/password-protected groups, manage members, and control group operations.

Prerequisites

React v18.2.0+
CometChat React UI Kit v6.1.0+
CometChat Chat SDK JavaScript v4.0.13+
Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
TypeScript support (recommended)
Basic chat functionality already implemented
User authentication already configured

Components

Component / Class	Role
CometChatCreateGroup	Creates new groups with different types and settings
CometChatJoinGroup	Handles joining public and password-protected groups
CometChatGroupMembers	Displays and manages group member lists
CometChatAddMembers	Adds new members to existing groups
CometChatBannedMembers	Manages banned members and unban operations
CometChatTransferOwnership	Transfers group ownership to other members

Integration Steps

1. Create Group Implementation

File: CometChatCreateGroup.tsx

export const CometChatCreateGroup = ({ setShowCreateGroup, onGroupCreated }: CreateGroupProps) => {
   const [groupType, setGroupType] = useState("public");
   const [groupName, setGroupName] = useState("");
   const [groupPassword, setGroupPassword] = useState("");

  async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     const GUID = `group_${new Date().getTime()}`;
     const group = new CometChat.Group(GUID, groupName, groupType, groupPassword);

    try {
       const createdGroup = await CometChat.createGroup(group);
       CometChatGroupEvents.ccGroupCreated.next(createdGroup);
       onGroupCreated(createdGroup);
       setShowCreateGroup(false);
     } catch (error) {
       console.error("Group creation failed:", error);
     }
   }
};

2. Join Group Implementation

File: CometChatJoinGroup.tsx

export const CometChatJoinGroup = ({ group, onHide, onProtectedGroupJoin }) => {
  const [password, setPassword] = useState("");
  const [error, setError] = useState(false);
  const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();

  const joinGroup = () => {
    CometChat.joinGroup(group.getGuid(), group.getType(), password)
      .then((res) => {
        onHide();
        onProtectedGroupJoin(group);
        CometChatGroupEvents.ccGroupMemberJoined.next({
          joinedGroup: res,
          joinedUser: loggedInUser
        });
      })
      .catch(() => setError(true));
  };
};

3. View Group Members Implementation

File: CometChatHome.tsx

const GroupMembersView = ({ group }: { group: CometChat.Group }) => {
  return (
    <div className="cometchat-group-members">
      <CometChatGroupMembers
        group={group}
        onItemClick={(member) => {
          console.log("Selected member:", member);
        }}
        options={[
          {
            id: "view_profile",
            title: getLocalizedString("view_profile"),
            iconURL: profileIcon,
            onClick: (member) => viewMemberProfile(member)
          }
        ]}
      />
    </div>
  );
};

4. Add Members to Group Implementation

File: CometChatAddMembers.tsx

export const CometChatAddMembers = ({ group, onBack }: IAddMembersProps) => {
  const [selectedUsers, setSelectedUsers] = useState<CometChat.User[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  const addMembersToGroup = async () => {
    if (selectedUsers.length === 0) return;
    setIsLoading(true);
    try {
      const uids = selectedUsers.map(user => user.getUid());
      await CometChat.addMembersToGroup(uids, group.getGuid(), group.getType() as CometChat.GroupType);
      CometChatGroupEvents.ccGroupMemberAdded.next({
        addedBy: CometChatUIKitLoginListener.getLoggedInUser()!,
        addedMembers: selectedUsers,
        addedIn: group
      });
      onBack();
    } catch (error) {
      console.error("Failed to add members:", error);
    } finally {
      setIsLoading(false);
    }
  };
};

5. Ban Member from Group Implementation

File: CometChatBannedMembers.tsx

export const CometChatBannedMembers = ({ group }: bannedMembersProp) => {
  const [bannedMembers, setBannedMembers] = useState<CometChat.User[]>([]);
  const [state, setState] = useState<States>(States.loading);

  useEffect(() => {
    const bannedMembersRequest = new CometChat.BannedMembersRequestBuilder(group.getGuid())
      .setLimit(30)
      .build();

    bannedMembersRequest.fetchNext().then(
      bannedMembers => {
        setBannedMembers(bannedMembers);
        setState(States.loaded);
      }, 
      error => {
        console.log("Banned members fetch failed:", error);
        setState(States.error);
      }
    );
  }, [group]);
};

6. Change Member Scope Implementation

File: CometChatHome.tsx

const changeMemberScope = async (member: CometChat.GroupMember, newScope: string) => {
  try {
    await CometChat.updateGroupMemberScope(member.getUid(), newScope, group.getGuid());
    const updatedMember = { ...member, scope: newScope };
    CometChatGroupEvents.ccGroupMemberScopeChanged.next({
      changedBy: CometChatUIKitLoginListener.getLoggedInUser()!,
      changedUser: updatedMember,
      changedIn: group,
      newScope: newScope,
      oldScope: member.getScope()
    });
    showSuccessMessage("Member scope updated successfully");
  } catch (error) {
    console.error("Failed to update member scope:", error);
    showErrorMessage("Failed to update member scope");
  }
};

7. Transfer Group Ownership Implementation

File: CometChatTransferOwnership.tsx

export const CometChatTransferOwnership = ({ group, onClose }: ITransferOwnershipProps) => {
  const [selectedMember, setSelectedMember] = useState<CometChat.GroupMember | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  const transferOwnership = async () => {
    if (!selectedMember) return;
    setIsLoading(true);
    setIsError(false);
    try {
      await CometChat.transferGroupOwnership(group.getGuid(), selectedMember.getUid());
      const groupClone = CometChatUIKitUtility.clone(group);
      groupClone.setOwner(selectedMember.getUid());
      CometChatGroupEvents.ccOwnershipChanged.next({
        group: groupClone,
        newOwner: CometChatUIKitUtility.clone(selectedMember)
      });
      onClose();
    } catch (error) {
      setIsError(true);
      console.error("Ownership transfer failed:", error);
    } finally {
      setIsLoading(false);
    }
  };
};

Implementation Flow

Fetch Data / Group Information: Retrieve group details and member lists.
Load Group Data / Member Information: Fetch members with pagination.
Execute Group Operations / Action Handlers: Handle creation, adding, banning, etc., with proper error handling.
Live Updates / Event Handling: Subscribe to CometChatGroupEvents for member changes and update UI in real time.

Customization Options

Styling: Override CSS classes
Group Types: Customize available types
Member Permissions: Add custom roles
UI Components: Modify list/form elements
Validation Rules: Add extra checks
Event Handling: Custom responses
Search & Filtering: Add search for members

Filtering / Edge Cases

Handle group type restrictions, member limits, and permission checks
Manage large groups efficiently
Handle empty groups and network errors gracefully
Maintain UI consistency with concurrent actions

Error Handling & Permission Management

const handleGroupOperation = async (operation: () => Promise<any>) => {
  try {
    if (!hasPermission(currentUser, currentGroup, 'manage_members')) {
      showErrorMessage("You don't have permission to perform this action");
      return;
    }
    const result = await operation();
    showSuccessMessage("Operation completed successfully");
    return result;
  } catch (error) {
    if (error.code === "ERR_PERMISSION_DENIED") {
      showErrorMessage("Permission denied for this operation");
    } else if (error.code === "ERR_GROUP_NOT_FOUND") {
      showErrorMessage("Group not found or no longer exists");
    } else if (error.code === "ERR_MEMBER_NOT_FOUND") {
      showErrorMessage("Member not found in this group");
    } else {
      showErrorMessage("An error occurred while performing the operation");
    }
    console.error("Group operation failed:", error);
  }
};

Context-Specific Notes

Different handling for public, private, password-protected groups
Different permissions for admins, moderators, participants
Optimize for large groups
Real-time updates across devices
Works cross-platform

Summary / Feature Matrix

Feature	Component / Method	File Reference
Create group	`CometChatCreateGroup`	CometChatCreateGroup.tsx
Join group	`CometChatJoinGroup`	CometChatJoinGroup.tsx
View members	`CometChatGroupMembers`	CometChatHome.tsx
Add members	`CometChatAddMembers`	CometChatAddMembers.tsx
Ban members	`CometChatBannedMembers`	CometChatBannedMembers.tsx
Change scope	`updateGroupMemberScope()`	CometChatHome.tsx
Transfer ownership	`CometChatTransferOwnership`	CometChatTransferOwnership.tsx
Group events	`CometChatGroupEvents`	CometChatHome.tsx, CometChatAddMembers.tsx, CometChatBannedMembers.tsx, CometChatTransferOwnership.tsx
Member management	`CometChat.GroupMembersRequestBuilder`	CometChatHome.tsx, CometChatTransferOwnership.tsx

Next Steps

Groups

Display and manage group lists.

Group Members

Display and manage group member lists.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.

​Overview

​Prerequisites

​Components

​Integration Steps

​1. Create Group Implementation

​2. Join Group Implementation

​3. View Group Members Implementation

​4. Add Members to Group Implementation

​5. Ban Member from Group Implementation

​6. Change Member Scope Implementation

​7. Transfer Group Ownership Implementation

​Implementation Flow

​Customization Options

​Filtering / Edge Cases

​Error Handling & Permission Management

​Context-Specific Notes

​Summary / Feature Matrix

​Next Steps