> ## 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.
# Threaded Messages
> Implement threaded message replies with parent context, reply list, and focused thread composer in CometChat React UI Kit.
| Field | Value |
| -------------- | -------------------------------------------------------------------------------------------------------- |
| Package | `@cometchat/chat-uikit-react` |
| Key components | `CometChatThreadedMessages`, `CometChatThreadHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
| Entry point | `CometChatMessages.onThreadRepliesClick` opens thread view from group messages |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
| Related | [All Guides](/ui-kit/react/guide-overview) |
Threaded messages let users create sub-conversations by replying to specific messages in group chats. This reduces clutter and keeps discussions focused.
Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework.
***
## 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
Store the parent message that the user clicked "Reply in Thread" on. When set, update the app state to show the threaded messages side panel.
*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*
```tsx lines theme={null}
const [threadedMessage, setThreadedMsg] = useState();
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
Wire the `onThreadRepliesClick` callback on `CometChatMessages`. When a user clicks the thread reply icon on any message, this fires with the parent message object.
*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*
```tsx lines theme={null}
updateThreadedMessage(message)}
/>
```
***
### 3. Threaded Messages Component
Render the thread panel with the parent message, reply list, and composer. `goToMessageId` and `searchKeyword` support in-thread search navigation.
*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*
```tsx lines theme={null}
```
***
### 4. App State Management
Add reducer cases to store the threaded message and control the side panel visibility. These are dispatched by `updateThreadedMessage` in step 1.
*File: [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts)*
```tsx lines theme={null}
case "updateThreadedMessage": {
return { ...state, ["threadedMessage"]: action.payload };
}
case "updateSideComponent": {
return {
...state,
["sideComponent"]: action.payload,
["sideComponentTop"]: action.payload?.type || ""
};
}
```
***
## Implementation Flow
Fetch the parent message, load replies, send new replies, and handle live updates:
```tsx lines theme={null}
const parentMessage = message;
const group = selectedItem as CometChat.Group;
```
```tsx lines theme={null}
```
```tsx lines theme={null}
```
When the composer is blocked (e.g. permissions), show a fallback:
```tsx lines theme={null}
{showComposer ? (
) : (