scroll area trigger

apps/web/src/components/ui/scroll-area/useGetScrollAreaRef.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { SCROLL_AREA_VIEWPORT_CLASS } from './ScrollArea';
 
 export const useGetScrollAreaRef = ({
@@ -9,6 +9,7 @@ export const useGetScrollAreaRef = ({
   enabled?: boolean;
 }) => {
   const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const [foundScrollArea, setFoundScrollArea] = useState(false);
   useEffect(() => {
     if (!enabled) return;
     requestAnimationFrame(() => {
@@ -17,9 +18,10 @@ export const useGetScrollAreaRef = ({
 
       if (closestMatch) {
         scrollAreaRef.current = closestMatch as HTMLDivElement;
+        setFoundScrollArea(true);
       }
     });
   }, [enabled]);
 
-  return scrollAreaRef;
+  return { scrollAreaRef, foundScrollArea };
 };

apps/web/src/controllers/ReasoningController/ReasoningController.tsx

@@ -34,7 +34,10 @@ export const ReasoningController: React.FC<ReasoningControllerProps> = ({ chatId
   const showReasoningController = !!hasChat && !!reasoningMessageIds?.length;
 
   const nodeRef = useRef<HTMLDivElement | null>(null);
-  const scrollAreaRef = useGetScrollAreaRef({ nodeRef, enabled: showReasoningController });
+  const { scrollAreaRef, foundScrollArea } = useGetScrollAreaRef({
+    nodeRef,
+    enabled: showReasoningController,
+  });
 
   const { isAutoScrollEnabled, isMountedAutoScrollObserver, scrollToBottom, enableAutoScroll } =
     useAutoScroll(scrollAreaRef, {
@@ -43,10 +46,10 @@ export const ReasoningController: React.FC<ReasoningControllerProps> = ({ chatId
     });
 
   useEffect(() => {
-    if (showReasoningController) {
+    if (showReasoningController && foundScrollArea) {
       enableAutoScroll();
     }
-  }, [showReasoningController]);
+  }, [showReasoningController, foundScrollArea]);
 
   return (
     <>

apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx

@@ -85,7 +85,7 @@ export const ReportPageController: React.FC<{
     useTrackAndUpdateReportChanges({ reportId, subscribe: isStreamingMessage });
 
     const nodeRef = useRef<HTMLDivElement>(null);
-    const scrollAreaRef = useGetScrollAreaRef({ nodeRef });
+    const { scrollAreaRef } = useGetScrollAreaRef({ nodeRef });
 
     return (
       <div

apps/web/src/hooks/useAutoScroll.ts

@@ -249,7 +249,7 @@ export const useAutoScroll = (
   // Listen for scroll events. If the user scrolls back close to the bottom, re-enable auto–scroll.
   useEffect(() => {
     const container = containerRef?.current;
-    if (!container) return;
+    if (!container || !enabled) return;
 
     const onScroll = () => {
       if (isAtBottom(container, bottomThreshold)) {
@@ -261,7 +261,7 @@ export const useAutoScroll = (
     return () => {
       container.removeEventListener('scroll', onScroll);
     };
-  }, [containerRef, isAutoScrollEnabled, bottomThreshold]);
+  }, [containerRef, isAutoScrollEnabled, bottomThreshold, enabled]);
 
   // Exposed functions.