@cometchat/chat-uikit-react 6.0.7 → 6.1.1

package/dist/types/components/CometChatSearch/useCometChatSearchConversationsList.d.ts

@@ -0,0 +1,207 @@
+import { JSX } from "react";
+import { CometChatTextFormatter } from "../../formatters/CometChatFormatters/CometChatTextFormatter";
+import { CometChatSearchFilter, States } from "../../Enums/Enums";
+import { CometChatOption } from "../../modals";
+import { CalendarObject } from "../../utils/CalendarObject";
+/**
+ * Interface for the hook props
+ */
+/**
+ * Interface for the props used by the useCometChatSearchConversationsList hook.
+ */
+interface UseCometChatSearchConversationsListProps {
+    /**
+     * Search keyword used to filter the conversations.
+     */
+    searchKeyword?: string;
+    /**
+     * Optional request builder to customize the conversation query.
+     */
+    conversationsRequestBuilder?: CometChat.ConversationsRequestBuilder | null;
+    /**
+     * Callback function triggered when a conversation item is clicked.
+     * @param conversation - The selected conversation.
+     * @param searchKeyword - The keyword used during the search (optional).
+     */
+    onItemClick?: (conversation: CometChat.Conversation, searchKeyword?: string) => void;
+    /**
+     * Custom renderer for each conversation item.
+     * @param conversation - The current conversation.
+     */
+    itemView?: (conversation: CometChat.Conversation) => JSX.Element;
+    /**
+     * Custom JSX element to display at the start (leading view) of a conversation item.
+     * @param conversation - The current conversation.
+     */
+    leadingView?: (conversation: CometChat.Conversation) => JSX.Element;
+    /**
+     * Custom JSX element to display the title of a conversation item.
+     * @param conversation - The current conversation.
+     */
+    titleView?: (conversation: CometChat.Conversation) => JSX.Element;
+    /**
+     * Custom JSX element to display the subtitle of a conversation item.
+     * @param conversation - The current conversation.
+     */
+    subtitleView?: (conversation: CometChat.Conversation) => JSX.Element;
+    /**
+     * Custom JSX element to display at the end (trailing view) of a conversation item.
+     * @param conversation - The current conversation.
+     */
+    trailingView?: (conversation: CometChat.Conversation) => JSX.Element;
+    /**
+     * Optional array of text formatters to customize conversation text display.
+     */
+    textFormatters?: CometChatTextFormatter[];
+    /**
+     * Format object for displaying timestamps of the last message.
+     */
+    lastMessageDateTimeFormat?: CalendarObject;
+    /**
+     * If true, message read receipts will be hidden.
+     */
+    hideReceipts?: boolean;
+    /**
+     * If true, user online/offline status indicators will be hidden.
+     */
+    hideUserStatus?: boolean;
+    /**
+     * If true, the group type icon will be hidden.
+     */
+    hideGroupType?: boolean;
+    /**
+     * Function to return available options for a conversation item (e.g., context menu actions).
+     * @param conversation - The current conversation.
+     */
+    options?: ((conversation: CometChat.Conversation) => CometChatOption[]) | null;
+    /**
+     * Callback triggered when an error occurs during component behavior.
+     * @param error - The CometChatException error object.
+     */
+    onError?: ((error: CometChat.CometChatException) => void) | null;
+    /**
+     * The currently active conversation to be visually highlighted.
+     */
+    activeConversation?: CometChat.Conversation | null;
+    /**
+     * Custom component displayed when there are no conversations.
+     */
+    emptyView?: JSX.Element;
+    /**
+     * Custom component displayed while the conversations list is loading.
+     */
+    loadingView?: JSX.Element;
+    /**
+     * Custom component displayed when an error occurs while fetching conversations.
+     */
+    errorView?: JSX.Element;
+    /**
+     * Text displayed on the "See More" button.
+     */
+    seeMoreButtonText?: string;
+    /**
+     * Whether to always show the "See More" button even when no more results are available.
+     */
+    alwaysShowSeeMore?: boolean;
+    /**
+     * Active filters applied to the search results.
+     */
+    activeFilters?: CometChatSearchFilter[];
+    /**
+     * Enables scroll-based pagination instead of a "See More" button.
+     */
+    useScrollPagination?: boolean;
+    /**
+     * If true, hides error UI even when an error occurs.
+     */
+    hideError?: boolean;
+    /**
+     * The logged-in user object.
+     */
+    loggedInUser?: CometChat.User | null;
+}
+/**
+ * State interface for the hook
+ */
+interface State {
+    conversationList: CometChat.Conversation[];
+    fetchState: States;
+    typingIndicatorMap: Map<string, CometChat.TypingIndicator>;
+    hasMoreResults: boolean;
+    conversationToBeDeleted: CometChat.Conversation | null;
+}
+/**
+ * Action types for the reducer
+ */
+export type Action = {
+    type: "appendConversations";
+    conversations: CometChat.Conversation[];
+    removeOldConversation?: boolean;
+} | {
+    type: "setConversationList";
+    conversationList: CometChat.Conversation[];
+} | {
+    type: "setFetchState";
+    fetchState: States;
+} | {
+    type: "setConversationToBeDeleted";
+    conversation: CometChat.Conversation | null;
+} | {
+    type: "removeConversation";
+    conversation: CometChat.Conversation;
+} | {
+    type: "updateConversationWithUser";
+    user: CometChat.User;
+} | {
+    type: "fromUpdateConversationListFn";
+    conversation: CometChat.Conversation;
+} | {
+    type: "addTypingIndicator";
+    typingIndicator: CometChat.TypingIndicator;
+} | {
+    type: "removeTypingIndicator";
+    typingIndicator: CometChat.TypingIndicator;
+} | {
+    type: "updateConversationLastMessage";
+    message: CometChat.BaseMessage;
+} | {
+    type: "updateConversationLastMessageAndPlaceAtTheTop";
+    message: CometChat.BaseMessage;
+} | {
+    type: "updateConversationLastMessageAndGroupAndPlaceAtTheTop";
+    group: CometChat.Group;
+    message: CometChat.Action;
+} | {
+    type: "removeConversationOfTheGroup";
+    group: CometChat.Group;
+} | {
+    type: "removeConversationOfTheUser";
+    user: CometChat.User;
+} | {
+    type: "updateConversationLastMessageResetUnreadCountAndPlaceAtTheTop";
+    message: CometChat.BaseMessage;
+    conversation: CometChat.Conversation;
+} | {
+    type: "resetUnreadCountAndSetReadAtIfLastMessage";
+    message: CometChat.BaseMessage;
+} | {
+    type: "setLastMessageReadOrDeliveredAt";
+    updateReadAt: boolean;
+    messageReceipt: CometChat.MessageReceipt;
+} | {
+    type: "setHasMoreResults";
+    hasMoreResults: boolean;
+};
+/**
+ * Hook for managing and rendering a list of conversations in the search component
+ */
+export declare function useCometChatSearchConversationsList(props: UseCometChatSearchConversationsListProps): {
+    renderConversationsList: () => import("react/jsx-runtime").JSX.Element | null;
+    getListItem: () => (conversation: CometChat.Conversation) => JSX.Element;
+    conversationState: State;
+    searchConversations: () => Promise<void>;
+    loadMoreResults: () => Promise<void>;
+    handleScrollToBottom: () => Promise<void>;
+    shouldRender: () => boolean;
+};
+export {};

