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

# Thread Header

> Configure CometChat React UI Kit thread headers with parent message context, reply views, composer layout, and close actions.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatThreadHeader",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatThreadHeader } from \"@cometchat/chat-uikit-react\";",
    "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
    "description": "Displays the parent message and reply count at the top of a threaded conversation view.",
    "cssRootClass": ".cometchat-thread-header",
    "props": {
      "data": {
        "parentMessage": { "type": "CometChat.BaseMessage", "required": true },
        "template": { "type": "CometChatMessageTemplate", "default": "undefined" },
        "textFormatters": { "type": "CometChatTextFormatter[]", "default": "undefined" },
        "separatorDateTimeFormat": { "type": "CalendarObject", "default": "DD MMM, YYYY" },
        "messageSentAtDateTimeFormat": { "type": "CalendarObject", "default": "hh:mm A" }
      },
      "callbacks": {
        "onClose": "() => void",
        "onError": "((error: CometChat.CometChatException) => void) | null",
        "onSubtitleClicked": "() => void"
      },
      "visibility": {
        "hideDate": { "type": "boolean", "default": false },
        "hideReplyCount": { "type": "boolean", "default": false },
        "hideReceipts": { "type": "boolean", "default": false },
        "showScrollbar": { "type": "boolean", "default": false }
      },
      "viewSlots": {
        "messageBubbleView": "JSX.Element",
        "subtitleView": "JSX.Element"
      }
    },
    "types": {
      "CalendarObject": {
        "today": "string | undefined",
        "yesterday": "string | undefined",
        "lastWeek": "string | undefined",
        "otherDays": "string | undefined"
      }
    }
  }
  ```
</Accordion>

## Where It Fits

`CometChatThreadHeader` renders the parent message bubble and reply count at the top of a thread panel. Wire it above a `CometChatMessageList` (with `parentMessageId`) and `CometChatMessageComposer` (with `parentMessageId`) to build a complete thread view.

```tsx lines theme={null}
import { useEffect, useState } from "react";
import {
  CometChatThreadHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function ThreadView({ parentMessageId, user }: { parentMessageId: number; user: CometChat.User }) {
  const [parentMessage, setParentMessage] = useState<CometChat.BaseMessage>();

  useEffect(() => {
    CometChat.getMessageDetails(String(parentMessageId)).then(setParentMessage);
  }, [parentMessageId]);

  if (!parentMessage) return null;

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      <CometChatThreadHeader
        parentMessage={parentMessage}
        onClose={() => { /* close thread panel */ }}
      />
      <CometChatMessageList user={user} parentMessageId={parentMessageId} />
      <CometChatMessageComposer user={user} parentMessageId={parentMessageId} />
    </div>
  );
}
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-native-development/-wBEWpNl3B5_KrQl/images/a5456902-threaded_message_preview_overview_web_screens-0f6df1fc848c99494f5ef81c5c44393f.png?fit=max&auto=format&n=-wBEWpNl3B5_KrQl&q=85&s=ee5e4f6565bc165edd2e13399bfc897e" width="1280" height="635" data-path="images/a5456902-threaded_message_preview_overview_web_screens-0f6df1fc848c99494f5ef81c5c44393f.png" />
</Frame>

***

## Minimal Render

```tsx lines theme={null}
import { useEffect, useState } from "react";
import { CometChatThreadHeader } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function ThreadHeaderDemo() {
  const [parentMessage, setParentMessage] = useState<CometChat.BaseMessage>();

  useEffect(() => {
    CometChat.getMessageDetails("MESSAGE_ID").then(setParentMessage);
  }, []);

  return parentMessage ? (
    <CometChatThreadHeader parentMessage={parentMessage} />
  ) : null;
}

export default ThreadHeaderDemo;
```

Root CSS class: `.cometchat-thread-header`

***

## Actions and Events

### Callback Props

#### onClose

Fires when the close button is clicked.

