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

# 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-docs-llms-scoped-indexes/zZz-wQk_4Cpgg3y_/images/af3844a0-messages_header_overview_web_screens-e2e210ec4afa809b4d4dd038df2b4073.png?fit=max&auto=format&n=zZz-wQk_4Cpgg3y_&q=85&s=fd045cc274211b7e3f5b44d1b76ef0c2" 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-docs-llms-scoped-indexes/Fa6hxbnaPB6CCDby/images/0a3d38de-messages_header_list_item_view_web_screens-024979a70f09486b76e913633bfc9e81.png?fit=max&auto=format&n=Fa6hxbnaPB6CCDby&q=85&s=7180cd80a25faa957fc6fdfd20428e9b" 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-docs-llms-scoped-indexes/K_p4Iy5Yo4hNoo1I/images/1ee88b50-message_header_custom_title_web_screens-d8b5c4b4ef21f6ea1e5e87c536ddfbd6.png?fit=max&auto=format&n=K_p4Iy5Yo4hNoo1I&q=85&s=5098679f5e7fc399808e91e2ac3e5d10" 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-docs-llms-scoped-indexes/LUAnk4kNde8CLq7p/images/7f5924bc-messages_header_subtitle_view_web_screens-2b9e776b10d555785c6cdcc224433167.png?fit=max&auto=format&n=LUAnk4kNde8CLq7p&q=85&s=5cd0e7602c720d3063eb6ec133a15026" 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-docs-llms-scoped-indexes/l_1oaiAY9g221I2G/images/e084dde6-message_header_custom_leading_web_screens-fd38a005ae8bfcce9e2310031b1a90e5.png?fit=max&auto=format&n=l_1oaiAY9g221I2G&q=85&s=772739b7d83c4a300371a5da97dcb143" 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-docs-llms-scoped-indexes/d5xW_uJ3Iif7doR1/images/b640e72a-message_header_custom_trailing_web_screens-4961a5bdae2839b245b87f641a6c9c2f.png?fit=max&auto=format&n=d5xW_uJ3Iif7doR1&q=85&s=ca9bdd6f0ae96cb59ff8c71d44442992" 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-docs-llms-scoped-indexes/K_p4Iy5Yo4hNoo1I/images/1ab8252d-messages_header_menu_web_screens-5d6e2d212881585e5761e1f53e328ea4.png?fit=max&auto=format&n=K_p4Iy5Yo4hNoo1I&q=85&s=aea1683409fc219392ca249514c6ed4b" 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/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

### 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-docs-llms-scoped-indexes/2jSVlYXfUL_4P-jB/images/2a21baeb-messages_header_style_web_screens-f4b1c171012576f4fb7fc25cf02f92d5.png?fit=max&auto=format&n=2jSVlYXfUL_4P-jB&q=85&s=b0d7ea136ef3e40d4a3bec011340d600" 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` |


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