Group Chat - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-react`
Key components	`CometChatGroups`, `CometChatGroupMembers`, `CometChatCreateGroup`, `CometChatJoinGroup`, `CometChatAddMembers`, `CometChatBannedMembers`, `CometChatTransferOwnership`
Init	`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

This guide covers the full group lifecycle: creating groups, joining them, managing members, changing roles, and transferring ownership. Before starting, complete the Getting Started guide for your framework.

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

Build a form that collects a group name, type (public/private/password), and optional password. On submit, generate a unique GUID, call CometChat.createGroup(), and emit ccGroupCreated so the rest of the UI updates. 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

Handle joining for both public and password-protected groups. Call CometChat.joinGroup() with the group’s GUID, type, and password (if applicable). On success, emit ccGroupMemberJoined to update the member list across the app. File: CometChatJoinGroup.tsx

export const CometChatJoinGroup = ({ group, 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) => {
        onProtectedGroupJoin(group);
        CometChatGroupEvents.ccGroupMemberJoined.next({
          joinedGroup: res,
          joinedUser: loggedInUser
        });
      })
      .catch(() => setError(true));
  };
};

3. View Group Members

Render the member list for a group using CometChatGroupMembers. Pass onItemClick to handle member selection and options to add context-menu actions like “View Profile”. 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

Let admins select users and add them to the group. Collect selected UIDs, call CometChat.addMembersToGroup(), and emit ccGroupMemberAdded so the member list refreshes. 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 Members

Fetch the list of banned members using BannedMembersRequestBuilder. This component displays banned users and provides unban functionality for group admins. 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

Promote or demote a member by calling CometChat.updateGroupMemberScope(). Pass the member’s UID, the new scope (admin, moderator, or participant), and the group GUID. Emit ccGroupMemberScopeChanged so the UI reflects the role change. 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()
    });
  } catch (error) {
    console.error("Failed to update member scope:", error);
  }
};

7. Transfer Ownership

Let the current owner select a member and transfer ownership via CometChat.transferGroupOwnership(). The group object is cloned and updated locally, then ccOwnershipChanged is emitted to sync the UI. 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);
    }
  };
};

Feature Matrix

Feature	Component / Method	File
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`	Multiple files

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.

​Components

​Integration Steps

​1. Create Group

​2. Join Group

​3. View Group Members

​4. Add Members

​5. Ban Members

​6. Change Member Scope

​7. Transfer Ownership

​Feature Matrix

​Next Steps