Search - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatSearch",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatSearch } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Dual-scope search across conversations and messages with filtering, scopes, and custom views.",
  "cssRootClass": ".cometchat-search",
  "primaryOutput": {
    "props": ["onConversationClicked", "onMessageClicked"],
    "types": [
      "(conversation: CometChat.Conversation, searchKeyword?: string) => void",
      "(message: CometChat.BaseMessage, searchKeyword?: string) => void"
    ]
  },
  "props": {
    "data": {
      "uid": { "type": "string", "default": "undefined", "note": "Limits search to specific user" },
      "guid": { "type": "string", "default": "undefined", "note": "Limits search to specific group" },
      "conversationsRequestBuilder": { "type": "CometChat.ConversationsRequestBuilder", "default": "SDK default" },
      "messagesRequestBuilder": { "type": "CometChat.MessagesRequestBuilder", "default": "SDK default" },
      "messageSentAtDateTimeFormat": { "type": "CalendarObject", "default": "Component default" }
    },
    "callbacks": {
      "onConversationClicked": "(conversation: CometChat.Conversation, searchKeyword?: string) => void",
      "onMessageClicked": "(message: CometChat.BaseMessage, searchKeyword?: string) => void",
      "onBack": "() => void",
      "onError": "(error: CometChat.CometChatException) => void"
    },
    "visibility": {
      "hideBackButton": { "type": "boolean", "default": false },
      "hideUserStatus": { "type": "boolean", "default": false },
      "hideGroupType": { "type": "boolean", "default": false },
      "hideReceipts": { "type": "boolean", "default": false }
    },
    "search": {
      "searchFilters": {
        "type": "CometChatSearchFilter[]",
        "default": "All available filters"
      },
      "initialSearchFilter": {
        "type": "CometChatSearchFilter",
        "default": "undefined"
      },
      "searchIn": {
        "type": "CometChatSearchScope[]",
        "default": "[CometChatSearchScope.All]"
      }
    },
    "viewSlots": {
      "conversationItemView": "(conversation: CometChat.Conversation) => JSX.Element",
      "conversationLeadingView": "(conversation: CometChat.Conversation) => JSX.Element",
      "conversationTitleView": "(conversation: CometChat.Conversation) => JSX.Element",
      "conversationSubtitleView": "(conversation: CometChat.Conversation) => JSX.Element",
      "conversationTrailingView": "(conversation: CometChat.Conversation) => JSX.Element",
      "conversationOptions": "((conversation: CometChat.Conversation) => CometChatOption[]) | null",
      "messageItemView": "(message: CometChat.BaseMessage) => JSX.Element",
      "messageLeadingView": "(message: CometChat.BaseMessage) => JSX.Element",
      "messageTitleView": "(message: CometChat.BaseMessage) => JSX.Element",
      "messageSubtitleView": "(message: CometChat.BaseMessage) => JSX.Element",
      "messageTrailingView": "(message: CometChat.BaseMessage) => JSX.Element",
      "initialView": "JSX.Element",
      "loadingView": "JSX.Element",
      "emptyView": "JSX.Element",
      "errorView": "JSX.Element"
    },
    "formatting": {
      "textFormatters": { "type": "CometChatTextFormatter[]", "default": "[]" }
    }
  },
  "events": [],
  "sdkListeners": [],
  "types": {
    "CometChatSearchScope": {
      "Conversations": "conversations",
      "Messages": "messages"
    },
    "CometChatSearchFilter": {
      "Messages": "messages",
      "Conversations": "conversations",
      "Unread": "unread",
      "Groups": "groups",
      "Photos": "photos",
      "Videos": "videos",
      "Links": "links",
      "Documents": "files",
      "Audio": "audio"
    },
    "CalendarObject": {
      "today": "string | undefined",
      "yesterday": "string | undefined",
      "lastWeek": "string | undefined",
      "otherDays": "string | undefined"
    },
    "CometChatOption": {
      "id": "string | undefined",
      "title": "string | undefined",
      "iconURL": "string | undefined",
      "onClick": "(() => void) | undefined"
    }
  },
  "compositionExample": {
    "description": "Standalone search panel with navigation callbacks",
    "components": ["CometChatSearch"],
    "flow": "User types query -> results appear in conversations and messages sections -> onConversationClicked/onMessageClicked navigate to result"
  }
}

