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

> Add full-text message search across conversations with result routing in CometChat React UI Kit.

<Accordion title="AI Integration Quick Reference">
  | Field          | Value                                                                                                   |
  | -------------- | ------------------------------------------------------------------------------------------------------- |
  | Package        | `@cometchat/chat-uikit-react`                                                                           |
  | Key components | `CometChatSearchMessages`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` |
  | Init           | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`                                 |
  | Purpose        | Full-text message search across conversations with result routing and navigation                        |
  | Sample app     | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)                         |
  | Related        | [All Guides](/ui-kit/react/guide-overview)                                                              |
</Accordion>

Search Messages lets users locate specific messages across conversations and groups using keyword search, then navigate directly to the result.

Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework.

***

## Components

| Component / Class          | Role                                                |
| :------------------------- | :-------------------------------------------------- |
| `CometChatSearchMessages`  | Main container for searching messages               |
| `CometChatMessageList`     | Displays filtered messages based on search results  |
| `CometChatMessageComposer` | Supports navigation after selecting a search result |
| `CometChatMessageHeader`   | Displays search context and navigation controls     |

***

## Integration Steps

### 1. Search State Management

Track the current search keyword and the message ID to scroll to. When a new search is triggered, reset `goToMessageId` so the list doesn't jump to a stale result.

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx lines theme={null}
const [searchKeyword, setSearchKeyword] = useState<string>("");
const [goToMessageId, setGoToMessageId] = useState<number | undefined>(undefined);

const onSearch = (keyword: string) => {
    setSearchKeyword(keyword);
    setGoToMessageId(undefined);
};
```

***

### 2. Search Input

Render the search component and wire its `onSearch` callback to update the keyword state. The placeholder text is localized.

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx lines theme={null}
<CometChatSearchMessages
    onSearch={(keyword) => onSearch(keyword)}
    placeholder={getLocalizedString("search_messages_placeholder")}
/>
```

***

### 3. Search Result Integration

Pass `searchKeyword` and `goToMessageId` to `CometChatMessageList`. The list filters messages matching the keyword and highlights them. When `goToMessageId` is set, the list scrolls to that message.

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx lines theme={null}
<CometChatMessageList
    searchKeyword={searchKeyword}
    goToMessageId={goToMessageId}
    user={selectedUser}
    group={selectedGroup}
/>
```

***

### 4. Navigate to Search Result

When a user taps a search result, set `goToMessageId` to that message's ID. The message list will scroll to and highlight the target message.

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx lines theme={null}
const handleResultClick = (messageId: number) => {
    setGoToMessageId(messageId);
};
```

Attach `handleResultClick` to your message search result selection logic.

***

## Feature Matrix

| Feature              | Component / Method        | File                                                                                                                                      |
| :------------------- | :------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------- |
| Search input         | `CometChatSearchMessages` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| Display results      | `CometChatMessageList`    | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| Keyword highlighting | `searchKeyword` prop      | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| Navigate to result   | `goToMessageId`           | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
| State management     | `onSearch` handler        | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Search" href="/ui-kit/react/search">
    The search component reference.
  </Card>

  <Card title="Message List" href="/ui-kit/react/message-list">
    Render real-time message threads.
  </Card>

  <Card title="All Guides" href="/ui-kit/react/guide-overview">
    Browse all feature and formatter guides.
  </Card>

  <Card title="Sample App" href="https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app">
    Full working sample application on GitHub.
  </Card>
</CardGroup>