@hef2024/llmasaservice-ui 0.24.0 → 0.24.1

package/dist/index.js

@@ -847,6 +847,11 @@ var ChatPanel = ({
   }, []);
   const [iframeUrl, setIframeUrl] = (0, import_react11.useState)(null);
   const responseAreaRef = (0, import_react11.useRef)(null);
+  const [userHasScrolled, setUserHasScrolled] = (0, import_react11.useState)(false);
+  const lastScrollTopRef = (0, import_react11.useRef)(0);
+  const prevResponseLengthRef = (0, import_react11.useRef)(0);
+  const userHasScrolledRef = (0, import_react11.useRef)(false);
+  const idleRef = (0, import_react11.useRef)(true);
   const THINKING_PATTERNS = (0, import_react11.useMemo)(
     () => ({
       thinking: /<thinking>([\s\S]*?)<\/thinking>/gi,
@@ -2179,32 +2184,67 @@ var ChatPanel = ({
       }
     }
   }, [initialPrompt]);
+  (0, import_react11.useEffect)(() => {
+    userHasScrolledRef.current = userHasScrolled;
+  }, [userHasScrolled]);
+  (0, import_react11.useEffect)(() => {
+    idleRef.current = idle;
+  }, [idle]);
   (0, import_react11.useEffect)(() => {
     var _a2;
-    if (scrollToEnd) {
+    if (idle) return;
+    const currentResponseLength = response.length;
+    const responseGotLonger = currentResponseLength > prevResponseLengthRef.current;
+    prevResponseLengthRef.current = currentResponseLength;
+    const shouldAutoScroll = scrollToEnd || !userHasScrolledRef.current;
+    if (shouldAutoScroll && response && responseGotLonger) {
       if (window.top !== window.self) {
         const responseArea = responseAreaRef.current;
-        responseArea.scrollTo({
-          top: responseArea.scrollHeight,
-          behavior: "smooth"
-        });
+        if (responseArea) {
+          responseArea.scrollTo({
+            top: responseArea.scrollHeight,
+            behavior: "auto"
+          });
+        }
       } else {
-        (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth", block: "end" });
+        (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "auto", block: "end" });
       }
-    } else {
-      const responseArea = responseAreaRef.current;
-      if (responseArea) {
-        setHasScroll(hasVerticalScrollbar(responseArea));
-        const handleScroll = () => {
-          const isScrolledToBottom = responseArea.scrollHeight - responseArea.scrollTop === responseArea.clientHeight;
-          setIsAtBottom(isScrolledToBottom);
-        };
-        handleScroll();
-        responseArea.addEventListener("scroll", handleScroll);
-        return () => responseArea.removeEventListener("scroll", handleScroll);
+    }
+  }, [response, idle, scrollToEnd]);
+  (0, import_react11.useEffect)(() => {
+    const responseArea = responseAreaRef.current;
+    if (!responseArea) return;
+    const handleWheel = (e) => {
+      if (idleRef.current) return;
+      if (e.deltaY < 0 && !userHasScrolledRef.current) {
+        setUserHasScrolled(true);
+      }
+    };
+    const handleScroll = () => {
+      setHasScroll(hasVerticalScrollbar(responseArea));
+      const isScrolledToBottom = responseArea.scrollHeight - responseArea.scrollTop - responseArea.clientHeight < 5;
+      setIsAtBottom(isScrolledToBottom);
+      if (!idleRef.current && userHasScrolledRef.current) {
+        const isNearBottom = responseArea.scrollHeight - responseArea.scrollTop - responseArea.clientHeight < 50;
+        if (isNearBottom) {
+          setUserHasScrolled(false);
+        }
       }
+    };
+    handleScroll();
+    responseArea.addEventListener("wheel", handleWheel, { passive: true });
+    responseArea.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      responseArea.removeEventListener("wheel", handleWheel);
+      responseArea.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    const responseArea = responseAreaRef.current;
+    if (responseArea) {
+      setHasScroll(hasVerticalScrollbar(responseArea));
     }
-  }, [response, history]);
+  }, [history]);
   (0, import_react11.useEffect)(() => {
     if (historyCallbackRef.current) {
       historyCallbackRef.current(history);
@@ -2327,6 +2367,8 @@ var ChatPanel = ({
     hasAutoCollapsedRef.current = false;
     prevBlockCountRef.current = 0;
     setError(null);
+    setUserHasScrolled(false);
+    prevResponseLengthRef.current = 0;
     setResponse("");
     if (emailInput && isEmailAddress(emailInput) && !emailInputSet) {
       const newId = (currentCustomer == null ? void 0 : currentCustomer.customer_id) && currentCustomer.customer_id !== "" && currentCustomer.customer_id !== (currentCustomer == null ? void 0 : currentCustomer.customer_user_email) ? currentCustomer.customer_id : emailInput;
@@ -4660,7 +4702,7 @@ var AIChatPanel = ({
       cancelAnimationFrame(scrollRAFRef.current);
     }
     if (!force && responseAreaRef.current) {
-      const scrollViewport = responseAreaRef.current.querySelector("[data-radix-scroll-area-viewport]");
+      const scrollViewport = responseAreaRef.current.querySelector(".ai-scroll-area-viewport");
       const scrollElement = scrollViewport || responseAreaRef.current;
       const scrollTop = scrollElement.scrollTop;
       const scrollHeight = scrollElement.scrollHeight;
@@ -4963,7 +5005,7 @@ var AIChatPanel = ({
     prevResponseLengthRef.current = currentResponseLength;
     const shouldAutoScroll = scrollToEndRef.current || !userHasScrolledRef.current;
     if (shouldAutoScroll && response && responseGotLonger) {
-      scrollToBottom(false);
+      scrollToBottom(true);
     }
   }, [response, idle]);
   const idleRef = (0, import_react14.useRef)(idle);
@@ -4971,21 +5013,30 @@ var AIChatPanel = ({
   (0, import_react14.useEffect)(() => {
     const scrollArea = responseAreaRef.current;
     if (!scrollArea) return;
-    const scrollViewport = scrollArea.querySelector("[data-radix-scroll-area-viewport]");
+    const scrollViewport = scrollArea.querySelector(".ai-scroll-area-viewport");
     const scrollElement = scrollViewport || scrollArea;
+    const handleWheel = (e) => {
+      if (idleRef.current) return;
+      if (e.deltaY < 0 && !userHasScrolledRef.current) {
+        setUserHasScrolled(true);
+      }
+    };
     const handleScroll = () => {
-      if (idleRef.current || userHasScrolledRef.current) return;
-      const currentScrollTop = scrollElement.scrollTop;
+      if (idleRef.current || !userHasScrolledRef.current) return;
       const scrollHeight = scrollElement.scrollHeight;
+      const currentScrollTop = scrollElement.scrollTop;
       const clientHeight = scrollElement.clientHeight;
-      const isNearBottom = scrollHeight - currentScrollTop - clientHeight < 100;
-      if (currentScrollTop < lastScrollTopRef.current && !isNearBottom) {
-        setUserHasScrolled(true);
+      const isNearBottom = scrollHeight - currentScrollTop - clientHeight < 50;
+      if (isNearBottom) {
+        setUserHasScrolled(false);
       }
-      lastScrollTopRef.current = currentScrollTop;
     };
+    scrollElement.addEventListener("wheel", handleWheel, { passive: true });
     scrollElement.addEventListener("scroll", handleScroll, { passive: true });
-    return () => scrollElement.removeEventListener("scroll", handleScroll);
+    return () => {
+      scrollElement.removeEventListener("wheel", handleWheel);
+      scrollElement.removeEventListener("scroll", handleScroll);
+    };
   }, []);
   (0, import_react14.useEffect)(() => {
     setFollowOnQuestionsState(followOnQuestions);

package/dist/index.mjs

@@ -806,6 +806,11 @@ var ChatPanel = ({
   }, []);
   const [iframeUrl, setIframeUrl] = useState5(null);
   const responseAreaRef = useRef5(null);
+  const [userHasScrolled, setUserHasScrolled] = useState5(false);
+  const lastScrollTopRef = useRef5(0);
+  const prevResponseLengthRef = useRef5(0);
+  const userHasScrolledRef = useRef5(false);
+  const idleRef = useRef5(true);
   const THINKING_PATTERNS = useMemo(
     () => ({
       thinking: /<thinking>([\s\S]*?)<\/thinking>/gi,
@@ -2138,32 +2143,67 @@ var ChatPanel = ({
       }
     }
   }, [initialPrompt]);
+  useEffect6(() => {
+    userHasScrolledRef.current = userHasScrolled;
+  }, [userHasScrolled]);
+  useEffect6(() => {
+    idleRef.current = idle;
+  }, [idle]);
   useEffect6(() => {
     var _a2;
-    if (scrollToEnd) {
+    if (idle) return;
+    const currentResponseLength = response.length;
+    const responseGotLonger = currentResponseLength > prevResponseLengthRef.current;
+    prevResponseLengthRef.current = currentResponseLength;
+    const shouldAutoScroll = scrollToEnd || !userHasScrolledRef.current;
+    if (shouldAutoScroll && response && responseGotLonger) {
       if (window.top !== window.self) {
         const responseArea = responseAreaRef.current;
-        responseArea.scrollTo({
-          top: responseArea.scrollHeight,
-          behavior: "smooth"
-        });
+        if (responseArea) {
+          responseArea.scrollTo({
+            top: responseArea.scrollHeight,
+            behavior: "auto"
+          });
+        }
       } else {
-        (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth", block: "end" });
+        (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "auto", block: "end" });
       }
-    } else {
-      const responseArea = responseAreaRef.current;
-      if (responseArea) {
-        setHasScroll(hasVerticalScrollbar(responseArea));
-        const handleScroll = () => {
-          const isScrolledToBottom = responseArea.scrollHeight - responseArea.scrollTop === responseArea.clientHeight;
-          setIsAtBottom(isScrolledToBottom);
-        };
-        handleScroll();
-        responseArea.addEventListener("scroll", handleScroll);
-        return () => responseArea.removeEventListener("scroll", handleScroll);
+    }
+  }, [response, idle, scrollToEnd]);
+  useEffect6(() => {
+    const responseArea = responseAreaRef.current;
+    if (!responseArea) return;
+    const handleWheel = (e) => {
+      if (idleRef.current) return;
+      if (e.deltaY < 0 && !userHasScrolledRef.current) {
+        setUserHasScrolled(true);
+      }
+    };
+    const handleScroll = () => {
+      setHasScroll(hasVerticalScrollbar(responseArea));
+      const isScrolledToBottom = responseArea.scrollHeight - responseArea.scrollTop - responseArea.clientHeight < 5;
+      setIsAtBottom(isScrolledToBottom);
+      if (!idleRef.current && userHasScrolledRef.current) {
+        const isNearBottom = responseArea.scrollHeight - responseArea.scrollTop - responseArea.clientHeight < 50;
+        if (isNearBottom) {
+          setUserHasScrolled(false);
+        }
       }
+    };
+    handleScroll();
+    responseArea.addEventListener("wheel", handleWheel, { passive: true });
+    responseArea.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      responseArea.removeEventListener("wheel", handleWheel);
+      responseArea.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+  useEffect6(() => {
+    const responseArea = responseAreaRef.current;
+    if (responseArea) {
+      setHasScroll(hasVerticalScrollbar(responseArea));
     }
-  }, [response, history]);
+  }, [history]);
   useEffect6(() => {
     if (historyCallbackRef.current) {
       historyCallbackRef.current(history);
@@ -2286,6 +2326,8 @@ var ChatPanel = ({
     hasAutoCollapsedRef.current = false;
     prevBlockCountRef.current = 0;
     setError(null);
+    setUserHasScrolled(false);
+    prevResponseLengthRef.current = 0;
     setResponse("");
     if (emailInput && isEmailAddress(emailInput) && !emailInputSet) {
       const newId = (currentCustomer == null ? void 0 : currentCustomer.customer_id) && currentCustomer.customer_id !== "" && currentCustomer.customer_id !== (currentCustomer == null ? void 0 : currentCustomer.customer_user_email) ? currentCustomer.customer_id : emailInput;
@@ -4625,7 +4667,7 @@ var AIChatPanel = ({
       cancelAnimationFrame(scrollRAFRef.current);
     }
     if (!force && responseAreaRef.current) {
-      const scrollViewport = responseAreaRef.current.querySelector("[data-radix-scroll-area-viewport]");
+      const scrollViewport = responseAreaRef.current.querySelector(".ai-scroll-area-viewport");
       const scrollElement = scrollViewport || responseAreaRef.current;
       const scrollTop = scrollElement.scrollTop;
       const scrollHeight = scrollElement.scrollHeight;
@@ -4928,7 +4970,7 @@ var AIChatPanel = ({
     prevResponseLengthRef.current = currentResponseLength;
     const shouldAutoScroll = scrollToEndRef.current || !userHasScrolledRef.current;
     if (shouldAutoScroll && response && responseGotLonger) {
-      scrollToBottom(false);
+      scrollToBottom(true);
     }
   }, [response, idle]);
   const idleRef = useRef6(idle);
@@ -4936,21 +4978,30 @@ var AIChatPanel = ({
   useEffect8(() => {
     const scrollArea = responseAreaRef.current;
     if (!scrollArea) return;
-    const scrollViewport = scrollArea.querySelector("[data-radix-scroll-area-viewport]");
+    const scrollViewport = scrollArea.querySelector(".ai-scroll-area-viewport");
     const scrollElement = scrollViewport || scrollArea;
+    const handleWheel = (e) => {
+      if (idleRef.current) return;
+      if (e.deltaY < 0 && !userHasScrolledRef.current) {
+        setUserHasScrolled(true);
+      }
+    };
     const handleScroll = () => {
-      if (idleRef.current || userHasScrolledRef.current) return;
-      const currentScrollTop = scrollElement.scrollTop;
+      if (idleRef.current || !userHasScrolledRef.current) return;
       const scrollHeight = scrollElement.scrollHeight;
+      const currentScrollTop = scrollElement.scrollTop;
       const clientHeight = scrollElement.clientHeight;
-      const isNearBottom = scrollHeight - currentScrollTop - clientHeight < 100;
-      if (currentScrollTop < lastScrollTopRef.current && !isNearBottom) {
-        setUserHasScrolled(true);
+      const isNearBottom = scrollHeight - currentScrollTop - clientHeight < 50;
+      if (isNearBottom) {
+        setUserHasScrolled(false);
       }
-      lastScrollTopRef.current = currentScrollTop;
     };
+    scrollElement.addEventListener("wheel", handleWheel, { passive: true });
     scrollElement.addEventListener("scroll", handleScroll, { passive: true });
-    return () => scrollElement.removeEventListener("scroll", handleScroll);
+    return () => {
+      scrollElement.removeEventListener("wheel", handleWheel);
+      scrollElement.removeEventListener("scroll", handleScroll);
+    };
   }, []);
   useEffect8(() => {
     setFollowOnQuestionsState(followOnQuestions);

package/package.json

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

package/src/AIChatPanel.tsx

@@ -1585,7 +1585,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     
     // Check if we should scroll - only if user is near bottom or force is true
     if (!force && responseAreaRef.current) {
-      const scrollViewport = responseAreaRef.current.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
+      const scrollViewport = responseAreaRef.current.querySelector('.ai-scroll-area-viewport') as HTMLElement;
       const scrollElement = scrollViewport || responseAreaRef.current;
       
       const scrollTop = scrollElement.scrollTop;
@@ -2038,8 +2038,9 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     // Only scroll if response actually grew - use refs to avoid unnecessary effect runs
     const shouldAutoScroll = scrollToEndRef.current || !userHasScrolledRef.current;
     if (shouldAutoScroll && response && responseGotLonger) {
-      // Use non-forced scroll - will only scroll if near bottom
-      scrollToBottom(false);
+      // Use forced scroll since userHasScrolled is our gatekeeper for user intent
+      // The isNearBottom check in scrollToBottom is for layout changes, not streaming
+      scrollToBottom(true);
     }
   }, [response, idle]); // ONLY response and idle - no other dependencies!
 
@@ -2047,39 +2048,48 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const idleRef = useRef(idle);
   idleRef.current = idle;
   
-  // Detect user scroll to disable auto-scroll
+  // Detect user scroll intent via wheel event (fires before scroll position changes)
   useEffect(() => {
     const scrollArea = responseAreaRef.current;
     if (!scrollArea) return;
 
     // Get the actual scrollable element (ScrollArea wraps a viewport)
-    const scrollViewport = scrollArea.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
+    const scrollViewport = scrollArea.querySelector('.ai-scroll-area-viewport') as HTMLElement;
     const scrollElement = scrollViewport || scrollArea;
 
+    // Wheel event detects user intent immediately (before scroll position changes)
+    const handleWheel = (e: WheelEvent) => {
+      // Skip if not streaming
+      if (idleRef.current) return;
+
+      // deltaY < 0 means scrolling UP (toward top of document)
+      if (e.deltaY < 0 && !userHasScrolledRef.current) {
+        setUserHasScrolled(true);
+      }
+    };
+
+    // Scroll event for detecting when user returns to bottom
     const handleScroll = () => {
-      // Skip if not streaming or already marked as user-scrolled
-      if (idleRef.current || userHasScrolledRef.current) return;
+      // Skip if not streaming or user hasn't scrolled up
+      if (idleRef.current || !userHasScrolledRef.current) return;
 
-      const currentScrollTop = scrollElement.scrollTop;
       const scrollHeight = scrollElement.scrollHeight;
+      const currentScrollTop = scrollElement.scrollTop;
       const clientHeight = scrollElement.clientHeight;
 
-      // If user scrolled UP (away from bottom), disable auto-scroll
-      // We consider "near bottom" as within 100px to account for smooth scrolling
-      const isNearBottom = scrollHeight - currentScrollTop - clientHeight < 100;
-      
-      // User scrolled up if:
-      // 1. They scrolled upward (currentScrollTop < lastScrollTopRef.current)
-      // 2. AND they're not near the bottom
-      if (currentScrollTop < lastScrollTopRef.current && !isNearBottom) {
-        setUserHasScrolled(true);
+      // Re-enable auto-scroll when user scrolls back near bottom
+      const isNearBottom = scrollHeight - currentScrollTop - clientHeight < 50;
+      if (isNearBottom) {
+        setUserHasScrolled(false);
       }
-
-      lastScrollTopRef.current = currentScrollTop;
     };
 
+    scrollElement.addEventListener('wheel', handleWheel, { passive: true });
     scrollElement.addEventListener('scroll', handleScroll, { passive: true });
-    return () => scrollElement.removeEventListener('scroll', handleScroll);
+    return () => {
+      scrollElement.removeEventListener('wheel', handleWheel);
+      scrollElement.removeEventListener('scroll', handleScroll);
+    };
   }, []); // Empty deps - handler uses refs to get current values
 
   // Update follow-on questions from props

package/src/ChatPanel.tsx

@@ -315,6 +315,13 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   const [iframeUrl, setIframeUrl] = useState<string | null>(null);
   const responseAreaRef = useRef(null);
 
+  // Auto-scroll state - tracks if user has manually scrolled during streaming
+  const [userHasScrolled, setUserHasScrolled] = useState(false);
+  const lastScrollTopRef = useRef<number>(0);
+  const prevResponseLengthRef = useRef<number>(0);
+  const userHasScrolledRef = useRef<boolean>(false);
+  const idleRef = useRef<boolean>(true);
+
   // Memoized regex patterns to avoid recreation on every render
   const THINKING_PATTERNS = useMemo(
     () => ({
@@ -2134,34 +2141,91 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     }
   }, [initialPrompt]);
 
+  // Keep refs in sync with state
+  useEffect(() => {
+    userHasScrolledRef.current = userHasScrolled;
+  }, [userHasScrolled]);
+
+  useEffect(() => {
+    idleRef.current = idle;
+  }, [idle]);
+
+  // Auto-scroll to bottom during streaming (when user hasn't scrolled up)
   useEffect(() => {
-    if (scrollToEnd) {
+    // Skip if idle (not streaming)
+    if (idle) return;
+
+    const currentResponseLength = response.length;
+    const responseGotLonger = currentResponseLength > prevResponseLengthRef.current;
+    prevResponseLengthRef.current = currentResponseLength;
+
+    // Only auto-scroll if user hasn't manually scrolled up (or scrollToEnd prop forces it)
+    const shouldAutoScroll = scrollToEnd || !userHasScrolledRef.current;
+    if (shouldAutoScroll && response && responseGotLonger) {
       if (window.top !== window.self) {
         const responseArea = responseAreaRef.current as any;
-        responseArea.scrollTo({
-          top: responseArea.scrollHeight,
-          behavior: "smooth",
-        });
+        if (responseArea) {
+          responseArea.scrollTo({
+            top: responseArea.scrollHeight,
+            behavior: "auto",
+          });
+        }
       } else {
-        // If the ChatPanel is not within an iframe
-        bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+        bottomRef.current?.scrollIntoView({ behavior: "auto", block: "end" });
       }
-    } else {
-      const responseArea = responseAreaRef.current as any;
-      if (responseArea) {
-        setHasScroll(hasVerticalScrollbar(responseArea));
-        const handleScroll = () => {
-          const isScrolledToBottom =
-            responseArea.scrollHeight - responseArea.scrollTop ===
-            responseArea.clientHeight;
-          setIsAtBottom(isScrolledToBottom);
-        };
-        handleScroll();
-        responseArea.addEventListener("scroll", handleScroll);
-        return () => responseArea.removeEventListener("scroll", handleScroll);
+    }
+  }, [response, idle, scrollToEnd]);
+
+  // Detect user scroll intent via wheel event (fires before scroll position changes)
+  useEffect(() => {
+    const responseArea = responseAreaRef.current as any;
+    if (!responseArea) return;
+
+    // Wheel event detects user intent immediately (before scroll position changes)
+    const handleWheel = (e: WheelEvent) => {
+      // Skip if not streaming
+      if (idleRef.current) return;
+
+      // deltaY < 0 means scrolling UP (toward top of document)
+      if (e.deltaY < 0 && !userHasScrolledRef.current) {
+        setUserHasScrolled(true);
+      }
+    };
+
+    // Scroll event for hasScroll/isAtBottom UI and detecting return to bottom
+    const handleScroll = () => {
+      // Update hasScroll and isAtBottom states
+      setHasScroll(hasVerticalScrollbar(responseArea));
+      const isScrolledToBottom =
+        responseArea.scrollHeight - responseArea.scrollTop - responseArea.clientHeight < 5;
+      setIsAtBottom(isScrolledToBottom);
+
+      // Re-enable auto-scroll when user scrolls back near bottom (during streaming)
+      if (!idleRef.current && userHasScrolledRef.current) {
+        const isNearBottom =
+          responseArea.scrollHeight - responseArea.scrollTop - responseArea.clientHeight < 50;
+        if (isNearBottom) {
+          setUserHasScrolled(false);
+        }
       }
+    };
+
+    handleScroll(); // Initial check
+    responseArea.addEventListener("wheel", handleWheel, { passive: true });
+    responseArea.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      responseArea.removeEventListener("wheel", handleWheel);
+      responseArea.removeEventListener("scroll", handleScroll);
+    };
+  }, []); // Empty deps - uses refs
+
+  // Update hasScroll when history changes
+  useEffect(() => {
+    const responseArea = responseAreaRef.current as any;
+    if (responseArea) {
+      setHasScroll(hasVerticalScrollbar(responseArea));
     }
-  }, [response, history]);
+  }, [history]);
 
   // Use ref to avoid infinite loops from unstable callback references
   useEffect(() => {
@@ -2337,6 +2401,10 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     // Clear any previous errors
     setError(null);
 
+    // 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
     // when the history update effect runs