@cometchat/chat-uikit-react 6.2.6 → 6.3.0

package/dist/styles/components/CometChatMessagePreview.css

@@ -0,0 +1,275 @@
+/*
+   Main container for the reply-message preview area.
+*/
+.cometchat-message-preview {
+    padding: var(--cometchat-padding-2, 8px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin: 0;
+    min-height: 30px;
+    height: 100%;
+    width: 100%;
+    min-width: 100px;
+    cursor: pointer;
+    border: none;
+    border-radius: var(--cometchat-radius-1, 4px);
+    box-sizing: border-box;
+    gap: var(--cometchat-padding-1, 4px);
+    position: relative;
+    background-color: var(--cometchat-background-color-03);
+  }
+
+
+.cometchat-message-bubble-incoming .cometchat-message-preview{
+  background-color: var(--cometchat-neutral-color-400);
+  color: var( --cometchat-primary-color);
+}
+
+.cometchat-message-bubble-outgoing .cometchat-message-preview{
+  background: var(--cometchat-extended-primary-color-700);
+}
+  
+  /*
+     Close button for the reply-message preview.
+  */
+  .cometchat-message-preview__close {
+    mask: url("../../assets/close.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/close.svg") center center no-repeat;
+    height: 20px;
+    width: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--cometchat-icon-color-primary);
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    position: absolute;
+    top: var(--cometchat-padding-2, 8px);
+    right: var(--cometchat-padding-2, 8px);
+    cursor: pointer;
+  }
+
+  /*
+     Text shown when a message is deleted.
+  */
+  .cometchat-message-bubble-outgoing .cometchat-message-preview-deleted__message{
+    color: var(--cometchat-static-white);
+  }
+
+  .cometchat-message-preview-deleted__message {
+    display: flex;  
+    gap: 2px;
+    height: 100%;
+    justify-content: left;
+    width: 100%;
+  }
+
+  .cometchat-message-preview-deleted__message__text{
+    font: var(--cometchat-font-caption1-regular, 12px);
+    white-space: nowrap;    
+    overflow: hidden;         
+    text-overflow: ellipsis; 
+    max-width: 100%;
+  }
+  .cometchat-message-bubble-incoming .cometchat-message-preview-deleted__message{
+    color: var(--cometchat-neutral-color-600);
+  }
+  
+  /*
+     Title text inside the reply-message preview.
+  */
+  .cometchat-message-preview__title {
+    font: var(--cometchat-font-caption1-regular, 12px);
+    width: 100%; 
+    text-align: left;
+    color: var(--cometchat-primary-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  /*
+     Subtitle text inside the reply-message preview, containing the actual text being reply-messageed.
+  */
+  .cometchat-message-preview__subtitle {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-style: normal;
+    width: 100%;    
+    text-align: left;
+    color: var(--cometchat-text-color-secondary);
+    font: var(--cometchat-font-caption1-regular, 12px);
+    overflow: hidden;
+  }
+  
+  .cometchat-message-bubble-outgoing .bubble-view{
+    border-left: 3px solid var(--cometchat-static-white); 
+  }
+
+  .composer-view .cometchat-message-preview {
+    border-left: 3px solid var(--cometchat-primary-color); 
+  }
+  .cometchat-message-bubble-outgoing .bubble-view .cometchat-message-preview__subtitle-icon{
+    background-color: var(--cometchat-static-white);
+  }
+
+    
+  .cometchat-message-bubble-incoming .bubble-view{
+    border-left: 3px solid var(--cometchat-primary-color); 
+  }
+
+  .cometchat-message-bubble-outgoing .cometchat-message-preview__title, .cometchat-message-bubble-outgoing .cometchat-message-preview__subtitle{
+    color: var(--cometchat-static-white);
+  }
+
+  .bubble-view{
+    border-radius: 4px;
+  }
+  
+  .cometchat-message-preview_others{
+    border-left: 3px solid var(--cometchat-primary-color);
+  }
+
+  .cometchat-message-preview__subtitle-text{
+    text-align: left;
+    overflow: hidden;
+    font: var(--cometchat-font-caption1-regular, 12px);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+  }
+  
+  .cometchat-message-preview__subtitle-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    border: none;
+    align-self: center;
+    background: var(--cometchat-icon-color-secondary, #A1A1A1);
+    height: 16px;
+    width: 16px;
+    flex-shrink: 0;
+  }
+  
+  .cometchat-message-preview__subtitle-icon-image {
+    -webkit-mask: url("../../assets/conversations_image-message.svg") center center no-repeat;
+    mask: url("../../assets/conversations_image-message.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+
+   .cometchat-message-bubble-incoming  .cometchat-message-preview-deleted__message__icon{
+    background: var(--cometchat-neutral-color-600);
+  }
+
+  .cometchat-message-bubble-outgoing .cometchat-message-preview-deleted__message__icon{
+    background: var(--cometchat-static-white, #fff);
+  }
+
+
+  .cometchat-message-preview-deleted__message__icon{
+    height: 14px;
+    width: 14px;
+    flex: 0 0 auto;
+    -webkit-mask: url("../../assets/message_delete.svg") center center no-repeat;
+    mask: url("../../assets/message_delete.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+
+.cometchat-message-preview__subtitle-icon-meeting-incoming-audio{
+    -webkit-mask: url("../../assets/phone_incoming.svg") center center no-repeat;
+    mask: url("../../assets/phone_incoming.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+
+ .cometchat-message-preview__subtitle-icon-meeting-outgoing-audio{
+    -webkit-mask: url("../../assets/phone_outgoing.svg") center center no-repeat;
+    mask: url("../../assets/phone_outgoing.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+.cometchat-message-preview__subtitle-icon-meeting-incoming-video {
+    -webkit-mask: url("../../assets/incoming_video.svg") center center no-repeat;
+    mask: url("../../assets/incoming_video.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+
+.cometchat-message-preview__subtitle-icon-meeting-outgoing-video{
+    -webkit-mask: url("../../assets/outgoing_video.svg") center center no-repeat;
+    mask: url("../../assets/outgoing_video.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+
+  .cometchat-message-preview__subtitle-icon-file {
+    -webkit-mask: url("../../assets/conversations_file-message.svg") center center no-repeat;
+    mask: url("../../assets/conversations_file-message.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  .cometchat-message-preview__subtitle-icon-video {
+    -webkit-mask: url("../../assets/conversations_video-message.svg") center center no-repeat;
+    mask: url("../../assets/conversations_video-message.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  .cometchat-message-preview__subtitle-icon-audio {
+    -webkit-mask: url("../../assets/conversations_audio-message.svg") center center no-repeat;
+    mask: url("../../assets/conversations_audio-message.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  .cometchat-message-preview__subtitle-icon-poll {
+    -webkit-mask: url("../../assets/conversations_poll-message.svg") center center no-repeat;
+    mask: url("../../assets/conversations_poll-message.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  
+  .cometchat-message-preview__subtitle-icon-sticker {
+    -webkit-mask: url("../../assets/conversations_sticker-message.svg") center center no-repeat;
+    mask: url("../../assets/conversations_sticker-message.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  
+  .cometchat-message-preview__subtitle-icon-collaborative-document {
+    -webkit-mask: url("../../assets/conversations_collaborative-document-message.svg") center center no-repeat;
+    mask: url("../../assets/conversations_collaborative-document-message.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  
+  .cometchat-message-preview__subtitle-icon-collaborative-whiteboard {
+    -webkit-mask: url("../../assets/collaborative_whiteboard.svg") center center no-repeat;
+    mask: url("../../assets/collaborative_whiteboard.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  .cometchat-message-preview__subtitle-icon-link {
+    -webkit-mask: url("../../assets/conversations_link.svg") center center no-repeat;
+    mask: url("../../assets/conversations_link.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+  
+  .cometchat-message-preview__subtitle-icon-none {
+    display: none;
+  }

package/dist/styles/components/CometChatStreamMessageBubble.css

@@ -2,6 +2,9 @@
   box-sizing: border-box;
   max-width: 100%;
   overflow: hidden;
+  line-height: 1.75;
+  margin: 0;
+  margin-bottom: var(--cometchat-margin-2);
 }
 
 .cometchat-stream-message-bubble .cometchat-stream-message-bubble__copy {
@@ -20,6 +23,10 @@
 
 }
 
+.cometchat-stream-message-bubble {
+  margin-top: calc(var(--cometchat-margin-1) * -1)
+}
+
 .cometchat-stream-message-bubble {
   overflow: hidden;
   text-align: left;
@@ -42,6 +49,10 @@
 
 }
 
+.cometchat-stream-message-bubble li *{
+  vertical-align: top;
+}
+
 .cometchat-stream-message-bubble li:not([class]) {
   text-align: left !important;
 
@@ -210,14 +221,35 @@
 }
 .cometchat-stream-message-bubble li{
   overflow: visible !important;
-  line-height: 20px;
-  padding: 0px 0px 6px 0px;
+  padding: 0;
 }
 .cometchat-stream-message-bubble img{
   max-height: 300px;
   width: fit-content;
   border-radius: var(--cometchat-radius-2);
+  margin-block: var(--cometchat-margin-2) 0;
+}
+
+.cometchat-stream-message-bubble > *:first-child *:first-child:not(:has(*)) ~ img{
+  margin-top: var(--cometchat-margin-1);
+}
+
+.cometchat-stream-message-bubble__image-intersection-start, .cometchat-stream-message-bubble__image-intersection-end{
+  display: none;
+}
+
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-start:not(.cometchat-stream-message-bubble__image-intersection-end ~ .cometchat-stream-message-bubble__image-intersection-start) {
+  display: block;
+  margin-top: -0.5em;
 }
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-end:not(:has(+ .cometchat-stream-message-bubble__image-intersection-start)) {
+  display: block;
+}
+
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-end:last-child {
+  margin-bottom: 0;
+}
+
 .cometchat-stream-message-bubble > ol:first-child > li:first-child,
 .cometchat-stream-message-bubble > ul:first-child > li:first-child
 {
@@ -230,7 +262,6 @@
 .cometchat-stream-message-bubble h4,
 .cometchat-stream-message-bubble h5,
 .cometchat-stream-message-bubble h6 {
-  line-height: 20px;
   font-size: initial;
   padding: var(--cometchat-padding-2) 0px;
   margin: 0;
@@ -244,9 +275,20 @@
   padding-top: 0px;
 }
 
-.cometchat-stream-message-bubble p{
-  line-height: 20px;
-  padding: var(--cometchat-padding-2) 0px;
+.cometchat-stream-message-bubble__image-intersection-start, .cometchat-stream-message-bubble__image-intersection-end{
+  display: none;
+}
+
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-start:not(.cometchat-stream-message-bubble__image-intersection-end ~ .cometchat-stream-message-bubble__image-intersection-start) {
+  display: block;
+  margin-top: -0.5em;
+}
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-end:not(:has(+ .cometchat-stream-message-bubble__image-intersection-start)) {
+  display: block;
+}
+
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-end:last-child {
+  margin-bottom: 0;
 }
 
 .cometchat-stream-message-bubble > ul:first-child li:first-child > p:first-child{

package/dist/styles/components/index.css

@@ -61,6 +61,7 @@
 @import url('./CometChatStreamMessageBubble.css');
 @import url('./CometChatAIAssistantChatHistory.css');
 @import url('./CometChatErrorView.css');
+@import url('./CometChatMessagePreview.css');
 /* @import url('./CometChatToolCallResultBubble.css');
 @import url('./CometChatToolCallArgumentBubble.css'); */
 .cometchat * {
@@ -119,6 +120,10 @@ font:var(--cometchat-font-body-regular);
     text-decoration: underline;
 }
 
+.cometchat-message-preview .cometchat-url{
+    text-decoration: underline;
+}
+
 .cometchat-text-bubble .cometchat-text-highlight {
     font: var(--cometchat-font-body-bold);
 }

package/dist/styles/index.css

@@ -61,6 +61,7 @@
 @import url('./CometChatStreamMessageBubble.css');
 @import url('./CometChatAIAssistantChatHistory.css');
 @import url('./CometChatErrorView.css');
+@import url('./CometChatMessagePreview.css');
 /* @import url('./CometChatToolCallResultBubble.css');
 @import url('./CometChatToolCallArgumentBubble.css'); */
 .cometchat * {
@@ -119,6 +120,10 @@ font:var(--cometchat-font-body-regular);
     text-decoration: underline;
 }
 
+.cometchat-message-preview .cometchat-url{
+    text-decoration: underline;
+}
+
 .cometchat-text-bubble .cometchat-text-highlight {
     font: var(--cometchat-font-body-bold);
 }

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

@@ -15,7 +15,7 @@ interface FullScreenViewerProps {
     /**
      * The media message containing the image.
      */
-    message: CometChat.MediaMessage;
+    message: CometChat.BaseMessage;
     /**
      * Format for timestamps associated with images in the message list.
      */

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

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { CometChatTextFormatter } from '../../../formatters';
+/**
+ * Interface for the props used in the CometChatMessagePreview component.
+ */
+interface CometChatMessagePreviewProps {
+    /** The title to display in the preview, defaults to "Edit Message"*/
+    previewTitle?: JSX.Element | null;
+    /** To hide the close icon in the preview */
+    hideCloseButton?: boolean;
+    /** The subtitle to display in the preview, can be left empty. */
+    previewSubtitle?: JSX.Element | null;
+    /** Callback function that triggers when the close button is clicked. */
+    onClose?: () => void;
+    /** Message object replying to */
+    message?: CometChat.BaseMessage;
+    /** Moderation status of the message that is being replied */
+    isMessageModerated?: boolean;
+    /** Text formatters for message bubble */
+    textFormatters?: CometChatTextFormatter[];
+}
+/**
+ * CometChatMessagePreview Component
+ *
+ * A React component that displays a preview of a message that is being replied with a title and subtitle.
+ * @param {CometChatMessagePreviewProps} props - The props for the component.
+ * @returns {JSX.Element} A JSX element displaying the edit preview UI.
+ */
+declare const CometChatMessagePreview: FC<CometChatMessagePreviewProps>;
+export { CometChatMessagePreview };

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

@@ -171,6 +171,8 @@ type State = {
     addToMsgInputText: string;
     /** A reference to the text message that is currently being edited, or null if none. */
     textMessageToEdit: CometChat.TextMessage | null;
+    /** A reference to the message that the user is currently replying to, or null if no reply is active. */
+    messageToReply: CometChat.BaseMessage | 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. */
@@ -202,6 +204,11 @@ export type Action =
     type: "setTextMessageToEdit";
     textMessageToEdit: State["textMessageToEdit"];
 }
+/** Action to set the message that is being replied. */
+ | {
+    type: "setMessageToReply";
+    messageToReply: State["messageToReply"];
+}
 /** Action to change the content being displayed in the composer (e.g., text, polls). */
  | {
     type: "setContentToDisplay";

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

@@ -42,6 +42,7 @@ type Args = {
     getCurrentWindow: () => Window;
     getCurrentDocument: () => Document;
     onTextChange: ((text: string) => void) | undefined;
+    messageToReplyRef: React.MutableRefObject<CometChat.BaseMessage | null>;
 };
 export declare function useCometChatMessageComposer(args: Args): void;
 export {};

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

@@ -47,6 +47,11 @@ interface MessageListProps {
      * @default false
      */
     hideReplyInThreadOption?: boolean;
+    /**
+     * Hides the reply option for a message.
+     * @default false
+     */
+    hideReplyOption?: boolean;
     /**
      * Hides the option to translate messages.
      * @default false
@@ -145,10 +150,10 @@ interface MessageListProps {
      */
     customSoundForMessages?: string;
     /**
-     * Specifies the keywords in incoming messages that will trigger Smart Replies.
-     * If set to an empty array [], Smart Replies will be generated for all messages.
-     * @default ['what', 'when', 'why', 'who', 'where', 'how', '?']
-     */
+      * Specifies the keywords in incoming messages that will trigger Smart Replies.
+      * If set to an empty array [], Smart Replies will be generated for all messages.
+      * @default ['what', 'when', 'why', 'who', 'where', 'how', '?']
+      */
     smartRepliesKeywords?: string[];
     /**
      * Specifies the delay in milliseconds before Smart Replies are displayed.
@@ -204,20 +209,20 @@ interface MessageListProps {
      */
     footerView?: JSX.Element;
     /**
-     * Format for the date separators in the message list.
-     */
+   * Format for the date separators in the message list.
+   */
     separatorDateTimeFormat?: CalendarObject;
     /**
-     * Format for sticky date headers displayed in the message list.
-     */
+    * Format for sticky date headers displayed in the message list.
+    */
     stickyDateTimeFormat?: CalendarObject;
     /**
-     * Format for the timestamp displayed next to messages.
-     */
+   * Format for the timestamp displayed next to messages.
+   */
     messageSentAtDateTimeFormat?: CalendarObject;
     /**
-     * Format for timestamps displayed in message details (e.g., delivery or read time).
-     */
+   * Format for timestamps displayed in message details (e.g., delivery or read time).
+   */
     messageInfoDateTimeFormat?: CalendarObject;
     /**
      * ID of the message to automatically scroll to when the message list loads.
@@ -226,9 +231,9 @@ interface MessageListProps {
      */
     goToMessageId?: string;
     /**
-     * Controls the visibility of the scrollbar in the list.
-     * @defaultValue `false`
-     */
+      * Controls the visibility of the scrollbar in the list.
+      * @defaultValue `false`
+    */
     showScrollbar?: boolean;
     /**
       * Toggles AI Agent functionality.

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

@@ -2,5 +2,5 @@ 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[], errorHandler: (error: unknown, source?: string) => void, setMessageList: (messages: CometChat.BaseMessage[]) => void, setScrollListToBottom: (scrollToBottom: boolean) => void, smartReplyViewRef: MutableRefObject<any>, isOnBottomRef: MutableRefObject<boolean>, isFirstReloadRef: MutableRefObject<boolean>, subscribeToUIEvents: Function, showSmartRepliesRef: MutableRefObject<any>, addMessage: (message: CometChat.BaseMessage) => void, setDateHeader?: Function, parentMessageId?: number, hideGroupActionMessages?: boolean, showSmartReplies?: boolean, goToMessageId?: string, isAgentChat?: boolean): void;
+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[], errorHandler: (error: unknown, source?: string) => void, setMessageList: (messages: CometChat.BaseMessage[]) => void, setScrollListToBottom: (scrollToBottom: boolean) => void, smartReplyViewRef: MutableRefObject<any>, isOnBottomRef: MutableRefObject<boolean>, isFirstReloadRef: MutableRefObject<boolean>, subscribeToUIEvents: Function, showSmartRepliesRef: MutableRefObject<any>, addMessage: (message: CometChat.BaseMessage) => void, setDateHeader?: Function, parentMessageId?: number, hideGroupActionMessages?: boolean, showSmartReplies?: boolean, goToMessageId?: string, isAgentChat?: boolean, messageRepliedTo?: string): void;
 export { useCometChatMessageList };

package/dist/types/components/Extensions/Polls/CreatePolls.d.ts

@@ -20,6 +20,10 @@ interface CreatePollProps {
      * Optional.
      */
     ccCloseClicked?: () => void;
+    /**
+     * The message that is being replied to.
+    */
+    replyToMessage?: CometChat.BaseMessage | null;
     /**
      * Default number of answer options to display initially.
      * Optional, defaults to 3.

package/dist/types/components/Extensions/Polls/PollsExtensionDecorator.d.ts

@@ -14,6 +14,8 @@ export declare class PollsExtensionDecorator extends DataSourceDecorator {
     configuration?: PollsConfiguration;
     /** The data source used by this decorator. */
     newDataSource: DataSource;
+    /** The message that is being replied to. */
+    replyToMessage: CometChat.BaseMessage | undefined;
     /**
      * Constructs a PollsExtensionDecorator instance.
      * @param dataSource - The data source to decorate.

package/dist/types/components/Extensions/Stickers/StickersExtensionDecorator.d.ts

@@ -41,7 +41,7 @@ export declare class StickersExtensionDecorator extends DataSourceDecorator {
      * @param group - Optional group object.
      * @returns An array of auxiliary options.
      */
-    getStickerButton(id: ComposerId, user?: CometChat.User, group?: CometChat.Group): import("react/jsx-runtime").JSX.Element;
+    getStickerButton(id: ComposerId, user?: CometChat.User, group?: CometChat.Group, messageToReply?: CometChat.BaseMessage | null, closeReplyPreview?: () => void): import("react/jsx-runtime").JSX.Element;
     /**
      * Creates the sticker auxiliary button component.
      * @param id - A map containing relevant IDs.
@@ -50,12 +50,12 @@ export declare class StickersExtensionDecorator extends DataSourceDecorator {
      * @param group - Optional group object.
      * @returns The JSX element for the sticker auxiliary button.
      */
-    getStickerAuxiliaryButton: (id: ComposerId, user?: CometChat.User, group?: CometChat.Group) => import("react/jsx-runtime").JSX.Element;
+    getStickerAuxiliaryButton: (id: ComposerId, user?: CometChat.User, group?: CometChat.Group, messageToReply?: CometChat.BaseMessage | null, onReplyPreviewClose?: () => void) => import("react/jsx-runtime").JSX.Element;
     /**
      * Sends a sticker message.
      * @param event - The event object containing sticker details.
      */
-    sendSticker(event: any, closeSticker: Function, id: ComposerId): void;
+    sendSticker(event: any, closeSticker: Function, id: ComposerId, messageToReply?: CometChat.BaseMessage | null, onReplyPreviewClose?: () => void): void;
     /**
      * Sends a sticker message.
      * @param event - The event object containing sticker details.

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

@@ -6,6 +6,7 @@ import { Subject } from 'rxjs';
 export declare class CometChatMessageEvents {
     static ccMessageSent: Subject<IMessages>;
     static ccMessageEdited: Subject<IMessages>;
+    static ccReplyToMessage: Subject<IMessages>;
     static ccMessageTranslated: Subject<IMessages>;
     static ccMessageRead: Subject<CometChat.BaseMessage>;
     static ccMessageDeleted: Subject<CometChat.BaseMessage>;

package/dist/types/index.d.ts

@@ -95,6 +95,7 @@ export { CometChatDropDown } from './components/BaseComponents/CometChatDropDown
 export { CometChatDocumentBubble } from './components/BaseComponents/CometChatDocumentBubble/CometChatDocumentBubble';
 export { CometChatDate } from './components/BaseComponents/CometChatDate/CometChatDate';
 export { CometChatDeleteBubble } from './components/BaseComponents/CometChatDeleteBubble/CometChatDeleteBubble';
+export { CometChatMessagePreview } from './components/BaseComponents/CometChatMessagePreview/CometChatMessagePreview';
 export { CometChatReactionInfo } from './components/Reactions/CometChatReactionInfo/CometChatReactionInfo';
 export { CometChatReactionList } from './components/Reactions/CometChatReactionList/CometChatReactionList';
 export { CometChatReactions } from './components/Reactions/CometChatReactions/CometChatReactions';

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

@@ -34,6 +34,11 @@ declare class CometChatMessageTemplate {
      * @type {(message:CometChat.BaseMessage,alignment:MessageBubbleAlignment)=> Element | JSX.Element | null}
      */
     headerView: ((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element | JSX.Element | null) | null;
+    /**
+     * Custom component to customize the reply view section for each message bubble.
+     * @type {(message:CometChat.BaseMessage,alignment:MessageBubbleAlignment)=> Element | JSX.Element | null}
+     */
+    replyView: ((message: CometChat.BaseMessage, alignment?: MessageBubbleAlignment, onReplyViewClicked?: (messageToReply: CometChat.BaseMessage) => void, textFormatters?: CometChatTextFormatter[]) => Element | JSX.Element | null) | null;
     /**
      * Custom component to customize the footer section for each message bubble.
      * By default, it displays the reactions.

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

@@ -18,12 +18,15 @@ 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 getReplyView(message: CometChat.BaseMessage, alignment?: MessageBubbleAlignment, onReplyPreviewClick?: (messageToReply: CometChat.BaseMessage) => void, textFormatters?: CometChatTextFormatter[]): Element | JSX.Element | null;
     abstract getStatusInfoView(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, hideReceipts?: boolean, messageSentAtDateTimeFormat?: CalendarObject, showError?: boolean): 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;
     abstract getAudioMessageContentView(message: CometChat.MediaMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
     abstract getFileMessageContentView(message: CometChat.MediaMessage, alignment: MessageBubbleAlignment): Element | JSX.Element;
+    abstract getMessagePreviewSubtitle(message: CometChat.BaseMessage, textFormatters?: CometChatTextFormatter[], _alignment?: MessageBubbleAlignment): JSX.Element | null;
+    abstract getMessagePreviewTitle(message: CometChat.BaseMessage, _alignment?: MessageBubbleAlignment): JSX.Element | null;
     abstract getAgentAssistantMessageTemplate(additionalConfigurations?: Object | undefined): CometChatMessageTemplate;
     abstract getToolArgumentsMessageTemplate(additionalConfigurations?: Object | undefined): CometChatMessageTemplate;
     abstract getToolResultsMessageTemplate(additionalConfigurations?: Object | undefined): CometChatMessageTemplate;
@@ -41,7 +44,7 @@ export declare abstract class DataSource {
     abstract getAttachmentOptions(id: ComposerId, additionalConfigurations?: any): CometChatMessageComposerAction[];
     abstract getAllMessageTypes(): Array<string>;
     abstract getAllMessageCategories(additionalConfigurations?: Object | undefined): Array<string>;
-    abstract getStickerButton(id: ComposerId, user?: CometChat.User, group?: CometChat.Group): JSX.Element | undefined;
+    abstract getStickerButton(id: ComposerId, user?: CometChat.User, group?: CometChat.Group, messageToReply?: CometChat.BaseMessage | null, closeReplyPreview?: () => void): JSX.Element | undefined;
     abstract getId(): string;
     abstract getDeleteMessageBubble(messageObject: CometChat.BaseMessage, text?: string, alignment?: MessageBubbleAlignment): Element | JSX.Element;
     abstract getGroupActionBubble(message: CometChat.BaseMessage): Element | JSX.Element;