cometchat-components— agent skill

Ground truth: @cometchat/chat-uikit-react@^6 component catalog (installed package types) + docs/ui-kit/react. Official docs: https://www.cometchat.com/docs/ui-kit/react/components-overview · Docs MCP: claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp (or fetch the URL directly without MCP). Verify symbols against the installed package/source before relying on them.

Purpose

This is the single source of truth for CometChat React UI Kit v6 component names, props, and usage. *Check this catalog before writing any `<CometChat>` JSX.** If a component is not listed here, it does not exist in the exported API.

All components are imported from @cometchat/chat-uikit-react. All SDK types are imported from @cometchat/chat-sdk-javascript.

When to use

• Any React-family integration emitting <CometChat*> JSX: Vite + React, Next.js (App or Pages Router), React Router v6/v7, Astro with React islands.
• Before scaffolding any chat surface (conversations, messages, users, groups, calls UI).
• When verifying a component name or prop signature — this catalog is authoritative; the kit's node_modules/@cometchat/chat-uikit-react/dist/types/ is the runtime source of truth that backs it.

When NOT to use

• React Native (Expo or bare) — load cometchat-native-components. Class names are similar but prop conventions diverge (RN uses onItemPress, web uses onItemClick — runtime smoke 2026-06-02 confirmed). Cross-family copy-paste produces silent broken event bindings.
• Angular — load cometchat-angular-components. Angular kit class names are `Component`-suffixed (CometChatConversationsComponent not CometChatConversations — verified by runtime smoke 2026-06-02), HTML selectors are kebab-case, event bindings use round brackets for @Output() events. Different shape entirely.
• Native Android — load cometchat-android-v6-{compose,kotlin}-components (V6) or cometchat-android-v5-components (V5). Different package namespaces (com.cometchat.uikit.compose.* vs com.cometchat.chatuikit.*) — never reuse React component names.
• iOS V5 — load cometchat-ios-components. UIKit Swift surface; CometChatConversations() zero-arg initializer + .set(group: ...) pattern; nothing like the React prop API.
• Flutter V5 / V6 — load cometchat-flutter-{v5,v6}-components. Dart widget API with named parameters; V5 GetX vs V6 Bloc state-management split changes lifecycle.
• Theming-only tasks — load cometchat-theming (CSS variables, recipes) for color/font customization without component changes.
• SDK-only chat (no UI Kit) — this catalog assumes UI Kit components. If a future skill ships for the pure-SDK path (no <CometChat*> JSX), defer to it; today the closest analog is the SDK-only patterns inside cometchat-react-calls §4c.

Importing CometChat.User / CometChat.Group / etc.

CometChat.User, CometChat.Group, CometChat.BaseMessage, CometChat.Conversation, CometChat.GroupMember, CometChat.TextMessage are classes (runtime values), not pure types. That means the import strategy depends on how you use them:

Pattern A — you call the class as a value or use it with `instanceof`. Use a plain value import:

import { CometChat } from "@cometchat/chat-sdk-javascript";

if (entity instanceof CometChat.User) { ... }
const user = await CometChat.getUser(uid);

Pattern B — you use it only as a type annotation, nowhere else. Two options:

// Option 1: value import, reference the type via the namespace — TS lets this slide
// because CometChat is a class-namespace
import { CometChat } from "@cometchat/chat-sdk-javascript";
function renderHeader(user: CometChat.User) { ... }

// Option 2: explicit type-only import
import type { CometChat } from "@cometchat/chat-sdk-javascript";
function renderHeader(user: CometChat.User) { ... }

Do NOT mix these. If you write import type { CometChat } and then try entity instanceof CometChat.User, TypeScript strips the import at compile time and the code throws at runtime. If you write import { CometChat } but only reference CometChat.User as a type, noUnusedLocals can flag it (TS6133).

Safest default: use the plain value import (import { CometChat }). It always works; the TS6133 warning only fires in strict noUnusedLocals configs and can be fixed by actually using the runtime value (e.g. instanceof CometChat.User) or by adding an eslint-disable-next-line if you truly only need the type.

1. Core messaging

