@cometchat/chat-uikit-react 6.2.0 → 6.2.1

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/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.1",
   "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",