@uzum-tech/ui 1.7.2 → 1.8.0

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

@@ -9,8 +9,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { h, defineComponent, inject, computed, ref, watch, nextTick, onMounted, Fragment } from 'vue';
 import { MessageStatus, ChatMessageType, chatInjectionKey } from '../interface';
-import { ChatGlobalState } from '../ChatGlobalState';
-import ChatAttachmentComponent from './ChatAttachment';
 import { UInput } from '../../../input';
 import { UButton } from '../../../button';
 import { UIcon } from '../../../icon';
@@ -19,21 +17,14 @@ import { UUpload, UUploadTrigger } from '../../../upload';
 import { UFlex } from '../../../flex';
 import { resolveSlot } from '../../../_utils';
 import { UText } from '../../../typography';
-import { USkeleton } from '../../../skeleton';
-import { CheckmarkDoneSharp, Refresh, MdTime, ArrowHookUpRight, PersonNote, AttachIcon } from '../../../_internal/icons';
+import UChatMessages from '../ChatMessages';
+import { ArrowHookUpRight, PersonNote, AttachIcon } from '../../../_internal/icons';
 const SCROLL_DELAY = 50;
 const SENDING_DELAY = 100;
-const getChatGlobalState = () => ChatGlobalState.getInstance();
-const statusIconMapper = {
-    [MessageStatus.READ]: CheckmarkDoneSharp,
-    [MessageStatus.PENDING]: MdTime,
-    [MessageStatus.RETRY]: Refresh,
-    [MessageStatus.UNREAD]: CheckmarkDoneSharp
-};
 export default defineComponent({
     name: 'ChatMainArea',
     setup(_, { slots }) {
-        const { mergedClsPrefixRef, selectedChatRef, messagesRef, typingChatIdsRef, messagesLoadingRef, messagesLoadingCountRef, headerButtonPropsRef, headerIconPropsRef, messageUploadPropsRef, footerInputPropsRef, footerButtonPropsRef, footerUploadPropsRef, footerIconPropsRef, inputPlaceholderRef, 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, unreadNotificationTextRef, notificationsShownSetRef, unreadCountsBeforeReadRef, markNotificationShown, handleMessageSend, handleMessageRetry, onChatClose, onChatShare, onUserProfile
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(chatInjectionKey);
         const messagesBodyRef = ref();
@@ -49,17 +40,18 @@ export default defineComponent({
         const hasUnreadMessages = ref(false);
         const unreadCountOnOpen = ref(0);
         const chatInputs = ref({});
+        const lastMessageId = ref(null);
         watch(selectedChatRef, (newChat, oldChat) => {
             if (newChat && newChat.id !== (oldChat === null || oldChat === void 0 ? void 0 : oldChat.id)) {
                 inputValue.value = chatInputs.value[newChat.id] || '';
-                unreadCountOnOpen.value = unreadMessagesCount.value;
-                const globalState = getChatGlobalState();
-                globalState.markChatOpened(newChat.id);
-                if (unreadCountOnOpen.value > 0 &&
-                    !globalState.hasNotificationShown(newChat.id)) {
+                const unreadBeforeRead = unreadCountsBeforeReadRef.value[newChat.id] || 0;
+                unreadCountOnOpen.value = unreadBeforeRead;
+                lastMessageId.value = null;
+                if (unreadBeforeRead > 0 &&
+                    !notificationsShownSetRef.value.has(newChat.id)) {
                     hasUnreadMessages.value = true;
                     showNotificationManually.value = true;
-                    globalState.markNotificationShown(newChat.id);
+                    markNotificationShown(newChat.id);
                 }
                 else {
                     hasUnreadMessages.value = false;
@@ -68,29 +60,41 @@ export default defineComponent({
                 void nextTick(() => {
                     scrollToBottom();
                 });
+                setTimeout(() => {
+                    scrollToBottom();
+                }, SCROLL_DELAY);
             }
         }, { immediate: true });
-        watch(messagesRef, (newMessages, oldMessages) => {
-            if (newMessages &&
-                oldMessages &&
-                newMessages.length > oldMessages.length) {
-                if (selectedChatRef.value) {
-                    const globalState = getChatGlobalState();
-                    if (globalState.hasNotificationShown(selectedChatRef.value.id)) {
-                        showNotificationManually.value = false;
-                    }
-                }
+        watch(messagesRef, (newMessages) => {
+            if (!newMessages || newMessages.length === 0) {
+                lastMessageId.value = null;
+                return;
+            }
+            const currentLastMessage = newMessages[newMessages.length - 1];
+            const currentLastId = currentLastMessage === null || currentLastMessage === void 0 ? void 0 : currentLastMessage.id;
+            if (currentLastId !== lastMessageId.value &&
+                lastMessageId.value !== null) {
                 void nextTick(() => {
                     scrollToBottom();
                 });
+                setTimeout(() => {
+                    scrollToBottom();
+                }, SCROLL_DELAY);
+                if (currentLastMessage &&
+                    !currentLastMessage.isOwn &&
+                    currentLastMessage.status === MessageStatus.UNREAD) {
+                    unreadCountOnOpen.value = unreadMessagesCount.value;
+                }
             }
-        }, { deep: true });
+            lastMessageId.value = currentLastId !== null && currentLastId !== void 0 ? currentLastId : null;
+        }, { deep: true, flush: 'post' });
         watch(unreadMessagesCount, (newCount, oldCount) => {
-            if (selectedChatRef.value) {
-                if (newCount === 0 && oldCount > 0) {
-                    showNotificationManually.value = false;
-                    hasUnreadMessages.value = false;
-                }
+            if (selectedChatRef.value && newCount === 0 && oldCount > 0) {
+                showNotificationManually.value = false;
+                hasUnreadMessages.value = false;
+                const newSet = new Set(notificationsShownSetRef.value);
+                newSet.delete(selectedChatRef.value.id);
+                notificationsShownSetRef.value = newSet;
             }
         });
         const showUnreadNotification = computed(() => {
@@ -100,189 +104,63 @@ export default defineComponent({
             void nextTick(() => {
                 scrollToBottom();
             });
+            setTimeout(() => {
+                scrollToBottom();
+            }, SCROLL_DELAY);
         });
         const scrollToBottom = () => {
             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;
+                const scrollContainer = el.$el.querySelector('.u-scrollbar-content');
+                if (scrollContainer) {
+                    scrollContainer.scrollTop = scrollContainer.scrollHeight;
+                    return;
+                }
+            }
+            if ('scrollTo' in el && typeof el.scrollTo === 'function') {
+                el.scrollTo({ top: 999999, behavior: 'auto' });
                 return;
             }
             if ('scrollTop' in el && 'scrollHeight' in el) {
                 el.scrollTop = el.scrollHeight;
             }
         };
-        const renderUnreadNotification = () => {
-            if (!showUnreadNotification.value)
-                return null;
-            return (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__unread-notification` },
-                h("span", null,
-                    unreadCountOnOpen.value,
-                    " \u043D\u043E\u0432\u044B\u0445 \u0443\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u044F")));
-        };
         const renderHeader = () => {
-            var _a;
             return (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` },
-                h(UFlex, { justify: "space-between", align: "flex-start" },
-                    h(UText, { variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title` }, ((_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) || 'Select a chat'),
-                    h(UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, resolveSlot(slots.headerActions, () => [
-                        h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, headerButtonPropsRef.value, { onClick: () => { var _a; return (_a = onChatShare === null || onChatShare === void 0 ? void 0 : onChatShare.value) === null || _a === void 0 ? void 0 : _a.call(onChatShare); } }),
-                            h(UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value),
-                                h(ArrowHookUpRight, null))),
-                        h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, headerButtonPropsRef.value, { onClick: () => { var _a; return (_a = onUserProfile === null || onUserProfile === void 0 ? void 0 : onUserProfile.value) === null || _a === void 0 ? void 0 : _a.call(onUserProfile); } }),
-                            h(UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value),
-                                h(PersonNote, null))),
-                        h(UButton, Object.assign({ type: "primary", size: "large", round: true }, headerButtonPropsRef.value, { onClick: () => { var _a; return (_a = onChatClose === null || onChatClose === void 0 ? void 0 : onChatClose.value) === null || _a === void 0 ? void 0 : _a.call(onChatClose); } }), closeButtonTextRef.value)
-                    ])))));
-        };
-        const renderDateSeparator = (date) => {
-            return (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__date-separator` },
-                h("span", null, date)));
-        };
-        const renderMessage = (message) => {
-            const isOwn = message.isOwn;
-            const attachments = message.attachment
-                ? Array.isArray(message.attachment)
-                    ? message.attachment
-                    : [message.attachment]
-                : [];
-            return (h("div", { key: message.id, 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` },
-                    message.content || attachments.length > 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`
-                        ] },
-                        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
-                        })),
-                        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
-                                ? `${mergedClsPrefixRef.value}-chat-main__message-meta--own`
-                                : `${mergedClsPrefixRef.value}-chat-main__message-meta--other`,
-                            message.status === MessageStatus.RETRY &&
-                                `${mergedClsPrefixRef.value}-chat-main__message-meta--retry`
-                        ] }, message.status === MessageStatus.RETRY ? (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry`, onClick: () => {
-                            handleMessageRetry(message);
-                        }, style: { cursor: 'pointer' } },
-                        h(UIcon, { size: 16, component: statusIconMapper[MessageStatus.RETRY], class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon` }),
-                        h("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry-text` }, retryTextRef.value))) : (h(Fragment, null,
-                        h("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, message.timestamp),
-                        isOwn && message.status && (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-status` }, slots.messageStatus
-                            ? slots.messageStatus(message)
-                            : statusIconMapper[message.status] && (h(UIcon, { size: 16, component: statusIconMapper[message.status], class: [
-                                    `${mergedClsPrefixRef.value}-chat-main__message-status-icon`,
-                                    `${mergedClsPrefixRef.value}-chat-main__message-status-icon--${String(message.status)}`
-                                ] }))))))))));
-        };
-        const renderTypingIndicator = () => {
-            return (h("div", { class: [
-                    `${mergedClsPrefixRef.value}-chat-main__message`,
-                    `${mergedClsPrefixRef.value}-chat-main__message--other`
-                ] },
-                h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-wrapper` },
-                    h("div", { class: [
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble--typing`
-                        ] }),
-                    h("div", { class: [
-                            `${mergedClsPrefixRef.value}-chat-main__message-meta`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-meta--other`
-                        ] },
-                        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' } })))));
+                h(UFlex, { justify: "space-between", align: "flex-start" }, {
+                    default: () => (h(Fragment, null,
+                        h(UText, { variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title` }, {
+                            default: () => { var _a; return ((_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) || 'Select a chat'; }
+                        }),
+                        h(UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, {
+                            default: () => resolveSlot(slots.headerActions, () => [
+                                h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, headerButtonPropsRef.value, { onClick: () => { var _a; return (_a = onChatShare === null || onChatShare === void 0 ? void 0 : onChatShare.value) === null || _a === void 0 ? void 0 : _a.call(onChatShare); } }), {
+                                    default: () => (h(UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value), {
+                                        default: () => h(ArrowHookUpRight, null)
+                                    }))
+                                }),
+                                h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, headerButtonPropsRef.value, { onClick: () => { var _a; return (_a = onUserProfile === null || onUserProfile === void 0 ? void 0 : onUserProfile.value) === null || _a === void 0 ? void 0 : _a.call(onUserProfile); } }), {
+                                    default: () => (h(UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value), {
+                                        default: () => h(PersonNote, null)
+                                    }))
+                                }),
+                                h(UButton, Object.assign({ type: "primary", size: "large", round: true }, headerButtonPropsRef.value, { 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
+                                })
+                            ])
+                        })))
+                })));
         };
         const renderMessages = () => {
-            var _a, _b;
-            if (messagesLoadingRef.value) {
-                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 || '';
-                if (messageDate !== currentDate) {
-                    messagesWithDates.push({
-                        type: 'date-separator',
-                        date: messageDate,
-                        id: `date-${String(index)}`
-                    });
-                    currentDate = messageDate;
-                }
-                if (!unreadNotificationInserted &&
-                    !message.isOwn &&
-                    message.status === MessageStatus.UNREAD &&
-                    showUnreadNotification.value) {
-                    messagesWithDates.push({
-                        type: 'unread-notification',
-                        id: 'unread-notification'
-                    });
-                    unreadNotificationInserted = true;
-                }
-                messagesWithDates.push(Object.assign({ type: 'message' }, message));
-            });
-            return (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__messages-container` },
-                messagesWithDates.map((item) => {
-                    var _a;
-                    if (item.type === 'date-separator') {
-                        return renderDateSeparator((_a = item.date) !== null && _a !== void 0 ? _a : '');
-                    }
-                    if (item.type === 'unread-notification') {
-                        return renderUnreadNotification();
-                    }
-                    return renderMessage(item);
-                }),
-                selectedChatRef.value &&
-                    ((_b = typingChatIdsRef.value) === null || _b === void 0 ? void 0 : _b.includes(selectedChatRef.value.id)) &&
-                    renderTypingIndicator()));
+            var _a;
+            return (h(UChatMessages, { messages: messagesRef.value, loading: messagesLoadingRef.value, loadingCount: messagesLoadingCountRef.value, typingChatIds: typingChatIdsRef.value, selectedChatId: (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.id, typingText: typingTextRef.value, retryText: retryTextRef.value, uploadProps: messageUploadPropsRef.value, showUnreadNotification: showUnreadNotification.value, unreadNotificationText: unreadNotificationTextRef.value, unreadNotificationCount: unreadCountOnOpen.value, onMessageRetry: handleMessageRetry }, {
+                messageAttachment: slots.messageAttachment,
+                messageAttachmentTitle: slots.messageAttachmentTitle,
+                messageAttachmentSubtitle: slots.messageAttachmentSubtitle,
+                messageStatus: slots.messageStatus
+            }));
         };
         const isSending = ref(false);
         const handleSendMessage = () => __awaiter(this, void 0, void 0, function* () {
@@ -316,12 +194,8 @@ export default defineComponent({
                     inputValue.value = '';
                     attachmentFileList.value = [];
                     chatInputs.value[selectedChatRef.value.id] = '';
-                    const globalState = getChatGlobalState();
-                    if (globalState.hasNotificationShown(selectedChatRef.value.id)) {
-                        globalState.markNotificationShown(selectedChatRef.value.id);
-                        showNotificationManually.value = false;
-                        hasUnreadMessages.value = false;
-                    }
+                    hasUnreadMessages.value = false;
+                    showNotificationManually.value = false;
                     void nextTick(() => {
                         scrollToBottom();
                     });
@@ -379,32 +253,35 @@ export default defineComponent({
         };
         const renderFooter = () => {
             return (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__footer` },
-                h(UUpload, Object.assign({ abstract: true, multiple: true, defaultUpload: false, fileList: attachmentFileList.value, onUpdateFileList: handleFileListUpdate }, footerUploadPropsRef.value),
-                    h(UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__input-container` },
-                        h(UUploadTrigger, { abstract: true }, {
-                            default: ({ handleClick }) => (h(UButton, Object.assign({ secondary: true, size: "large", class: `${mergedClsPrefixRef.value}-chat-main__attach-btn` }, footerButtonPropsRef.value, { onClick: handleClick }),
-                                h(UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value),
-                                    h(AttachIcon, null))))
-                        }),
-                        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;
-                                }
-                            }, onKeydown: (e) => {
-                                if (e.key === 'Enter' && !e.shiftKey) {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    void handleSendMessage();
-                                }
-                            } }))))));
+                h(UUpload, Object.assign({ abstract: true, multiple: true, defaultUpload: false, fileList: attachmentFileList.value, onUpdateFileList: handleFileListUpdate }, footerUploadPropsRef.value), {
+                    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, { onClick: handleClick }), {
+                                    default: () => (h(UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value), {
+                                        default: () => h(AttachIcon, null)
+                                    }))
+                                }))
+                            }),
+                            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;
+                                    }
+                                }, onKeydown: (e) => {
+                                    if (e.key === 'Enter' && !e.shiftKey) {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        void handleSendMessage();
+                                    }
+                                } }))))
+                    }))
+                })));
         };
         return {
             renderHeader,
             renderMessages,
             renderFooter,
-            renderUnreadNotification,
-            showUnreadNotification,
             messagesBodyRef,
             inputRef,
             inputValue,
@@ -417,7 +294,9 @@ 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` }, this.renderMessages()),
+            h(UScrollbar, { ref: "messagesBodyRef", class: `${mergedClsPrefixRef.value}-chat-main__body` }, {
+                default: () => this.renderMessages()
+            }),
             this.renderFooter()));
     }
 });

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

@@ -1,98 +1,34 @@
-import { h, defineComponent, inject } from 'vue';
-import { chatInjectionKey, MessageStatus } from '../interface';
-import { ChatGlobalState } from '../ChatGlobalState';
+import { h, defineComponent, inject, Fragment } from 'vue';
+import { chatInjectionKey } from '../interface';
 import { UFlex } from '../../../flex';
-import { UEmpty } from '../../../empty';
-import { UAvatar } from '../../../avatar';
 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,
-    [MessageStatus.RETRY]: Refresh,
-    [MessageStatus.UNREAD]: CheckmarkDoneSharp
-};
+import UChatListItems from '../ChatListItems';
 export default defineComponent({
     name: 'ChatSidebar',
     setup(props, { slots }) {
         return { slots };
     },
     render() {
-        var _a, _b;
         const { slots } = this;
-        const { mergedClsPrefixRef, chatItemsRef, chatItemsLoadingRef, chatItemsLoadingCountRef, listEmptyPropsRef, selectedChatIdRef, typingChatIdsRef, typingTextRef, listItemAvatarPropsRef, listItemBadgePropsRef, handleChatSelect
+        const { mergedClsPrefixRef, chatItemsRef, chatItemsLoadingRef, chatItemsLoadingCountRef, listEmptyPropsRef, selectedChatIdRef, typingChatIdsRef, typingTextRef, listItemAvatarPropsRef, listItemBadgePropsRef, notificationsShownSetRef, handleChatSelect
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(chatInjectionKey);
         const renderListHeader = () => {
-            var _a, _b;
             return (h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header` },
