mirror of
https://github.com/coder/coder.git
synced 2026-09-22 21:22:17 +08:00
Michael Suchacz
be5e080de6
## Summary Stabilizes the /agents chat viewport so users can read older messages without being yanked to the bottom when new content arrives. ## Architecture Replaces the implicit scroll-follow behavior with **ResizeObserver-driven scroll anchoring**: - **`autoScrollRef`** is the single source of truth. User scrolling away from bottom turns it off; scrolling back near bottom or clicking the button turns it back on. - A **content ResizeObserver** on an inner wrapper detects transcript growth. When auto-scroll is on, it re-pins to bottom via double-RAF (waiting for React commit + layout to settle). When off, it compensates `scrollTop` by the height delta to preserve the reading position. Sign-aware for both Chrome-style negative and Firefox-style positive `flex-col-reverse` scrollTop conventions. - Compensation is **skipped during pagination** (older messages prepend into the overflow direction; the browser preserves scrollTop) and **during reflow** from width changes. - A **container ResizeObserver** re-pins to bottom after viewport resizes (composer growth, panel changes) when auto-scroll is on. - **`isRestoringScrollRef`** guards against feedback loops from programmatic scroll writes. The smooth-scroll guard stays active until the scroll handler detects arrival at bottom. ## Files changed - **AgentDetailView.tsx**: Rewrote `ScrollAnchoredContainer` with the new approach. - **AgentDetailView.stories.tsx**: Refactored `ScrollToBottomButton` story scroll helpers into shared utilities. ## Behavior - **At bottom + new content**: stays pinned, button hidden. - **Scrolled up + new content**: reading position preserved, no jump. - **Viewport resize while pinned**: re-pins to bottom. - Scroll-to-bottom button and smooth scroll still work.