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

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

## 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-docs-llms-scoped-indexes/LUAnk4kNde8CLq7p/images/854e21f6-threaded_messages_action_view_cometchat_screens-7f88ee62a1538cddfa6da45c8eb28982.png?fit=max&auto=format&n=LUAnk4kNde8CLq7p&q=85&s=a1236a306820eb0f4ecf275de5222139" 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-docs-llms-scoped-indexes/Fa6hxbnaPB6CCDby/images/07942114-threaded_messages_action_view_cometchat_screens-0d30d7d0d3394b0a40ee33ea511157b3.png?fit=max&auto=format&n=Fa6hxbnaPB6CCDby&q=85&s=64003c24994ba8b48255f1ac03b15769" 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-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>

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


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