@hivegpt/hiveai-angular 0.0.611 → 0.0.613

package/fesm2020/hivegpt-hiveai-angular.mjs

@@ -1614,6 +1614,8 @@ class ChatDrawerComponent {
         /** Guards against our own programmatic scrolls triggering the userHasScrolled detection. */
         this.isProgrammaticScroll = false;
         this.scrollListenerTimer = null;
+        /** Throttle timer for streaming chunk scroll — prevents firing on every chunk. */
+        this.chunkScrollRAF = 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. */
@@ -3441,7 +3443,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) {
@@ -3470,7 +3473,7 @@ class ChatDrawerComponent {
                         allSuggestions.push(match?.replace(/<\/?sug>/g, ''));
                     });
                 }
-                lastItem.message = this.aiResponse;
+                lastItem.message = this.processMessageForDisplay(this.aiResponse);
                 this.cdr.markForCheck();
             }
             else {
@@ -3757,7 +3760,7 @@ class ChatDrawerComponent {
         }
         this.cdr.detectChanges();
     }
-    scrollToBottom(force = false, smooth = true) {
+    scrollToBottom(force = false) {
         if (!force && !this.autoScrollOnNewMessage) {
             return;
         }
@@ -3770,10 +3773,36 @@ class ChatDrawerComponent {
         this.isProgrammaticScroll = true;
         el.scrollTo({
             top: el.scrollHeight,
-            behavior: smooth ? 'smooth' : 'auto',
+            behavior: 'smooth',
+        });
+        setTimeout(() => { this.isProgrammaticScroll = false; }, 400);
+    }
+    /**
+     * Lightweight scroll-to-bottom used during streaming chunks.
+     * Coalesces via requestAnimationFrame so we get at most one smooth
+     * nudge per paint frame, no matter how fast chunks arrive.
+     */
+    scrollToBottomStreaming() {
+        if (this.userHasScrolled)
+            return;
+        if (this.chunkScrollRAF !== null)
+            return; // already queued
+        this.chunkScrollRAF = requestAnimationFrame(() => {
+            this.chunkScrollRAF = null;
+            if (this.userHasScrolled)
+                return;
+            const el = this.chatMain?.nativeElement;
+            if (!el)
+                return;
+            // Small gap check: only scroll if we're within a reasonable distance from the bottom
+            const gap = el.scrollHeight - el.scrollTop - el.clientHeight;
+            if (gap <= 0)
+                return; // already at bottom
+            this.isProgrammaticScroll = true;
+            // Use a quick smooth nudge rather than instant jump
+            el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
+            setTimeout(() => { this.isProgrammaticScroll = false; }, 300);
         });
-        // 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) {
@@ -4675,7 +4704,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;
@@ -4684,7 +4715,7 @@ class ChatDrawerComponent {
                 }
                 else {
                     this.cdr.markForCheck();
-                    setTimeout(() => this.scrollToBottom(true, false), 0);
+                    this.scrollToBottomStreaming();
                 }
                 break;
             }
@@ -4695,12 +4726,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;
                 }
@@ -4715,13 +4748,10 @@ class ChatDrawerComponent {
                 this.showFeedBackIconsIndex = this.chatLog.length - 1;
                 this.activeAskMessageId = '';
                 this.isChatingWithAi = false;
-                // For card responses (tool results), scroll to the message text bubble
-                // instead of the very bottom — avoids cards pushing the view too far down
-                if (hasCardResponse && messageId) {
-                    this.cdr.markForCheck();
-                    setTimeout(() => this.scrollToAiMessage(messageId), 30);
-                }
-                else {
+                // 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();