@uzum-tech/ui 1.9.0 → 1.9.1

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

@@ -7,30 +7,33 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { h, defineComponent, inject, computed, ref, watch, nextTick, onMounted, Fragment } from 'vue';
+import { h, defineComponent, inject, computed, ref, watch, nextTick, Fragment } from 'vue';
 import { MessageStatus, ChatMessageType, chatInjectionKey } from '../interface';
 import { UInput } from '../../../input';
 import { UButton } from '../../../button';
 import { UIcon } from '../../../icon';
 import { UScrollbar } from '../../../scrollbar';
+import { UTooltip } from '../../../tooltip';
 import { UUpload, UUploadTrigger } from '../../../upload';
 import { UFlex } from '../../../flex';
 import { resolveSlot } from '../../../_utils';
 import { UText } from '../../../typography';
 import UChatMessages from '../ChatMessages';
 import { ArrowHookUpRight, PersonNote, AttachIcon } from '../../../_internal/icons';
-const SCROLL_DELAY = 50;
 const SENDING_DELAY = 100;
 export default defineComponent({
     name: 'ChatMainArea',
     setup(_, { slots }) {
-        const { mergedClsPrefixRef, mergedThemeRef, 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
+        const { mergedClsPrefixRef, mergedThemeRef, selectedChatRef, messagesRef, typingChatIdsRef, messagesLoadingRef, messagesLoadingCountRef, headerButtonPropsRef, headerIconPropsRef, headerShareButtonPropsRef, headerProfileButtonPropsRef, headerCloseButtonPropsRef, headerShareIconPropsRef, headerProfileIconPropsRef, messageUploadPropsRef, footerInputPropsRef, footerButtonPropsRef, footerUploadPropsRef, footerIconPropsRef, inputPlaceholderRef, retryTextRef, typingTextRef, closeButtonTextRef, shareButtonTooltipRef, profileButtonTooltipRef, unreadNotificationTextRef, notificationsShownSetRef, unreadCountsBeforeReadRef, markNotificationShown, handleMessageSend, handleMessageRetry, handleFooterInputChange, onChatClose, onChatShare, onUserProfile, onMessagesScrollToTop, onMessagesScrollToBottom
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(chatInjectionKey);
         const messagesBodyRef = ref();
         const inputRef = ref();
         const inputValue = ref('');
         const attachmentFileList = ref([]);
+        const lastScrollTop = ref(0);
+        const scrollTopFired = ref(false);
+        const scrollBottomFired = ref(false);
         const unreadMessagesCount = computed(() => {
             if (!messagesRef.value)
                 return 0;
@@ -41,12 +44,17 @@ export default defineComponent({
         const unreadCountOnOpen = ref(0);
         const chatInputs = ref({});
         const lastMessageId = ref(null);
+        const shouldScrollOnLoad = ref(false);
         watch(selectedChatRef, (newChat, oldChat) => {
             if (newChat && newChat.id !== (oldChat === null || oldChat === void 0 ? void 0 : oldChat.id)) {
                 inputValue.value = chatInputs.value[newChat.id] || '';
                 const unreadBeforeRead = unreadCountsBeforeReadRef.value[newChat.id] || 0;
                 unreadCountOnOpen.value = unreadBeforeRead;
                 lastMessageId.value = null;
+                lastScrollTop.value = 0;
+                scrollTopFired.value = false;
+                scrollBottomFired.value = false;
+                shouldScrollOnLoad.value = true;
                 if (unreadBeforeRead > 0 &&
                     !notificationsShownSetRef.value.has(newChat.id)) {
                     hasUnreadMessages.value = true;
@@ -57,12 +65,6 @@ export default defineComponent({
                     hasUnreadMessages.value = false;
                     showNotificationManually.value = false;
                 }
-                void nextTick(() => {
-                    scrollToBottom();
-                });
-                setTimeout(() => {
-                    scrollToBottom();
-                }, SCROLL_DELAY);
             }
         }, { immediate: true });
         watch(messagesRef, (newMessages) => {
@@ -72,19 +74,18 @@ export default defineComponent({
             }
             const currentLastMessage = newMessages[newMessages.length - 1];
             const currentLastId = currentLastMessage === null || currentLastMessage === void 0 ? void 0 : currentLastMessage.id;
-            if (currentLastId !== lastMessageId.value &&
-                lastMessageId.value !== null) {
+            const hasLastMessageChanged = currentLastId !== lastMessageId.value;
+            if (hasLastMessageChanged &&
+                currentLastMessage &&
+                !currentLastMessage.isOwn &&
+                currentLastMessage.status === MessageStatus.UNREAD) {
+                unreadCountOnOpen.value = unreadMessagesCount.value;
+            }
+            if (shouldScrollOnLoad.value && newMessages.length > 0) {
+                shouldScrollOnLoad.value = false;
                 void nextTick(() => {
                     scrollToBottom();
                 });
-                setTimeout(() => {
-                    scrollToBottom();
-                }, SCROLL_DELAY);
-                if (currentLastMessage &&
-                    !currentLastMessage.isOwn &&
-                    currentLastMessage.status === MessageStatus.UNREAD) {
-                    unreadCountOnOpen.value = unreadMessagesCount.value;
-                }
             }
             lastMessageId.value = currentLastId !== null && currentLastId !== void 0 ? currentLastId : null;
         }, { deep: true, flush: 'post' });
@@ -97,17 +98,42 @@ export default defineComponent({
                 notificationsShownSetRef.value = newSet;
             }
         });
+        watch(inputValue, (newValue) => {
+            if (selectedChatRef.value) {
+                handleFooterInputChange(newValue, selectedChatRef.value.id);
+            }
+        });
         const showUnreadNotification = computed(() => {
             return hasUnreadMessages.value && showNotificationManually.value;
         });
-        onMounted(() => {
-            void nextTick(() => {
-                scrollToBottom();
-            });
-            setTimeout(() => {
-                scrollToBottom();
-            }, SCROLL_DELAY);
-        });
+        const handleMessagesScroll = (e) => {
+            var _a, _b;
+            const target = e.target;
+            if (!target)
+                return;
+            const { scrollTop, scrollHeight, clientHeight } = target;
+            const threshold = 5;
+            const scrollDirection = scrollTop > lastScrollTop.value ? 'down' : 'up';
+            const nearTop = scrollTop <= threshold;
+            const nearBottom = scrollHeight - (scrollTop + clientHeight) <= threshold;
+            if (scrollTop > threshold) {
+                scrollTopFired.value = false;
+            }
+            if (scrollHeight - (scrollTop + clientHeight) > threshold) {
+                scrollBottomFired.value = false;
+            }
+            if (nearTop && scrollDirection === 'up' && !scrollTopFired.value) {
+                scrollTopFired.value = true;
+                (_a = onMessagesScrollToTop === null || onMessagesScrollToTop === void 0 ? void 0 : onMessagesScrollToTop.value) === null || _a === void 0 ? void 0 : _a.call(onMessagesScrollToTop);
+            }
+            if (nearBottom &&
+                scrollDirection === 'down' &&
+                !scrollBottomFired.value) {
+                scrollBottomFired.value = true;
+                (_b = onMessagesScrollToBottom === null || onMessagesScrollToBottom === void 0 ? void 0 : onMessagesScrollToBottom.value) === null || _b === void 0 ? void 0 : _b.call(onMessagesScrollToBottom);
+            }
+            lastScrollTop.value = scrollTop;
+        };
         const scrollToBottom = () => {
             const el = messagesBodyRef.value;
             if (!el)
@@ -129,27 +155,50 @@ export default defineComponent({
         };
         const renderHeader = () => {
             return (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` },
-                h(UFlex, { justify: "space-between", align: "flex-start" }, {
+                h(UFlex, { justify: "space-between", align: "flex-start", wrap: false }, {
                     default: () => (h(Fragment, null,
                         h(UText, { variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title`, theme: mergedThemeRef.value.peers.Typography, themeOverrides: mergedThemeRef.value.peerOverrides.Typography }, {
-                            default: () => { var _a; return ((_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) || 'Select a chat'; }
+                            default: () => { var _a, _b; return (_b = (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ''; }
                         }),
                         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, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, 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, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
-                                        default: () => h(ArrowHookUpRight, null)
-                                    }))
-                                }),
-                                h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, headerButtonPropsRef.value, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, 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, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
-                                        default: () => h(PersonNote, null)
-                                    }))
-                                }),
-                                h(UButton, Object.assign({ type: "primary", size: "large", round: true }, headerButtonPropsRef.value, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, 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
-                                })
-                            ])
+                            default: () => resolveSlot(slots.headerActions, () => {
+                                const shareButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerShareButtonPropsRef.value);
+                                const profileButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerProfileButtonPropsRef.value);
+                                const closeButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerCloseButtonPropsRef.value);
+                                const shareIconProps = Object.assign(Object.assign({}, headerIconPropsRef.value), headerShareIconPropsRef.value);
+                                const profileIconProps = Object.assign(Object.assign({}, headerIconPropsRef.value), headerProfileIconPropsRef.value);
+                                const buttons = [];
+                                if (shareButtonProps.disabled !== true) {
+                                    buttons.push(h(UTooltip, null, {
+                                        trigger: () => (h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, shareButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides
+                                                .Button, 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 }, shareIconProps, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides
+                                                    .Icon }), {
+                                                default: () => (h(ArrowHookUpRight, null))
+                                            }))
+                                        })),
+                                        default: () => shareButtonTooltipRef.value
+                                    }));
+                                }
+                                if (profileButtonProps.disabled !== true) {
+                                    buttons.push(h(UTooltip, null, {
+                                        trigger: () => (h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, profileButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides
+                                                .Button, 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 }, profileIconProps, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides
+                                                    .Icon }), {
+                                                default: () => h(PersonNote, null)
+                                            }))
+                                        })),
+                                        default: () => profileButtonTooltipRef.value
+                                    }));
+                                }
+                                if (closeButtonProps.disabled !== true) {
+                                    buttons.push(h(UButton, Object.assign({ type: "primary", size: "large", round: true }, closeButtonProps, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, 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
+                                    }));
+                                }
+                                return buttons;
+                            })
                         })))
                 })));
         };
