fix: auto-scroll

1 files 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}