@uzum-tech/ui 2.2.0 → 2.3.0

package/lib/chat/src/{ChatParts/MainArea.js → ChatMainArea.js}

@@ -12,27 +12,229 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.chatMainAreaProps = void 0;
 const vue_1 = require("vue");
-const icons_1 = require("../../../_internal/icons");
-const _mixins_1 = require("../../../_mixins");
-const _utils_1 = require("../../../_utils");
-const button_1 = require("../../../button");
-const flex_1 = require("../../../flex");
-const icon_1 = require("../../../icon");
-const input_1 = require("../../../input");
-const list_1 = require("../../../list");
-const safe_top_scrollbar_1 = require("../../../safe-top-scrollbar");
-const tooltip_1 = require("../../../tooltip");
-const typography_1 = require("../../../typography");
-const upload_1 = require("../../../upload");
-const ChatMessages_1 = __importDefault(require("../ChatMessages"));
-const interface_1 = require("../interface");
+const icons_1 = require("../../_internal/icons");
+const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+const button_1 = require("../../button");
+const flex_1 = require("../../flex");
+const icon_1 = require("../../icon");
+const input_1 = require("../../input");
+const list_1 = require("../../list");
+const safe_top_scrollbar_1 = require("../../safe-top-scrollbar");
+const tooltip_1 = require("../../tooltip");
+const typography_1 = require("../../typography");
+const upload_1 = require("../../upload");
+const styles_1 = require("../styles");
+const ChatMessages_1 = __importDefault(require("./ChatMessages"));
+const interface_1 = require("./interface");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const SENDING_DELAY = 100;
+exports.chatMainAreaProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { selectedChat: {
+        type: Object,
+        default: undefined
+    }, messages: {
+        type: Array,
+        default: () => []
+    }, typingChatIds: {
+        type: Array,
+        default: () => []
+    }, loading: {
+        type: Boolean,
+        default: false
+    }, loadingCount: {
+        type: Number,
+        default: 10
+    }, headerButtonProps: {
+        type: Object,
+        default: undefined
+    }, headerIconProps: {
+        type: Object,
+        default: undefined
+    }, headerShareButtonProps: {
+        type: Object,
+        default: undefined
+    }, headerProfileButtonProps: {
+        type: Object,
+        default: undefined
+    }, headerCloseButtonProps: {
+        type: Object,
+        default: undefined
+    }, headerShareIconProps: {
+        type: Object,
+        default: undefined
+    }, headerProfileIconProps: {
+        type: Object,
+        default: undefined
+    }, messageUploadProps: {
+        type: Object,
+        default: undefined
+    }, footerInputProps: {
+        type: Object,
+        default: undefined
+    }, footerButtonProps: {
+        type: Object,
+        default: undefined
+    }, footerUploadProps: {
+        type: Object,
+        default: undefined
+    }, footerIconProps: {
+        type: Object,
+        default: undefined
+    }, footerSuffixIconProps: {
+        type: Object,
+        default: undefined
+    }, showAttachButton: {
+        type: Boolean,
+        default: true
+    }, inputPlaceholder: {
+        type: String,
+        default: undefined
+    }, retryText: {
+        type: String,
+        default: undefined
+    }, typingText: {
+        type: String,
+        default: undefined
+    }, closeButtonText: {
+        type: String,
+        default: undefined
+    }, shareButtonTooltip: {
+        type: String,
+        default: undefined
+    }, profileButtonTooltip: {
+        type: String,
+        default: undefined
+    }, unreadNotificationText: {
+        type: String,
+        default: undefined
+    }, bubbleActions: {
+        type: Array,
+        default: undefined
+    }, onMessageSend: {
+        type: Function,
+        default: undefined
+    }, onMessageRetry: {
+        type: Function,
+        default: undefined
+    }, onFooterInputChange: {
+        type: Function,
+        default: undefined
+    }, onChatClose: {
+        type: Function,
+        default: undefined
+    }, onChatShare: {
+        type: Function,
+        default: undefined
+    }, onUserProfile: {
+        type: Function,
+        default: undefined
+    }, onAttachmentUpload: {
+        type: Function,
+        default: undefined
+    }, onAttachmentDownload: {
+        type: Function,
+        default: undefined
+    }, onMessagesScrollToTop: {
+        type: Function,
+        default: undefined
+    }, onMessagesScrollToBottom: {
+        type: Function,
+        default: undefined
+    } });
 exports.default = (0, vue_1.defineComponent)({
     name: 'ChatMainArea',
-    setup(_, { slots }) {
+    props: exports.chatMainAreaProps,
+    setup(props, { slots }) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16;
+        const UChat = (0, vue_1.inject)(interface_1.chatInjectionKey, null);
+        const isStandalone = !UChat;
+        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const mergedThemeRef = (_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 { mergedClsPrefixRef, mergedThemeRef, selectedChatRef, messagesRef, typingChatIdsRef, messagesLoadingRef, messagesLoadingCountRef, headerButtonPropsRef, headerIconPropsRef, headerShareButtonPropsRef, headerProfileButtonPropsRef, headerCloseButtonPropsRef, headerShareIconPropsRef, headerProfileIconPropsRef, messageUploadPropsRef, footerInputPropsRef, footerButtonPropsRef, footerUploadPropsRef, footerIconPropsRef, footerSuffixIconPropsRef, inputPlaceholderRef, retryTextRef, typingTextRef, closeButtonTextRef, shareButtonTooltipRef, profileButtonTooltipRef, unreadNotificationTextRef, notificationsShownSetRef, unreadCountsBeforeReadRef, markNotificationShown, handleMessageSend, handleMessageRetry, handleFooterInputChange, startEditingMessage: startEditingMessageRef, editMessageIdRef, bubbleActionsRef, onAttachmentUpload, onChatClose, onChatShare, onUserProfile, onMessagesScrollToTop, onMessagesScrollToBottom } = (0, vue_1.inject)(interface_1.chatInjectionKey);
+        const selectedChatRef = (_b = UChat === null || UChat === void 0 ? void 0 : UChat.selectedChatRef) !== null && _b !== void 0 ? _b : (0, vue_1.toRef)(props, 'selectedChat');
+        const messagesRef = (_c = UChat === null || UChat === void 0 ? void 0 : UChat.messagesRef) !== null && _c !== void 0 ? _c : (0, vue_1.toRef)(props, 'messages');
+        const typingChatIdsRef = (_d = UChat === null || UChat === void 0 ? void 0 : UChat.typingChatIdsRef) !== null && _d !== void 0 ? _d : (0, vue_1.toRef)(props, 'typingChatIds');
+        const messagesLoadingRef = (_e = UChat === null || UChat === void 0 ? void 0 : UChat.messagesLoadingRef) !== null && _e !== void 0 ? _e : (0, vue_1.toRef)(props, 'loading');
+        const messagesLoadingCountRef = (_f = UChat === null || UChat === void 0 ? void 0 : UChat.messagesLoadingCountRef) !== null && _f !== void 0 ? _f : (0, vue_1.toRef)(props, 'loadingCount');
+        const headerButtonPropsRef = (_g = UChat === null || UChat === void 0 ? void 0 : UChat.headerButtonPropsRef) !== null && _g !== void 0 ? _g : (0, vue_1.toRef)(props, 'headerButtonProps');
+        const headerIconPropsRef = (_h = UChat === null || UChat === void 0 ? void 0 : UChat.headerIconPropsRef) !== null && _h !== void 0 ? _h : (0, vue_1.toRef)(props, 'headerIconProps');
+        const headerShareButtonPropsRef = (_j = UChat === null || UChat === void 0 ? void 0 : UChat.headerShareButtonPropsRef) !== null && _j !== void 0 ? _j : (0, vue_1.toRef)(props, 'headerShareButtonProps');
+        const headerProfileButtonPropsRef = (_k = UChat === null || UChat === void 0 ? void 0 : UChat.headerProfileButtonPropsRef) !== null && _k !== void 0 ? _k : (0, vue_1.toRef)(props, 'headerProfileButtonProps');
+        const headerCloseButtonPropsRef = (_l = UChat === null || UChat === void 0 ? void 0 : UChat.headerCloseButtonPropsRef) !== null && _l !== void 0 ? _l : (0, vue_1.toRef)(props, 'headerCloseButtonProps');
+        const headerShareIconPropsRef = (_m = UChat === null || UChat === void 0 ? void 0 : UChat.headerShareIconPropsRef) !== null && _m !== void 0 ? _m : (0, vue_1.toRef)(props, 'headerShareIconProps');
+        const headerProfileIconPropsRef = (_o = UChat === null || UChat === void 0 ? void 0 : UChat.headerProfileIconPropsRef) !== null && _o !== void 0 ? _o : (0, vue_1.toRef)(props, 'headerProfileIconProps');
+        const messageUploadPropsRef = (_p = UChat === null || UChat === void 0 ? void 0 : UChat.messageUploadPropsRef) !== null && _p !== void 0 ? _p : (0, vue_1.toRef)(props, 'messageUploadProps');
+        const footerInputPropsRef = (_q = UChat === null || UChat === void 0 ? void 0 : UChat.footerInputPropsRef) !== null && _q !== void 0 ? _q : (0, vue_1.toRef)(props, 'footerInputProps');
+        const footerButtonPropsRef = (_r = UChat === null || UChat === void 0 ? void 0 : UChat.footerButtonPropsRef) !== null && _r !== void 0 ? _r : (0, vue_1.toRef)(props, 'footerButtonProps');
+        const footerUploadPropsRef = (_s = UChat === null || UChat === void 0 ? void 0 : UChat.footerUploadPropsRef) !== null && _s !== void 0 ? _s : (0, vue_1.toRef)(props, 'footerUploadProps');
+        const footerIconPropsRef = (_t = UChat === null || UChat === void 0 ? void 0 : UChat.footerIconPropsRef) !== null && _t !== void 0 ? _t : (0, vue_1.toRef)(props, 'footerIconProps');
+        const footerSuffixIconPropsRef = (_u = UChat === null || UChat === void 0 ? void 0 : UChat.footerSuffixIconPropsRef) !== null && _u !== void 0 ? _u : (0, vue_1.toRef)(props, 'footerSuffixIconProps');
+        const inputPlaceholderRef = (_v = UChat === null || UChat === void 0 ? void 0 : UChat.inputPlaceholderRef) !== null && _v !== void 0 ? _v : (0, vue_1.computed)(() => { var _a; return (_a = props.inputPlaceholder) !== null && _a !== void 0 ? _a : localeRef.value.inputPlaceholder; });
+        const retryTextRef = (_w = UChat === null || UChat === void 0 ? void 0 : UChat.retryTextRef) !== null && _w !== void 0 ? _w : (0, vue_1.computed)(() => { var _a; return (_a = props.retryText) !== null && _a !== void 0 ? _a : localeRef.value.retryText; });
+        const typingTextRef = (_x = UChat === null || UChat === void 0 ? void 0 : UChat.typingTextRef) !== null && _x !== void 0 ? _x : (0, vue_1.computed)(() => { var _a; return (_a = props.typingText) !== null && _a !== void 0 ? _a : localeRef.value.typingText; });
+        const closeButtonTextRef = (_y = UChat === null || UChat === void 0 ? void 0 : UChat.closeButtonTextRef) !== null && _y !== void 0 ? _y : (0, vue_1.computed)(() => { var _a; return (_a = props.closeButtonText) !== null && _a !== void 0 ? _a : localeRef.value.closeButtonText; });
+        const shareButtonTooltipRef = (_z = UChat === null || UChat === void 0 ? void 0 : UChat.shareButtonTooltipRef) !== null && _z !== void 0 ? _z : (0, vue_1.computed)(() => { var _a; return (_a = props.shareButtonTooltip) !== null && _a !== void 0 ? _a : localeRef.value.shareButtonTooltip; });
+        const profileButtonTooltipRef = (_0 = UChat === null || UChat === void 0 ? void 0 : UChat.profileButtonTooltipRef) !== null && _0 !== void 0 ? _0 : (0, vue_1.computed)(() => { var _a; return (_a = props.profileButtonTooltip) !== null && _a !== void 0 ? _a : localeRef.value.profileButtonTooltip; });
+        const unreadNotificationTextRef = (_1 = UChat === null || UChat === void 0 ? void 0 : UChat.unreadNotificationTextRef) !== null && _1 !== void 0 ? _1 : (0, vue_1.computed)(() => { var _a; return (_a = props.unreadNotificationText) !== null && _a !== void 0 ? _a : localeRef.value.unreadNotificationText; });
+        const notificationsShownSetRef = (_2 = UChat === null || UChat === void 0 ? void 0 : UChat.notificationsShownSetRef) !== null && _2 !== void 0 ? _2 : (0, vue_1.ref)(new Set());
+        const unreadCountsBeforeReadRef = (_3 = UChat === null || UChat === void 0 ? void 0 : UChat.unreadCountsBeforeReadRef) !== null && _3 !== void 0 ? _3 : (0, vue_1.ref)({});
+        const markNotificationShown = (_4 = UChat === null || UChat === void 0 ? void 0 : UChat.markNotificationShown) !== null && _4 !== void 0 ? _4 : ((chatId) => {
+            notificationsShownSetRef.value.add(chatId);
+            notificationsShownSetRef.value = new Set(notificationsShownSetRef.value);
+        });
+        const editMessageIdRef = (_5 = UChat === null || UChat === void 0 ? void 0 : UChat.editMessageIdRef) !== null && _5 !== void 0 ? _5 : (0, vue_1.ref)(null);
+        const startEditingMessageRef = (_6 = UChat === null || UChat === void 0 ? void 0 : UChat.startEditingMessage) !== null && _6 !== void 0 ? _6 : (0, vue_1.ref)();
+        const bubbleActionsRef = (_7 = UChat === null || UChat === void 0 ? void 0 : UChat.bubbleActionsRef) !== null && _7 !== void 0 ? _7 : (0, vue_1.toRef)(props, 'bubbleActions');
+        const handleMessageSend = (_8 = UChat === null || UChat === void 0 ? void 0 : UChat.handleMessageSend) !== null && _8 !== void 0 ? _8 : ((content, attachments) => { var _a; return (_a = props.onMessageSend) === null || _a === void 0 ? void 0 : _a.call(props, content, attachments); });
+        const handleMessageRetry = (_9 = UChat === null || UChat === void 0 ? void 0 : UChat.handleMessageRetry) !== null && _9 !== void 0 ? _9 : ((message) => { var _a; return (_a = props.onMessageRetry) === null || _a === void 0 ? void 0 : _a.call(props, message); });
+        const handleFooterInputChange = (_10 = UChat === null || UChat === void 0 ? void 0 : UChat.handleFooterInputChange) !== null && _10 !== void 0 ? _10 : ((value, chatId) => { var _a; return (_a = props.onFooterInputChange) === null || _a === void 0 ? void 0 : _a.call(props, value, chatId); });
+        const onAttachmentUpload = (_11 = UChat === null || UChat === void 0 ? void 0 : UChat.onAttachmentUpload) !== null && _11 !== void 0 ? _11 : (0, vue_1.toRef)(props, 'onAttachmentUpload');
+        const onChatClose = (_12 = UChat === null || UChat === void 0 ? void 0 : UChat.onChatClose) !== null && _12 !== void 0 ? _12 : (0, vue_1.toRef)(props, 'onChatClose');
+        const onChatShare = (_13 = UChat === null || UChat === void 0 ? void 0 : UChat.onChatShare) !== null && _13 !== void 0 ? _13 : (0, vue_1.toRef)(props, 'onChatShare');
+        const onUserProfile = (_14 = UChat === null || UChat === void 0 ? void 0 : UChat.onUserProfile) !== null && _14 !== void 0 ? _14 : (0, vue_1.toRef)(props, 'onUserProfile');
+        const onMessagesScrollToTop = (_15 = UChat === null || UChat === void 0 ? void 0 : UChat.onMessagesScrollToTop) !== null && _15 !== void 0 ? _15 : (0, vue_1.toRef)(props, 'onMessagesScrollToTop');
+        const onMessagesScrollToBottom = (_16 = UChat === null || UChat === void 0 ? void 0 : UChat.onMessagesScrollToBottom) !== null && _16 !== void 0 ? _16 : (0, vue_1.toRef)(props, 'onMessagesScrollToBottom');
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut, brandPrimary500, staticGreen, staticRed, textPrimary, textSecondary, textTertiary }, self: { backgroundColor, borderColor, sidebarItemSubtitleColor, mainBackgroundColor, headerBackgroundColor, headerBorderColor, headerTitleColor, messageBubbleBackgroundColorOwn, messageBubbleBackgroundColorOther, messageBubbleTextColorOwn, messageBubbleTextColorOther, messageTimeColor, messageStatusColor, attachmentBackgroundColorOwn, attachmentBackgroundColorOther, footerBackgroundColor, footerBorderColor, inputBackgroundColor, inputBorderColor, inputSuffixColor, unreadNotificationBackgroundColor, unreadNotificationTextColor, typingIndicatorColor, dateSeparatorColor, dateSeparatorBackgroundColor, borderRadius, errorColor } } = mergedThemeRef.value;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-color-primary': brandPrimary500,
+                '--u-color-success': staticGreen,
+                '--u-color-error': errorColor || staticRed,
+                '--u-text-color-base': textPrimary,
+                '--u-text-color-secondary': textSecondary,
+                '--u-text-color-disabled': textTertiary,
+                '--u-background-color': backgroundColor,
+                '--u-border-color': borderColor,
+                '--u-sidebar-item-subtitle-color': sidebarItemSubtitleColor,
+                '--u-main-background-color': mainBackgroundColor,
+                '--u-header-background-color': headerBackgroundColor,
+                '--u-header-border-color': headerBorderColor,
+                '--u-header-title-color': headerTitleColor,
+                '--u-message-bubble-background-color-own': messageBubbleBackgroundColorOwn,
+                '--u-message-bubble-background-color-other': messageBubbleBackgroundColorOther,
+                '--u-message-bubble-text-color-own': messageBubbleTextColorOwn,
+                '--u-message-bubble-text-color-other': messageBubbleTextColorOther,
+                '--u-message-time-color': messageTimeColor,
+                '--u-message-status-color': messageStatusColor,
+                '--u-attachment-background-color-own': attachmentBackgroundColorOwn,
+                '--u-attachment-background-color-other': attachmentBackgroundColorOther,
+                '--u-footer-background-color': footerBackgroundColor,
+                '--u-footer-border-color': footerBorderColor,
+                '--u-input-background-color': inputBackgroundColor,
+                '--u-input-border-color': inputBorderColor,
+                '--u-input-suffix-color': inputSuffixColor,
+                '--u-unread-notification-background-color': unreadNotificationBackgroundColor,
+                '--u-unread-notification-text-color': unreadNotificationTextColor,
+                '--u-typing-indicator-color': typingIndicatorColor,
+                '--u-date-separator-color': dateSeparatorColor,
+                '--u-date-separator-background-color': dateSeparatorBackgroundColor,
+                '--u-border-radius': borderRadius
+            };
+        });
+        const themeClassHandle = (0, _mixins_1.useThemeClass)('chat-main-area', (0, vue_1.computed)(() => ''), cssVarsRef, props);
         const messagesBodyRef = (0, vue_1.ref)();
         const inputRef = (0, vue_1.ref)();
         const inputValue = (0, vue_1.ref)('');
