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

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

<CometChatSearchMessages
    onSearch={(keyword) => onSearch(keyword)}
    placeholder={getLocalizedString("search_messages_placeholder")}
/>

---

3. Search Result Integration

File: CometChatHome.tsx

<CometChatMessageList
    searchKeyword={searchKeyword}
    goToMessageId={goToMessageId}
    user={selectedUser}
    group={selectedGroup}
/>

---

4. Navigate to Search Result

File: CometChatHome.tsx

const handleResultClick = (messageId: number) => {
    setGoToMessageId(messageId);
};

Attach handleResultClick to your message search result selection logic.

---

Implementation Flow

• Fetch Search Input

<CometChatSearchMessages onSearch={onSearch} />

• Execute Search

<CometChatMessageList searchKeyword={searchKeyword} />

• Navigate to Result

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

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
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 & Further Reading

• CometChat React UI Kit Documentation
• Sample App Repository
• Message Management Features
• Advanced Search Features