Search Messages

​

Overview

• 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

​

Integration Steps

​

1. Search State Management Setup

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

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

​

3. Search Result Integration

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

​

4. Navigate to Search Result

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

​

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

​

Next Steps & Further Reading

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