fix the input scroll

Author: seraprogrammer

src/components/Chat.tsx

@@ -78,16 +78,57 @@ function Chat() {
   const [isLoading, setIsLoading] = useState(false);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
+  const chatContainerRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const isStreamingRef = useRef(false);
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   // Add effect to log model changes
   useEffect(() => {
     console.log("Model changed to:", selectedModel);
   }, [selectedModel]);
 
+  // Improved scrollToBottom with debouncing during streaming
   const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    if (!autoScroll) return;
+
+    // Clear any pending scroll timeout
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+
+    // If streaming, debounce the scroll to avoid too many scroll events
+    if (isStreamingRef.current) {
+      scrollTimeoutRef.current = setTimeout(() => {
+        if (messagesEndRef.current) {
+          messagesEndRef.current.scrollIntoView({ behavior: "auto" });
+        }
+      }, 300); // Adjust this timeout as needed
+    } else {
+      // For non-streaming updates, scroll immediately
+      if (messagesEndRef.current) {
+        messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+      }
+    }
   };
 
+  useEffect(() => {
+    const chatContainer = chatContainerRef.current;
+
+    const handleScroll = () => {
+      if (!chatContainer) return;
+
+      const { scrollTop, scrollHeight, clientHeight } = chatContainer;
+      // If user has scrolled up more than 100px from bottom, disable auto-scroll
+      // When they scroll back to bottom, re-enable it
+      const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
+      setAutoScroll(isNearBottom);
+    };
+
+    chatContainer?.addEventListener("scroll", handleScroll);
+    return () => chatContainer?.removeEventListener("scroll", handleScroll);
+  }, []);
+
   useEffect(() => {
     scrollToBottom();
   }, [chatHistory]);
@@ -137,9 +178,17 @@ function Chat() {
 
       setChatHistory((prev) => [...prev, assistantMessage]);
 
+      // Set streaming flag to true
+      isStreamingRef.current = true;
+
       while (true) {
         const { done, value } = await reader.read();
-        if (done) break;
+        if (done) {
+          // Final scroll when streaming is complete
+          isStreamingRef.current = false;
+          setTimeout(scrollToBottom, 100);
+          break;
+        }
 
         const chunk = decoder.decode(value);
         assistantMessage.content += chunk;
@@ -149,15 +198,22 @@ function Chat() {
           newHistory[newHistory.length - 1] = { ...assistantMessage };
           return newHistory;
         });
+
+        // Only scroll occasionally during streaming, not on every chunk
+        if (chunk.length > 50) {
+          scrollToBottom();
+        }
       }
     } catch (error) {
       console.error("Error:", error);
       setChatHistory((prev) => [
         ...prev,
         { role: "assistant", content: "Error: Could not connect to server" },
       ]);
+      isStreamingRef.current = false;
     } finally {
       setIsLoading(false);
+      isStreamingRef.current = false;
     }
   };
 
@@ -252,7 +308,10 @@ function Chat() {
             </button>
           </div>
 
-          <div className="flex-1 overflow-y-auto scrollbar-custom p-6 space-y-8">
+          <div
+            ref={chatContainerRef}
+            className="flex-1 overflow-y-auto scrollbar-custom p-6 space-y-8"
+          >
             {chatHistory.length === 0 ? (
               <div className="text-center text-gray-500 mt-20">
                 <Welcome />