-                h(UFlex, { align: "center", justify: "space-between", style: { width: '100%' } },
-                    h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-main` }, ((_a = slots.sidebarHeaderMain) === null || _a === void 0 ? void 0 : _a.call(slots)) || h(USelect, { round: true })),
-                    h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-actions` }, (_b = slots.sidebarHeaderActions) === null || _b === void 0 ? void 0 : _b.call(slots)))));
-        };
-        const renderChatItem = (item) => {
-            var _a, _b;
-            const isSelected = selectedChatIdRef.value === item.id;
-            const isTyping = (_b = (_a = typingChatIdsRef.value) === 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: () => {
-                    handleChatSelect(item.id);
-                }, class: [
-                    `${mergedClsPrefixRef.value}-chat-sidebar__item`,
-                    isSelected &&
-                        `${mergedClsPrefixRef.value}-chat-sidebar__item--selected`,
-                    isTyping && `${mergedClsPrefixRef.value}-chat-sidebar__item--typing`
-                ] }, {
-                prefix: () => {
-                    var _a;
-                    return (h(UAvatar, Object.assign({ size: "medium", src: typeof item.avatar === 'string' ? item.avatar : undefined }, listItemAvatarPropsRef.value), typeof item.avatar === 'function'
-                        ? item.avatar()
-                        : typeof item.title === 'string'
-                            ? (_a = item.title.charAt(0)) === null || _a === void 0 ? void 0 : _a.toUpperCase()
-                            : '?'));
-                },
-                header: () => (h("span", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-title` }, typeof item.title === 'function' ? item.title() : item.title)),
-                description: () => (h("span", { class: [
-                        `${mergedClsPrefixRef.value}-chat-sidebar__item-subtitle`,
-                        isTyping && 'typing'
-                    ], style: {
-                        display: 'block',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        minWidth: 0,
-                        maxWidth: '100%'
-                    } }, isTyping
-                    ? typingTextRef.value
-                    : typeof item.subtitle === 'string'
-                        ? item.subtitle
-                        : typeof item.subtitle === 'function'
-                            ? item.subtitle()
-                            : item.subtitle)),
-                suffix: () => {
-                    const getChatGlobalState = () => ChatGlobalState.getInstance();
-                    const globalState = getChatGlobalState();
-                    const wasOpened = globalState.isChatOpened(item.id);
-                    const displayUnreadCount = wasOpened ? 0 : item.unreadCount || 0;
-                    const hasUnreadIncoming = displayUnreadCount > 0;
-                    const lastMessageIsOwn = item.lastMessageIsOwn;
-                    return (h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-indicators` },
-                        h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-time` }, item.datetime),
-                        h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-status` },
-                            lastMessageIsOwn &&
-                                (slots.chatItemStatus ? (slots.chatItemStatus(item)) : item.messageStatus &&
-                                    statusIconMapper[item.messageStatus] ? (h(UIcon, { size: 16, component: statusIconMapper[item.messageStatus], class: [
-                                        `${mergedClsPrefixRef.value}-chat-sidebar__item-status-icon`,
-                                        `${mergedClsPrefixRef.value}-chat-sidebar__item-status-icon--${item.messageStatus}`
-                                    ] })) : null),
-                            !lastMessageIsOwn && hasUnreadIncoming && (h(UBadge, Object.assign({ value: displayUnreadCount }, listItemBadgePropsRef.value))))));
-                }
-            }));
+                h(UFlex, { align: "center", justify: "space-between", class: `${mergedClsPrefixRef.value}-chat-sidebar__header-container`, style: { width: '100%' } }, {
+                    default: () => {
+                        var _a, _b;
+                        return (h(Fragment, null,
+                            h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-main` }, ((_a = slots.sidebarHeaderMain) === null || _a === void 0 ? void 0 : _a.call(slots)) || (h(USelect, { round: true, size: "small" }))),
+                            h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-actions` }, (_b = slots.sidebarHeaderActions) === null || _b === void 0 ? void 0 : _b.call(slots))));
+                    }
+                })));
         };
         return (h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar` },
             renderListHeader(),
-            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))))));
+            h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__content` },
+                h(UChatListItems, { chatItems: chatItemsRef.value, selectedChatId: selectedChatIdRef.value, typingChatIds: typingChatIdsRef.value, typingText: typingTextRef.value, loading: chatItemsLoadingRef.value, loadingCount: chatItemsLoadingCountRef.value, emptyProps: listEmptyPropsRef.value, avatarProps: listItemAvatarPropsRef.value, badgeProps: listItemBadgePropsRef.value, notificationsShown: notificationsShownSetRef.value, onChatSelect: handleChatSelect }, {
+                    chatItemStatus: slots.chatItemStatus
+                }))));
     }
 });

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

