@cometchat/chat-uikit-react

import { JSX } from "react"; import { CometChatSearchScope, CometChatSearchFilter } from "../../Enums/Enums"; import { CalendarObject } from "../../utils/CalendarObject"; import { CometChatTextFormatter } from "../../formatters/CometChatFormatters/CometChatTextFormatter"; import { CometChatOption } from "../../modals"; /** * Interface for search filter that matches our component needs */ export interface CometChatSearchFilterItem { id: CometChatSearchFilter; title: string; active?: boolean; } /** * Props for the CometChatSearch component */ interface SearchProps { /** * Callback triggered when the back button is clicked * Use this to handle navigation when user clicks the back button * * @defaultValue () => {} */ onBack?: () => void; /** * Whether to hide the back button * * @defaultValue false - back button is shown */ hideBackButton?: boolean; /** * Callback triggered when a conversation is clicked in search results * Receives the conversation object and the search keyword that was used * * @param conversation - The conversation that was clicked * @param searchKeyword - The keyword that was used in the search */ onConversationClicked?: (conversation: CometChat.Conversation, searchKeyword?: string) => void; /** * Callback triggered when a message is clicked in search results * Receives the message object and the search keyword that was used * * @param message - The message that was clicked * @param searchKeyword - The keyword that was used in the search */ onMessageClicked?: (message: CometChat.BaseMessage, searchKeyword?: string) => void; /** * Array of search filters to display in the filter bar * These allow users to narrow down their search results * * @defaultValue All available filters (Audio, Documents, Groups, Photos, Videos, Links, Unread) */ searchFilters?: Array<CometChatSearchFilter>; /** * Filter that should be active by default when the component loads * This allows pre-filtering the search results */ initialSearchFilter?: CometChatSearchFilter; /** * Scopes to search in (Conversations, Messages, or both) * Controls whether to search in conversations, messages, or both * * @defaultValue [CometChatSearchScope.All] - searches in both conversations and messages */ searchIn?: Array<CometChatSearchScope>; /** * Custom view for conversation items in the search results * Use this to completely customize how conversation items are rendered * * @param conversation - The conversation object to render * @returns JSX element representing the conversation item */ conversationItemView?: (conversation: CometChat.Conversation) => JSX.Element; /** * Custom leading view for conversation items (typically avatar/icon) * Use this to customize just the leading section of conversation items * * @param conversation - The conversation object to render the leading view for * @returns JSX element for the leading part of the conversation item */ conversationLeadingView?: (conversation: CometChat.Conversation) => JSX.Element; /** * Custom title view for conversation items * Use this to customize how the title of conversation items is displayed * * @param conversation - The conversation object to render the title for * @returns JSX element for the title of the conversation item */ conversationTitleView?: (conversation: CometChat.Conversation) => JSX.Element; /** * Custom subtitle view for conversation items * Use this to customize how the subtitle (typically last message) is displayed * * @param conversation - The conversation object to render the subtitle for * @returns JSX element for the subtitle of the conversation item */ conversationSubtitleView?: (conversation: CometChat.Conversation) => JSX.Element; /** * Custom trailing view for conversation items (typically timestamp) * Use this to customize what appears at the end of conversation items * * @param conversation - The conversation object to render the trailing view for * @returns JSX element for the trailing part of the conversation item */ conversationTrailingView?: (conversation: CometChat.Conversation) => JSX.Element; /** * Request builder for conversations search * Use this to customize the conversation search request parameters * * @defaultValue New instance with default parameters and search keyword */ conversationsRequestBuilder?: CometChat.ConversationsRequestBuilder; /** * Custom view for message items in the search results * Use this to completely customize how message items are rendered * * @param message - The message object to render * @returns JSX element representing the message item */ messageItemView?: (message: CometChat.BaseMessage) => JSX.Element; /** * Custom leading view for message items (typically sender avatar/icon) * Use this to customize just the leading section of message items * * @param message - The message object to render the leading view for * @returns JSX element for the leading part of the message item */ messageLeadingView?: (message: CometChat.BaseMessage) => JSX.Element; /** * Custom title view for message items (typically sender name) * Use this to customize how the title of message items is displayed * * @param message - The message object to render the title for * @returns JSX element for the title of the message item */ messageTitleView?: (message: CometChat.BaseMessage) => JSX.Element; /** * Custom subtitle view for message items (typically message content) * Use this to customize how the subtitle/content is displayed * * @param message - The message object to render the subtitle for * @returns JSX element for the subtitle of the message item */ messageSubtitleView?: (message: CometChat.BaseMessage) => JSX.Element; /** * Custom trailing view for message items (typically timestamp) * Use this to customize what appears at the end of message items * * @param message - The message object to render the trailing view for * @returns JSX element for the trailing part of the message item */ messageTrailingView?: (message: CometChat.BaseMessage) => JSX.Element; /** * Request builder for messages search * Use this to customize the message search request parameters * * @defaultValue New instance with default parameters and search keyword */ messagesRequestBuilder?: CometChat.MessagesRequestBuilder; /** * Custom view for empty state when no search results are found * This will be displayed when search returns no results */ emptyView?: JSX.Element; /** * Custom view for error state when search fails * This will be displayed when an error occurs during search */ errorView?: JSX.Element; /** * Custom view for loading state during search * This will be displayed while search is in progress */ loadingView?: JSX.Element; /** * Custom view for initial state before user enters a search query * This will be displayed when the search component first loads * * @defaultValue Basic prompt encouraging user to search */ initialView?: JSX.Element; /** * Format for message sent date/time in the UI * Customize how timestamps are displayed in message items */ messageSentAtDateTimeFormat?: CalendarObject; /** * Custom text formatters for message content * Use these to customize how message text is formatted (e.g., emoji, links, mentions) */ textFormatters?: CometChatTextFormatter[]; /** * Whether to hide the group type icon in group conversations * * @defaultValue false - group type icons are shown */ hideGroupType?: boolean; /** * Whether to hide user online/offline status indicators * * @defaultValue false - user status is shown */ hideUserStatus?: boolean; /** * Whether to hide message receipt indicators (sent/delivered/read) * * @defaultValue false - receipts are shown */ hideReceipts?: boolean; /** * User ID to search within specific user's messages * When provided, search will be limited to messages with this user */ uid?: string; /** * Group ID to search within specific group's messages * When provided, search will be limited to messages in this group */ guid?: string; /** * Custom options for conversation items in search results * Function that returns array of options (e.g., for context menu) * * @param conversation - The conversation to generate options for * @returns Array of option objects or null for no options */ conversationOptions?: ((conversation: CometChat.Conversation) => CometChatOption[]) | null; /** * Custom error handler for search operations * Override the default error handling behavior * * @param error - The error that occurred during a search operation */ onError?: (error: CometChat.CometChatException) => void; } /** * CometChatSearch component for searching conversations and messages in CometChat */ export declare function CometChatSearch(props: SearchProps): import("react/jsx-runtime").JSX.Element; export {};