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

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

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

---

3. Threaded Messages Component Integration

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

File: appReducer.ts

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

---

Implementation Flow

• Fetch Parent Message

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

• Load Replies

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

• Send Reply

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

• Live Updates

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

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

• Explore CometChat React UI Kit Docs
• Check the Sample App Repo