package/dist/types/components/CometChatSearch/useCometChatSearchMessagesList.d.ts

@@ -0,0 +1,127 @@
+import { JSX } from "react";
+import { CometChatTextFormatter } from "../../formatters/CometChatFormatters/CometChatTextFormatter";
+import { CometChatSearchFilter, States } from "../../Enums/Enums";
+import { CometChatOption } from "../../modals";
+import { CalendarObject } from "../../utils/CalendarObject";
+/**
+ * Interface for the props used by the useCometChatSearchMessagesList hook.
+ */
+interface UseCometChatSearchMessagesListProps {
+    /**
+     * Search keyword used to filter messages.
+     */
+    searchKeyword?: string;
+    /**
+     * Optional request builder to customize the message search query.
+     */
+    messagesRequestBuilder?: CometChat.MessagesRequestBuilder;
+    /**
+     * Callback function triggered when a message item is clicked.
+     * @param message - The selected message.
+     * @param searchKeyword - The keyword used during the search (optional).
+     */
+    onItemClick?: (message: CometChat.BaseMessage, searchKeyword?: string) => void;
+    /**
+     * Custom renderer for each message item.
+     * @param message - The current message.
+     */
+    itemView?: (message: CometChat.BaseMessage) => JSX.Element;
+    /**
+     * Custom JSX element to display at the start (leading view) of a message item.
+     * @param message - The current message.
+     */
+    leadingView?: (message: CometChat.BaseMessage) => JSX.Element;
+    /**
+     * Custom JSX element to display the title of a message item.
+     * @param message - The current message.
+     */
+    titleView?: (message: CometChat.BaseMessage) => JSX.Element;
+    /**
+     * Custom JSX element to display the subtitle of a message item.
+     * @param message - The current message.
+     */
+    subtitleView?: (message: CometChat.BaseMessage) => JSX.Element;
+    /**
+     * Custom JSX element to display at the end (trailing view) of a message item.
+     * @param message - The current message.
+     */
+    trailingView?: (message: CometChat.BaseMessage) => JSX.Element;
+    /**
+     * Optional array of text formatters to customize message text display.
+     */
+    textFormatters?: CometChatTextFormatter[];
+    /**
+     * Format object for displaying the timestamp of messages.
+     */
+    messageDateTimeFormat?: CalendarObject;
+    /**
+     * Function to return available options for a message item (e.g., actions or menu items).
+     * @param message - The current message.
+     */
+    options?: ((message: CometChat.BaseMessage) => CometChatOption[]) | null;
+    /**
+     * Callback triggered when an error occurs during component behavior.
+     * @param error - The CometChatException error object.
+     */
+    onError?: ((error: CometChat.CometChatException) => void) | null;
+    /**
+     * Custom component displayed when there are no messages to show.
+     */
+    emptyView?: JSX.Element;
+    /**
+     * Custom component displayed while the message list is loading.
+     */
+    loadingView?: JSX.Element;
+    /**
+     * Custom component displayed when an error occurs while fetching messages.
+     */
+    errorView?: JSX.Element;
+    /**
+     * Text displayed on the "See More" button.
+     */
+    seeMoreButtonText?: string;
+    /**
+     * Whether to always show the "See More" button even if there are no more results.
+     */
+    alwaysShowSeeMore?: boolean;
+    /**
+     * Active filters applied to the message search.
+     */
+    activeFilters?: CometChatSearchFilter[];
+    /**
+     * User ID to search messages specific to a user.
+     */
+    uid?: string;
+    /**
+     * Group ID to search messages specific to a group.
+     */
+    guid?: string;
+    /**
+     * If true, hides error views from rendering.
+     */
+    hideError?: boolean;
+    /**
+     * Logged-in user object reference.
+     */
+    loggedInUser?: CometChat.User | null;
+}
+/**
+ * State interface for the hook
+ */
+interface State {
+    messageList: CometChat.BaseMessage[];
+    fetchState: States;
+    hasMoreResults: boolean;
+}
+/**
+ * Hook for managing and rendering a list of messages in the search component
+ */
+export declare function useCometChatSearchMessagesList(props: UseCometChatSearchMessagesListProps): {
+    renderMessagesList: () => import("react/jsx-runtime").JSX.Element | null;
+    messageState: State;
+    searchMessages: () => Promise<void>;
+    loadMoreResults: () => Promise<void>;
+    handleScrollToBottom: () => Promise<void>;
+    shouldRender: () => boolean;
+};
+export {};

