@uzum-tech/ui 2.2.1 → 2.3.1

package/es/chat/src/ChatMessages.mjs

@@ -1,19 +1,10 @@
-import { computed, defineComponent, Fragment, h, inject, nextTick, ref } from 'vue';
-import { CheckmarkDoneSharp, MdTime, Refresh } from "../../_internal/icons/index.mjs";
+import { computed, defineComponent, h, inject } from 'vue';
 import { useConfig, useLocale, useTheme, useThemeClass } from "../../_mixins/index.mjs";
-import { UDropdown } from "../../dropdown/index.mjs";
-import { UIcon } from "../../icon/index.mjs";
+import { MessageBubbleServiceVariant, MessageBubbleType, UMessageBubble } from "../../message-bubble/index.mjs";
 import { USkeleton } from "../../skeleton/index.mjs";
 import { chatLight } from "../styles/index.mjs";
-import ChatAttachmentComponent from "./ChatParts/ChatAttachment.mjs";
-import { ChatBubbleActionKey, chatInjectionKey, ChatMarkType, ChatMessageType, MessageStatus } from "./interface.mjs";
+import { ChatBubbleActionKey, chatInjectionKey, ChatMarkType, ChatMessageType, markTypeToServiceVariantMap, MessageStatus } from "./interface.mjs";
 import style from "./styles/index.cssr.mjs";
