> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Search Messages

Enable users to search messages within conversations and group chats using CometChat's React UI Kit.

## Overview

The Search Messages feature allows users to quickly locate specific messages across conversations and groups.

* Provides keyword-based search for locating past messages.
* Improves user experience by helping users find information without scrolling through long conversations.
* Users can search messages in real-time across chats and navigate directly to relevant results.

***

## Prerequisites

* React v18.2.0+
* CometChat React UI Kit v6.1.0+
* CometChat Chat SDK JavaScript v4.0.13+
* Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
* TypeScript support (recommended)
* Basic messaging functionality already implemented

***

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

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

```tsx 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 and Trigger

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

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

***

### 3. Search Result Integration

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

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

***

### 4. Navigate to Search Result

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

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

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

***

## Implementation Flow

* **Fetch Search Input**

```tsx theme={null}
<CometChatSearchMessages onSearch={onSearch} />
```

* **Execute Search**

```tsx theme={null}
<CometChatMessageList searchKeyword={searchKeyword} />
```

* **Navigate to Result**

```tsx theme={null}
handleResultClick(messageId);
```

***

## Customization Options

* Style the search input field
* Configure placeholder text
* Limit search scope (e.g., per conversation or global)
* Highlight search keywords in results
* Customize empty search result UI

***

## Filtering / Edge Cases

* Empty keyword input
* No results found
* Large result sets (pagination)
* Permissions-based filtering
* Search in archived conversations

***

## Error Handling

```tsx theme={null}
try {
    const messages = await messagesRequest.fetchNext();
    setSearchResults(messages);
} catch (error) {
    console.error("Search failed:", error);
    showErrorMessage("Unable to fetch search results");
}
```

* Handle network errors gracefully
* Provide retry option
* Maintain UI state on error

***

## Context-Specific Notes

* Search works across one-on-one and group chats
* Integrates with thread navigation via `goToMessageId`
* Optimized for real-time updates
* Responsive across devices

***

## Summary / Feature Matrix

| Feature              | Component / Method        | File Reference                                                                                                                            |
| -------------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| 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 & Further Reading

* [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
* [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
* Message Management Features
* Advanced Search Features