package/dist/types/components/CometChatThreadHeader/CometChatThreadHeader.d.ts

@@ -57,6 +57,14 @@ interface CometChatThreadHeaderProps {
     * Array of text formatters for custom styling or formatting of message text bubbles.
     */
     textFormatters?: CometChatTextFormatter[];
+    /**
+     * Callback function triggered when the subtitle is clicked.
+     */
+    onSubtitleClicked?: () => void;
+    /**
+     * Custom subtitle view to display below the thread title.
+     */
+    subtitleView?: JSX.Element;
     /**
     * Controls the visibility of the scrollbar in the list.
     * @defaultValue `false`

package/dist/types/formatters/CometChatFormatters/CometChatTextHighlightFormatter/CometChatTextHighlightFormatter.d.ts

@@ -0,0 +1,26 @@
+import { CometChatTextFormatter } from "../CometChatTextFormatter";
+/**
+ * Class that handles the text highlighting for specific patterns.
+ * CometChatTextHighlightFormatter is a child class of CometChatTextFormatter.
+ * It extends the functionality of text formatting to specifically highlight text patterns.
+ * It can be used to highlight specific words or patterns.
+ */
+export declare class CometChatTextHighlightFormatter extends CometChatTextFormatter {
+    constructor(pattern?: string | RegExp);
+    /**
+     * Sets the text pattern to highlight
+     * @param pattern The text pattern (string or RegExp) to highlight
+     */
+    setText(pattern: string | RegExp): void;
+    /**
+     * Generates a unique ID for the highlight span
+     */
+    getUniqueId(): string;
+    /**
+     * Format the text by applying highlighting to matches of the regex pattern
+     * @param inputText The text to format
+     * @param params Optional parameters
+     * @returns The formatted text with highlights
+     */
+    getFormattedText(inputText: string | null): string | void;
+}

package/dist/types/formatters/index.d.ts

@@ -1,3 +1,4 @@
 export { CometChatTextFormatter } from './CometChatFormatters/CometChatTextFormatter';
 export { CometChatUrlsFormatter } from './CometChatFormatters/CometChatUrlsFormatter/CometChatUrlsFormatter';
 export { CometChatMentionsFormatter } from './CometChatFormatters/CometChatMentionsFormatter/CometChatMentionsFormatter';
+export { CometChatTextHighlightFormatter } from './CometChatFormatters/CometChatTextHighlightFormatter/CometChatTextHighlightFormatter';

package/dist/types/index.d.ts

@@ -111,3 +111,5 @@ export { CometChatUIKitLoginListener } from './CometChatUIKit/CometChatUIKitLogi
 export { CometChatUIKitUtility } from './CometChatUIKit/CometChatUIKitUtility';
 export * from './CometChatCustomHooks';
 export * from './formatters/index';
+export * from './utils/SearchUtils';
+export { CometChatSearch } from './components/CometChatSearch/CometChatSearch';

package/dist/types/modals/CometChatSearchFilterOption.d.ts

@@ -0,0 +1,34 @@
+/**
+ * This class is used to define the properties of a search filter option,
+ * including its unique identifier, display name, and an optional icon URL.
+ */
+export declare class CometChatSearchFilterOption {
+    /**
+     * A unique identifier for the filter option.
+     * Example: 'photos', 'groups', etc.
+     */
+    id: string;
+    /**
+     * An optional display name for the filter option.
+     * Example: 'Photos', 'Groups', etc.
+     */
+    name?: string;
+    /**
+     * An optional URL or path to the icon representing the filter option.
+     * Example: 'path/to/icon.png'.
+     */
+    iconURL?: string;
+    /**
+     * Creates an instance of CometChatSearchFilterOption.
+     *
+     * @param options - An object containing the properties of the filter option.
+     * @param options.id - A unique identifier for the filter option.
+     * @param options.name - An optional display name for the filter option.
+     * @param options.iconURL - An optional URL or path to the icon for the filter option.
+     */
+    constructor(options: {
+        id: string;
+        name?: string;
+        iconURL?: string;
+    });
+}

package/dist/types/utils/SearchUtils.d.ts

@@ -0,0 +1,30 @@
+import { CometChatSearchFilter } from "../Enums/Enums";
+import { CalendarObject } from "./CalendarObject";
+/**
+ * Checks if two dates (timestamps) are from different months or years
+ *
+ * @param firstDate - First timestamp to compare in milliseconds
+ * @param secondDate - Second timestamp to compare in milliseconds
+ * @param errorHandler - Optional error handler function for exception handling
+ * @returns boolean indicating if the dates belong to different months or years
+ */
+export declare function isMonthDifferent(firstDate?: number, secondDate?: number, errorHandler?: (error: unknown, source?: string) => void): boolean;
+/**
+ * Get common date format based on provided custom format
+ * @returns CalendarObject with format specifications
+ */
+export declare function getCommonDateFormat(customFormat?: CalendarObject): CalendarObject;
+/**
+ * Checks if message search criteria are valid
+ * Returns true if search keyword exists or if valid filters are active
+ */
+export declare function hasValidMessageSearchCriteria(searchKeyword: string, filters: CometChatSearchFilter[]): boolean;
+/**
+ * Checks if conversation search criteria are valid
+ * Returns true if search keyword exists or if valid filters are active
+ */
+export declare function hasValidConversationSearchCriteria(searchKeyword: string, filters: CometChatSearchFilter[]): boolean;
+/**
+ * Checks if a message has link preview metadata
+ */
+export declare function hasLink(metadata: any): boolean;

package/dist/types/utils/util.d.ts

@@ -52,4 +52,11 @@ export declare function sanitizeCalendarObject(calendarObject?: CalendarObject):
 };
 export declare function fireClickEvent(): void;
 export declare const decodeHTML: (input: string) => string;
+/**
+* Custom React hook for creating debounced callbacks with automatic cleanup.
+*/
+export declare const useDebouncedCallback: (callback: () => void, delay: number) => {
+    debouncedCallback: () => void;
+    cleanup: () => void;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cometchat/chat-uikit-react",
-  "version": "6.0.7",
+  "version": "6.1.1",
   "description": "Ready-to-use Chat UI Components for React(Javascript/Web)",
   "author": "CometChat",
   "exports": {
@@ -8,7 +8,7 @@
     "./css-variables.css": "./dist/styles/css-variables.css"
   },
   "dependencies": {
-    "@cometchat/chat-sdk-javascript": "^4.0.12",
+    "@cometchat/chat-sdk-javascript": "^4.0.13",
     "@rollup/plugin-json": "^6.1.0",
     "rxjs": "^7.8.1"
   },