> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.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.

`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-rn-guide-message-privately/G6Puyz_3Zlaowa9R/images/ccfded5e-thread_header-02deacd1056bec41b2d4862bc713a4df.png?fit=max&auto=format&n=G6Puyz_3Zlaowa9R&q=85&s=999d84cce2aa3d3fff5c48e41d1d657e" 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, {bubbleView}) {
        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

### Callback Methods

#### `onBack`

Fires when the user presses the back button.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatThreadedHeader(
      parentMessage: parentMessage,
      loggedInUser: loggedInUser,
      onBack: () {
        Navigator.pop(context);
      },
    )
    ```
  </Tab>
</Tabs>

#### `onError`

Fires on internal errors.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatThreadedHeader(
      parentMessage: parentMessage,
      loggedInUser: loggedInUser,
      onError: (e) {
        debugPrint("Error: ${e.message}");
      },
    )
    ```
  </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 |
| `loggedInUser`        | `User`        | **required** | The currently logged-in user     |
| `showBackButton`      | `bool?`       | `true`       | Toggle back button visibility    |
| `title`               | `String?`     | `null`       | Custom title text                |
| `hideMessageComposer` | `bool?`       | `false`      | Hide the message composer        |

***

## Custom View Slots

### Bubble View

Replace the parent message bubble display.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatThreadedHeader(
      parentMessage: parentMessage,
      loggedInUser: loggedInUser,
      bubbleView: (message) {
        if (message is TextMessage) {
          return Container(
            padding: EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Color(0xFFF5F5F5),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Text(message.text),
          );
        }
        return null;
      },
    )
    ```
  </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(
        backgroundColor: Colors.white,
        replyCountTextColor: Color(0xFF727272),
      ),
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PaxBG9I1yMoeQmt2/images/33ab29b6-threaded_message_header-24796b13acd68b58a9a2168eacbf10db.png?fit=max&auto=format&n=PaxBG9I1yMoeQmt2&q=85&s=f068402052885b92b2bc9caf7e66b997" 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>