@uzum-tech/ui 1.7.0 → 1.7.1

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

@@ -9,35 +9,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { h, defineComponent, inject, computed, ref, watch, nextTick, onMounted, Fragment } from 'vue';
 import { ArrowHookUpRight20Filled, PersonNote20Regular, Attach16Filled } from '@vicons/fluent';
-import { CheckmarkDoneSharp, Refresh } from '@vicons/ionicons5';
-import { MdTime } from '@vicons/ionicons4';
 import { MessageStatus, ChatMessageType, chatInjectionKey } from '../interface';
 import { UInput } from '../../../input';
 import { UButton } from '../../../button';
 import { UIcon } from '../../../icon';
 import { UScrollbar } from '../../../scrollbar';
-import { UUpload, UUploadTrigger, UUploadFileList } from '../../../upload';
+import { UUpload, UUploadTrigger } from '../../../upload';
 import { UFlex } from '../../../flex';
 import { resolveSlot } from '../../../_utils';
 import { UText } from '../../../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();
+import { USkeleton } from '../../../skeleton';
+import { CheckmarkDoneSharp, Refresh, MdTime } from '../../../_internal/icons';
+import { ChatGlobalState } from '../ChatGlobalState';
+import ChatAttachmentComponent from './ChatAttachment';
+const SCROLL_DELAY = 50;
+const SENDING_DELAY = 100;
+const getChatGlobalState = () => ChatGlobalState.getInstance();
 const statusIconMapper = {
     [MessageStatus.READ]: CheckmarkDoneSharp,
     [MessageStatus.PENDING]: MdTime,
@@ -47,7 +34,7 @@ const statusIconMapper = {
 export default 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
          } = inject(chatInjectionKey);
         const messagesBodyRef = ref();
@@ -68,12 +55,12 @@ export default 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;
@@ -90,7 +77,7 @@ export default 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;
                     }
                 }
