@uzum-tech/ui 1.10.0 → 1.11.0

package/lib/_internal/safe-top-scrollbar/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/_internal/safe-top-scrollbar/src/styles/index.cssr.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const fade_in_cssr_1 = require("../../../../_styles/transitions/fade-in.cssr");
+const cssr_1 = require("../../../../_utils/cssr");
+// vars:
+// --u-scrollbar-bezier
+// --u-scrollbar-color
+// --u-scrollbar-color-hover
+// --u-scrollbar-width
+// --u-scrollbar-height
+// --u-scrollbar-border-radius
+// --u-scrollbar-rail-inset-horizontal
+// --u-scrollbar-rail-inset-vertical
+// --u-scrollbar-rail-color
+exports.default = (0, cssr_1.cB)('safe-top-scrollbar', `
+ overflow: hidden;
+ position: relative;
+ z-index: auto;
+ height: 100%;
+ width: 100%;
+`, [(0, cssr_1.c)('>', [(0, cssr_1.cB)('scrollbar-container', `
+ width: 100%;
+ overflow: scroll;
+ height: 100%;
+ min-height: inherit;
+ max-height: inherit;
+ scrollbar-width: none;
+ `, [(0, cssr_1.c)('&::-webkit-scrollbar, &::-webkit-scrollbar-track-piece, &::-webkit-scrollbar-thumb', `
+ width: 0;
+ height: 0;
+ display: none;
+ `), (0, cssr_1.c)('>', [
+// We can't set overflow hidden since it affects positioning.
+(0, cssr_1.cB)('scrollbar-content', `
+ box-sizing: border-box;
+ min-width: 100%;
+ `)])])]), (0, cssr_1.c)('>, +', [(0, cssr_1.cB)('scrollbar-rail', `
+ position: absolute;
+ pointer-events: none;
+ user-select: none;
+ background: var(--u-scrollbar-rail-color);
+ -webkit-user-select: none;
+ `, [(0, cssr_1.cM)('horizontal', `
+ height: var(--u-scrollbar-height);
+ `, [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', `
+ height: var(--u-scrollbar-height);
+ border-radius: var(--u-scrollbar-border-radius);
+ right: 0;
+ `)])]), (0, cssr_1.cM)('horizontal--top', `
+ top: var(--u-scrollbar-rail-top-horizontal-top); 
+ right: var(--u-scrollbar-rail-right-horizontal-top); 
+ bottom: var(--u-scrollbar-rail-bottom-horizontal-top); 
+ left: var(--u-scrollbar-rail-left-horizontal-top); 
+ `), (0, cssr_1.cM)('horizontal--bottom', `
+ top: var(--u-scrollbar-rail-top-horizontal-bottom); 
+ right: var(--u-scrollbar-rail-right-horizontal-bottom); 
+ bottom: var(--u-scrollbar-rail-bottom-horizontal-bottom); 
+ left: var(--u-scrollbar-rail-left-horizontal-bottom); 
+ `), (0, cssr_1.cM)('vertical', `
+ width: var(--u-scrollbar-width);
+ `, [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', `
+ width: var(--u-scrollbar-width);
+ border-radius: var(--u-scrollbar-border-radius);
+ bottom: 0;
+ `)])]), (0, cssr_1.cM)('vertical--left', `
+ top: var(--u-scrollbar-rail-top-vertical-left); 
+ right: var(--u-scrollbar-rail-right-vertical-left); 
+ bottom: var(--u-scrollbar-rail-bottom-vertical-left); 
+ left: var(--u-scrollbar-rail-left-vertical-left); 
+ `), (0, cssr_1.cM)('vertical--right', `
+ top: var(--u-scrollbar-rail-top-vertical-right); 
+ right: var(--u-scrollbar-rail-right-vertical-right); 
+ bottom: var(--u-scrollbar-rail-bottom-vertical-right); 
+ left: var(--u-scrollbar-rail-left-vertical-right); 
+ `), (0, cssr_1.cM)('disabled', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', 'pointer-events: none;')])]), (0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', `
+ z-index: 1;
+ position: absolute;
+ cursor: pointer;
+ pointer-events: all;
+ background-color: var(--u-scrollbar-color);
+ transition: background-color .2s var(--u-scrollbar-bezier);
+ `, [(0, fade_in_cssr_1.fadeInTransition)(), (0, cssr_1.c)('&:hover', 'background-color: var(--u-scrollbar-color-hover);')])])])])]);

package/lib/_internal/safe-top-scrollbar/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/_internal/safe-top-scrollbar/src/styles/rtl.cssr.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../../_utils/cssr");
+exports.default = (0, cssr_1.cB)('scrollbar', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ `, [(0, cssr_1.c)('>', [(0, cssr_1.cB)('scrollbar-rail', [(0, cssr_1.cM)('horizontal', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', `
+ left: 0;
+ right: unset;
+ `)])]), (0, cssr_1.cM)('vertical', `
+ left: 4px;
+ right: unset;
+ `)])])])]);

package/lib/_internal/safe-top-scrollbar/styles/common.d.ts

@@ -0,0 +1,7 @@
+export declare const commonVars: {
+    railInsetHorizontalBottom: string;
+    railInsetHorizontalTop: string;
+    railInsetVerticalRight: string;
+    railInsetVerticalLeft: string;
+    railColor: string;
+};

package/lib/_internal/safe-top-scrollbar/styles/common.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commonVars = void 0;
+exports.commonVars = {
+    railInsetHorizontalBottom: 'auto 2px 4px 2px',
+    railInsetHorizontalTop: '4px 2px auto 2px',
+    railInsetVerticalRight: '2px 4px 2px auto',
+    railInsetVerticalLeft: '2px auto 2px 4px',
+    railColor: 'transparent'
+};

package/lib/_internal/safe-top-scrollbar/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import type { SafeTopScrollbarTheme } from './light';
+declare const safeTopScrollbarDark: SafeTopScrollbarTheme;
+export default safeTopScrollbarDark;

package/lib/_internal/safe-top-scrollbar/styles/dark.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("../../../_styles/common");
+const light_1 = require("./light");
+const safeTopScrollbarDark = {
+    name: 'SafeTopScrollbar',
+    common: common_1.commonDark,
+    self: light_1.self
+};
+exports.default = safeTopScrollbarDark;

package/lib/_internal/safe-top-scrollbar/styles/index.d.ts

@@ -0,0 +1,4 @@
+export { default as scrollbarDark } from './dark';
+export { default as scrollbarLight } from './light';
+export { default as scrollbarRtl } from './rtl';
+export type { SafeTopScrollbarTheme, SafeTopScrollbarThemeVars } from './light';

package/lib/_internal/safe-top-scrollbar/styles/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollbarRtl = exports.scrollbarLight = exports.scrollbarDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "scrollbarDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "scrollbarLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "scrollbarRtl", { enumerable: true, get: function () { return __importDefault(rtl_1).default; } });

package/lib/_internal/safe-top-scrollbar/styles/light.d.ts

@@ -0,0 +1,18 @@
+import type { ThemeCommonVars } from '../../../_styles/common';
+import type { Theme } from '../../../_mixins';
+export declare const self: (vars: ThemeCommonVars) => {
+    height: string;
+    width: string;
+    borderRadius: string;
+    color: string;
+    colorHover: string;
+    railInsetHorizontalBottom: string;
+    railInsetHorizontalTop: string;
+    railInsetVerticalRight: string;
+    railInsetVerticalLeft: string;
+    railColor: string;
+};
+export type SafeTopScrollbarThemeVars = ReturnType<typeof self>;
+declare const safeTopScrollbarLight: Theme<'SafeTopScrollbar', SafeTopScrollbarThemeVars>;
+export default safeTopScrollbarLight;
+export type SafeTopScrollbarTheme = typeof safeTopScrollbarLight;

package/lib/_internal/safe-top-scrollbar/styles/light.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = void 0;
+const common_1 = require("../../../_styles/common");
+const common_2 = require("./common");
+const self = (vars) => {
+    const { scrollbarColor, scrollbarColorHover, scrollbarHeight, scrollbarWidth, scrollbarBorderRadius } = vars;
+    return Object.assign(Object.assign({}, common_2.commonVars), { height: scrollbarHeight, width: scrollbarWidth, borderRadius: scrollbarBorderRadius, color: scrollbarColor, colorHover: scrollbarColorHover });
+};
+exports.self = self;
+const safeTopScrollbarLight = {
+    name: 'SafeTopScrollbar',
+    common: common_1.commonLight,
+    self: exports.self
+};
+exports.default = safeTopScrollbarLight;

package/lib/_internal/safe-top-scrollbar/styles/rtl.d.ts

@@ -0,0 +1,3 @@
+import type { RtlItem } from '../../../config-provider/src/internal-interface';
+export declare const scrollbarRtl: RtlItem;
+export default scrollbarRtl;

package/lib/_internal/safe-top-scrollbar/styles/rtl.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollbarRtl = void 0;
+const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
+exports.scrollbarRtl = {
+    name: 'SafeTopScrollbar',
+    style: rtl_cssr_1.default
+};
+exports.default = exports.scrollbarRtl;

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

@@ -191,6 +191,10 @@ export declare const chatProps: {
         type: PropType<ChatPropsType["onAttachmentUpload"]>;
         default: undefined;
     };
+    onAttachmentDownload: {
+        type: PropType<ChatPropsType["onAttachmentDownload"]>;
+        default: undefined;
+    };
     onFilterChange: {
         type: PropType<ChatPropsType["onFilterChange"]>;
         default: undefined;
@@ -2413,6 +2417,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<ChatPropsType["onAttachmentUpload"]>;
         default: undefined;
     };
+    onAttachmentDownload: {
+        type: PropType<ChatPropsType["onAttachmentDownload"]>;
+        default: undefined;
+    };
     onFilterChange: {
         type: PropType<ChatPropsType["onFilterChange"]>;
         default: undefined;
@@ -5652,6 +5660,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<ChatPropsType["onAttachmentUpload"]>;
         default: undefined;
     };
+    onAttachmentDownload: {
+        type: PropType<ChatPropsType["onAttachmentDownload"]>;
+        default: undefined;
+    };
     onFilterChange: {
         type: PropType<ChatPropsType["onFilterChange"]>;
         default: undefined;
@@ -7716,6 +7728,7 @@ declare const _default: import("vue").DefineComponent<{
     onChatItemsScrollToBottom: () => void;
     messages: ChatMessageData[] | undefined;
     onMessageRetry: ((message: ChatMessageData) => void) | undefined;
+    onAttachmentUpload: import("./interface").OnAttachmentUpload | undefined;
     onChatClose: () => void;
     onChatShare: () => void;
     onUserProfile: () => void;
@@ -7749,7 +7762,7 @@ declare const _default: import("vue").DefineComponent<{
     chatItemsLoadingCount: number | undefined;
     messagesLoading: boolean | undefined;
     messagesLoadingCount: number | undefined;
-    onAttachmentUpload: import("./interface").OnAttachmentUpload | undefined;
+    onAttachmentDownload: import("./interface").OnAttachmentDownload | undefined;
     onFilterChange: import("./interface").OnFilterChange | undefined;
     onNetworkError: import("./interface").OnNetworkError | undefined;
     onUploadError: import("./interface").OnUploadError | undefined;

package/lib/chat/src/Chat.js

@@ -154,6 +154,9 @@ exports.chatProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, onAttachmentUpload: {
         type: Function,
         default: undefined
+    }, onAttachmentDownload: {
+        type: Function,
+        default: undefined
     }, onFilterChange: {
         type: Function,
         default: undefined
@@ -400,6 +403,8 @@ exports.default = (0, vue_1.defineComponent)({
             handleNetworkError,
             handleUploadError,
             handleSendError,
+            onAttachmentUpload: (0, vue_1.toRef)(props, 'onAttachmentUpload'),
+            onAttachmentDownload: (0, vue_1.toRef)(props, 'onAttachmentDownload'),
             onChatClose: (0, vue_1.toRef)(props, 'onChatClose'),
             onChatShare: (0, vue_1.toRef)(props, 'onChatShare'),
             onUserProfile: (0, vue_1.toRef)(props, 'onUserProfile'),

package/lib/chat/src/ChatListItems.js

@@ -96,11 +96,26 @@ exports.default = (0, vue_1.defineComponent)({
             var _a;
             (_a = props.onChatSelect) === null || _a === void 0 ? void 0 : _a.call(props, chatId);
         };
+        const toKeyString = (value) => {
+            if (typeof value === 'symbol')
+                return value.toString();
+            if (typeof value === 'function') {
+                const result = value();
+                return typeof result === 'string' || typeof result === 'number'
+                    ? String(result)
+                    : '';
+            }
+            return value != null ? String(value) : '';
+        };
         const renderChatItem = (item) => {
             var _a, _b;
             const isSelected = props.selectedChatId === item.id;
             const isTyping = (_b = (_a = props.typingChatIds) === null || _a === void 0 ? void 0 : _a.includes(item.id)) !== null && _b !== void 0 ? _b : false;
-            return ((0, vue_1.h)(list_1.UListItem, { key: item.id, showIcon: false, onClick: () => {
+            const { id, title, subtitle } = item;
+            const keyId = toKeyString(id);
+            const keyTitle = toKeyString(title);
+            const keySubtitle = toKeyString(subtitle);
+            return ((0, vue_1.h)(list_1.UListItem, { key: `${keyId}-${keyTitle}-${keySubtitle}`, showIcon: false, onClick: () => {
                     handleChatSelect(item.id);
                 }, class: [
                     `${mergedClsPrefixRef.value}-chat-sidebar__item`,

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

@@ -1,7 +1,17 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const upload_1 = require("../../../upload");
+const interface_1 = require("../interface");
 exports.default = (0, vue_1.defineComponent)({
     name: 'ChatAttachment',
     props: {
@@ -23,10 +33,28 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup(props, { slots }) {
+        const UChat = (0, vue_1.inject)(interface_1.chatInjectionKey, null);
+        const onAttachmentDownload = UChat === null || UChat === void 0 ? void 0 : UChat.onAttachmentDownload;
         const getThumbnailUrl = (attachment) => {
             const url = [attachment.preview, attachment.thumbnail].find((value) => typeof value === 'string');
             return url !== null && url !== void 0 ? url : null;
         };
+        const handleDownload = (file) => __awaiter(this, void 0, void 0, function* () {
+            if (onAttachmentDownload === null || onAttachmentDownload === void 0 ? void 0 : onAttachmentDownload.value) {
+                const attachment = props.attachments.find((att) => att.name === file.name);
+                if (attachment) {
+                    try {
+                        yield onAttachmentDownload.value(attachment);
+                        return false;
+                    }
+                    catch (error) {
+                        console.error('Download failed:', error);
+                        return false;
+                    }
+                }
+            }
+            return true;
+        });
         const renderAttachment = () => {
             const fileList = props.attachments.map((attachment, index) => {
                 var _a, _b, _c;
@@ -42,7 +70,7 @@ exports.default = (0, vue_1.defineComponent)({
                     batchId: null
                 });
             });
-            const uploadComponent = ((0, vue_1.h)(upload_1.UUpload, Object.assign({ abstract: true, fileList: fileList, fileListStyle: props.withPadding
+            const uploadComponent = ((0, vue_1.h)(upload_1.UUpload, Object.assign({ abstract: true }, props.uploadProps, { fileList: fileList, fileListStyle: props.withPadding
                     ? {
                         display: 'flex',
                         flexDirection: 'column',
@@ -51,7 +79,7 @@ exports.default = (0, vue_1.defineComponent)({
                     }
                     : undefined, showRemoveButton: false, showDownloadButton: props.attachments.some((attachment) => attachment.status === 'finished' &&
                     attachment.url &&
-                    attachment.url !== '#'), showRetryButton: props.attachments.some((attachment) => attachment.status === 'error') }, props.uploadProps), {
+                    attachment.url !== '#'), showRetryButton: props.attachments.some((attachment) => attachment.status === 'error'), onDownload: handleDownload }), {
                 default: () => ((0, vue_1.h)(upload_1.UUploadFileList, null, {
                     'upload-file-title': slots['upload-file-title']
                         ? ({ file }) => { var _a; return (_a = slots['upload-file-title']) === null || _a === void 0 ? void 0 : _a.call(slots, file); }

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

@@ -17,7 +17,7 @@ const interface_1 = require("../interface");
 const input_1 = require("../../../input");
 const button_1 = require("../../../button");
 const icon_1 = require("../../../icon");
-const scrollbar_1 = require("../../../scrollbar");
+const safe_top_scrollbar_1 = require("../../../safe-top-scrollbar");
 const tooltip_1 = require("../../../tooltip");
 const upload_1 = require("../../../upload");
 const flex_1 = require("../../../flex");
@@ -29,13 +29,14 @@ const SENDING_DELAY = 100;
 exports.default = (0, vue_1.defineComponent)({
     name: 'ChatMainArea',
     setup(_, { slots }) {
-        const { mergedClsPrefixRef, mergedThemeRef, selectedChatRef, messagesRef, typingChatIdsRef, messagesLoadingRef, messagesLoadingCountRef, headerButtonPropsRef, headerIconPropsRef, headerShareButtonPropsRef, headerProfileButtonPropsRef, headerCloseButtonPropsRef, headerShareIconPropsRef, headerProfileIconPropsRef, messageUploadPropsRef, footerInputPropsRef, footerButtonPropsRef, footerUploadPropsRef, footerIconPropsRef, inputPlaceholderRef, retryTextRef, typingTextRef, closeButtonTextRef, shareButtonTooltipRef, profileButtonTooltipRef, unreadNotificationTextRef, notificationsShownSetRef, unreadCountsBeforeReadRef, markNotificationShown, handleMessageSend, handleMessageRetry, handleFooterInputChange, onChatClose, onChatShare, onUserProfile, onMessagesScrollToTop, onMessagesScrollToBottom
+        const { mergedClsPrefixRef, mergedThemeRef, selectedChatRef, messagesRef, typingChatIdsRef, messagesLoadingRef, messagesLoadingCountRef, headerButtonPropsRef, headerIconPropsRef, headerShareButtonPropsRef, headerProfileButtonPropsRef, headerCloseButtonPropsRef, headerShareIconPropsRef, headerProfileIconPropsRef, messageUploadPropsRef, footerInputPropsRef, footerButtonPropsRef, footerUploadPropsRef, footerIconPropsRef, inputPlaceholderRef, retryTextRef, typingTextRef, closeButtonTextRef, shareButtonTooltipRef, profileButtonTooltipRef, unreadNotificationTextRef, notificationsShownSetRef, unreadCountsBeforeReadRef, markNotificationShown, handleMessageSend, handleMessageRetry, handleFooterInputChange, onAttachmentUpload, onChatClose, onChatShare, onUserProfile, onMessagesScrollToTop, onMessagesScrollToBottom
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.chatInjectionKey);
         const messagesBodyRef = (0, vue_1.ref)();
         const inputRef = (0, vue_1.ref)();
         const inputValue = (0, vue_1.ref)('');
         const attachmentFileList = (0, vue_1.ref)([]);
+        const uploadedAttachmentsMap = (0, vue_1.ref)(new Map());
         const lastScrollTop = (0, vue_1.ref)(0);
         const scrollTopFired = (0, vue_1.ref)(false);
         const scrollBottomFired = (0, vue_1.ref)(false);
@@ -60,6 +61,8 @@ exports.default = (0, vue_1.defineComponent)({
                 scrollTopFired.value = false;
                 scrollBottomFired.value = false;
                 shouldScrollOnLoad.value = true;
+                attachmentFileList.value = [];
+                uploadedAttachmentsMap.value.clear();
                 if (unreadBeforeRead > 0 &&
                     !notificationsShownSetRef.value.has(newChat.id)) {
                     hasUnreadMessages.value = true;
@@ -158,22 +161,36 @@ exports.default = (0, vue_1.defineComponent)({
                 el.scrollTop = el.scrollHeight;
             }
         };
+        const toKeyString = (value) => {
+            if (typeof value === 'symbol')
+                return value.toString();
+            if (typeof value === 'function') {
+                const result = value();
+                return typeof result === 'string' || typeof result === 'number'
+                    ? String(result)
+                    : '';
+            }
+            return value != null ? String(value) : '';
+        };
         const renderHeader = () => {
             return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` },
                 (0, vue_1.h)(flex_1.UFlex, { justify: "space-between", align: "flex-start", wrap: false }, {
-                    default: () => ((0, vue_1.h)(vue_1.Fragment, null,
-                        (0, vue_1.h)(typography_1.UText, { 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 : ''; }
-                        }),
-                        (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 = [];
-                                if (shareButtonProps.disabled !== true) {
+                    default: () => {
+                        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)(vue_1.Fragment, null,
+                            (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 : ''; }
+                            }),
+                            (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); } }), {
@@ -184,8 +201,6 @@ exports.default = (0, vue_1.defineComponent)({
                                         })),
                                         default: () => shareButtonTooltipRef.value
                                     }));
-                                }
-                                if (profileButtonProps.disabled !== true) {
                                     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); } }), {
@@ -196,15 +211,13 @@ exports.default = (0, vue_1.defineComponent)({
                                         })),
                                         default: () => profileButtonTooltipRef.value
                                     }));
-                                }
-                                if (closeButtonProps.disabled !== true) {
                                     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 buttons;
+                                })
+                            })));
+                    }
                 })));
         };
         const renderMessages = () => {
@@ -231,7 +244,11 @@ exports.default = (0, vue_1.defineComponent)({
                     const attachments = attachmentFileList.value.length > 0
                         ? attachmentFileList.value.map((file) => {
                             var _a, _b, _c;
-                            return ({
+                            const uploadedAttachment = uploadedAttachmentsMap.value.get(file.id);
+                            if (uploadedAttachment) {
+                                return uploadedAttachment;
+                            }
+                            return {
                                 id: file.id,
                                 type: interface_1.ChatMessageType.FILE,
                                 name: file.name,
@@ -241,13 +258,14 @@ exports.default = (0, vue_1.defineComponent)({
                                 thumbnail: (_b = file.thumbnailUrl) !== null && _b !== void 0 ? _b : undefined,
                                 status: file.status,
                                 percentage: (_c = file.percentage) !== null && _c !== void 0 ? _c : undefined
-                            });
+                            };
                         })
                         : undefined;
                     handleMessageSend(inputValue.value.trim(), attachments);
                     inputValue.value = '';
                     attachmentFileList.value = [];
                     chatInputs.value[selectedChatRef.value.id] = '';
+                    uploadedAttachmentsMap.value.clear();
                     hasUnreadMessages.value = false;
                     showNotificationManually.value = false;
                 }
@@ -258,39 +276,24 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         });
-        let fileUploadTimer = null;
-        const pendingFiles = (0, vue_1.ref)([]);
         const handleFileListUpdate = (fileList) => {
-            const newFiles = fileList.filter((file) => !attachmentFileList.value.some((existing) => existing.id === file.id) &&
-                !pendingFiles.value.some((existing) => existing.id === file.id));
-            if (newFiles.length > 0) {
-                pendingFiles.value = [...pendingFiles.value, ...newFiles];
-                if (fileUploadTimer) {
-                    clearTimeout(fileUploadTimer);
-                }
-                fileUploadTimer = setTimeout(() => {
-                    if (pendingFiles.value.length > 0 && handleMessageSend) {
-                        const hasError = pendingFiles.value.some((file) => file.status === 'error');
-                        const batchStatus = hasError ? 'error' : 'finished';
-                        const attachments = pendingFiles.value.map((file) => {
-                            var _a, _b, _c;
-                            return ({
-                                id: file.id,
-                                type: interface_1.ChatMessageType.FILE,
-                                name: file.name,
-                                url: file.url ||
-                                    (file.file ? URL.createObjectURL(file.file) : '#'),
-                                size: (_a = file.file) === null || _a === void 0 ? void 0 : _a.size,
-                                thumbnail: (_b = file.thumbnailUrl) !== null && _b !== void 0 ? _b : undefined,
-                                status: batchStatus,
-                                percentage: (_c = file.percentage) !== null && _c !== void 0 ? _c : undefined
-                            });
-                        });
-                        handleMessageSend('', attachments);
-                        pendingFiles.value = [];
-                        attachmentFileList.value = [];
+            attachmentFileList.value = fileList;
+            const uploadCallback = onAttachmentUpload === null || onAttachmentUpload === void 0 ? void 0 : onAttachmentUpload.value;
+            if (uploadCallback) {
+                const newFiles = fileList.filter((file) => file.file && !uploadedAttachmentsMap.value.has(file.id));
+                void (() => __awaiter(this, void 0, void 0, function* () {
+                    for (const uploadFile of newFiles) {
+                        if (uploadFile.file) {
+                            try {
+                                const attachment = yield uploadCallback(uploadFile.file);
+                                uploadedAttachmentsMap.value.set(uploadFile.id, attachment);
+                            }
+                            catch (error) {
+                                console.error('File upload failed:', error);
+                            }
+                        }
                     }
-                }, SENDING_DELAY);
+                }))();
             }
         };
         const renderFooter = () => {
@@ -299,11 +302,14 @@ exports.default = (0, vue_1.defineComponent)({
                     default: () => ((0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small", 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 }, {
-                                default: ({ handleClick }) => ((0, vue_1.h)(button_1.UButton, Object.assign({ secondary: true, size: "large", class: `${mergedClsPrefixRef.value}-chat-main__attach-btn` }, footerButtonPropsRef.value, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: handleClick }), {
-                                    default: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
-                                        default: () => (0, vue_1.h)(icons_1.AttachIcon, null)
-                                    }))
-                                }))
+                                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, theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: handleClick }), {
+                                        default: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
+                                            default: () => (0, vue_1.h)(icons_1.AttachIcon, null)
+                                        }))
+                                    }));
+                                }
                             }),
                             (0, vue_1.h)(input_1.UInput, Object.assign({ ref: "inputRef", value: inputValue.value, placeholder: inputPlaceholderRef.value, class: `${mergedClsPrefixRef.value}-chat-main__input` }, footerInputPropsRef.value, { theme: mergedThemeRef.value.peers.Input, themeOverrides: mergedThemeRef.value.peerOverrides.Input, onUpdateValue: (value) => {
                                     inputValue.value = value;
@@ -337,7 +343,7 @@ exports.default = (0, vue_1.defineComponent)({
         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)(scrollbar_1.UScrollbar, { ref: "messagesBodyRef", class: `${mergedClsPrefixRef.value}-chat-main__body`, onScroll: this.handleMessagesScroll }, {
+            (0, vue_1.h)(safe_top_scrollbar_1.USafeTopScrollbar, { ref: "messagesBodyRef", class: `${mergedClsPrefixRef.value}-chat-main__body`, onScroll: this.handleMessagesScroll }, {
                 default: () => this.renderMessages()
             }),
             this.renderFooter()));