@uzum-tech/ui 1.7.0 → 1.7.1

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

@@ -8,11 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const fluent_1 = require("@vicons/fluent");
-const ionicons5_1 = require("@vicons/ionicons5");
-const ionicons4_1 = require("@vicons/ionicons4");
 const interface_1 = require("../interface");
 const input_1 = require("../../../input");
 const button_1 = require("../../../button");
@@ -22,34 +23,23 @@ const upload_1 = require("../../../upload");
 const flex_1 = require("../../../flex");
 const _utils_1 = require("../../../_utils");
 const typography_1 = require("../../../typography");
-const initChatGlobalState = () => {
-    var _a, _b;
-    if (typeof window === 'undefined') {
-        return {
-            notificationsShown: new Set(),
-            openedChats: new Set()
-        };
-    }
-    if (!((_a = window.__chatGlobalState) === null || _a === void 0 ? void 0 : _a.notificationsShown) ||
-        !((_b = window.__chatGlobalState) === null || _b === void 0 ? void 0 : _b.openedChats)) {
-        window.__chatGlobalState = {
-            notificationsShown: new Set(),
-            openedChats: new Set()
-        };
-    }
-    return window.__chatGlobalState;
-};
-const getChatGlobalState = () => initChatGlobalState();
+const skeleton_1 = require("../../../skeleton");
+const icons_1 = require("../../../_internal/icons");
+const ChatGlobalState_1 = require("../ChatGlobalState");
+const ChatAttachment_1 = __importDefault(require("./ChatAttachment"));
+const SCROLL_DELAY = 50;
+const SENDING_DELAY = 100;
+const getChatGlobalState = () => ChatGlobalState_1.ChatGlobalState.getInstance();
 const statusIconMapper = {
-    [interface_1.MessageStatus.READ]: ionicons5_1.CheckmarkDoneSharp,
-    [interface_1.MessageStatus.PENDING]: ionicons4_1.MdTime,
-    [interface_1.MessageStatus.RETRY]: ionicons5_1.Refresh,
-    [interface_1.MessageStatus.UNREAD]: ionicons5_1.CheckmarkDoneSharp
+    [interface_1.MessageStatus.READ]: icons_1.CheckmarkDoneSharp,
+    [interface_1.MessageStatus.PENDING]: icons_1.MdTime,
+    [interface_1.MessageStatus.RETRY]: icons_1.Refresh,
+    [interface_1.MessageStatus.UNREAD]: icons_1.CheckmarkDoneSharp
 };
 exports.default = (0, vue_1.defineComponent)({
     name: 'ChatMainArea',
     setup(_, { slots }) {
-        const { mergedClsPrefixRef, selectedChatRef, messagesRef, typingChatIdsRef, messagesLoadingRef, headerButtonPropsRef, headerIconPropsRef, messageUploadPropsRef, footerInputPropsRef, footerButtonPropsRef, footerUploadPropsRef, footerIconPropsRef, retryTextRef, typingTextRef, closeButtonTextRef, handleMessageSend, handleMessageRetry, onChatClose, onChatShare, onUserProfile
+        const { mergedClsPrefixRef, selectedChatRef, messagesRef, typingChatIdsRef, messagesLoadingRef, messagesLoadingCountRef, headerButtonPropsRef, headerIconPropsRef, messageUploadPropsRef, footerInputPropsRef, footerButtonPropsRef, footerUploadPropsRef, footerIconPropsRef, inputPlaceholderRef, retryTextRef, typingTextRef, closeButtonTextRef, handleMessageSend, handleMessageRetry, onChatClose, onChatShare, onUserProfile
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.chatInjectionKey);
         const messagesBodyRef = (0, vue_1.ref)();
@@ -70,12 +60,12 @@ exports.default = (0, vue_1.defineComponent)({
                 inputValue.value = chatInputs.value[newChat.id] || '';
                 unreadCountOnOpen.value = unreadMessagesCount.value;
                 const globalState = getChatGlobalState();
-                globalState.openedChats.add(newChat.id);
+                globalState.markChatOpened(newChat.id);
                 if (unreadCountOnOpen.value > 0 &&
-                    !globalState.notificationsShown.has(newChat.id)) {
+                    !globalState.hasNotificationShown(newChat.id)) {
                     hasUnreadMessages.value = true;
                     showNotificationManually.value = true;
-                    globalState.notificationsShown.add(newChat.id);
+                    globalState.markNotificationShown(newChat.id);
                 }
                 else {
                     hasUnreadMessages.value = false;
@@ -92,7 +82,7 @@ exports.default = (0, vue_1.defineComponent)({
                 newMessages.length > oldMessages.length) {
                 if (selectedChatRef.value) {
                     const globalState = getChatGlobalState();
-                    if (globalState.notificationsShown.has(selectedChatRef.value.id)) {
+                    if (globalState.hasNotificationShown(selectedChatRef.value.id)) {
                         showNotificationManually.value = false;
                     }
                 }
@@ -118,19 +108,20 @@ exports.default = (0, vue_1.defineComponent)({
             });
         });
         const scrollToBottom = () => {
-            var _a;
-            if (messagesBodyRef.value) {
-                if (typeof messagesBodyRef.value.scrollTo === 'function') {
-                    messagesBodyRef.value.scrollTo({ top: 999999, behavior: 'smooth' });
-                }
-                else if ((_a = messagesBodyRef.value) === null || _a === void 0 ? void 0 : _a.$el) {
-                    const scrollContainer = messagesBodyRef.value.$el.querySelector('.u-scrollbar-content') ||
-                        messagesBodyRef.value.$el;
-                    scrollContainer.scrollTop = scrollContainer.scrollHeight;
-                }
-                else {
-                    messagesBodyRef.value.scrollTop = messagesBodyRef.value.scrollHeight;
-                }
+            const el = messagesBodyRef.value;
+            if (!el)
+                return;
+            if ('scrollTo' in el && typeof el.scrollTo === 'function') {
+                el.scrollTo({ top: 999999, behavior: 'smooth' });
+                return;
+            }
+            if ('$el' in el && el.$el instanceof HTMLElement) {
+                const scrollContainer = el.$el.querySelector('.u-scrollbar-content') || el.$el;
+                scrollContainer.scrollTop = scrollContainer.scrollHeight;
+                return;
+            }
+            if ('scrollTop' in el && 'scrollHeight' in el) {
+                el.scrollTop = el.scrollHeight;
             }
         };
         const renderUnreadNotification = () => {
@@ -167,23 +158,6 @@ exports.default = (0, vue_1.defineComponent)({
                     ? message.attachment
                     : [message.attachment]
                 : [];
-            const fileList = attachments.map((att, index) => {
-                var _a, _b;
-                return ({
-                    id: `${String(message.id)}-attachment-${index}`,
-                    name: att.name,
-                    status: att.status || 'finished',
-                    percentage: (_a = att.percentage) !== null && _a !== void 0 ? _a : null,
-                    url: (_b = att.url) !== null && _b !== void 0 ? _b : null,
-                    thumbnailUrl: typeof att.preview === 'string'
-                        ? att.preview
-                        : typeof att.thumbnail === 'string'
-                            ? att.thumbnail
-                            : null,
-                    file: null,
-                    batchId: null
-                });
-            });
             return ((0, vue_1.h)("div", { key: message.id, class: [
                     `${mergedClsPrefixRef.value}-chat-main__message`,
                     isOwn
@@ -197,42 +171,16 @@ exports.default = (0, vue_1.defineComponent)({
                                 ? `${mergedClsPrefixRef.value}-chat-main__message-bubble--own`
                                 : `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`
                         ] },
-                        attachments.length > 0 &&
-                            (slots.messageAttachment ? (slots.messageAttachment(message)) : ((0, vue_1.h)("div", { style: { padding: '2px' } },
-                                (0, vue_1.h)(upload_1.UUpload, Object.assign({ abstract: true, fileList: fileList, fileListStyle: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: '2px',
-                                        marginTop: '0'
-                                    }, showRemoveButton: false, showDownloadButton: attachments.some((att) => att.status === 'finished'), showRetryButton: attachments.some((att) => att.status === 'error') }, messageUploadPropsRef.value),
-                                    (0, vue_1.h)(upload_1.UUploadFileList, null, {
-                                        'upload-file-title': slots.messageAttachmentTitle
-                                            ? ({ file }) => { var _a; return (_a = slots.messageAttachmentTitle) === null || _a === void 0 ? void 0 : _a.call(slots, file); }
-                                            : undefined,
-                                        'upload-file-subtitle': slots.messageAttachmentSubtitle
-                                            ? ({ file }) => { var _a; return (_a = slots.messageAttachmentSubtitle) === null || _a === void 0 ? void 0 : _a.call(slots, file); }
-                                            : ({ file }) => {
-                                                var _a;
-                                                const att = attachments.find((a) => a.name === file.name);
-                                                return ((0, vue_1.h)("span", { style: {
-                                                        fontSize: '12px',
-                                                        color: '#999'
-                                                    } }, (att === null || att === void 0 ? void 0 : att.size) || ((_a = file.file) === null || _a === void 0 ? void 0 : _a.size)));
-                                            }
-                                    }))))),
-                        message.content && ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-text` }, message.content)))) : attachments.length === 1 ? (slots.messageAttachment ? (slots.messageAttachment(message)) : ((0, vue_1.h)(upload_1.UUpload, Object.assign({ abstract: true, fileList: fileList, showRemoveButton: false, showDownloadButton: attachments.some((att) => att.status === 'finished'), showRetryButton: attachments.some((att) => att.status === 'error') }, messageUploadPropsRef.value),
-                        (0, vue_1.h)(upload_1.UUploadFileList, null, {
-                            'upload-file-title': slots.messageAttachmentTitle
-                                ? ({ file }) => { var _a; return (_a = slots.messageAttachmentTitle) === null || _a === void 0 ? void 0 : _a.call(slots, file); }
-                                : undefined,
+                        attachments.length > 0 && ((0, vue_1.h)(ChatAttachment_1.default, { message: message, attachments: attachments, uploadProps: messageUploadPropsRef.value, withPadding: true }, {
+                            default: slots.messageAttachment,
+                            'upload-file-title': slots.messageAttachmentTitle,
                             'upload-file-subtitle': slots.messageAttachmentSubtitle
-                                ? ({ file }) => { var _a; return (_a = slots.messageAttachmentSubtitle) === null || _a === void 0 ? void 0 : _a.call(slots, file); }
-                                : ({ file }) => {
-                                    var _a;
-                                    const att = attachments.find((a) => a.name === file.name);
-                                    return ((0, vue_1.h)("span", { style: { fontSize: '12px', color: '#999' } }, (att === null || att === void 0 ? void 0 : att.size) || ((_a = file.file) === null || _a === void 0 ? void 0 : _a.size)));
-                                }
-                        })))) : null,
+                        })),
+                        message.content && ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-text` }, message.content)))) : attachments.length === 1 ? ((0, vue_1.h)(ChatAttachment_1.default, { message: message, attachments: attachments, uploadProps: messageUploadPropsRef.value }, {
+                        default: slots.messageAttachment,
+                        'upload-file-title': slots.messageAttachmentTitle,
+                        'upload-file-subtitle': slots.messageAttachmentSubtitle
+                    })) : null,
                     (0, vue_1.h)("div", { class: [
                             `${mergedClsPrefixRef.value}-chat-main__message-meta`,
                             isOwn
@@ -270,16 +218,43 @@ exports.default = (0, vue_1.defineComponent)({
                         ] },
                         (0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, typingTextRef.value)))));
         };
+        const renderSkeletonMessage = (isOwn, index) => {
+            return ((0, vue_1.h)("div", { key: `skeleton-${index}`, class: [
+                    `${mergedClsPrefixRef.value}-chat-main__message`,
+                    isOwn
+                        ? `${mergedClsPrefixRef.value}-chat-main__message--own`
+                        : `${mergedClsPrefixRef.value}-chat-main__message--other`
+                ] },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-wrapper` },
+                    (0, vue_1.h)("div", { class: [
+                            `${mergedClsPrefixRef.value}-chat-main__message-bubble`,
+                            isOwn
+                                ? `${mergedClsPrefixRef.value}-chat-main__message-bubble--own`
+                                : `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`
+                        ] },
+                        (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-text` },
+                            (0, vue_1.h)("div", { style: { width: '376px', height: '20px' } }))),
+                    (0, vue_1.h)("div", { class: [
+                            `${mergedClsPrefixRef.value}-chat-main__message-meta`,
+                            isOwn
+                                ? `${mergedClsPrefixRef.value}-chat-main__message-meta--own`
+                                : `${mergedClsPrefixRef.value}-chat-main__message-meta--other`
+                        ] },
+                        (0, vue_1.h)(skeleton_1.USkeleton, { style: { width: '36px', height: '20px', borderRadius: '4px' } })))));
+        };
         const renderMessages = () => {
             var _a, _b;
             if (messagesLoadingRef.value) {
-                return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__loading` }, "Loading messages..."));
+                return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__messages` }, Array.from({ length: messagesLoadingCountRef.value || 5 }).map((_, index) => {
+                    const isOwn = index % 2 === 0;
+                    return renderSkeletonMessage(isOwn, index);
+                })));
             }
             const messagesWithDates = [];
             let currentDate = '';
             let unreadNotificationInserted = false;
             (_a = messagesRef.value) === null || _a === void 0 ? void 0 : _a.forEach((message, index) => {
-                const messageDate = message.date || '12 августа';
+                const messageDate = message.date || '';
                 if (messageDate !== currentDate) {
                     messagesWithDates.push({
                         type: 'date-separator',
@@ -320,17 +295,36 @@ exports.default = (0, vue_1.defineComponent)({
             if (isSending.value) {
                 return;
             }
-            if (inputValue.value.trim() &&
+            const hasContent = inputValue.value.trim();
+            const hasAttachments = attachmentFileList.value.length > 0;
+            if ((hasContent || hasAttachments) &&
                 selectedChatRef.value &&
                 handleMessageSend) {
                 isSending.value = true;
                 try {
-                    handleMessageSend(inputValue.value.trim());
+                    const attachments = attachmentFileList.value.length > 0
+                        ? attachmentFileList.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: 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] = '';
                     const globalState = getChatGlobalState();
-                    if (globalState.notificationsShown.has(selectedChatRef.value.id)) {
-                        globalState.notificationsShown.delete(selectedChatRef.value.id);
+                    if (globalState.hasNotificationShown(selectedChatRef.value.id)) {
+                        globalState.markNotificationShown(selectedChatRef.value.id);
                         showNotificationManually.value = false;
                         hasUnreadMessages.value = false;
                     }
@@ -339,39 +333,54 @@ exports.default = (0, vue_1.defineComponent)({
                     });
                     setTimeout(() => {
                         scrollToBottom();
-                    }, 50);
+                    }, SCROLL_DELAY);
                 }
                 finally {
                     setTimeout(() => {
                         isSending.value = false;
-                    }, 100);
+                    }, SENDING_DELAY);
                 }
             }
         });
+        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));
-            if (newFiles.length > 0 && handleMessageSend) {
-                const attachments = newFiles.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: file.status,
-                        percentage: (_c = file.percentage) !== null && _c !== void 0 ? _c : undefined
-                    });
-                });
-                handleMessageSend('', attachments);
-                attachmentFileList.value = [];
-                void (0, vue_1.nextTick)(() => {
-                    scrollToBottom();
-                });
-                setTimeout(() => {
-                    scrollToBottom();
-                }, 50);
+            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 = [];
+                        void (0, vue_1.nextTick)(() => {
+                            scrollToBottom();
+                        });
+                        setTimeout(() => {
+                            scrollToBottom();
+                        }, SCROLL_DELAY);
+                    }
+                }, SENDING_DELAY);
             }
         };
         const renderFooter = () => {
@@ -383,7 +392,7 @@ exports.default = (0, vue_1.defineComponent)({
                                 (0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value),
                                     (0, vue_1.h)(fluent_1.Attach16Filled, null))))
                         }),
