> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Threaded Messages Header

> Header component for threaded conversations showing the parent message, reply count, and thread navigation.

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Component | `CometChatThreadedHeader` |
  | Package | `cometchat_chat_uikit` |
  | Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` |
  | Purpose | Header component for threaded conversations showing the parent message, reply count, and thread navigation. |
  | Data props | `parentMessage` · `loggedInUser` |
  | View slots | `messageActionView` — [details](#custom-view-slots) |
  | Styling | `style` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. |
  | Prerequisites | `CometChatUIKit` initialised and a user logged in. |
  | Full props | [11 props](#functionality) |
</Accordion>

`CometChatThreadedHeader` displays the parent message of a thread along with reply count and provides the container for threaded message list and composer. It enables organized threaded conversations within a chat.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/IswwmAgbm47WtdFq/images/ccfded5e-thread_header-02deacd1056bec41b2d4862bc713a4df.png?fit=max&auto=format&n=IswwmAgbm47WtdFq&q=85&s=ce49aa21a7024ac2b5838583735ca1ed" width="2560" height="658" data-path="images/ccfded5e-thread_header-02deacd1056bec41b2d4862bc713a4df.png" />
</Frame>

***

## Where It Fits

`CometChatThreadedHeader` is used when a user taps "Reply in Thread" on a message. It wraps the parent message display with a `CometChatMessageList` (filtered by `parentMessageId`) and `CometChatMessageComposer` for thread replies.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatThreadedHeader(
      parentMessage: parentMessage,
      loggedInUser: loggedInUser,
    )
    ```
  </Tab>
</Tabs>

***

## Quick Start

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
    import 'package:flutter/material.dart';

    class ThreadScreen extends StatelessWidget {
      final BaseMessage parentMessage;
      final User loggedInUser;

      const ThreadScreen({
        super.key,
        required this.parentMessage,
        required this.loggedInUser,
      });

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: CometChatThreadedHeader(
              parentMessage: parentMessage,
              loggedInUser: loggedInUser,
            ),
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

Typically launched from the message list when a user selects "Reply in Thread":

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      user: user,
      onThreadRepliesClick: (message, context, {template}) {
        Navigator.push(context, MaterialPageRoute(
          builder: (context) => ThreadScreen(
            parentMessage: message,
            loggedInUser: CometChatUIKit.loggedInUser!,
          ),
        ));
      },
    )
    ```
  </Tab>
</Tabs>

Prerequisites: CometChat SDK initialized, a user logged in, and a valid `BaseMessage` object as the parent message.

***

## Actions and Events

### Navigation (host-owned)

`CometChatThreadedHeader` renders the parent-message context only — it exposes **no** `onBack` or
`onError` callback. Provide navigation from the screen that hosts it: a pushed route already gets a
back button from its `AppBar`, so no wiring is required.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Scaffold(
      appBar: AppBar(title: const Text("Thread")),   // back button is automatic on a pushed route
      body: SafeArea(
        child: Column(
          children: [
            CometChatThreadedHeader(
              parentMessage: parentMessage,
              loggedInUser: loggedInUser,
            ),
            Expanded(
              child: CometChatMessageList(
                user: user,
                group: group,
                parentMessageId: parentMessage.id,
              ),
            ),
            CometChatMessageComposer(
              user: user,
              group: group,
              parentMessageId: parentMessage.id,
            ),
          ],
        ),
      ),
    )
    ```
  </Tab>
</Tabs>

<Note>
  The thread list **and** composer each need `parentMessageId` **and** the same `user`/`group` target as
  the parent chat. Passing `parentMessageId` alone sends replies to the wrong target.
</Note>

### Custom message actions