⛔ STOP — only the components in THIS catalog exist. Do not invent or recall component names from v4/older memory. Before emitting ANY CometChat* component, confirm it appears in this catalog (or the kit's exports). If it's not here, it does not exist — using it produces an unresolved-import build failure or a blank screen. This is the #1 failure class on this skill.

>

The real v6 component set (the ONLY ones — `import { … } from "@cometchat/chat-uikit-react"`): CometChatConversations, CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer (+ CometChatCompactMessageComposer), CometChatUsers, CometChatGroups, CometChatMessageInformation (+ the calling/feature components in their own catalogs).

>

Commonly hallucinated names that were REMOVED in v6 (verified absent from the kit exports) — do NOT use: the all-in-one composites CometChatConversationsWithMessages, CometChatUsersWithMessages, CometChatGroupsWithMessages, the CometChatMessages composite, and the CometChatUI god-component. There is no single "conversations + messages" component in v6 — you compose the two panes yourself (recipe below). (Note: CometChatMessages/CometChatConversationsWithMessages DO still exist in the Flutter v6 kit — this removal is web/RN/Angular. Always check the per-family catalog.)

The canonical two-pane experience (what "CometChatConversationsWithMessages" used to do — now hand-composed): ``tsx const [active, setActive] = useState<CometChat.Conversation | null>(null); // pick the peer the message views need from the selected conversation: const peer = active?.getConversationWith(); // CometChat.User | CometChat.Group return ( <div style={{ display: "flex", height: "100%" }}> <div style={{ width: 320 }}> <CometChatConversations activeConversation={active ?? undefined} onItemClick={(c) => setActive(c)} /> </div> <div style={{ flex: 1, display: "flex", flexDirection: "column" }}> {peer && <> <CometChatMessageHeader {...(peer instanceof CometChat.User ? { user: peer } : { group: peer })} /> <CometChatMessageList {...(peer instanceof CometChat.User ? { user: peer } : { group: peer })} /> <CometChatMessageComposer {...(peer instanceof CometChat.User ? { user: peer } : { group: peer })} /> </>} </div> </div> ); ` A CometChatMessageHeader/List/Composer takes EITHER user= OR group=` (never both) — derive it from the clicked conversation. Conversations-list-only and single-conversation-only are both valid subsets of this.

These are the components you use to build a chat experience. Most integrations use some combination of these seven.

CometChatConversations

Renders a scrollable list of the logged-in user's conversations (both 1:1 and group).

Key props:

Usage:

<CometChatConversations
  activeConversation={activeConversation}
  onItemClick={(conversation) => setActiveConversation(conversation)}
/>

Works with: CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer (two-pane layout)

CometChatMessageList

Renders messages for a specific user or group conversation. Supports threaded views via parentMessageId.

Key props:

Usage:

<CometChatMessageList user={selectedUser} />

Works with: CometChatMessageHeader (above), CometChatMessageComposer (below)

CometChatMessageComposer

A text input with send button, attachment options, and emoji support. Sends messages to the specified user or group.

Key props:

Usage:

<CometChatMessageComposer user={selectedUser} />

Works with: CometChatMessageList (above), CometChatMessageHeader (at top of message area)

CometChatCompactMessageComposer

A rich-text variant of the message composer with formatting toolbar (bold, italic, code, etc.). Same props as CometChatMessageComposer.

Prefer this for new integrations. The v6 sample app uses CometChatCompactMessageComposer everywhere — rich-text formatting is the modern default. Both work; reach for CometChatMessageComposer (the basic variant) only if you have a specific reason to skip the formatting toolbar (e.g., a stripped-down marketplace ping where plain text is the entire UX).

Key props:

Usage:

<CometChatCompactMessageComposer user={selectedUser} />

Works with: Same as CometChatMessageComposer -- drop-in replacement for rich text

CometChatMessageHeader

Displays the name, avatar, and status of the user or group at the top of a message view. Supports a menu slot and search.

Key props:

Usage:

<CometChatMessageHeader
  user={selectedUser}
  onItemClick={() => setShowDetails(true)}
  auxiliaryButtonView={<CometChatCallButtons user={selectedUser} />}
/>

Works with: CometChatMessageList (below), CometChatCallButtons (in auxiliaryButtonView slot)

⚠️ Header `onItemClick` has NO default behavior (ENG-35705). The kit ships no built-in <CometChatUserDetails /> / <CometChatGroupDetails /> panel — clicking the header name/avatar produces zero visible feedback unless YOU pass an onItemClick callback. Four testers flagged this as "kit feels broken." Rule when emitting <CometChatMessageHeader>: 1. Either provide an onItemClick that opens a details panel YOU built (use the sample-app reference at sample-app/src/components/CometChatDetails/), OR 2. Wrap the header in a clickable region that goes elsewhere, so the avatar+name doesn't look like a dead end. (There is no showInfo prop on CometChatMessageHeader — don't emit it.) Do NOT mount the header bare without an onItemClick — it's a customer-facing dead end.

