Threaded Messages

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

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

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

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

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

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

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

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

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