@@ -108,6 +310,11 @@ exports.default = (0, vue_1.defineComponent)({
             }
             lastMessageId.value = currentLastId !== null && currentLastId !== void 0 ? currentLastId : null;
         }, { deep: true, flush: 'post' });
+        (0, vue_1.onMounted)(() => {
+            void (0, vue_1.nextTick)(() => {
+                scrollToBottom();
+            });
+        });
         (0, vue_1.watch)(unreadMessagesCount, (newCount, oldCount) => {
             if (selectedChatRef.value && newCount === 0 && oldCount > 0) {
                 showNotificationManually.value = false;
@@ -154,22 +361,22 @@ exports.default = (0, vue_1.defineComponent)({
             lastScrollTop.value = scrollTop;
         };
         function scrollToBottom() {
-            const el = messagesBodyRef.value;
-            if (!el)
+            const element = messagesBodyRef.value;
+            if (!element)
                 return;
-            if ('$el' in el && el.$el instanceof HTMLElement) {
-                const scrollContainer = el.$el.querySelector('.u-scrollbar-content');
+            if ('$el' in element && element.$el instanceof HTMLElement) {
+                const scrollContainer = element.$el.querySelector('.u-scrollbar-content');
                 if (scrollContainer) {
                     scrollContainer.scrollTop = scrollContainer.scrollHeight;
                     return;
                 }
             }
-            if ('scrollTo' in el && typeof el.scrollTo === 'function') {
-                el.scrollTo({ top: 999999, behavior: 'auto' });
+            if ('scrollTo' in element && typeof element.scrollTo === 'function') {
+                element.scrollTo({ top: 999999, behavior: 'auto' });
                 return;
             }
-            if ('scrollTop' in el && 'scrollHeight' in el) {
-                el.scrollTop = el.scrollHeight;
+            if ('scrollTop' in element && 'scrollHeight' in element) {
+                element.scrollTop = element.scrollHeight;
             }
         }
         const toKeyString = (value) => {
@@ -404,7 +611,7 @@ exports.default = (0, vue_1.defineComponent)({
                 (0, vue_1.h)(upload_1.UUpload, Object.assign({ abstract: true, multiple: true, defaultUpload: false, fileList: attachmentFileList.value, onUpdateFileList: !handleOnChange() ? handleFileListUpdate : undefined }, footerUploadPropsRef.value, { onChange: handleOnChange() }), {
                     default: () => ((0, vue_1.h)(flex_1.UFlex, { align: "end", size: "small", wrap: false, class: `${mergedClsPrefixRef.value}-chat-main__input-container` }, {
                         default: () => ((0, vue_1.h)(vue_1.Fragment, null,
-                            (0, vue_1.h)(upload_1.UUploadTrigger, { abstract: true }, {
+                            props.showAttachButton && ((0, vue_1.h)(upload_1.UUploadTrigger, { abstract: true }, {
                                 default: ({ handleClick }) => {
                                     var _a;
                                     return ((0, vue_1.h)(button_1.UButton, Object.assign({ secondary: true, size: "large", class: `${mergedClsPrefixRef.value}-chat-main__attach-btn` }, footerButtonPropsRef.value, { disabled: ((_a = footerInputPropsRef.value) === null || _a === void 0 ? void 0 : _a.disabled)
@@ -416,7 +623,7 @@ exports.default = (0, vue_1.defineComponent)({
                                         }))
                                     }));
                                 }
-                            }),
+                            })),
                             (0, vue_1.h)(input_1.UInput, Object.assign({ ref: "inputRef", value: inputValue.value, placeholder: inputPlaceholderRef.value, class: `${mergedClsPrefixRef.value}-chat-main__input`, theme: mergedThemeRef.value.peers.Input, themeOverrides: mergedThemeRef.value.peerOverrides.Input, type: "textarea", autosize: {
                                     minRows: 1,
                                     maxRows: 5
@@ -445,7 +652,60 @@ exports.default = (0, vue_1.defineComponent)({
                     }))
                 })));
         };
+        if (isStandalone) {
+            (0, vue_1.provide)(interface_1.chatInjectionKey, {
+                mergedClsPrefixRef,
+                mergedThemeRef,
+                selectedChatRef,
+                messagesRef,
+                typingChatIdsRef,
+                messagesLoadingRef,
+                messagesLoadingCountRef,
+                headerButtonPropsRef,
+                headerIconPropsRef,
+                headerShareButtonPropsRef,
+                headerProfileButtonPropsRef,
+                headerCloseButtonPropsRef,
+                headerShareIconPropsRef,
+                headerProfileIconPropsRef,
+                messageUploadPropsRef,
+                footerInputPropsRef,
+                footerButtonPropsRef,
+                footerUploadPropsRef,
+                footerIconPropsRef,
+                footerSuffixIconPropsRef,
+                inputPlaceholderRef,
+                retryTextRef,
+                typingTextRef,
+                closeButtonTextRef,
+                shareButtonTooltipRef,
+                profileButtonTooltipRef,
+                unreadNotificationTextRef,
+                notificationsShownSetRef,
+                unreadCountsBeforeReadRef,
+                markNotificationShown,
+                handleMessageSend,
+                handleMessageRetry,
+                handleFooterInputChange,
+                startEditingMessage: startEditingMessageRef,
+                editMessageIdRef,
+                bubbleActionsRef,
+                onAttachmentUpload,
+                onAttachmentDownload: (0, vue_1.toRef)(props, 'onAttachmentDownload'),
+                onChatClose,
+                onChatShare,
+                onUserProfile,
+                onMessagesScrollToTop,
+                onMessagesScrollToBottom
+            });
+        }
         return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedTheme: mergedThemeRef,
+            cssVars: cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
+            isStandalone,
             renderHeader,
             renderMessages,
             renderEditingBlock,
@@ -460,12 +720,21 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { mergedClsPrefixRef } = (0, vue_1.inject)(interface_1.chatInjectionKey);
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main` },
-            this.renderHeader(),
-            (0, vue_1.h)(safe_top_scrollbar_1.USafeTopScrollbar, { ref: "messagesBodyRef", class: `${mergedClsPrefixRef.value}-chat-main__body`, onScroll: this.handleMessagesScroll }, {
+        var _a;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        const { mergedClsPrefix } = this;
+        const mainArea = ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-chat-main`,
+                this.isStandalone && `${mergedClsPrefix}-chat-main--standalone`
+            ] },
+            !this.isStandalone && this.renderHeader(),
+            (0, vue_1.h)(safe_top_scrollbar_1.USafeTopScrollbar, { ref: "messagesBodyRef", class: `${mergedClsPrefix}-chat-main__body`, onScroll: this.handleMessagesScroll }, {
                 default: () => this.renderMessages()
             }),
             this.renderFooter()));
+        if (!this.isStandalone) {
+            return mainArea;
+        }
+        return ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-chat`, this.themeClass], style: this.cssVars }, mainArea));
     }
 });

package/lib/chat/src/ChatMessages.d.ts

@@ -7226,39 +7226,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     renderSkeletonMessage: (isOwn: boolean, index: number) => JSX.Element;
     renderDateSeparator: (date: string) => JSX.Element;
     renderUnreadNotification: () => JSX.Element;
-    contextMenuShow: import("vue").Ref<boolean, boolean>;
-    contextMenuMessage: import("vue").Ref<ChatMessageData | undefined, ChatMessageData | undefined>;
-    messageContextMenuOptions: import("vue").ComputedRef<import("../..").MenuOption[] | undefined>;
-    handleContextMenuSelect: (key: string) => void;
-    cssVars: import("vue").ComputedRef<{
-        '--u-bezier': string;
-        '--u-color-primary': string;
-        '--u-color-success': string;
-        '--u-color-error': string;
-        '--u-text-color-base': string;
-        '--u-text-color-secondary': string;
-        '--u-text-color-disabled': string;
-        '--u-background-color': string;
-        '--u-border-color': string;
-        '--u-main-background-color': string;
-        '--u-header-background-color': string;
-        '--u-header-border-color': string;
-        '--u-header-title-color': string;
-        '--u-message-bubble-background-color-own': string;
-        '--u-message-bubble-background-color-other': string;
-        '--u-message-bubble-text-color-own': string;
-        '--u-message-bubble-text-color-other': string;
-        '--u-message-time-color': string;
-        '--u-message-status-color': string;
-        '--u-attachment-background-color-own': string;
-        '--u-attachment-background-color-other': string;
-        '--u-unread-notification-background-color': string;
-        '--u-unread-notification-text-color': string;
-        '--u-typing-indicator-color': string;
-        '--u-date-separator-color': string;
-        '--u-date-separator-background-color': string;
-        '--u-border-radius': string;
-    }>;
+    cssVars: import("vue").ComputedRef<Record<string, string>>;
     themeClass: import("vue").Ref<string, string>;
     onRender: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{