> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-chore-codeowners-swapnil-to-jitvar.mintlify.site/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 Angular UIKit.

<Accordion title="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](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
  | Related        | [All Guides](/ui-kit/angular/guides/guides-overview)                                       |
</Accordion>

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](/ui-kit/angular/integration).

***

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

```typescript expandable theme={null}
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.

```html theme={null}
<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.

```html expandable theme={null}
@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.

```html expandable theme={null}
@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.

```typescript expandable theme={null}
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.

<Note>
  Thread subscription is **off by default**. Turn it on with `enableThreadSubscription` in [Global Configuration](/ui-kit/angular/customization/global-config#enablethreadsubscription) — 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.
</Note>

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

```html expandable theme={null}
<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](/ui-kit/angular/guides/thread-subscription) 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](#thread-subscription) |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Message List" href="/ui-kit/angular/components/cometchat-message-list">
    Render real-time message threads.
  </Card>

  <Card title="Thread Header" href="/ui-kit/angular/components/cometchat-thread-header">
    Customize the thread header component.
  </Card>

  <Card title="Thread Subscription" href="/ui-kit/angular/guides/thread-subscription">
    Notify users about new replies in a thread.
  </Card>

  <Card title="All Guides" href="/ui-kit/angular/guides/guides-overview">
    Browse all feature and formatter guides.
  </Card>

  <Card title="Sample App" href="https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app">
    Full working sample application on GitHub.
  </Card>
</CardGroup>