> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Header

> Toolbar displaying user/group avatar, name, status, typing indicator, back button, and call controls for a single conversation.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatMessageHeader",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatMessageHeader } from \"@cometchat/chat-uikit-react\";",
    "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
    "description": "Toolbar displaying user/group avatar, name, status, typing indicator, back button, and call controls for a single conversation.",
    "cssRootClass": ".cometchat-message-header",
    "note": "View slots are JSX.Element (not functions) — unlike list components.",
    "props": {
      "data": {
        "user": { "type": "CometChat.User", "default": "undefined" },
        "group": { "type": "CometChat.Group", "default": "undefined" },
        "lastActiveAtDateTimeFormat": { "type": "CalendarObject", "default": "component default" },
        "summaryGenerationMessageCount": { "type": "number", "default": 1000 }
      },
      "callbacks": {
        "onBack": "() => void",
        "onError": "((error: CometChat.CometChatException) => void) | null",
        "onItemClick": "() => void",
        "onSearchOptionClicked": "() => void"
      },
      "visibility": {
        "showBackButton": { "type": "boolean", "default": false },
        "hideVideoCallButton": { "type": "boolean", "default": false },
        "hideVoiceCallButton": { "type": "boolean", "default": false },
        "hideUserStatus": { "type": "boolean", "default": false },
        "showConversationSummaryButton": { "type": "boolean", "default": false },
        "showSearchOption": { "type": "boolean", "default": false },
        "enableAutoSummaryGeneration": { "type": "boolean", "default": false }
      },
      "viewSlots": {
        "itemView": "JSX.Element",
        "leadingView": "JSX.Element",
        "titleView": "JSX.Element",
        "subtitleView": "JSX.Element",
        "trailingView": "JSX.Element",
        "auxiliaryButtonView": "JSX.Element"
      }
    },
    "sdkListeners": [
      "onUserOnline",
      "onUserOffline",
      "onTypingStarted",
      "onTypingEnded",
      "onGroupMemberJoined",
      "onGroupMemberLeft",
      "onGroupMemberKicked",
      "onGroupMemberBanned",
      "onMemberAddedToGroup"
    ],
    "types": {
      "CalendarObject": {
        "today": "string | undefined",
        "yesterday": "string | undefined",
        "lastWeek": "string | undefined",
        "otherDays": "string | undefined",
        "relativeTime": {
          "minute": "string | undefined",
          "minutes": "string | undefined",
          "hour": "string | undefined",
          "hours": "string | undefined"
        }
      }
    }
  }
  ```
</Accordion>

## Where It Fits

`CometChatMessageHeader` is a toolbar component that sits above `CometChatMessageList` and `CometChatMessageComposer`. It receives a `user` or `group` prop and displays the conversation's avatar, name, online status, and typing indicator. Call buttons are rendered automatically when the calling extension is enabled.

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

function ChatView() {
  const [user, setUser] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("UID").then(setUser);
  }, []);

  if (!user) return null;

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      <CometChatMessageHeader user={user} />
      <CometChatMessageList user={user} />
      <CometChatMessageComposer user={user} />
    </div>
  );
}
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/2U5tVIzH12dbbFtr/images/af3844a0-messages_header_overview_web_screens-e2e210ec4afa809b4d4dd038df2b4073.png?fit=max&auto=format&n=2U5tVIzH12dbbFtr&q=85&s=2669e33b76287901af784b864b9da026" width="1080" height="124" data-path="images/af3844a0-messages_header_overview_web_screens-e2e210ec4afa809b4d4dd038df2b4073.png" />
</Frame>

***

## Minimal Render

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

function MessageHeaderDemo() {
  const [user, setUser] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("UID").then(setUser);
  }, []);

  return user ? <CometChatMessageHeader user={user} /> : null;
}

export default MessageHeaderDemo;
```

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

***

## Actions and Events

### Callback Props

#### onBack

Fires when the back button is clicked. Requires `showBackButton={true}`.

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

