@hivegpt/hiveai-angular 0.0.610 → 0.0.612

package/fesm2020/hivegpt-hiveai-angular.mjs

@@ -1609,6 +1609,11 @@ class ChatDrawerComponent {
         this.displayAvatarUrl = 'https://www.jotform.com/uploads/mehmetkarakasli/form_files/1564593667676a8e85f23758.86945537_icon.png';
         /** When true, chat auto-scrolls to bottom when new content is added. Default: false (no auto scroll). */
         this.autoScrollOnNewMessage = false;
+        /** Tracks whether the user has manually scrolled up, suppressing auto-scroll until they scroll back to bottom or send a new message. */
+        this.userHasScrolled = false;
+        /** Guards against our own programmatic scrolls triggering the userHasScrolled detection. */
+        this.isProgrammaticScroll = false;
+        this.scrollListenerTimer = null;
         /** Connections list from host (e.g. from store selectConnectionsList). Each item has userId. When set, used for Connect/Request Sent/Disconnect button state. */
         this.connectionsList = [];
         /** Pending sent request user IDs from host (e.g. from store selectPendingConnectionsSentList). When set, used for Request Sent state. */
@@ -3352,6 +3357,8 @@ class ChatDrawerComponent {
         if (!this.input || this.loading) {
             return;
         }
+        // Reset auto-scroll suppression when user sends a new message
+        this.userHasScrolled = false;
         this.chatLog.push({
             type: 'user',
             message: this.processMessageForDisplay(this.input),
@@ -3375,6 +3382,8 @@ class ChatDrawerComponent {
         if (!inputMsg || this.loading) {
             return;
         }
+        // Reset auto-scroll suppression when user sends a new message
+        this.userHasScrolled = false;
         try {
             chat.relatedListItems = [];
             this.cdr.detectChanges();
@@ -3432,7 +3441,8 @@ class ChatDrawerComponent {
         reader.read().then(({ done, value }) => {
             const lastItem = this.chatLog[this.chatLog.length - 1];
             if (done) {
-                lastItem.message = this.processMessageForDisplay(lastItem.message);
+                // Final pass with the complete raw text (aiResponse) for a clean render
+                lastItem.message = this.processMessageForDisplay(this.aiResponse);
                 this.chatLog.pop();
                 this.chatLog.push(lastItem);
                 if (allSuggestions?.length) {
@@ -3461,7 +3471,7 @@ class ChatDrawerComponent {
                         allSuggestions.push(match?.replace(/<\/?sug>/g, ''));
                     });
                 }
-                lastItem.message = this.aiResponse;
+                lastItem.message = this.processMessageForDisplay(this.aiResponse);
                 this.cdr.markForCheck();
             }
             else {
@@ -3748,30 +3758,41 @@ class ChatDrawerComponent {
         }
         this.cdr.detectChanges();
     }
-    scrollToBottom(force = false) {
+    scrollToBottom(force = false, smooth = true) {
         if (!force && !this.autoScrollOnNewMessage) {
             return;
         }
+        if (this.userHasScrolled) {
+            return;
+        }
         if (!this.chatMain?.nativeElement)
             return;
-        let counter = 0;
-        const interval = setInterval(() => {
-            this.chatMain.nativeElement.scrollTop =
-                this.chatMain.nativeElement.scrollHeight;
-            if (counter++ > 5)
-                clearInterval(interval);
-        }, 5);
+        const el = this.chatMain.nativeElement;
+        this.isProgrammaticScroll = true;
+        el.scrollTo({
+            top: el.scrollHeight,
+            behavior: smooth ? 'smooth' : 'auto',
+        });
+        // Release the guard after the smooth scroll settles
+        setTimeout(() => { this.isProgrammaticScroll = false; }, smooth ? 400 : 50);
     }
     /** Scrolls the chat container so the top of the AI message with the given id is visible. */
     scrollToAiMessage(messageId) {
+        if (this.userHasScrolled)
+            return;
         if (!this.chatMain?.nativeElement)
             return;
         const container = this.chatMain.nativeElement;
         const el = container.querySelector(`[data-msg-id="${messageId}"]`);
         if (!el)
             return;
-        const offset = el.getBoundingClientRect().top - container.getBoundingClientRect().top;
-        container.scrollTop = container.scrollTop + offset - 8;
+        const targetTop = el.getBoundingClientRect().top - container.getBoundingClientRect().top;
+        this.isProgrammaticScroll = true;
+        container.scrollTo({
+            top: container.scrollTop + targetTop - 8,
+            behavior: 'smooth',
+        });
+        setTimeout(() => { this.isProgrammaticScroll = false; }, 400);
     }
     focusOnTextarea() {
         setTimeout(() => {
@@ -3787,6 +3808,21 @@ class ChatDrawerComponent {
         }
     }
     ngAfterViewInit() {
+        // Detect user manual scroll to suppress auto-scroll (debounced, ignores programmatic scrolls)
+        if (this.chatMain?.nativeElement) {
+            this.chatMain.nativeElement.addEventListener('scroll', () => {
+                if (this.isProgrammaticScroll)
+                    return;
+                clearTimeout(this.scrollListenerTimer);
+                this.scrollListenerTimer = setTimeout(() => {
+                    const el = this.chatMain?.nativeElement;
+                    if (!el)
+                        return;
+                    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+                    this.userHasScrolled = !atBottom;
+                }, 100);
+            });
+        }
         // Check if the drawer is initially open and apply overflow hidden to body if so
         if (this.drawer.opened) {
             this.setBodyOverflow();
@@ -4640,7 +4676,9 @@ class ChatDrawerComponent {
                     return;
                 const isNewAiMessage = !this.chatLog.find((p) => p._id == messageId);
                 const currentChatMessage = this.upsertAiChatMessage(messageId);
-                currentChatMessage.message = `${currentChatMessage.message || ''}${payload?.text || ''}`;
+                // Accumulate raw text and render markdown in real-time
+                currentChatMessage.rawMessage = `${currentChatMessage.rawMessage || ''}${payload?.text || ''}`;
+                currentChatMessage.message = this.processMessageForDisplay(currentChatMessage.rawMessage);
                 if (isNewAiMessage) {
                     // First chunk: hide Thinking indicator and scroll to the message start
                     this.isChatingWithAi = false;
@@ -4649,7 +4687,7 @@ class ChatDrawerComponent {
                 }
                 else {
                     this.cdr.markForCheck();
-                    setTimeout(() => this.scrollToBottom(true), 0);
+                    setTimeout(() => this.scrollToBottom(true, false), 0);
                 }
                 break;
             }
@@ -4660,12 +4698,14 @@ class ChatDrawerComponent {
                     break;
                 }
                 const currentChatMessage = this.upsertAiChatMessage(messageId);
-                const finalAnswer = payload?.text ?? currentChatMessage.message ?? '';
+                const finalAnswer = payload?.text ?? currentChatMessage.rawMessage ?? currentChatMessage.message ?? '';
                 const hasCardResponse = this.applyToolResultCardMessage(currentChatMessage, messageId, finalAnswer, payload?.tool_results);
                 if (!hasCardResponse) {
                     currentChatMessage.type = 'ai';
                     currentChatMessage.message = this.processMessageForDisplay(finalAnswer);
                 }
+                // Clean up raw accumulator
+                delete currentChatMessage.rawMessage;
                 if (Array.isArray(payload?.suggestions)) {
                     currentChatMessage.relatedListItems = payload.suggestions;
                 }
@@ -4680,7 +4720,12 @@ class ChatDrawerComponent {
                 this.showFeedBackIconsIndex = this.chatLog.length - 1;
                 this.activeAskMessageId = '';
                 this.isChatingWithAi = false;
-                this.scrollToBottom();
+                // For card responses (tool results), don't scroll at all —
+                // user is already viewing the AI text from the streaming phase,
+                // cards render below and the user can scroll down to see them.
+                if (!hasCardResponse) {
+                    this.scrollToBottom();
+                }
                 this.focusOnTextarea();
                 this.cdr.markForCheck();
                 break;
@@ -4797,6 +4842,7 @@ class ChatDrawerComponent {
         return Object.keys(obj).map((key) => ({ key, value: obj[key] }));
     }
     startNewConversation() {
+        this.userHasScrolled = false;
         this.conversationKey = this.conversationService.getKey(this.botId, true, this.eventId);
         this.chatLog = [this.chatLog[0]];
         this.isChatingWithAi = false;