Where It Fits

CometChatSearch is a standalone search panel that searches across conversations and messages simultaneously. It renders filter chips, conversation results, and message results in a unified interface. Wire onConversationClicked and onMessageClicked to navigate to the selected result.

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

function SearchDemo() {
  const handleConversationClicked = (
    conversation: CometChat.Conversation,
    searchKeyword?: string
  ) => {
    console.log("Conversation:", conversation.getConversationId(), searchKeyword);
  };

  const handleMessageClicked = (
    message: CometChat.BaseMessage,
    searchKeyword?: string
  ) => {
    console.log("Message:", message.getId(), searchKeyword);
  };

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <CometChatSearch
        onConversationClicked={handleConversationClicked}
        onMessageClicked={handleMessageClicked}
      />
    </div>
  );
}

export default SearchDemo;

Minimal Render

import { CometChatSearch } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function SearchMinimal() {
  return (
    <div style={{ width: "100%", height: "100%" }}>
      <CometChatSearch />
    </div>
  );
}

Root CSS class: .cometchat-search

Filtering Search Results

Search Scope

Control which entities are searched using searchIn with CometChatSearchScope.

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

function MessagesOnlySearch() {
  return (
    <CometChatSearch
      searchIn={[CometChatSearchScope.Messages]}
    />
  );
}

enum CometChatSearchScope {
  Conversations = "conversations",
  Messages = "messages",
}

Control which filter chips appear using searchFilters with CometChatSearchFilter.

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

function FilteredSearch() {
  return (
    <CometChatSearch
      searchFilters={[
        CometChatSearchFilter.Messages,
        CometChatSearchFilter.Photos,
        CometChatSearchFilter.Videos,
      ]}
      initialSearchFilter={CometChatSearchFilter.Messages}
    />
  );
}

enum CometChatSearchFilter {
  Messages = "messages",
  Conversations = "conversations",
  Unread = "unread",
  Groups = "groups",
  Photos = "photos",
  Videos = "videos",
  Links = "links",
  Documents = "files",
  Audio = "audio",
}

Request Builders

Pass ConversationsRequestBuilder and MessagesRequestBuilder to customize the underlying SDK queries.

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

function CustomBuilderSearch() {
  return (
    <CometChatSearch
      conversationsRequestBuilder={
        new CometChat.ConversationsRequestBuilder().setLimit(5)
      }
      messagesRequestBuilder={
        new CometChat.MessagesRequestBuilder().setLimit(5)
      }
    />
  );
}

Scoped Search (User or Group)

Limit search to a specific user or group conversation using uid or guid.

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

function UserScopedSearch() {
  return <CometChatSearch uid="uid" />;
}

Actions and Events

Callback Props

onConversationClicked

Fires when a conversation is clicked in search results.

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

function SearchWithConversationClick() {
  return (
    <CometChatSearch
      onConversationClicked={(conversation: CometChat.Conversation, keyword?: string) => {
        console.log("Selected:", conversation.getConversationId(), keyword);
      }}
    />
  );
}

onMessageClicked

Fires when a message is clicked in search results.

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

function SearchWithMessageClick() {
  return (
    <CometChatSearch
      onMessageClicked={(message: CometChat.BaseMessage, keyword?: string) => {
        console.log("Message:", message.getId(), keyword);
      }}
    />
  );
}

onBack

Fires when the back button is clicked.

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

function SearchWithBack() {
  return <CometChatSearch onBack={() => console.log("Back")} />;
}

onError

Fires on internal errors during search.

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

function SearchWithError() {
  return (
    <CometChatSearch
      onError={(error: CometChat.CometChatException) => {
        console.error("Search error:", error);
      }}
    />
  );
}

Global UI Events

The CometChatSearch component does not emit any custom UI events.

SDK Events (Real-Time, Automatic)

The component does not attach SDK listeners. Search is on-demand, not real-time.

Custom View Slots

The component exposes separate view slots for conversation results and message results. All per-item slots receive their respective data object.