function HeaderWithBack({ user }: { user: CometChat.User }) {
  return (
    <CometChatMessageHeader
      user={user}
      showBackButton={true}
      onBack={() => console.log("Navigate back")}
    />
  );
}
```

#### onItemClick

Fires when the header list item area (avatar + name) is clicked.

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

function HeaderWithItemClick({ user }: { user: CometChat.User }) {
  return (
    <CometChatMessageHeader
      user={user}
      onItemClick={() => console.log("Open user detail")}
    />
  );
}
```

#### onSearchOptionClicked

Fires when the search option is clicked. Requires `showSearchOption={true}`.

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

function HeaderWithSearch({ user }: { user: CometChat.User }) {
  return (
    <CometChatMessageHeader
      user={user}
      showSearchOption={true}
      onSearchOptionClicked={() => console.log("Open search")}
    />
  );
}
```

#### onError

Fires on internal errors.

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

function HeaderWithError({ user }: { user: CometChat.User }) {
  return (
    <CometChatMessageHeader
      user={user}
      onError={(error: CometChat.CometChatException) => {
        console.error("MessageHeader error:", error);
      }}
    />
  );
}
```

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

The component listens to these SDK events internally. No manual attachment needed.

| SDK Listener                        | Internal behavior                                     |
| ----------------------------------- | ----------------------------------------------------- |
| `onUserOnline` / `onUserOffline`    | Updates the user's online/offline status indicator    |
| `onTypingStarted` / `onTypingEnded` | Shows/hides the typing indicator in the subtitle area |
| Group member events                 | Updates group member count when members join/leave    |

<Note>
  In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally.
</Note>

***

## Custom View Slots

View slots for `CometChatMessageHeader` are `JSX.Element` (not functions) — unlike list components where slots receive a data parameter.

| Slot                  | Type          | Replaces                                     |
| --------------------- | ------------- | -------------------------------------------- |
| `itemView`            | `JSX.Element` | Entire list item (avatar + name + subtitle)  |
| `leadingView`         | `JSX.Element` | Avatar / left section                        |
| `titleView`           | `JSX.Element` | Name / title text                            |
| `subtitleView`        | `JSX.Element` | Subtitle text (status / typing indicator)    |
| `trailingView`        | `JSX.Element` | Right section (call buttons area)            |
| `auxiliaryButtonView` | `JSX.Element` | Auxiliary button area (next to call buttons) |

### itemView

