@cometchat/chat-uikit-react 6.3.1 → 6.3.3

package/dist/styles/CometChatAIAssistantChat.css

@@ -106,6 +106,19 @@
     width: auto;
 
 }
+
+.cometchat-ai-assistant-chat .cometchat-message-bubble__status-info-view-receipts-sent .cometchat-message-list__receipt {
+    background-color: var(--cometchat-icon-color-secondary);
+}
+
+.cometchat-ai-assistant-chat .cometchat-message-bubble__status-info-view-receipts-wait .cometchat-message-list__receipt {
+    background-color: var(--cometchat-icon-color-secondary);
+}
+
+.cometchat-ai-assistant-chat .cometchat-message-bubble__status-info-view-receipts-delivered .cometchat-message-list__receipt {
+    background-color: var(--cometchat-icon-color-secondary);
+}
+
 .cometchat-ai-assistant-chat .cometchat-message-bubble__status-info-view .cometchat-message-bubble__status-info-view-receipts-error {
     height: 12px;
     width: 12px;
@@ -399,6 +412,14 @@ background: var(--cometchat-error-color);
     background: var(--cometchat-icon-color-secondary);
 
 }
+.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing .cometchat-message-bubble__status-info-view{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing .cometchat-message-bubble__status-info-view .cometchat{
+    display: flex;
+}
 .cometchat-ai-assistant-chat__sidebar-overlay {
     position: absolute;
     top: 0;

package/dist/styles/CometChatAIAssistantMessageBubble.css

@@ -17,7 +17,7 @@
   margin-bottom: var(--cometchat-margin-2);
 }
 
-.cometchat-ai-assistant-message-bubble {
+.cometchat:has(> .cometchat-ai-assistant-message-bubble) {
   margin-top: calc(var(--cometchat-margin-1) * -1)
 }
 
@@ -40,10 +40,22 @@
 
 }
 
-.cometchat-ai-assistant-message-bubble li *{
+.cometchat-ai-assistant-message-bubble img,
+.cometchat-ai-assistant-message-bubble pre,
+.cometchat-ai-assistant-message-bubble canvas,
+.cometchat-ai-assistant-message-bubble svg,
+.cometchat-ai-assistant-message-bubble video,
+.cometchat-ai-assistant-message-bubble figure,
+.cometchat-ai-assistant-message-bubble table {
   vertical-align: top;
 }
 
+.cometchat-ai-assistant-message-bubble input[type="checkbox"] {
+  margin-right: var(--cometchat-margin-1);
+  position: relative;
+  top: 1px;
+}
+
 .cometchat-ai-assistant-message-bubble ol:not([class]),.cometchat-ai-assistant-message-bubble ul:not([class]) {
   padding-left: var(--cometchat-padding-5) !important;
   text-align: left !important;
@@ -192,17 +204,22 @@
   max-height: 300px;
   width: fit-content;
   border-radius: var(--cometchat-radius-2);
-  margin-block: var(--cometchat-margin-2) 0;
+  margin-top: var(--cometchat-margin-2);
 }
 
 .cometchat-ai-assistant-message-bubble__image-intersection-start, .cometchat-ai-assistant-message-bubble__image-intersection-end{
   display: none;
 }
 
-.cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__image-intersection-start:not(.cometchat-ai-assistant-message-bubble__image-intersection-end ~ .cometchat-ai-assistant-message-bubble__image-intersection-start) {
+.cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__image-intersection-start:not(.cometchat-ai-assistant-message-bubble__image-intersection-end ~ .cometchat-ai-assistant-message-bubble__image-intersection-start, input[type="checkbox"] ~ .cometchat-ai-assistant-message-bubble__image-intersection-start) {
   display: block;
   margin-top: -0.5em;
 }
+
+.cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__image-intersection-start:is(input[type="checkbox"] ~ .cometchat-ai-assistant-message-bubble__image-intersection-start) ~ img{
+  margin-top: var(--cometchat-margin-1);
+}
+
 .cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__image-intersection-end:not(:has(+ .cometchat-ai-assistant-message-bubble__image-intersection-start)) {
   display: block;
 }

package/dist/styles/CometChatSearch.css

@@ -740,7 +740,10 @@
 
 }
 
-
+.cometchat-search__messages-leading-view-link > img {
+  height: 32px;
+  width: 32px;
+}
 
 .cometchat-search__messages-leading-view-audio.cometchat-search__messages-leading-view {
   background-color: var(--cometchat-primary-color, #6852D6);

package/dist/styles/CometChatStreamMessageBubble.css

@@ -16,14 +16,13 @@
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  margin-top: var(--cometchat-margin-3);
   height: 20px;
   width: 20px;
   background: var(--cometchat-icon-color-secondary);
 
 }
 
-.cometchat-stream-message-bubble {
+.cometchat:has(> .cometchat-stream-message-bubble) {
   margin-top: calc(var(--cometchat-margin-1) * -1)
 }
 
@@ -49,10 +48,22 @@
 
 }
 
-.cometchat-stream-message-bubble li *{
+.cometchat-stream-message-bubble img,
+.cometchat-stream-message-bubble pre,
+.cometchat-stream-message-bubble canvas,
+.cometchat-stream-message-bubble svg,
+.cometchat-stream-message-bubble video,
+.cometchat-stream-message-bubble figure,
+.cometchat-stream-message-bubble table {
   vertical-align: top;
 }
 
+.cometchat-stream-message-bubble input[type="checkbox"] {
+  margin-right: var(--cometchat-margin-1);
+  position: relative;
+  top: 1px;
+}
+
 .cometchat-stream-message-bubble li:not([class]) {
   text-align: left !important;
 
@@ -227,7 +238,7 @@
   max-height: 300px;
   width: fit-content;
   border-radius: var(--cometchat-radius-2);
-  margin-block: var(--cometchat-margin-2) 0;
+  margin-top: var(--cometchat-margin-2);
 }
 
 .cometchat-stream-message-bubble > *:first-child *:first-child:not(:has(*)) ~ img{
@@ -238,10 +249,15 @@
   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) {
+.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, input[type="checkbox"] ~ .cometchat-stream-message-bubble__image-intersection-start) {
   display: block;
   margin-top: -0.5em;
 }
+
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-start:is(input[type="checkbox"] ~ .cometchat-stream-message-bubble__image-intersection-start) ~ img{
+  margin-top: var(--cometchat-margin-1);
+}
+
 .cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-end:not(:has(+ .cometchat-stream-message-bubble__image-intersection-start)) {
   display: block;
 }

package/dist/styles/components/CometChatAIAssistantChat.css

@@ -106,6 +106,19 @@
     width: auto;
 
 }
+
+.cometchat-ai-assistant-chat .cometchat-message-bubble__status-info-view-receipts-sent .cometchat-message-list__receipt {
+    background-color: var(--cometchat-icon-color-secondary);
+}
+
+.cometchat-ai-assistant-chat .cometchat-message-bubble__status-info-view-receipts-wait .cometchat-message-list__receipt {
+    background-color: var(--cometchat-icon-color-secondary);
+}
+
+.cometchat-ai-assistant-chat .cometchat-message-bubble__status-info-view-receipts-delivered .cometchat-message-list__receipt {
+    background-color: var(--cometchat-icon-color-secondary);
+}
+
 .cometchat-ai-assistant-chat .cometchat-message-bubble__status-info-view .cometchat-message-bubble__status-info-view-receipts-error {
     height: 12px;
     width: 12px;
@@ -399,6 +412,14 @@ background: var(--cometchat-error-color);
     background: var(--cometchat-icon-color-secondary);
 
 }
+.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing .cometchat-message-bubble__status-info-view{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing .cometchat-message-bubble__status-info-view .cometchat{
+    display: flex;
+}
 .cometchat-ai-assistant-chat__sidebar-overlay {
     position: absolute;
     top: 0;

package/dist/styles/components/CometChatAIAssistantMessageBubble.css

@@ -17,7 +17,7 @@
   margin-bottom: var(--cometchat-margin-2);
 }
 
-.cometchat-ai-assistant-message-bubble {
+.cometchat:has(> .cometchat-ai-assistant-message-bubble) {
   margin-top: calc(var(--cometchat-margin-1) * -1)
 }
 
@@ -40,10 +40,22 @@
 
 }
 
-.cometchat-ai-assistant-message-bubble li *{
+.cometchat-ai-assistant-message-bubble img,
+.cometchat-ai-assistant-message-bubble pre,
+.cometchat-ai-assistant-message-bubble canvas,
+.cometchat-ai-assistant-message-bubble svg,
+.cometchat-ai-assistant-message-bubble video,
+.cometchat-ai-assistant-message-bubble figure,
+.cometchat-ai-assistant-message-bubble table {
   vertical-align: top;
 }
 
+.cometchat-ai-assistant-message-bubble input[type="checkbox"] {
+  margin-right: var(--cometchat-margin-1);
+  position: relative;
+  top: 1px;
+}
+
 .cometchat-ai-assistant-message-bubble ol:not([class]),.cometchat-ai-assistant-message-bubble ul:not([class]) {
   padding-left: var(--cometchat-padding-5) !important;
   text-align: left !important;
@@ -192,17 +204,22 @@
   max-height: 300px;
   width: fit-content;
   border-radius: var(--cometchat-radius-2);
-  margin-block: var(--cometchat-margin-2) 0;
+  margin-top: var(--cometchat-margin-2);
 }
 
 .cometchat-ai-assistant-message-bubble__image-intersection-start, .cometchat-ai-assistant-message-bubble__image-intersection-end{
   display: none;
 }
 
-.cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__image-intersection-start:not(.cometchat-ai-assistant-message-bubble__image-intersection-end ~ .cometchat-ai-assistant-message-bubble__image-intersection-start) {
+.cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__image-intersection-start:not(.cometchat-ai-assistant-message-bubble__image-intersection-end ~ .cometchat-ai-assistant-message-bubble__image-intersection-start, input[type="checkbox"] ~ .cometchat-ai-assistant-message-bubble__image-intersection-start) {
   display: block;
   margin-top: -0.5em;
 }
+
+.cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__image-intersection-start:is(input[type="checkbox"] ~ .cometchat-ai-assistant-message-bubble__image-intersection-start) ~ img{
+  margin-top: var(--cometchat-margin-1);
+}
+
 .cometchat-ai-assistant-message-bubble .cometchat-ai-assistant-message-bubble__image-intersection-end:not(:has(+ .cometchat-ai-assistant-message-bubble__image-intersection-start)) {
   display: block;
 }

package/dist/styles/components/CometChatSearch.css

@@ -740,7 +740,10 @@
 
 }
 
-
+.cometchat-search__messages-leading-view-link > img {
+  height: 32px;
+  width: 32px;
+}
 
 .cometchat-search__messages-leading-view-audio.cometchat-search__messages-leading-view {
   background-color: var(--cometchat-primary-color, #6852D6);

package/dist/styles/components/CometChatStreamMessageBubble.css

@@ -16,14 +16,13 @@
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  margin-top: var(--cometchat-margin-3);
   height: 20px;
   width: 20px;
   background: var(--cometchat-icon-color-secondary);
 
 }
 
-.cometchat-stream-message-bubble {
+.cometchat:has(> .cometchat-stream-message-bubble) {
   margin-top: calc(var(--cometchat-margin-1) * -1)
 }
 
@@ -49,10 +48,22 @@
 
 }
 
-.cometchat-stream-message-bubble li *{
+.cometchat-stream-message-bubble img,
+.cometchat-stream-message-bubble pre,
+.cometchat-stream-message-bubble canvas,
+.cometchat-stream-message-bubble svg,
+.cometchat-stream-message-bubble video,
+.cometchat-stream-message-bubble figure,
+.cometchat-stream-message-bubble table {
   vertical-align: top;
 }
 
+.cometchat-stream-message-bubble input[type="checkbox"] {
+  margin-right: var(--cometchat-margin-1);
+  position: relative;
+  top: 1px;
+}
+
 .cometchat-stream-message-bubble li:not([class]) {
   text-align: left !important;
 
@@ -227,7 +238,7 @@
   max-height: 300px;
   width: fit-content;
   border-radius: var(--cometchat-radius-2);
-  margin-block: var(--cometchat-margin-2) 0;
+  margin-top: var(--cometchat-margin-2);
 }
 
 .cometchat-stream-message-bubble > *:first-child *:first-child:not(:has(*)) ~ img{
@@ -238,10 +249,15 @@
   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) {
+.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, input[type="checkbox"] ~ .cometchat-stream-message-bubble__image-intersection-start) {
   display: block;
   margin-top: -0.5em;
 }
+
+.cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-start:is(input[type="checkbox"] ~ .cometchat-stream-message-bubble__image-intersection-start) ~ img{
+  margin-top: var(--cometchat-margin-1);
+}
+
 .cometchat-stream-message-bubble .cometchat-stream-message-bubble__image-intersection-end:not(:has(+ .cometchat-stream-message-bubble__image-intersection-start)) {
   display: block;
 }

package/dist/types/CometChatUIKit/CometChatUIKitUtility.d.ts

@@ -61,13 +61,11 @@ export declare class CometChatUIKitUtility {
      */
     static checkMessageForExtensionsData: (message: CometChat.BaseMessage | null, extensionKey: string) => (object & MessageExtensionType) | undefined;
     /**
-     * Sanitizes an HTML string by escaping tags not matching the whitelist.
-     *
-     * @param htmlString - The HTML string to sanitize.
-     * @param whitelistRegExes - A list of regular expressions to match allowed tags.
-     * @returns The sanitized HTML string.
+     * Process and sanitize text to escape dangerous HTML while preserving mention formatting
+     * @param text The text string that may contain HTML and mentions
+     * @returns Sanitized string with dangerous HTML escaped but mentions preserved
      */
-    static sanitizeHtml(htmlString: string, whitelistRegExes: RegExp[]): string;
+    static sanitizeText(text: string): string;
     static convertBlobToWav: (audioBlob: {
         arrayBuffer: () => any;
     }) => Promise<{

package/dist/types/CometChatUIKit/UIKitSettings.d.ts

@@ -74,6 +74,11 @@ export declare class UIKitSettings {
    * @type {ExtensionsDataSource}
    */
     readonly callingExtension?: CallingExtension;
+    /**
+     * Storage mode for persisting data.
+     * @type {CometChat.StorageMode}
+     */
+    readonly storageMode: CometChat.StorageMode;
     /**
      * Private constructor to initialize the settings using the provided builder.
      * @param {UIKitSettingsBuilder} builder - The builder instance containing the settings configuration.
@@ -135,6 +140,11 @@ export declare class UIKitSettings {
    * @returns {ExtensionsDataSource[]}
    */
     getCallsExtension(): ExtensionsDataSource;
+    /**
+     * Retrieves the storage mode.
+     * @returns {CometChat.StorageMode} The storage mode.
+     */
+    getStorageMode(): CometChat.StorageMode;
 }
 export declare class UIKitSettingsBuilder {
     /**
@@ -203,6 +213,11 @@ export declare class UIKitSettingsBuilder {
      * @type {string}
      */
     clientHost?: string;
+    /**
+     * Storage mode for persisting data.
+     * @type {CometChat.StorageMode}
+     */
+    storageMode?: CometChat.StorageMode;
     /**
     * Builds and returns an instance of UIKitSettings.
     * @returns {UIKitSettings} A new instance of UIKitSettings with the specified configuration.
@@ -279,4 +294,10 @@ export declare class UIKitSettingsBuilder {
    * @returns {UIKitSettingsBuilder} The builder instance.
    */
     setCallsExtension(callingExtension: CallingExtension): UIKitSettingsBuilder;
+    /**
+     * Sets the storage mode.
+     * @param {CometChat.StorageMode} storageMode - The storage mode.
+     * @returns {UIKitSettingsBuilder} The builder instance.
+    */
+    setStorageMode(storageMode: CometChat.StorageMode): UIKitSettingsBuilder;
 }

package/dist/types/components/BaseComponents/CometChatTextBubble/useCometChatTextBubble.d.ts

@@ -2,5 +2,5 @@ import { CometChatTextFormatter } from "../../../formatters/CometChatFormatters/
 export declare const useCometChatTextBubble: (props: {
     textFormatters: Array<CometChatTextFormatter>;
 }) => {
-    pasteHtml: (textElement: HTMLElement, text: string) => void;
+    appendTextInHtml: (textElement: HTMLElement, text: string) => void;
 };

package/dist/types/constants/CometChatUIKitConstants.d.ts

@@ -157,6 +157,11 @@ export declare class CometChatUIKitConstants {
         changeScope: "changeScope";
         groupMembers: "groupMembers";
     }>;
+    static mimeTypes: Readonly<{
+        audio: "audio/*, .aac, .aif, .aiff, .caf, .mp3, .mp4, .wav, .m4a, .wma, .flac, .alac, .oga, .ra, .ram, .mid, .midi, .mka, .opus, .ac3, .amr, .ape, .dts, .wv, .tta, .pcm, .snd, .au, .cda, .vox, .m4b, .m3u, .pls, .ogg";
+        video: "video/*, .mov, .mp4, .m4v, .avi, .mpg, .mpeg, .m2ts, .mts, .3gp, .3g2, .flv, .wmv, .vob, .ts, .webm, .f4v, .f4a, .f4b, .swf, .rm, .rmvb, .divx, .xvid, .mxf, .asf, .amv, .smv, .avchd, .qt";
+        image: "image/*, .heic, .heif, .jpg, .jpeg, .png, .gif, .bmp, .tiff, .tif, .psd, .svg, .ico, .raw, .dng, .eps, .webp, .jfif, .jp2, .jpf, .jpx, .jpm, .mj2, .hdr, .exr, .pbm, .pgm, .ppm, .pnm, .tga, .dds, .svgz, .djvu, .ai, .cdr";
+    }>;
     static streamMessageTypes: Readonly<{
         run_started: string;
         text_message_start: string;

package/dist/types/services/stream-message.service.d.ts

@@ -42,3 +42,4 @@ export declare const setAIAssistantTools: (actions: CometChatAIAssistantTools) =
  * Unsubscribes from the message processor and resets accumulated content
  */
 export declare const stopStreamingMessage: () => void;
+export declare const emitStreamingState: (state: boolean) => void;

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

@@ -17,7 +17,6 @@ export declare const currentAudioPlayer: {
  * Function to stop current media playback.
  */
 export declare function closeCurrentMediaPlayer(pauseAudio?: boolean): void;
-export declare function sanitizeHtml(htmlString: string, whitelistRegExes: RegExp[]): string;
 export declare function isMessageSentByMe(message: CometChat.BaseMessage, loggedInUser: CometChat.User): boolean;
 /**
  * Function to check if the current browser is safari.
@@ -62,10 +61,12 @@ export declare const useDebouncedCallback: (callback: () => void, delay: number)
     cleanup: () => void;
 };
 export declare function createMessageCopy(msg: CometChat.AIAssistantBaseEvent, user: CometChat.User, category?: string, type?: string): CometChat.BaseMessage;
+export declare function createMessageCopyFromBaseMessage(msg: CometChat.BaseMessage, user: CometChat.User | undefined): 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
+ * @function shouldShowCustomMimeTypes
+ * @description Returns true if the device is running either iOS (iPhone, iPad, iPod) or macOS.
+ * @returns {boolean} True if the device is an Apple device (iOS or macOS), false otherwise.
  */
-export declare const sanitizeToSpanOnly: (htmlString: string, regexPatterns: RegExp[][]) => string;
+export declare const shouldShowCustomMimeTypes: () => boolean;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cometchat/chat-uikit-react",
-  "version": "6.3.1",
+  "version": "6.3.3",
   "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.1.2",
+    "@cometchat/chat-sdk-javascript": "^4.1.3",
     "@rollup/plugin-json": "^6.1.0",
     "rxjs": "^7.8.1",
     "react-markdown": "^10.1.0",