@uzum-tech/ui 2.0.1 → 2.0.3

package/es/mapping-card/src/styles/index.cssr.mjs

@@ -87,6 +87,13 @@ export default c([cB('mapping-card', `
  color: var(--u-arrow-color);
  font-size: 16px;
  flex-shrink: 0;
- `)]), cB('mapping-card-list', [cE('pagination', `
+ `)]), cB('mapping-card-list', `
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ height: 100%;
+ `, [cE('pagination', `
  margin-top: 16px;
+ `), cE('empty', `
+ margin: auto;
  `)])]);

package/es/modal/src/BodyWrapper.d.ts

@@ -55,6 +55,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    contentClass: StringConstructor;
+    contentScrollable: BooleanConstructor;
+    contentStyle: PropType<import("vue").CSSProperties | string>;
+    headerStyle: PropType<import("vue").CSSProperties | string>;
+    headerExtraStyle: PropType<import("vue").CSSProperties | string>;
+    footerStyle: PropType<import("vue").CSSProperties | string>;
+    embedded: BooleanConstructor;
+    segmented: {
+        readonly type: PropType<boolean | import("../..").CardSegmented>;
+        readonly default: false;
+    };
+    hoverable: BooleanConstructor;
+    role: StringConstructor;
+    tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: "div";
+    };
     show: {
         type: BooleanConstructor;
         required: true;
@@ -1283,6 +1300,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    contentClass: StringConstructor;
+    contentScrollable: BooleanConstructor;
+    contentStyle: PropType<import("vue").CSSProperties | string>;
+    headerStyle: PropType<import("vue").CSSProperties | string>;
+    headerExtraStyle: PropType<import("vue").CSSProperties | string>;
+    footerStyle: PropType<import("vue").CSSProperties | string>;
+    embedded: BooleanConstructor;
+    segmented: {
+        readonly type: PropType<boolean | import("../..").CardSegmented>;
+        readonly default: false;
+    };
+    hoverable: BooleanConstructor;
+    role: StringConstructor;
+    tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: "div";
+    };
     show: {
         type: BooleanConstructor;
         required: true;
@@ -1310,8 +1344,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     type: "default" | "error" | "warning" | "success" | "info";
     size: "small" | "medium" | "large";
     loading: boolean;
+    tag: keyof HTMLElementTagNameMap;
     showIcon: boolean;
     closable: boolean;
+    contentScrollable: boolean;
+    embedded: boolean;
+    segmented: boolean | import("../..").CardSegmented;
+    hoverable: boolean;
     draggable: boolean | ModalDraggableOptions;
     trapFocus: boolean;
     autoFocus: boolean;

package/es/modal/src/Modal.d.ts

@@ -51,6 +51,23 @@ export declare const modalProps: {
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    contentClass: StringConstructor;
+    contentScrollable: BooleanConstructor;
+    contentStyle: PropType<CSSProperties | string>;
+    headerStyle: PropType<CSSProperties | string>;
+    headerExtraStyle: PropType<CSSProperties | string>;
+    footerStyle: PropType<CSSProperties | string>;
+    embedded: BooleanConstructor;
+    segmented: {
+        readonly type: PropType<boolean | import("../..").CardSegmented>;
+        readonly default: false;
+    };
+    hoverable: BooleanConstructor;
+    role: StringConstructor;
+    tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: "div";
+    };
     show: BooleanConstructor;
     unstableShowMask: {
         type: BooleanConstructor;
@@ -1097,6 +1114,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    contentClass: StringConstructor;
+    contentScrollable: BooleanConstructor;
+    contentStyle: PropType<CSSProperties | string>;
+    headerStyle: PropType<CSSProperties | string>;
+    headerExtraStyle: PropType<CSSProperties | string>;
+    footerStyle: PropType<CSSProperties | string>;
+    embedded: BooleanConstructor;
+    segmented: {
+        readonly type: PropType<boolean | import("../..").CardSegmented>;
+        readonly default: false;
+    };
+    hoverable: BooleanConstructor;
+    role: StringConstructor;
+    tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: "div";
+    };
     show: BooleanConstructor;
     unstableShowMask: {
         type: BooleanConstructor;
@@ -2159,6 +2193,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    contentClass: StringConstructor;
+    contentScrollable: BooleanConstructor;
+    contentStyle: PropType<CSSProperties | string>;
+    headerStyle: PropType<CSSProperties | string>;
+    headerExtraStyle: PropType<CSSProperties | string>;
+    footerStyle: PropType<CSSProperties | string>;
+    embedded: BooleanConstructor;
+    segmented: {
+        readonly type: PropType<boolean | import("../..").CardSegmented>;
+        readonly default: false;
+    };
+    hoverable: BooleanConstructor;
+    role: StringConstructor;
+    tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: "div";
+    };
     show: BooleanConstructor;
     unstableShowMask: {
         type: BooleanConstructor;
@@ -3155,9 +3206,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     type: "default" | "error" | "warning" | "success" | "info";
     size: "small" | "medium" | "large";
     loading: boolean;
+    tag: keyof HTMLElementTagNameMap;
     showIcon: boolean;
     closable: boolean;
     show: boolean;
+    contentScrollable: boolean;
+    embedded: boolean;
+    segmented: boolean | import("../..").CardSegmented;
+    hoverable: boolean;
     displayDirective: "show" | "if";
     maskClosable: boolean;
     trapFocus: boolean;

package/es/modal/src/ModalEnvironment.d.ts

@@ -55,6 +55,23 @@ export declare const UModalEnvironment: import("vue").DefineComponent<import("vu
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    contentClass: StringConstructor;
+    contentScrollable: BooleanConstructor;
+    contentStyle: PropType<import("vue").CSSProperties | string>;
+    headerStyle: PropType<import("vue").CSSProperties | string>;
+    headerExtraStyle: PropType<import("vue").CSSProperties | string>;
+    footerStyle: PropType<import("vue").CSSProperties | string>;
+    embedded: BooleanConstructor;
+    segmented: {
+        readonly type: PropType<boolean | import("../..").CardSegmented>;
+        readonly default: false;
+    };
+    hoverable: BooleanConstructor;
+    role: StringConstructor;
+    tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: "div";
+    };
     show: BooleanConstructor;
     unstableShowMask: {
         type: BooleanConstructor;
@@ -1112,6 +1129,23 @@ export declare const UModalEnvironment: import("vue").DefineComponent<import("vu
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    contentClass: StringConstructor;
+    contentScrollable: BooleanConstructor;
+    contentStyle: PropType<import("vue").CSSProperties | string>;
+    headerStyle: PropType<import("vue").CSSProperties | string>;
+    headerExtraStyle: PropType<import("vue").CSSProperties | string>;
+    footerStyle: PropType<import("vue").CSSProperties | string>;
+    embedded: BooleanConstructor;
+    segmented: {
+        readonly type: PropType<boolean | import("../..").CardSegmented>;
+        readonly default: false;
+    };
+    hoverable: BooleanConstructor;
+    role: StringConstructor;
+    tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: "div";
+    };
     show: BooleanConstructor;
     unstableShowMask: {
         type: BooleanConstructor;
@@ -2108,9 +2142,14 @@ export declare const UModalEnvironment: import("vue").DefineComponent<import("vu
     type: "default" | "error" | "warning" | "success" | "info";
     size: "small" | "medium" | "large";
     loading: boolean;
+    tag: keyof HTMLElementTagNameMap;
     showIcon: boolean;
     closable: boolean;
     show: boolean;
+    contentScrollable: boolean;
+    embedded: boolean;
+    segmented: boolean | import("../..").CardSegmented;
+    hoverable: boolean;
     displayDirective: "show" | "if";
     maskClosable: boolean;
     trapFocus: boolean;

package/es/modal/src/presetProps.d.ts

@@ -31,6 +31,23 @@ declare const presetProps: {
     onPositiveClick: PropType<(e: MouseEvent) => void>;
     onNegativeClick: PropType<(e: MouseEvent) => void>;
     onClose: PropType<() => void>;
+    contentClass: StringConstructor;
+    contentScrollable: BooleanConstructor;
+    contentStyle: PropType<import("vue").CSSProperties | string>;
+    headerStyle: PropType<import("vue").CSSProperties | string>;
+    headerExtraStyle: PropType<import("vue").CSSProperties | string>;
+    footerStyle: PropType<import("vue").CSSProperties | string>;
+    embedded: BooleanConstructor;
+    segmented: {
+        readonly type: PropType<boolean | import("../..").CardSegmented>;
+        readonly default: false;
+    };
+    hoverable: BooleanConstructor;
+    role: StringConstructor;
+    tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: "div";
+    };
 };
-declare const presetPropsKeys: ("bordered" | "icon" | "type" | "content" | "body" | "title" | "size" | "positiveText" | "negativeText" | "loading" | "showIcon" | "closable" | "onClose" | "iconPlacement" | "positiveButtonProps" | "negativeButtonProps" | "action" | "onPositiveClick" | "onNegativeClick")[];
+declare const presetPropsKeys: ("bordered" | "icon" | "type" | "content" | "body" | "title" | "size" | "positiveText" | "negativeText" | "loading" | "tag" | "showIcon" | "closable" | "onClose" | "contentClass" | "contentStyle" | "iconPlacement" | "contentScrollable" | "headerStyle" | "headerExtraStyle" | "footerStyle" | "embedded" | "segmented" | "hoverable" | "role" | "positiveButtonProps" | "negativeButtonProps" | "action" | "onPositiveClick" | "onNegativeClick")[];
 export { presetProps, presetPropsKeys };

package/es/modal/src/presetProps.mjs

@@ -1,6 +1,7 @@
 import { keysOf } from "../../_utils/index.mjs";
+import { cardBaseProps } from "../../card/src/Card.mjs";
 import { dialogProps } from "../../dialog/src/dialogProps.mjs";
-const presetProps = Object.assign(Object.assign({}, dialogProps), {
+const presetProps = Object.assign(Object.assign(Object.assign({}, cardBaseProps), dialogProps), {
   size: {
     type: String,
     default: 'medium'

package/es/notification/src/NotificationEnvironment.d.ts

@@ -1,6 +1,7 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 export declare const notificationEnvOptions: {
     readonly duration: NumberConstructor;
+    readonly pauseOnVisibilityChange: BooleanConstructor;
     readonly onClose: PropType<() => Promise<boolean> | boolean | any>;
     readonly onLeave: PropType<() => void>;
     readonly onAfterEnter: PropType<() => void>;
@@ -41,6 +42,7 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<Extr
         required: true;
     };
     duration: NumberConstructor;
+    pauseOnVisibilityChange: BooleanConstructor;
     onClose: PropType<() => Promise<boolean> | boolean | any>;
     onLeave: PropType<() => void>;
     onAfterEnter: PropType<() => void>;
@@ -87,6 +89,7 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<Extr
         required: true;
     };
     duration: NumberConstructor;
+    pauseOnVisibilityChange: BooleanConstructor;
     onClose: PropType<() => Promise<boolean> | boolean | any>;
     onLeave: PropType<() => void>;
     onAfterEnter: PropType<() => void>;
@@ -116,5 +119,6 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<Extr
     type: "default" | "error" | "warning" | "success" | "info" | "primary";
     closable: boolean;
     keepAliveOnHover: boolean;
+    pauseOnVisibilityChange: boolean;
     hideIcon: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/notification/src/NotificationEnvironment.mjs

@@ -1,9 +1,10 @@
-import { defineComponent, h, inject, nextTick, onMounted, ref, Transition } from 'vue';
+import { defineComponent, h, inject, nextTick, onBeforeUnmount, onMounted, ref, Transition } from 'vue';
 import { keep } from "../../_utils/index.mjs";
 import { notificationProviderInjectionKey } from "./context.mjs";
 import { Notification, notificationPropKeys, notificationProps } from "./Notification.mjs";
 export const notificationEnvOptions = Object.assign(Object.assign({}, notificationProps), {
   duration: Number,
+  pauseOnVisibilityChange: Boolean,
   onClose: Function,
   onLeave: Function,
   onAfterEnter: Function,
@@ -34,10 +35,42 @@ export const NotificationEnvironment = defineComponent({
     } = inject(notificationProviderInjectionKey);
     const showRef = ref(true);
     let timerId = null;
+    let remainingDuration = null;
+    let timerStartedAt = null;
+    let timerPausedForVisibility = false;
+    function clearTimer() {
+      if (timerId !== null) {
+        window.clearTimeout(timerId);
+        timerId = null;
+      }
+    }
     function hide() {
       showRef.value = false;
-      if (timerId) {
-        window.clearTimeout(timerId);
+      clearTimer();
+    }
+    function startTimer(duration) {
+      clearTimer();
+      remainingDuration = duration;
+      timerStartedAt = Date.now();
+      timerId = window.setTimeout(hide, duration);
+    }
+    function handleVisibilityChange() {
+      if (document.visibilityState === 'hidden') {
+        if (timerId !== null) {
+          clearTimer();
+          if (timerStartedAt !== null && remainingDuration !== null) {
+            remainingDuration = Math.max(0, remainingDuration - (Date.now() - timerStartedAt));
+          }
+          timerStartedAt = null;
+          timerPausedForVisibility = true;
+        }
+      } else if (timerPausedForVisibility) {
+        timerPausedForVisibility = false;
+        if (remainingDuration !== null && remainingDuration > 0) {
+          startTimer(remainingDuration);
+        } else {
+          hide();
+        }
       }
     }
     function handleBeforeEnter(el) {
@@ -95,15 +128,12 @@ export const NotificationEnvironment = defineComponent({
         duration
       } = props;
       if (duration) {
-        timerId = window.setTimeout(hide, duration);
+        startTimer(duration);
       }
     }
     function handleMouseenter(e) {
       if (e.currentTarget !== e.target) return;
-      if (timerId !== null) {
-        window.clearTimeout(timerId);
-        timerId = null;
-      }
+      clearTimer();
     }
     function handleMouseleave(e) {
       if (e.currentTarget !== e.target) return;
@@ -124,9 +154,15 @@ export const NotificationEnvironment = defineComponent({
     }
     onMounted(() => {
       if (props.duration) {
-        timerId = window.setTimeout(hide, props.duration);
+        startTimer(props.duration);
+      }
+      if (props.pauseOnVisibilityChange) {
+        document.addEventListener('visibilitychange', handleVisibilityChange);
       }
     });
+    onBeforeUnmount(() => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    });
     return {
       show: showRef,
       hide,

package/es/notification/src/NotificationProvider.d.ts

@@ -741,6 +741,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         type?: "default" | "error" | "warning" | "success" | "info" | "primary" | undefined;
         closable?: boolean | undefined;
         keepAliveOnHover?: boolean | undefined;
+        pauseOnVisibilityChange?: boolean | undefined;
         hideIcon?: boolean | undefined;
         avatar?: (() => import("vue").VNodeChild) | undefined;
         content?: string | (() => import("vue").VNodeChild) | undefined;
@@ -766,6 +767,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         type?: "default" | "error" | "warning" | "success" | "info" | "primary" | undefined;
         closable?: boolean | undefined;
         keepAliveOnHover?: boolean | undefined;
+        pauseOnVisibilityChange?: boolean | undefined;
         hideIcon?: boolean | undefined;
         avatar?: (() => import("vue").VNodeChild) | undefined;
         content?: string | (() => import("vue").VNodeChild) | undefined;

package/es/notification/src/styles/index.cssr.d.ts

@@ -1,3 +1,2 @@
-import type { CNode } from 'css-render';
-declare const _default: CNode;
+declare const _default: import("css-render").CNode;
 export default _default;

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

@@ -31,12 +31,16 @@ import { c, cB, cE, cM } from "../../../_utils/cssr/index.mjs";
 export default c([cB('notification-container', `
  z-index: 4000;
  position: fixed;
+ left: 0;
+ right: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
+ pointer-events: none;
  `, [c('>', [cB('scrollbar', `
- width: initial;
+ width: -moz-fit-content;
+ width: fit-content;
  overflow: visible;
  height: -moz-fit-content !important;
  height: fit-content !important;
@@ -62,8 +66,7 @@ export default c([cB('notification-container', `
  margin-bottom: 0;
  margin-top: 12px;
  `)]), cM('top, bottom', `
- left: 50%;
- transform: translateX(-50%);
+ align-items: center;
  `, [cB('notification-wrapper', [c('&.notification-transition-enter-from, &.notification-transition-leave-to', `
  transform: scale(0.85);
  `), c('&.notification-transition-leave-from, &.notification-transition-enter-to', `
@@ -72,15 +75,11 @@ export default c([cB('notification-container', `
  transform-origin: top center;
  `)]), cM('bottom', [cB('notification-wrapper', `
  transform-origin: bottom center;
- `)]), cM('top-right', `
- right: 0;
- `, [placementTransformStyle('top-right')]), cM('top-left', `
- left: 0;
- `, [placementTransformStyle('top-left')]), cM('bottom-right', `
- right: 0;
- `, [placementTransformStyle('bottom-right')]), cM('bottom-left', `
- left: 0;
- `, [placementTransformStyle('bottom-left')]), cM('scrollable', [cM('top-right', `
+ `)]), cM('top-right, bottom-right', `
+ align-items: flex-end;
+ `), cM('top-left, bottom-left', `
+ align-items: flex-start;
+ `), cM('scrollable', [cM('top-right', `
  top: 0;
  `), cM('top-left', `
  top: 0;
@@ -117,6 +116,7 @@ export default c([cB('notification-container', `
  `)]), cB('notification', `
  background-color: var(--u-color);
  color: var(--u-text-color);
+ pointer-events: auto;
  transition:
  background-color .3s var(--u-bezier),
  color .3s var(--u-bezier),
@@ -214,14 +214,4 @@ export default c([cB('notification-container', `
  color: var(--u-text-color);
  `, [c('&:first-child', {
   margin: 0
-})])])])])]);
-function placementTransformStyle(placement) {
-  const direction = placement.split('-')[1];
-  const transformXEnter = direction === 'left' ? 'calc(-100%)' : 'calc(100%)';
-  const transformXLeave = '0';
-  return cB('notification-wrapper', [c('&.notification-transition-enter-from, &.notification-transition-leave-to', `
- transform: translate(${transformXEnter}, 0);
- `), c('&.notification-transition-leave-from, &.notification-transition-enter-to', `
- transform: translate(${transformXLeave}, 0);
- `)]);
-}
+})])])])])]);

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.0.0";
+declare const _default: "2.0.3";
 export default _default;

package/es/version.mjs

@@ -1 +1 @@
-export default '2.0.0';
+export default '2.0.3';

package/lib/chat/src/ChatParts/MainArea.js

@@ -187,49 +187,51 @@ exports.default = (0, vue_1.defineComponent)({
             const chat = selectedChatRef.value;
             const keyId = toKeyString(chat === null || chat === void 0 ? void 0 : chat.id);
             const keyTitle = toKeyString(chat === null || chat === void 0 ? void 0 : chat.title);
-            return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__header-inner` },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__header-title-wrap` },
-                    (0, vue_1.h)(typography_1.UText, { key: `${keyId}-${keyTitle}`, variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title`, theme: mergedThemeRef.value.peers.Typography, themeOverrides: mergedThemeRef.value.peerOverrides.Typography }, {
-                        default: () => { var _a, _b; return (_b = (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ''; }
-                    }),
-                    isTyping.value && ((0, vue_1.h)(typography_1.UText, { class: [
-                            `${mergedClsPrefixRef.value}-chat-main__header-subtitle`,
-                            'typing'
-                        ], variant: "body-m-medium" }, {
-                        default: () => { var _a; return (_a = typingTextRef.value) !== null && _a !== void 0 ? _a : ''; }
-                    }))),
-                (0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, {
-                    default: () => (0, _utils_1.resolveSlot)(slots.headerActions, () => {
-                        const shareButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerShareButtonPropsRef.value);
-                        const profileButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerProfileButtonPropsRef.value);
-                        const closeButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerCloseButtonPropsRef.value);
-                        const shareIconProps = Object.assign(Object.assign({}, headerIconPropsRef.value), headerShareIconPropsRef.value);
-                        const profileIconProps = Object.assign(Object.assign({}, headerIconPropsRef.value), headerProfileIconPropsRef.value);
-                        const buttons = [];
-                        buttons.push((0, vue_1.h)(tooltip_1.UTooltip, null, {
-                            trigger: () => ((0, vue_1.h)(button_1.UButton, Object.assign({ secondary: true, circle: true, size: "large" }, shareButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onChatShare === null || onChatShare === void 0 ? void 0 : onChatShare.value) === null || _a === void 0 ? void 0 : _a.call(onChatShare); } }), {
-                                default: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, shareIconProps, { theme: mergedThemeRef.value.peers.HeaderShareIcon, themeOverrides: mergedThemeRef.value.peerOverrides
-                                        .HeaderShareIcon }), {
-                                    default: () => (0, vue_1.h)(icons_1.ArrowHookUpRight, null)
-                                }))
-                            })),
-                            default: () => shareButtonTooltipRef.value
-                        }));
-                        buttons.push((0, vue_1.h)(tooltip_1.UTooltip, null, {
-                            trigger: () => ((0, vue_1.h)(button_1.UButton, Object.assign({ secondary: true, circle: true, size: "large" }, profileButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onUserProfile === null || onUserProfile === void 0 ? void 0 : onUserProfile.value) === null || _a === void 0 ? void 0 : _a.call(onUserProfile); } }), {
-                                default: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, profileIconProps, { theme: mergedThemeRef.value.peers.HeaderProfileIcon, themeOverrides: mergedThemeRef.value.peerOverrides
-                                        .HeaderProfileIcon }), {
-                                    default: () => (0, vue_1.h)(icons_1.PersonNote, null)
-                                }))
-                            })),
-                            default: () => profileButtonTooltipRef.value
-                        }));
-                        buttons.push((0, vue_1.h)(button_1.UButton, Object.assign({ type: "primary", size: "large", round: true }, closeButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onChatClose === null || onChatClose === void 0 ? void 0 : onChatClose.value) === null || _a === void 0 ? void 0 : _a.call(onChatClose); } }), {
-                            default: () => closeButtonTextRef.value
-                        }));
-                        return buttons;
-                    })
-                })));
+            return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__header-inner` },
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__header-title-wrap` },
+                        (0, vue_1.h)(typography_1.UText, { key: `${keyId}-${keyTitle}`, variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title`, theme: mergedThemeRef.value.peers.Typography, themeOverrides: mergedThemeRef.value.peerOverrides.Typography }, {
+                            default: () => { var _a, _b; return (_b = (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ''; }
+                        }),
+                        isTyping.value && ((0, vue_1.h)(typography_1.UText, { class: [
+                                `${mergedClsPrefixRef.value}-chat-main__header-subtitle`,
+                                'typing'
+                            ], variant: "body-m-medium" }, {
+                            default: () => { var _a; return (_a = typingTextRef.value) !== null && _a !== void 0 ? _a : ''; }
+                        }))),
+                    (0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, {
+                        default: () => (0, _utils_1.resolveSlot)(slots.headerActions, () => {
+                            const shareButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerShareButtonPropsRef.value);
+                            const profileButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerProfileButtonPropsRef.value);
+                            const closeButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerCloseButtonPropsRef.value);
+                            const shareIconProps = Object.assign(Object.assign({}, headerIconPropsRef.value), headerShareIconPropsRef.value);
+                            const profileIconProps = Object.assign(Object.assign({}, headerIconPropsRef.value), headerProfileIconPropsRef.value);
+                            const buttons = [];
+                            buttons.push((0, vue_1.h)(tooltip_1.UTooltip, null, {
+                                trigger: () => ((0, vue_1.h)(button_1.UButton, Object.assign({ secondary: true, circle: true, size: "large" }, shareButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onChatShare === null || onChatShare === void 0 ? void 0 : onChatShare.value) === null || _a === void 0 ? void 0 : _a.call(onChatShare); } }), {
+                                    default: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, shareIconProps, { theme: mergedThemeRef.value.peers.HeaderShareIcon, themeOverrides: mergedThemeRef.value.peerOverrides
+                                            .HeaderShareIcon }), {
+                                        default: () => (0, vue_1.h)(icons_1.ArrowHookUpRight, null)
+                                    }))
+                                })),
+                                default: () => shareButtonTooltipRef.value
+                            }));
+                            buttons.push((0, vue_1.h)(tooltip_1.UTooltip, null, {
+                                trigger: () => ((0, vue_1.h)(button_1.UButton, Object.assign({ secondary: true, circle: true, size: "large" }, profileButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onUserProfile === null || onUserProfile === void 0 ? void 0 : onUserProfile.value) === null || _a === void 0 ? void 0 : _a.call(onUserProfile); } }), {
+                                    default: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, profileIconProps, { theme: mergedThemeRef.value.peers
+                                            .HeaderProfileIcon, themeOverrides: mergedThemeRef.value.peerOverrides
+                                            .HeaderProfileIcon }), {
+                                        default: () => (0, vue_1.h)(icons_1.PersonNote, null)
+                                    }))
+                                })),
+                                default: () => profileButtonTooltipRef.value
+                            }));
+                            buttons.push((0, vue_1.h)(button_1.UButton, Object.assign({ type: "primary", size: "large", round: true }, closeButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onChatClose === null || onChatClose === void 0 ? void 0 : onChatClose.value) === null || _a === void 0 ? void 0 : _a.call(onChatClose); } }), {
+                                default: () => closeButtonTextRef.value
+                            }));
+                            return buttons;
+                        })
+                    }))));
         };
         const renderMessages = () => {
             var _a;