@uzum-tech/ui 2.2.1 → 2.3.1

package/lib/chat/src/ChatMessages.js

@@ -5,21 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.chatMessagesProps = void 0;
 const vue_1 = require("vue");
-const icons_1 = require("../../_internal/icons");
 const _mixins_1 = require("../../_mixins");
-const dropdown_1 = require("../../dropdown");
-const icon_1 = require("../../icon");
+const message_bubble_1 = require("../../message-bubble");
 const skeleton_1 = require("../../skeleton");
 const styles_1 = require("../styles");
-const ChatAttachment_1 = __importDefault(require("./ChatParts/ChatAttachment"));
 const interface_1 = require("./interface");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const statusIconMapper = {
-    [interface_1.MessageStatus.READ]: icons_1.CheckmarkDoneSharp,
-    [interface_1.MessageStatus.PENDING]: icons_1.MdTime,
-    [interface_1.MessageStatus.RETRY]: icons_1.Refresh,
-    [interface_1.MessageStatus.UNREAD]: icons_1.CheckmarkDoneSharp
-};
 exports.chatMessagesProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { messages: {
         type: Array,
         default: () => []
@@ -66,8 +57,10 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (_a = UChat === null || UChat === void 0 ? void 0 : UChat.mergedThemeRef) !== null && _a !== void 0 ? _a : (0, _mixins_1.useTheme)('Chat', '-chat', index_cssr_1.default, styles_1.chatLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('Chat');
-        const contextMenuShow = (0, vue_1.ref)(false);
-        const contextMenuMessage = (0, vue_1.ref)();
+        const messageBubbleThemeOverridesRef = (0, vue_1.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 = (0, vue_1.computed)(() => {
             const { common: { cubicBezierEaseInOut, brandPrimary500, staticGreen, staticRed, textPrimary, textSecondary, textTertiary }, self: { backgroundColor, borderColor, mainBackgroundColor, headerBackgroundColor, headerBorderColor, headerTitleColor, messageBubbleBackgroundColorOwn, messageBubbleBackgroundColorOther, messageBubbleTextColorOwn, messageBubbleTextColorOther, messageTimeColor, messageStatusColor, attachmentBackgroundColorOwn, attachmentBackgroundColorOther, unreadNotificationBackgroundColor, unreadNotificationTextColor, typingIndicatorColor, dateSeparatorColor, dateSeparatorBackgroundColor, borderRadius, errorColor } } = themeRef.value;
             return {
@@ -112,49 +105,27 @@ exports.default = (0, vue_1.defineComponent)({
             var _a;
             (_a = props.onMessageRetry) === null || _a === void 0 ? void 0 : _a.call(props, message);
         };
-        const messageContextMenuOptions = (0, vue_1.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 [];
+            if (!(bubbleActions === null || bubbleActions === void 0 ? void 0 : bubbleActions.length)) {
+                return undefined;
             }
-            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)
-                });
-            }
-            return result;
-        });
-        const handleContextMenuSelect = (key) => {
-            var _a, _b;
-            const message = contextMenuMessage.value;
-            if (!message)
-                return;
-            if (key === interface_1.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 === interface_1.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 ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__date-separator` },
@@ -163,112 +134,62 @@ exports.default = (0, vue_1.defineComponent)({
         const renderUnreadNotification = () => {
             var _a;
             const count = (_a = props.unreadNotificationCount) !== null && _a !== void 0 ? _a : unreadMessagesCount.value;
-            return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__unread-notification` },
-                (0, vue_1.h)("span", null,
-                    count,
-                    ' ',
-                    mergedUnreadNotificationTextRef.value)));
+            return ((0, vue_1.h)(message_bubble_1.UMessageBubble, { type: message_bubble_1.MessageBubbleType.SERVICE, serviceVariant: message_bubble_1.MessageBubbleServiceVariant.UNREAD, content: `${count} ${mergedUnreadNotificationTextRef.value}`, theme: themeRef.value.peers.MessageBubble, themeOverrides: messageBubbleThemeOverridesRef.value }));
         };
         const renderMarkMessage = (message) => {
-            const markTypeClass = message.markType === interface_1.ChatMarkType.SYSTEM
-                ? 'system'
-                : message.markType === interface_1.ChatMarkType.EVENT
-                    ? 'event'
-                    : 'divider';
-            return ((0, vue_1.h)("div", { key: message.id, class: [
-                    `${mergedClsPrefixRef.value}-chat-main__mark`,
-                    `${mergedClsPrefixRef.value}-chat-main__mark--${markTypeClass}`
-                ] }, message.content && (0, vue_1.h)("span", null, message.content)));
+            var _a;
+            const serviceVariant = interface_1.markTypeToServiceVariantMap[(_a = message.markType) !== null && _a !== void 0 ? _a : interface_1.ChatMarkType.DIVIDER];
+            return ((0, vue_1.h)(message_bubble_1.UMessageBubble, { key: String(message.id), type: message_bubble_1.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 ? ((0, vue_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 && ((0, vue_1.h)(ChatAttachment_1.default, { message: message, attachments: attachments, uploadProps: props.uploadProps, withPadding: true }, {
-                    default: slots.messageAttachment,
-                    'upload-file-title': slots.messageAttachmentTitle,
-                    'upload-file-subtitle': slots.messageAttachmentSubtitle
-                })),
-                message.content && ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-text` }, message.content)))) : attachments.length === 1 ? ((0, vue_1.h)(ChatAttachment_1.default, { message: message, attachments: attachments, uploadProps: props.uploadProps }, {
-                default: slots.messageAttachment,
+            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 ((0, vue_1.h)(message_bubble_1.UMessageBubble, { key: String(message.id), type: message_bubble_1.MessageBubbleType.MESSAGE, isOwn: Boolean(message.isOwn), content: message.content, timestamp: message.timestamp, title: message.title, status: message.status, attachments: messageBubbleAttachments, uploadProps: props.uploadProps, retryText: mergedRetryTextRef.value, actions: getMessageBubbleActions(message), onRetry: handleMessageBubbleRetry, onAttachmentDownload: handleMessageBubbleAttachmentDownload, theme: themeRef.value.peers.MessageBubble, themeOverrides: messageBubbleThemeOverridesRef.value }, {
+                bubbleActions: slots.bubbleActions
+                    ? () => { var _a; return (_a = slots.bubbleActions) === null || _a === void 0 ? void 0 : _a.call(slots, message); }
+                    : undefined,
+                messageStatus: slots.messageStatus
+                    ? () => { var _a; 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
-            })) : null;
-            const messageContent = ((0, vue_1.h)("div", { key: message.id, class: [
-                    `${mergedClsPrefixRef.value}-chat-main__message`,
-                    isOwn
-                        ? `${mergedClsPrefixRef.value}-chat-main__message--own`
-                        : `${mergedClsPrefixRef.value}-chat-main__message--other`
-                ] },
-                (0, vue_1.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 ? ((0, vue_1.h)("div", { onContextmenu: (e) => {
-                            e.preventDefault();
-                            contextMenuShow.value = false;
-                            void (0, vue_1.nextTick)().then(() => {
-                                contextMenuShow.value = true;
-                                contextMenuMessage.value = message;
-                            });
-                        } }, (_c = slots.bubbleActions) === null || _c === void 0 ? void 0 :
-                        _c.call(slots, message),
-                        messageBubbleContent)) : hasBubbleActionsConfig ? ((0, vue_1.h)(dropdown_1.UDropdown, { show: isContextMenuForThisMessage, onUpdateShow: (show) => {
-                            var _a;
-                            if (!show && ((_a = contextMenuMessage.value) === null || _a === void 0 ? void 0 : _a.id) === message.id) {
-                                contextMenuShow.value = false;
-                            }
-                        }, onClickoutside: () => {
-                            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: () => ((0, vue_1.h)("div", { onContextmenu: (event) => {
-                                event.preventDefault();
-                                contextMenuShow.value = false;
-                                void (0, vue_1.nextTick)().then(() => {
-                                    contextMenuShow.value = true;
-                                    contextMenuMessage.value = message;
-                                });
-                            } }, messageBubbleContent))
-                    })) : (messageBubbleContent),
-                    (0, vue_1.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 === interface_1.MessageStatus.RETRY
-                                && `${mergedClsPrefixRef.value}-chat-main__message-meta--retry`
-                        ] }, message.status === interface_1.MessageStatus.RETRY ? ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry`, onClick: () => {
-                            handleMessageRetry(message);
-                        }, style: { cursor: 'pointer' } },
-                        (0, vue_1.h)(icon_1.UIcon, { size: 16, component: statusIconMapper[interface_1.MessageStatus.RETRY], class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon`, theme: themeRef.value.peers.StatusIcon, themeOverrides: themeRef.value.peerOverrides.StatusIcon }),
-                        (0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry-text` }, mergedRetryTextRef.value))) : ((0, vue_1.h)(vue_1.Fragment, null,
-                        (0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, message.timestamp),
-                        isOwn && message.status && ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-status` }, slots.messageStatus
-                            ? slots.messageStatus(message)
-                            : statusIconMapper[message.status] && ((0, vue_1.h)(icon_1.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;
+            }));
         };
         const renderSkeletonMessage = (isOwn, index) => {
             return ((0, vue_1.h)("div", { key: `skeleton-${index}`, class: [
@@ -302,10 +223,6 @@ exports.default = (0, vue_1.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
@@ -382,14 +299,7 @@ exports.default = (0, vue_1.defineComponent)({
                     padding: '0',
                     background: 'transparent'
                 } },
-                (0, vue_1.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;
-                        }
-                    } }, messagesWithDates.map((item) => {
+                (0, vue_1.h)("div", { class: `${mergedClsPrefixRef}-chat-main__messages-container` }, messagesWithDates.map((item) => {
                     var _a;
                     if (item.type === 'date-separator') {
                         return renderDateSeparator((_a = item.date) !== null && _a !== void 0 ? _a : '');

package/lib/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/lib/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/lib/chat/src/interface.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.chatInjectionKey = exports.ChatBubbleActionKey = exports.ChatMarkType = exports.ChatAttachmentStatus = exports.ChatMessageType = exports.MessageStatus = void 0;
+exports.markTypeToServiceVariantMap = exports.chatInjectionKey = exports.ChatBubbleActionKey = exports.ChatMarkType = exports.ChatAttachmentStatus = exports.ChatMessageType = exports.MessageStatus = void 0;
 const _utils_1 = require("../../_utils");
+const message_bubble_1 = require("../../message-bubble");
 var MessageStatus;
 (function (MessageStatus) {
     MessageStatus["READ"] = "read";
@@ -36,3 +37,8 @@ var ChatBubbleActionKey;
     ChatBubbleActionKey["DELETE"] = "delete";
 })(ChatBubbleActionKey || (exports.ChatBubbleActionKey = ChatBubbleActionKey = {}));
 exports.chatInjectionKey = (0, _utils_1.createInjectionKey)('chat');
+exports.markTypeToServiceVariantMap = {
+    [ChatMarkType.SYSTEM]: message_bubble_1.MessageBubbleServiceVariant.SYSTEM,
+    [ChatMarkType.EVENT]: message_bubble_1.MessageBubbleServiceVariant.EVENT,
+    [ChatMarkType.DIVIDER]: message_bubble_1.MessageBubbleServiceVariant.DIVIDER
+};

package/lib/chat/src/styles/index.cssr.js

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

package/lib/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/lib/chat/styles/dark.js

@@ -9,8 +9,9 @@ const styles_4 = require("../../empty/styles");
 const styles_5 = require("../../icon/styles");
 const styles_6 = require("../../input/styles");
 const styles_7 = require("../../list/styles");
-const styles_8 = require("../../select/styles");
-const styles_9 = require("../../typography/styles");
+const styles_8 = require("../../message-bubble/styles");
+const styles_9 = require("../../select/styles");
+const styles_10 = require("../../typography/styles");
 const light_1 = require("./light");
 const chatDark = (0, _mixins_1.createTheme)({
     name: 'Chat',
@@ -18,12 +19,13 @@ const chatDark = (0, _mixins_1.createTheme)({
     peers: {
         Input: styles_6.inputDark,
         Empty: styles_4.emptyDark,
-        Select: styles_8.selectDark,
+        Select: styles_9.selectDark,
         Avatar: styles_1.avatarDark,
         Badge: styles_2.badgeDark,
         Button: styles_3.buttonDark,
         List: styles_7.listDark,
-        Typography: styles_9.typographyDark,
+        Typography: styles_10.typographyDark,
+        MessageBubble: styles_8.messageBubbleDark,
         StatusIcon: styles_5.iconDark,
         FooterAttachIcon: styles_5.iconDark,
         FooterSuffixIcon: styles_5.iconDark,

package/lib/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/lib/chat/styles/light.js

@@ -12,8 +12,9 @@ const styles_5 = require("../../icon/styles");
 const styles_6 = require("../../input/styles");
 const light_2 = require("../../input/styles/light");
 const styles_7 = require("../../list/styles");
-const styles_8 = require("../../select/styles");
-const styles_9 = require("../../typography/styles");
+const styles_8 = require("../../message-bubble/styles");
+const styles_9 = require("../../select/styles");
+const styles_10 = require("../../typography/styles");
 const chatInputLight = Object.assign(Object.assign({}, styles_6.inputLight), { self(vars) {
         const originalInputSelf = (0, light_2.self)(vars);
         const { elementsTertiary } = vars;
@@ -70,12 +71,13 @@ const chatLight = (0, _mixins_1.createTheme)({
     peers: {
         Input: chatInputLight,
         Empty: styles_4.emptyLight,
-        Select: styles_8.selectLight,
+        Select: styles_9.selectLight,
         Avatar: styles_1.avatarLight,
         Badge: chatBadgeLight,
         Button: styles_3.buttonLight,
         List: styles_7.listLight,
-        Typography: styles_9.typographyLight,
+        Typography: styles_10.typographyLight,
+        MessageBubble: styles_8.messageBubbleLight,
         StatusIcon: styles_5.iconLight,
         FooterAttachIcon: styles_5.iconLight,
         FooterSuffixIcon: styles_5.iconLight,