@cometchat/chat-uikit-react 6.0.4 → 6.0.5

package/dist/styles/CometChatMessageComposer.css

@@ -319,4 +319,11 @@ height: 58px;
 }
 .cometchat-message-composer__secondary-button-view-attachment-button-5 .cometchat-popover__content{
     height: 285px; 
+}
+.cometchat-message-composer .cometchat-edit-preview__subtitle{
+    height: fit-content;
+    max-height: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }

package/dist/styles/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/CometChatMessageComposer.css

@@ -319,4 +319,11 @@ height: 58px;
 }
 .cometchat-message-composer__secondary-button-view-attachment-button-5 .cometchat-popover__content{
     height: 285px; 
+}
+.cometchat-message-composer .cometchat-edit-preview__subtitle{
+    height: fit-content;
+    max-height: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }

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/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,5 +1,6 @@
 import { CometChatMessageTemplate } from "../../modals";
 import { CalendarObject } from "../../utils/CalendarObject";
+import { CometChatTextFormatter } from "../../formatters";
 interface MessageInformationProps {
     message: CometChat.BaseMessage;
     onClose?: () => void;
@@ -20,6 +21,15 @@ interface MessageInformationProps {
      * 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,6 +29,7 @@ export interface IOpenChat {
 }
 export interface IShowOngoingCall {
     child: any;
+    message?: CometChat.CustomMessage;
 }
 export interface IPanel {
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cometchat/chat-uikit-react",
-  "version": "6.0.4",
+  "version": "6.0.5",
   "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.11",
+    "@cometchat/chat-sdk-javascript": "^4.0.12",
     "@rollup/plugin-json": "^6.1.0",
     "rxjs": "^7.8.1"
   },