From eeb7f246fe3b597d7e421aaa1376e557fd4d9d91 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Mon, 23 Jun 2025 15:26:41 -0300
Subject: [PATCH] fix: make playground scroll not scroll down when not needed
 (#8676)

Fixed playground scroll

Co-authored-by: Carlos Coelho <80289056+carlosrcoelho@users.noreply.github.com>
---
 .../chatView/components/chat-scroll-anchor.tsx  | 17 +++++++++++------
 .../chatView/components/chat-view.tsx           |  8 ++++++--
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/modals/IOModal/components/chatView/components/chat-scroll-anchor.tsx b/src/frontend/src/modals/IOModal/components/chatView/components/chat-scroll-anchor.tsx
index 6b6b11934..a8e5b0a32 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/components/chat-scroll-anchor.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/components/chat-scroll-anchor.tsx
@@ -24,10 +24,7 @@ export function ChatScrollAnchor({
     if (canScroll) {
       if (!scrollRef.current) return;
 
-      if (
-        playgroundScrollBehaves === "instant" ||
-        trackVisibility.category === "error"
-      ) {
+      if (trackVisibility.category === "error") {
         scrollRef.current.scrollIntoView({
           behavior: playgroundScrollBehaves,
         });
@@ -37,14 +34,22 @@ export function ChatScrollAnchor({
             behavior: "smooth",
           });
         }, 400);
-        setPlaygroundScrollBehaves("smooth");
       } else {
         scrollRef.current.scrollIntoView({
           behavior: playgroundScrollBehaves,
         });
+        if (playgroundScrollBehaves === "smooth") {
+          setPlaygroundScrollBehaves("instant");
+          setTimeout(() => {
+            if (!scrollRef.current) return;
+            scrollRef.current.scrollIntoView({
+              behavior: "instant",
+            });
+          }, 200);
+        }
       }
     }
-  }, [canScroll, trackVisibility]);
+  }, [trackVisibility]);
 
   return <div ref={scrollRef} className="h-px w-full" />;
 }
diff --git a/src/frontend/src/modals/IOModal/components/chatView/components/chat-view.tsx b/src/frontend/src/modals/IOModal/components/chatView/components/chat-view.tsx
index da13bbe2b..236e14dd0 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/components/chat-view.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/components/chat-view.tsx
@@ -191,20 +191,24 @@ export default function ChatView({
     if (!messagesRef.current) return;
 
     const { scrollTop, scrollHeight, clientHeight } = messagesRef.current;
-    const atBottom = scrollHeight - clientHeight <= scrollTop + 3;
+    const atBottom = scrollHeight - clientHeight <= scrollTop + 30;
 
     if (scrollDir === Direction.Up) {
       setCanScroll(false);
       setScrolledUp(true);
     } else {
-      if (atBottom || !scrolledUp) {
+      if (atBottom && !scrolledUp) {
         setCanScroll(true);
       }
       setScrolledUp(false);
     }
   };
+  const setPlaygroundScrollBehaves = useUtilityStore(
+    (state) => state.setPlaygroundScrollBehaves,
+  );
 
   useEffect(() => {
+    setPlaygroundScrollBehaves("smooth");
     setCanScroll(true);
   }, [chatHistory?.length]);