-const statusIconMapper = {
-  [MessageStatus.READ]: CheckmarkDoneSharp,
-  [MessageStatus.PENDING]: MdTime,
-  [MessageStatus.RETRY]: Refresh,
-  [MessageStatus.UNREAD]: CheckmarkDoneSharp
-};
 export const chatMessagesProps = Object.assign(Object.assign({}, useTheme.props), {
   messages: {
     type: Array,
@@ -79,8 +70,23 @@ export default defineComponent({
     const {
       localeRef
     } = useLocale('Chat');
-    const contextMenuShow = ref(false);
-    const contextMenuMessage = ref();
+    const messageBubbleThemeOverridesRef = computed(() => {
+      const {
+        self,
+        peerOverrides
+      } = themeRef.value;
+      return Object.assign({
+        messageBubbleBackgroundColorOwn: self.messageBubbleBackgroundColorOwn,
+        messageBubbleBackgroundColorOther: self.messageBubbleBackgroundColorOther,
+        messageBubbleTextColorOwn: self.messageBubbleTextColorOwn,
+        messageBubbleTextColorOther: self.messageBubbleTextColorOther,
+        messageTimeColor: self.messageTimeColor,
+        attachmentBackgroundColorOwn: self.attachmentBackgroundColorOwn,
+        attachmentBackgroundColorOther: self.attachmentBackgroundColorOther,
+        unreadNotificationBackgroundColor: self.unreadNotificationBackgroundColor,
+        unreadNotificationTextColor: self.unreadNotificationTextColor
+      }, peerOverrides.MessageBubble);
+    });
     const cssVarsRef = computed(() => {
       const {
         common: {
@@ -163,46 +169,25 @@ export default defineComponent({
       var _a;
       (_a = props.onMessageRetry) === null || _a === void 0 ? void 0 : _a.call(props, message);
     };
-    const messageContextMenuOptions = computed(() => {
+    const getMessageBubbleActions = message => {
       var _a;
-      const message = contextMenuMessage.value;
-      if (!message) return;
       const bubbleActions = (_a = UChat === null || UChat === void 0 ? void 0 : UChat.bubbleActionsRef) === null || _a === void 0 ? void 0 : _a.value;
-      if (!bubbleActions || bubbleActions.length === 0) {
-        return [];
-      }
-      const result = [];
-      for (const action of bubbleActions) {
-        if (action.visible && !action.visible(message)) {
-          continue;
-        }
-        const label = typeof action.label === 'function' ? action.label() : action.label;
-        result.push({
-          label,
-          key: String(action.key)
-        });
+      if (!(bubbleActions === null || bubbleActions === void 0 ? void 0 : bubbleActions.length)) {
+        return undefined;
       }
-      return result;
-    });
-    const handleContextMenuSelect = key => {
-      var _a, _b;
-      const message = contextMenuMessage.value;
-      if (!message) return;
-      if (key === ChatBubbleActionKey.EDIT) {
-        const startEditing = (_a = UChat === null || UChat === void 0 ? void 0 : UChat.startEditingMessage) === null || _a === void 0 ? void 0 : _a.value;
-        if (startEditing) {
-          startEditing(message);
+      return bubbleActions.filter(action => !action.visible || action.visible(message)).map(action => ({
+        key: String(action.key),
+        label: action.label,
+        handler: () => {
+          var _a;
+          if (action.key === ChatBubbleActionKey.EDIT) {
+            const startEditing = (_a = UChat === null || UChat === void 0 ? void 0 : UChat.startEditingMessage) === null || _a === void 0 ? void 0 : _a.value;
+            startEditing === null || startEditing === void 0 ? void 0 : startEditing(message);
+            return;
+          }
+          action.handler(message);
         }
-        contextMenuShow.value = false;
-        return;
-      }
-      const bubbleActions = (_b = UChat === null || UChat === void 0 ? void 0 : UChat.bubbleActionsRef) === null || _b === void 0 ? void 0 : _b.value;
-      if (!bubbleActions) return;
-      const action = bubbleActions.find(action => action.key === key);
-      if (action) {
-        action.handler(message);
-      }
-      contextMenuShow.value = false;
+      }));
     };
     const renderDateSeparator = date => {
       return h("div", {
@@ -212,119 +197,85 @@ export default defineComponent({
     const renderUnreadNotification = () => {
       var _a;
       const count = (_a = props.unreadNotificationCount) !== null && _a !== void 0 ? _a : unreadMessagesCount.value;
-      return h("div", {
-        class: `${mergedClsPrefixRef.value}-chat-main__unread-notification`
-      }, h("span", null, count, ' ', mergedUnreadNotificationTextRef.value));
+      return h(UMessageBubble, {
+        type: MessageBubbleType.SERVICE,
+        serviceVariant: MessageBubbleServiceVariant.UNREAD,
+        content: `${count} ${mergedUnreadNotificationTextRef.value}`,
+        theme: themeRef.value.peers.MessageBubble,
+        themeOverrides: messageBubbleThemeOverridesRef.value
+      });
     };
     const renderMarkMessage = message => {
-      const markTypeClass = message.markType === ChatMarkType.SYSTEM ? 'system' : message.markType === ChatMarkType.EVENT ? 'event' : 'divider';
-      return h("div", {
-        key: message.id,
-        class: [`${mergedClsPrefixRef.value}-chat-main__mark`, `${mergedClsPrefixRef.value}-chat-main__mark--${markTypeClass}`]
-      }, message.content && h("span", null, message.content));
+      var _a;
+      const serviceVariant = markTypeToServiceVariantMap[(_a = message.markType) !== null && _a !== void 0 ? _a : ChatMarkType.DIVIDER];
+      return h(UMessageBubble, {
+        key: String(message.id),
+        type: MessageBubbleType.SERVICE,
+        serviceVariant: serviceVariant,
+        content: message.content,
+        theme: themeRef.value.peers.MessageBubble,
+        themeOverrides: messageBubbleThemeOverridesRef.value
+      });
     };
     const renderMessage = message => {
-      var _a, _b, _c;
-      const isOwn = message.isOwn;
       const attachments = message.attachment ? Array.isArray(message.attachment) ? message.attachment : [message.attachment] : [];
-      const isContextMenuForThisMessage = contextMenuShow.value && ((_a = contextMenuMessage.value) === null || _a === void 0 ? void 0 : _a.id) === message.id;
-      const hasBubbleActionsSlot = slots.bubbleActions !== undefined;
-      const hasBubbleActionsConfig = ((_b = UChat === null || UChat === void 0 ? void 0 : UChat.bubbleActionsRef) === null || _b === void 0 ? void 0 : _b.value) && UChat.bubbleActionsRef.value.length > 0;
-      const messageBubbleContent = message.content || attachments.length > 1 ? h("div", {
-        class: [`${mergedClsPrefixRef.value}-chat-main__message-bubble`, isOwn ? `${mergedClsPrefixRef.value}-chat-main__message-bubble--own` : `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`]
-      }, attachments.length > 0 && h(ChatAttachmentComponent, {
-        message: message,
-        attachments: attachments,
+      const messageBubbleAttachments = attachments.map(attachment => ({
+        id: attachment.id,
+        name: attachment.name,
+        url: attachment.url,
+        size: attachment.size,
+        thumbnail: typeof attachment.thumbnail === 'string' ? attachment.thumbnail : undefined,
+        preview: typeof attachment.preview === 'string' ? attachment.preview : undefined,
+        status: attachment.status ? String(attachment.status) : undefined,
+        percentage: attachment.percentage,
+        type: attachment.type
+      }));
+      const handleMessageBubbleRetry = () => {
+        handleMessageRetry(message);
+      };
+      const handleMessageBubbleAttachmentDownload = attachment => {
+        var _a;
+        const originalAttachment = attachments.find(item => String(item.id) === String(attachment.id));
+        if (originalAttachment && ((_a = UChat === null || UChat === void 0 ? void 0 : UChat.onAttachmentDownload) === null || _a === void 0 ? void 0 : _a.value)) {
+          return UChat.onAttachmentDownload.value(originalAttachment);
+        }
+      };
+      return h(UMessageBubble, {
+        key: String(message.id),
+        type: MessageBubbleType.MESSAGE,
+        isOwn: Boolean(message.isOwn),
+        content: message.content,
+        timestamp: message.timestamp,
+        title: message.title,
+        status: message.status,
+        attachments: messageBubbleAttachments,
         uploadProps: props.uploadProps,
-        withPadding: true
+        retryText: mergedRetryTextRef.value,
+        actions: getMessageBubbleActions(message),
+        onRetry: handleMessageBubbleRetry,
+        onAttachmentDownload: handleMessageBubbleAttachmentDownload,
+        theme: themeRef.value.peers.MessageBubble,
+        themeOverrides: messageBubbleThemeOverridesRef.value
       }, {
-        default: slots.messageAttachment,
-        'upload-file-title': slots.messageAttachmentTitle,
-        'upload-file-subtitle': slots.messageAttachmentSubtitle
-      }), message.content && h("div", {
-        class: `${mergedClsPrefixRef.value}-chat-main__message-text`
-      }, message.content)) : attachments.length === 1 ? h(ChatAttachmentComponent, {
-        message: message,
-        attachments: attachments,
-        uploadProps: props.uploadProps
-      }, {
-        default: slots.messageAttachment,
-        'upload-file-title': slots.messageAttachmentTitle,
-        'upload-file-subtitle': slots.messageAttachmentSubtitle
-      }) : null;
-      const messageContent = h("div", {
-        key: message.id,
-        class: [`${mergedClsPrefixRef.value}-chat-main__message`, isOwn ? `${mergedClsPrefixRef.value}-chat-main__message--own` : `${mergedClsPrefixRef.value}-chat-main__message--other`]
-      }, h("div", {
-        class: [`${mergedClsPrefixRef.value}-chat-main__message-wrapper`, isOwn ? `${mergedClsPrefixRef.value}-chat-main__message-wrapper--own` : `${mergedClsPrefixRef.value}-chat-main__message-wrapper--other`]
-      }, hasBubbleActionsSlot ? h("div", {
-        onContextmenu: e => {
-          e.preventDefault();
-          contextMenuShow.value = false;
-          void nextTick().then(() => {
-            contextMenuShow.value = true;
-            contextMenuMessage.value = message;
-          });
-        }
-      }, (_c = slots.bubbleActions) === null || _c === void 0 ? void 0 : _c.call(slots, message), messageBubbleContent) : hasBubbleActionsConfig ? h(UDropdown, {
-        show: isContextMenuForThisMessage,
-        onUpdateShow: show => {
+        bubbleActions: slots.bubbleActions ? () => {
           var _a;
-          if (!show && ((_a = contextMenuMessage.value) === null || _a === void 0 ? void 0 : _a.id) === message.id) {
-            contextMenuShow.value = false;
-          }
-        },
-        onClickoutside: () => {
+          return (_a = slots.bubbleActions) === null || _a === void 0 ? void 0 : _a.call(slots, message);
+        } : undefined,
+        messageStatus: slots.messageStatus ? () => {
           var _a;
-          if (((_a = contextMenuMessage.value) === null || _a === void 0 ? void 0 : _a.id) === message.id) {
-            contextMenuShow.value = false;
-          }
-        },
-        trigger: "manual",
-        placement: "bottom-start",
-        options: messageContextMenuOptions.value,
-        onSelect: handleContextMenuSelect
-      }, {
-        default: () => h("div", {
-          onContextmenu: event => {
-            event.preventDefault();
-            contextMenuShow.value = false;
-            void nextTick().then(() => {
-              contextMenuShow.value = true;
-              contextMenuMessage.value = message;
-            });
-          }
-        }, messageBubbleContent)
-      }) : messageBubbleContent, h("div", {
-        class: [`${mergedClsPrefixRef.value}-chat-main__message-meta`, isOwn ? `${mergedClsPrefixRef.value}-chat-main__message-meta--own` : `${mergedClsPrefixRef.value}-chat-main__message-meta--other`, message.status === MessageStatus.RETRY && `${mergedClsPrefixRef.value}-chat-main__message-meta--retry`]
-      }, message.status === MessageStatus.RETRY ? h("div", {
-        class: `${mergedClsPrefixRef.value}-chat-main__message-retry`,
-        onClick: () => {
-          handleMessageRetry(message);
-        },
-        style: {
-          cursor: 'pointer'
-        }
-      }, h(UIcon, {
-        size: 16,
-        component: statusIconMapper[MessageStatus.RETRY],
-        class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon`,
-        theme: themeRef.value.peers.StatusIcon,
-        themeOverrides: themeRef.value.peerOverrides.StatusIcon
-      }), h("span", {
-        class: `${mergedClsPrefixRef.value}-chat-main__message-retry-text`
-      }, mergedRetryTextRef.value)) : h(Fragment, null, h("span", {
-        class: `${mergedClsPrefixRef.value}-chat-main__message-time`
-      }, message.timestamp), isOwn && message.status && h("div", {
-        class: `${mergedClsPrefixRef.value}-chat-main__message-status`
-      }, slots.messageStatus ? slots.messageStatus(message) : statusIconMapper[message.status] && h(UIcon, {
-        size: 16,
-        component: statusIconMapper[message.status],
-        class: [`${mergedClsPrefixRef.value}-chat-main__message-status-icon`, `${mergedClsPrefixRef.value}-chat-main__message-status-icon--${String(message.status)}`],
-        theme: themeRef.value.peers.StatusIcon,
-        themeOverrides: themeRef.value.peerOverrides.StatusIcon
-      }))))));
-      return messageContent;
+          return (_a = slots.messageStatus) === null || _a === void 0 ? void 0 : _a.call(slots, message);
+        } : undefined,
+        messageAttachment: slots.messageAttachment ? () => {
+          var _a;
+          return (_a = slots.messageAttachment) === null || _a === void 0 ? void 0 : _a.call(slots, message);
+        } : undefined,
+        afterContent: slots.messageAfterContent ? () => {
+          var _a;
+          return (_a = slots.messageAfterContent) === null || _a === void 0 ? void 0 : _a.call(slots, message);
+        } : undefined,
+        'upload-file-title': slots.messageAttachmentTitle,
+        'upload-file-subtitle': slots.messageAttachmentSubtitle
+      });
     };
     const renderSkeletonMessage = (isOwn, index) => {
       return h("div", {
@@ -359,10 +310,6 @@ export default defineComponent({
       renderSkeletonMessage,
       renderDateSeparator,
       renderUnreadNotification,
-      contextMenuShow,
-      contextMenuMessage,
-      messageContextMenuOptions,
-      handleContextMenuSelect,
       cssVars: cssVarsRef,
       themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
       onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
@@ -458,15 +405,7 @@ export default defineComponent({
         background: 'transparent'
       }
     }, h("div", {
-      class: `${mergedClsPrefixRef}-chat-main__messages-container`,
-      onContextmenu: event => {
-        const target = event.target;
-        const messagesContainer = event.currentTarget;
-        if (target === messagesContainer) {
-          event.preventDefault();
-          this.contextMenuShow = false;
-        }
-      }
+      class: `${mergedClsPrefixRef}-chat-main__messages-container`
     }, messagesWithDates.map(item => {
       var _a;
       if (item.type === 'date-separator') {

package/es/chat/src/ChatParts/Sidebar.d.ts

@@ -677,6 +677,33 @@ declare const _default: import("vue").DefineComponent<{}, {
                 codeColor: string;
                 codeBorder: string;
             }, any>;
+            MessageBubble: import("../../../_mixins").Theme<"MessageBubble", {
+                messageBubbleBackgroundColorOwn: string;
+                messageBubbleBackgroundColorOther: string;
+                messageBubbleTextColorOwn: string;
+                messageBubbleTextColorOther: string;
+                messageTimeColor: string;
+                messageStatusReadColor: string;
+                messageStatusSuccessColor: string;
+                attachmentBackgroundColorOwn: string;
+                attachmentBackgroundColorOther: string;
+                messageErrorColor: string;
+                messageBorderRadius: string;
+                unreadNotificationBackgroundColor: string;
+                unreadNotificationTextColor: string;
+                serviceMessageTextColor: string;
+                serviceMessageBackgroundColor: string;
+                messageTitleColor: string;
+            }, {
+                StatusIcon: import("../../../_mixins").Theme<"Icon", {
+                    color: string;
+                    opacity1Depth: string;
+                    opacity2Depth: string;
+                    opacity3Depth: string;
+                    opacity4Depth: string;
+                    opacity5Depth: string;
+                }, any>;
+            }>;
             StatusIcon: import("../../../_mixins").Theme<"Icon", {
                 color: string;
                 opacity1Depth: string;
@@ -946,6 +973,18 @@ declare const _default: import("vue").DefineComponent<{}, {
                     [x: string]: any;
                 } | undefined;
             } | undefined;
+            MessageBubble?: {
+                peers?: {
+                    StatusIcon?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Icon", {
+                        color: string;
+                        opacity1Depth: string;
+                        opacity2Depth: string;
+                        opacity3Depth: string;
+                        opacity4Depth: string;
+                        opacity5Depth: string;
+                    }, any>> | undefined;
+                } | undefined;
+            } | undefined;
             StatusIcon?: {
                 peers?: {
                     [x: string]: any;
@@ -1639,6 +1678,33 @@ declare const _default: import("vue").DefineComponent<{}, {
                 codeColor: string;
                 codeBorder: string;
             }, any>;
+            MessageBubble: import("../../../_mixins").Theme<"MessageBubble", {
+                messageBubbleBackgroundColorOwn: string;
+                messageBubbleBackgroundColorOther: string;
+                messageBubbleTextColorOwn: string;
+                messageBubbleTextColorOther: string;
+                messageTimeColor: string;
+                messageStatusReadColor: string;
+                messageStatusSuccessColor: string;
+                attachmentBackgroundColorOwn: string;
+                attachmentBackgroundColorOther: string;
+                messageErrorColor: string;
+                messageBorderRadius: string;
+                unreadNotificationBackgroundColor: string;
+                unreadNotificationTextColor: string;
+                serviceMessageTextColor: string;
+                serviceMessageBackgroundColor: string;
+                messageTitleColor: string;
+            }, {
+                StatusIcon: import("../../../_mixins").Theme<"Icon", {
+                    color: string;
+                    opacity1Depth: string;
+                    opacity2Depth: string;
+                    opacity3Depth: string;
+                    opacity4Depth: string;
+                    opacity5Depth: string;
+                }, any>;
+            }>;
             StatusIcon: import("../../../_mixins").Theme<"Icon", {
                 color: string;
                 opacity1Depth: string;
@@ -1908,6 +1974,18 @@ declare const _default: import("vue").DefineComponent<{}, {
                     [x: string]: any;
                 } | undefined;
             } | undefined;
+            MessageBubble?: {
+                peers?: {
+                    StatusIcon?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Icon", {
+                        color: string;
+                        opacity1Depth: string;
+                        opacity2Depth: string;
+                        opacity3Depth: string;
+                        opacity4Depth: string;
+                        opacity5Depth: string;
+                    }, any>> | undefined;
+                } | undefined;
+            } | undefined;
             StatusIcon?: {
                 peers?: {
                     [x: string]: any;

package/es/chat/src/interface.d.ts

@@ -9,6 +9,7 @@ import type { InputProps } from '../../input';
 import type { UploadProps } from '../../upload';
 import type { OnChangePayload } from '../../upload/src/interface';
 import type { ChatTheme } from '../styles';
+import { MessageBubbleServiceVariant } from '../../message-bubble';
 export declare enum MessageStatus {
     READ = "read",
     UNREAD = "unread",
@@ -84,6 +85,7 @@ export interface ChatMessageData {
     senderAvatar?: string | (() => VNodeChild);
     senderName?: string | (() => VNodeChild);
     markType?: ChatMarkType;
+    title?: string | (() => VNodeChild);
 }
 export interface ChatMessageProps {
     id: ChatId;
@@ -97,6 +99,7 @@ export interface ChatMessageProps {
     senderAvatar?: string | (() => VNodeChild);
     senderName?: string | (() => VNodeChild);
     disabled?: boolean;
+    title?: string | (() => VNodeChild);
 }
 export interface ChatListItemProps {
     id: ChatId;
@@ -201,6 +204,7 @@ export interface ChatSlots {
     chatItemSuffix?: (item: ChatListItemData) => VNodeChild;
     messageStatus?: (message: ChatMessageData) => VNodeChild;
     messageContent?: (message: ChatMessageData) => VNodeChild;
+    messageAfterContent?: (message: ChatMessageData) => VNodeChild;
     messageTimestamp?: (message: ChatMessageData) => VNodeChild;
     messageAttachment?: (message: ChatMessageData) => VNodeChild;
     messageAttachmentTitle?: (file: any) => VNodeChild;
@@ -245,6 +249,18 @@ export interface ChatFooterProps {
     actions?: Array<() => VNodeChild>;
     inputProps?: Partial<InputProps>;
 }
+export interface ChatInst {
+    scrollToBottom: () => void;
+    scrollToMessage: (key: ChatId) => void;
+    sendMessage: (content: string, attachments?: ChatAttachment[]) => void;
+}
+export interface ChatListInst {
+    selectChat: (key: ChatId) => void;
+    updateItem: (key: ChatId, item: Partial<ChatListItemData>) => void;
+    addItem: (item: ChatListItemData) => void;
+    removeItem: (key: ChatId) => void;
+}
+export type HandleOnChangeType = ((data: OnChangePayload) => void) | undefined;
 export type OnChatSelect = (key: ChatId, item: ChatListItemData) => void;
 export type OnMessageSend = (content: string, attachments?: ChatAttachment[]) => void;
 export type OnAttachmentUpload = (file: File) => Promise<ChatAttachment>;
@@ -265,17 +281,6 @@ export type OnSendError = (error: {
     message: string;
     content: string;
 }) => void;
-export interface ChatInst {
-    scrollToBottom: () => void;
-    scrollToMessage: (key: ChatId) => void;
-    sendMessage: (content: string, attachments?: ChatAttachment[]) => void;
-}
-export interface ChatListInst {
-    selectChat: (key: ChatId) => void;
-    updateItem: (key: ChatId, item: Partial<ChatListItemData>) => void;
-    addItem: (item: ChatListItemData) => void;
-    removeItem: (key: ChatId) => void;
-}
 export declare const chatInjectionKey: InjectionKey<{
     mergedClsPrefixRef: Ref<string>;
     mergedThemeRef: Ref<MergedTheme<ChatTheme>>;
@@ -354,4 +359,4 @@ export declare const chatInjectionKey: InjectionKey<{
     headerShareIconPropsRef: Ref<Partial<IconProps> | undefined>;
     headerProfileIconPropsRef: Ref<Partial<IconProps> | undefined>;
 }>;
-export type HandleOnChangeType = ((data: OnChangePayload) => void) | undefined;
+export declare const markTypeToServiceVariantMap: Record<ChatMarkType, MessageBubbleServiceVariant>;

package/es/chat/src/interface.mjs

@@ -1,4 +1,5 @@
 import { createInjectionKey } from "../../_utils/index.mjs";
+import { MessageBubbleServiceVariant } from "../../message-bubble/index.mjs";
 export var MessageStatus;
 (function (MessageStatus) {
   MessageStatus["READ"] = "read";
@@ -32,4 +33,9 @@ export var ChatBubbleActionKey;
   ChatBubbleActionKey["COPY"] = "copy";
   ChatBubbleActionKey["DELETE"] = "delete";
 })(ChatBubbleActionKey || (ChatBubbleActionKey = {}));
-export const chatInjectionKey = createInjectionKey('chat');
+export const chatInjectionKey = createInjectionKey('chat');
+export const markTypeToServiceVariantMap = {
+  [ChatMarkType.SYSTEM]: MessageBubbleServiceVariant.SYSTEM,
+  [ChatMarkType.EVENT]: MessageBubbleServiceVariant.EVENT,
+  [ChatMarkType.DIVIDER]: MessageBubbleServiceVariant.DIVIDER
+};

package/es/chat/src/styles/index.cssr.mjs

@@ -129,7 +129,10 @@ export default cB('chat', `
  height: 100%;
  max-height: 100%;
  min-height: 0;
- `, [cE('header', `
+ `, [cM('standalone', `
+ border: none;
+ border-radius: 0;
+ `), cE('header', `
  border-bottom: 1px solid var(--u-border-color);
  width: 100%;
  padding: 24px 20px 10px 24px;

package/es/chat/styles/dark.d.ts

@@ -662,6 +662,33 @@ declare const chatDark: import("../../_mixins").Theme<"Chat", {
         codeColor: string;
         codeBorder: string;
     }, any>;
+    MessageBubble: import("../../_mixins").Theme<"MessageBubble", {
+        messageBubbleBackgroundColorOwn: string;
+        messageBubbleBackgroundColorOther: string;
+        messageBubbleTextColorOwn: string;
+        messageBubbleTextColorOther: string;
+        messageTimeColor: string;
+        messageStatusReadColor: string;
+        messageStatusSuccessColor: string;
+        attachmentBackgroundColorOwn: string;
+        attachmentBackgroundColorOther: string;
+        messageErrorColor: string;
+        messageBorderRadius: string;
+        unreadNotificationBackgroundColor: string;
+        unreadNotificationTextColor: string;
+        serviceMessageTextColor: string;
+        serviceMessageBackgroundColor: string;
+        messageTitleColor: string;
+    }, {
+        StatusIcon: import("../../_mixins").Theme<"Icon", {
+            color: string;
+            opacity1Depth: string;
+            opacity2Depth: string;
+            opacity3Depth: string;
+            opacity4Depth: string;
+            opacity5Depth: string;
+        }, any>;
+    }>;
     StatusIcon: import("../../_mixins").Theme<"Icon", {
         color: string;
         opacity1Depth: string;

package/es/chat/styles/dark.mjs

@@ -7,6 +7,7 @@ import { emptyDark } from "../../empty/styles/index.mjs";
 import { iconDark } from "../../icon/styles/index.mjs";
 import { inputDark } from "../../input/styles/index.mjs";
 import { listDark } from "../../list/styles/index.mjs";
+import { messageBubbleDark } from "../../message-bubble/styles/index.mjs";
 import { selectDark } from "../../select/styles/index.mjs";
 import { typographyDark } from "../../typography/styles/index.mjs";
 import { self } from "./light.mjs";
@@ -22,6 +23,7 @@ const chatDark = createTheme({
     Button: buttonDark,
     List: listDark,
     Typography: typographyDark,
+    MessageBubble: messageBubbleDark,
     StatusIcon: iconDark,
     FooterAttachIcon: iconDark,
     FooterSuffixIcon: iconDark,

package/es/chat/styles/light.d.ts

@@ -700,6 +700,33 @@ declare const chatLight: import("../../_mixins").Theme<"Chat", {
         codeColor: string;
         codeBorder: string;
     }, any>;
+    MessageBubble: import("../../_mixins").Theme<"MessageBubble", {
+        messageBubbleBackgroundColorOwn: string;
+        messageBubbleBackgroundColorOther: string;
+        messageBubbleTextColorOwn: string;
+        messageBubbleTextColorOther: string;
+        messageTimeColor: string;
+        messageStatusReadColor: string;
+        messageStatusSuccessColor: string;
+        attachmentBackgroundColorOwn: string;
+        attachmentBackgroundColorOther: string;
+        messageErrorColor: string;
+        messageBorderRadius: string;
+        unreadNotificationBackgroundColor: string;
+        unreadNotificationTextColor: string;
+        serviceMessageTextColor: string;
+        serviceMessageBackgroundColor: string;
+        messageTitleColor: string;
+    }, {
+        StatusIcon: import("../../_mixins").Theme<"Icon", {
+            color: string;
+            opacity1Depth: string;
+            opacity2Depth: string;
+            opacity3Depth: string;
+            opacity4Depth: string;
+            opacity5Depth: string;
+        }, any>;
+    }>;
     StatusIcon: import("../../_mixins").Theme<"Icon", {
         color: string;
         opacity1Depth: string;

package/es/chat/styles/light.mjs

@@ -9,6 +9,7 @@ import { iconLight } from "../../icon/styles/index.mjs";
 import { inputLight } from "../../input/styles/index.mjs";
 import { self as inputSelf } from "../../input/styles/light.mjs";
 import { listLight } from "../../list/styles/index.mjs";
+import { messageBubbleLight } from "../../message-bubble/styles/index.mjs";
 import { selectLight } from "../../select/styles/index.mjs";
 import { typographyLight } from "../../typography/styles/index.mjs";
 const chatInputLight = Object.assign(Object.assign({}, inputLight), {
@@ -109,6 +110,7 @@ const chatLight = createTheme({
     Button: buttonLight,
     List: listLight,
     Typography: typographyLight,
+    MessageBubble: messageBubbleLight,
     StatusIcon: iconLight,
     FooterAttachIcon: iconLight,
     FooterSuffixIcon: iconLight,