> ## 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.

# Threaded Messages

Enable organized threaded conversations within group chats using CometChat's React UI Kit.

## Overview

Threaded messages in group chat allow users to create organized sub-conversations by replying to specific messages.

* Threaded messages in group chat allow users to create organized sub-conversations by replying to specific messages.
* Improves group conversation organization, reduces chat clutter, and enables focused discussions.
* Group chats display threaded conversations with clear parent-child relationships.

***

## Prerequisites

* React v18.2.0+
* CometChat React UI Kit v6.1.0+
* CometChat Chat SDK JavaScript v4.0.13+
* CometChat credentials configured (App ID, Auth Key, Region)
* Group chat functionality implemented

***

## Components

| Component / Class                          | Role                                         |
| :----------------------------------------- | :------------------------------------------- |
| **CometChatThreadedMessages**              | Main container for threaded messages         |
| **CometChatThreadHeader**                  | Displays parent message and controls         |
| **CometChatMessageList**                   | Shows messages filtered by `parentMessageId` |
| **CometChatMessageComposer**               | Input for composing threaded replies         |
| **CometChatMessages.onThreadRepliesClick** | Opens thread view from group messages        |

***

## Integration Steps

### 1. Thread State Management Setup

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

```tsx theme={null}
const [threadedMessage, setThreadedMsg] = useState<CometChat.BaseMessage | undefined>();

const updateThreadedMessage = (message: CometChat.BaseMessage) => {
    setThreadedMsg(message);
    setAppState({ type: "updateSideComponent", payload: { visible: true, type: "threadedMessage" } });
    setAppState({ type: "updateThreadedMessage", payload: message });
};
```

***

### 2. Thread Trigger in Group Messages

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

```tsx theme={null}
<CometChatMessages
    user={messageUser}
    group={messageGroup}
    onThreadRepliesClick={(message) => updateThreadedMessage(message)}
/>
```

***

### 3. Threaded Messages Component Integration

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

```tsx theme={null}
<CometChatThreadedMessages
    message={message}
    requestBuilderState={requestBuilderState}
    selectedItem={selectedItem}
    onClose={onClose}
    showComposer={showComposer}
    goToMessageId={appState.threadSearchMessage && appState.goToMessageId ? appState.goToMessageId : undefined}
    searchKeyword={appState.goToMessageId ? appState.searchKeyword : undefined}
/>
```

***

### 4. App State Management

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

```tsx theme={null}
case "updateThreadedMessage": {
    return { ...state, ["threadedMessage"]: action.payload };
}
case "updateSideComponent": {
    return { 
        ...state, 
        ["sideComponent"]: action.payload,
        ["sideComponentTop"]: action.payload?.type || ""
    };
}
```

***

## Implementation Flow

* **Fetch Parent Message**

```tsx theme={null}
const parentMessage = message;
const group = selectedItem as CometChat.Group;
```

* **Load Replies**

```tsx theme={null}
<CometChatMessageList
    parentMessageId={message.getId()}
    group={group}
    messagesRequestBuilder={requestBuilderState}
/>
```

* **Send Reply**

```tsx theme={null}
<CometChatMessageComposer
    parentMessageId={message.getId()}
    group={group}
/>
```

* **Live Updates**

```tsx theme={null}
useEffect(() => {
    if (message.getId() === threadedMessage?.getId()) {
        // handle updates
    }
}, [message, threadedMessage]);
```

***

## Customization Options

* Override CSS for styling
* Search keyword highlighting
* Control composer visibility
* Custom message filtering
* Search integration within threads

***

## Filtering / Edge Cases

* Search within threads
* Go to specific message in thread
* Handle empty or deleted threads
* Respect group permissions

***

## Error Handling

```tsx theme={null}
{showComposer ? (
    <CometChatMessageComposer
        parentMessageId={message.getId()}
        group={group}
    />
) : (
    <div className="message-composer-blocked">
        <div className="message-composer-blocked__text">
            {getLocalizedString("cannot_send_to_group")} 
            <a>{getLocalizedString("check_permissions")}</a>
        </div>
    </div>
)}
```

***

## Context Notes

* Works specifically in group chats
* Member roles affect permissions
* Mobile responsive
* Scales well for large groups

***

## Feature Matrix

| Feature             | Component / Method        | File                                                                                                                                                                 |
| :------------------ | :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Show thread option  | `onThreadRepliesClick`    | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx)                |
| Display thread msgs | `ThreadedMessageList`     | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
| Compose reply       | `MessageComposer`         | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
| Thread header       | `ThreadHeader`            | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
| Search in threads   | `TextHighlightFormatter`  | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
| Navigate to message | `goToMessageId`           | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)                            |
| Thread state        | `updateThreadedMessage()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)                            |
| App context         | `appReducer.ts`           | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts)                                                     |

***

## Next Steps

* Explore [CometChat React UI Kit Docs](https://www.cometchat.com/docs/ui-kit/react/overview)
* Check the [Sample App Repo](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)