Search Messages

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

AI Agent Component Spec

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.