Slot	Signature	Replaces
`conversationItemView`	`(conversation: CometChat.Conversation) => JSX.Element`	Entire conversation list item
`conversationLeadingView`	`(conversation: CometChat.Conversation) => JSX.Element`	Conversation avatar
`conversationTitleView`	`(conversation: CometChat.Conversation) => JSX.Element`	Conversation title
`conversationSubtitleView`	`(conversation: CometChat.Conversation) => JSX.Element`	Conversation subtitle
`conversationTrailingView`	`(conversation: CometChat.Conversation) => JSX.Element`	Conversation trailing section
`conversationOptions`	`(conversation: CometChat.Conversation) => CometChatOption[]`	Conversation context menu
`messageItemView`	`(message: CometChat.BaseMessage) => JSX.Element`	Entire message list item
`messageLeadingView`	`(message: CometChat.BaseMessage) => JSX.Element`	Message avatar
`messageTitleView`	`(message: CometChat.BaseMessage) => JSX.Element`	Message title
`messageSubtitleView`	`(message: CometChat.BaseMessage) => JSX.Element`	Message subtitle
`messageTrailingView`	`(message: CometChat.BaseMessage) => JSX.Element`	Message trailing section
`initialView`	`JSX.Element`	Initial state before search
`loadingView`	`JSX.Element`	Loading state
`emptyView`	`JSX.Element`	Empty results state
`errorView`	`JSX.Element`	Error state

Conversation view slots follow the same pattern as CometChatConversations. Refer to that component for detailed examples.

messageItemView

Replace the entire message list item in search results.

TypeScript
CSS

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

function SearchCustomMessageItem() {
  const getMessageItemView = (message: CometChat.BaseMessage) => (
    <div className="cometchat-search__message-list-item">
      <div className="cometchat-search__message-list-item-sender">
        {message.getSender()?.getName()}:
      </div>
      <div className="cometchat-search__message-list-item-text">
        {message instanceof CometChat.TextMessage
          ? (message as CometChat.TextMessage).getText()
          : message.getType()}
      </div>
    </div>
  );

  return <CometChatSearch messageItemView={getMessageItemView} />;
}

.cometchat-search__message-list-item {
  background: var(--cometchat-extended-primary-color-100);
  border-bottom: 1px solid var(--cometchat-border-color-highlight);
  padding: var(--cometchat-padding-3) var(--cometchat-padding-4);
  display: flex;
  justify-content: flex-start;
  gap: var(--cometchat-padding-2);
}

.cometchat-search__message-list-item-sender {
  color: var(--cometchat-text-color-highlight);
  font: var(--cometchat-font-body-regular);
}

.cometchat-search__message-list-item-text {
  color: var(--cometchat-text-color-secondary);
  font: var(--cometchat-font-body-regular);
}

messageLeadingView

Replace the message avatar / left section.

TypeScript
CSS

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

function SearchCustomMessageLeading() {
  const getMessageLeadingView = (message: CometChat.BaseMessage) => (
    <div className="cometchat-search__message-list-item-leading-view">
      <img src={ICON_URL} />
    </div>
  );

  return <CometChatSearch messageLeadingView={getMessageLeadingView} />;
}

.cometchat-search__message-list-item-leading-view {
  height: 48px;
  width: 48px;
  border-radius: var(--cometchat-radius-2);
  background: var(--cometchat-extended-primary-color-500);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cometchat-search__message-list-item-leading-view img {
  height: 32px;
  width: 32px;
}

messageTitleView

Replace the message title text.

TypeScript
CSS

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

function SearchCustomMessageTitle() {
  const getMessageTitleView = (message: CometChat.BaseMessage) => (
    <div className="cometchat-search__message-list-item-title">
      <div className="cometchat-search__message-list-item-title-text">
        {message.getSender()?.getName()}
      </div>
      <span>|</span>
      <div className="cometchat-search__message-list-item-title-role">
        {message.getSender().getRole() ?? "Pro User"}
      </div>
    </div>
  );

  return <CometChatSearch messageTitleView={getMessageTitleView} />;
}

.cometchat-search__message-list-item-title {
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-1);
}

