Search Messages - CometChat Docs

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
Related	All Guides

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

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

<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

<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

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
Display results	`CometChatMessageList`	CometChatHome.tsx
Keyword highlighting	`searchKeyword` prop	CometChatHome.tsx
Navigate to result	`goToMessageId`	CometChatHome.tsx
State management	`onSearch` handler	CometChatHome.tsx

Next Steps

Search

The search component reference.

Message List

Render real-time message threads.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.

​Components

​Integration Steps

​1. Search State Management

​2. Search Input

​3. Search Result Integration

​4. Navigate to Search Result

​Feature Matrix

​Next Steps