fix(web): bound older-history auto-loading

Julius Marminge committed 3 months ago

Commit e94ab701 parent ef388d84 files · +124 −7Browse files

Unified · Split

4 files

apps/web/src/components/chat/MessagesTimeline.logic.test.ts +60 −0
apps/web/src/components/chat/MessagesTimeline.logic.ts +36 −0
apps/web/src/components/chat/MessagesTimeline.tsx +25 −6
packages/client-runtime/src/state/olderThreadActivities.ts +3 −1

apps/web/src/components/chat/MessagesTimeline.logic.test.ts+60−0

@@ -5,8 +5,68 @@ import { · 4 unmodified lines
5	deriveMessagesTimelineRows,	5	deriveMessagesTimelineRows,
6	normalizeCompactToolLabel,	6	normalizeCompactToolLabel,
7	resolveAssistantMessageCopyState,	7	resolveAssistantMessageCopyState,
		8	resolveOlderHistoryAutoLoad,
8	} from "./MessagesTimeline.logic";	9	} from "./MessagesTimeline.logic";
9		10
		11	describe("resolveOlderHistoryAutoLoad", () => {
		12	it("dispatches only once while a failed or successful load leaves the viewport at the top", () => {
		13	const first = resolveOlderHistoryAutoLoad({
		14	isAtStart: true,
		15	hasMoreOlder: true,
		16	loadingOlder: false,
		17	requestedAtStart: false,
		18	});
		19	expect(first).toEqual({ requestedAtStart: true, shouldLoad: true });
		20
		21	expect(
		22	resolveOlderHistoryAutoLoad({
		23	isAtStart: true,
		24	hasMoreOlder: true,
		25	loadingOlder: false,
		26	requestedAtStart: first.requestedAtStart,
		27	}),
		28	).toEqual({ requestedAtStart: true, shouldLoad: false });
		29	expect(
		30	resolveOlderHistoryAutoLoad({
		31	isAtStart: true,
		32	hasMoreOlder: true,
		33	loadingOlder: true,
		34	requestedAtStart: first.requestedAtStart,
		35	}),
		36	).toEqual({ requestedAtStart: true, shouldLoad: false });
		37	});
		38
		39	it("rearms automatic loading only after leaving the top", () => {
		40	const away = resolveOlderHistoryAutoLoad({
		41	isAtStart: false,
		42	hasMoreOlder: true,
		43	loadingOlder: false,
		44	requestedAtStart: true,
		45	});
		46	expect(away).toEqual({ requestedAtStart: false, shouldLoad: false });
		47
		48	expect(
		49	resolveOlderHistoryAutoLoad({
		50	isAtStart: true,
		51	hasMoreOlder: true,
		52	loadingOlder: false,
		53	requestedAtStart: away.requestedAtStart,
		54	}),
		55	).toEqual({ requestedAtStart: true, shouldLoad: true });
		56	});
		57
		58	it("does not reset the latch before list state is available", () => {
		59	expect(
		60	resolveOlderHistoryAutoLoad({
		61	isAtStart: undefined,
		62	hasMoreOlder: true,
		63	loadingOlder: false,
		64	requestedAtStart: true,
		65	}),
		66	).toEqual({ requestedAtStart: true, shouldLoad: false });
		67	});
		68	});
		69
