@uzum-tech/ui 1.7.2 → 1.8.0

package/es/chat/index.d.ts

@@ -1,2 +1,6 @@
 export { default as UChat } from './src/Chat';
+export { default as UChatListItems } from './src/ChatListItems';
+export { default as UChatMessages } from './src/ChatMessages';
 export type { ChatId, MessageStatus, ChatMessageType, ChatMarkType, ChatProps, ChatListItemProps, ChatMessageProps, ChatMarkProps, ChatHeaderProps, ChatFooterProps, ChatListHeaderProps, ChatSlots, ChatListItemSlots, ChatMessageSlots, ChatMarkSlots, ChatHeaderSlots, ChatFooterSlots, ChatListItemData, ChatMessageData, ChatAttachment, OnChatSelect, OnMessageSend, OnAttachmentUpload, OnFilterChange, OnLoadMoreChats, OnNetworkError, OnUploadError, OnSendError, ChatInst, ChatListInst, chatInjectionKey } from './src/interface';
+export type { ChatListItemsProps } from './src/ChatListItems';
+export type { ChatMessagesProps } from './src/ChatMessages';

package/es/chat/index.js

@@ -1 +1,3 @@
 export { default as UChat } from './src/Chat';
+export { default as UChatListItems } from './src/ChatListItems';
+export { default as UChatMessages } from './src/ChatMessages';

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

@@ -115,6 +115,10 @@ export declare const chatProps: {
         type: PropType<ChatPropsType["closeButtonText"]>;
         default: undefined;
     };
+    unreadNotificationText: {
+        type: PropType<ChatPropsType["unreadNotificationText"]>;
+        default: undefined;
+    };
     chatItemsLoading: {
         type: PropType<ChatPropsType["chatItemsLoading"]>;
         default: boolean;
@@ -2241,6 +2245,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<ChatPropsType["closeButtonText"]>;
         default: undefined;
     };
+    unreadNotificationText: {
+        type: PropType<ChatPropsType["unreadNotificationText"]>;
+        default: undefined;
+    };
     chatItemsLoading: {
         type: PropType<ChatPropsType["chatItemsLoading"]>;
         default: boolean;
@@ -5285,6 +5293,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<ChatPropsType["closeButtonText"]>;
         default: undefined;
     };