```tsx lines theme={null}
import { CometChatThreadHeader } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function ThreadHeaderWithClose({ parentMessage }: { parentMessage: CometChat.BaseMessage }) {
  return (
    <CometChatThreadHeader
      parentMessage={parentMessage}
      onClose={() => console.log("Close thread panel")}
    />
  );
}
```

#### onSubtitleClicked

Fires when the subtitle area is clicked.

```tsx lines theme={null}
import { CometChatThreadHeader } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function ThreadHeaderWithSubtitleClick({ parentMessage }: { parentMessage: CometChat.BaseMessage }) {
  return (
    <CometChatThreadHeader
      parentMessage={parentMessage}
      onSubtitleClicked={() => console.log("Subtitle clicked")}
    />
  );
}
```

#### onError

Fires on internal errors.

```tsx lines theme={null}
import { CometChatThreadHeader } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function ThreadHeaderWithError({ parentMessage }: { parentMessage: CometChat.BaseMessage }) {
  return (
    <CometChatThreadHeader
      parentMessage={parentMessage}
      onError={(error: CometChat.CometChatException) => {
        console.error("ThreadHeader error:", error);
      }}
    />
  );
}
```

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

The component listens to SDK events internally for real-time reply count updates. No manual attachment needed.

***

## Custom View Slots

| Slot | Type | Replaces |
| - | - | - |
| `messageBubbleView` | `JSX.Element` | Parent message bubble |
| `subtitleView` | `JSX.Element` | Subtitle text below the thread title |

### messageBubbleView

Replace the parent message bubble with a custom view.

```tsx lines theme={null}
import { CometChatThreadHeader } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function CustomBubbleThread({ parentMessage }: { parentMessage: CometChat.BaseMessage }) {
  return (
    <CometChatThreadHeader
      parentMessage={parentMessage}
      messageBubbleView={<div>Custom bubble view</div>}
    />
  );
}
```

### Date Time Format Customization

#### separatorDateTimeFormat

```tsx lines theme={null}
import {
  CometChatThreadHeader,
  CalendarObject,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function CustomDateThread({ parentMessage }: { parentMessage: CometChat.BaseMessage }) {
  return (
    <CometChatThreadHeader
      parentMessage={parentMessage}
      separatorDateTimeFormat={new CalendarObject({
        today: "hh:mm A",
        yesterday: "[yesterday]",
        otherDays: "DD/MM/YYYY",
      })}
    />
  );
}
```