⚠️ `Reply in Thread` action requires the host to wire the thread panel (ENG-35705 — clarified 2026-06-02 from "broken" to "requires wiring"). The kit's <CometChatMessageList> renders a "Reply in Thread" item in the message-options menu and fires onThreadRepliesClick(parentMessage) when tapped — but the kit does NOT ship a default thread screen. If the host doesn't bind onThreadRepliesClick to a thread surface, the action visually does nothing (callback fires; no UI follows). Two paths:

>

1. You're not building threads — set hideReplyInThreadOption={true} on <CometChatMessageList> to remove the menu item entirely. 2. You ARE building threads — bind onThreadRepliesClick={(parent) => /* open thread surface */} and render a separate <CometChatMessageList parentMessageId={parent.getId()} /> inside the thread surface. Sample app's pattern: cometchat-uikit-react-v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx:74 wires this via parent component routing.

>

The dispatcher hard rule still defaults to option 1 (hide threads) because most integrations don't want them. Restated here at point-of-use so the catalog reader makes a conscious choice.

⚠️ `Message Privately` action — hide it via the kit prop if it misbehaves (ENG-35705). In group chats the message-options menu shows a "Message Privately" item that may do nothing on click in some kit versions. <CometChatMessageList> exposes hideMessagePrivatelyOption={true} to remove it cleanly — set that rather than living with a dead menu item.

CometChatSearch

Full-featured dual-scope search: searches across conversations AND messages with filter chips. This is the primary search component.

Key props:

Usage:

<CometChatSearch
  onConversationClicked={(conv) => navigateToConversation(conv)}
  onMessageClicked={(msg) => scrollToMessage(msg)}
/>

Works with: CometChatConversations (replaces the list when search is active)

Hard rule — never roll your own search. Any request involving "search", "find messages", "search conversations", or "search across conversations" MUST use <CometChatSearch> (or showSearchBar={true} + onSearchBarClicked on CometChatConversations to swap into <CometChatSearch> on click). Do NOT build custom <input type="search"> bars, hand-rolled result lists, or filter UIs — they bypass the SDK's pagination, highlighting, and dual-scope (conversations + messages) matching that ship with the built-in component.

CometChatThreadHeader

Header bar for a threaded message view. Shows the parent message and a close button.

Key props:

Usage:

<CometChatThreadHeader
  parentMessage={threadParentMessage}
  onClose={() => setThreadParent(null)}
/>

Works with: CometChatMessageList (with parentMessageId), CometChatMessageComposer (with parentMessageId)

2. Lists and selection

Components for browsing and selecting users, groups, and group members.

CometChatUsers

A scrollable list of users. Used for starting new conversations or browsing the user directory.

Key props:

Usage:

<CometChatUsers onItemClick={(user) => startConversation(user)} />

Works with: CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer (after selection)

CometChatGroups

A scrollable list of groups. Used for browsing and joining groups.

Key props:

Usage:

<CometChatGroups onItemClick={(group) => openGroup(group)} />

Works with: CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer (after selection)

CometChatGroupMembers

Displays members of a specific group with their roles (owner, admin, member).

Key props:

Usage:

<CometChatGroupMembers group={selectedGroup} />

