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

# Search

> Dual-scope search across conversations and messages with filtering, scopes, and custom views.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "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"
    }
  }
  ```
</Accordion>

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

```tsx lines theme={null}
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;
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/SavJbXRhxCuYXXa7/images/react-uikit-search-update.png?fit=max&auto=format&n=SavJbXRhxCuYXXa7&q=85&s=f404541012f00af138db6913a561a9ba" width="2560" height="1600" data-path="images/react-uikit-search-update.png" />
</Frame>

***

## Minimal Render

```tsx lines theme={null}
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`.

```tsx lines theme={null}
import {
  CometChatSearch,
  CometChatSearchScope,
} from "@cometchat/chat-uikit-react";

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

```ts lines theme={null}
enum CometChatSearchScope {
  Conversations = "conversations",
  Messages = "messages",
}
```

### Search Filters

Control which filter chips appear using `searchFilters` with `CometChatSearchFilter`.

```tsx lines theme={null}
import {
  CometChatSearch,
  CometChatSearchFilter,
} from "@cometchat/chat-uikit-react";

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

```ts lines theme={null}
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.

```tsx lines theme={null}
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`.

```tsx lines theme={null}
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.

```tsx lines theme={null}
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.

```tsx lines theme={null}
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.

```tsx lines theme={null}
import { CometChatSearch } from "@cometchat/chat-uikit-react";

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

#### onError

Fires on internal errors during search.

```tsx lines theme={null}
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](/ui-kit/react/conversations). Refer to that component for detailed examples.

### messageItemView

Replace the entire message list item in search results.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/QxoaCZzLrVi321Ps/images/3d0a9273-search_message_item_view_custom_web_screens-bf216d1eab67d0d95362a3ef1996f752.png?fit=max&auto=format&n=QxoaCZzLrVi321Ps&q=85&s=fae049731db63c0703d6520c6c263049" width="1280" height="800" data-path="images/3d0a9273-search_message_item_view_custom_web_screens-bf216d1eab67d0d95362a3ef1996f752.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    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} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .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);
    }
    ```
  </Tab>
</Tabs>

### messageLeadingView

Replace the message avatar / left section.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/Xbd1mrZiWe1Pd3HE/images/8ec51714-search_message_leading_view_custom_web_screens-af08d61c02454c807100907c1156d46d.png?fit=max&auto=format&n=Xbd1mrZiWe1Pd3HE&q=85&s=d11352fe3cde439708a9b02be809f4a1" width="1280" height="800" data-path="images/8ec51714-search_message_leading_view_custom_web_screens-af08d61c02454c807100907c1156d46d.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    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} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .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;
    }
    ```
  </Tab>
</Tabs>

### messageTitleView

Replace the message title text.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/KVBs_L3B6NmQumhv/images/0b1cf07c-search_message_title_view_custom_web_screens-df6cb1c0e91a105d4f708e47c62de992.png?fit=max&auto=format&n=KVBs_L3B6NmQumhv&q=85&s=39ae6ac5a8188010ef7c963a5c4e59d8" width="1280" height="800" data-path="images/0b1cf07c-search_message_title_view_custom_web_screens-df6cb1c0e91a105d4f708e47c62de992.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    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} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .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;
    }
    ```
  </Tab>
</Tabs>

### messageSubtitleView

Replace the message subtitle text.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/-ESEkh1kVWNrvtT0/images/67721bd7-search_message_subtitle_view_custom_web_screens-96e7a678fc3920eb12db00b43c4f6860.png?fit=max&auto=format&n=-ESEkh1kVWNrvtT0&q=85&s=d22a8dc267b3dcd768c64f648dda6167" width="1280" height="800" data-path="images/67721bd7-search_message_subtitle_view_custom_web_screens-96e7a678fc3920eb12db00b43c4f6860.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    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} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .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);
    }
    ```
  </Tab>
</Tabs>

### messageTrailingView

Replace the message right section.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/RxKy5RgybeX-8GbH/images/1c199c35-search_message_trailing_view_custom_web_screens-75c38143a2439190b3198dd93923c6fd.png?fit=max&auto=format&n=RxKy5RgybeX-8GbH&q=85&s=2d1a8769d3d5d090aaaad205a460dd07" width="1280" height="800" data-path="images/1c199c35-search_message_trailing_view_custom_web_screens-75c38143a2439190b3198dd93923c6fd.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    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} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .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;
    }
    ```
  </Tab>
</Tabs>

### messageSentAtDateTimeFormat

Customize the message timestamp format using a `CalendarObject`.

```tsx lines theme={null}
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

```tsx lines theme={null}
import {
  CometChatSearch,
  CometChatSearchScope,
} from "@cometchat/chat-uikit-react";

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

### Photos and videos filter only

```tsx lines theme={null}
import {
  CometChatSearch,
  CometChatSearchFilter,
} from "@cometchat/chat-uikit-react";

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

### Search within a specific group

```tsx lines theme={null}
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:

1. Global tokens set on the `.cometchat` root wrapper.
2. Component CSS (`.cometchat-search`) consumes these tokens via `var()`.
3. 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

```css lines theme={null}
.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](/ui-kit/react/localize#customisation) 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`                                                        |

***

### searchFilters

Filters rendered in the search filter bar.

|         |                           |
| ------- | ------------------------- |
| Type    | `CometChatSearchFilter[]` |
| Default | All available filters     |

```ts lines theme={null}
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]` |

```ts lines theme={null}
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`  |