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