@uzum-tech/ui 1.10.0 → 1.11.0

package/es/_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/es/_internal/safe-top-scrollbar/src/styles/index.cssr.js

@@ -0,0 +1,80 @@
+import { fadeInTransition } from '../../../../_styles/transitions/fade-in.cssr';
+import { c, cB, cE, cM } from '../../../../_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
+export default cB('safe-top-scrollbar', `
+ overflow: hidden;
+ position: relative;
+ z-index: auto;
+ height: 100%;
+ width: 100%;
+`, [c('>', [cB('scrollbar-container', `
+ width: 100%;
+ overflow: scroll;
+ height: 100%;
+ min-height: inherit;
+ max-height: inherit;
+ scrollbar-width: none;
+ `, [c('&::-webkit-scrollbar, &::-webkit-scrollbar-track-piece, &::-webkit-scrollbar-thumb', `
+ width: 0;
+ height: 0;
+ display: none;
+ `), c('>', [
+// We can't set overflow hidden since it affects positioning.
+cB('scrollbar-content', `
+ box-sizing: border-box;
+ min-width: 100%;
+ `)])])]), c('>, +', [cB('scrollbar-rail', `
+ position: absolute;
+ pointer-events: none;
+ user-select: none;
+ background: var(--u-scrollbar-rail-color);
+ -webkit-user-select: none;
+ `, [cM('horizontal', `
+ height: var(--u-scrollbar-height);
+ `, [c('>', [cE('scrollbar', `
+ height: var(--u-scrollbar-height);
+ border-radius: var(--u-scrollbar-border-radius);
+ right: 0;
+ `)])]), 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); 
+ `), 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); 
+ `), cM('vertical', `
+ width: var(--u-scrollbar-width);
+ `, [c('>', [cE('scrollbar', `
+ width: var(--u-scrollbar-width);
+ border-radius: var(--u-scrollbar-border-radius);
+ bottom: 0;
+ `)])]), 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); 
+ `), 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); 
+ `), cM('disabled', [c('>', [cE('scrollbar', 'pointer-events: none;')])]), c('>', [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);
+ `, [fadeInTransition(), c('&:hover', 'background-color: var(--u-scrollbar-color-hover);')])])])])]);

package/es/_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/es/_internal/safe-top-scrollbar/src/styles/rtl.cssr.js

@@ -0,0 +1,10 @@
+import { cB, c, cM, cE } from '../../../../_utils/cssr';
+export default cB('scrollbar', [cM('rtl', `
+ direction: rtl;
+ `, [c('>', [cB('scrollbar-rail', [cM('horizontal', [c('>', [cE('scrollbar', `
+ left: 0;
+ right: unset;
+ `)])]), cM('vertical', `
+ left: 4px;
+ right: unset;
+ `)])])])]);

package/es/_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/es/_internal/safe-top-scrollbar/styles/common.js

@@ -0,0 +1,7 @@
+export const commonVars = {
+    railInsetHorizontalBottom: 'auto 2px 4px 2px',
+    railInsetHorizontalTop: '4px 2px auto 2px',
+    railInsetVerticalRight: '2px 4px 2px auto',
+    railInsetVerticalLeft: '2px auto 2px 4px',
+    railColor: 'transparent'
+};

package/es/_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/es/_internal/safe-top-scrollbar/styles/dark.js

@@ -0,0 +1,8 @@
+import { commonDark } from '../../../_styles/common';
+import { self } from './light';
+const safeTopScrollbarDark = {
+    name: 'SafeTopScrollbar',
+    common: commonDark,
+    self
+};
+export default safeTopScrollbarDark;

package/es/_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/es/_internal/safe-top-scrollbar/styles/index.js

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

package/es/_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/es/_internal/safe-top-scrollbar/styles/light.js

@@ -0,0 +1,12 @@
+import { commonLight } from '../../../_styles/common';
+import { commonVars } from './common';
+export const self = (vars) => {
+    const { scrollbarColor, scrollbarColorHover, scrollbarHeight, scrollbarWidth, scrollbarBorderRadius } = vars;
+    return Object.assign(Object.assign({}, commonVars), { height: scrollbarHeight, width: scrollbarWidth, borderRadius: scrollbarBorderRadius, color: scrollbarColor, colorHover: scrollbarColorHover });
+};
+const safeTopScrollbarLight = {
+    name: 'SafeTopScrollbar',
+    common: commonLight,
+    self
+};
+export default safeTopScrollbarLight;

package/es/_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/es/_internal/safe-top-scrollbar/styles/rtl.js

@@ -0,0 +1,6 @@
+import rtlStyle from '../src/styles/rtl.cssr';
+export const scrollbarRtl = {
+    name: 'SafeTopScrollbar',
+    style: rtlStyle
+};
+export default scrollbarRtl;

package/es/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/es/chat/src/Chat.js

@@ -148,6 +148,9 @@ export const chatProps = Object.assign(Object.assign({}, useTheme.props), { chat
     }, onAttachmentUpload: {
         type: Function,
         default: undefined
+    }, onAttachmentDownload: {
+        type: Function,
+        default: undefined
     }, onFilterChange: {
         type: Function,
         default: undefined
@@ -394,6 +397,8 @@ export default defineComponent({
             handleNetworkError,
             handleUploadError,
             handleSendError,
+            onAttachmentUpload: toRef(props, 'onAttachmentUpload'),
+            onAttachmentDownload: toRef(props, 'onAttachmentDownload'),
             onChatClose: toRef(props, 'onChatClose'),
             onChatShare: toRef(props, 'onChatShare'),
             onUserProfile: toRef(props, 'onUserProfile'),

package/es/chat/src/ChatListItems.js

@@ -90,11 +90,26 @@ export default 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 (h(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 (h(UListItem, { key: `${keyId}-${keyTitle}-${keySubtitle}`, showIcon: false, onClick: () => {
                     handleChatSelect(item.id);
                 }, class: [
                     `${mergedClsPrefixRef.value}-chat-sidebar__item`,

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

@@ -1,5 +1,15 @@
-import { h, defineComponent } from 'vue';
+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());
+    });
+};
+import { h, defineComponent, inject } from 'vue';
 import { UUpload, UUploadFileList } from '../../../upload';
+import { chatInjectionKey } from '../interface';
 export default defineComponent({
     name: 'ChatAttachment',
     props: {
@@ -21,10 +31,28 @@ export default defineComponent({
         }
     },
     setup(props, { slots }) {
+        const UChat = inject(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;
@@ -40,7 +68,7 @@ export default defineComponent({
                     batchId: null
                 });
             });
-            const uploadComponent = (h(UUpload, Object.assign({ abstract: true, fileList: fileList, fileListStyle: props.withPadding
+            const uploadComponent = (h(UUpload, Object.assign({ abstract: true }, props.uploadProps, { fileList: fileList, fileListStyle: props.withPadding
                     ? {
                         display: 'flex',
                         flexDirection: 'column',
@@ -49,7 +77,7 @@ export default 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: () => (h(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/es/chat/src/ChatParts/MainArea.js

@@ -12,7 +12,7 @@ import { MessageStatus, ChatMessageType, chatInjectionKey } from '../interface';
 import { UInput } from '../../../input';
 import { UButton } from '../../../button';
 import { UIcon } from '../../../icon';
-import { UScrollbar } from '../../../scrollbar';
+import { USafeTopScrollbar } from '../../../safe-top-scrollbar';
 import { UTooltip } from '../../../tooltip';
 import { UUpload, UUploadTrigger } from '../../../upload';
 import { UFlex } from '../../../flex';
@@ -24,13 +24,14 @@ const SENDING_DELAY = 100;
 export default 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
          } = inject(chatInjectionKey);
         const messagesBodyRef = ref();
         const inputRef = ref();
         const inputValue = ref('');
         const attachmentFileList = ref([]);
+        const uploadedAttachmentsMap = ref(new Map());
         const lastScrollTop = ref(0);
         const scrollTopFired = ref(false);
         const scrollBottomFired = ref(false);
@@ -55,6 +56,8 @@ export default 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;
@@ -153,22 +156,36 @@ export default 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 (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` },
                 h(UFlex, { justify: "space-between", align: "flex-start", wrap: false }, {
-                    default: () => (h(Fragment, null,
-                        h(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 : ''; }
-                        }),
-                        h(UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, {
-                            default: () => 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 (h(Fragment, null,
+                            h(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 : ''; }
+                            }),
+                            h(UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, {
+                                default: () => 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(h(UTooltip, null, {
                                         trigger: () => (h(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); } }), {
@@ -179,8 +196,6 @@ export default defineComponent({
                                         })),
                                         default: () => shareButtonTooltipRef.value
                                     }));
-                                }
-                                if (profileButtonProps.disabled !== true) {
                                     buttons.push(h(UTooltip, null, {
                                         trigger: () => (h(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); } }), {
@@ -191,15 +206,13 @@ export default defineComponent({
                                         })),
                                         default: () => profileButtonTooltipRef.value
                                     }));
-                                }
-                                if (closeButtonProps.disabled !== true) {
                                     buttons.push(h(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 = () => {
@@ -226,7 +239,11 @@ export default 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: ChatMessageType.FILE,
                                 name: file.name,
@@ -236,13 +253,14 @@ export default 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;
                 }
@@ -253,39 +271,24 @@ export default defineComponent({
                 }
             }
         });
-        let fileUploadTimer = null;
-        const pendingFiles = 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: 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 = () => {
@@ -294,11 +297,14 @@ export default defineComponent({
                     default: () => (h(UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__input-container` }, {
                         default: () => (h(Fragment, null,
                             h(UUploadTrigger, { abstract: true }, {
-                                default: ({ handleClick }) => (h(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: () => (h(UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
-                                        default: () => h(AttachIcon, null)
-                                    }))
-                                }))
+                                default: ({ handleClick }) => {
+                                    var _a;
+                                    return (h(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: () => (h(UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
+                                            default: () => h(AttachIcon, null)
+                                        }))
+                                    }));
+                                }
                             }),
                             h(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;
@@ -332,7 +338,7 @@ export default defineComponent({
         const { mergedClsPrefixRef } = inject(chatInjectionKey);
         return (h("div", { class: `${mergedClsPrefixRef.value}-chat-main` },
             this.renderHeader(),
-            h(UScrollbar, { ref: "messagesBodyRef", class: `${mergedClsPrefixRef.value}-chat-main__body`, onScroll: this.handleMessagesScroll }, {
+            h(USafeTopScrollbar, { ref: "messagesBodyRef", class: `${mergedClsPrefixRef.value}-chat-main__body`, onScroll: this.handleMessagesScroll }, {
                 default: () => this.renderMessages()
             }),
             this.renderFooter()));

package/es/chat/src/interface.d.ts

@@ -67,7 +67,7 @@ export interface ChatMessageData {
     timestamp?: string | number | Date | (() => VNodeChild);
     status?: MessageStatus;
     date?: string;
-    attachment?: ChatAttachment | ChatAttachment[];
+    attachment?: ChatAttachment[];
     uploadProps?: Partial<UploadProps>;
     senderAvatar?: string | (() => VNodeChild);
     senderName?: string | (() => VNodeChild);
@@ -80,7 +80,7 @@ export interface ChatMessageProps {
     content?: string;
     timestamp?: string | number | Date | (() => VNodeChild);
     status?: MessageStatus;
-    attachment?: ChatAttachment | ChatAttachment[];
+    attachment?: ChatAttachment[];
     uploadProps?: Partial<UploadProps>;
     senderAvatar?: string | (() => VNodeChild);
     senderName?: string | (() => VNodeChild);
@@ -165,6 +165,7 @@ export interface ChatProps {
     onMessageSend?: OnMessageSend;
     onMessageRetry?: (message: ChatMessageData) => void;
     onAttachmentUpload?: OnAttachmentUpload;
+    onAttachmentDownload?: OnAttachmentDownload;
     onFilterChange?: OnFilterChange;
     onFooterInputChange?: (value: string, chatId: ChatId) => void;
     onNetworkError?: OnNetworkError;
@@ -225,6 +226,7 @@ export interface ChatFooterProps {
 export type OnChatSelect = (key: ChatId, item: ChatListItemData) => void;
 export type OnMessageSend = (content: string, attachments?: ChatAttachment[]) => void;
 export type OnAttachmentUpload = (file: File) => Promise<ChatAttachment>;
+export type OnAttachmentDownload = (attachment: ChatAttachment) => Promise<void>;
 export type OnFilterChange = (filter: {
     type: string;
     value: any;
@@ -311,6 +313,8 @@ export declare const chatInjectionKey: InjectionKey<{
         message: string;
         content: string;
     }) => void;
+    onAttachmentUpload?: Ref<OnAttachmentUpload | undefined>;
+    onAttachmentDownload?: Ref<OnAttachmentDownload | undefined>;
     onChatClose?: Ref<(() => void) | undefined>;
     onChatShare?: Ref<(() => void) | undefined>;
     onUserProfile?: Ref<(() => void) | undefined>;

package/es/components.d.ts

@@ -69,6 +69,7 @@ export * from './radio';
 export * from './rate';
 export * from './result';
 export * from './scrollbar';
+export * from './safe-top-scrollbar';
 export * from './select';
 export * from './skeleton';
 export * from './slider';