@cometchat/chat-uikit-react 6.2.0 → 6.2.2

package/dist/styles/components/CometChatAIAssistantMessageBubble.css

@@ -54,27 +54,12 @@
 
 .cometchat-ai-assistant-message-bubble__code-block {
   max-height: 300px;
-  overflow: scroll;
+  overflow: auto;
   border: 1px solid var(--cometchat-border-color-default);
+  width: 100%;
 }
 
-@media (min-width: 620px) and (max-width: 780px) {
-  .cometchat-ai-assistant-message-bubble__code-block {
-    max-width: 600px;
-  }
-}
-
-@media (min-width: 480px) and (max-width: 619px) {
-  .cometchat-ai-assistant-message-bubble__code-block {
-    max-width: 400px;
-  }
-}
 
-@media (min-width: 320px) and (max-width: 479px) {
-  .cometchat-ai-assistant-message-bubble__code-block {
-    max-width: 320px;
-  }
-}
 
 .cometchat-ai-assistant-message-bubble *:not(pre *) {
   color: var(--cometchat-text-color-primary);
@@ -83,4 +68,51 @@
 }
 .cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__code-block,.cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__code-block *{
   font-size: 14px;
+}
+
+.cometchat-ai-assistant-message-bubble__code-block::-webkit-scrollbar {
+  width: 0px;
+  height: 8px;
+  background: transparent;
+}
+
+.cometchat-ai-assistant-message-bubble__code-block::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.cometchat-ai-assistant-message-bubble__code-block::-webkit-scrollbar-thumb {
+  background: var(--cometchat-icon-color-secondary);
+  border-radius: var(--cometchat-radius-2);
+}
+
+.cometchat-ai-assistant-message-bubble table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+  display: block;
+  overflow-x: auto;
+}
+
+.cometchat-ai-assistant-message-bubble th,
+.cometchat-ai-assistant-message-bubble td {
+  padding: var(--cometchat-padding-2);
+  border: 1px solid var(--cometchat-border-color-light);
+  text-align: left;
+  word-break: break-word; /* prevents text overflow in cells */
+  min-width: 100px;
+}
+
+.cometchat-ai-assistant-message-bubble table::-webkit-scrollbar {
+  width: 0px;
+  height: 8px;
+  background: transparent;
+}
+
+.cometchat-ai-assistant-message-bubble table::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.cometchat-ai-assistant-message-bubble table::-webkit-scrollbar-thumb {
+  background: var(--cometchat-icon-color-secondary);
+  border-radius: var(--cometchat-radius-2);
 }

package/dist/styles/components/CometChatConversations.css

@@ -10,7 +10,10 @@
   background: var(--cometchat-background-color-01, #FFF);
   position: relative;
 }
-
+.cometchat-conversations .cometchat-conversations-header{
+min-height: 64px;
+box-sizing: border-box;
+}
 .cometchat-conversations .cometchat-list__body>div:not([class]):first-child {
   display: none;
 }
@@ -56,6 +59,22 @@
   mask-size: contain;
 }
 
+
+.cometchat-conversations__subtitle-receipts-wait{
+  -webkit-mask: url("../../assets/status_sending.svg") center center no-repeat;
+  mask: url("../../assets/status_sending.svg") center center no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+.cometchat-conversations__subtitle-receipts-error{
+  -webkit-mask: url("../../assets/error_icon.svg") center center no-repeat;
+  mask: url("../../assets/error_icon.svg") center center no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: var(--cometchat-error-color);
+}
+
 .cometchat-conversations__subtitle-receipts-delivered{
   -webkit-mask: url("../../assets/conversations_delivered.svg") center center no-repeat;
   mask: url("../../assets/conversations_delivered.svg") center center no-repeat;

package/dist/styles/components/CometChatMessageList.css

@@ -144,31 +144,32 @@
     padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px) var(--cometchat-padding-2, 8px);
     ;
 }