.cometchat-search__message-list-item-title-text {
  font: var(--cometchat-font-heading4-medium);
  color: var(--cometchat-text-color-secondary);
}

.cometchat-search__message-list-item-title-role {
  font: var(--cometchat-font-heading4-medium);
  color: var(--cometchat-text-color-highlight);
  text-decoration: underline;
}

messageSubtitleView

Replace the message subtitle text.

TypeScript
CSS

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

function SearchCustomMessageSubtitle() {
  const getMessageSubtitleView = (message: CometChat.BaseMessage) => (
    <div className="cometchat-search__message-list-item-subtitle">
      <div className="cometchat-search__message-list-item-subtitle-sender">
        {message.getSender()?.getName()}:
      </div>
      <div className="cometchat-search__message-list-item-subtitle-text">
        {message instanceof CometChat.TextMessage
          ? (message as CometChat.TextMessage).getText()
          : message.getType()}
      </div>
    </div>
  );

  return <CometChatSearch messageSubtitleView={getMessageSubtitleView} />;
}

.cometchat-search__message-list-item-subtitle {
  background: var(--cometchat-extended-primary-color-100);
  padding: var(--cometchat-padding-1);
  display: flex;
  justify-content: flex-start;
  gap: var(--cometchat-padding-2);
  width: 100%;
}

.cometchat-search__message-list-item-subtitle-sender {
  color: var(--cometchat-text-color-highlight);
  font: var(--cometchat-font-body-regular);
}

.cometchat-search__message-list-item-subtitle-text {
  color: var(--cometchat-text-color-secondary);
  font: var(--cometchat-font-body-regular);
}

messageTrailingView

Replace the message right section.

TypeScript
CSS

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

function SearchCustomMessageTrailing() {
  const getMessageTrailingView = (message: CometChat.BaseMessage) => {
    const timestamp = message.getSentAt() * 1000;
    const now = Date.now();
    const diffInMinutes = Math.floor((now - timestamp) / (1000 * 60));
    const diffInHours = Math.floor((now - timestamp) / (1000 * 60 * 60));

    let className = "cometchat-search__message-trailing-view-min";
    let topLabel = `${diffInMinutes}`;
    let bottomLabel = diffInMinutes === 1 ? "Min ago" : "Mins ago";

    if (diffInHours >= 1 && diffInHours <= 10) {
      className = "cometchat-search__message-trailing-view-hour";
      topLabel = `${diffInHours}`;
      bottomLabel = diffInHours === 1 ? "Hour ago" : "Hours ago";
    } else if (diffInHours > 10) {
      className = "cometchat-search__message-trailing-view-date";
      const time = new Date(timestamp);
      topLabel = time.toLocaleDateString("en-US", { day: "numeric" });
      bottomLabel = time.toLocaleDateString("en-US", {
        month: "short",
        year: "numeric",
      });
    }

    return (
      <div className={`cometchat-search__message-trailing-view ${className}`}>
        <span className="cometchat-search__message-trailing-view-time">
          {topLabel}
        </span>
        <span className="cometchat-search__message-trailing-view-status">
          {bottomLabel}
        </span>
      </div>
    );
  };

  return <CometChatSearch messageTrailingView={getMessageTrailingView} />;
}

