> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Search

> Search CometChat React UI Kit conversations and messages with filters, scoped results, request builders, and selection callbacks.

<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-docs-llms-scoped-indexes/i4Q5Nw9DEcclqV3C/images/react-uikit-search-update.png?fit=max&auto=format&n=i4Q5Nw9DEcclqV3C&q=85&s=c9dca3d2357c8d5e8044b36a481be9ff" 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/v6/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-docs-llms-scoped-indexes/JjWlPukYmAPwZawH/images/3d0a9273-search_message_item_view_custom_web_screens-bf216d1eab67d0d95362a3ef1996f752.png?fit=max&auto=format&n=JjWlPukYmAPwZawH&q=85&s=0db775371abadf85d6ec743b22223e9e" 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-docs-llms-scoped-indexes/-nSFFcS2LLIkMyn9/images/8ec51714-search_message_leading_view_custom_web_screens-af08d61c02454c807100907c1156d46d.png?fit=max&auto=format&n=-nSFFcS2LLIkMyn9&q=85&s=f7a1b143863da068636bd423163a7579" 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-docs-llms-scoped-indexes/Fa6hxbnaPB6CCDby/images/0b1cf07c-search_message_title_view_custom_web_screens-df6cb1c0e91a105d4f708e47c62de992.png?fit=max&auto=format&n=Fa6hxbnaPB6CCDby&q=85&s=91439ad56ec74cd7881d84ddf97310b5" 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-docs-llms-scoped-indexes/g_KAMkRj71rxDRMU/images/67721bd7-search_message_subtitle_view_custom_web_screens-96e7a678fc3920eb12db00b43c4f6860.png?fit=max&auto=format&n=g_KAMkRj71rxDRMU&q=85&s=f39cf6f81a59c6eab54b9ef1066a450d" 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-docs-llms-scoped-indexes/K_p4Iy5Yo4hNoo1I/images/1c199c35-search_message_trailing_view_custom_web_screens-75c38143a2439190b3198dd93923c6fd.png?fit=max&auto=format&n=K_p4Iy5Yo4hNoo1I&q=85&s=fe7a6779fff80241422d7e2217a022be" 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/v6/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` |


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