-.cometchat-fullscreen-viewer .cometchat-fullscreen-viewer__body-image{
-   max-width: 100%;
-   max-height: 84vh;
-   object-fit: contain;
+.cometchat-fullscreen-viewer .cometchat-fullscreen-viewer__body-image {
+    max-width: 100%;
+    max-height: 84vh;
+    object-fit: contain;
 }
 
 .cometchat-message-bubble__audio-call .cometchat-call-bubble .cometchat-call-bubble__body {
     padding: 0;
 }
-.cometchat-message-bubble__thread-view-replies .cometchat-button{
+.cometchat-message-bubble__thread-view-replies .cometchat-button {
     align-items: flex-end;
-    
+
 }
-.cometchat-reactions-info-wrapper > .cometchat{
-    width:fit-content;
+.cometchat-reactions-info-wrapper>.cometchat {
+    width: fit-content;
 }
-.cometchat-message-bubble__thread-view-replies .cometchat-button .cometchat-button__text{
+.cometchat-message-bubble__thread-view-replies .cometchat-button .cometchat-button__text {
     margin-bottom: -2px;
 }
-.cometchat-message-bubble__body-footer-view .cometchat-reactions  .cometchat{
+.cometchat-message-bubble__body-footer-view .cometchat-reactions .cometchat {
     width: fit-content;
 }
-.cometchat-reactions  .cometchat-popover,.cometchat-reactions  .cometchat-popover__button{
-width: fit-content;
+.cometchat-reactions .cometchat-popover, .cometchat-reactions .cometchat-popover__button{
+    width: fit-content;
 }
+
 /* Date header inside message list */
 .cometchat-message-list__date-header {
     position: absolute;
@@ -416,6 +417,20 @@ width: fit-content;
 
 }
 
+.cometchat-message-list__bubble-moderation-disapproved .cometchat-message-bubble__body {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+
+.cometchat-message-list__bubble-moderation-disapproved .cometchat-message-bubble__body-content-view .cometchat-video-bubble{
+    min-width: 240px;
+}
+
+.cometchat-message-list__bubble-moderation-disapproved .cometchat-message-bubble__body-content-view .cometchat-image-bubble{
+    min-width: 240px;
+}
+
 /* Status view for "delivered" receipt inside message bubble */
 .cometchat-message-bubble__status-info-view-receipts-delivered .cometchat-message-list__receipt {
     -webkit-mask: url("../../assets/status_delivered.svg") center center no-repeat;
@@ -429,7 +444,7 @@ width: fit-content;
     -webkit-mask: url("../../assets/status_read.svg") center center no-repeat;
     -webkit-mask-size: contain;
     background: var(--cometchat-message-seen-color,#56E8A7);
-    
+
 
 }
 
@@ -665,7 +680,7 @@ width: fit-content;
 
 }
 
- /**
+/**
  * Setting transparent background and gap for sticker message bubble
  */
 .cometchat-message-bubble__body-wrapper .cometchat-message-bubble__sticker-message {
@@ -709,7 +724,7 @@ width: fit-content;
 .cometchat-message-information__popup-wrapper {
     display: flex;
     position: fixed;
-    z-index: 2;
+    z-index: 3;
     left: 0;
     top: 0;
     width: 100%;

package/dist/styles/components/CometChatModerationView.css

@@ -0,0 +1,25 @@
+/* Bottom view for "blocked" messages inside message bubble */
+.cometchat-moderation-status__icon{
+    min-width: 16px;
+    min-height: 16px;
+    -webkit-mask: url("../../assets/message_blocked.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    background-color: var(--cometchat-error-color);
+    display: inline-block;
+}
+
+.cometchat-moderation-status {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    background-color: var(--cometchat-error-color-100);
+    padding: var(--cometchat-padding-1) var(--cometchat-padding-2);
+    gap: var(--cometchat-spacing-1, 4px);
+    border-radius: 0 0 var(--cometchat-radius-3, 12px) var(--cometchat-radius-3, 12px);
+}
+
+.cometchat-moderation-status .cometchat-moderation-status__message {
+    color: var(--cometchat-error-color, #F44649);
+    text-align: left;
+    font: var(--cometchat-font-body-regular);
+}

package/dist/styles/components/CometChatSearch.css

@@ -231,6 +231,12 @@
   -webkit-mask-size: contain;
   mask-size: contain;
 }
+.cometchat-search__conversations-subtitle-receipts-wait{
+  -webkit-mask: url("../../assets/status_sending.svg") center center no-repeat;
+  mask: url("../../assets/status_sending.svg") center center no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
 
 .cometchat-search__conversations-subtitle-receipts-delivered {
   -webkit-mask: url("../../assets/conversations_delivered.svg") center center no-repeat;
@@ -239,6 +245,13 @@
   mask-size: contain;
 }
 
+.cometchat-search__conversations-subtitle-receipts-error{
+  -webkit-mask: url("../../assets/error_icon.svg") center center no-repeat;
+  mask: url("../../assets/error_icon.svg") center center no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: var(--cometchat-error-color);
+}
 
 .cometchat-search__conversations-subtitle-receipts-read {
   -webkit-mask: url("../../assets/conversations_read.svg") center center no-repeat;

package/dist/styles/components/CometChatStreamMessageBubble.css

@@ -64,28 +64,12 @@
 
 }
 
-.cometchat-stream-message-bubble pre>div {
+.cometchat-stream-message-bubble__code-block {
   max-height: 300px;
-  overflow: scroll;
+  overflow: auto;
   border: 1px solid var(--cometchat-border-color-default);
-}
+  width: 100%;
 
-@media (min-width: 620px) and (max-width: 780px) {
-  .cometchat-stream-message-bubble pre>div {
-    /* max-width: 600px; */
-  }
-}
-
-@media (min-width: 480px) and (max-width: 619px) {
-  .cometchat-stream-message-bubble pre>div {
-    /* max-width: 400px; */
-  }
-}
-
-@media (min-width: 320px) and (max-width: 479px) {
-  .cometchat-stream-message-bubble pre>div {
-    /* max-width: 300px; */
-  }
 }
 
 .cometchat-stream-message-bubble *:not(pre *) {
@@ -142,7 +126,52 @@
   border-radius: 0px;
   color: var(--cometchat-text-color-secondary);
 }
+.cometchat-stream-message-bubble__code-block::-webkit-scrollbar {
+  width: 0px;
+  height: 8px;
+  background: transparent;
+}
+
+.cometchat-stream-message-bubble__code-block::-webkit-scrollbar-track {
+  background: transparent;
+}
 
+.cometchat-stream-message-bubble__code-block::-webkit-scrollbar-thumb {
+  background: var(--cometchat-icon-color-secondary);
+  border-radius: 4px;
+}
+
+.cometchat-stream-message-bubble table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+  display: block;
+  overflow-x: auto;
+}
+
+.cometchat-stream-message-bubble th,
+.cometchat-stream-message-bubble td {
+  padding: var(--cometchat-padding-2);
+  border: 1px solid var(--cometchat-border-color-light);
+  text-align: left;
+  word-break: break-word; /* prevents text overflow in cells */
+  min-width: 100px;
+}
+
+.cometchat-stream-message-bubble table::-webkit-scrollbar {
+  width: 0px;
+  height: 8px;
+  background: transparent;
+}
+
+.cometchat-stream-message-bubble table::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.cometchat-stream-message-bubble table::-webkit-scrollbar-thumb {
+  background: var(--cometchat-icon-color-secondary);
+  border-radius: var(--cometchat-radius-2);
+}
 @keyframes shimmer {
   0% {
     left: -60%;

package/dist/styles/components/index.css

@@ -55,6 +55,7 @@
 @import url('./CometChatThreadHeader.css');
 @import url('./CometChatToast.css');
 @import url('./CometChatSearch.css');
+@import url('./CometChatModerationView.css');
 @import url('./CometChatAIAssistantChat.css');
 @import url('./CometChatAIAssistantMessageBubble.css');
 @import url('./CometChatStreamMessageBubble.css');

package/dist/styles/index.css

@@ -55,6 +55,7 @@
 @import url('./CometChatThreadHeader.css');
 @import url('./CometChatToast.css');
 @import url('./CometChatSearch.css');
+@import url('./CometChatModerationView.css');
 @import url('./CometChatAIAssistantChat.css');
 @import url('./CometChatAIAssistantMessageBubble.css');
 @import url('./CometChatStreamMessageBubble.css');

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

@@ -13,6 +13,7 @@ interface MessageBubbleProps {
     threadView?: JSX.Element | null;
     footerView?: JSX.Element | null;
     statusInfoView?: JSX.Element | null;
+    includeBottomViewHeight?: boolean;
     options: (CometChatActionsIcon | CometChatActionsView)[];
     alignment: MessageBubbleAlignment;
     topMenuSize?: number;

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

@@ -0,0 +1,2 @@
+declare const CometChatModerationView: () => import("react/jsx-runtime").JSX.Element;
+export { CometChatModerationView };

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

@@ -19,6 +19,10 @@ interface CometChatAIAssistantChatHistoryProps {
    * Callback function triggered when clicked on a message
    */
     onMessageClicked?: ((message: CometChat.BaseMessage) => void) | undefined;
+    /**
+   * Callback function triggered when clicked on new chat button
+   */
+    onNewChatClicked?: ((id?: number) => void) | undefined;
 }
 declare const CometChatAIAssistantChatHistory: (props: CometChatAIAssistantChatHistoryProps) => import("react/jsx-runtime").JSX.Element;
 export { CometChatAIAssistantChatHistory };

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

@@ -9,6 +9,7 @@ type Args = {
     mySetAddToMsgInputText: (text: string) => void;
     errorHandler: (error: unknown, source?: string) => void;
     pasteHtmlAtCaret: (text: string) => void;
+    renderSanitizedHtml: (text: string) => void;
     textFormatters: Array<CometChatTextFormatter>;
     disableMentions: boolean;
     textFormatterArray: Array<CometChatTextFormatter>;

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

@@ -27,6 +27,11 @@ interface MessageListProps {
      * @default false
      */
     hideStickyDate?: boolean;
+    /**
+     * Hides the visibility of moderation status in the message list.
+     * @default false
+     */
+    hideModerationView?: boolean;
     /**
      * Hides the visibility of receipts in the message list.
      * @default false
@@ -140,10 +145,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.
@@ -199,20 +204,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.
@@ -221,9 +226,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/constants/CometChatUIKitConstants.d.ts

@@ -7,6 +7,12 @@ export declare class CometChatUIKitConstants {
         interactive: string;
         agentic: import("@cometchat/chat-sdk-javascript").MessageCategory.AGENTIC;
     }>;
+    static moderationStatus: Readonly<{
+        pending: import("@cometchat/chat-sdk-javascript").ModerationStatus.PENDING;
+        approved: import("@cometchat/chat-sdk-javascript").ModerationStatus.APPROVED;
+        disapproved: import("@cometchat/chat-sdk-javascript").ModerationStatus.DISAPPROVED;
+        unmoderated: import("@cometchat/chat-sdk-javascript").ModerationStatus.UNMODERATED;
+    }>;
     static MessageTypes: Readonly<{
         text: string;
         file: string;

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

@@ -19,6 +19,7 @@ export declare class CometChatMessageEvents {
     * message events wrapper of SDK listeners (e.g., media message, typing       indicator, read receipts, etc.)
     */
     static onTextMessageReceived: Subject<CometChat.TextMessage>;
+    static onMessageModerated: Subject<CometChat.BaseMessage>;
     static onMediaMessageReceived: Subject<CometChat.MediaMessage>;
     static onCustomMessageReceived: Subject<CometChat.CustomMessage>;
     static onTypingStarted: Subject<CometChat.TypingIndicator>;

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

@@ -13,5 +13,5 @@ export declare class MessageReceiptUtils {
      * @param {CometChat.BaseMessage} messageObject - The message object for which to get the receipt status.
      * @returns {Receipts} - The receipt status icon.
      */
-    static getReceiptStatus: (messageObject: CometChat.BaseMessage) => Receipts;
+    static getReceiptStatus: (message: CometChat.BaseMessage) => Receipts;
 }

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

@@ -23,6 +23,12 @@ export declare class MessageUtils {
      * @returns {object | null} - The content view for the message, or null if not found.
      */
     getStatusInfoView(message: CometChat.BaseMessage, template: CometChatMessageTemplate, alignment?: MessageBubbleAlignment, messageSentAtDateTimeFormat?: CalendarObject, hideReceipts?: boolean): any;
+    /**
+     * Retrieves the bottom view for moderated messages
+     *
+     * @returns {JSX.Element} The default view for moderated messages.
+     */
+    getModeratedMessageBottomView(): JSX.Element;
     /**
      * Retrieves the bubble wrapper for a message based on the provided template.
      *

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

@@ -1,5 +1,6 @@
 import WaveSurfer from "../components/BaseComponents/CometChatAudioBubble/src/wavesurfer";
 import { CalendarObject } from "./CalendarObject";
+import { CometChatTextFormatter } from "../formatters";
 interface MediaPlayer {
     video?: HTMLVideoElement | null;
     mediaRecorder?: MediaRecorder | null;
@@ -52,6 +53,7 @@ export declare function sanitizeCalendarObject(calendarObject?: CalendarObject):
 };
 export declare function fireClickEvent(): void;
 export declare const decodeHTML: (input: string) => string;
+export declare const sanitizeHtmlStringToFragment: (html: string, textFormatterArray?: CometChatTextFormatter[]) => DocumentFragment;
 /**
 * Custom React hook for creating debounced callbacks with automatic cleanup.
 */
@@ -61,4 +63,9 @@ export declare const useDebouncedCallback: (callback: () => void, delay: number)
 };
 export declare function createMessageCopy(msg: CometChat.AIAssistantBaseEvent, user: CometChat.User, category?: string, type?: string): CometChat.BaseMessage;
 export declare function isDarkMode(): boolean;
+/**
+ * Sanitizes HTML content to only allow span tags while keeping everything else as plain text
+ * Also removes any script or executable content
+ */
+export declare const sanitizeToSpanOnly: (htmlString: string, regexPatterns: RegExp[][]) => string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cometchat/chat-uikit-react",
-  "version": "6.2.0",
+  "version": "6.2.2",
   "description": "Ready-to-use Chat UI Components for React(Javascript/Web)",
   "author": "CometChat",
   "exports": {
@@ -8,12 +8,13 @@
     "./css-variables.css": "./dist/styles/css-variables.css"
   },
   "dependencies": {
-    "@cometchat/chat-sdk-javascript": "^4.1.0",
+    "@cometchat/chat-sdk-javascript": "^4.1.1",
     "@rollup/plugin-json": "^6.1.0",
     "rxjs": "^7.8.1",
     "react-markdown": "^10.1.0",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "react-syntax-highlighter": "^15.6.1"
+    "react-syntax-highlighter": "^15.6.1",
+    "remark-gfm": "^4.0.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",