Message Header

AI Agent Component Spec

Field	Value
Package	`@cometchat/chat-uikit-react`
Component	`CometChatMessageHeader` — conversation toolbar
CSS Import	`@import url("@cometchat/chat-uikit-react/css-variables.css");`
Key Props	`user`, `group`, `showBackButton`, `hideVideoCallButton`
Real-time	Auto-updates online status and typing indicator

Overview

This guide shows you how to display conversation details in a header toolbar. You’ll learn to show user/group info, online status, typing indicators, and call buttons. Time estimate: 10 minutes Difficulty: Beginner

Prerequisites

React.js Integration completed

Use Cases

The message header is essential for:

Conversation context — Show who you’re chatting with
Online status — Display user availability
Typing indicators — Show when someone is typing
Quick actions — Voice/video call buttons
Navigation — Back button for mobile layouts

Steps

Step 1: Add Basic Header

Display header for a user conversation:

BasicHeader.tsx

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

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

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

  if (!user) return null;

  return <CometChatMessageHeader user={user} />;
}

export default BasicHeader;

Step 2: Add Back Button

Enable navigation for mobile layouts:

HeaderWithBack.tsx

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

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

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

  if (!user) return null;

  return (
    <CometChatMessageHeader
      user={user}
      showBackButton={true}
      onBack={() => {
        console.log("Navigate back");
        // Navigate to conversation list
      }}
    />
  );
}

export default HeaderWithBack;

Step 3: Hide Call Buttons

Remove voice/video call buttons:

HeaderNoCalls.tsx

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

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

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

  if (!user) return null;

  return (
    <CometChatMessageHeader
      user={user}
      hideVideoCallButton={true}
      hideVoiceCallButton={true}
    />
  );
}

export default HeaderNoCalls;

Step 4: Add Search Option

Enable message search:

HeaderWithSearch.tsx

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

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

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

  if (!user) return null;

  return (
    <CometChatMessageHeader
      user={user}
      showSearchOption={true}
      onSearchOptionClicked={() => {
        console.log("Open search");
        // Open search modal or panel
      }}
    />
  );
}

export default HeaderWithSearch;

Step 5: Customize Title and Subtitle

Replace the default title and subtitle views:

CustomTitleHeader.tsx

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

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

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

  if (!user) return null;

  return (
    <CometChatMessageHeader
      user={user}
      titleView={
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontWeight: 600 }}>{user.getName()}</span>
          <span style={{ color: "#6852d6", fontSize: 12 }}>
            {user.getRole() || "Member"}
          </span>
        </div>
      }
      subtitleView={
        <div style={{ fontSize: 12, color: "#727272" }}>
          {user.getStatusMessage() || user.getStatus()}
        </div>
      }
    />
  );
}

export default CustomTitleHeader;

Step 6: Customize Avatar (Leading View)

Replace the avatar section:

CustomAvatarHeader.tsx

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatMessageHeader,
  CometChatAvatar,
} from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

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

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

  if (!user) return null;

  return (
    <CometChatMessageHeader
      user={user}
      leadingView={
        <div style={{ position: "relative" }}>
          <CometChatAvatar
            image={user.getAvatar()}
            name={user.getName()}
          />
          {user.getStatus() === "online" && (
            <div style={{
              position: "absolute",
              bottom: 0,
              right: 0,
              width: 12,
              height: 12,
              background: "#4caf50",
              borderRadius: "50%",
              border: "2px solid white",
            }} />
          )}
        </div>
      }
    />
  );
}

export default CustomAvatarHeader;

Step 7: Add Auxiliary Buttons

Add custom buttons next to call buttons:

HeaderWithAuxiliary.tsx

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatMessageHeader,
  CometChatButton,
} from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function HeaderWithAuxiliary() {
  const [group, setGroup] = useState<CometChat.Group>();

  useEffect(() => {
    CometChat.getGroup("group_guid").then(setGroup);
  }, []);

  if (!group) return null;

  return (
    <CometChatMessageHeader
      group={group}
      auxiliaryButtonView={
        <div style={{ display: "flex", gap: 8 }}>
          <CometChatButton
            iconURL="/icons/info.svg"
            onClick={() => console.log("Show group info")}
          />
          <CometChatButton
            iconURL="/icons/members.svg"
            onClick={() => console.log("Show members")}
          />
        </div>
      }
    />
  );
}

export default HeaderWithAuxiliary;

Step 8: Enable AI Summary

Show AI conversation summary button:

HeaderWithSummary.tsx

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function HeaderWithSummary() {
  const [group, setGroup] = useState<CometChat.Group>();

  useEffect(() => {
    CometChat.getGroup("group_guid").then(setGroup);
  }, []);

  if (!group) return null;

  return (
    <CometChatMessageHeader
      group={group}
      showConversationSummaryButton={true}
      enableAutoSummaryGeneration={true}
      summaryGenerationMessageCount={500}
    />
  );
}

export default HeaderWithSummary;

Complete Example

Here’s a full chat view with a customized header:

ChatWithHeader.tsx

