fix(web): keep following the stream after scrolling back to the live edge (#6519)

Lars Nieuwenhuis committed 2 months ago

Commit e2697d61 parent ce8ca5b2 files · +70 −3Browse files

Unified · Split

2 files

apps/web/src/components/ChatView.tsx +20 −3
apps/web/src/components/chat/MessagesTimeline.test.tsx +50 −0

apps/web/src/components/ChatView.tsx+20−3

   return error instanceof Error ? error.message : "An error occurred.";
 }
+/**
+ * Drops the send-time anchored end space. That space is what holds a sent
+ * message near the top while its turn streams, and it keeps LegendList's
+ * maintainScrollAtEnd switched off for as long as it is installed — ChatView
+ * drives the streaming scrolls itself, but only in "anchoring-new-turn" mode.
+ * So every return to the live edge has to release the anchor too, otherwise the
+ * timeline settles into "following-end" with nothing following anything.
+ */
+function releaseChatTimelineAnchor<T extends { readonly messageId: MessageId | null }>(
+  current: T,
+): T {
+  return current.messageId === null ? current : { ...current, messageId: null };
+}
 function ChatViewContent(props: ChatViewProps) {
   const {
     environmentId,
     activeTimelineAnchorIndexRef.current = null;
     showScrollDebouncer.current.cancel();
     setShowScrollToBottom(false);
-    setTimelineAnchor((current) =>
+    setTimelineAnchor(releaseChatTimelineAnchor);
-      current.messageId === null ? current : { ...current, messageId: null },
-    );
     requestAnimationFrame(() => {
       void legendListRef.current?.scrollToEnd?.({ animated });
     });
       timelineScrollModeRef.current = "following-end";
       liveFollowUserScrollGenerationRef.current = anchorUserScrollGenerationRef.current;
       setTimelineLiveFollowEnabled(true);
+      // Reachable only once manual navigation has already broken follow, so
+      // the anchored turn framing is over: the user scrolled back to the live
+      // edge and expects the stream to stick to it again, exactly like the
+      // scroll-to-bottom pill.
+      setTimelineAnchor(releaseChatTimelineAnchor);
       showScrollDebouncer.current.cancel();
       setShowScrollToBottom(false);
     } else {

apps/web/src/components/chat/MessagesTimeline.test.tsx+50−0

@@ -480,6 +480,56 @@ describe("MessagesTimeline", () => { · 479 unmodified lines
480	expect(onAnchorReady).toHaveBeenCalledWith(secondEntry.message.id, 1);	480	expect(onAnchorReady).toHaveBeenCalledWith(secondEntry.message.id, 1);
481	});	481	});
482		482
		483	it("hands end-following back to the list once the send anchor is released", () => {
		484	const firstEntry = buildUserTimelineEntry("First prompt.");
		485	const secondEntry = {
		486	...buildUserTimelineEntry("Newest prompt."),
		487	id: "entry-2",
		488	message: {
		489	...buildUserTimelineEntry("Newest prompt.").message,
		490	id: MessageId.make("message-2"),
		491	},
		492	};
		493	const timelineEntries = [firstEntry, secondEntry];
		494
		495	// While the send anchor holds the end space open, ChatView owns streaming
		496	// scrolls and LegendList must not re-pin behind it.
		497	expect(
		498	renderToStaticMarkup(
		499	<MessagesTimeline
		500	{...buildProps()}
		501	anchorMessageId={secondEntry.message.id}
		502	timelineEntries={timelineEntries}
		503	/>,
		504	),
		505	).not.toContain('data-maintain-scroll-at-end="enabled"');
		506
		507	// Dropping the anchor is what actually gives end-following back, so
		508	// returning to the live edge has to release it — re-enabling live follow
		509	// alone leaves nothing pinned to the stream.
		510	expect(
		511	renderToStaticMarkup(
		512	<MessagesTimeline
		513	{...buildProps()}
		514	anchorMessageId={null}
		515	timelineEntries={timelineEntries}
		516	/>,
		517	),
		518	).toContain('data-maintain-scroll-at-end="enabled"');
		519
		520	// Reading history still wins over both.
		521	expect(
		522	renderToStaticMarkup(
		523	<MessagesTimeline
		524	{...buildProps()}
		525	anchorMessageId={null}
		526	liveFollowEnabled={false}
		527	timelineEntries={timelineEntries}
		528	/>,
		529	),
		530	).not.toContain('data-maintain-scroll-at-end="enabled"');
		531	});
		532
483	it("renders collapse controls for long user messages", () => {	533	it("renders collapse controls for long user messages", () => {
484	const markup = renderToStaticMarkup(	534	const markup = renderToStaticMarkup(
485	<MessagesTimeline	535	<MessagesTimeline