-                        (0, vue_1.h)(input_1.UInput, Object.assign({ ref: "inputRef", value: inputValue.value, placeholder: "\u041D\u0430\u043F\u0438\u0441\u0430\u0442\u044C \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435...", class: `${mergedClsPrefixRef.value}-chat-main__input` }, footerInputPropsRef.value, { onUpdateValue: (value) => {
+                        (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, { onUpdateValue: (value) => {
                                 inputValue.value = value;
                                 if (selectedChatRef.value) {
                                     chatInputs.value[selectedChatRef.value.id] = value;

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

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
-const ionicons5_1 = require("@vicons/ionicons5");
-const ionicons4_1 = require("@vicons/ionicons4");
 const interface_1 = require("../interface");
+const ChatGlobalState_1 = require("../ChatGlobalState");
 const flex_1 = require("../../../flex");
 const empty_1 = require("../../../empty");
 const avatar_1 = require("../../../avatar");
@@ -11,11 +10,12 @@ const select_1 = require("../../../select");
 const list_1 = require("../../../list");
 const badge_1 = require("../../../badge");
 const icon_1 = require("../../../icon");
+const icons_1 = require("../../../_internal/icons");
 const statusIconMapper = {
-    [interface_1.MessageStatus.READ]: ionicons5_1.CheckmarkDoneSharp,
-    [interface_1.MessageStatus.PENDING]: ionicons4_1.MdTime,
-    [interface_1.MessageStatus.RETRY]: ionicons5_1.Refresh,
-    [interface_1.MessageStatus.UNREAD]: ionicons5_1.CheckmarkDoneSharp
+    [interface_1.MessageStatus.READ]: icons_1.CheckmarkDoneSharp,
+    [interface_1.MessageStatus.PENDING]: icons_1.MdTime,
+    [interface_1.MessageStatus.RETRY]: icons_1.Refresh,
+    [interface_1.MessageStatus.UNREAD]: icons_1.CheckmarkDoneSharp
 };
 exports.default = (0, vue_1.defineComponent)({
     name: 'ChatSidebar',
@@ -25,7 +25,7 @@ exports.default = (0, vue_1.defineComponent)({
     render() {
         var _a, _b;
         const { slots } = this;
-        const { mergedClsPrefixRef, chatItemsRef, chatItemsLoadingRef, listEmptyPropsRef, selectedChatIdRef, typingChatIdsRef, listItemAvatarPropsRef, listItemBadgePropsRef, handleChatSelect
+        const { mergedClsPrefixRef, chatItemsRef, chatItemsLoadingRef, chatItemsLoadingCountRef, listEmptyPropsRef, selectedChatIdRef, typingChatIdsRef, typingTextRef, listItemAvatarPropsRef, listItemBadgePropsRef, handleChatSelect
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.chatInjectionKey);
         const renderListHeader = () => {
@@ -67,23 +67,16 @@ exports.default = (0, vue_1.defineComponent)({
                         minWidth: 0,
                         maxWidth: '100%'
                     } }, isTyping
-                    ? 'Печатает...'
-                    : typeof item.subtitle === 'function'
-                        ? item.subtitle()
-                        : item.subtitle)),
+                    ? typingTextRef.value
+                    : typeof item.subtitle === 'string'
+                        ? item.subtitle
+                        : typeof item.subtitle === 'function'
+                            ? item.subtitle()
+                            : item.subtitle)),
                 suffix: () => {
-                    const getChatGlobalState = () => {
-                        var _a;
-                        if (typeof window === 'undefined') {
-                            return { openedChats: new Set() };
-                        }
-                        if (!((_a = window.__chatGlobalState) === null || _a === void 0 ? void 0 : _a.openedChats)) {
-                            return { openedChats: new Set() };
-                        }
-                        return window.__chatGlobalState;
-                    };
+                    const getChatGlobalState = () => ChatGlobalState_1.ChatGlobalState.getInstance();
                     const globalState = getChatGlobalState();
-                    const wasOpened = globalState.openedChats.has(item.id);
+                    const wasOpened = globalState.isChatOpened(item.id);
                     const displayUnreadCount = wasOpened ? 0 : item.unreadCount || 0;
                     const hasUnreadIncoming = displayUnreadCount > 0;
                     const lastMessageIsOwn = item.lastMessageIsOwn;
@@ -102,6 +95,6 @@ exports.default = (0, vue_1.defineComponent)({
         };
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar` },
             renderListHeader(),
-            (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__content` }, chatItemsLoadingRef.value ? ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__loading` }, "Loading chats...")) : ((_a = chatItemsRef.value) === null || _a === void 0 ? void 0 : _a.length) ? ((0, vue_1.h)(list_1.UList, { showIcon: false }, (_b = chatItemsRef.value) === null || _b === void 0 ? void 0 : _b.map((item) => renderChatItem(item)))) : ((0, vue_1.h)(empty_1.UEmpty, Object.assign({ description: "No chats" }, listEmptyPropsRef.value))))));
+            (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__content` }, chatItemsLoadingRef.value ? ((0, vue_1.h)(list_1.UList, { loading: true }, Array.from({ length: chatItemsLoadingCountRef.value || 10 }).map((_, index) => ((0, vue_1.h)(list_1.UListItem, { key: index, avatar: { icon: icons_1.PersonOutline }, description: { text: 'Loading...' }, header: { text: 'Loading...' } }))))) : ((_a = chatItemsRef.value) === null || _a === void 0 ? void 0 : _a.length) ? ((0, vue_1.h)(list_1.UList, { showIcon: false }, (_b = chatItemsRef.value) === null || _b === void 0 ? void 0 : _b.map((item) => renderChatItem(item)))) : ((0, vue_1.h)(empty_1.UEmpty, Object.assign({}, listEmptyPropsRef.value))))));
     }
 });

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

@@ -147,7 +147,9 @@ export interface ChatProps {
     typingText?: string;
     closeButtonText?: string;
     chatItemsLoading?: boolean;
+    chatItemsLoadingCount?: number;
     messagesLoading?: boolean;
+    messagesLoadingCount?: number;
     onChatSelect?: OnChatSelect;
     onMessageSend?: OnMessageSend;
     onMessageRetry?: (message: ChatMessageData) => void;
@@ -244,7 +246,9 @@ export declare const chatInjectionKey: InjectionKey<{
     messagesRef: Ref<ChatMessageData[]>;
     typingChatIdsRef: Ref<Array<string | number | symbol> | undefined>;
     chatItemsLoadingRef: Ref<boolean | undefined>;
+    chatItemsLoadingCountRef: Ref<number | undefined>;
     messagesLoadingRef: Ref<boolean | undefined>;
+    messagesLoadingCountRef: Ref<number | undefined>;
     listEmptyPropsRef: Ref<Partial<EmptyProps> | undefined>;
     listHeaderTitleRef: Ref<string | (() => VNodeChild) | undefined>;
     listHeaderActionsRef: Ref<Array<() => VNodeChild> | undefined>;
@@ -261,9 +265,10 @@ export declare const chatInjectionKey: InjectionKey<{
     footerUploadPropsRef: Ref<Partial<UploadProps> | undefined>;
     footerUploadTriggerPropsRef: Ref<Record<string, any> | undefined>;
     footerIconPropsRef: Ref<Partial<IconProps> | undefined>;
-    retryTextRef: Ref<string | undefined>;
-    typingTextRef: Ref<string | undefined>;
-    closeButtonTextRef: Ref<string | undefined>;
+    inputPlaceholderRef: Ref<string>;
+    retryTextRef: Ref<string>;
+    typingTextRef: Ref<string>;
+    closeButtonTextRef: Ref<string>;
     handleChatSelect: (chatId: ChatId) => void;
     handleMessageSend: (content: string, attachments?: ChatAttachment[]) => void;
     handleMessageRetry: (message: ChatMessageData) => void;

package/lib/chat/src/styles/index.cssr.js

@@ -251,6 +251,9 @@ exports.default = (0, cssr_1.cB)('chat', `
  min-width: 300px;
  height: 44px;
  padding: 12px 16px;
+ `), (0, cssr_1.cM)('skeleton', `
+ min-width: 376px;
+ height: 44px;
  `)]), (0, cssr_1.cE)('message-text', `
  padding: 12px 16px;
  `), (0, cssr_1.cE)('message-attachment', `
@@ -287,6 +290,10 @@ exports.default = (0, cssr_1.cB)('chat', `
  justify-content: flex-end;
  `), (0, cssr_1.cM)('other', `
  justify-content: flex-start;
+ `), (0, cssr_1.cM)('skeleton', `
+ width: 36px;
+ height: 20px;
+ border-radius: 4px;
  `)]), (0, cssr_1.cE)('message-time', `
  font-size: 11px;
  color: var(--u-message-time-color);

package/lib/chat/styles/dark.d.ts

@@ -201,9 +201,7 @@ declare const chatDark: import("../../_mixins").Theme<"Chat", {
             clearColorPressed: string;
             caretColorSecondary: string;
             filterCounterTextColor: string;
-            filterCounterSeparatorColor: string;
             filterCounterTextColorDisabled: string;
-            filterCounterSeparatorColorDisabled: string;
             arrowColorSecondary: string;
             clearColorSecondary: string;
             colorSecondary: string;

package/lib/chat/styles/light.d.ts

@@ -239,9 +239,7 @@ declare const chatLight: import("../../_mixins").Theme<"Chat", {
             clearColorPressed: string;
             caretColorSecondary: string;
             filterCounterTextColor: string;
-            filterCounterSeparatorColor: string;
             filterCounterTextColorDisabled: string;
-            filterCounterSeparatorColorDisabled: string;
             arrowColorSecondary: string;
             clearColorSecondary: string;
             colorSecondary: string;

package/lib/data-table/src/DataTable.d.ts

@@ -644,9 +644,7 @@ declare const _default: import("vue").DefineComponent<{
                     clearColorPressed: string;
                     caretColorSecondary: string;
                     filterCounterTextColor: string;
-                    filterCounterSeparatorColor: string;
                     filterCounterTextColorDisabled: string;
-                    filterCounterSeparatorColorDisabled: string;
                     arrowColorSecondary: string;
                     clearColorSecondary: string;
                     colorSecondary: string;
@@ -1562,9 +1560,7 @@ declare const _default: import("vue").DefineComponent<{
                     clearColorPressed: string;
                     caretColorSecondary: string;
                     filterCounterTextColor: string;
-                    filterCounterSeparatorColor: string;
                     filterCounterTextColorDisabled: string;
-                    filterCounterSeparatorColorDisabled: string;
                     arrowColorSecondary: string;
                     clearColorSecondary: string;
                     colorSecondary: string;
@@ -2480,9 +2476,7 @@ declare const _default: import("vue").DefineComponent<{
                     clearColorPressed: string;
                     caretColorSecondary: string;
                     filterCounterTextColor: string;
-                    filterCounterSeparatorColor: string;
                     filterCounterTextColorDisabled: string;
-                    filterCounterSeparatorColorDisabled: string;
                     arrowColorSecondary: string;
                     clearColorSecondary: string;
                     colorSecondary: string;
@@ -3421,9 +3415,7 @@ declare const _default: import("vue").DefineComponent<{
                         clearColorPressed: string;
                         caretColorSecondary: string;
                         filterCounterTextColor: string;
-                        filterCounterSeparatorColor: string;
                         filterCounterTextColorDisabled: string;
-                        filterCounterSeparatorColorDisabled: string;
                         arrowColorSecondary: string;
                         clearColorSecondary: string;
                         colorSecondary: string;
@@ -3908,9 +3900,7 @@ declare const _default: import("vue").DefineComponent<{
                             clearColorPressed: string;
                             caretColorSecondary: string;
                             filterCounterTextColor: string;
-                            filterCounterSeparatorColor: string;
                             filterCounterTextColorDisabled: string;
-                            filterCounterSeparatorColorDisabled: string;
                             arrowColorSecondary: string;
                             clearColorSecondary: string;
                             colorSecondary: string;
@@ -4922,9 +4912,7 @@ declare const _default: import("vue").DefineComponent<{
                     clearColorPressed: string;
                     caretColorSecondary: string;
                     filterCounterTextColor: string;
-                    filterCounterSeparatorColor: string;
                     filterCounterTextColorDisabled: string;
-                    filterCounterSeparatorColorDisabled: string;
                     arrowColorSecondary: string;
                     clearColorSecondary: string;
                     colorSecondary: string;
@@ -5840,9 +5828,7 @@ declare const _default: import("vue").DefineComponent<{
                     clearColorPressed: string;
                     caretColorSecondary: string;
                     filterCounterTextColor: string;
-                    filterCounterSeparatorColor: string;
                     filterCounterTextColorDisabled: string;
-                    filterCounterSeparatorColorDisabled: string;
                     arrowColorSecondary: string;
                     clearColorSecondary: string;
                     colorSecondary: string;
@@ -6758,9 +6744,7 @@ declare const _default: import("vue").DefineComponent<{
                     clearColorPressed: string;
                     caretColorSecondary: string;
                     filterCounterTextColor: string;
-                    filterCounterSeparatorColor: string;
                     filterCounterTextColorDisabled: string;
-                    filterCounterSeparatorColorDisabled: string;
                     arrowColorSecondary: string;
                     clearColorSecondary: string;
                     colorSecondary: string;

package/lib/data-table/src/HeaderButton/FilterButton.d.ts

@@ -546,9 +546,7 @@ declare const _default: import("vue").DefineComponent<{
                         clearColorPressed: string;
                         caretColorSecondary: string;
                         filterCounterTextColor: string;
-                        filterCounterSeparatorColor: string;
                         filterCounterTextColorDisabled: string;
-                        filterCounterSeparatorColorDisabled: string;
                         arrowColorSecondary: string;
                         clearColorSecondary: string;
                         colorSecondary: string;
@@ -1033,9 +1031,7 @@ declare const _default: import("vue").DefineComponent<{
                             clearColorPressed: string;
                             caretColorSecondary: string;
                             filterCounterTextColor: string;
-                            filterCounterSeparatorColor: string;
                             filterCounterTextColorDisabled: string;
-                            filterCounterSeparatorColorDisabled: string;
                             arrowColorSecondary: string;
                             clearColorSecondary: string;
                             colorSecondary: string;