@cometchat/chat-uikit-react 6.3.12 → 6.4.0

package/dist/styles/components/CometChatTextBubble.css

@@ -16,12 +16,33 @@
     word-break: break-word;
     text-align: left;
     white-space: pre-line;
-    overflow: auto;
+    overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    overflow: hidden;
     padding-top:var(--cometchat-padding-1);
+}
+
+/* When text contains block-level elements like lists or blockquotes,
+   switch from -webkit-box to block display so list markers render properly.
+   Use max-height for truncation since -webkit-line-clamp doesn't work with display: block */
+.cometchat-text-bubble__body-text:has(ol),
+.cometchat-text-bubble__body-text:has(ul),
+.cometchat-text-bubble__body-text:has(blockquote),
+.cometchat-text-bubble__body-text:has(pre) {
+    display: block;
+    overflow: hidden;
+    white-space: normal;
+    /* 4 lines * line-height (~22px for body-regular) = ~88px */
+    max-height: 88px;
+}
 
+/* When expanded, remove max-height restriction for block-level content */
+.cometchat-text-bubble__body-text.cometchat-text-bubble__body-text--expanded:has(ol),
+.cometchat-text-bubble__body-text.cometchat-text-bubble__body-text--expanded:has(ul),
+.cometchat-text-bubble__body-text.cometchat-text-bubble__body-text--expanded:has(blockquote),
+.cometchat-text-bubble__body-text.cometchat-text-bubble__body-text--expanded:has(pre) {
+    max-height: none;
+    overflow: visible;
 }
 
 /* Incoming text bubble specific styles */
@@ -94,4 +115,247 @@
     .cometchat-text-bubble {
         max-width: 280px;
     }
