@uzum-tech/ui 2.2.0 → 2.3.0

package/es/chat/src/{ChatParts/MainArea.mjs → ChatMainArea.mjs}

@@ -25,74 +25,341 @@ var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, gene
     step((generator = generator.apply(thisArg, _arguments || [])).next());
   });
 };
-import { computed, defineComponent, Fragment, h, inject, nextTick, ref, watch } from 'vue';
-import { ArrowHookUpRight, AttachIcon, CloseIcon, PersonNote, SendFilled } from "../../../_internal/icons/index.mjs";
-import { useLocale } from "../../../_mixins/index.mjs";
-import { resolveSlot } from "../../../_utils/index.mjs";
-import { UButton } from "../../../button/index.mjs";
-import { UFlex } from "../../../flex/index.mjs";
-import { UIcon } from "../../../icon/index.mjs";
-import { UInput } from "../../../input/index.mjs";
-import { UList, UListItem } from "../../../list/index.mjs";
-import { USafeTopScrollbar } from "../../../safe-top-scrollbar/index.mjs";
-import { UTooltip } from "../../../tooltip/index.mjs";
-import { UText } from "../../../typography/index.mjs";
-import { UUpload, UUploadTrigger } from "../../../upload/index.mjs";
-import UChatMessages from "../ChatMessages.mjs";
-import { ChatBubbleActionKey, chatInjectionKey, ChatMessageType, MessageStatus } from "../interface.mjs";
+import { computed, defineComponent, Fragment, h, inject, nextTick, onMounted, provide, ref, toRef, watch } from 'vue';
+import { ArrowHookUpRight, AttachIcon, CloseIcon, PersonNote, SendFilled } from "../../_internal/icons/index.mjs";
+import { useConfig, useLocale, useTheme, useThemeClass } from "../../_mixins/index.mjs";
+import { resolveSlot } from "../../_utils/index.mjs";
+import { UButton } from "../../button/index.mjs";
+import { UFlex } from "../../flex/index.mjs";
+import { UIcon } from "../../icon/index.mjs";
+import { UInput } from "../../input/index.mjs";
+import { UList, UListItem } from "../../list/index.mjs";
+import { USafeTopScrollbar } from "../../safe-top-scrollbar/index.mjs";
+import { UTooltip } from "../../tooltip/index.mjs";
+import { UText } from "../../typography/index.mjs";
+import { UUpload, UUploadTrigger } from "../../upload/index.mjs";
+import { chatLight } from "../styles/index.mjs";
+import UChatMessages from "./ChatMessages.mjs";
+import { ChatBubbleActionKey, chatInjectionKey, ChatMessageType, MessageStatus } from "./interface.mjs";
+import style from "./styles/index.cssr.mjs";
 const SENDING_DELAY = 100;
