From b4014e5baabfa0a404464cf71c153c8dbbe7ac65 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Tue, 16 Dec 2025 14:39:45 -0600
Subject: [PATCH] fix: auto-scroll

---
 packages/ui/src/components/session-turn.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx
index 213d72160..14e4055ca 100644
--- a/packages/ui/src/components/session-turn.tsx
+++ b/packages/ui/src/components/session-turn.tsx
@@ -75,6 +75,7 @@ export function SessionTurn(
 
   let scrollRef: HTMLDivElement | undefined
   const [state, setState] = createStore({
+    contentRef: undefined as HTMLDivElement | undefined,
     stickyTitleRef: undefined as HTMLDivElement | undefined,
     stickyTriggerRef: undefined as HTMLDivElement | undefined,
     userScrolled: false,
@@ -101,10 +102,18 @@ export function SessionTurn(
   function scrollToBottom() {
     if (!scrollRef || state.userScrolled || !working()) return
     requestAnimationFrame(() => {
-      scrollRef?.scrollTo({ top: scrollRef.scrollHeight, behavior: "instant" })
+      scrollRef?.scrollTo({ top: scrollRef.scrollHeight, behavior: "smooth" })
     })
   }
 
+  createResizeObserver(
+    () => state.contentRef,
+    ({ height }) => {
+      console.log(height)
+      scrollToBottom()
+    },
+  )
+
   createEffect(() => {
     if (!working()) {
       setState("userScrolled", false)
@@ -232,11 +241,6 @@ export function SessionTurn(
                 })
               }
 
-              createEffect(() => {
-                lastPart()
-                scrollToBottom()
-              })
-
               const [store, setStore] = createStore({
                 status: rawStatus(),
                 stepsExpanded: props.stepsExpanded ?? working(),
@@ -296,6 +300,7 @@ export function SessionTurn(
 
               return (
                 <div
+                  ref={(el) => setState("contentRef", el)}
                   data-message={message().id}
                   data-slot="session-turn-message-container"
                   class={props.classes?.container}