@uzum-tech/ui 1.7.2 → 1.8.1

package/lib/chat/src/Chat.js

@@ -97,6 +97,9 @@ exports.chatProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, closeButtonText: {
         type: String,
         default: undefined
+    }, unreadNotificationText: {
+        type: String,
+        default: undefined
     }, chatItemsLoading: {
         type: Boolean,
         default: false
@@ -165,6 +168,11 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Chat', '-chat', index_cssr_1.default, styles_1.chatLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('Chat');
+        const notificationsShownSet = (0, vue_1.ref)(new Set());
+        const markNotificationShown = (chatId) => {
+            notificationsShownSet.value.add(chatId);
+            notificationsShownSet.value = new Set(notificationsShownSet.value);
+        };
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { common: { cubicBezierEaseInOut }, self: { backgroundColor, borderColor, sidebarBackgroundColor, sidebarBorderColor, sidebarItemBackgroundColor, sidebarItemBackgroundColorHover, sidebarItemBackgroundColorSelected, sidebarItemTextColor, sidebarItemTextColorSelected, sidebarItemSubtitleColor, sidebarItemTimeColor, mainBackgroundColor, headerBackgroundColor, headerBorderColor, headerTitleColor, messageBubbleBackgroundColorOwn, messageBubbleBackgroundColorOther, messageBubbleTextColorOwn, messageBubbleTextColorOther, messageTimeColor, messageStatusColor, attachmentBackgroundColorOwn, attachmentBackgroundColorOther, footerBackgroundColor, footerBorderColor, inputBackgroundColor, inputBorderColor, unreadNotificationBackgroundColor, unreadNotificationTextColor, typingIndicatorColor, dateSeparatorColor, dateSeparatorBackgroundColor, borderRadius, errorColor } } = themeRef.value;
             return {
@@ -232,11 +240,35 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return [];
         });
+        const lastUnreadCounts = (0, vue_1.ref)({});
+        (0, vue_1.watch)(() => props.chatItems, (chatItems) => {
+            if (!chatItems)
+                return;
+            chatItems.forEach((chatItem) => {
+                const chatId = chatItem.id;
+                const currentUnreadCount = chatItem.unreadCount || 0;
+                const lastUnreadCount = lastUnreadCounts.value[chatId] || 0;
+                if (currentUnreadCount > lastUnreadCount) {
+                    const newSet = new Set(notificationsShownSet.value);
+                    newSet.delete(chatId);
+                    notificationsShownSet.value = newSet;
+                }
+                lastUnreadCounts.value[chatId] = currentUnreadCount;
+            });
+        }, { deep: true, immediate: true });
+        const unreadCountsBeforeRead = (0, vue_1.ref)({});
         const handleChatSelect = (chatId) => {
             var _a, _b;
+            const previousChatId = uncontrolledSelectedChatIdRef.value;
+            if (previousChatId !== undefined && previousChatId !== chatId) {
+                emit('mark-messages-read', previousChatId);
+            }
+            const selectedItem = (_a = props.chatItems) === null || _a === void 0 ? void 0 : _a.find((item) => item.id === chatId);
+            const unreadCountBeforeRead = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.unreadCount) || 0;
+            unreadCountsBeforeRead.value[chatId] = unreadCountBeforeRead;
             uncontrolledSelectedChatIdRef.value = chatId;
             emit('update:selectedChatId', chatId);
-            const selectedItem = (_a = props.chatItems) === null || _a === void 0 ? void 0 : _a.find((item) => item.id === chatId);
+            emit('mark-messages-read', chatId);
             if (selectedItem) {
                 (_b = props.onChatSelect) === null || _b === void 0 ? void 0 : _b.call(props, chatId, selectedItem);
             }
@@ -288,8 +320,10 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedRetryTextRef = (0, vue_1.computed)(() => { var _a; return (_a = props.retryText) !== null && _a !== void 0 ? _a : localeRef.value.retryText; });
         const mergedTypingTextRef = (0, vue_1.computed)(() => { var _a; return (_a = props.typingText) !== null && _a !== void 0 ? _a : localeRef.value.typingText; });
         const mergedCloseButtonTextRef = (0, vue_1.computed)(() => { var _a; return (_a = props.closeButtonText) !== null && _a !== void 0 ? _a : localeRef.value.closeButtonText; });
+        const mergedUnreadNotificationTextRef = (0, vue_1.computed)(() => { var _a; return (_a = props.unreadNotificationText) !== null && _a !== void 0 ? _a : localeRef.value.unreadNotificationText; });
         (0, vue_1.provide)(interface_1.chatInjectionKey, {
             mergedClsPrefixRef,
+            mergedThemeRef: themeRef,
             chatItemsRef: (0, vue_1.toRef)(props, 'chatItems'),
             selectedChatIdRef: mergedSelectedChatIdRef,
             selectedChatRef,
@@ -319,6 +353,10 @@ exports.default = (0, vue_1.defineComponent)({
             retryTextRef: mergedRetryTextRef,
             typingTextRef: mergedTypingTextRef,
             closeButtonTextRef: mergedCloseButtonTextRef,
+            unreadNotificationTextRef: mergedUnreadNotificationTextRef,
+            notificationsShownSetRef: notificationsShownSet,
+            unreadCountsBeforeReadRef: unreadCountsBeforeRead,
+            markNotificationShown,
             handleChatSelect,
             handleMessageSend,
             handleMessageRetry,
@@ -352,17 +390,19 @@ exports.default = (0, vue_1.defineComponent)({
             }
             : {};
         return ((0, vue_1.h)("div", { class: [`${this.mergedClsPrefix}-chat`, this.themeClass], style: Object.assign(Object.assign({}, maxHeightStyle), this.cssVars) },
-            (0, vue_1.h)(flex_1.UFlex, { wrap: false, size: [20, 20], style: { width: '100%' } },
-                (0, _utils_1.resolveSlot)($slots.sidebar, () => [
-                    (0, vue_1.h)(Sidebar_1.default, null, {
-                        sidebarHeaderMain: $slots.sidebarHeaderMain,
-                        sidebarHeaderActions: $slots.sidebarHeaderActions
-                    })
-                ]),
-                (0, _utils_1.resolveSlot)($slots.default, () => [
-                    (0, vue_1.h)(MainArea_1.default, null, {
-                        headerActions: $slots.headerActions
-                    })
-                ]))));
+            (0, vue_1.h)(flex_1.UFlex, { wrap: false, size: [20, 20], style: { width: '100%' } }, {
+                default: () => ((0, vue_1.h)(vue_1.Fragment, null,
+                    (0, _utils_1.resolveSlot)($slots.sidebar, () => [
+                        (0, vue_1.h)(Sidebar_1.default, null, {
+                            sidebarHeaderMain: $slots.sidebarHeaderMain,
+                            sidebarHeaderActions: $slots.sidebarHeaderActions
+                        })
+                    ]),
+                    (0, _utils_1.resolveSlot)($slots.default, () => [
+                        (0, vue_1.h)(MainArea_1.default, null, {
+                            headerActions: $slots.headerActions
+                        })
+                    ])))
+            })));
     }
 });