10	describe("computeMessageDurationStart", () => {	70	describe("computeMessageDurationStart", () => {
11	it("returns message createdAt when there is no preceding user message", () => {	71	it("returns message createdAt when there is no preceding user message", () => {
12	const result = computeMessageDurationStart([	72	const result = computeMessageDurationStart([

apps/web/src/components/chat/MessagesTimeline.logic.ts+36−0

@@ -21,6 +21,42 @@ export interface TimelineEndState { · 20 unmodified lines
21	readonly isNearEnd?: boolean;	21	readonly isNearEnd?: boolean;
22	}	22	}
23		23
		24	export interface OlderHistoryAutoLoadInput {
		25	readonly isAtStart: boolean \| undefined;
		26	readonly hasMoreOlder: boolean;
		27	readonly loadingOlder: boolean;
		28	readonly requestedAtStart: boolean;
		29	}
		30
		31	export interface OlderHistoryAutoLoadResult {
		32	readonly requestedAtStart: boolean;
		33	readonly shouldLoad: boolean;
		34	}
		35
		36	/**
		37	* Permit at most one automatic older-history request per visit to the top.
		38	* Loading completion and prepended rows both retrigger timeline measurements;
		39	* neither should recursively request another page while the viewport remains
		40	* pinned at the start. Leaving the top rearms automatic loading, while the
		41	* explicit header control remains available for an immediate retry.
		42	*/
		43	export function resolveOlderHistoryAutoLoad(
		44	input: OlderHistoryAutoLoadInput,
		45	): OlderHistoryAutoLoadResult {
		46	if (input.isAtStart === false) {
		47	return { requestedAtStart: false, shouldLoad: false };
		48	}
		49	if (
		50	input.isAtStart !== true \|\|
		51	input.requestedAtStart \|\|
		52	!input.hasMoreOlder \|\|
		53	input.loadingOlder
		54	) {
		55	return { requestedAtStart: input.requestedAtStart, shouldLoad: false };
		56	}
		57	return { requestedAtStart: true, shouldLoad: true };
		58	}
		59
24	export function resolveTimelineIsAtEnd(state: TimelineEndState \| undefined): boolean \| undefined {	60	export function resolveTimelineIsAtEnd(state: TimelineEndState \| undefined): boolean \| undefined {
25	return state?.isNearEnd ?? state?.isAtEnd;	61	return state?.isNearEnd ?? state?.isAtEnd;
26	}	62	}

apps/web/src/components/chat/MessagesTimeline.tsx+25−6

   deriveMessagesTimelineRows,
   normalizeCompactToolLabel,
   resolveAssistantMessageCopyState,
+  resolveOlderHistoryAutoLoad,
   resolveTimelineIsAtEnd,
   resolveTimelineMinimapHasPersistentGutter,
   resolveTimelineMinimapHeightStyle,
   );
   const [minimapHasPersistentGutter, setMinimapHasPersistentGutter] = useState(false);
   const [minimapHitStripWidth, setMinimapHitStripWidth] = useState(0);
+  const olderHistoryRequestedAtStartRef = useRef(false);
+  useEffect(() => {
+    olderHistoryRequestedAtStartRef.current = false;
+  }, [routeThreadKey]);
+  const requestOlderHistoryAtStart = useCallback(() => {
+    olderHistoryRequestedAtStartRef.current = true;
+    onLoadOlder?.();
+  }, [onLoadOlder]);
   const handleAnchorReady = useCallback(
     (info: { anchorIndex: number | undefined }) => {
       if (anchorMessageId !== null && info.anchorIndex !== undefined) {
     if (isAtEnd !== undefined) {
       onIsAtEndChange(isAtEnd);
     }
-    // Reaching the top lazy-loads older history; maintainVisibleContentPosition
+    // Reaching the top lazy-loads one older page. Measurements rerun when the
-    // (set on the list) keeps the viewport anchored when rows prepend.
+    // request settles and when rows prepend, so keep the visit latched until
-    if (state?.isAtStart && hasMoreOlder && !loadingOlder) {
+    // the user leaves the top; otherwise failures retry forever and successful
-      onLoadOlder?.();
+    // pages chain-load the whole history back into memory.
+    const olderHistoryAutoLoad = resolveOlderHistoryAutoLoad({
+      isAtStart: state?.isAtStart,
+      hasMoreOlder: hasMoreOlder && onLoadOlder !== undefined,
+      loadingOlder,
+      requestedAtStart: olderHistoryRequestedAtStartRef.current,
+    });
+    olderHistoryRequestedAtStartRef.current = olderHistoryAutoLoad.requestedAtStart;
+    if (olderHistoryAutoLoad.shouldLoad) {
+      requestOlderHistoryAtStart();
     }
     if (!state || minimapItems.length === 0) {
       return;
     hasMoreOlder,
     loadingOlder,
     onLoadOlder,
+    requestOlderHistoryAtStart,
   ]);
   useEffect(() => {
       return (
         <button
           type="button"
-          onClick={onLoadOlder}
+          onClick={requestOlderHistoryAtStart}
           className="flex w-full cursor-pointer items-center justify-center py-2 text-xs text-muted-foreground transition-colors hover:text-foreground"
         >
           Load older history
       );
     }
     return TIMELINE_LIST_HEADER;
-  }, [loadingOlder, hasMoreOlder, onLoadOlder]);
+  }, [loadingOlder, hasMoreOlder, requestOlderHistoryAtStart]);
   const sharedState = useMemo<TimelineRowSharedState>(
     () => ({

packages/client-runtime/src/state/olderThreadActivities.ts+3−1

   // Latest merged set, read inside the async load handler so dedup runs
   // against current state, not the snapshot captured at dispatch time.
   const mergedActivitiesRef = useRef(mergedActivities);
-  mergedActivitiesRef.current = mergedActivities;
+  useLayoutEffect(() => {
+    mergedActivitiesRef.current = mergedActivities;
+  }, [mergedActivities]);
   // Before any page is loaded the server flag is authoritative; afterwards
   // the latest page's `hasMore` is.