.cometchat-search__message-trailing-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cometchat-search__message-trailing-view-min { background-color: #e0d4f7; }
.cometchat-search__message-trailing-view-hour { background-color: #fff3cd; }
.cometchat-search__message-trailing-view-date { background-color: #f8d7da; }

.cometchat-search__message-trailing-view-time {
  font: 600 18px Roboto;
  color: #4a3f99;
  margin-bottom: 4px;
}

.cometchat-search__message-trailing-view-status {
  font: 600 8px Roboto;
  color: #6a5b99;
}

messageSentAtDateTimeFormat

Customize the message timestamp format using a CalendarObject.

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

function SearchCustomDate() {
  const dateFormat = new CalendarObject({
    today: "DD MMM, hh:mm A",
    yesterday: "DD MMM, hh:mm A",
    otherDays: "DD MMM, hh:mm A",
  });

  return <CometChatSearch messageSentAtDateTimeFormat={dateFormat} />;
}

Common Patterns

Messages-only search

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

function MessagesOnlySearch() {
  return (
    <CometChatSearch searchIn={[CometChatSearchScope.Messages]} />
  );
}

Photos and videos filter only

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

function MediaSearch() {
  return (
    <CometChatSearch
      searchFilters={[
        CometChatSearchFilter.Photos,
        CometChatSearchFilter.Videos,
      ]}
    />
  );
}

Search within a specific group

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

function GroupScopedSearch() {
  return <CometChatSearch guid="group_id" />;
}

CSS Architecture

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

Global tokens set on the .cometchat root wrapper.
Component CSS (.cometchat-search) consumes these tokens via var().
Overrides target .cometchat-search descendant selectors.

Key Selectors

Target	Selector
Root	`.cometchat-search`
Header	`.cometchat-search__header`
Search input	`.cometchat-search__input`
Back button	`.cometchat-search__back-button`
Clear button	`.cometchat-search__input-clear-button`
Filter bar	`.cometchat-search__body-filters`
Filter chip	`.cometchat-search__body-filter`
Active filter chip	`.cometchat-search__body-filter-active`
Results container	`.cometchat-search__results`
Conversations section	`.cometchat-search__conversations`
Messages section	`.cometchat-search__messages`
Message list item	`.cometchat-search-messages__list-item`
Initial view	`.cometchat-search__initial-view`
Empty view	`.cometchat-search__empty-view`
Error view	`.cometchat-search__error-view`
Shimmer loading	`.cometchat-search__shimmer`
See more button (conversations)	`.cometchat-search-conversations__see-more`
See more button (messages)	`.cometchat-search-messages__see-more`
Text highlight	`.cometchat-search .cometchat-text-highlight`

Example: Themed search

.cometchat-search * {
  font-family: "Times New Roman", Times;
}

.cometchat-search {
  gap: 0;
}

.cometchat-search__header {
  background-color: var(--cometchat-primary-color);
}

.cometchat-search__back-button .cometchat-button .cometchat-button__icon {
  background: var(--cometchat-static-white);
}

.cometchat-search__body {
  padding-block: var(--cometchat-padding-3);
  background-color: var(--cometchat-primary-color);
}

.cometchat-search__conversations {
  padding-top: var(--cometchat-padding-3);
  background-color: var(--cometchat-extended-primary-color-100);
}

.cometchat-search-messages__date-separator {
  display: none;
}

Customization Matrix

What to change	Where	Property/API	Example
Handle result clicks	Component props	`onConversationClicked` / `onMessageClicked`	`onMessageClicked={(msg) => navigate(msg)}`
Control search scope	Component props	`searchIn`	`searchIn={[CometChatSearchScope.Messages]}`
Control filter chips	Component props	`searchFilters` / `initialSearchFilter`	`searchFilters={[CometChatSearchFilter.Photos]}`
Scope to user/group	Component props	`uid` / `guid`	`uid="user_id"`
Customize SDK queries	Component props	`conversationsRequestBuilder` / `messagesRequestBuilder`	`conversationsRequestBuilder={builder}`
Replace result items	Component props	View slot props	`messageItemView={(msg) => <div>...</div>}`
Change colors, fonts, spacing	Global CSS	Target `.cometchat-search` class	`.cometchat-search__header { background: red; }`

Props

All props are optional. Sorted alphabetically.

conversationItemView

Custom renderer for the entire conversation list item in search results.


Type	`(conversation: CometChat.Conversation) => JSX.Element`
Default	Built-in list item

conversationLeadingView

Custom renderer for the conversation avatar / left section.


Type	`(conversation: CometChat.Conversation) => JSX.Element`
Default	Built-in avatar

conversationOptions

Custom context menu actions for conversation items.


Type	`((conversation: CometChat.Conversation) => CometChatOption[]) \| null`
Default	`undefined`

conversationsRequestBuilder

Controls which conversations appear in search results.


Type	`CometChat.ConversationsRequestBuilder`
Default	SDK default with search keyword

conversationSubtitleView

Custom renderer for the conversation subtitle.


Type	`(conversation: CometChat.Conversation) => JSX.Element`
Default	Built-in subtitle

conversationTitleView

Custom renderer for the conversation title.


Type	`(conversation: CometChat.Conversation) => JSX.Element`
Default	Built-in title

conversationTrailingView

Custom renderer for the conversation trailing section.


Type	`(conversation: CometChat.Conversation) => JSX.Element`
Default	Built-in trailing view

emptyView

Custom component displayed when no search results are found.


Type	`JSX.Element`
Default	Built-in empty state

errorView

Custom component displayed when an error occurs.


Type	`JSX.Element`
Default	Built-in error state

guid

Limits search to messages in a specific group.


Type	`string`
Default	`undefined`

hideBackButton

Hides the back button.


Type	`boolean`
Default	`false`

hideGroupType

Hides the group type icon in conversation results.


Type	`boolean`
Default	`false`

hideReceipts

Hides message read/delivery receipt indicators.


Type	`boolean`
Default	`false`

hideUserStatus

Hides the online/offline status indicator.


Type	`boolean`
Default	`false`

initialSearchFilter

The filter active by default on load.


Type	`CometChatSearchFilter`
Default	`undefined`

initialView

Custom component displayed before the user enters a search query.


Type	`JSX.Element`
Default	Built-in initial state

loadingView

Custom component displayed during search loading.


Type	`JSX.Element`
Default	Built-in shimmer

messageItemView

Custom renderer for the entire message list item in search results.


Type	`(message: CometChat.BaseMessage) => JSX.Element`
Default	Built-in list item

messageLeadingView

Custom renderer for the message avatar / left section.


Type	`(message: CometChat.BaseMessage) => JSX.Element`
Default	Built-in leading view

messageSentAtDateTimeFormat

Format for message timestamps.


Type	`CalendarObject`
Default	Component default

Falls back to global calendar configuration if not set.

messagesRequestBuilder

Controls which messages appear in search results.


Type	`CometChat.MessagesRequestBuilder`
Default	SDK default with search keyword

messageSubtitleView

Custom renderer for the message subtitle.


Type	`(message: CometChat.BaseMessage) => JSX.Element`
Default	Built-in subtitle

messageTitleView

Custom renderer for the message title.


Type	`(message: CometChat.BaseMessage) => JSX.Element`
Default	Built-in title

messageTrailingView

Custom renderer for the message trailing section.


Type	`(message: CometChat.BaseMessage) => JSX.Element`
Default	Built-in trailing view

onBack

Callback fired when the back button is clicked.


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

onConversationClicked

Callback fired when a conversation is clicked in search results.


Type	`(conversation: CometChat.Conversation, searchKeyword?: string) => void`
Default	`undefined`

onError

Callback fired when the component encounters an error.


Type	`(error: CometChat.CometChatException) => void`
Default	`undefined`

onMessageClicked

Callback fired when a message is clicked in search results.


Type	`(message: CometChat.BaseMessage, searchKeyword?: string) => void`
Default	`undefined`

Filters rendered in the search filter bar.


Type	`CometChatSearchFilter[]`
Default	All available filters

enum CometChatSearchFilter {
  Messages = "messages",
  Conversations = "conversations",
  Unread = "unread",
  Groups = "groups",
  Photos = "photos",
  Videos = "videos",
  Links = "links",
  Documents = "files",
  Audio = "audio",
}

searchIn

Scopes to search in.


Type	`CometChatSearchScope[]`
Default	`[CometChatSearchScope.All]`

enum CometChatSearchScope {
  Conversations = "conversations",
  Messages = "messages",
}

textFormatters

Custom text formatters for message content.


Type	`CometChatTextFormatter[]`
Default	`[]`

uid

Limits search to messages with a specific user.


Type	`string`
Default	`undefined`

Events

The CometChatSearch component does not emit any custom UI events.

CSS Selectors

Target	Selector
Root	`.cometchat-search`
Header	`.cometchat-search__header`
Search input	`.cometchat-search__input`
Back button	`.cometchat-search__back-button`
Clear button	`.cometchat-search__input-clear-button`
Filter bar	`.cometchat-search__body-filters`
Filter chip	`.cometchat-search__body-filter`
Active filter chip	`.cometchat-search__body-filter-active`
Results container	`.cometchat-search__results`
Conversations section	`.cometchat-search__conversations`
Conversation list item	`.cometchat-search__conversations-list-item`
Active conversation item	`.cometchat-search__conversations-list-item-active .cometchat-list-item`
Conversation subtitle	`.cometchat-search__conversations-subtitle`
Conversation trailing view	`.cometchat-search__conversations-trailing-view`
Conversation badge count	`.cometchat-search__conversations-trailing-view-badge-count`
Messages section	`.cometchat-search__messages`
Message list item	`.cometchat-search-messages__list-item`
Message subtitle	`.cometchat-search-messages__subtitle-text`
Message trailing view	`.cometchat-search-messages__trailing-view`
Date separator	`.cometchat-search-messages__date-separator`
See more (conversations)	`.cometchat-search-conversations__see-more`
See more (messages)	`.cometchat-search-messages__see-more`
Text highlight	`.cometchat-search .cometchat-text-highlight`
Initial view	`.cometchat-search__initial-view`
Empty view	`.cometchat-search__empty-view`
Error view	`.cometchat-search__error-view`
Shimmer loading	`.cometchat-search__shimmer`
Online status	`.cometchat-search__conversations-list-item-online .cometchat-list-item__status`
Password group	`.cometchat-search__conversations-list-item-password .cometchat-list-item__status`
Private group	`.cometchat-search__conversations-list-item-private .cometchat-list-item__status`

​Where It Fits

​Minimal Render

​Filtering Search Results

​Search Scope

​Search Filters

​Request Builders

​Scoped Search (User or Group)

​Actions and Events

​Callback Props

​onConversationClicked

​onMessageClicked

​onBack

​onError

​Global UI Events

​SDK Events (Real-Time, Automatic)

​Custom View Slots

​messageItemView

​messageLeadingView

​messageTitleView

​messageSubtitleView

​messageTrailingView

​messageSentAtDateTimeFormat

​Common Patterns

​Messages-only search

​Photos and videos filter only

​Search within a specific group

​CSS Architecture

​Key Selectors

​Example: Themed search

​Customization Matrix

​Props

​conversationItemView

​conversationLeadingView

​conversationOptions

​conversationsRequestBuilder

​conversationSubtitleView

​conversationTitleView

​conversationTrailingView

​emptyView

​errorView

​guid

​hideBackButton

​hideGroupType

​hideReceipts

​hideUserStatus

​initialSearchFilter

​initialView

​loadingView

​messageItemView

​messageLeadingView

​messageSentAtDateTimeFormat

​messagesRequestBuilder

​messageSubtitleView

​messageTitleView

​messageTrailingView

​onBack

​onConversationClicked

​onError

​onMessageClicked

​searchFilters

​searchIn

​textFormatters

​uid

​Events

​CSS Selectors

Where It Fits

Minimal Render

Filtering Search Results

Search Scope

Search Filters

Request Builders

Scoped Search (User or Group)

Actions and Events

Callback Props

onConversationClicked

onMessageClicked

onBack

onError

Global UI Events

SDK Events (Real-Time, Automatic)

Custom View Slots

messageItemView

messageLeadingView

messageTitleView

messageSubtitleView

messageTrailingView

messageSentAtDateTimeFormat

Common Patterns

Messages-only search

Photos and videos filter only

Search within a specific group

CSS Architecture

Key Selectors

Example: Themed search

Customization Matrix

Props

conversationItemView

conversationLeadingView

conversationOptions

conversationsRequestBuilder

conversationSubtitleView

conversationTitleView

conversationTrailingView

emptyView

errorView

guid

hideBackButton

hideGroupType

hideReceipts

hideUserStatus

initialSearchFilter

initialView

loadingView

messageItemView

messageLeadingView

messageSentAtDateTimeFormat

messagesRequestBuilder

messageSubtitleView

messageTitleView

messageTrailingView

onBack

onConversationClicked

onError

onMessageClicked

searchFilters

searchIn

textFormatters

uid

Events

CSS Selectors