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>

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 (
+      if (trackVisibility.category === "error") {
-        playgroundScrollBehaves === "instant" ||
-        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" />;
 }

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]);