Replace the entire list item (avatar + name + subtitle).

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/KVBs_L3B6NmQumhv/images/0a3d38de-messages_header_list_item_view_web_screens-024979a70f09486b76e913633bfc9e81.png?fit=max&auto=format&n=KVBs_L3B6NmQumhv&q=85&s=56cf530a0c9ae2cd399e707fa7e7baac" width="1080" height="124" data-path="images/0a3d38de-messages_header_list_item_view_web_screens-024979a70f09486b76e913633bfc9e81.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import {
      CometChatMessageHeader,
      CometChatListItem,
    } from "@cometchat/chat-uikit-react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";

    function CustomItemViewHeader({ user }: { user: CometChat.User }) {
      return (
        <CometChatMessageHeader
          user={user}
          itemView={
            <CometChatListItem
              avatarName={user.getName()}
              avatarURL={user.getAvatar()}
              title={user.getName()}
              subtitleView={user.getStatus()}
            />
          }
          showBackButton={true}
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .cometchat-message-header .cometchat-list-item .cometchat-avatar {
      border-radius: 8px;
    }
    ```
  </Tab>
</Tabs>

### titleView

Replace the name / title text.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/Q-VZaihy61fy3D_G/images/1ee88b50-message_header_custom_title_web_screens-d8b5c4b4ef21f6ea1e5e87c536ddfbd6.png?fit=max&auto=format&n=Q-VZaihy61fy3D_G&q=85&s=8f81f9a5d067abb8c45878063da30c72" width="1080" height="124" data-path="images/1ee88b50-message_header_custom_title_web_screens-d8b5c4b4ef21f6ea1e5e87c536ddfbd6.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";

    function CustomTitleHeader({ user }: { user: CometChat.User }) {
      return (
        <CometChatMessageHeader
          user={user}
          titleView={
            <div className="message-header__title-view">
              <span className="message-header__title-view-name">
                {user.getName() + " • "}
              </span>
              <span className="message-header__title-view-status">
                {user.getStatusMessage()}
              </span>
            </div>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .cometchat-message-header .message-header__title-view {
      display: flex;
      gap: 4px;
      width: 100%;
    }

    .message-header__title-view-name {
      color: #141414;
      font: 500 16px/19.2px Roboto;
    }

    .message-header__title-view-status {
      color: #6852d6;
      font: 400 16px/19.2px Roboto;
    }
    ```
  </Tab>
</Tabs>

### subtitleView

Replace the subtitle text (status / typing indicator area).

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/tiy_c-4NywbKIGIr/images/7f5924bc-messages_header_subtitle_view_web_screens-2b9e776b10d555785c6cdcc224433167.png?fit=max&auto=format&n=tiy_c-4NywbKIGIr&q=85&s=f7b394f1295dc7c3c7c68f270adce52f" width="1080" height="124" data-path="images/7f5924bc-messages_header_subtitle_view_web_screens-2b9e776b10d555785c6cdcc224433167.png" />
</Frame>

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

function CustomSubtitleHeader({ group }: { group: CometChat.Group }) {
  return (
    <CometChatMessageHeader
      group={group}
      subtitleView={
        <>{group.getMembersCount() + " • " + group.getDescription()}</>
      }
    />
  );
}
```

### leadingView

Replace the avatar / left section.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/udim9ku6wPsRNXGs/images/e084dde6-message_header_custom_leading_web_screens-fd38a005ae8bfcce9e2310031b1a90e5.png?fit=max&auto=format&n=udim9ku6wPsRNXGs&q=85&s=1c40da2e67d52d42da25457a659683cb" width="1080" height="124" data-path="images/e084dde6-message_header_custom_leading_web_screens-fd38a005ae8bfcce9e2310031b1a90e5.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import {
      CometChatMessageHeader,
      CometChatAvatar,
    } from "@cometchat/chat-uikit-react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";

    function CustomLeadingHeader({ user }: { user: CometChat.User }) {
      return (
        <CometChatMessageHeader
          user={user}
          leadingView={
            <div className="message-header__leading-view">
              <CometChatAvatar image={user.getAvatar()} name={user.getName()} />
              <span className="message-header__leading-view-role">
                {user.getRole()}
              </span>
            </div>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .cometchat-message-header .message-header__leading-view .cometchat-avatar {
      border-radius: 8px;
      height: 48px;
      width: 48px;
    }

    .message-header__leading-view-role {
      display: flex;
      width: 48px;
      height: 15px;
      padding: 1px 3px;
      justify-content: center;
      align-items: center;
      color: #fff;
      font: 600 8px/9.6px Roboto;
      background: #0b7bea;
      position: absolute;
      bottom: -2px;
    }

    .message-header__leading-view {
      position: relative;
    }
    ```
  </Tab>
</Tabs>

### trailingView

Replace the right section (call buttons area).

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/60KLvpM3Vx0byZeU/images/b640e72a-message_header_custom_trailing_web_screens-4961a5bdae2839b245b87f641a6c9c2f.png?fit=max&auto=format&n=60KLvpM3Vx0byZeU&q=85&s=93868c5c7f2213acd3cc8824f3a7ae11" width="1080" height="124" data-path="images/b640e72a-message_header_custom_trailing_web_screens-4961a5bdae2839b245b87f641a6c9c2f.png" />
</Frame>

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

function CustomTrailingHeader({ user }: { user: CometChat.User }) {
  return (
    <CometChatMessageHeader
      user={user}
      trailingView={
        <CometChatButton onClick={() => { /* custom action */ }} />
      }
    />
  );
}
```

### auxiliaryButtonView

Replace the auxiliary button area (next to call buttons).

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/RxKy5RgybeX-8GbH/images/1ab8252d-messages_header_menu_web_screens-5d6e2d212881585e5761e1f53e328ea4.png?fit=max&auto=format&n=RxKy5RgybeX-8GbH&q=85&s=8fbb9cf24ee918927e2a952088263fcd" width="1080" height="124" data-path="images/1ab8252d-messages_header_menu_web_screens-5d6e2d212881585e5761e1f53e328ea4.png" />
</Frame>

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

function AuxiliaryButtonHeader({ group }: { group: CometChat.Group }) {
  return (
    <CometChatMessageHeader
      group={group}
      auxiliaryButtonView={
        <CometChatButton onClick={() => { /* custom action */ }} />
      }
    />
  );
}
```

### lastActiveAtDateTimeFormat

Customize the "last seen" timestamp format using a `CalendarObject`.

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

function CustomDateHeader({ user }: { user: CometChat.User }) {
  const dateFormat = new CalendarObject({
    today: "hh:mm A",
    yesterday: "[yesterday]",
    otherDays: "DD MM YYYY",
  });

  return (
    <CometChatMessageHeader
      user={user}
      lastActiveAtDateTimeFormat={dateFormat}
    />
  );
}
```

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

***

## Common Patterns

### Header with back button and search

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

function FullFeaturedHeader({ user }: { user: CometChat.User }) {
  return (
    <CometChatMessageHeader
      user={user}
      showBackButton={true}
      showSearchOption={true}
      onBack={() => { /* navigate back */ }}
      onSearchOptionClicked={() => { /* open search */ }}
    />
  );
}
```

### Hide call buttons

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

function NoCalls({ user }: { user: CometChat.User }) {
  return (
    <CometChatMessageHeader
      user={user}
      hideVideoCallButton={true}
      hideVoiceCallButton={true}
    />
  );
}
```

### Group header with AI summary

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

function GroupHeaderWithSummary({ group }: { group: CometChat.Group }) {
  return (
    <CometChatMessageHeader
      group={group}
      showConversationSummaryButton={true}
      enableAutoSummaryGeneration={true}
      summaryGenerationMessageCount={500}
    />
  );
}
```

***

## CSS Architecture

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

1. Global tokens are set on the `.cometchat` root wrapper.
2. Component CSS (`.cometchat-message-header`) consumes these tokens via `var()` with fallback values.
3. Overrides target `.cometchat-message-header` descendant selectors in a global stylesheet.

### Key Selectors

| Target                | Selector                                                           |
| --------------------- | ------------------------------------------------------------------ |
| Root                  | `.cometchat-message-header`                                        |
| List item             | `.cometchat-message-header .cometchat-list-item`                   |
| Body title            | `.cometchat-message-header .cometchat-list-item__body-title`       |
| Avatar                | `.cometchat-message-header .cometchat-list-item .cometchat-avatar` |
| Leading view          | `.cometchat-message-header .cometchat-list-item__leading-view`     |
| Trailing view         | `.cometchat-message-header .cometchat-list-item__trailing-view`    |
| Subtitle              | `.cometchat-message-header__subtitle`                              |
| Subtitle (typing)     | `.cometchat-message-header__subtitle-typing`                       |
| Back button           | `.cometchat-message-header__back-button`                           |
| Auxiliary button view | `.cometchat-message-header__auxiliary-button-view`                 |
| List item container   | `.cometchat-message-header__listitem`                              |
| Title container       | `.cometchat-message-header .cometchat-list-item__title-container`  |

### Example: Brand-themed header

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/CrArf1QwUPg5EvCC/images/2a21baeb-messages_header_style_web_screens-f4b1c171012576f4fb7fc25cf02f92d5.png?fit=max&auto=format&n=CrArf1QwUPg5EvCC&q=85&s=d79325db3f164e5d9908639fb68dd5ad" width="1080" height="124" data-path="images/2a21baeb-messages_header_style_web_screens-f4b1c171012576f4fb7fc25cf02f92d5.png" />
</Frame>

```css lines theme={null}
.cometchat-message-header .cometchat-list-item .cometchat-avatar {
  background: #f0999b;
  border-radius: 8px;
}

.cometchat-message-header .cometchat-avatar__text {
  font-family: "SF Pro";
}
```

### Customization Matrix

| What to change                        | Where           | Property/API                                    | Example                                                               |
| ------------------------------------- | --------------- | ----------------------------------------------- | --------------------------------------------------------------------- |
| Override behavior on user interaction | Component props | `on<Event>` callbacks                           | `onBack={() => navigate(-1)}`                                         |
| Toggle visibility of UI elements      | Component props | `hide<Feature>` / `show<Feature>` boolean props | `hideVideoCallButton={true}`                                          |
| Replace a section of the header       | Component props | `<slot>View` JSX.Element props                  | `titleView={<div>Custom</div>}`                                       |
| Change colors, fonts, spacing         | Global CSS      | Target `.cometchat-message-header` class        | `.cometchat-message-header .cometchat-avatar { border-radius: 8px; }` |

***

## Props

All props are optional unless noted otherwise.

***

### auxiliaryButtonView

Custom component for the auxiliary button area.

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

***

### enableAutoSummaryGeneration

Enables automatic conversation summary generation.

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

***

### group

Displays group details in the header.

|         |                   |
| ------- | ----------------- |
| Type    | `CometChat.Group` |
| Default | `undefined`       |

Pass either `user` or `group`, not both.

***

### hideBackButton

Hides the back navigation button. Deprecated — use `showBackButton` instead.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `true`    |

***

### hideUserStatus

Hides the user's online/offline status indicator.

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

***

### hideVideoCallButton

Hides the video call button.

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

***

### hideVoiceCallButton

Hides the voice call button.

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

***

### itemView

Custom component for the entire list item.

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

***

### lastActiveAtDateTimeFormat

Format for displaying the "last seen" timestamp.

|         |                   |
| ------- | ----------------- |
| Type    | `CalendarObject`  |
| Default | Component default |

***

### leadingView

Custom component for the avatar / left section.

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

***

### onBack

Callback fired when the back button is clicked.

|         |              |
| ------- | ------------ |
| Type    | `() => void` |
| Default | `() => {}`   |

***

### onError

Callback fired when the component encounters an error.

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

***

### onItemClick

Callback fired when the header list item is clicked.

|         |              |
| ------- | ------------ |
| Type    | `() => void` |
| Default | `() => {}`   |

***

### onSearchOptionClicked

Callback fired when the search option is clicked.

|         |              |
| ------- | ------------ |
| Type    | `() => void` |
| Default | `() => {}`   |

***

### showBackButton

Shows the back navigation button.

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

***

### showConversationSummaryButton

Shows the AI conversation summary button.

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

***

### showSearchOption

Shows the search option in the header.

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

***

### subtitleView

Custom component for the subtitle text.

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

***

### summaryGenerationMessageCount

Number of messages used for AI summary generation.

|         |          |
| ------- | -------- |
| Type    | `number` |
| Default | `1000`   |

***

### titleView

Custom component for the name / title text.

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

***

### trailingView

Custom component for the right section.

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

***

### user

Displays user details in the header.

|         |                  |
| ------- | ---------------- |
| Type    | `CometChat.User` |
| Default | `undefined`      |

Pass either `user` or `group`, not both.

***

## CSS Selectors

| Target                | Selector                                                           |
| --------------------- | ------------------------------------------------------------------ |
| Root                  | `.cometchat-message-header`                                        |
| List item             | `.cometchat-message-header .cometchat-list-item`                   |
| Body title            | `.cometchat-message-header .cometchat-list-item__body-title`       |
| Avatar                | `.cometchat-message-header .cometchat-list-item .cometchat-avatar` |
| Leading view          | `.cometchat-message-header .cometchat-list-item__leading-view`     |
| Trailing view         | `.cometchat-message-header .cometchat-list-item__trailing-view`    |
| Subtitle              | `.cometchat-message-header__subtitle`                              |
| Subtitle (typing)     | `.cometchat-message-header__subtitle-typing`                       |
| Back button           | `.cometchat-message-header__back-button`                           |
| Auxiliary button view | `.cometchat-message-header__auxiliary-button-view`                 |
| List item container   | `.cometchat-message-header__listitem`                              |
| Title container       | `.cometchat-message-header .cometchat-list-item__title-container`  |
| Summary button        | `.cometchat-message-header__conversation-summary-button`           |
| Search button         | `.cometchat-message-header__search-button`                         |
| Menu                  | `.cometchat-message-header__menu`                                  |