@cometchat/chat-uikit-react 4.3.30 → 4.3.32

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

@@ -0,0 +1,344 @@
+import { AvatarStyle, BadgeStyle, BaseStyle, ConfirmDialogStyle, DateStyle, ListItemStyle, ReceiptStyle } from "@cometchat/uikit-elements";
+import { CSSProperties, JSX } from "react";
+import { CometChatTextFormatter, ConversationsStyle } from "@cometchat/uikit-shared";
+import { CometChatOption, DatePatterns, SelectionMode, States, TitleAlignment } from "@cometchat/uikit-resources";
+interface IConversationsProps {
+    /**
+     * Custom view to render on the top-right of the component
+     */
+    menus?: JSX.Element;
+    /**
+     * Title of the component
+     *
+     * @defaultValue `localize("CHATS")`
+     */
+    title?: string;
+    /**
+     * Alignment of the `title` text
+     *
+     * @defaultValue `TitleAlignment.left`
+     */
+    titleAlignment?: TitleAlignment;
+    /**
+     * Request builder to fetch conversations
+     * @defaultValue Default request builder having the limit set to 30
+     */
+    conversationsRequestBuilder?: CometChat.ConversationsRequestBuilder;
+    /**
+     * Function to call whenever the component encounters an error
+     */
+    onError?: (error: CometChat.CometChatException) => void;
+    /**
+     * Custom list item view to be rendered for each conversation in the fetched list
+     */
+    listItemView?: (conversation: CometChat.Conversation) => JSX.Element;
+    /**
+     * Custom subtitle view to be rendered for each conversation in the fetched list
+     *
+     * @remarks
+     * This prop is used if `listItemView` prop is not provided
+     */
+    subtitleView?: (conversation: CometChat.Conversation) => JSX.Element;
+    /**
+     * Hide user presence
+     *
+     * @remarks
+     * If set to true, the status indicator of the default list item view is not displayed for conversation objects related to users
+     *
+     * @defaultValue `false`
+     */
+    disableUsersPresence?: boolean;
+    /**
+     * Hide the separator at the bottom of the default list item view
+     *
+     * @defaultValue `false`
+     */
+    hideSeparator?: boolean;
+    /**
+     * Conversation to highlight
+     *
+     * @remarks
+     * This prop is used if `listItemView` prop is not provided
+     */
+    activeConversation?: CometChat.Conversation;
+    /**
+     * Selection mode to use for the default tail view
+     *
+     * @remarks
+     * This prop is used if `listItemView` prop is not provided.
+     *
+     * @defaultValue `SelectionMode.none`
+     */
+    selectionMode?: SelectionMode;
+    /**
+     * @deprecated
+     *
+     * This property is deprecated as of version 4.3.19 due to newer property 'hideReceipt'. It will be removed in subsequent versions.
+     */
+    /**
+     * Disable receipt status
+     *
+     * @remarks
+     * If set to true, the receipt status of the sent message won't be displayed, and received messages won't be marked as delivered
+     *
+     * @defaultValue `false`
+     */
+    disableReceipt?: boolean;
+    /**
+   * hide receipt status
+   *
+   * @remarks
+   * If set to true, the receipt status of the message won't be displayed
+   *
+   * @defaultValue `false`
+   */
+    hideReceipt?: boolean;
+    /**
+     * List of actions available on mouse over on the default list item component
+     */
+    options?: ((conversation: CometChat.Conversation) => CometChatOption[]) | null;
+    /**
+     * Date format for the date component
+     *
+     * @remarks
+     * The date component is inside the tail view of the default list item view when `selectionMode` prop is set to `SelectionMode.none`
+     */
+    datePattern?: DatePatterns;
+    /**
+     * @deprecated
+     *
+     * This property is deprecated as of version 4.3.8 due to newer property 'passwordGroupIcon'. It will be removed in subsequent versions.
+     */
+    /**
+     * Image URL for the status indicator icon in the default list item view of a conversation related to a password-protected group
+     *
+     * @defaultValue `./assets/locked.svg`
+     */
+    protectedGroupIcon?: string;
+    /**
+     * Image URL for the status indicator icon in the default list item view of a conversation related to a password-protected group
+     *
+     * @defaultValue {undefined}
+     */
+    passwordGroupIcon?: string;
+    /**
+     * Image URL for the status indicator icon in the default list item view of a conversation related to a private group
+     *
+     * @defaultValue `./assets/private.svg`
+     */
+    privateGroupIcon?: string;
+    /**
+     * Image URL for the read status of the sent message
+     *
+     * @defaultValue `./assets/message-read.svg`
+     */
+    readIcon?: string;
+    /**
+     * Image URL for the delivered status of the sent message
+     *
+     * @defaultValue `./assets/message-delivered.svg`
+     */
+    deliveredIcon?: string;
+    /**
+     * Image URL for the wait status of the sent message
+     *
+     * @defaultValue `./assets/wait.svg`
+     */
+    waitIcon?: string;
+    /**
+     * Image URL for the error status of the sent message
+     *
+     * @defaultValue `./assets/warning-small.svg`
+     */
+    errorIcon?: string;
+    /**
+     * Image URL for the sent status of the sent message
+     *
+     * @defaultValue `./assets/message-sent.svg`
+     */
+    sentIcon?: string;
+    /**
+     * 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_CHATS_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
+     */
+    errorStateView?: JSX.Element;
+    /**
+     * Hide error view
+     *
+     * @remarks
+     * If set to true, hides the default and the custom error view
+     *
+     * @defaultValue `false`
+     */
+    hideError?: boolean;
+    /**
+     * Function to call on click of the default list item view of a conversation
+     */
+    onItemClick?: (conversation: CometChat.Conversation) => void;
+    /**
+     * Function to call when a conversation from the fetched list is selected
+     *
+     * @remarks
+     * This prop is used if `selectionMode` prop is not `SelectionMode.none`
+     */
+    onSelect?: (conversation: CometChat.Conversation, selected: boolean) => void;
+    /**
+     * Disable sound for incoming messages
+     *
+     * @defaulValue `false`
+     */
+    disableSoundForMessages?: boolean;
+    /**
+     * Disable typing indicator display
+     *
+     * @defaultValue `false`
+     */
+    disableTyping?: boolean;
+    /**
+     * Custom audio sound for incoming messages
+     */
+    customSoundForMessages?: string;
+    /**
+     * Styles to apply to this component
+     */
+    conversationsStyle?: ConversationsStyle;
+    /**
+     * Styles to apply to the delete conversation dialog component
+     */
+    deleteConversationDialogStyle?: ConfirmDialogStyle;
+    /**
+     * Styles to apply to the avatar component of the default list item view
+     */
+    avatarStyle?: AvatarStyle;
+    /**
+     * Styles to apply to the status indicator component of the default list item view
+     */
+    statusIndicatorStyle?: CSSProperties;
+    /**
+     * Styles to apply to the default list item view
+     */
+    listItemStyle?: ListItemStyle;
+    /**
+     * Styles to apply to the badge component
+     *
+     * @remarks
+     * The badge component is inside the tail view of the default list item view when `selectionMode` prop is set to `SelectionMode.none`
+     */
+    badgeStyle?: BadgeStyle;
+    /**
+     * Styles to apply to the receipt component
+     *
+     * @remarks
+     * The receipt component is rendered conditionally inside the subtitle view of the default list item view
+     */
+    receiptStyle?: ReceiptStyle;
+    /**
+     * Styles to apply to the date component
+     *
+     * @remarks
+     * The date component is inside the tail view of the default list item view when `selectionMode` prop is set to `SelectionMode.none`
+     */
+    dateStyle?: DateStyle;
+    /**
+     * Styles to apply to the backdrop component
+     */
+    backdropStyle?: BaseStyle;
+    confirmDialogTitle?: string;
+    confirmDialogMessage?: string;
+    cancelButtonText?: string;
+    confirmButtonText?: string;
+    disableMentions?: boolean;
+    textFormatters?: CometChatTextFormatter[];
+}
+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: "setLoggedInUser";
+    loggedInUser: CometChat.User | null;
+} | {
+    type: "setIsFirstReload";
+    isFirstReload: boolean;
+};
+/**
+ * Renders a scrollable list of conversations that has been created in a CometChat app
+ */
+export declare function CometChatConversations(props: IConversationsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/CometChatConversations/style.d.ts

@@ -0,0 +1,29 @@
+import { AvatarStyle, BackdropStyle, BadgeStyle, BaseStyle, ConfirmDialogStyle, DateStyle, IconStyle, LabelStyle, ListItemStyle, MenuListStyle, ReceiptStyle } from "@cometchat/uikit-elements";
+import { CSSProperties } from "react";
+import { CometChatTheme } from "@cometchat/uikit-resources";
+import { ConversationsStyle, ListStyle } from "@cometchat/uikit-shared";
+export declare function conversationsWrapperStyle(conversationsStyleObject: ConversationsStyle | null, theme: CometChatTheme): CSSProperties;
+export declare function menusStyle(): CSSProperties;
+export declare function confirmDialogStyle(deleteConversationDialogStyle: ConfirmDialogStyle | null, theme: CometChatTheme): ConfirmDialogStyle;
+export declare function listStyle(conversationsStyleObject: ConversationsStyle | null, theme: CometChatTheme): ListStyle;
+export declare function avatarStyle(avatarStyleObject: AvatarStyle | null, theme: CometChatTheme): AvatarStyle;
+export declare function statusIndicatorStyle(statusIndicatorStyleObject: CSSProperties | null): CSSProperties;
+export declare function listItemStyle(listItemStyleObject: ListItemStyle | null, conversationsStyleObject: ConversationsStyle | null, theme: CometChatTheme): ListItemStyle;
+export declare function badgeStyle(badgeStyleObject: BadgeStyle | null, theme: CometChatTheme): BadgeStyle;
+export declare function itemThreadIndicatorStyle(conversationsStyleObject: ConversationsStyle | null, theme: CometChatTheme): LabelStyle;
+export declare function iconStyle(theme: CometChatTheme): IconStyle;
+export declare function receiptStyle(receiptStyleObject: ReceiptStyle | null, theme: CometChatTheme): ReceiptStyle;
+export declare function subtitleTextStyle(conversation: CometChat.Conversation, typingIndicatorMap: Map<string, CometChat.TypingIndicator>, conversationsStyleObject: ConversationsStyle | null, theme: CometChatTheme): {
+    font: string;
+    color: string;
+    width?: string;
+    overflow?: string;
+    textOverflow?: string;
+};
+export declare function menuListStyle(theme: CometChatTheme): MenuListStyle;
+export declare function dateStyle(dateStyleObject: DateStyle | null, theme: CometChatTheme): DateStyle;
+export declare function subtitleReceiptAndTextContainerStyle(): CSSProperties;
+export declare function getBackdropStyle(backdropStyleObject: BaseStyle | null, conversationsStyle: ConversationsStyle | null): BackdropStyle;
+export declare function defaultSelectionModeNoneTailViewContainerStyle(): CSSProperties;
+export declare function getUnreadBadgeStyle(): CSSProperties;
+export declare function threadViewStyle(): CSSProperties;

package/dist/types/CometChatConversationsWithMessages/hooks.d.ts

@@ -0,0 +1,2 @@
+declare function Hooks(loggedInUser: any, setLoggedInUser: Function, subscribeToEvents: Function, onErrorCallback: Function, setActiveChat: any, user: any, group: any, startConversationBtnElement: JSX.IntrinsicElements["cometchat-button"] | null, showCometChatContactsView: Function, showCometChatContacts: any, hideCometChatContactsView: Function, setActiveUser: any, setActiveGroup: any, attachGroupListener: any): void;
+export { Hooks };

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

@@ -0,0 +1,15 @@
+import { ContactsConfiguration, ConversationsConfiguration, MessagesConfiguration, WithMessagesStyle } from "@cometchat/uikit-shared";
+interface IConversationsWithMessagesProps {
+    user?: CometChat.User;
+    group?: CometChat.Group;
+    isMobileView?: boolean;
+    messageText?: string;
+    conversationsWithMessagesStyle?: WithMessagesStyle;
+    messagesConfiguration?: MessagesConfiguration;
+    conversationsConfiguration?: ConversationsConfiguration;
+    onError?: ((error: CometChat.CometChatException) => void) | null;
+    startConversationConfiguration?: ContactsConfiguration;
+    startConversationIconURL?: string;
+}
+declare const CometChatConversationsWithMessages: (props: IConversationsWithMessagesProps) => import("react/jsx-runtime").JSX.Element;
+export { CometChatConversationsWithMessages };

package/dist/types/CometChatConversationsWithMessages/style.d.ts

@@ -0,0 +1,87 @@
+import { CometChatTheme } from "@cometchat/uikit-resources";
+import { ConversationsConfiguration, MessageHeaderStyle, MessagesConfiguration, MessagesStyle, WithMessagesStyle } from "@cometchat/uikit-shared";
+import { CSSProperties } from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { LabelStyle } from "@cometchat/uikit-elements";
+export declare const getConversationsWrapperStyles: (conversationsWithMessagesStyle: WithMessagesStyle | undefined, theme: CometChatTheme) => CSSProperties;
+export declare const getWithMessagesSidebarStyle: (conversationsWithMessagesStyle: WithMessagesStyle | undefined, theme: CometChatTheme, isMobileView: boolean | undefined, activeUser: CometChat.User | null, activeGroup: CometChat.Group | null) => CSSProperties;
+export declare const getWithMessagesMainStyle: (conversationsWithMessagesStyle: WithMessagesStyle | undefined, isMobileView: boolean | undefined, activeUser: CometChat.User | null, activeGroup: CometChat.Group | null) => CSSProperties;
+export declare const getLabelStyle: (conversationsWithMessagesStyle: WithMessagesStyle | undefined, theme: CometChatTheme) => LabelStyle;
+export declare const getConversationsStyle: (conversationsConfiguration: ConversationsConfiguration | undefined) => {
+    titleTextFont?: string | undefined;
+    titleTextColor?: string | undefined;
+    emptyStateTextFont?: string | undefined;
+    emptyStateTextColor?: string | undefined;
+    errorStateTextFont?: string | undefined;
+    errorStateTextColor?: string | undefined;
+    loadingIconTint?: string | undefined;
+    onlineStatusColor?: string | undefined;
+    separatorColor?: string | undefined;
+    boxShadow?: string | undefined;
+    privateGroupIconBackground?: string | undefined;
+    passwordGroupIconBackground?: string | undefined;
+    lastMessageTextColor?: string | undefined;
+    lastMessageTextFont?: string | undefined;
+    typingIndictorTextColor?: string | undefined;
+    typingIndictorTextFont?: string | undefined;
+    threadIndicatorTextFont?: string | undefined;
+    threadIndicatorTextColor?: string | undefined;
+    height: string;
+    width: string;
+    border: string;
+    borderRadius: string;
+    background: string;
+};
+export declare const getMessageHeaderStyle: (conversationsWithMessagesStyle: WithMessagesStyle | undefined, messagesConfiguration: MessagesConfiguration | undefined, isMobileView: boolean | undefined) => MessageHeaderStyle;
+export declare const getMessageComposerStyle: (conversationsWithMessagesStyle: WithMessagesStyle | undefined, messagesConfiguration: MessagesConfiguration | undefined, isMobileView: boolean | undefined) => {
+    attachIcontint?: string | undefined;
+    liveReactionIconTint?: string | undefined;
+    sendIconTint?: string | undefined;
+    emojiIconTint?: string | undefined;
+    AIIconTint?: string | undefined;
+    voiceRecordingIconTint?: string | undefined;
+    inputBackground?: string | undefined;
+    inputBorder?: string | undefined;
+    inputBorderRadius?: string | undefined;
+    dividerTint?: string | undefined;
+    textFont?: string | undefined;
+    textColor?: string | undefined;
+    placeHolderTextColor?: string | undefined;
+    placeHolderTextFont?: string | undefined;
+    emojiKeyboardTextFont?: string | undefined;
+    emojiKeyboardTextColor?: string | undefined;
+    previewTitleFont?: string | undefined;
+    previewTitleColor?: string | undefined;
+    previewSubtitleColor?: string | undefined;
+    previewSubtitleFont?: string | undefined;
+    closePreviewTint?: string | undefined;
+    maxInputHeight?: string | undefined;
+    height?: string | undefined;
+    width?: string | undefined;
+    border?: string | undefined;
+    borderRadius: string;
+    background?: string | undefined;
+};
+export declare const getMessagesStyle: (messagesStyle?: MessagesStyle, conversationsWithMessagesStyle?: WithMessagesStyle | undefined) => {
+    height?: string | undefined;
+    width?: string | undefined;
+    border?: string | undefined;
+    borderRadius?: string | undefined;
+    background: string | undefined;
+};
+export declare const getEmptyMessageLayoutStyle: (isMobileView: boolean | undefined, activeUser: CometChat.User | null, activeGroup: CometChat.Group | null) => CSSProperties;
+export declare const getBackdropStyle: (conversationsWithMessagesStyle: WithMessagesStyle | undefined, conversationsConfiguration: ConversationsConfiguration | undefined) => {
+    height: string | undefined;
+    width: string | undefined;
+    background: string;
+    border: string;
+    borderRadius: string;
+};
+export declare const getButtonStyle: (showCometChatContacts: boolean, theme: CometChatTheme) => {
+    height: string;
+    width: string;
+    border: string;
+    borderRadius: string;
+    background: string;
+    buttonIconTint: string | undefined;
+};

package/dist/types/CometChatCustomHooks.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+/**
+ * Sets the created ref to the `value` passed
+ *
+ * @remarks
+ * After the initial call of this hook, the internal ref is set to the `value` passed to this hook after the component has rendered completely.
+ * So the returned ref will not have the updated value while the component renders
+ */
+export declare function useRefSync<T>(value: T): React.MutableRefObject<T>;
+/**
+ * Custom hook to make refs stateful
+ *
+ * @remarks
+ * Making refs stateful opens up the possibility of using the element the ref is pointing to as a dependency for a `useEffect` call
+ *
+ * @example
+ * Here's a simple example
+ * ```ts
+ *  // At the top most level of the functional component
+ *  const [inputElement, setInputRef] = useStateRef<HTMLInputElement | null>(null);
+ *
+ *  // Inside the JSX
+ *  <input type = "text" ref = {setInputRef} />
+ * ```
+ */
+export declare function useStateRef<T>(initialValue: T): [T, (node: T) => void];
+export declare function useCometChatErrorHandler(onError?: ((error: CometChat.CometChatException) => void) | null): (error: unknown) => void;

package/dist/types/CometChatDetails/hooks.d.ts

@@ -0,0 +1,17 @@
+import React, { JSX } from "react";
+import { ModalInfo } from ".";
+type Args = {
+    setLoggedInUser: React.Dispatch<React.SetStateAction<CometChat.User | null>>;
+    errorHandler: (error: unknown) => void;
+    leaveOrTransferConfirmDialogElement: JSX.IntrinsicElements["cometchat-confirm-dialog"] | null;
+    setModalInfo: React.Dispatch<React.SetStateAction<ModalInfo>>;
+    handleLeaveOrTransferConfirmClick: (userOrGroup: CometChat.User | CometChat.Group) => Promise<void>;
+    deleteConfirmDialogElement: JSX.IntrinsicElements["cometchat-confirm-dialog"] | null;
+    handleDeleteConfirmClick: (userOrGroup: CometChat.User | CometChat.Group) => Promise<void>;
+    userOrGroup: CometChat.User | CometChat.Group | undefined;
+    user: CometChat.User | undefined;
+    group: CometChat.Group | undefined;
+    setUserOrGroup: React.Dispatch<React.SetStateAction<CometChat.User | CometChat.Group | undefined>>;
+};
+export declare function Hooks(args: Args): void;
+export {};