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

# Threaded Messages Header

> A widget that displays the parent message of a thread with reply count

<Accordion title="AI Agent Component Spec">
  ```json theme={null}
  {
    "component": "CometChatThreadedHeader",
    "package": "cometchat_chat_uikit",
    "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
    "description": "A widget that displays the parent message of a thread along with a reply count, used as the header section in threaded message views",
    "primaryOutput": {
      "prop": "messageActionView",
      "type": "Widget Function(BaseMessage message, BuildContext context)?"
    },
    "props": {
      "data": {
        "parentMessage": {
          "type": "BaseMessage",
          "required": true,
          "note": "Parent message for the thread"
        },
        "loggedInUser": {
          "type": "User",
          "required": true,
          "note": "Logged in user object"
        },
        "template": {
          "type": "CometChatMessageTemplate?",
          "default": "null",
          "note": "Message template used in the thread"
        },
        "height": {
          "type": "double?",
          "default": "null",
          "note": "Height of the widget"
        },
        "width": {
          "type": "double?",
          "default": "null",
          "note": "Width of the widget"
        }
      },
      "visibility": {
        "receiptsVisibility": {
          "type": "bool?",
          "default": true
        }
      },
      "viewSlots": {
        "messageActionView": "Widget Function(BaseMessage message, BuildContext context)?"
      }
    },
    "events": [],
    "sdkListeners": [],
    "compositionExample": {
      "description": "CometChatThreadedHeader is typically used within CometChatThreadedMessages as the header component",
      "components": ["CometChatThreadedMessages", "CometChatMessageList", "CometChatMessageComposer"],
      "flow": "Parent message displayed at top → Reply count shown → Message list below with replies"
    },
    "types": {}
  }
  ```
</Accordion>

## Where It Fits

CometChatThreadedHeader is a component that displays the parent message of a thread along with a reply count. It's typically used as part of the ThreadedMessages composite component, appearing at the top of the threaded conversation view.

ThreadedMessages is composed of the following widgets:

| Widget                                                 | Description                                                   |
| ------------------------------------------------------ | ------------------------------------------------------------- |
| [MessageList](/ui-kit/flutter/v5/message-list)         | CometChatMessageList displays a list of reply messages        |
| [MessageComposer](/ui-kit/flutter/v5/message-composer) | CometChatMessageComposer helps in writing and sending replies |

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/wpH0oTjPapnxuXny/images/ccfded5e-thread_header-02deacd1056bec41b2d4862bc713a4df.png?fit=max&auto=format&n=wpH0oTjPapnxuXny&q=85&s=aafab85cd21010093332c05cee89a369" width="2560" height="658" data-path="images/ccfded5e-thread_header-02deacd1056bec41b2d4862bc713a4df.png" />
</Frame>

## Minimal Render

The simplest way to render CometChatThreadedHeader:

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

    CometChatThreadedHeader(
      parentMessage: parentMessage,  // Required: BaseMessage object
      loggedInUser: loggedInUser,    // Required: User object
    )
    ```
  </Tab>
</Tabs>

You can also launch it using Navigator:

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

Or embed it as a widget:

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

    class ThreadMessages extends StatefulWidget {
      const ThreadMessages({super.key});

      @override
      State<ThreadMessages> createState() => _ThreadMessagesState();
    }

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

## Actions and Events

### Callback Props

The CometChatThreadedHeader component does not have traditional callback props. Instead, it provides a `messageActionView` slot for customizing the action area.

### Global UI Events

The CometChatThreadedHeader component does not produce any global UI events.

## Custom View Slots

Customize the appearance of CometChatThreadedHeader by replacing default views with your own widgets.

| Slot                | Signature                                                     | Replaces                                     |
| ------------------- | ------------------------------------------------------------- | -------------------------------------------- |
| `messageActionView` | `Widget Function(BaseMessage message, BuildContext context)?` | Reply count section below the message bubble |

### Example: Custom Message Action View

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatThreadedHeader(
      loggedInUser: loggedInUser,
      parentMessage: parentMessage,
      messageActionView: (BaseMessage baseMessage, BuildContext context) {
        return Container(
          width: MediaQuery.of(context).size.width / 1.2,
          margin: const EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: Color(0xFF6851D6),
            borderRadius: BorderRadius.circular(10),
            border: Border.all(width: 5, color: Color(0xFF6851D6)),
          ),
          child: const Center(
            child: Text(
              "Your Custom Action View",
              style: TextStyle(color: Colors.white),
            ),
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/sD1l8I7Yw1lyflGY/images/854e21f6-threaded_messages_action_view_cometchat_screens-7f88ee62a1538cddfa6da45c8eb28982.png?fit=max&auto=format&n=sD1l8I7Yw1lyflGY&q=85&s=f7bbeabd602e128d0bc0b3797cebd9f5" alt="Image" width="4498" height="3121" data-path="images/854e21f6-threaded_messages_action_view_cometchat_screens-7f88ee62a1538cddfa6da45c8eb28982.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/dJudw7bxdEqknjCY/images/07942114-threaded_messages_action_view_cometchat_screens-0d30d7d0d3394b0a40ee33ea511157b3.png?fit=max&auto=format&n=dJudw7bxdEqknjCY&q=85&s=8e2fed1af20107865fd520edfbdeb7ff" alt="Image" width="4498" height="3121" data-path="images/07942114-threaded_messages_action_view_cometchat_screens-0d30d7d0d3394b0a40ee33ea511157b3.png" />
  </Tab>
</Tabs>

### Example: Custom Reply Count with Dividers

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatThreadedHeader(
      parentMessage: message,
      loggedInUser: CometChatUIKit.loggedInUser!,
      style: CometChatThreadedHeaderStyle(
        bubbleContainerBackGroundColor: Color(0xFFFEEDE1),
        outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
          backgroundColor: Color(0xFFF76808),
          borderRadius: BorderRadius.circular(12),
        ),
      ),
      messageActionView: (message, context) {
        final numberOfReplies = message.replyCount;
        String replyText = numberOfReplies == 1
            ? Translations.of(context).reply
            : Translations.of(context).replies;
        return Container(
          width: double.maxFinite,
          color: Color(0xFFFEEDE1),
          padding: EdgeInsets.symmetric(vertical: 4),
          child: Row(
            children: [
              Flexible(child: Divider(color: Color(0xFFF76808))),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 8),
                child: Text(
                  "$numberOfReplies $replyText",
                  style: TextStyle(
                    color: Color(0xFFF76808),
                    fontSize: 14,
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ),
              Flexible(child: Divider(color: Color(0xFFF76808))),
            ],
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/MoukXfOA8-IbkyPZ/images/33ab29b6-threaded_message_header-24796b13acd68b58a9a2168eacbf10db.png?fit=max&auto=format&n=MoukXfOA8-IbkyPZ&q=85&s=da957087e963de38a4cad4957fc0aa02" width="2560" height="658" data-path="images/33ab29b6-threaded_message_header-24796b13acd68b58a9a2168eacbf10db.png" />
</Frame>

### Templates

The `template` prop is used to configure and set a message template for the parent message bubble. It allows for dynamic customization of message appearance, content, or other predefined settings based on the template provided.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatThreadedHeader(
      parentMessage: parentMessage,
      loggedInUser: loggedInUser,
      template: CometChatMessageTemplate(
        type: MessageTypeConstants.text,
        category: MessageCategoryConstants.message,
        // Custom template configuration
      ),
    )
    ```
  </Tab>