<Note>
  If no property is passed in the [CalendarObject](/ui-kit/react/v6/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/v6/localize#customisation) first. If also missing there, the component's default formatting applies.
</Note>

***

## Common Patterns

### Thread header with hidden chrome

```tsx lines theme={null}
import { CometChatThreadHeader } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function MinimalThread({ parentMessage }: { parentMessage: CometChat.BaseMessage }) {
  return (
    <CometChatThreadHeader
      parentMessage={parentMessage}
      hideDate={true}
      hideReplyCount={true}
      hideReceipts={true}
    />
  );
}
```

***

## CSS Architecture

The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`.

### Key Selectors

| Target | Selector |
| - | - |
| Root | `.cometchat-thread-header` |
| Top bar | `.cometchat-thread-header__top-bar` |
| Title | `.cometchat-thread-header__top-bar-title` |
| Subtitle | `.cometchat-thread-header__top-bar-subtitle-text` |
| Close button | `.cometchat-thread-header__top-bar-close` |
| Body | `.cometchat-thread-header__body` |
| Date separator | `.cometchat-thread-header__body-timestamp` |
| Message bubble area | `.cometchat-thread-header__message` |
| Incoming message | `.cometchat-thread-header__message-incoming` |
| Outgoing message | `.cometchat-thread-header__message-outgoing` |
| Reply bar | `.cometchat-thread-header__reply-bar` |
| Reply count | `.cometchat-thread-header__reply-bar-count` |
| Reply divider | `.cometchat-thread-header__reply-bar-divider` |

### Example: Brand-themed thread header

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-native-development/W3kGAkZYxGUE2Z7I/images/43bea373-threaded_message_preview_style_web_screens-054bad3659d73ab2a927d3ba7dd9160a.png?fit=max&auto=format&n=W3kGAkZYxGUE2Z7I&q=85&s=d85570edc39eea08e83844a714611a1c" width="1280" height="635" data-path="images/43bea373-threaded_message_preview_style_web_screens-054bad3659d73ab2a927d3ba7dd9160a.png" />
</Frame>

```css lines theme={null}
.cometchat-thread-header {
  background-color: #edeafa;
}

.cometchat-thread-header__reply-bar-count {
  color: #6852d6;
}

.cometchat-thread-header__reply-bar-divider {
  background: #6852d6;
}
```

***

## Props

All props are optional unless noted otherwise.

***

### hideDate

Hides the date header.

| | |
| - | - |
| Type | `boolean` |
| Default | `false` |

***

### hideReceipts

Hides the receipt indicator.

| | |
| - | - |
| Type | `boolean` |
| Default | `false` |

***

### hideReplyCount

Hides the reply count.

| | |
| - | - |
| Type | `boolean` |
| Default | `false` |

***

### messageBubbleView

Custom component for the parent message bubble.

| | |
| - | - |
| Type | `JSX.Element` |
| Default | `undefined` |

***

### messageSentAtDateTimeFormat

Format for the message sent-at timestamp.

| | |
| - | - |
| Type | `CalendarObject` |
| Default | `hh:mm A` |

***

### onClose

Callback fired when the close button is clicked.

| | |
| - | - |
| Type | `() => void` |
| Default | `undefined` |

***

### onError

Callback fired when the component encounters an error.

| | |
| - | - |
| Type | `((error: CometChat.CometChatException) => void) \| null` |
| Default | `undefined` |

***

### onSubtitleClicked

Callback fired when the subtitle area is clicked.

| | |
| - | - |
| Type | `() => void` |
| Default | `undefined` |

***

### parentMessage

The parent message displayed in the thread header. **Required.**

| | |
| - | - |
| Type | `CometChat.BaseMessage` |
| Default | — |

***

### separatorDateTimeFormat

Format for the date separator timestamp.

| | |
| - | - |
| Type | `CalendarObject` |
| Default | `DD MMM, YYYY` |

***

### showScrollbar

Shows the scrollbar in the component.

| | |
| - | - |
| Type | `boolean` |
| Default | `false` |

***

### subtitleView

Custom component for the subtitle text.

| | |
| - | - |
| Type | `JSX.Element` |
| Default | `undefined` |

***

### template

Custom template for the parent message bubble rendering.

| | |
| - | - |
| Type | `CometChatMessageTemplate` |
| Default | `undefined` |

***

### textFormatters

Custom text formatters for message text.

| | |
| - | - |
| Type | `CometChatTextFormatter[]` |
| Default | `undefined` |

***

## CSS Selectors

| Target | Selector |
| - | - |
| Root | `.cometchat-thread-header` |
| Top bar | `.cometchat-thread-header__top-bar` |
| Title | `.cometchat-thread-header__top-bar-title` |
| Subtitle | `.cometchat-thread-header__top-bar-subtitle-text` |
| Close button | `.cometchat-thread-header__top-bar-close` |
| Body | `.cometchat-thread-header__body` |
| Date separator | `.cometchat-thread-header__body-timestamp` |
| Message bubble area | `.cometchat-thread-header__message` |
| Incoming message | `.cometchat-thread-header__message-incoming` |
| Outgoing message | `.cometchat-thread-header__message-outgoing` |
| Reply bar | `.cometchat-thread-header__reply-bar` |
| Reply count | `.cometchat-thread-header__reply-bar-count` |
| Reply divider | `.cometchat-thread-header__reply-bar-divider` |


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