Threaded Messages

Implement threaded message replies with parent context, reply list, and focused thread composer in CometChat React UI Kit.

AI Integration Quick Reference

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
Related	All Guides

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

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

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

<CometChatMessages
    user={messageUser}
    group={messageGroup}
    onThreadRepliesClick={(message) => 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

<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

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

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:

const parentMessage = message;
const group = selectedItem as CometChat.Group;

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

<CometChatMessageComposer
    parentMessageId={message.getId()}
    group={group}
/>

When the composer is blocked (e.g. permissions), show a fallback:

{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>
)}

---

Feature Matrix

Feature	Component / Method	File
Show thread option	onThreadRepliesClick	CometChatMessages.tsx
Display thread msgs	ThreadedMessageList	CometChatThreadedMessages.tsx
Compose reply	MessageComposer	CometChatThreadedMessages.tsx
Thread header	ThreadHeader	CometChatThreadedMessages.tsx
Search in threads	TextHighlightFormatter	CometChatThreadedMessages.tsx
Navigate to message	goToMessageId	CometChatHome.tsx
Thread state	updateThreadedMessage()	CometChatHome.tsx
App context	appReducer.ts	appReducer.ts

---

Next Steps

Message List

Render real-time message threads.

Thread Header

Customize the thread header component.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.