Message Privately

Start private one-to-one chats from CometChat React UI Kit group conversations with message options, user lookup, and navigation.

AI Integration Quick Reference

Field	Value
Package	@cometchat/chat-uikit-react
Key components	CometChatMessages, CometChatGroupMembers, CometChatMessageComposer, CometChatMessageList, CometChatMessageHeader
Init	CometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID")
Purpose	Launch a direct 1:1 chat from a group member profile
Sample app	GitHub
Related	All Guides

Message Privately lets users start a direct 1:1 conversation with a group member without leaving the group context. The user can return to the group after the private chat.

Before starting, complete the Getting Started guide for your framework.

---

Components

Component / Class	Role
CometChatGroupMembers	Displays group members with click handlers for private messaging
CometChatMessageComposer	Input component for composing private messages
CometChatMessageList	Displays private conversation messages
CometChatMessageHeader	Header showing private chat information

---

Integration Steps

1. Group Member Click Handler

When a group member is clicked, cast them to a User object and initiate a private chat. The current group is saved so the user can return to it later. CometChat.getConversation() fetches or creates the 1:1 conversation.

File: CometChatHome.tsx

const handleGroupMemberClick = (groupMember: CometChat.GroupMember) => {
    const user = groupMember as CometChat.User;
    startPrivateChatFromGroup(user, currentGroup);
}

const startPrivateChatFromGroup = (user: CometChat.User, group: CometChat.Group) => {
    setAppState({ type: "updatePreviousGroup", payload: group });
    
    CometChat.getConversation(user.getUid(), CometChatUIKitConstants.MessageReceiverType.user)
        .then((conversation) => {
            setSelectedItem(conversation);
            setAppState({ type: "updateSideComponent", payload: { visible: false, type: "" } });
            setShowPrivateChat(true);
        })
        .catch((error) => {
            console.error("Failed to start private chat:", error);
        });
}

---

2. Group Members with Private Messaging Option

Add a “Message Privately” option to the group members list. The options prop adds a context-menu action that triggers the private chat flow when clicked.

File: CometChatHome.tsx

const GroupMembersWithPrivateMessaging = ({ group }: { group: CometChat.Group }) => {
    return (
        <CometChatGroupMembers
            group={group}
            onItemClick={handleGroupMemberClick}
            options={[
                {
                    id: "message_privately",
                    title: getLocalizedString("message_privately"),
                    iconURL: messageIcon,
                    onClick: (member: CometChat.GroupMember) => {
                        handleGroupMemberClick(member);
                    }
                }
            ]}
            selectionMode={SelectionMode.none}
        />
    );
}

---

3. Private Chat Interface

Render a full chat view (header, message list, composer) for the 1:1 conversation. The header includes a back button that returns the user to the original group, and a subtitle showing which group the private chat was initiated from.

File: CometChatHome.tsx

const PrivateChatFromGroupView = ({ user, previousGroup }: { 
    user: CometChat.User, 
    previousGroup: CometChat.Group 
}) => {
    const returnToGroup = () => {
        setShowPrivateChat(false);
        CometChat.getConversation(previousGroup.getGuid(), CometChatUIKitConstants.MessageReceiverType.group)
            .then((conversation) => {
                setSelectedItem(conversation);
            });
    };

    return (
        <div className="cometchat-private-chat-from-group">
            <CometChatMessageHeader
                user={user}
                onBack={returnToGroup}
                showBackButton={true}
                subtitle={`${getLocalizedString("private_message_from")} ${previousGroup.getName()}`}
            />
            <CometChatMessageList user={user} onThreadRepliesClick={() => {}} />
            <CometChatMessageComposer user={user} />
        </div>
    );
}

---

4. State Management

Add reducer cases to track the group the user came from, whether the private chat is visible, and which user is being messaged. This lets the app restore the group context when the user navigates back.

File: appReducer.ts

interface AppState {
    previousGroup?: CometChat.Group;
    showPrivateChat?: boolean;
    privateChatUser?: CometChat.User;
}

case "updatePreviousGroup": {
    return { ...state, ["previousGroup"]: action.payload };
}
case "updateShowPrivateChat": {
    return { ...state, ["showPrivateChat"]: action.payload };
}
case "updatePrivateChatUser": {
    return { ...state, ["privateChatUser"]: action.payload };
}

---

Feature Matrix

Feature	Component / Method	File
Group member selection	CometChatGroupMembers	CometChatHome.tsx
Private chat initiation	startPrivateChatFromGroup()	CometChatHome.tsx
Private chat interface	PrivateChatFromGroupView	CometChatHome.tsx
Context preservation	updatePreviousGroup	appReducer.ts
Return to group	returnToGroup()	CometChatHome.tsx
Member options	options in CometChatGroupMembers	CometChatHome.tsx
State management	updateShowPrivateChat	appReducer.ts

---

Next Steps

Group Members

Display and manage group member lists.

Message List

Render real-time message threads.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.