import { useState, useEffect } from "react";
import {
  CometChatConversations,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
  CalendarObject,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function ChatWithHeader() {
  const [selectedConversation, setSelectedConversation] = useState<CometChat.Conversation>();
  const [showChat, setShowChat] = useState(true);

  const getConversationWith = () => {
    if (!selectedConversation) return null;
    const type = selectedConversation.getConversationType();
    if (type === "user") {
      return { user: selectedConversation.getConversationWith() as CometChat.User };
    }
    return { group: selectedConversation.getConversationWith() as CometChat.Group };
  };

  const conversationWith = getConversationWith();

  // Custom date format for "last seen"
  const lastSeenFormat = new CalendarObject({
    today: "[Today at] hh:mm A",
    yesterday: "[Yesterday at] hh:mm A",
    lastWeek: "dddd [at] hh:mm A",
    otherDays: "MMM DD [at] hh:mm A",
  });

  return (
    <div style={{ display: "flex", height: "100vh", width: "100vw" }}>
      {/* Conversations - hide on mobile when chat is open */}
      <div style={{
        width: showChat && conversationWith ? 0 : 400,
        overflow: "hidden",
        transition: "width 0.3s",
        borderRight: "1px solid #eee",
      }}>
        <CometChatConversations
          onItemClick={(conversation) => {
            setSelectedConversation(conversation);
            setShowChat(true);
          }}
        />
      </div>

      {/* Chat Panel */}
      {conversationWith && (
        <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
          <CometChatMessageHeader
            {...conversationWith}
            showBackButton={true}
            showSearchOption={true}
            lastActiveAtDateTimeFormat={lastSeenFormat}
            onBack={() => setShowChat(false)}
            onSearchOptionClicked={() => console.log("Open search")}
            onItemClick={() => console.log("Open profile")}
          />
          <CometChatMessageList {...conversationWith} />
          <CometChatMessageComposer {...conversationWith} />
        </div>
      )}

      {!conversationWith && (
        <div style={{ flex: 1, display: "grid", placeItems: "center", color: "#727272" }}>
          Select a conversation
        </div>
      )}
    </div>
  );
}

export default ChatWithHeader;

View Slots Reference

Slot	Type	Replaces
`itemView`	`JSX.Element`	Entire list item
`leadingView`	`JSX.Element`	Avatar section
`titleView`	`JSX.Element`	Name/title text
`subtitleView`	`JSX.Element`	Status/typing text
`trailingView`	`JSX.Element`	Call buttons area
`auxiliaryButtonView`	`JSX.Element`	Extra buttons

CSS Customization

Key CSS Selectors

Target	Selector
Root	`.cometchat-message-header`
List item	`.cometchat-message-header .cometchat-list-item`
Avatar	`.cometchat-message-header .cometchat-avatar`
Title	`.cometchat-message-header .cometchat-list-item__body-title`
Subtitle	`.cometchat-message-header__subtitle`
Typing indicator	`.cometchat-message-header__subtitle-typing`
Back button	`.cometchat-message-header__back-button`

Example: Custom Header Style

.cometchat-message-header .cometchat-avatar {
  border-radius: 8px;
}

.cometchat-message-header .cometchat-list-item__body-title {
  font-weight: 600;
  color: #141414;
}

.cometchat-message-header__subtitle-typing {
  color: #6852d6;
  font-style: italic;
}

Common Issues

The header requires either a user or group prop. Pass only one, not both.

Issue	Solution
Status not updating	Check WebSocket connection
Typing indicator not showing	Ensure typing events are enabled
Call buttons missing	Install `@cometchat/calls-sdk-javascript`
Back button not visible	Set `showBackButton={true}`
Custom views not rendering	Ensure JSX is valid (not a function)

For more help, see the Troubleshooting Guide or contact CometChat Support.

Next Steps

Message List Guide

Display messages

Message Composer Guide

Build message input

Voice & Video Guide

Add calling features

Theming Guide

Customize appearance

Overview

Prerequisites

Use Cases

Steps

Step 1: Add Basic Header

Step 2: Add Back Button

Step 3: Hide Call Buttons

Step 4: Add Search Option

Step 5: Customize Title and Subtitle

Step 6: Customize Avatar (Leading View)

Step 7: Add Auxiliary Buttons

Step 8: Enable AI Summary

Complete Example

Key CSS Selectors

Example: Custom Header Style

Common Issues

Next Steps

Message List Guide

Message Composer Guide

Voice & Video Guide

Theming Guide

Message Header Reference

Localization Guide

​Overview

​Prerequisites

​Use Cases

​Steps

​Step 1: Add Basic Header

​Step 2: Add Back Button

​Step 3: Hide Call Buttons

​Step 4: Add Search Option

​Step 5: Customize Title and Subtitle

​Step 6: Customize Avatar (Leading View)

​Step 7: Add Auxiliary Buttons

​Step 8: Enable AI Summary

​Complete Example

​Key CSS Selectors

​Example: Custom Header Style

​Common Issues

​Next Steps

Message List Guide

Message Composer Guide

Voice & Video Guide

Theming Guide

​Related Guides

Message Header Reference

Localization Guide

Overview

Prerequisites

Use Cases

Steps

Step 1: Add Basic Header

Step 2: Add Back Button

Step 3: Hide Call Buttons

Step 4: Add Search Option

Step 5: Customize Title and Subtitle

Step 6: Customize Avatar (Leading View)

Step 7: Add Auxiliary Buttons

Step 8: Enable AI Summary

Complete Example

Key CSS Selectors

Example: Custom Header Style

Common Issues

Next Steps

Related Guides