@@ -196,12 +245,6 @@ export default defineComponent({
                     chatInputs.value[selectedChatRef.value.id] = '';
                     hasUnreadMessages.value = false;
                     showNotificationManually.value = false;
-                    void nextTick(() => {
-                        scrollToBottom();
-                    });
-                    setTimeout(() => {
-                        scrollToBottom();
-                    }, SCROLL_DELAY);
                 }
                 finally {
                     setTimeout(() => {
@@ -241,12 +284,6 @@ export default defineComponent({
                         handleMessageSend('', attachments);
                         pendingFiles.value = [];
                         attachmentFileList.value = [];
-                        void nextTick(() => {
-                            scrollToBottom();
-                        });
-                        setTimeout(() => {
-                            scrollToBottom();
-                        }, SCROLL_DELAY);
                     }
                 }, SENDING_DELAY);
             }
@@ -286,6 +323,7 @@ export default defineComponent({
             inputRef,
             inputValue,
             handleSendMessage,
+            handleMessagesScroll,
             scrollToBottom
         };
     },
@@ -294,7 +332,7 @@ 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` }, {
+            h(UScrollbar, { ref: "messagesBodyRef", class: `${mergedClsPrefixRef.value}-chat-main__body`, onScroll: this.handleMessagesScroll }, {
                 default: () => this.renderMessages()
             }),
             this.renderFooter()));