@uzum-tech/ui 1.7.2 → 1.8.0

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

@@ -14,8 +14,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const interface_1 = require("../interface");
-const ChatGlobalState_1 = require("../ChatGlobalState");
-const ChatAttachment_1 = __importDefault(require("./ChatAttachment"));
 const input_1 = require("../../../input");
 const button_1 = require("../../../button");
 const icon_1 = require("../../../icon");
@@ -24,21 +22,14 @@ const upload_1 = require("../../../upload");
 const flex_1 = require("../../../flex");
 const _utils_1 = require("../../../_utils");
 const typography_1 = require("../../../typography");
-const skeleton_1 = require("../../../skeleton");
+const ChatMessages_1 = __importDefault(require("../ChatMessages"));
 const icons_1 = require("../../../_internal/icons");
 const SCROLL_DELAY = 50;
 const SENDING_DELAY = 100;
-const getChatGlobalState = () => ChatGlobalState_1.ChatGlobalState.getInstance();
-const statusIconMapper = {
-    [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, 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
          } = (0, vue_1.inject)(interface_1.chatInjectionKey);
         const messagesBodyRef = (0, vue_1.ref)();
@@ -54,17 +45,18 @@ exports.default = (0, vue_1.defineComponent)({
         const hasUnreadMessages = (0, vue_1.ref)(false);
         const unreadCountOnOpen = (0, vue_1.ref)(0);
         const chatInputs = (0, vue_1.ref)({});
+        const lastMessageId = (0, vue_1.ref)(null);
         (0, vue_1.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;
@@ -73,29 +65,41 @@ exports.default = (0, vue_1.defineComponent)({
                 void (0, vue_1.nextTick)(() => {
                     scrollToBottom();
                 });
+                setTimeout(() => {
+                    scrollToBottom();
+                }, SCROLL_DELAY);
             }
         }, { immediate: true });
-        (0, vue_1.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;
-                    }
-                }
+        (0, vue_1.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 (0, vue_1.nextTick)(() => {
                     scrollToBottom();
                 });
+                setTimeout(() => {
+                    scrollToBottom();
+                }, SCROLL_DELAY);
+                if (currentLastMessage &&
+                    !currentLastMessage.isOwn &&
+                    currentLastMessage.status === interface_1.MessageStatus.UNREAD) {
+                    unreadCountOnOpen.value = unreadMessagesCount.value;
+                }
             }
-        }, { deep: true });
+            lastMessageId.value = currentLastId !== null && currentLastId !== void 0 ? currentLastId : null;
+        }, { deep: true, flush: 'post' });
         (0, vue_1.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 = (0, vue_1.computed)(() => {
@@ -105,189 +109,63 @@ exports.default = (0, vue_1.defineComponent)({
             void (0, vue_1.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 ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__unread-notification` },
-                (0, vue_1.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 ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` },
-                (0, vue_1.h)(flex_1.UFlex, { justify: "space-between", align: "flex-start" },
-                    (0, vue_1.h)(typography_1.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'),
-                    (0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, (0, _utils_1.resolveSlot)(slots.headerActions, () => [
-                        (0, vue_1.h)(button_1.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); } }),
-                            (0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value),
-                                (0, vue_1.h)(icons_1.ArrowHookUpRight, null))),
-                        (0, vue_1.h)(button_1.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); } }),
-                            (0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value),
-                                (0, vue_1.h)(icons_1.PersonNote, null))),
-                        (0, vue_1.h)(button_1.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 ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__date-separator` },
-                (0, vue_1.h)("span", null, date)));
-        };
-        const renderMessage = (message) => {
-            const isOwn = message.isOwn;
-            const attachments = message.attachment
-                ? Array.isArray(message.attachment)
-                    ? message.attachment
-                    : [message.attachment]
-                : [];
-            return ((0, vue_1.h)("div", { key: message.id, 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` },
-                    message.content || attachments.length > 1 ? ((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`
-                        ] },
-                        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
-                        })),
-                        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
-                                ? `${mergedClsPrefixRef.value}-chat-main__message-meta--own`
-                                : `${mergedClsPrefixRef.value}-chat-main__message-meta--other`,
-                            message.status === interface_1.MessageStatus.RETRY &&
-                                `${mergedClsPrefixRef.value}-chat-main__message-meta--retry`
-                        ] }, message.status === interface_1.MessageStatus.RETRY ? ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry`, onClick: () => {
-                            handleMessageRetry(message);
-                        }, style: { cursor: 'pointer' } },
-                        (0, vue_1.h)(icon_1.UIcon, { size: 16, component: statusIconMapper[interface_1.MessageStatus.RETRY], class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon` }),
-                        (0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry-text` }, retryTextRef.value))) : ((0, vue_1.h)(vue_1.Fragment, null,
-                        (0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, message.timestamp),
-                        isOwn && message.status && ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-status` }, slots.messageStatus
-                            ? slots.messageStatus(message)
-                            : statusIconMapper[message.status] && ((0, vue_1.h)(icon_1.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 ((0, vue_1.h)("div", { class: [
-                    `${mergedClsPrefixRef.value}-chat-main__message`,
-                    `${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`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble--typing`
-                        ] }),
-                    (0, vue_1.h)("div", { class: [
-                            `${mergedClsPrefixRef.value}-chat-main__message-meta`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-meta--other`
-                        ] },
-                        (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' } })))));
+                (0, vue_1.h)(flex_1.UFlex, { justify: "space-between", align: "flex-start" }, {
+                    default: () => ((0, vue_1.h)(vue_1.Fragment, null,
+                        (0, vue_1.h)(typography_1.UText, { variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title` }, {
+                            default: () => { var _a; return ((_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) || 'Select a chat'; }
+                        }),
+                        (0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, {
+                            default: () => (0, _utils_1.resolveSlot)(slots.headerActions, () => [
+                                (0, vue_1.h)(button_1.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: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value), {
+                                        default: () => (0, vue_1.h)(icons_1.ArrowHookUpRight, null)
+                                    }))
+                                }),
+                                (0, vue_1.h)(button_1.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: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value), {
+                                        default: () => (0, vue_1.h)(icons_1.PersonNote, null)
+                                    }))
+                                }),
+                                (0, vue_1.h)(button_1.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 ((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 || '';
-                if (messageDate !== currentDate) {
-                    messagesWithDates.push({
-                        type: 'date-separator',
-                        date: messageDate,
-                        id: `date-${String(index)}`
-                    });
-                    currentDate = messageDate;
-                }
-                if (!unreadNotificationInserted &&
-                    !message.isOwn &&
-                    message.status === interface_1.MessageStatus.UNREAD &&
-                    showUnreadNotification.value) {
-                    messagesWithDates.push({
-                        type: 'unread-notification',
-                        id: 'unread-notification'
-                    });
-                    unreadNotificationInserted = true;
-                }
-                messagesWithDates.push(Object.assign({ type: 'message' }, message));
-            });
-            return ((0, vue_1.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 ((0, vue_1.h)(ChatMessages_1.default, { 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 = (0, vue_1.ref)(false);
         const handleSendMessage = () => __awaiter(this, void 0, void 0, function* () {
@@ -321,12 +199,8 @@ exports.default = (0, vue_1.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 (0, vue_1.nextTick)(() => {
                         scrollToBottom();
                     });
@@ -384,32 +258,35 @@ exports.default = (0, vue_1.defineComponent)({
         };
         const renderFooter = () => {
             return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__footer` },
-                (0, vue_1.h)(upload_1.UUpload, Object.assign({ abstract: true, multiple: true, defaultUpload: false, fileList: attachmentFileList.value, onUpdateFileList: handleFileListUpdate }, footerUploadPropsRef.value),
-                    (0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__input-container` },
-                        (0, vue_1.h)(upload_1.UUploadTrigger, { abstract: true }, {
-                            default: ({ handleClick }) => ((0, vue_1.h)(button_1.UButton, Object.assign({ secondary: true, size: "large", class: `${mergedClsPrefixRef.value}-chat-main__attach-btn` }, footerButtonPropsRef.value, { onClick: handleClick }),
-                                (0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value),
-                                    (0, vue_1.h)(icons_1.AttachIcon, null))))
-                        }),
-                        (0, vue_1.h)(input_1.UInput, Object.assign({ ref: "inputRef", value: inputValue.value, placeholder: inputPlaceholderRef.value, class: `${mergedClsPrefixRef.value}-chat-main__input` }, footerInputPropsRef.value, { 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();
-                                }
-                            } }))))));
+                (0, vue_1.h)(upload_1.UUpload, Object.assign({ abstract: true, multiple: true, defaultUpload: false, fileList: attachmentFileList.value, onUpdateFileList: handleFileListUpdate }, footerUploadPropsRef.value), {
+                    default: () => ((0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__input-container` }, {
+                        default: () => ((0, vue_1.h)(vue_1.Fragment, null,
+                            (0, vue_1.h)(upload_1.UUploadTrigger, { abstract: true }, {
+                                default: ({ handleClick }) => ((0, vue_1.h)(button_1.UButton, Object.assign({ secondary: true, size: "large", class: `${mergedClsPrefixRef.value}-chat-main__attach-btn` }, footerButtonPropsRef.value, { onClick: handleClick }), {
+                                    default: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value), {
+                                        default: () => (0, vue_1.h)(icons_1.AttachIcon, null)
+                                    }))
+                                }))
+                            }),
+                            (0, vue_1.h)(input_1.UInput, Object.assign({ ref: "inputRef", value: inputValue.value, placeholder: inputPlaceholderRef.value, class: `${mergedClsPrefixRef.value}-chat-main__input` }, footerInputPropsRef.value, { 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,
@@ -422,7 +299,9 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedClsPrefixRef } = (0, vue_1.inject)(interface_1.chatInjectionKey);
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main` },
             this.renderHeader(),
-            (0, vue_1.h)(scrollbar_1.UScrollbar, { ref: "messagesBodyRef", class: `${mergedClsPrefixRef.value}-chat-main__body` }, this.renderMessages()),
+            (0, vue_1.h)(scrollbar_1.UScrollbar, { ref: "messagesBodyRef", class: `${mergedClsPrefixRef.value}-chat-main__body` }, {
+                default: () => this.renderMessages()
+            }),
             this.renderFooter()));
     }
 });

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

@@ -1,100 +1,39 @@
 "use strict";
+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 interface_1 = require("../interface");
-const ChatGlobalState_1 = require("../ChatGlobalState");
 const flex_1 = require("../../../flex");
-const empty_1 = require("../../../empty");
-const avatar_1 = require("../../../avatar");
 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]: icons_1.CheckmarkDoneSharp,
