diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css index 4b8a44723..5f95b2c30 100644 --- a/packages/ui/src/components/session-turn.css +++ b/packages/ui/src/components/session-turn.css @@ -27,7 +27,8 @@ align-items: flex-start; align-self: stretch; min-width: 0; - gap: clamp(8px, calc(42px - var(--scroll-y) * 0.48), 42px); + gap: 42px; + /* gap: clamp(8px, calc(42px - var(--scroll-y) * 0.48), 42px); */ overflow-anchor: none; } @@ -59,7 +60,7 @@ } [data-slot="session-turn-message-content"] { - margin-top: -24px; + margin-top: -18px; } [data-slot="session-turn-message-title"] { diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx index 0f5a26a2a..5bf3c0bbd 100644 --- a/packages/ui/src/components/session-turn.tsx +++ b/packages/ui/src/components/session-turn.tsx @@ -57,17 +57,12 @@ export function SessionTurn( userScrolled: false, stickyHeaderHeight: 0, scrollY: 0, - autoScrolling: false, }) function handleScroll() { if (!scrollRef) return - if (state.autoScrolling) return const { scrollTop, scrollHeight, clientHeight } = scrollRef - const scrollRoom = scrollHeight - clientHeight - if (scrollRoom > 100) { - setState("scrollY", scrollTop) - } + setState("scrollY", scrollTop) const atBottom = scrollHeight - scrollTop - clientHeight < 50 if (!atBottom && working()) { setState("userScrolled", true) @@ -81,13 +76,9 @@ export function SessionTurn( } function scrollToBottom() { - if (!scrollRef || state.userScrolled || !working() || state.autoScrolling) return - setState("autoScrolling", true) + if (!scrollRef || state.userScrolled || !working()) return requestAnimationFrame(() => { scrollRef?.scrollTo({ top: scrollRef.scrollHeight, behavior: "instant" }) - requestAnimationFrame(() => { - setState("autoScrolling", false) - }) }) }