Works with: Group details panel, CometChatGroups

CometChatSearchBar

A standalone search input component. Used for filtering within other components.

Key props:

Usage:

<CometChatSearchBar onChange={(input) => filterUsers(input.value ?? "")} />

Works with: Any list component for client-side filtering

3. Calls

Components for voice and video calling.

CometChatCallButtons

Renders voice and video call buttons. Typically placed in the auxiliaryButtonView prop of CometChatMessageHeader.

Key props:

Usage:

<CometChatCallButtons user={selectedUser} />

Works with: CometChatMessageHeader (via its auxiliaryButtonView prop — there is no menu prop), CometChatIncomingCall (at app root)

CometChatIncomingCall

Renders an incoming call notification overlay. Mount this at the app root so it can show incoming calls from any screen.

Key props: None required -- it auto-listens for incoming call events.

Usage:

// At your app root, always mounted:
<CometChatIncomingCall />

Works with: CometChatCallButtons (triggers outgoing calls that the other user sees as incoming)

CometChatOutgoingCall

Renders the outgoing call screen (ringing state). Automatically shown when the user initiates a call.

Key props: None required -- auto-triggered by call initiation.

Usage:

<CometChatOutgoingCall />

Works with: CometChatCallButtons

CometChatOngoingCall

Renders the active call screen with video feeds, mute/unmute, and hang-up controls.

Key props: None required -- auto-triggered when a call connects.

Usage:

<CometChatOngoingCall />

Works with: CometChatIncomingCall, CometChatOutgoingCall

CometChatCallLogs

Displays a history of past voice and video calls.

Key props: None required for basic usage.

Usage:

<CometChatCallLogs />

Works with: Tab-based layouts (as one of the tabs alongside Conversations, Users, Groups)

4. Interactions

Components for message reactions and emoji.

CometChatReactions

Displays reaction badges on a message (e.g., thumbs-up x3). Automatically rendered inside message bubbles when reactions are enabled.

Key props: Typically used internally by the message list. Not usually instantiated directly.

CometChatReactionList

Shows a detailed list of who reacted with what emoji on a specific message.

Key props: Used internally. Shown when the user clicks on a reaction badge.

5. Notifications (catalog gap closed 2026-06-02)

Three notification-related exports that were missing from this catalog before today. Verified against cometchat-uikit-react-v6/src/index.ts:167-169.

CometChatNotificationFeed

A scrollable inbox of campaign / promotional notifications. Renders a list view; integrators wire it as a dropdown or dedicated route.

Key props: onItemClick: (feedItem: NotificationFeedItem) => void to handle taps; notificationFeedRequestBuilder (and notificationCategoriesRequestBuilder) to filter — NOT notificationsRequestBuilder.

Usage:

import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react";

// feedItem is a NotificationFeedItem (campaign notification) — it has no
// `conversationId`; route off its own fields / deep-link payload.
<CometChatNotificationFeed onItemClick={(feedItem) => handleNotification(feedItem)} />

CometChatNotificationBadge

A small unread-count pill, designed to attach to a nav item / icon. Auto-updates as new notifications arrive via the kit's notification feed listener.

Key props: All optional — defaults to showing the current unread count of the logged-in user. Style with the standard CometChat*Style pattern.

Usage:

import { CometChatNotificationBadge } from "@cometchat/chat-uikit-react";

<button onClick={openNotificationFeed}>
  <BellIcon />
  <CometChatNotificationBadge />
</button>

useNotificationUnreadCount (hook)

React hook returning the current unread-notification count for the logged-in user. Use this when <CometChatNotificationBadge /> doesn't fit your layout — gives you the raw number to render however you like.

Signature:

import { useNotificationUnreadCount } from "@cometchat/chat-uikit-react";

const { count, isLoading } = useNotificationUnreadCount({ /* optional UseNotificationUnreadCountOptions */ });

Internally subscribes to the same notification stream as CometChatNotificationBadge — using both is safe (single shared source).

CometChatEmojiKeyboard

A full emoji picker. Automatically rendered inside the message composer when the emoji button is clicked.

