fix(chat): animate end following only during a live stream

The animated maintainScrollAtEnd also ran outside streaming, so opening
a historical session glided visibly through the whole conversation as
late row measurements corrected the end position, and an in-flight glide
could supersede explicit navigation. Corrections are instant unless the
session is actively working.

Returning to the bottom during a stream also lands on the end as of that
moment, and the list's own follow may not have re-armed after the user's
earlier gestures — the queued-send jump then fell behind the growing
reply. goToBottom now re-asserts the edge a few times (150/400/800ms)
until it holds; a new user gesture cancels the window.
This commit is contained in:
Bohdan Triapitsyn
2026-08-25 23:54:00 +03:00
parent ab370c018a
commit 2d8571c6f2
2 changed files with 33 additions and 5 deletions
@@ -1071,10 +1071,17 @@ const TimelineList = React.memo(({
// resize settles.
maintainScrollAtEnd={anchoredEndSpace || !streamingAutoFollowEnabled || isWidthResizing || endPinningReleased
? false
// Animated: with block-level reveal the content grows in
// paragraph/line steps, and the animated follow turns each
// step into a glide — reveal and scroll read as one motion.
: { animated: true, on: { dataChange: true, itemLayout: true, layout: true, footerLayout: true } }}
// Animated only while the session actively streams: there
// the block-step growth turns each correction into a glide
// and reveal + scroll read as one motion. Outside of a live
// stream — opening a historical session, late measurements —
// corrections must be instant: an animated catch-up scrolls
// visibly through the whole conversation on open, and an
// in-flight glide can supersede explicit navigation.
: {
animated: rowContext.sessionIsWorking,
on: { dataChange: true, itemLayout: true, layout: true, footerLayout: true },
}}
// Prepending older history must not move what the user is
// reading. Size restoration applies only during a width
// resize — see the observer above.
+22 -1
View File
@@ -281,6 +281,12 @@ export const useChatTimelineScroll = ({
}, [flushSave]);
// ── scroll commands ─────────────────────────────────────────────────────
const goToBottomReassertTimersRef = React.useRef<Array<ReturnType<typeof setTimeout>>>([]);
const clearGoToBottomReasserts = React.useCallback(() => {
for (const timer of goToBottomReassertTimersRef.current) clearTimeout(timer);
goToBottomReassertTimersRef.current = [];
}, []);
const goToBottom = React.useCallback((mode: 'instant' | 'smooth' = 'instant') => {
isAtEndRef.current = true;
setIsPinned(true);
@@ -291,7 +297,22 @@ export const useChatTimelineScroll = ({
clearAnchor();
hideScrollButton();
void listRef.current?.scrollToEnd({ animated: mode === 'smooth' });
}, [clearAnchor, hideScrollButton]);
// While a stream is growing the content, a single jump lands on the
// end as of that moment and the list's own follow may not have
// re-armed yet — re-assert a few times until the edge holds, then the
// library follows onward. A new user gesture invalidates the window.
clearGoToBottomReasserts();
const generation = userGenerationRef.current;
for (const delay of [150, 400, 800]) {
goToBottomReassertTimersRef.current.push(setTimeout(() => {
if (userGenerationRef.current !== generation) return;
if (modeRef.current !== 'following-end') return;
const state = listRef.current?.getState();
if (state && resolveTimelineIsAtEnd(state) === true) return;
void listRef.current?.scrollToEnd({ animated: false });
}, delay));
}
}, [clearAnchor, clearGoToBottomReasserts, hideScrollButton]);
// Sending arms the anchor. The message id is not known here (the optimistic
// row is created by the store), so the next new user message id claims it.