+    unreadNotificationText: {
+        type: PropType<ChatPropsType["unreadNotificationText"]>;
+        default: undefined;
+    };
     chatItemsLoading: {
         type: PropType<ChatPropsType["chatItemsLoading"]>;
         default: boolean;
@@ -7312,15 +7324,19 @@ declare const _default: import("vue").DefineComponent<{
     typingText: string | undefined;
     retryText: string | undefined;
     closeButtonText: string | undefined;
+    unreadNotificationText: string | undefined;
     maxHeight: string | number;
     emptyProps: Partial<Partial<import("../..").EmptyProps> | undefined>;
+    chatItems: ChatListItemData[] | undefined;
+    selectedChatId: import("./interface").ChatId | undefined;
+    typingChatIds: (string | number | symbol)[];
+    onChatSelect: import("./interface").OnChatSelect | undefined;
+    messages: ChatMessageData[] | undefined;
+    onMessageRetry: ((message: ChatMessageData) => void) | undefined;
     onChatClose: () => void;
     onChatShare: () => void;
     onUserProfile: () => void;
     headerActions: (() => import("vue").VNodeChild)[] | undefined;
-    chatItems: ChatListItemData[] | undefined;
-    selectedChatId: import("./interface").ChatId | undefined;
-    messages: ChatMessageData[] | undefined;
     listEmptyProps: Partial<Partial<import("../..").EmptyProps> | undefined>;
     listHeaderTitle: string | (() => import("vue").VNodeChild) | undefined;
     listHeaderActions: (() => import("vue").VNodeChild)[] | undefined;
@@ -7343,14 +7359,11 @@ declare const _default: import("vue").DefineComponent<{
     chatItemsLoadingCount: number | undefined;
     messagesLoading: boolean | undefined;
     messagesLoadingCount: number | undefined;
-    onChatSelect: import("./interface").OnChatSelect | undefined;
-    onMessageRetry: ((message: ChatMessageData) => void) | undefined;
     onAttachmentUpload: import("./interface").OnAttachmentUpload | undefined;
     onFilterChange: import("./interface").OnFilterChange | undefined;
     onLoadMoreChats: import("./interface").OnLoadMoreChats | undefined;
     onNetworkError: import("./interface").OnNetworkError | undefined;
     onUploadError: import("./interface").OnUploadError | undefined;
     onSendError: import("./interface").OnSendError | undefined;
-    typingChatIds: (string | number | symbol)[];
 }, {}>;
 export default _default;

package/es/chat/src/Chat.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, computed, provide, ref, toRef } from 'vue';
+import { h, defineComponent, computed, provide, ref, watch, toRef, Fragment } from 'vue';
 import { chatInjectionKey } from './interface';
 import ChatSidebar from './ChatParts/Sidebar';
 import ChatMainArea from './ChatParts/MainArea';
@@ -91,6 +91,9 @@ export const chatProps = Object.assign(Object.assign({}, useTheme.props), { chat
     }, closeButtonText: {
         type: String,
         default: undefined
+    }, unreadNotificationText: {
+        type: String,
+        default: undefined
     }, chatItemsLoading: {
         type: Boolean,
         default: false
@@ -159,6 +162,11 @@ export default defineComponent({
         const { mergedClsPrefixRef } = useConfig(props);
         const themeRef = useTheme('Chat', '-chat', style, chatLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale('Chat');
+        const notificationsShownSet = ref(new Set());
+        const markNotificationShown = (chatId) => {
+            notificationsShownSet.value.add(chatId);
+            notificationsShownSet.value = new Set(notificationsShownSet.value);
+        };
         const cssVarsRef = 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 {
@@ -226,11 +234,35 @@ export default defineComponent({
             }
             return [];
         });
+        const lastUnreadCounts = ref({});
+        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 = 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);
             }
@@ -282,6 +314,7 @@ export default defineComponent({
         const mergedRetryTextRef = computed(() => { var _a; return (_a = props.retryText) !== null && _a !== void 0 ? _a : localeRef.value.retryText; });
         const mergedTypingTextRef = computed(() => { var _a; return (_a = props.typingText) !== null && _a !== void 0 ? _a : localeRef.value.typingText; });
         const mergedCloseButtonTextRef = computed(() => { var _a; return (_a = props.closeButtonText) !== null && _a !== void 0 ? _a : localeRef.value.closeButtonText; });
+        const mergedUnreadNotificationTextRef = computed(() => { var _a; return (_a = props.unreadNotificationText) !== null && _a !== void 0 ? _a : localeRef.value.unreadNotificationText; });
         provide(chatInjectionKey, {
             mergedClsPrefixRef,
             chatItemsRef: toRef(props, 'chatItems'),
@@ -313,6 +346,10 @@ export default defineComponent({
             retryTextRef: mergedRetryTextRef,
             typingTextRef: mergedTypingTextRef,
             closeButtonTextRef: mergedCloseButtonTextRef,
+            unreadNotificationTextRef: mergedUnreadNotificationTextRef,
+            notificationsShownSetRef: notificationsShownSet,
+            unreadCountsBeforeReadRef: unreadCountsBeforeRead,
+            markNotificationShown,
             handleChatSelect,
             handleMessageSend,
             handleMessageRetry,
@@ -346,17 +383,19 @@ export default defineComponent({
             }
             : {};
         return (h("div", { class: [`${this.mergedClsPrefix}-chat`, this.themeClass], style: Object.assign(Object.assign({}, maxHeightStyle), this.cssVars) },
-            h(UFlex, { wrap: false, size: [20, 20], style: { width: '100%' } },
-                resolveSlot($slots.sidebar, () => [
-                    h(ChatSidebar, null, {
-                        sidebarHeaderMain: $slots.sidebarHeaderMain,
-                        sidebarHeaderActions: $slots.sidebarHeaderActions
-                    })
-                ]),
-                resolveSlot($slots.default, () => [
-                    h(ChatMainArea, null, {
-                        headerActions: $slots.headerActions
-                    })
-                ]))));
+            h(UFlex, { wrap: false, size: [20, 20], style: { width: '100%' } }, {
+                default: () => (h(Fragment, null,
+                    resolveSlot($slots.sidebar, () => [
+                        h(ChatSidebar, null, {
+                            sidebarHeaderMain: $slots.sidebarHeaderMain,
+                            sidebarHeaderActions: $slots.sidebarHeaderActions
+                        })
+                    ]),
+                    resolveSlot($slots.default, () => [
+                        h(ChatMainArea, null, {
+                            headerActions: $slots.headerActions
+                        })
+                    ])))
+            })));
     }
 });