Key props: Used internally by CometChatMessageComposer. Not usually instantiated directly.

CometChatReactionInfo

Tooltip or popover showing reaction details on hover.

Key props: Used internally by the message list. Not usually instantiated directly.

5. AI

AI-powered assistant components. These require AI features (Smart Chat Features) to be enabled in your CometChat dashboard at Chat & Messaging → Features → Smart Chat Features.

CometChatAIAssistantChat

An AI chatbot interface that users can interact with for automated responses. Typically rendered inside a panel or modal triggered from the message header.

Prerequisites: Enable "Conversation Starter" and/or "Smart Replies" in the dashboard.

Usage: user is a required prop (the AI assistant user to chat with):

<CometChatAIAssistantChat user={assistantUser} />

CometChatAIAssistantChatHistory

Displays past AI assistant interactions. Used alongside CometChatAIAssistantChat to show conversation history with the AI.

Usage:

<CometChatAIAssistantChatHistory />

CometChatAIAssistantTools

⚠️ This is a CLASS, not a renderable component. You instantiate it with a map of action functions and pass it to <CometChatAIAssistantChat> via the aiAssistantTools prop — do NOT render <CometChatAIAssistantTools /> (it's a type error).

Prerequisites: Enable "Conversation Summary" and/or other AI tools in the dashboard.

Usage:

const toolkit = new CometChatAIAssistantTools({ /* actionsMap */ });
<CometChatAIAssistantChat user={assistantUser} aiAssistantTools={toolkit} />

Note: For detailed props, configuration options, and customization of AI components, query the docs MCP — these components' APIs evolve with CometChat's AI feature releases.

CometChatStreamMessageBubble

Renders a streaming AI message with a typing animation effect. Used internally by AI assistant features.

CometChatAIAssistantMessageBubble

Renders AI assistant response bubbles with special formatting. Used internally by AI features.

5b. Moderation and utility components

These are exported but typically rendered internally by the kit. You may need them for advanced customization.

CometChatFlagMessageDialog

A dialog for reporting/flagging messages. Rendered internally when a user reports a message.

CometChatMessageInformation

Shows message delivery and read receipt details (who received, who read, timestamps). Useful for building a message info panel.

5c. Text formatters

These are not React components — they are formatter classes that customize how text is rendered in message bubbles. Pass them via the textFormatters prop on CometChatMessageList.

All imported from @cometchat/chat-uikit-react. To customize text rendering, create a class extending CometChatTextFormatter and pass it in the textFormatters array.

6. Infrastructure

These are not visual components -- they handle initialization, login state, and configuration.

CometChatUIKit

The main entry point for initialization and authentication. This is a static class, not a React component.

Key methods:

Usage (bare-API illustration — in real code, wrap login in an in-flight guard so React StrictMode doesn't fire it twice; see cometchat-core § 2 for the ensureLoggedIn helper):

import { CometChatUIKit } from "@cometchat/chat-uikit-react";

await CometChatUIKit.init(settings);
await CometChatUIKit.login("cometchat-uid-1");

CometChatUIKitLoginListener

Tracks the logged-in user synchronously. Unlike CometChatUIKit.getLoggedinUser() (which is async/Promise-based), this provides synchronous access to the current user — useful for guards and conditional rendering.

Key methods:

When to use which:

• CometChatUIKit.getLoggedinUser() — async, returns a Promise. Use in useEffect or async functions.
• CometChatUIKitLoginListener.getLoggedInUser() — synchronous. Use for immediate checks (e.g., redirect if not logged in, guard a route).

UIKitSettingsBuilder

Builder class for creating the settings object passed to CometChatUIKit.init().

Key methods:

Usage:

import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";

const settings = new UIKitSettingsBuilder()
  .setAppId("your-app-id")
  .setRegion("us")
  .setAuthKey("your-auth-key")
  .subscribePresenceForAllUsers()
  .build();

Composition patterns

These are the standard ways to combine CometChat components into complete experiences. Use these as starting points, then customize with props.

Composer note: Both CometChatMessageComposer and CometChatCompactMessageComposer exist. The compact variant includes rich text editing by default. The sample app uses the compact variant everywhere. Use whichever fits — the props are identical.

Multi-conversation (two-pane)

The most common pattern. A conversation list on the left, message view on the right.

Key details from the v6 sample app:

• Store the full CometChat.Conversation object (not just user/group) — you need it for activeConversation highlighting and conversation-level operations
• Pass activeConversation to CometChatConversations so the selected item is visually highlighted
• Derive user/group from the conversation at render time using getConversationWith()

import { useState } from "react";
import {
  CometChatConversations,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatCompactMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

// The message list must scroll inside a flex column without pushing the
// composer off-screen. Mirror the sample app's list wrapper.
// .cc-msg-list { flex: 1 1 0; min-height: 0; overflow: hidden; }
// .cc-msg-list > .cometchat { height: 100%; overflow: hidden; }

function MultiConversation() {
  const [activeConversation, setActiveConversation] = useState<CometChat.Conversation>();

  // Derive user/group from the active conversation
  const entity = activeConversation?.getConversationWith();
  const selectedUser = entity instanceof CometChat.User ? entity : undefined;
  const selectedGroup = entity instanceof CometChat.Group ? entity : undefined;

  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <div style={{ width: "360px", borderRight: "1px solid #eee" }}>
        <CometChatConversations
          activeConversation={activeConversation}
          onItemClick={(conv) => setActiveConversation(conv)}
        />
      </div>
      <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
        {selectedUser && (
          <>
            <CometChatMessageHeader user={selectedUser} />
            <div className="cc-msg-list">
              <CometChatMessageList user={selectedUser} />
            </div>
            <CometChatCompactMessageComposer user={selectedUser} />
          </>
        )}
        {selectedGroup && (
          <>
            <CometChatMessageHeader group={selectedGroup} />
            <div className="cc-msg-list">
              <CometChatMessageList group={selectedGroup} />
            </div>
            <CometChatCompactMessageComposer group={selectedGroup} />
          </>
        )}
      </div>
    </div>
  );
}

Single thread

One chat window for a known user or group. No conversation list.

import {
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatCompactMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

interface SingleThreadProps {
  user?: CometChat.User;
  group?: CometChat.Group;
}

// .cc-msg-list { flex: 1 1 0; min-height: 0; overflow: hidden; }
// .cc-msg-list > .cometchat { height: 100%; overflow: hidden; }

function SingleThread({ user, group }: SingleThreadProps) {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
      {user && <CometChatMessageHeader user={user} />}
      {group && <CometChatMessageHeader group={group} />}
      <div className="cc-msg-list">
        {user && <CometChatMessageList user={user} />}
        {group && <CometChatMessageList group={group} />}
      </div>
      {user && <CometChatCompactMessageComposer user={user} />}
      {group && <CometChatCompactMessageComposer group={group} />}
    </div>
  );
}

To target a specific user, resolve them first:

const [targetUser, setTargetUser] = useState<CometChat.User>();

useEffect(() => {
  CometChat.getUser("seller-uid-123").then(setTargetUser);
}, []);

if (!targetUser) return null;
return <SingleThread user={targetUser} />;

Full messenger (tab-based)

A tab bar with Chats, Calls, Users, and Groups. Users can browse, start conversations, and make calls.

import { useState } from "react";
import {
  CometChatConversations,
  CometChatCallLogs,
  CometChatUsers,
  CometChatGroups,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatCompactMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

// .cc-msg-list { flex: 1 1 0; min-height: 0; overflow: hidden; }
// .cc-msg-list > .cometchat { height: 100%; overflow: hidden; }

type Tab = "chats" | "calls" | "users" | "groups";

function FullMessenger() {
  const [activeTab, setActiveTab] = useState<Tab>("chats");
  const [activeConversation, setActiveConversation] = useState<CometChat.Conversation>();
  const [selectedUser, setSelectedUser] = useState<CometChat.User>();
  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group>();

  function selectUser(user: CometChat.User) {
    setSelectedUser(user);
    setSelectedGroup(undefined);
  }

  function selectGroup(group: CometChat.Group) {
    setSelectedUser(undefined);
    setSelectedGroup(group);
  }

  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <div style={{ width: "360px", display: "flex", flexDirection: "column" }}>
        {/* Tab content */}
        <div style={{ flex: 1 }}>
          {activeTab === "chats" && (
            <CometChatConversations
              activeConversation={activeConversation}
              onItemClick={(conv) => {
                setActiveConversation(conv);
                const entity = conv.getConversationWith();
                if (entity instanceof CometChat.User) selectUser(entity);
                else if (entity instanceof CometChat.Group) selectGroup(entity);
              }}
            />
          )}
          {activeTab === "calls" && (
            <CometChatCallLogs
              onItemClick={(call) => {
                // Call log items show call details, not a message view.
                // Use the call's participants to start a new call or
                // navigate to the conversation.
              }}
            />
          )}
          {activeTab === "users" && (
            <CometChatUsers
              activeUser={selectedUser}
              onItemClick={selectUser}
            />
          )}
          {activeTab === "groups" && (
            <CometChatGroups
              activeGroup={selectedGroup}
              onItemClick={selectGroup}
            />
          )}
        </div>
        {/* Tab bar at the bottom */}
        <div style={{ display: "flex", borderTop: "1px solid #eee" }}>
          {(["chats", "calls", "users", "groups"] as Tab[]).map((tab) => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              style={{ flex: 1, padding: 12, fontWeight: activeTab === tab ? "bold" : "normal" }}
            >
              {tab.charAt(0).toUpperCase() + tab.slice(1)}
            </button>
          ))}
        </div>
      </div>
      <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
        {selectedUser && (
          <>
            <CometChatMessageHeader user={selectedUser} />
            <div className="cc-msg-list">
              <CometChatMessageList user={selectedUser} />
            </div>
            <CometChatCompactMessageComposer user={selectedUser} />
          </>
        )}
        {selectedGroup && (
          <>
            <CometChatMessageHeader group={selectedGroup} />
            <div className="cc-msg-list">
              <CometChatMessageList group={selectedGroup} />
            </div>
            <CometChatCompactMessageComposer group={selectedGroup} />
          </>
        )}
      </div>
    </div>
  );
}

Threading

Threading is NOT automatic. The kit's default is hideReplyInThreadOption={false} — so a "Reply in Thread" entry shows up in every message's action menu out of the box, even when the integrator hasn't wired a thread panel. A user who clicks it sees nothing happen. That's why every <CometChatMessageList> in the cometchat-placement patterns uses hideReplyInThreadOption by default.

To enable threading in an experience that has room for a thread panel (typically a two-pane messenger or route-based chat — not a compact drawer or widget):

1. Remove the hideReplyInThreadOption prop from the main CometChatMessageList.
2. Wire onThreadRepliesClick to capture the thread message (pattern below).
3. Render the thread panel as a side panel or overlay. The thread panel has its OWN CometChatMessageList + CometChatMessageComposer scoped via parentMessageId.

Full pattern:

import { useState } from "react";
import {
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatThreadHeader,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

// 1. In your main message view, capture the thread click:
<CometChatMessageList
  user={selectedUser}
  onThreadRepliesClick={(message: CometChat.BaseMessage) => {
    setThreadMessage(message);
    setShowThread(true);
  }}
/>

// 2. Render the thread panel as a side panel:
interface ThreadPanelProps {
  parentMessage: CometChat.BaseMessage;
  user?: CometChat.User;
  group?: CometChat.Group;
  onClose: () => void;
}

function ThreadPanel({ parentMessage, user, group, onClose }: ThreadPanelProps) {
  const parentId = parentMessage.getId();

  return (
    <div style={{ width: "400px", display: "flex", flexDirection: "column", borderLeft: "1px solid #eee" }}>
      <CometChatThreadHeader parentMessage={parentMessage} onClose={onClose} />
      {user && <CometChatMessageList user={user} parentMessageId={parentId} />}
      {group && <CometChatMessageList group={group} parentMessageId={parentId} />}
      {user && <CometChatMessageComposer user={user} parentMessageId={parentId} />}
      {group && <CometChatMessageComposer group={group} parentMessageId={parentId} />}
    </div>
  );
}

Key details:

• onThreadRepliesClick receives the full CometChat.BaseMessage (not just an ID)
• CometChatThreadHeader shows the parent message content + close button
• The scoped CometChatMessageList with parentMessageId shows only thread replies
• The scoped CometChatMessageComposer with parentMessageId sends replies to the thread

Search integration

Search overlays alongside the conversation list — it does NOT replace it. The conversations list stays mounted; search appears as a sibling panel.

Global search (across all conversations):

import { useState } from "react";
import { CometChatConversations, CometChatSearch } from "@cometchat/chat-uikit-react";

function ConversationsWithSearch({ onSelectConversation }) {
  const [showSearch, setShowSearch] = useState(false);

  return (
    <div style={{ position: "relative" }}>
      {/* Conversations always stay mounted */}
      <CometChatConversations
        showSearchBar={true}
        onSearchBarClicked={() => setShowSearch(true)}
        activeConversation={activeConversation}
        onItemClick={onSelectConversation}
      />

      {/* Search overlays on top when active */}
      {showSearch && (
        <div style={{ position: "absolute", inset: 0, zIndex: 10, background: "#fff" }}>
          <CometChatSearch
            onConversationClicked={(conv) => {
              setShowSearch(false);
              onSelectConversation(conv);
            }}
            onMessageClicked={(msg) => {
              setShowSearch(false);
              // navigate to the message's conversation
            }}
          />
        </div>
      )}
    </div>
  );
}

In-conversation search (within the active chat):

// Add search button to the message header:
<CometChatMessageHeader
  user={selectedUser}
  showSearchOption={true}
  onSearchOptionClicked={() => setShowMessageSearch(true)}
/>

// Show CometChatSearch scoped to the current user/group:
{showMessageSearch && (
  <CometChatSearch
    uid={selectedUser?.getUid()}
    guid={selectedGroup?.getGuid()}
    onMessageClicked={(msg) => {
      setShowMessageSearch(false);
      // scroll to the message in the message list
    }}
  />
)}

Details panel

User and group detail panels are custom-built — there is no pre-built CometChatUserDetails or CometChatGroupDetails export in the UI Kit. The v6 sample app has reference implementations at sample-app/src/components/CometChatDetails/.

For user details: build a custom component using CometChatAvatar + user info + action buttons (block/unblock). Fetch the pattern from the sample app's CometChatUserDetails.tsx.

For group details: build a custom component and use these real UI Kit components inside it:

// Open details from the message header:
<CometChatMessageHeader
  user={selectedUser}
  group={selectedGroup}
  onItemClick={() => setShowDetails(true)}
/>

// Group details panel uses real kit components:
{showDetails && selectedGroup && (
  <div style={{ width: "320px", borderLeft: "1px solid #eee" }}>
    {/* CometChatGroupMembers is a real kit component */}
    <CometChatGroupMembers
      group={selectedGroup}
      onItemClick={(member) => {
        // Switch to 1:1 chat with this member
      }}
    />
    {/* Banning is handled inside CometChatGroupMembers — there is no separate
        CometChatBannedMembers export in the v6 kit. */}
  </div>
)}

Important: CometChatGroupMembers requires the group prop (it's the only required prop). The component handles member listing, search, scope changes, kick, and ban actions internally.

Calls integration

Add voice/video calling to your message view, plus incoming call handling at the app root.

// 1. Add call buttons to the message header:
<CometChatMessageHeader
  user={selectedUser}
  auxiliaryButtonView={<CometChatCallButtons user={selectedUser} />}
/>

// 2. Mount incoming call handler at the app root (outside any route):
function App() {
  return (
    <>
      <CometChatIncomingCall />
      <Routes>
        {/* your routes */}
      </Routes>
    </>
  );
}

CometChatIncomingCall must be mounted at the top level so it can show the incoming call overlay regardless of which page the user is on. CometChatOutgoingCall and CometChatOngoingCall are automatically rendered by the call flow.