-    [interface_1.MessageStatus.PENDING]: icons_1.MdTime,
-    [interface_1.MessageStatus.RETRY]: icons_1.Refresh,
-    [interface_1.MessageStatus.UNREAD]: icons_1.CheckmarkDoneSharp
-};
+const ChatListItems_1 = __importDefault(require("../ChatListItems"));
 exports.default = (0, vue_1.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
          } = (0, vue_1.inject)(interface_1.chatInjectionKey);
         const renderListHeader = () => {
-            var _a, _b;
             return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header` },
-                (0, vue_1.h)(flex_1.UFlex, { align: "center", justify: "space-between", style: { width: '100%' } },
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-main` }, ((_a = slots.sidebarHeaderMain) === null || _a === void 0 ? void 0 : _a.call(slots)) || (0, vue_1.h)(select_1.USelect, { round: true })),
-                    (0, vue_1.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 ((0, vue_1.h)(list_1.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 ((0, vue_1.h)(avatar_1.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: () => ((0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-title` }, typeof item.title === 'function' ? item.title() : item.title)),
-                description: () => ((0, vue_1.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_1.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 ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-indicators` },
-                        (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-time` }, item.datetime),
-                        (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-status` },
-                            lastMessageIsOwn &&
-                                (slots.chatItemStatus ? (slots.chatItemStatus(item)) : item.messageStatus &&
-                                    statusIconMapper[item.messageStatus] ? ((0, vue_1.h)(icon_1.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 && ((0, vue_1.h)(badge_1.UBadge, Object.assign({ value: displayUnreadCount }, listItemBadgePropsRef.value))))));
-                }
-            }));
+                (0, vue_1.h)(flex_1.UFlex, { align: "center", justify: "space-between", class: `${mergedClsPrefixRef.value}-chat-sidebar__header-container`, style: { width: '100%' } }, {
+                    default: () => {
+                        var _a, _b;
+                        return ((0, vue_1.h)(vue_1.Fragment, null,
+                            (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-main` }, ((_a = slots.sidebarHeaderMain) === null || _a === void 0 ? void 0 : _a.call(slots)) || ((0, vue_1.h)(select_1.USelect, { round: true, size: "small" }))),
+                            (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-actions` }, (_b = slots.sidebarHeaderActions) === null || _b === void 0 ? void 0 : _b.call(slots))));
+                    }
+                })));
         };
         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)(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))))));
+            (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__content` },
+                (0, vue_1.h)(ChatListItems_1.default, { 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/lib/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/lib/chat/src/styles/index.cssr.js

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

package/lib/locales/common/arDZ.js

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

package/lib/locales/common/deDE.js

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