Use `messageActionView` to render your own actions next to the parent message.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatThreadedHeader(
      parentMessage: parentMessage,
      loggedInUser: loggedInUser,
      messageActionView: (BaseMessage message, BuildContext context) {
        return IconButton(
          icon: const Icon(Icons.more_vert),
          onPressed: () {},
        );
      },
    )
    ```
  </Tab>
</Tabs>

### SDK Events (Real-Time, Automatic)

| SDK Listener | Internal behavior |
| - | - |
| New thread reply received | Increments reply count |
| Parent message edited | Updates parent message display |
| Parent message deleted | Updates parent message display |

***

## Functionality

| Property | Type | Default | Description |
| - | - | - | - |
| `parentMessage` | `BaseMessage` | required | The parent message of the thread |
| `messageActionView` | `Function(BaseMessage message, BuildContext context)?` | `null` | `messageActionView` custom action view |
| `style` | `CometChatThreadedHeaderStyle?` | `null` | `style` style parameter |
| `loggedInUser` | `User` | required | The currently logged-in user |
| `template` | `CometChatMessageTemplate?` | `null` | `template` to get the message template |
| `height` | `double?` | `null` | `height` provides height to the widget |
| `width` | `double?` | `null` | `width` provides width to the widget |
| `receiptsVisibility` | `bool?` | `true` | `receiptsVisibility` controls visibility of receipts |
| `textFormatters` | `List<CometChatTextFormatter>?` | `null` | `textFormatters` list of text formatters. |
| `typography` | `CometChatTypography?` | `null` | `typography` optional pre-cached typography for optimization |
| `spacing` | `CometChatSpacing?` | `null` | `spacing` optional pre-cached spacing for optimization |

***

## Custom View Slots

### Bubble View

Replace the parent message bubble display. `CometChatThreadedHeader` has no `bubbleView` parameter of
its own — pass a `CometChatMessageTemplate` via `template` and override its `bubbleView`.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatThreadedHeader(
      parentMessage: parentMessage,
      loggedInUser: loggedInUser,
      template: CometChatMessageTemplate(
        type: CometChatMessageType.text,
        category: CometChatMessageCategory.message,
        bubbleView: (message, context, alignment) {
          if (message is TextMessage) {
            return Container(
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: const Color(0xFFF5F5F5),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Text(message.text),
            );
          }
          return const SizedBox.shrink();
        },
      ),
    )
    ```
  </Tab>
</Tabs>

***

## Advanced

### BLoC Access

The threaded header uses `ThreadedHeaderBloc` internally:

| Component | Description |
| - | - |
| `ThreadedHeaderBloc` | Manages threaded header state |
| `ThreadedHeaderEvent` | Events: `InitializeThreadedHeader`, `IncrementReplyCount`, `UpdateParentMessage` |
| `ThreadedHeaderState` | Threaded header state with parent message and reply count |

***

## Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatThreadedHeader(
      parentMessage: parentMessage,
      loggedInUser: loggedInUser,
      style: CometChatThreadedHeaderStyle(
        bubbleContainerBackGroundColor: Colors.white,
        countTextColor: Color(0xFF727272),
      ),
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/JjWlPukYmAPwZawH/images/33ab29b6-threaded_message_header-24796b13acd68b58a9a2168eacbf10db.png?fit=max&auto=format&n=JjWlPukYmAPwZawH&q=85&s=d4a69b0fcd2ee5e01b5c0bcc1b441149" width="2560" height="658" data-path="images/33ab29b6-threaded_message_header-24796b13acd68b58a9a2168eacbf10db.png" />
</Frame>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Message List" icon="comments" href="/ui-kit/flutter/message-list">
    Display messages in a conversation
  </Card>

  <Card title="Message Composer" icon="pen" href="/ui-kit/flutter/message-composer">
    Compose and send messages
  </Card>

  <Card title="Threaded Messages Guide" icon="book" href="/ui-kit/flutter/guide-threaded-messages">
    Complete threaded messages implementation
  </Card>

  <Card title="Component Styling" icon="paintbrush" href="/ui-kit/flutter/component-styling">
    Detailed styling reference
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.