@cometchat/chat-uikit-react 6.0.3 → 6.0.5

package/dist/styles/components/CometChatReactionList.css

@@ -119,7 +119,7 @@
 .cometchat-reaction-list__shimmer {
     display: flex;
     width: 280px;
-    max-height: 300px;
+    height: 200px;
     flex-direction: column;
     align-items: flex-start;
     align-self: stretch;

package/dist/styles/components/CometChatSmartReplies.css

@@ -34,8 +34,8 @@
 }
 
 .cometchat-smart-replies__header-close-button {
-  mask: url("../../assets/close.svg");
-  -webkit-mask: url("../../assets/close.svg");
+  mask: url("../../assets/close.svg") center center no-repeat;
+  -webkit-mask: url("../../assets/close.svg") center center no-repeat;
   background-color: var(--cometchat-icon-color-primary, #141414);
   width: 20px;
   height: 20px;

package/dist/styles/components/CreatePolls.css

@@ -173,7 +173,7 @@
 }
 
 .cometchat-create-poll__button {
-  width: 388px;
+  width: 100%;
   height: 40px;
 }
 
@@ -236,6 +236,7 @@
   bottom: 0px;
   border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5);
   padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px) var(--cometchat-padding-5) var(--cometchat-padding-4, 16px);
+  width: 100%;
 
 }
 