-}
+}
+
+/* Rich Text Formatting Styles */
+
+/* Bold */
+.cometchat-text-bubble__body-text b,
+.cometchat-text-bubble__body-text strong {
+    font-weight: var(--cometchat-font-weight-bold, 700);
+}
+
+/* Italic */
+.cometchat-text-bubble__body-text i,
+.cometchat-text-bubble__body-text em {
+    font-style: italic;
+}
+
+/* Strikethrough */
+.cometchat-text-bubble__body-text s,
+.cometchat-text-bubble__body-text strike,
+.cometchat-text-bubble__body-text del {
+    text-decoration: line-through;
+}
+
+/* Underline */
+.cometchat-text-bubble__body-text u {
+    text-decoration: underline;
+}
+
+/* Inline code */
+.cometchat-text-bubble__body-text code {
+    font-family: 'Roboto Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+    background: var(--cometchat-background-color-03);
+    color: var(--cometchat-text-color-highlight);
+    padding: 0 var(--cometchat-padding);
+    border-radius: var(--cometchat-radius);
+    border: 1px solid var(--cometchat-border-color-default);
+    white-space: pre-wrap;
+    word-break: break-word;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Code color for incoming messages */
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text code {
+    color: var(--cometchat-text-color-highlight);
+    border-radius: var(--cometchat-radius);
+    border: 1px solid var(--cometchat-border-color-dark);
+    background: var(--cometchat-background-color-03);
+    font-family: 'Roboto Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+    padding: 0 var(--cometchat-padding);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Code color for outgoing messages */
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text code {
+    color: var(--cometchat-static-white);
+    background: rgba(255, 255, 255, 0.20);
+    border: 1px solid rgba(245, 245, 245, 0.10);
+    border-radius: var(--cometchat-radius);
+    padding: 0 var(--cometchat-padding);
+    font-family: 'Roboto Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+}
+
+/* Code block */
+.cometchat-text-bubble__body-text pre {
+    display: block;
+    font-family: 'Roboto Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+    background: var(--cometchat-background-color-02);
+    border: 1px solid var(--cometchat-border-color-light);
+    border-radius: var(--cometchat-radius-2, 8px);
+    padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
+    margin: 0;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-x: auto;
+}
+
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text pre {
+    background: rgba(255, 255, 255, 0.10);
+    border: none;
+    border-radius: var(--cometchat-radius-2, 8px);
+    color: var(--cometchat-static-white);
+}
+
+.cometchat-text-bubble__body-text pre code,
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text pre code,
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text pre code {
+    background: transparent;
+    color: inherit;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    display: inline;
+    font-family: inherit !important;
+}
+
+/* Blockquote */
+.cometchat-text-bubble__body-text blockquote {
+    display: block;
+    border-left: 3px solid var(--cometchat-border-color-default);
+    padding: var(--cometchat-padding-2);
+    border-radius: var(--cometchat-radius-1);
+    margin: 0;
+    font-style: normal;
+    min-width: 100px;
+}
+
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text blockquote {
+    color: var(--cometchat-text-color-secondary);
+    background: var(--cometchat-neutral-color-400);
+    border-left-color: var(--cometchat-primary-color);
+}
+
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text blockquote {
+    color: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.10);
+    border-left-color: var(--cometchat-static-white);
+}
+
+/* Links */
+.cometchat-text-bubble__body-text a {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text a {
+    color: var(--cometchat-primary-color, #3399ff);
+}
+
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text a {
+    color: var(--cometchat-static-white);
+}
+
+.cometchat-text-bubble__body-text a:hover {
+    text-decoration: underline;
+    opacity: 0.8;
+}
+
+/* List items */
+.cometchat-text-bubble__body-text li {
+    display: list-item;
+    margin: 0;
+    padding: 0;
+    white-space: normal;
+}
+
+.cometchat-text-bubble__body-text ol,
+.cometchat-text-bubble__body-text ul {
+    margin: 0;
+    padding: 0;
+    padding-left: var(--cometchat-padding-3, 12px);
+    white-space: normal;
+}
+
+/* Nested list styling progression */
+.cometchat-text-bubble__body-text ol { list-style-type: decimal; }
+.cometchat-text-bubble__body-text ol ol { list-style-type: lower-alpha; }
+.cometchat-text-bubble__body-text ol ol ol { list-style-type: lower-roman; }
+.cometchat-text-bubble__body-text ul { list-style-type: disc; }
+.cometchat-text-bubble__body-text ul ul { list-style-type: circle; }
+.cometchat-text-bubble__body-text ul ul ul { list-style-type: square; }
+.cometchat-text-bubble__body-text li > ol,
+.cometchat-text-bubble__body-text li > ul {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+
+/* Mention styles in text bubbles */
+
+/* Base mention styling - incoming bubbles */
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text .cometchat-mentions {
+    border-radius: var(--cometchat-radius, 2px);
+    background: rgba(104, 82, 214, 0.20);
+    padding: 0px var(--cometchat-padding, 2px);
+}
+
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text .cometchat-mentions > span {
+    color: var(--cometchat-text-color-highlight, #6852D6);
+    font: var(--cometchat-font-body-regular);
+    font-weight: normal;
+    font-style: normal;
+    text-decoration: none;
+}
+
+/* "You" mention styling - incoming bubbles */
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text .cometchat-mentions-you {
+    border-radius: var(--cometchat-radius, 2px);
+    background: rgba(255, 171, 0, 0.20);
+    padding: 0px var(--cometchat-padding, 2px);
+}
+
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text .cometchat-mentions-you > span {
+    color: var(--cometchat-warning-color, #FFAB00);
+    font: var(--cometchat-font-body-regular);
+    font-weight: normal;
+    font-style: normal;
+    text-decoration: none;
+}
+
+/* Base mention styling - outgoing bubbles */
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text .cometchat-mentions {
+    border-radius: var(--cometchat-radius, 2px);
+    background: rgba(255, 255, 255, 0.20);
+    padding: 0px var(--cometchat-padding, 2px);
+}
+
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text .cometchat-mentions > span {
+    color: var(--cometchat-static-white);
+    font: var(--cometchat-font-body-regular);
+    font-weight: normal;
+    font-style: normal;
+    text-decoration: none;
+}
+
+/* "You" mention styling - outgoing bubbles */
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text .cometchat-mentions-you {
+    border-radius: var(--cometchat-radius, 2px);
+    background: rgba(255, 255, 255, 0.20);
+    padding: 0px var(--cometchat-padding, 2px);
+}
+
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text .cometchat-mentions-you > span {
+    color: var(--cometchat-static-white);
+    font: var(--cometchat-font-body-regular);
+    font-weight: normal;
+    font-style: normal;
+    text-decoration: none;
+}

package/dist/styles/components/LinkPreview.css

@@ -67,7 +67,7 @@
   font-style: normal;
 }
 
-.cometchat-link-bubble-incoming .cometchat-link-bubble__preview-body-content-title {
+.cometchat-link-bubble-incoming .cometchat-link-bubble__preview-body-content-description {
   color: var(--cometchat-neutral-color-900, #141414);
 }
 

package/dist/styles/components/index.css

@@ -42,6 +42,7 @@
 @import url('./CometChatGroups.css');
 @import url('./CometChatMessageHeader.css');
 @import url('./CometChatMessageComposer.css');
+@import url('./CometChatCompactMessageComposer.css');
 @import url('./CometChatMessageList.css');
 @import url('./CometChatOutgoingCall.css');
 @import url('./CometChatActionBubble.css');
@@ -64,6 +65,10 @@
 @import url('./CometChatMessagePreview.css');
 @import url('./CometChatFlagMessageDialog.css');
 @import url('./CometChatUserMemberWrapper.css');
+@import url('./CometChatFormattingToolbar.css');
+@import url('./CometChatLinkDialog.css');
+@import url('./CometChatLinkPopover.css');
+@import url('./CometChatMarkdownFormatter.css');
 /* @import url('./CometChatToolCallResultBubble.css');
 @import url('./CometChatToolCallArgumentBubble.css'); */
 .cometchat * {
@@ -73,7 +78,7 @@
 
 .cometchat-mentions > span{
     color: var(--cometchat-text-color-highlight);
-font:var(--cometchat-font-body-regular);
+    font: var(--cometchat-font-body-regular);
 }
 .cometchat-mentions{
     display: inline-block;
@@ -101,19 +106,15 @@ font:var(--cometchat-font-body-regular);
 }
 .cometchat-mentions-outgoing.cometchat-mentions-you > span{
     color: var(--cometchat-warning-color);
-
 }
 .cometchat-mentions-outgoing.cometchat-mentions-other > span{
     color: var(--cometchat-static-white);
-
 }
 .cometchat-mentions-incoming.cometchat-mentions-you > span{
     color: var(--cometchat-warning-color);
-
 }
 .cometchat-mentions-incoming.cometchat-mentions-other > span{
     color: var(--cometchat-text-color-highlight);
-
 }
 .cometchat-text-bubble-incoming .cometchat-url{
     color: var(--cometchat-info-color);

package/dist/styles/css-variables.css

@@ -1,4 +1,5 @@
 @import url('./components/index.css');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
 
 @font-face {
   font-family: 'Roboto';

package/dist/styles/index.css

@@ -42,6 +42,7 @@
 @import url('./CometChatGroups.css');
 @import url('./CometChatMessageHeader.css');
 @import url('./CometChatMessageComposer.css');
+@import url('./CometChatCompactMessageComposer.css');
 @import url('./CometChatMessageList.css');
 @import url('./CometChatOutgoingCall.css');
 @import url('./CometChatActionBubble.css');
@@ -64,6 +65,10 @@
 @import url('./CometChatMessagePreview.css');
 @import url('./CometChatFlagMessageDialog.css');
 @import url('./CometChatUserMemberWrapper.css');
+@import url('./CometChatFormattingToolbar.css');
+@import url('./CometChatLinkDialog.css');
+@import url('./CometChatLinkPopover.css');
+@import url('./CometChatMarkdownFormatter.css');
 /* @import url('./CometChatToolCallResultBubble.css');
 @import url('./CometChatToolCallArgumentBubble.css'); */
 .cometchat * {
@@ -73,7 +78,7 @@
 
 .cometchat-mentions > span{
     color: var(--cometchat-text-color-highlight);
-font:var(--cometchat-font-body-regular);
+    font: var(--cometchat-font-body-regular);
 }
 .cometchat-mentions{
     display: inline-block;
@@ -101,19 +106,15 @@ font:var(--cometchat-font-body-regular);
 }
 .cometchat-mentions-outgoing.cometchat-mentions-you > span{
     color: var(--cometchat-warning-color);
-
 }
 .cometchat-mentions-outgoing.cometchat-mentions-other > span{
     color: var(--cometchat-static-white);
-
 }
 .cometchat-mentions-incoming.cometchat-mentions-you > span{
     color: var(--cometchat-warning-color);
-
 }
 .cometchat-mentions-incoming.cometchat-mentions-other > span{
     color: var(--cometchat-text-color-highlight);
-
 }
 .cometchat-text-bubble-incoming .cometchat-url{
     color: var(--cometchat-info-color);

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

@@ -60,12 +60,25 @@ export declare class CometChatUIKitUtility {
      * @returns The extension data if found.
      */
     static checkMessageForExtensionsData: (message: CometChat.BaseMessage | null, extensionKey: string) => (object & MessageExtensionType) | undefined;
+    /**
+     * Convert known rich-text HTML formatting tags to markdown.
+     * This handles messages that arrive with raw HTML (from other platforms or older clients)
+     * so they can be processed by the markdown formatter on the bubble side.
+     * Also handles HTML-entity-escaped tags (e.g., <i>text</i>).
+     * Only converts recognized formatting tags; unknown/dangerous HTML is left for sanitizeText.
+     */
+    static convertFormattingHtmlToMarkdown(text: string): 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 sanitizeText(text: string): string;
+    /**
+     * Strips markdown formatting syntax from text, leaving only the plain text content.
+     * Preserves mention tokens (<@uid:...> and <@all:...>) and line breaks.
+     */
+    static stripMarkdownFormatting(text: string): string;
     static convertBlobToWav: (audioBlob: {
         arrayBuffer: () => any;
     }) => Promise<{

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

@@ -79,11 +79,6 @@ export declare class UIKitSettings {
      * @type {CometChat.StorageMode}
      */
     readonly storageMode: CometChat.StorageMode;
-    /**
-     * Secure media mode for accessing protected media resources. Defaults to EMBEDDED if not set.
-     * @type {CometChat.SecureMediaMode}
-     */
-    readonly secureMediaMode: CometChat.SecureMediaMode;
     /**
      * Private constructor to initialize the settings using the provided builder.
      * @param {UIKitSettingsBuilder} builder - The builder instance containing the settings configuration.
@@ -150,11 +145,6 @@ export declare class UIKitSettings {
      * @returns {CometChat.StorageMode} The storage mode.
      */
     getStorageMode(): CometChat.StorageMode;
-    /**
-     * Retrieves the secure media mode.
-     * @returns {CometChat.SecureMediaMode} The secure media mode.
-     */
-    getSecureMediaMode(): CometChat.SecureMediaMode;
 }
 export declare class UIKitSettingsBuilder {
     /**
@@ -228,11 +218,6 @@ export declare class UIKitSettingsBuilder {
      * @type {CometChat.StorageMode}
      */
     storageMode?: CometChat.StorageMode;
-    /**
-     * Secure media mode for accessing protected media resources. Defaults to EMBEDDED if not set.
-     * @type {CometChat.SecureMediaMode}
-     */
-    secureMediaMode?: CometChat.SecureMediaMode;
     /**
     * Builds and returns an instance of UIKitSettings.
     * @returns {UIKitSettings} A new instance of UIKitSettings with the specified configuration.
@@ -315,10 +300,4 @@ export declare class UIKitSettingsBuilder {
      * @returns {UIKitSettingsBuilder} The builder instance.
     */
     setStorageMode(storageMode: CometChat.StorageMode): UIKitSettingsBuilder;
-    /**
-     * Sets the secure media mode for accessing protected media resources. Defaults to EMBEDDED.
-     * @param {CometChat.SecureMediaMode} secureMediaMode - The secure media mode.
-     * @returns {UIKitSettingsBuilder} The builder instance.
-     */
-    setSecureMediaMode(secureMediaMode: CometChat.SecureMediaMode): UIKitSettingsBuilder;
 }

package/dist/types/components/BaseComponents/CometChatImageBubble/useCometChatImageBubble.d.ts

@@ -4,5 +4,4 @@ export declare const useCometChatImageBubble: ({ src, placeholderImage, }: {
 }) => {
     image: string;
     updateImage: () => void;
-    cleanup: () => void;
 };

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

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