@cometchat/chat-uikit-react 4.3.24 → 5.0.0-beta2

package/dist/types/{CometChatGroups/index.d.ts → components/CometChatGroups/CometChatGroups.d.ts}

@@ -1,40 +1,27 @@
-import { AvatarStyle, ListItemStyle } from "@cometchat/uikit-elements";
-import { CSSProperties, JSX } from "react";
-import { CometChatOption, SelectionMode, States, TitleAlignment } from "@cometchat/uikit-resources";
-import { GroupsStyle } from "@cometchat/uikit-shared";
-interface IGroupsProps {
+import { JSX } from "react";
+import { SelectionMode, States } from "../../Enums/Enums";
+import { CometChatOption } from "../../modals";
+interface GroupsProps {
     /**
      * Custom view to render on the top-right of the component
      */
-    menus?: JSX.Element;
+    menu?: JSX.Element;
     /**
      * Title of the component
      *
      * @defaultValue `localize("GROUPS")`
     */
     title?: string;
-    /**
-     * Alignment of the `title` text
-     *
-     * @defaultValue `TitleAlignment.left`
-     */
-    titleAlignment?: TitleAlignment;
     /**
      * Text to be displayed when the search input has no value
      *
      * @defaultValue `localize("SEARCH")`
      */
     searchPlaceholderText?: string;
-    /**
-     * Image URL for the search icon to use in the search bar
-     *
-     * @defaultValue `./assets/search.svg`
-     */
-    searchIconURL?: string;
     /**
      * Hide the search bar
      *
-     * @defaulValue `false`
+     * @defaultValue `false`
      */
     hideSearch?: boolean;
     /**
@@ -63,12 +50,6 @@ interface IGroupsProps {
      * Custom list item view to be rendered for each group in the fetched list
      */
     listItemView?: (group: CometChat.Group) => JSX.Element;
-    /**
-     * Hide the separator at the bottom of the default list item view
-     *
-     * @defaultValue `false`
-     */
-    hideSeparator?: boolean;
     /**
      * Custom subtitle view to be rendered for each group in the fetched list
      *
@@ -107,32 +88,14 @@ interface IGroupsProps {
      * This prop is used if `listItemView` prop is not provided
      */
     activeGroup?: CometChat.Group;
-    /**
-     * Image URL for the default loading view
-     *
-     * @defaultValue `./assets/spinner.svg`
-     */
-    loadingIconURL?: string;
     /**
      * Custom view for the loading state of the component
      */
     loadingStateView?: JSX.Element;
-    /**
-     * Text to display in the default empty view
-     *
-     * @defaultValue `localize("NO_GROUPS_FOUND")`
-     */
-    emptyStateText?: string;
     /**
      * Custom view for the empty state of the component
      */
     emptyStateView?: JSX.Element;
-    /**
-     * Text to display in the default error view
-     *
-     * @defaultValue `localize("SOMETHING_WRONG")`
-     */
-    errorStateText?: string;
     /**
      * Custom view for the error state of the component
      */
@@ -146,34 +109,6 @@ interface IGroupsProps {
      * @defaultValue `false`
      */
     hideError?: boolean;
-    /**
-     * Image URL for the status indicator icon in the default list item view of a password-protected group
-     *
-     * @defaultValue `./assets/locked.svg`
-     */
-    passwordGroupIcon?: string;
-    /**
-     * Image URL for the status indicator icon in the default list item view of a private group
-     *
-     * @defaultValue `./assets/private.svg`
-     */
-    privateGroupIcon?: string;
-    /**
-     * Styles to apply to the status indicator component of the default list item view
-     */
-    statusIndicatorStyle?: CSSProperties;
-    /**
-     * Styles to apply to the avatar component of the default list item view
-     */
-    avatarStyle?: AvatarStyle;
-    /**
-     * Styles to apply to the default list item view
-     */
-    listItemStyle?: ListItemStyle;
-    /**
-     * Styles to apply to this component
-     */
-    groupsStyle?: GroupsStyle;
 }
 export type Action = {
     type: "appendGroups";
@@ -211,5 +146,5 @@ export type Action = {
 /**
  * Renders a scrollable list of groups that has been created in a CometChat app
  */
-export declare function CometChatGroups(props: IGroupsProps): import("react/jsx-runtime").JSX.Element;
+export declare function CometChatGroups(props: GroupsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/{CometChatGroups → components/CometChatGroups}/controller.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Action } from ".";
+import { Action } from "./CometChatGroups";
 type Args = {
     searchText: string;
     groupsRequestBuilder: CometChat.GroupsRequestBuilder | null;

package/dist/types/{CometChatGroups/hooks.d.ts → components/CometChatGroups/useCometChatGroups.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import { Action } from ".";
+import { Action } from "./CometChatGroups";
 import { GroupsManager } from "./controller";
 type Args = {
     groupsRequestBuilder: CometChat.GroupsRequestBuilder | null;
@@ -11,5 +11,5 @@ type Args = {
     fetchNextAndAppendGroups: (fetchId: string) => Promise<void>;
     groupsSearchText: React.MutableRefObject<string>;
 };
-export declare function Hooks(args: Args): void;
+export declare function useCometChatGroups(args: Args): void;
 export {};

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

@@ -0,0 +1,166 @@
+import { JSX } from "react";
+import { CometChatTextFormatter } from "../../formatters/CometChatFormatters/CometChatTextFormatter";
+import { CometChatMessageComposerAction } from "../../modals";
+import { PreviewMessageMode } from "../../Enums/Enums";
+export type ContentToDisplay = "attachments" | "emojiKeyboard" | "voiceRecording" | "ai" | "none";
+export type ActionOnClickType = (() => void) | null;
+interface MessageComposerProps {
+    /**
+     * User to send messages to
+     */
+    user?: CometChat.User;
+    /**
+     * Group to send messages to
+     *
+     * @remarks
+     * This prop is used if `user` prop is not provided
+     */
+    group?: CometChat.Group;
+    /**
+     * Text to fill the message input with
+     *
+     * @remarks
+     * This prop is used only when this component mounts
+     *
+     * @defaultValue `""`
+     */
+    text?: string;
+    /**
+     * Function to call when the message input's text value changes
+     */
+    onTextChange?: (text: string) => void;
+    /**
+     * Text shown in the message input when it is empty
+     */
+    placeHolderText?: string;
+    /**
+     * Custom send button view
+     */
+    sendButtonView?: JSX.Element;
+    /**
+     * Function to call whenever a new text message is sent
+     */
+    onSendButtonClick?: (message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void;
+    /**
+     * Custom secondary button view
+     */
+    secondaryButtonView?: JSX.Element;
+    /**
+     * Custom auxiliary button view
+     */
+    auxiliaryButtonView?: JSX.Element;
+    /**
+     * Options for the default secondary view
+     */
+    attachmentOptions?: CometChatMessageComposerAction[];
+    /**
+     * Id of the parent message
+     */
+    parentMessageId?: number;
+    /**
+     * Preview section at the top of the message input
+     */
+    headerView?: JSX.Element;
+    /**
+     * Function to call whenever the component encounters an error
+     */
+    onError?: ((error: CometChat.CometChatException) => void) | null;
+    /**
+     * Disable sending typing events
+     *
+     * @defaultValue `false`
+     */
+    disableTypingEvents?: boolean;
+    /**
+     * Hide voice recording button
+     */
+    hideVoiceRecording?: boolean;
+    /**
+     * Hide emoji  keyboard button
+     */
+    hideEmojiKeyboard?: boolean;
+    /**
+   * fotmatters for composer text
+   */
+    textFormatters?: Array<CometChatTextFormatter>;
+    /**
+   * boolean to hide mentions UI
+   */
+    disableMentions?: boolean;
+    /**
+   * text to show when mentions limit exceeds
+   */
+    mentionsWarningText?: string;
+}
+/**
+ * Represents the state of the message composer.
+ * @type {State}
+ */
+type State = {
+    /** The current text entered in the message input field. */
+    text: string;
+    /** Additional text to be added to the message input field, often from mentions or formatting. */
+    addToMsgInputText: string;
+    /** A reference to the text message that is currently being edited, or null if none. */
+    textMessageToEdit: CometChat.TextMessage | null;
+    /** The content that is currently being displayed in the composer (e.g., text, polls, media). */
+    contentToDisplay: ContentToDisplay;
+    /** The currently logged-in user, or null if no user is logged in. */
+    loggedInUser: CometChat.User | null;
+    /** A flag indicating whether the poll UI is visible. */
+    showPoll: boolean;
+    /** A flag indicating whether a warning about the mention count should be shown. */
+    showMentionsCountWarning: boolean;
+    /** A flag indicating whether a warning about the file validation should be shown. */
+    showValidationError: boolean;
+};
+/**
+ * Represents the possible actions that can be dispatched to update the state.
+ * @type {Action}
+ */
+export type Action = 
+/** Action to update the text in the message input field. */
+{
+    type: "setText";
+    text: State["text"];
+}
+/** Action to update the additional text to be added to the message input field (e.g., mentions). */
+ | {
+    type: "setAddToMsgInputText";
+    addToMsgInputText: State["addToMsgInputText"];
+}
+/** Action to set the message that is being edited. */
+ | {
+    type: "setTextMessageToEdit";
+    textMessageToEdit: State["textMessageToEdit"];
+}
+/** Action to change the content being displayed in the composer (e.g., text, polls). */
+ | {
+    type: "setContentToDisplay";
+    contentToDisplay: ContentToDisplay;
+}
+/** Action to update the logged-in user in the state. */
+ | {
+    type: "setLoggedInUser";
+    loggedInUser: CometChat.User;
+}
+/** Action to show or hide the poll UI. */
+ | {
+    type: "setShowPoll";
+    showPoll: boolean;
+}
+/** Action to show or hide the mentions count warning. */
+ | {
+    type: "setShowMentionsCountWarning";
+    showMentionsCountWarning: boolean;
+}
+/** Action to show or hide the validation error */
+ | {
+    type: "setShowValidationError";
+    showValidationError: boolean;
+};
+/**
+ * Renders a message composer to send messages to a user or group of a CometChat App
+ */
+export declare function CometChatMessageComposer(props: MessageComposerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/CometChatMessageComposer/useCometChatMessageComposer.d.ts

@@ -0,0 +1,42 @@
+import { Action } from "./CometChatMessageComposer";
+import { Group, GroupMembersRequestBuilder, User, UsersRequestBuilder } from "@cometchat/chat-sdk-javascript";
+import React from "react";
+import { CometChatMentionsFormatter } from "../../formatters/CometChatFormatters/CometChatMentionsFormatter/CometChatMentionsFormatter";
+import { CometChatTextFormatter } from "../../formatters/CometChatFormatters/CometChatTextFormatter";
+import { UserMemberListType } from "../../Enums/Enums";
+type Args = {
+    dispatch: React.Dispatch<Action>;
+    mySetAddToMsgInputText: (text: string) => void;
+    errorHandler: (error: unknown) => void;
+    pasteHtmlAtCaret: (text: string) => void;
+    textFormatters: Array<CometChatTextFormatter>;
+    disableMentions: boolean;
+    textFormatterArray: Array<CometChatTextFormatter>;
+    mentionsTextFormatterInstanceRef: React.MutableRefObject<CometChatMentionsFormatter>;
+    setTextFormatters: React.Dispatch<React.SetStateAction<CometChatTextFormatter[]>>;
+    CometChatUIKitLoginListener: any;
+    group: CometChat.Group | undefined;
+    user: CometChat.User | undefined;
+    userPropRef: React.MutableRefObject<User | undefined>;
+    groupPropRef: React.MutableRefObject<Group | undefined>;
+    setShowListForMentions: Function;
+    searchMentions: Function;
+    mentionsFormatterInstanceId: string;
+    setUsersRequestBuilder: React.Dispatch<React.SetStateAction<UsersRequestBuilder | undefined>>;
+    setGroupMembersRequestBuilder: React.Dispatch<React.SetStateAction<GroupMembersRequestBuilder | undefined>>;
+    setUserMemberListType: React.Dispatch<React.SetStateAction<UserMemberListType | undefined>>;
+    textInputRef: React.MutableRefObject<any>;
+    createPollViewRef: React.MutableRefObject<any>;
+    setSelection: Function;
+    getComposerId: Function;
+    parentMessageIdPropRef: any;
+    emptyInputField: Function;
+    propsText: string | undefined;
+    currentSelectionForRegex: React.MutableRefObject<any>;
+    currentSelectionForRegexRange: React.MutableRefObject<any>;
+    text: string;
+    getCurrentInput: Function;
+    isPartOfCurrentChatForUIEvent: (message: CometChat.BaseMessage) => boolean | undefined;
+};
+export declare function useCometChatMessageComposer(args: Args): void;
+export {};

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

@@ -0,0 +1,29 @@
+import { JSX } from "react";
+/**
+ * Interface for the props accepted by the CometChatMessageHeader component.
+ */
+interface MessageHeaderProps {
+    /** Custom subtitle view, allowing you to render a JSX element as the subtitle */
+    subtitleView?: JSX.Element;
+    /** Disables showing the user's online/offline presence if set to true */
+    disableUsersPresence?: boolean;
+    /** Disables showing the typing indicator if set to true */
+    disableTyping?: boolean;
+    /** Custom JSX element for the menu, which can be used for additional options or actions */
+    menu?: JSX.Element;
+    /** The user object from CometChat, used to show user-specific information (e.g., status) */
+    user?: CometChat.User;
+    /** The group object from CometChat, used to show group-specific information (e.g., member count) */
+    group?: CometChat.Group;
+    /** Custom JSX element for rendering a list item view, often used to display user/group details */
+    listItemView?: JSX.Element;
+    /** Callback function to handle any errors related to CometChat operations */
+    onError?: ((error: CometChat.CometChatException) => void) | null;
+    /** Callback function triggered when the back action is performed (e.g., navigating to the previous view) */
+    onBack?: () => void;
+    /** Controls the visibility of the back button. */
+    hideBackButton?: boolean;
+}
+/** Functional component for rendering the CometChatMessageHeader */
+export declare const CometChatMessageHeader: (props: MessageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/CometChatMessageHeader/useCometChatMessageHeader.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function useCometChatMessageHeader(loggedInUser: CometChat.User | null, setLoggedInUser: Function, attachListeners: Function, userRef: React.MutableRefObject<CometChat.User | undefined>, groupRef: React.MutableRefObject<CometChat.Group | undefined>, updateSubtitle: Function, subscribeToEvents: Function, user?: CometChat.User, group?: CometChat.Group): void;
+export { useCometChatMessageHeader };

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

@@ -0,0 +1,6 @@
+interface MessageInformationProps {
+    message: CometChat.BaseMessage;
+    onClose?: () => void;
+}
+declare const CometChatMessageInformation: (props: MessageInformationProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatMessageInformation };

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

@@ -0,0 +1,132 @@
+/// <reference types="react" />
+import { CometChatMessageTemplate } from "../../modals";
+import { DatePatterns, MessageListAlignment } from "../../Enums/Enums";
+import { CometChatTextFormatter } from "../../formatters/CometChatFormatters/CometChatTextFormatter";
+/**
+ * Props for the MessageList component.
+ */
+interface MessageListProps {
+    /**
+     * Unique identifier of the parent message for displaying threaded conversations.
+     */
+    parentMessageId?: number;
+    /**
+     * CometChat User object, representing the participant of the chat whose details are displayed.
+     */
+    user?: CometChat.User;
+    /**
+     * CometChat Group object, representing the group whose chat messages are displayed.
+     */
+    group?: CometChat.Group;
+    /**
+     * Custom empty state view to display when there are no messages.
+     */
+    emptyStateView?: JSX.Element;
+    /**
+     * Custom error state view to display when an error occurs while retrieving messages.
+     */
+    errorStateView?: JSX.Element;
+    /**
+     * Custom loading state view to display while messages are being fetched.
+     */
+    loadingStateView?: JSX.Element;
+    /**
+     * Boolean to toggle visibility of read receipts in the message list.
+     * @default false
+     */
+    hideReceipt?: boolean;
+    /**
+     * Specifies the alignment of the messages in the list (left, right, etc.).
+     * @default 'standard'
+     */
+    alignment?: MessageListAlignment;
+    /**
+     * User-defined date format for the message timestamp.
+     */
+    datePattern?: DatePatterns;
+    /**
+     * User-defined date format for the separators between dates in the message list.
+     */
+    DateSeparatorPattern?: DatePatterns;
+    /**
+     * Boolean to toggle visibility of the date separator in the message list.
+     * @default false
+     */
+    hideDateSeparator?: boolean;
+    /**
+     * Array of message templates to define how various types of messages (e.g., text, image, video) should be displayed.
+     */
+    templates?: CometChatMessageTemplate[];
+    /**
+     * Instance of the CometChat MessagesRequestBuilder for building the request to fetch messages.
+     */
+    messagesRequestBuilder?: CometChat.MessagesRequestBuilder;
+    /**
+     * Text to display as a new message indicator.
+     */
+    newMessageIndicatorText?: string;
+    /**
+     * Boolean to indicate whether the message list should scroll to the bottom when a new message arrives.
+     * @default false
+     */
+    scrollToBottomOnNewMessages?: boolean;
+    /**
+     * Threshold value for triggering certain actions (e.g., loading more messages) as the user scrolls.
+     */
+    thresholdValue?: number;
+    /**
+     * Callback function that is triggered when the user clicks on a thread reply.
+     * @param parentMessageId - The ID of the parent message to which replies belong.
+     */
+    onThreadRepliesClick?: Function;
+    /**
+     * Custom header view component for the message list.
+     */
+    headerView?: JSX.Element;
+    /**
+     * Custom footer view component for the message list.
+     */
+    footerView?: JSX.Element;
+    /**
+     * Callback triggered when an error occurs during the message fetching process.
+     * @param error - CometChatException object representing the error.
+     */
+    onError?: ((error: CometChat.CometChatException) => void) | null;
+    /**
+     * Boolean to hide or show errors in the message list.
+     * @default false
+     */
+    hideError?: boolean;
+    /**
+     * Instance of the CometChat ReactionsRequestBuilder for managing message reactions.
+     */
+    reactionsRequestBuilder?: CometChat.ReactionsRequestBuilder;
+    /**
+     * Callback function that triggers when a reaction is clicked.
+     * @param reaction - The reaction object.
+     * @param message - The message associated with the reaction.
+     */
+    onReactionClick?: (reaction: CometChat.ReactionCount, message: CometChat.BaseMessage) => void;
+    /**
+     * Callback function that triggers when an item in the reaction list is clicked.
+     * @param reaction - The reaction object.
+     * @param message - The message associated with the reaction.
+     */
+    onReactionListItemClick?: (reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void;
+    /**
+     * Boolean to disable message reactions.
+     * @default false
+     */
+    disableReactions?: boolean;
+    /**
+     * Boolean to disable mentions in text messages.
+     * @default false
+     */
+    disableMentions?: boolean;
+    /**
+     * Array of text formatters for custom styling or formatting of text bubbles.
+     */
+    textFormatters?: CometChatTextFormatter[];
+}
+declare const CometChatMessageList: (props: MessageListProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatMessageList };

package/dist/types/components/CometChatMessageList/useCometChatMessageList.d.ts

@@ -0,0 +1,6 @@
+import { MutableRefObject } from "react";
+/**
+ * This Hooks function is a custom React hook designed to manage  functionalities of CometChatMessageList component. It fetches the logged-in user, handles event subscriptions and tracks message IDs for new message retrieval. It plays a key role in maintaining real-time functionality and user interactions in the chat interface.
+ **/
+declare function useCometChatMessageList(loggedInUserRef: MutableRefObject<CometChat.User | null>, messageListManagerRef: MutableRefObject<any>, fetchPreviousMessages: () => void, updateMessage: (key: string, mesage: CometChat.BaseMessage, group?: CometChat.Group) => void, messagesRequestBuilder: CometChat.MessagesRequestBuilder | undefined, user: CometChat.User | undefined, group: CometChat.Group | undefined, messageIdRef: MutableRefObject<any>, totalMessagesCountRef: MutableRefObject<any>, messageList: CometChat.BaseMessage[], onErrorCallback: (error: CometChat.CometChatException) => void, setMessageList: (messages: CometChat.BaseMessage[]) => void, setScrollListToBottom: (scrollToBottom: boolean) => void, smartReplyViewRef: MutableRefObject<any>, isOnBottomRef: MutableRefObject<boolean>, isFirstReloadRef: MutableRefObject<boolean>, subscribeToUIEvents: Function, setDateHeader?: Function, parentMessageId?: number): void;
+export { useCometChatMessageList };

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { CometChatMessageTemplate } from "../../modals";
+interface ThreadedMessagePreviewProps {
+    title?: string;
+    parentMessage: CometChat.BaseMessage;
+    template?: CometChatMessageTemplate;
+    bubbleView?: (messageObject: CometChat.BaseMessage) => void | JSX.Element;
+    onClose?: () => void;
+}
+declare const CometChatThreadedMessagePreview: (props: ThreadedMessagePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatThreadedMessagePreview };

package/dist/types/{CometChatUserMemberWrapper/index.d.ts → components/CometChatUserMemberWrapper/CometChatUserMemberWrapper.d.ts}

@@ -1,18 +1,15 @@
 import { CSSProperties } from 'react';
-import { UserMemberListType, UserPresencePlacement } from "@cometchat/uikit-resources";
-import { AvatarStyle } from "@cometchat/uikit-elements";
-export interface IMentionsProps {
+import { UserMemberListType } from '../../Enums/Enums';
+export interface MentionsProps {
     userMemberListType?: UserMemberListType;
     onItemClick?: (user: CometChat.User | CometChat.GroupMember) => void;
     listItemView?: (item?: CometChat.User | CometChat.GroupMember) => JSX.Element;
-    avatarStyle?: AvatarStyle;
     statusIndicatorStyle?: CSSProperties;
     searchKeyword?: string;
     group?: CometChat.Group;
     subtitleView?: (item?: CometChat.User | CometChat.GroupMember) => JSX.Element;
     usersRequestBuilder?: CometChat.UsersRequestBuilder;
     disableUsersPresence?: boolean;
-    userPresencePlacement?: UserPresencePlacement;
     hideSeparator?: boolean;
     loadingStateView?: JSX.Element;
     onEmpty?: () => void;
@@ -21,5 +18,4 @@ export interface IMentionsProps {
     disableLoadingState?: boolean;
     onError?: () => void;
 }
-declare function CometChatUserMemberWrapper(props: IMentionsProps): import("react/jsx-runtime").JSX.Element;
-export default CometChatUserMemberWrapper;
+export declare function CometChatUserMemberWrapper(props: MentionsProps): import("react/jsx-runtime").JSX.Element;