@@ -290,4 +291,10 @@
 .cometchat-create-poll__body-options-add-button-disabled{
   color: var(--cometchat-text-color-disabled, #DCDCDC);
   font: var(--cometchat-font-caption1-medium);
+}
+
+@media (max-width: 768px) {
+ .cometchat-create-poll{
+  width: 360px;
+ }
 }

package/dist/styles/components/StickersKeyboard.css

@@ -168,8 +168,8 @@
 .cometchat-sticker-keyboard__empty-view-icon {
   width: 60px;
   height: 60px;
-  -webkit-mask-image: url("../../assets/sticker.svg");
-  mask-image: url("../../assets/sticker.svg");
+  -webkit-mask-image: url("../../assets/sticker.svg") center center no-repeat;
+  mask-image: url("../../assets/sticker.svg") center center no-repeat;
   -webkit-mask-size: 100%;
   mask-size: 100%;
   -webkit-mask-repeat: no-repeat;

package/dist/types/components/BaseComponents/CometChatPopover/CometChatPopover.d.ts

@@ -17,6 +17,7 @@ interface PopoverProps {
     disableBackgroundInteraction?: boolean;
     useParentContainer?: boolean;
     useParentHeight?: boolean;
+    showTooltip?: boolean;
 }
 declare const CometChatPopover: import("react").ForwardRefExoticComponent<PopoverProps & import("react").RefAttributes<{
     openPopover: () => void;

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

@@ -37,6 +37,7 @@ type Args = {
     text: string;
     getCurrentInput: Function;
     isPartOfCurrentChatForUIEvent: (message: CometChat.BaseMessage) => boolean | undefined;
+    textMessageToEdit: CometChat.TextMessage | null;
 };
 export declare function useCometChatMessageComposer(args: Args): void;
 export {};

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

@@ -1,4 +1,6 @@
+import { CometChatMessageTemplate } from "../../modals";
 import { CalendarObject } from "../../utils/CalendarObject";
+import { CometChatTextFormatter } from "../../formatters";
 interface MessageInformationProps {
     message: CometChat.BaseMessage;
     onClose?: () => void;
@@ -15,6 +17,19 @@ interface MessageInformationProps {
      * Format for the timestamp displayed next to messages.
      */
     messageSentAtDateTimeFormat?: CalendarObject;
+    /**
+     * Template for customizing the appearance of the message.
+     */
+    template?: CometChatMessageTemplate;
+    /**
+    * Hides the visibility of receipt in the Message Information.
+    * @default false
+    */
+    hideReceipts?: boolean;
+    /**
+    * Array of text formatters for custom styling or formatting of message text bubbles.
+    */
+    textFormatters?: CometChatTextFormatter[];
 }
 declare const CometChatMessageInformation: (props: MessageInformationProps) => import("react/jsx-runtime").JSX.Element;
 export { CometChatMessageInformation };

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { CometChatMessageTemplate } from "../../modals";
 import { CalendarObject } from "../../utils/CalendarObject";
+import { CometChatTextFormatter } from "../../formatters";
 interface CometChatThreadHeaderProps {
     /**
      * Hides the visibility of the date header.
@@ -47,6 +48,15 @@ interface CometChatThreadHeaderProps {
    * Format for the timestamp displayed next to messages.
    */
     messageSentAtDateTimeFormat?: CalendarObject;
+    /**
+    * Hides the visibility of receipt in the Thread Header.
+    * @default false
+     */
+    hideReceipts?: boolean;
+    /**
+    * Array of text formatters for custom styling or formatting of message text bubbles.
+    */
+    textFormatters?: CometChatTextFormatter[];
 }
 declare const CometChatThreadHeader: (props: CometChatThreadHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export { CometChatThreadHeader };

package/dist/types/events/CometChatUIEvents.d.ts

@@ -29,12 +29,14 @@ export interface IOpenChat {
 }
 export interface IShowOngoingCall {
     child: any;
+    message?: CometChat.CustomMessage;
 }
 export interface IPanel {
     child?: any;
     configuration?: any;
     message?: CometChat.BaseMessage;
     position?: PanelAlignment;
+    composerId?: ComposerId;
 }
 export interface IModal {
     child?: any;

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

@@ -2,6 +2,7 @@
 import { CometChatMessageOption } from "./CometChatMessageOption";
 import { MessageBubbleAlignment } from "../Enums/Enums";
 import { CalendarObject } from "../utils/CalendarObject";
+import { CometChatTextFormatter } from "../formatters";
 /**
  * CometChatMessageTemplate is a pre-defined structure for creating message views
  * that can be used as a starting point or blueprint for creating message views,
@@ -20,7 +21,7 @@ declare class CometChatMessageTemplate {
      * and Video bubble based on the type of the message.
      * @type {(message:CometChat.BaseMessage,alignment:MessageBubbleAlignment)=> Element | JSX.Element | null}
      */
-    contentView: ((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element | JSX.Element | null) | null;
+    contentView: ((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, textFormatters?: CometChatTextFormatter[]) => Element | JSX.Element | null) | null;
     /**
      * Custom component to customize the complete message bubble.
      * By default, headerView, contentView and footerView collectively form a message bubble.
@@ -49,7 +50,7 @@ declare class CometChatMessageTemplate {
      * By default, it displays the receipt and the timestamp.
      * @type {(message:CometChat.BaseMessage,alignment:MessageBubbleAlignment)=> Element | JSX.Element | null}
      */
-    statusInfoView: ((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, hideReceipt?: boolean, messageSentAtDateTimeFormat?: CalendarObject) => Element | JSX.Element | null) | null;
+    statusInfoView: ((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, hideReceipts?: boolean, messageSentAtDateTimeFormat?: CalendarObject) => Element | JSX.Element | null) | null;
     /**
      * List of available actions that any user can perform on a message, like reacting,
      * editing or deleting a message.

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

@@ -18,7 +18,7 @@ export declare abstract class DataSource {
     abstract getAudioMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
     abstract getFileMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
     abstract getBottomView(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment): Element | JSX.Element | null;
-    abstract getStatusInfoView(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, hideReceipt?: boolean, messageSentAtDateTimeFormat?: CalendarObject): Element | JSX.Element | null;
+    abstract getStatusInfoView(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, hideReceipts?: boolean, messageSentAtDateTimeFormat?: CalendarObject): Element | JSX.Element | null;
     abstract getTextMessageContentView(message: CometChat.TextMessage, alignment: MessageBubbleAlignment, otherParams: Object | undefined): Element | JSX.Element;
     abstract getImageMessageContentView(message: CometChat.MediaMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
     abstract getVideoMessageContentView(message: CometChat.MediaMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;

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

@@ -19,7 +19,7 @@ export declare abstract class DataSourceDecorator implements DataSource {
     getVideoMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
     getAudioMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
     getFileMessageOptions(loggedInUser: CometChat.User, messageObject: CometChat.BaseMessage, group?: CometChat.Group, additionalParams?: Object | undefined): Array<CometChatActionsIcon | CometChatActionsView>;
-    getStatusInfoView(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, hideReceipt?: boolean, messageSentAtDateTimeFormat?: CalendarObject): JSX.Element | Element | null;
+    getStatusInfoView(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, hideReceipts?: boolean, messageSentAtDateTimeFormat?: CalendarObject): JSX.Element | Element | null;
     getBottomView(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment): JSX.Element | Element | null;
     getTextMessageContentView(message: CometChat.TextMessage, alignment: MessageBubbleAlignment, additionalConfigurations?: Object | undefined): JSX.Element | Element;
     getImageMessageContentView(message: CometChat.MediaMessage, alignment: MessageBubbleAlignment): JSX.Element | Element;

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

@@ -1,3 +1,4 @@
+import { Receipts } from "../Enums/Enums";
 /**
  * Utility class for handling message receipt statuses.
  * It is used in CometChatConversations and CometChatMessageList components.
@@ -10,35 +11,7 @@ export declare class MessageReceiptUtils {
      * the corresponding receipt icon.
      *
      * @param {CometChat.BaseMessage} messageObject - The message object for which to get the receipt status.
-     * @returns {receipts} - The receipt status icon.
+     * @returns {Receipts} - The receipt status icon.
      */
-    static getReceiptStatus: (messageObject: CometChat.BaseMessage) => receipts;
-}
-/**
- * Enum representing different receipt statuses for a message.
- *
- * @readonly
- * @enum {number}
- */
-export declare enum receipts {
-    /**
-     * Status indicating that the message is waiting to be processed.
-     */
-    wait = 0,
-    /**
-     * Status indicating that the message has been sent.
-     */
-    sent = 1,
-    /**
-     * Status indicating that the message has been delivered.
-     */
-    delivered = 2,
-    /**
-     * Status indicating that the message has been read.
-     */
-    read = 3,
-    /**
-     * Status indicating that an error occurred with the message.
-     */
-    error = 4
+    static getReceiptStatus: (messageObject: CometChat.BaseMessage) => Receipts;
 }

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

@@ -1,6 +1,7 @@
 import { MessageBubbleAlignment } from "../Enums/Enums";
 import { CometChatMessageTemplate } from "../modals";
 import { CalendarObject } from "./CalendarObject";
+import { CometChatTextFormatter } from "../formatters";
 /**
  * Utility class for handling message display and styling.
  * It is used in CometChatMessageInformation component.
@@ -13,7 +14,7 @@ export declare class MessageUtils {
      * @param {CometChatMessageTemplate} template - The message template to use for rendering the content view.
      * @returns {object | null} - The content view for the message, or null if not found.
      */
-    getContentView(message: CometChat.BaseMessage, template: CometChatMessageTemplate, alignment?: MessageBubbleAlignment): any;
+    getContentView(message: CometChat.BaseMessage, template: CometChatMessageTemplate, alignment?: MessageBubbleAlignment, textFormatters?: CometChatTextFormatter[]): any;
     /**
      * Retrieves the content view for a message based on the provided template.
      *
@@ -21,7 +22,7 @@ export declare class MessageUtils {
      * @param {CometChatMessageTemplate} template - The message template to use for rendering the content view.
      * @returns {object | null} - The content view for the message, or null if not found.
      */
-    getStatusInfoView(message: CometChat.BaseMessage, template: CometChatMessageTemplate, alignment?: MessageBubbleAlignment, messageSentAtDateTimeFormat?: CalendarObject): any;
+    getStatusInfoView(message: CometChat.BaseMessage, template: CometChatMessageTemplate, alignment?: MessageBubbleAlignment, messageSentAtDateTimeFormat?: CalendarObject, hideReceipts?: boolean): any;
     /**
      * Retrieves the bubble wrapper for a message based on the provided template.
      *
@@ -39,7 +40,7 @@ export declare class MessageUtils {
      * @param {MessageBubbleAlignment} alignment - The alignment of the message bubble (left or right).
      * @returns {JSX.Element} - The message bubble component.
      */
-    getMessageBubble(baseMessage: CometChat.BaseMessage, template: CometChatMessageTemplate, alignment: MessageBubbleAlignment, messageSentAtDateTimeFormat?: CalendarObject): any;
+    getMessageBubble(baseMessage: CometChat.BaseMessage, template: CometChatMessageTemplate, alignment: MessageBubbleAlignment, messageSentAtDateTimeFormat?: CalendarObject, hideReceipts?: boolean, textFormatters?: CometChatTextFormatter[]): any;
     /**
      *
      * @param {(CometChat.User | CometChat.GroupMember | any)} user

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

@@ -48,7 +48,7 @@ export declare class MessagesDataSource implements DataSource {
   * @param {CometChat.BaseMessage} item - The message bubble for which the receipt needs to be fetched
   * @returns {JSX.Element | null} Returns JSX.Element for receipt of a message bubble or null
   */
-    getBubbleStatusInfoReceipt: (item: CometChat.BaseMessage, hideReceipt?: boolean) => JSX.Element | null;
+    getBubbleStatusInfoReceipt: (item: CometChat.BaseMessage, hideReceipts?: boolean) => JSX.Element | null;
     /**
 * Function for displaying the timestamp  next to messages.
 * @returns CalendarObject
@@ -71,7 +71,7 @@ export declare class MessagesDataSource implements DataSource {
   * @returns {JSX.Element | null} Returns JSX.Element for status and date of a message bubble or null
   */
     getBubbleStatusInfoDate: (item: CometChat.BaseMessage, messageSentAtDateTimeFormat?: CalendarObject) => JSX.Element | null;
-    getStatusInfoView: (_messageObject: CometChat.BaseMessage, _alignment: MessageBubbleAlignment, hideReceipt?: boolean, messageSentAtDateTimeFormat?: CalendarObject) => import("react/jsx-runtime").JSX.Element | null;
+    getStatusInfoView: (_messageObject: CometChat.BaseMessage, _alignment: MessageBubbleAlignment, hideReceipts?: boolean, messageSentAtDateTimeFormat?: CalendarObject) => import("react/jsx-runtime").JSX.Element | null;
     getBottomView(_messageObject: CometChat.BaseMessage, _alignment: MessageBubbleAlignment): null;
     getTextMessageTemplate(additionalConfigurations?: additionalParams): CometChatMessageTemplate;
     getAudioMessageTemplate(): CometChatMessageTemplate;

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

@@ -3,6 +3,9 @@
  * It is used in CometChatIncomingCall component.
  */
 export declare class StorageUtils {
+    private static isWindowListenerAttached;
+    private static storageKeyToRemove;
+    private static handleBeforeUnload;
     /**
      * Attaches a callback function to the `storage` event, which is triggered when storage changes occur.
      * @param {EventListenerOrEventListenerObject} callback - The function to be called when the storage event is fired. This function will receive the storage event as an argument.

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

@@ -51,4 +51,5 @@ export declare function sanitizeCalendarObject(calendarObject?: CalendarObject):
     [k: string]: any;
 };
 export declare function fireClickEvent(): void;
+export declare const decodeHTML: (input: string) => string;
 export {};

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@cometchat/chat-uikit-react",
-  "version": "6.0.3",
+  "version": "6.0.5",
   "description": "Ready-to-use Chat UI Components for React(Javascript/Web)",
   "author": "CometChat",
+  "exports": {
+    ".": "./dist/index.js",
+    "./css-variables.css": "./dist/styles/css-variables.css"
+  },
   "dependencies": {
-    "@cometchat/chat-sdk-javascript": "^4.0.10",
+    "@cometchat/chat-sdk-javascript": "^4.0.12",
     "@rollup/plugin-json": "^6.1.0",
     "rxjs": "^7.8.1"
   },