> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Privately

> Launch a direct 1:1 chat from a group member profile in CometChat React UI Kit.

<Accordion title="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](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)                                            |
  | Related        | [All Guides](/ui-kit/react/guide-overview)                                                                                 |
</Accordion>

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](/ui-kit/react/react-js-integration) 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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

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

***

### 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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx lines 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

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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx lines 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

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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts)*

```tsx lines 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 };
}
```

***

## Feature Matrix

| Feature                 | Component / Method                 | File                                                                                                                                      |
| :---------------------- | :--------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------- |
| 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)                          |
| 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

<CardGroup cols={2}>
  <Card title="Group Members" href="/ui-kit/react/group-members">
    Display and manage group member lists.
  </Card>

  <Card title="Message List" href="/ui-kit/react/message-list">
    Render real-time message threads.
  </Card>

  <Card title="All Guides" href="/ui-kit/react/guide-overview">
    Browse all feature and formatter guides.
  </Card>

  <Card title="Sample App" href="https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app">
    Full working sample application on GitHub.
  </Card>
</CardGroup>