> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Privately

Enable users to initiate private conversations with group members directly from group chat interfaces.

## Overview

The Message Privately (from a Group) feature allows users to start private, one-on-one conversations with specific group members while remaining in the group context.

* Allows users to start private conversations with specific group members directly from a group.
* Enables confidential discussions, sharing sensitive information, or asking personal questions without disrupting the group conversation.
* Your app will support initiating private messages from group contexts, allowing users to seamlessly switch between group discussions and private conversations.

***

## 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)
* Group chat functionality already implemented
* User management and conversation handling already implemented

***

## Components

| Component / Class            | Role                                                             |
| ---------------------------- | ---------------------------------------------------------------- |
| **CometChatGroupMembers**    | Displays group members with click handlers for private messaging |
| **CometChatUsers**           | Alternative user list component 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 Setup

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
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);
            showErrorMessage("Unable to start private conversation");
        });
}
```

***

### 2. Group Members Component Integration

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
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 from Group Context

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
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 for Group-to-Private Transition

*File: [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts)*

```tsx theme={null}
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 };
}
```

***

## Implementation Flow

* **Fetch Data / Group Members**

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
<CometChatGroupMembers
    group={currentGroup}
    onItemClick={handleGroupMemberClick}
    groupMemberRequestBuilder={new CometChat.GroupMembersRequestBuilder()
        .setLimit(50)
        .joinedOnly(true)}
/>
```

* **Load User Data / Conversation State**

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
const startPrivateChatFromGroup = async (user: CometChat.User, group: CometChat.Group) => {
    try {
        setAppState({ type: "updatePreviousGroup", payload: group });
        const conversation = await CometChat.getConversation(
            user.getUid(), 
            CometChatUIKitConstants.MessageReceiverType.user
        );
        
        setSelectedItem(conversation);
        setAppState({ type: "updatePrivateChatUser", payload: user });
        setAppState({ type: "updateShowPrivateChat", payload: true });
        
    } catch (error) {
        console.error("Failed to start private chat:", error);
        showErrorMessage("Unable to start private conversation");
    }
}
```

* **Send Private Message / Action Handler**

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
const sendPrivateMessageFromGroup = async (messageText: string, receiverId: string) => {
    const textMessage = new CometChat.TextMessage(
        receiverId,
        messageText,
        CometChatUIKitConstants.MessageReceiverType.user
    );
    
    try {
        const sentMessage = await CometChat.sendMessage(textMessage);
        console.log("Private message sent from group context:", sentMessage);
        showSuccessMessage("Private message sent");
    } catch (error) {
        console.error("Failed to send private message:", error);
        showErrorMessage("Failed to send private message");
    }
}
```

* **Live Updates / Context Switching**

*Files: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx), [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts)*

```tsx theme={null}
useEffect(() => {
    const messageListener = CometChat.addMessageListener(
        "privateMessageFromGroupListener",
        new CometChat.MessageListener({
            onTextMessageReceived: (textMessage: CometChat.TextMessage) => {
                if (textMessage.getReceiverType() === CometChatUIKitConstants.MessageReceiverType.user) {
                    updatePrivateConversation(textMessage);
                    if (!showPrivateChat) {
                        showNotification(`Private message from ${textMessage.getSender().getName()}`);
                    }
                }
            }
        })
    );
    
    return () => CometChat.removeMessageListener("privateMessageFromGroupListener");
}, [showPrivateChat]);
```

***

## Customization Options

* Styling: Override CSS classes for private chat from group interface
* Member Options: Customize available actions for group members
* Navigation: Customize return-to-group behavior and transitions
* Message Types: Support various message types in private conversations
* Context Display: Customize how group context is shown in private chat
* Member Filtering: Control which group members can receive private messages

***

## Filtering / Edge Cases

* Handle permissions
* Preserve group context
* Manage blocked users
* Scale for large groups

***

## Error Handling & Context Management

```tsx theme={null}
const startPrivateChatFromGroup = async (user: CometChat.User, group: CometChat.Group) => {
    try {
        if (user.getBlockedByMe()) {
            showErrorMessage("Cannot send private message to blocked user");
            return;
        }
        if (!group.getMembers().some(member => member.getUid() === user.getUid())) {
            showErrorMessage("User is no longer a member of this group");
            return;
        }
        
        setAppState({ type: "updatePreviousGroup", payload: group });
        const conversation = await CometChat.getConversation(
            user.getUid(), 
            CometChatUIKitConstants.MessageReceiverType.user
        );
        
        setSelectedItem(conversation);
        setAppState({ type: "updateShowPrivateChat", payload: true });
        
    } catch (error) {
        if (error.code === "ERR_USER_NOT_FOUND") {
            showErrorMessage("User not found or unavailable");
        } else if (error.code === "ERR_CONVERSATION_CREATE_FAILED") {
            showErrorMessage("Unable to create private conversation");
        } else {
            showErrorMessage("An error occurred while starting private chat");
        }
    }
}
```

***

## Summary / Feature Matrix

| Feature                 | Component / Method                 | File Reference                                                                                                                            |
| ----------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| Group member selection  | `CometChatGroupMembers`            | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| Private chat initiation | `startPrivateChatFromGroup()`      | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| Private chat interface  | `PrivateChatFromGroupView`         | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| Context preservation    | `updatePreviousGroup`              | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts)                          |
| Private message sending | `sendPrivateMessageFromGroup()`    | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| Return to group         | `returnToGroup()`                  | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| Member options          | `options` in CometChatGroupMembers | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| State management        | `updateShowPrivateChat`            | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts)                          |

***

## Next Steps & Further Reading

* [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
* [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
* Group Management Features
* User Management Features
* Message Types & Features