+export const chatMainAreaProps = Object.assign(Object.assign({}, 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
+  }
+});
 export default defineComponent({
   name: 'ChatMainArea',
-  setup(_, {
+  props: 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 = inject(chatInjectionKey, null);
+    const isStandalone = !UChat;
+    const {
+      mergedClsPrefixRef
+    } = useConfig(props);
+    const mergedThemeRef = (_a = UChat === null || UChat === void 0 ? void 0 : UChat.mergedThemeRef) !== null && _a !== void 0 ? _a : useTheme('Chat', '-chat', style, chatLight, props, mergedClsPrefixRef);
     const {
       localeRef
     } = 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
-    } = inject(chatInjectionKey);
+    const selectedChatRef = (_b = UChat === null || UChat === void 0 ? void 0 : UChat.selectedChatRef) !== null && _b !== void 0 ? _b : toRef(props, 'selectedChat');
+    const messagesRef = (_c = UChat === null || UChat === void 0 ? void 0 : UChat.messagesRef) !== null && _c !== void 0 ? _c : toRef(props, 'messages');
+    const typingChatIdsRef = (_d = UChat === null || UChat === void 0 ? void 0 : UChat.typingChatIdsRef) !== null && _d !== void 0 ? _d : toRef(props, 'typingChatIds');
+    const messagesLoadingRef = (_e = UChat === null || UChat === void 0 ? void 0 : UChat.messagesLoadingRef) !== null && _e !== void 0 ? _e : toRef(props, 'loading');
+    const messagesLoadingCountRef = (_f = UChat === null || UChat === void 0 ? void 0 : UChat.messagesLoadingCountRef) !== null && _f !== void 0 ? _f : toRef(props, 'loadingCount');
+    const headerButtonPropsRef = (_g = UChat === null || UChat === void 0 ? void 0 : UChat.headerButtonPropsRef) !== null && _g !== void 0 ? _g : toRef(props, 'headerButtonProps');
+    const headerIconPropsRef = (_h = UChat === null || UChat === void 0 ? void 0 : UChat.headerIconPropsRef) !== null && _h !== void 0 ? _h : toRef(props, 'headerIconProps');
+    const headerShareButtonPropsRef = (_j = UChat === null || UChat === void 0 ? void 0 : UChat.headerShareButtonPropsRef) !== null && _j !== void 0 ? _j : toRef(props, 'headerShareButtonProps');
+    const headerProfileButtonPropsRef = (_k = UChat === null || UChat === void 0 ? void 0 : UChat.headerProfileButtonPropsRef) !== null && _k !== void 0 ? _k : toRef(props, 'headerProfileButtonProps');
+    const headerCloseButtonPropsRef = (_l = UChat === null || UChat === void 0 ? void 0 : UChat.headerCloseButtonPropsRef) !== null && _l !== void 0 ? _l : toRef(props, 'headerCloseButtonProps');
+    const headerShareIconPropsRef = (_m = UChat === null || UChat === void 0 ? void 0 : UChat.headerShareIconPropsRef) !== null && _m !== void 0 ? _m : toRef(props, 'headerShareIconProps');
+    const headerProfileIconPropsRef = (_o = UChat === null || UChat === void 0 ? void 0 : UChat.headerProfileIconPropsRef) !== null && _o !== void 0 ? _o : toRef(props, 'headerProfileIconProps');
+    const messageUploadPropsRef = (_p = UChat === null || UChat === void 0 ? void 0 : UChat.messageUploadPropsRef) !== null && _p !== void 0 ? _p : toRef(props, 'messageUploadProps');
+    const footerInputPropsRef = (_q = UChat === null || UChat === void 0 ? void 0 : UChat.footerInputPropsRef) !== null && _q !== void 0 ? _q : toRef(props, 'footerInputProps');
+    const footerButtonPropsRef = (_r = UChat === null || UChat === void 0 ? void 0 : UChat.footerButtonPropsRef) !== null && _r !== void 0 ? _r : toRef(props, 'footerButtonProps');
+    const footerUploadPropsRef = (_s = UChat === null || UChat === void 0 ? void 0 : UChat.footerUploadPropsRef) !== null && _s !== void 0 ? _s : toRef(props, 'footerUploadProps');
+    const footerIconPropsRef = (_t = UChat === null || UChat === void 0 ? void 0 : UChat.footerIconPropsRef) !== null && _t !== void 0 ? _t : toRef(props, 'footerIconProps');
+    const footerSuffixIconPropsRef = (_u = UChat === null || UChat === void 0 ? void 0 : UChat.footerSuffixIconPropsRef) !== null && _u !== void 0 ? _u : toRef(props, 'footerSuffixIconProps');
+    const inputPlaceholderRef = (_v = UChat === null || UChat === void 0 ? void 0 : UChat.inputPlaceholderRef) !== null && _v !== void 0 ? _v : 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 : 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 : 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 : 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 : 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 : 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 : 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 : ref(new Set());
+    const unreadCountsBeforeReadRef = (_3 = UChat === null || UChat === void 0 ? void 0 : UChat.unreadCountsBeforeReadRef) !== null && _3 !== void 0 ? _3 : 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 : ref(null);
+    const startEditingMessageRef = (_6 = UChat === null || UChat === void 0 ? void 0 : UChat.startEditingMessage) !== null && _6 !== void 0 ? _6 : ref();
+    const bubbleActionsRef = (_7 = UChat === null || UChat === void 0 ? void 0 : UChat.bubbleActionsRef) !== null && _7 !== void 0 ? _7 : 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 : toRef(props, 'onAttachmentUpload');
+    const onChatClose = (_12 = UChat === null || UChat === void 0 ? void 0 : UChat.onChatClose) !== null && _12 !== void 0 ? _12 : toRef(props, 'onChatClose');
+    const onChatShare = (_13 = UChat === null || UChat === void 0 ? void 0 : UChat.onChatShare) !== null && _13 !== void 0 ? _13 : toRef(props, 'onChatShare');
+    const onUserProfile = (_14 = UChat === null || UChat === void 0 ? void 0 : UChat.onUserProfile) !== null && _14 !== void 0 ? _14 : toRef(props, 'onUserProfile');
+    const onMessagesScrollToTop = (_15 = UChat === null || UChat === void 0 ? void 0 : UChat.onMessagesScrollToTop) !== null && _15 !== void 0 ? _15 : toRef(props, 'onMessagesScrollToTop');
+    const onMessagesScrollToBottom = (_16 = UChat === null || UChat === void 0 ? void 0 : UChat.onMessagesScrollToBottom) !== null && _16 !== void 0 ? _16 : toRef(props, 'onMessagesScrollToBottom');
+    const cssVarsRef = 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 = useThemeClass('chat-main-area', computed(() => ''), cssVarsRef, props);
     const messagesBodyRef = ref();
     const inputRef = ref();
     const inputValue = ref('');
@@ -166,6 +433,11 @@ export default defineComponent({
       deep: true,
       flush: 'post'
     });
+    onMounted(() => {
+      void nextTick(() => {
+        scrollToBottom();
+      });
+    });
     watch(unreadMessagesCount, (newCount, oldCount) => {
       if (selectedChatRef.value && newCount === 0 && oldCount > 0) {
         showNotificationManually.value = false;
@@ -213,24 +485,24 @@ export default defineComponent({
       lastScrollTop.value = scrollTop;
     };
     function scrollToBottom() {
-      const el = messagesBodyRef.value;
-      if (!el) return;
-      if ('$el' in el && el.$el instanceof HTMLElement) {
-        const scrollContainer = el.$el.querySelector('.u-scrollbar-content');
+      const element = messagesBodyRef.value;
+      if (!element) return;
+      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({
+      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 => {
@@ -556,7 +828,7 @@ export default defineComponent({
           wrap: false,
           class: `${mergedClsPrefixRef.value}-chat-main__input-container`
         }, {
-          default: () => h(Fragment, null, h(UUploadTrigger, {
+          default: () => h(Fragment, null, props.showAttachButton && h(UUploadTrigger, {
             abstract: true
           }, {
             default: ({
@@ -626,7 +898,60 @@ export default defineComponent({
         })
       }));
     };
+    if (isStandalone) {
+      provide(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: 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,
@@ -641,17 +966,26 @@ export default defineComponent({
     };
   },
   render() {
+    var _a;
+    (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
     const {
-      mergedClsPrefixRef
-    } = inject(chatInjectionKey);
-    return h("div", {
-      class: `${mergedClsPrefixRef.value}-chat-main`
-    }, this.renderHeader(), h(USafeTopScrollbar, {
+      mergedClsPrefix
+    } = this;
+    const mainArea = h("div", {
+      class: [`${mergedClsPrefix}-chat-main`, this.isStandalone && `${mergedClsPrefix}-chat-main--standalone`]
+    }, !this.isStandalone && this.renderHeader(), h(USafeTopScrollbar, {
       ref: "messagesBodyRef",
-      class: `${mergedClsPrefixRef.value}-chat-main__body`,
+      class: `${mergedClsPrefix}-chat-main__body`,
       onScroll: this.handleMessagesScroll
     }, {
       default: () => this.renderMessages()
     }), this.renderFooter());
+    if (!this.isStandalone) {
+      return mainArea;
+    }
+    return h("div", {
+      class: [`${mergedClsPrefix}-chat`, this.themeClass],
+      style: this.cssVars
+    }, mainArea);
   }
 });

package/es/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<{