> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-skills-v5-temp.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-skills-v5-temp/_bGdnInXULxS2RTM/images/ccfded5e-thread_header-02deacd1056bec41b2d4862bc713a4df.png?fit=max&auto=format&n=_bGdnInXULxS2RTM&q=85&s=8ef4b56e006018d636aff8e9a4eec6f3" 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-skills-v5-temp/WQ3aHci1hAyhJZYA/images/33ab29b6-threaded_message_header-24796b13acd68b58a9a2168eacbf10db.png?fit=max&auto=format&n=WQ3aHci1hAyhJZYA&q=85&s=81e63dfac29ccd7657ef5ade5b7cbe44" 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>