@hef2024/llmasaservice-ui 0.22.1 → 0.22.2

package/dist/index.js

@@ -3894,6 +3894,7 @@ var AIChatPanel = ({
   const lastScrollTopRef = (0, import_react12.useRef)(0);
   const scrollRAFRef = (0, import_react12.useRef)(null);
   const lastScrollTimeRef = (0, import_react12.useRef)(0);
+  const prevResponseLengthRef = (0, import_react12.useRef)(0);
   const prevIdleRef = (0, import_react12.useRef)(true);
   const hasNotifiedCompletionRef = (0, import_react12.useRef)(true);
   const latestHistoryRef = (0, import_react12.useRef)(initialHistory);
@@ -4368,6 +4369,7 @@ var AIChatPanel = ({
     setCurrentThinkingIndex(0);
     setError(null);
     setUserHasScrolled(false);
+    prevResponseLengthRef.current = 0;
     setResponse("");
     if (!idle) {
       stop(lastController);
@@ -4568,11 +4570,15 @@ var AIChatPanel = ({
     }
     if (!isNowIdle && hasNotifiedCompletionRef.current) {
       hasNotifiedCompletionRef.current = false;
+      prevResponseLengthRef.current = 0;
     }
   }, [idle]);
   (0, import_react12.useEffect)(() => {
+    const currentResponseLength = response.length;
+    const responseGotLonger = currentResponseLength > prevResponseLengthRef.current;
+    prevResponseLengthRef.current = currentResponseLength;
     const shouldAutoScroll = scrollToEnd || !userHasScrolled;
-    if (!idle && shouldAutoScroll && response) {
+    if (!idle && shouldAutoScroll && response && responseGotLonger) {
       scrollToBottom(false);
     }
   }, [response, scrollToBottom, idle, userHasScrolled, scrollToEnd]);

package/dist/index.mjs

@@ -3861,6 +3861,7 @@ var AIChatPanel = ({
   const lastScrollTopRef = useRef5(0);
   const scrollRAFRef = useRef5(null);
   const lastScrollTimeRef = useRef5(0);
+  const prevResponseLengthRef = useRef5(0);
   const prevIdleRef = useRef5(true);
   const hasNotifiedCompletionRef = useRef5(true);
   const latestHistoryRef = useRef5(initialHistory);
@@ -4335,6 +4336,7 @@ var AIChatPanel = ({
     setCurrentThinkingIndex(0);
     setError(null);
     setUserHasScrolled(false);
+    prevResponseLengthRef.current = 0;
     setResponse("");
     if (!idle) {
       stop(lastController);
@@ -4535,11 +4537,15 @@ var AIChatPanel = ({
     }
     if (!isNowIdle && hasNotifiedCompletionRef.current) {
       hasNotifiedCompletionRef.current = false;
+      prevResponseLengthRef.current = 0;
     }
   }, [idle]);
   useEffect7(() => {
+    const currentResponseLength = response.length;
+    const responseGotLonger = currentResponseLength > prevResponseLengthRef.current;
+    prevResponseLengthRef.current = currentResponseLength;
     const shouldAutoScroll = scrollToEnd || !userHasScrolled;
-    if (!idle && shouldAutoScroll && response) {
+    if (!idle && shouldAutoScroll && response && responseGotLonger) {
       scrollToBottom(false);
     }
   }, [response, scrollToBottom, idle, userHasScrolled, scrollToEnd]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hef2024/llmasaservice-ui",
-  "version": "0.22.1",
+  "version": "0.22.2",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/AIChatPanel.tsx

@@ -846,6 +846,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const lastScrollTopRef = useRef<number>(0);
   const scrollRAFRef = useRef<number | null>(null);
   const lastScrollTimeRef = useRef<number>(0);
+  const prevResponseLengthRef = useRef<number>(0);
   
   // === NEW: Clean history management refs ===
   // Track previous idle state to detect transitions (false→true = completion)
@@ -1521,6 +1522,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     
     // Reset scroll tracking for new message - enable auto-scroll
     setUserHasScrolled(false);
+    prevResponseLengthRef.current = 0;
     
     // IMPORTANT: Clear the response BEFORE setting new lastKey
     // This prevents the old response from being written to the new history entry
@@ -1814,17 +1816,24 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     // Reset notification flag when starting a new stream
     if (!isNowIdle && hasNotifiedCompletionRef.current) {
       hasNotifiedCompletionRef.current = false;
+      // Reset response length tracking for new stream
+      prevResponseLengthRef.current = 0;
     }
   }, [idle]); // ONLY depends on idle - no history, no callbacks in deps
-
+  
   // Auto-scroll to bottom - only while streaming and user hasn't manually scrolled
   useEffect(() => {
     // Only auto-scroll if:
     // 1. We're actively streaming (!idle)
     // 2. User hasn't manually scrolled up during this response (or scrollToEnd prop is true)
     // 3. We have content to show (response exists)
+    // 4. The response actually got longer (not just a re-render from layout change)
+    const currentResponseLength = response.length;
+    const responseGotLonger = currentResponseLength > prevResponseLengthRef.current;
+    prevResponseLengthRef.current = currentResponseLength;
+    
     const shouldAutoScroll = scrollToEnd || !userHasScrolled;
-    if (!idle && shouldAutoScroll && response) {
+    if (!idle && shouldAutoScroll && response && responseGotLonger) {
       // Use non-forced scroll - will only scroll if near bottom
       scrollToBottom(false);
     }