</Tabs>

## Styling

Customize the appearance of CometChatThreadedHeader using `CometChatThreadedHeaderStyle`.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatThreadedHeader(
      parentMessage: parentMessage,
      loggedInUser: loggedInUser,
      style: CometChatThreadedHeaderStyle(
        bubbleContainerBackGroundColor: Color(0xFFFEEDE1),
        countTextColor: Colors.purple,
        countContainerBackGroundColor: Colors.grey[100],
        incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
          backgroundColor: Colors.grey[200],
        ),
        outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
          backgroundColor: Color(0xFFF76808),
          borderRadius: BorderRadius.circular(12),
        ),
      ),
    )
    ```
  </Tab>
</Tabs>

### Style Properties

| Property                         | Type                                   | Description                               |
| -------------------------------- | -------------------------------------- | ----------------------------------------- |
| `bubbleContainerBackGroundColor` | `Color?`                               | Background color for the bubble container |
| `bubbleContainerBorder`          | `BoxBorder?`                           | Border for the bubble container           |
| `bubbleContainerBorderRadius`    | `BorderRadiusGeometry?`                | Border radius for the bubble container    |
| `countTextStyle`                 | `TextStyle?`                           | Text style for the reply count            |
| `countTextColor`                 | `Color?`                               | Color for the reply count text            |
| `countContainerBackGroundColor`  | `Color?`                               | Background color for the count container  |
| `countContainerBorder`           | `BoxBorder?`                           | Border for the count container            |
| `constraints`                    | `BoxConstraints?`                      | Constraints for the message container     |
| `incomingMessageBubbleStyle`     | `CometChatIncomingMessageBubbleStyle?` | Style for incoming message bubble         |
| `outgoingMessageBubbleStyle`     | `CometChatOutgoingMessageBubbleStyle?` | Style for outgoing message bubble         |

## Props Reference

| Prop                 | Type                                   | Default  | Description                             |
| -------------------- | -------------------------------------- | -------- | --------------------------------------- |
| `parentMessage`      | `BaseMessage`                          | Required | Parent message for the thread           |
| `loggedInUser`       | `User`                                 | Required | Logged in user object                   |
| `messageActionView`  | `Function(BaseMessage, BuildContext)?` | `null`   | Custom action view for the message      |
| `style`              | `CometChatThreadedHeaderStyle?`        | `null`   | Style parameter for the threaded header |
| `template`           | `CometChatMessageTemplate?`            | `null`   | Message template used in the thread     |
| `height`             | `double?`                              | `null`   | Height of the widget                    |
| `width`              | `double?`                              | `null`   | Width of the widget                     |
| `receiptsVisibility` | `bool?`                                | `true`   | Controls visibility of receipts         |

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

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

  <Card title="Theming" icon="palette" href="/ui-kit/flutter/v5/theme-introduction">
    Learn how to customize the look and feel
  </Card>

  <Card title="Localization" icon="globe" href="/ui-kit/flutter/v5/localize">
    Support multiple languages in your app
  </Card>
</CardGroup>