Threaded Messages - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-angular`
Key components	`cometchat-thread-header`, `cometchat-message-list`, `cometchat-message-composer`
Init	`CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")`
Entry point	`cometchat-message-list` `threadRepliesClick` output 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 Integration Guide.

Components

Component / Selector	Role
`cometchat-threaded-messages`	Main container for threaded messages
`cometchat-thread-header`	Displays parent message and controls
`cometchat-message-list`	Shows the thread’s replies, given the `parentMessage`
`cometchat-message-composer`	Input for composing threaded replies

Implementation Steps

1. Thread State Management

Create a component that tracks the parent message the user clicked “Reply in Thread” on. When set, show the threaded messages side panel.

import { Component, OnDestroy } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-chat-home',
  standalone: true,
  imports: [],
  template: `<!-- see steps below -->`
})
export class ChatHomeComponent implements OnDestroy {
  threadedMessage: CometChat.BaseMessage | undefined;
  showThreadPanel = false;

  private subscriptions: Subscription[] = [];

  onThreadRepliesClick(message: CometChat.BaseMessage): void {
    this.threadedMessage = message;
    this.showThreadPanel = true;
  }

  closeThread(): void {
    this.threadedMessage = undefined;
    this.showThreadPanel = false;
  }

  ngOnDestroy(): void {
    this.subscriptions.forEach(sub => sub.unsubscribe());
  }
}

2. Thread Trigger from Group Messages

Wire the threadRepliesClick output on cometchat-message-list. When a user clicks the thread reply icon on any message, this fires with the parent message object.

<cometchat-message-list
  [group]="selectedGroup"
  (threadRepliesClick)="onThreadRepliesClick($event)">
</cometchat-message-list>

3. Threaded Messages Component

Render the thread panel with the parent message context, the reply list scoped by parentMessage, and a composer scoped to the thread.

@if (showThreadPanel && threadedMessage) {
  <div class="cometchat-thread-panel">
    <cometchat-thread-header
      [parentMessage]="threadedMessage"
      (closeClick)="closeThread()">
    </cometchat-thread-header>

    <cometchat-message-list
      [group]="selectedGroup"
      [parentMessage]="threadedMessage">
    </cometchat-message-list>

    <cometchat-message-composer
      [group]="selectedGroup"
      [parentMessageId]="threadedMessage.getId()">
    </cometchat-message-composer>
  </div>
}

4. Thread Panel with Blocked Composer Fallback

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

@if (showThreadPanel && threadedMessage) {
  <div class="cometchat-thread-panel">
    <cometchat-thread-header
      [parentMessage]="threadedMessage"
      (closeClick)="closeThread()">
    </cometchat-thread-header>

    <cometchat-message-list
      [group]="selectedGroup"
      [parentMessage]="threadedMessage">
    </cometchat-message-list>

    @if (showComposer) {
      <cometchat-message-composer
        [group]="selectedGroup"
        [parentMessageId]="threadedMessage.getId()">
      </cometchat-message-composer>
    } @else {
      <div class="message-composer-blocked">
        <div class="message-composer-blocked__text">
          Cannot send messages to this group.
          <a>Check permissions</a>
        </div>
      </div>
    }
  </div>
}

5. Full Component Example

A complete standalone component wiring thread state, the trigger, and the panel together.

import { Component, Input, OnDestroy } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatMessageListComponent,
  CometChatMessageComposerComponent,
  CometChatThreadHeaderComponent
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-threaded-chat',
  standalone: true,
  imports: [
    CometChatMessageListComponent,
    CometChatMessageComposerComponent,
    CometChatThreadHeaderComponent
  ],
  template: `
    <!-- Main message list with thread trigger -->
    <cometchat-message-list
      [group]="group"
      (threadRepliesClick)="onThreadRepliesClick($event)">
    </cometchat-message-list>

    <!-- Thread side panel -->
    @if (showThreadPanel && threadedMessage) {
      <div class="cometchat-thread-panel">
        <cometchat-thread-header
          [parentMessage]="threadedMessage"
          (closeClick)="closeThread()">
        </cometchat-thread-header>

        <cometchat-message-list
          [group]="group"
          [parentMessage]="threadedMessage">
        </cometchat-message-list>

        <cometchat-message-composer
          [group]="group"
          [parentMessageId]="threadedMessage.getId()">
        </cometchat-message-composer>
      </div>
    }
  `
})
export class ThreadedChatComponent implements OnDestroy {
  @Input() group!: CometChat.Group;

  threadedMessage: CometChat.BaseMessage | undefined;
  showThreadPanel = false;

  onThreadRepliesClick(message: CometChat.BaseMessage): void {
    this.threadedMessage = message;
    this.showThreadPanel = true;
  }

  closeThread(): void {
    this.threadedMessage = undefined;
    this.showThreadPanel = false;
  }

  ngOnDestroy(): void {
    this.threadedMessage = undefined;
  }
}

Thread Subscription

Users can also subscribe to a thread, so they keep getting notified about new replies even when they are not looking at it, and unsubscribe when they no longer want them. The UI Kit surfaces this in two places, both wired out of the box once the feature is on:

A control in the top bar of the cometchat-thread-header you rendered in step 3.
An option in the message context menu of cometchat-message-list, right after Reply in thread.

Both read the current state, flip it optimistically on click, and show a toast if the server rejects the change. No wiring is required to make them work.

Thread subscription is off by default. Turn it on with enableThreadSubscription in Global Configuration — no backend capability flag exists for the kit to feature-detect from, so whether the thread endpoints are deployed for your app is something only you know.

To react to a change, handle (threadSubscriptionChange) on either surface:

<cometchat-thread-header
  [parentMessage]="threadedMessage"
  (threadSubscriptionChange)="onSubscriptionChange($event)"
  (closeClick)="threadedMessage = null">
</cometchat-thread-header>

To hide a surface without turning the feature off, use [hideThreadSubscriptionToggle] on the thread header, or [hideThreadSubscriptionOption] on the message list. See the Thread Subscription guide for the full feature — the service, the events, and the optimistic and revert behavior.

Feature Matrix

Feature	Component / Binding	Description
Show thread option	`(threadRepliesClick)` on `cometchat-message-list`	Fires when user clicks thread reply icon
Display thread messages	`cometchat-message-list` with `[parentMessage]`	Filters messages to thread replies. `[parentMessageId]` is deprecated
Compose reply	`cometchat-message-composer` with `[parentMessageId]`	Scopes new messages to the thread
Thread header	`cometchat-thread-header` with `[parentMessage]`	Shows parent message context
Close thread	`(closeClick)` on `cometchat-thread-header`	Closes the thread side panel
Thread state	Component property `threadedMessage`	Tracks the active parent message
Subscribe to a thread	`(threadSubscriptionChange)` on `cometchat-thread-header` or `cometchat-message-list`	Notifies the user about new replies. Off by default — see Thread Subscription

Next Steps

Message List

Render real-time message threads.

Thread Header

Customize the thread header component.

Thread Subscription

Notify users about new replies in a thread.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.

​Components

​Implementation Steps

​1. Thread State Management

​2. Thread Trigger from Group Messages

​3. Threaded Messages Component

​4. Thread Panel with Blocked Composer Fallback

​5. Full Component Example

​Thread Subscription

​Feature Matrix

​Next Steps

Message List

Thread Header

Thread Subscription

All Guides

Sample App

Components

Implementation Steps

1. Thread State Management

2. Thread Trigger from Group Messages

3. Threaded Messages Component

4. Thread Panel with Blocked Composer Fallback

5. Full Component Example

Thread Subscription

Feature Matrix

Next Steps