@uzum-tech/ui 1.9.0 → 1.10.0

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

@@ -18,24 +18,27 @@ const input_1 = require("../../../input");
 const button_1 = require("../../../button");
 const icon_1 = require("../../../icon");
 const scrollbar_1 = require("../../../scrollbar");
+const tooltip_1 = require("../../../tooltip");
 const upload_1 = require("../../../upload");
 const flex_1 = require("../../../flex");
 const _utils_1 = require("../../../_utils");
 const typography_1 = require("../../../typography");
 const ChatMessages_1 = __importDefault(require("../ChatMessages"));
 const icons_1 = require("../../../_internal/icons");
-const SCROLL_DELAY = 50;
 const SENDING_DELAY = 100;
 exports.default = (0, vue_1.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
          } = (0, vue_1.inject)(interface_1.chatInjectionKey);
         const messagesBodyRef = (0, vue_1.ref)();
         const inputRef = (0, vue_1.ref)();
         const inputValue = (0, vue_1.ref)('');
         const attachmentFileList = (0, vue_1.ref)([]);
+        const lastScrollTop = (0, vue_1.ref)(0);
+        const scrollTopFired = (0, vue_1.ref)(false);
+        const scrollBottomFired = (0, vue_1.ref)(false);
         const unreadMessagesCount = (0, vue_1.computed)(() => {
             if (!messagesRef.value)
                 return 0;
@@ -46,12 +49,17 @@ exports.default = (0, vue_1.defineComponent)({
         const unreadCountOnOpen = (0, vue_1.ref)(0);
         const chatInputs = (0, vue_1.ref)({});
         const lastMessageId = (0, vue_1.ref)(null);
+        const shouldScrollOnLoad = (0, vue_1.ref)(false);
         (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] || '';
                 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;
@@ -62,12 +70,6 @@ exports.default = (0, vue_1.defineComponent)({
                     hasUnreadMessages.value = false;
                     showNotificationManually.value = false;
                 }
-                void (0, vue_1.nextTick)(() => {
-                    scrollToBottom();
-                });
-                setTimeout(() => {
-                    scrollToBottom();
-                }, SCROLL_DELAY);
             }
         }, { immediate: true });
         (0, vue_1.watch)(messagesRef, (newMessages) => {
@@ -77,19 +79,18 @@ exports.default = (0, vue_1.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 === interface_1.MessageStatus.UNREAD) {
+                unreadCountOnOpen.value = unreadMessagesCount.value;
+            }
+            if (shouldScrollOnLoad.value && newMessages.length > 0) {
+                shouldScrollOnLoad.value = false;
                 void (0, vue_1.nextTick)(() => {
                     scrollToBottom();
                 });
-                setTimeout(() => {
-                    scrollToBottom();
-                }, SCROLL_DELAY);
-                if (currentLastMessage &&
-                    !currentLastMessage.isOwn &&
-                    currentLastMessage.status === interface_1.MessageStatus.UNREAD) {
-                    unreadCountOnOpen.value = unreadMessagesCount.value;
-                }
             }
             lastMessageId.value = currentLastId !== null && currentLastId !== void 0 ? currentLastId : null;
         }, { deep: true, flush: 'post' });
@@ -102,17 +103,42 @@ exports.default = (0, vue_1.defineComponent)({
                 notificationsShownSetRef.value = newSet;
             }
         });
+        (0, vue_1.watch)(inputValue, (newValue) => {
+            if (selectedChatRef.value) {
+                handleFooterInputChange(newValue, selectedChatRef.value.id);
+            }
+        });
         const showUnreadNotification = (0, vue_1.computed)(() => {
             return hasUnreadMessages.value && showNotificationManually.value;
         });
-        (0, vue_1.onMounted)(() => {
-            void (0, vue_1.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)
@@ -134,27 +160,50 @@ exports.default = (0, vue_1.defineComponent)({
         };
         const renderHeader = () => {
             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)(flex_1.UFlex, { justify: "space-between", align: "flex-start", wrap: false }, {
                     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`, 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 : ''; }
                         }),
                         (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, { 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: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
-                                        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, { 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: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
-                                        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, { 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: () => (0, _utils_1.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((0, vue_1.h)(tooltip_1.UTooltip, null, {
+                                        trigger: () => ((0, vue_1.h)(button_1.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: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, shareIconProps, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides
+                                                    .Icon }), {
+                                                default: () => ((0, vue_1.h)(icons_1.ArrowHookUpRight, null))
+                                            }))
+                                        })),
+                                        default: () => shareButtonTooltipRef.value
+                                    }));
+                                }
+                                if (profileButtonProps.disabled !== true) {
+                                    buttons.push((0, vue_1.h)(tooltip_1.UTooltip, null, {
+                                        trigger: () => ((0, vue_1.h)(button_1.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: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, profileIconProps, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides
+                                                    .Icon }), {
+                                                default: () => (0, vue_1.h)(icons_1.PersonNote, null)
+                                            }))
+                                        })),
+                                        default: () => profileButtonTooltipRef.value
+                                    }));
+                                }
+                                if (closeButtonProps.disabled !== true) {
+                                    buttons.push((0, vue_1.h)(button_1.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;
+                            })
                         })))
                 })));
         };
@@ -201,12 +250,6 @@ exports.default = (0, vue_1.defineComponent)({
                     chatInputs.value[selectedChatRef.value.id] = '';
                     hasUnreadMessages.value = false;
                     showNotificationManually.value = false;
-                    void (0, vue_1.nextTick)(() => {
-                        scrollToBottom();
-                    });
-                    setTimeout(() => {
-                        scrollToBottom();
-                    }, SCROLL_DELAY);
                 }
                 finally {
                     setTimeout(() => {
@@ -246,12 +289,6 @@ exports.default = (0, vue_1.defineComponent)({
                         handleMessageSend('', attachments);
                         pendingFiles.value = [];
                         attachmentFileList.value = [];
-                        void (0, vue_1.nextTick)(() => {
-                            scrollToBottom();
-                        });
-                        setTimeout(() => {
-                            scrollToBottom();
-                        }, SCROLL_DELAY);
                     }
                 }, SENDING_DELAY);
             }
@@ -291,6 +328,7 @@ exports.default = (0, vue_1.defineComponent)({
             inputRef,
             inputValue,
             handleSendMessage,
+            handleMessagesScroll,
             scrollToBottom
         };
     },
@@ -299,7 +337,7 @@ 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` }, {
+            (0, vue_1.h)(scrollbar_1.UScrollbar, { ref: "messagesBodyRef", class: `${mergedClsPrefixRef.value}-chat-main__body`, onScroll: this.handleMessagesScroll }, {
                 default: () => this.renderMessages()
             }),
             this.renderFooter()));