@@ -109,7 +109,7 @@ export interface ChatAttachment {
     type: ChatMessageType.FILE;
     name: string;
     url: string;
-    size?: number;
+    size?: number | string;
     thumbnail?: string | (() => VNodeChild);
     preview?: string | (() => VNodeChild);
     status?: 'pending' | 'uploading' | 'finished' | 'error';
@@ -146,6 +146,7 @@ export interface ChatProps {
     retryText?: string;
     typingText?: string;
     closeButtonText?: string;
+    unreadNotificationText?: string;
     chatItemsLoading?: boolean;
     chatItemsLoadingCount?: number;
     messagesLoading?: boolean;
@@ -269,6 +270,10 @@ export declare const chatInjectionKey: InjectionKey<{
     retryTextRef: Ref<string>;
     typingTextRef: Ref<string>;
     closeButtonTextRef: Ref<string>;
+    unreadNotificationTextRef: Ref<string>;
+    notificationsShownSetRef: Ref<Set<ChatId>>;
+    unreadCountsBeforeReadRef: Ref<Record<ChatId, number>>;
+    markNotificationShown: (chatId: ChatId) => void;
     handleChatSelect: (chatId: ChatId) => void;
     handleMessageSend: (content: string, attachments?: ChatAttachment[]) => void;
     handleMessageRetry: (message: ChatMessageData) => void;

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

@@ -26,8 +26,9 @@ export default cB('chat', `
  border-radius: 20px;
  overflow: hidden;
  `, [cE('header', `
- padding: 16px 16px 0 16px;
  flex-shrink: 0;
+ `), cE('header-container', `
+ padding: 16px 16px 4px 16px;
  `), cE('header-main', `
  flex: 0 0 48%;
  min-width: 0;
@@ -43,7 +44,7 @@ export default cB('chat', `
  overflow-y: auto;
  min-height: 0;
  padding: 16px;
- padding-top: 12px;
+ padding-top: 8px;
  `), cE('item', `
  padding: 12px 16px;
  width: 100%;

package/es/locales/common/arDZ.js

@@ -128,7 +128,8 @@ const arDZ = {
         inputPlaceholder: 'Type a message...',
         typingText: 'Typing...',
         retryText: 'Resend',
-        closeButtonText: 'Close chat'
+        closeButtonText: 'Close chat',
+        unreadNotificationText: 'new messages'
     }
 };
 export default arDZ;

package/es/locales/common/deDE.js

@@ -128,7 +128,8 @@ const deDE = {
         inputPlaceholder: 'Type a message...',
         typingText: 'Typing...',
         retryText: 'Resend',
-        closeButtonText: 'Close chat'
+        closeButtonText: 'Close chat',
+        unreadNotificationText: 'new messages'
     }
 };
 export default deDE;

package/es/locales/common/enGB.js

@@ -129,7 +129,8 @@ const enGB = {
         inputPlaceholder: 'Type a message...',
         typingText: 'Typing...',
         retryText: 'Resend',
-        closeButtonText: 'Close chat'
+        closeButtonText: 'Close chat',
+        unreadNotificationText: 'new messages'
     }
 };
 export default enGB;