@@ -116,19 +103,20 @@ export default 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 = () => {
@@ -165,23 +153,6 @@ export default 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 (h("div", { key: message.id, class: [
                     `${mergedClsPrefixRef.value}-chat-main__message`,
                     isOwn
@@ -195,42 +166,16 @@ export default defineComponent({
                                 ? `${mergedClsPrefixRef.value}-chat-main__message-bubble--own`
                                 : `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`
                         ] },
-                        attachments.length > 0 &&
-                            (slots.messageAttachment ? (slots.messageAttachment(message)) : (h("div", { style: { padding: '2px' } },
-                                h(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),
-                                    h(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 (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 && (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-text` }, message.content)))) : attachments.length === 1 ? (slots.messageAttachment ? (slots.messageAttachment(message)) : (h(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),
-                        h(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 && (h(ChatAttachmentComponent, { 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 (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 && (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-text` }, message.content)))) : attachments.length === 1 ? (h(ChatAttachmentComponent, { message: message, attachments: attachments, uploadProps: messageUploadPropsRef.value }, {
+                        default: slots.messageAttachment,
+                        'upload-file-title': slots.messageAttachmentTitle,
+                        'upload-file-subtitle': slots.messageAttachmentSubtitle
+                    })) : null,
                     h("div", { class: [
                             `${mergedClsPrefixRef.value}-chat-main__message-meta`,
                             isOwn
@@ -268,16 +213,43 @@ export default defineComponent({
                         ] },
                         h("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, typingTextRef.value)))));
         };
+        const renderSkeletonMessage = (isOwn, index) => {
+            return (h("div", { key: `skeleton-${index}`, class: [
+                    `${mergedClsPrefixRef.value}-chat-main__message`,
+                    isOwn
+                        ? `${mergedClsPrefixRef.value}-chat-main__message--own`
+                        : `${mergedClsPrefixRef.value}-chat-main__message--other`
+                ] },
+                h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-wrapper` },
+                    h("div", { class: [
+                            `${mergedClsPrefixRef.value}-chat-main__message-bubble`,
+                            isOwn
+                                ? `${mergedClsPrefixRef.value}-chat-main__message-bubble--own`
+                                : `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`
+                        ] },
+                        h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-text` },
+                            h("div", { style: { width: '376px', height: '20px' } }))),
+                    h("div", { class: [
+                            `${mergedClsPrefixRef.value}-chat-main__message-meta`,
+                            isOwn
+                                ? `${mergedClsPrefixRef.value}-chat-main__message-meta--own`
+                                : `${mergedClsPrefixRef.value}-chat-main__message-meta--other`
+                        ] },
+                        h(USkeleton, { style: { width: '36px', height: '20px', borderRadius: '4px' } })))));
+        };
         const renderMessages = () => {
             var _a, _b;
             if (messagesLoadingRef.value) {
-                return (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__loading` }, "Loading messages..."));
+                return (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',
@@ -318,17 +290,36 @@ export default 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: 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;
                     }
@@ -337,39 +328,54 @@ export default defineComponent({
                     });
                     setTimeout(() => {
                         scrollToBottom();
-                    }, 50);
+                    }, SCROLL_DELAY);
                 }
                 finally {
                     setTimeout(() => {
                         isSending.value = false;
-                    }, 100);
+                    }, SENDING_DELAY);
                 }
             }
         });
+        let fileUploadTimer = null;
+        const pendingFiles = 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: 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 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: 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 nextTick(() => {
+                            scrollToBottom();
+                        });
+                        setTimeout(() => {
+                            scrollToBottom();
+                        }, SCROLL_DELAY);
+                    }
+                }, SENDING_DELAY);
             }
         };
         const renderFooter = () => {
@@ -381,7 +387,7 @@ export default defineComponent({
                                 h(UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value),
                                     h(Attach16Filled, null))))
                         }),
-                        h(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) => {
+                        h(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/es/chat/src/ChatParts/Sidebar.js

@@ -1,7 +1,6 @@
 import { h, defineComponent, inject } from 'vue';
-import { CheckmarkDoneSharp, Refresh } from '@vicons/ionicons5';
-import { MdTime } from '@vicons/ionicons4';
 import { chatInjectionKey, MessageStatus } from '../interface';
+import { ChatGlobalState } from '../ChatGlobalState';
 import { UFlex } from '../../../flex';
 import { UEmpty } from '../../../empty';
 import { UAvatar } from '../../../avatar';
@@ -9,6 +8,7 @@ import { USelect } from '../../../select';
 import { UListItem, UList } from '../../../list';
 import { UBadge } from '../../../badge';
 import { UIcon } from '../../../icon';
+import { CheckmarkDoneSharp, MdTime, PersonOutline, Refresh } from '../../../_internal/icons';
 const statusIconMapper = {
     [MessageStatus.READ]: CheckmarkDoneSharp,
     [MessageStatus.PENDING]: MdTime,
@@ -23,7 +23,7 @@ export default 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
          } = inject(chatInjectionKey);
         const renderListHeader = () => {
@@ -65,23 +65,16 @@ export default 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.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;
@@ -100,6 +93,6 @@ export default defineComponent({
         };
         return (h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar` },
             renderListHeader(),
-            h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__content` }, chatItemsLoadingRef.value ? (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__loading` }, "Loading chats...")) : ((_a = chatItemsRef.value) === null || _a === void 0 ? void 0 : _a.length) ? (h(UList, { showIcon: false }, (_b = chatItemsRef.value) === null || _b === void 0 ? void 0 : _b.map((item) => renderChatItem(item)))) : (h(UEmpty, Object.assign({ description: "No chats" }, listEmptyPropsRef.value))))));
+            h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__content` }, chatItemsLoadingRef.value ? (h(UList, { loading: true }, Array.from({ length: chatItemsLoadingCountRef.value || 10 }).map((_, index) => (h(UListItem, { key: index, avatar: { icon: PersonOutline }, description: { text: 'Loading...' }, header: { text: 'Loading...' } }))))) : ((_a = chatItemsRef.value) === null || _a === void 0 ? void 0 : _a.length) ? (h(UList, { showIcon: false }, (_b = chatItemsRef.value) === null || _b === void 0 ? void 0 : _b.map((item) => renderChatItem(item)))) : (h(UEmpty, Object.assign({}, listEmptyPropsRef.value))))));
     }
 });

package/es/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/es/chat/src/styles/index.cssr.js

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

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

package/es/data-table/src/HeaderButton/FilterMenu.d.ts

@@ -571,9 +571,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;
@@ -1058,9 +1056,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;