@assistant-ui/react-native 0.1.41 → 0.1.43

package/src/primitives/thread/ThreadMessages.test.tsx

@@ -1,7 +1,7 @@
 import { act, createRef } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import type { FlatList } from "react-native";
+import type { FlatList, FlatListProps } from "react-native";
 import type { ThreadMessage } from "@assistant-ui/core";
 import { ThreadMessages, ThreadMessagesFlatList } from "./ThreadMessages";
 
@@ -15,7 +15,7 @@ const h = vi.hoisted(() => ({
   itemState: { role: "user" } as { role: string },
   events: {} as Record<string, Set<() => void>>,
   flatListProps: null as Record<string, unknown> | null,
-  scrollToEnd: vi.fn(),
+  scrollToOffset: vi.fn(),
 }));
 
 vi.mock("react-native", async (importOriginal) => {
@@ -29,7 +29,7 @@ vi.mock("react-native", async (importOriginal) => {
     h.flatListProps = props;
 
     React.useImperativeHandle(ref, () => ({
-      scrollToEnd: h.scrollToEnd,
+      scrollToOffset: h.scrollToOffset,
     }));
 
     const data = (props.data as unknown[]) ?? [];
@@ -121,7 +121,7 @@ describe("ThreadMessages", () => {
     h.itemState = { role: "user" };
     h.events = {};
     h.flatListProps = null;
-    h.scrollToEnd.mockReset();
+    h.scrollToOffset.mockReset();
 
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -154,6 +154,10 @@ describe("ThreadMessages", () => {
       onContentSizeChange?: (width: number, height: number) => void;
       onLayout?: (event: unknown) => void;
       onScroll?: (event: unknown) => void;
+      onStartReached?: NonNullable<
+        FlatListProps<ThreadMessage>["onStartReached"]
+      >;
+      onStartReachedThreshold?: number;
       scrollEventThrottle?: number;
     } | null;
     if (!props) throw new Error("FlatList was not rendered");
@@ -338,6 +342,25 @@ describe("ThreadMessages", () => {
     expect(ref.current).not.toBeNull();
   });
 
+  it("anchors the visible message while content is inserted above it", async () => {
+    await mountFlatList({ children: () => null });
+
+    expect(h.flatListProps?.maintainVisibleContentPosition).toEqual({
+      minIndexForVisible: 0,
+    });
+  });
+
+  it("lets the app override the visible content anchor", async () => {
+    await mountFlatList({
+      children: () => null,
+      maintainVisibleContentPosition: { minIndexForVisible: 2 },
+    });
+
+    expect(h.flatListProps?.maintainVisibleContentPosition).toEqual({
+      minIndexForVisible: 2,
+    });
+  });
+
   it("keeps deprecated Messages off the scroll-tracking path", async () => {
     h.state.thread.messages = [{ id: "1", role: "user" }];
     await mount({ components: messageComponents });
@@ -370,7 +393,81 @@ describe("ThreadMessages", () => {
     await emit("thread.runStart");
     await emit("threads.selectionChanged");
 
-    expect(h.scrollToEnd).not.toHaveBeenCalled();
+    expect(h.scrollToOffset).not.toHaveBeenCalled();
+  });
+
+  describe("MessagesFlatList history", () => {
+    it("wires loadMore only while history can load more", async () => {
+      const loadMore = vi.fn();
+
+      await mountFlatList({
+        components: messageComponents,
+        history: { hasMore: true, isLoadingMore: false, loadMore },
+      });
+      getFlatListProps().onStartReached?.({ distanceFromStart: 0 });
+      expect(loadMore).toHaveBeenCalledOnce();
+
+      await mountFlatList({
+        components: messageComponents,
+        history: { hasMore: false, isLoadingMore: false, loadMore },
+      });
+      expect(getFlatListProps().onStartReached).toBeUndefined();
+
+      await mountFlatList({
+        components: messageComponents,
+        history: { hasMore: true, isLoadingMore: true, loadMore },
+      });
+      expect(getFlatListProps().onStartReached).toBeUndefined();
+    });
+
+    it("defaults the history threshold and preserves a caller override", async () => {
+      const history = {
+        hasMore: true,
+        isLoadingMore: false,
+        loadMore: vi.fn(),
+      };
+
+      await mountFlatList({ components: messageComponents, history });
+      expect(getFlatListProps().onStartReachedThreshold).toBe(1);
+
+      await mountFlatList({
+        components: messageComponents,
+        history,
+        onStartReachedThreshold: 0.5,
+      });
+      expect(getFlatListProps().onStartReachedThreshold).toBe(0.5);
+    });
+
+    it("runs a caller onStartReached before loading more history", async () => {
+      const calls: string[] = [];
+      const info = { distanceFromStart: 42 };
+      const onStartReached = vi.fn(() => calls.push("onStartReached"));
+
+      await mountFlatList({
+        components: messageComponents,
+        history: {
+          hasMore: true,
+          isLoadingMore: false,
+          loadMore: () => calls.push("loadMore"),
+        },
+        onStartReached,
+      });
+
+      getFlatListProps().onStartReached?.(info);
+
+      expect(onStartReached).toHaveBeenCalledWith(info);
+      expect(calls).toEqual(["onStartReached", "loadMore"]);
+    });
+
+    it("leaves start-reached props untouched without history", async () => {
+      const onStartReached = vi.fn();
+
+      await mountFlatList({ components: messageComponents, onStartReached });
+
+      const props = getFlatListProps();
+      expect(props.onStartReached).toBe(onStartReached);
+      expect(props).not.toHaveProperty("onStartReachedThreshold");
+    });
   });
 
   describe("MessagesFlatList auto-scroll", () => {
@@ -379,24 +476,30 @@ describe("ThreadMessages", () => {
 
       await mountFlatList({ components: messageComponents });
 
-      expect(h.scrollToEnd).toHaveBeenCalledWith({ animated: false });
+      expect(h.scrollToOffset).toHaveBeenCalledWith({
+        animated: false,
+        offset: 0,
+      });
     });
 
     it("scrolls to the bottom when a run starts", async () => {
       h.state.thread.messages = [{ id: "1", role: "user" }];
       await mountFlatList({ components: messageComponents });
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
 
       await emit("thread.runStart");
 
-      expect(h.scrollToEnd).toHaveBeenCalledWith({ animated: true });
+      expect(h.scrollToOffset).toHaveBeenCalledWith({
+        animated: true,
+        offset: 0,
+      });
     });
 
     it("scrolls when content grows while already at the bottom", async () => {
       h.state.thread.messages = [{ id: "1", role: "user" }];
       await mountFlatList({ components: messageComponents });
       const props = getFlatListProps();
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
 
       await act(async () => {
         props.onLayout?.({
@@ -412,7 +515,10 @@ describe("ThreadMessages", () => {
         props.onContentSizeChange?.(0, 140);
       });
 
-      expect(h.scrollToEnd).toHaveBeenCalledWith({ animated: false });
+      expect(h.scrollToOffset).toHaveBeenCalledWith({
+        animated: false,
+        offset: 40,
+      });
     });
 
     it("does not treat the first content-size event as automatic content growth", async () => {
@@ -427,7 +533,7 @@ describe("ThreadMessages", () => {
         props.onContentSizeChange?.(0, 140);
       });
 
-      expect(h.scrollToEnd).not.toHaveBeenCalled();
+      expect(h.scrollToOffset).not.toHaveBeenCalled();
     });
 
     it("lands the initialize scroll on the first content-size event", async () => {
@@ -435,35 +541,151 @@ describe("ThreadMessages", () => {
       await mountFlatList({ components: messageComponents });
       const props = getFlatListProps();
 
-      expect(h.scrollToEnd).toHaveBeenCalledTimes(1);
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(1);
 
       await act(async () => {
+        props.onLayout?.({
+          nativeEvent: { layout: { height: 100 } },
+        });
         props.onContentSizeChange?.(0, 140);
       });
 
-      expect(h.scrollToEnd).toHaveBeenCalledTimes(2);
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(2);
+      expect(h.scrollToOffset).toHaveBeenLastCalledWith({
+        animated: false,
+        offset: 40,
+      });
 
       await act(async () => {
         props.onContentSizeChange?.(0, 140);
       });
 
-      expect(h.scrollToEnd).toHaveBeenCalledTimes(2);
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(2);
+    });
+
+    it("waits for the first layout before consuming a measured initialize scroll", async () => {
+      h.state.thread.messages = [{ id: "1", role: "user" }];
+      await mountFlatList({ components: messageComponents });
+      const props = getFlatListProps();
+
+      await act(async () => {
+        props.onContentSizeChange?.(0, 140);
+      });
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(1);
+
+      await act(async () => {
+        props.onLayout?.({
+          nativeEvent: { layout: { height: 100 } },
+        });
+      });
+
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(2);
+      expect(h.scrollToOffset).toHaveBeenLastCalledWith({
+        animated: false,
+        offset: 40,
+      });
+    });
+
+    it("keeps the initialize scroll pending through a zero content measurement", async () => {
+      h.state.thread.messages = [{ id: "1", role: "user" }];
+      await mountFlatList({ components: messageComponents });
+      const props = getFlatListProps();
+
+      await act(async () => {
+        props.onLayout?.({
+          nativeEvent: { layout: { height: 100 } },
+        });
+        props.onContentSizeChange?.(0, 0);
+      });
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(1);
+
+      await act(async () => {
+        props.onContentSizeChange?.(0, 300);
+      });
+
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(2);
+      expect(h.scrollToOffset).toHaveBeenLastCalledWith({
+        animated: false,
+        offset: 200,
+      });
+    });
+
+    it("uses horizontal measurements for horizontal lists", async () => {
+      h.state.thread.messages = [{ id: "1", role: "user" }];
+      await mountFlatList({ components: messageComponents, horizontal: true });
+      const props = getFlatListProps();
+
+      await act(async () => {
+        props.onLayout?.({
+          nativeEvent: { layout: { width: 100 } },
+        });
+        props.onContentSizeChange?.(140, 0);
+      });
+
+      expect(h.scrollToOffset).toHaveBeenLastCalledWith({
+        animated: false,
+        offset: 40,
+      });
     });
 
     it("lands the thread-switch scroll on the next content-size event", async () => {
       h.state.thread.messages = [{ id: "1", role: "user" }];
       await mountFlatList({ components: messageComponents });
       const props = getFlatListProps();
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
 
       await emit("threads.selectionChanged");
-      expect(h.scrollToEnd).toHaveBeenCalledTimes(1);
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(1);
+
+      await act(async () => {
+        props.onContentSizeChange?.(0, 300);
+      });
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(1);
+
+      await act(async () => {
+        props.onLayout?.({
+          nativeEvent: { layout: { height: 100 } },
+        });
+      });
+
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(2);
+      expect(h.scrollToOffset).toHaveBeenLastCalledWith({
+        animated: false,
+        offset: 200,
+      });
+    });
+
+    it("does not consume a thread-switch scroll with the previous thread metrics", async () => {
+      h.state.thread.messages = [{ id: "1", role: "user" }];
+      await mountFlatList({ components: messageComponents });
+      const props = getFlatListProps();
+
+      await act(async () => {
+        props.onLayout?.({
+          nativeEvent: { layout: { height: 100 } },
+        });
+        props.onScroll?.({
+          nativeEvent: {
+            contentOffset: { y: 200 },
+            contentSize: { height: 300, width: 0 },
+            layoutMeasurement: { height: 100, width: 0 },
+          },
+        });
+      });
+      h.scrollToOffset.mockClear();
 
+      await emit("threads.selectionChanged");
       await act(async () => {
-        props.onContentSizeChange?.(0, 80);
+        props.onLayout?.({
+          nativeEvent: { layout: { height: 80 } },
+        });
+        props.onContentSizeChange?.(0, 260);
       });
 
-      expect(h.scrollToEnd).toHaveBeenCalledTimes(2);
+      expect(h.scrollToOffset).toHaveBeenLastCalledWith({
+        animated: false,
+        offset: 180,
+      });
     });
 
     it("keeps following through consecutive growth events without scroll echoes", async () => {
@@ -483,7 +705,7 @@ describe("ThreadMessages", () => {
           },
         });
       });
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
 
       await act(async () => {
         props.onContentSizeChange?.(0, 140);
@@ -492,14 +714,14 @@ describe("ThreadMessages", () => {
         props.onContentSizeChange?.(0, 180);
       });
 
-      expect(h.scrollToEnd).toHaveBeenCalledTimes(2);
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(2);
     });
 
     it("does not scroll when content grows after the user scrolled away", async () => {
       h.state.thread.messages = [{ id: "1", role: "user" }];
       await mountFlatList({ components: messageComponents });
       const props = getFlatListProps();
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
 
       await act(async () => {
         props.onLayout?.({
@@ -522,7 +744,7 @@ describe("ThreadMessages", () => {
         props.onContentSizeChange?.(0, 340);
       });
 
-      expect(h.scrollToEnd).not.toHaveBeenCalled();
+      expect(h.scrollToOffset).not.toHaveBeenCalled();
     });
 
     it("lands the run-start scroll once the appended message resizes content", async () => {
@@ -549,10 +771,10 @@ describe("ThreadMessages", () => {
           },
         });
       });
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
 
       await emit("thread.runStart");
-      expect(h.scrollToEnd).toHaveBeenCalledTimes(1);
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(1);
 
       await act(async () => {
         props.onScroll?.({
@@ -565,18 +787,39 @@ describe("ThreadMessages", () => {
         props.onContentSizeChange?.(0, 360);
       });
 
-      expect(h.scrollToEnd).toHaveBeenCalledTimes(2);
-      expect(h.scrollToEnd).toHaveBeenLastCalledWith({ animated: true });
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(2);
+      expect(h.scrollToOffset).toHaveBeenLastCalledWith({
+        animated: true,
+        offset: 260,
+      });
     });
 
-    it("scrolls to the bottom when switching threads", async () => {
+    it("uses the measured bottom when a thread switch does not resize content", async () => {
       h.state.thread.messages = [{ id: "1", role: "user" }];
       await mountFlatList({ components: messageComponents });
-      h.scrollToEnd.mockClear();
+      const props = getFlatListProps();
+
+      await act(async () => {
+        props.onLayout?.({
+          nativeEvent: { layout: { height: 100 } },
+        });
+        props.onScroll?.({
+          nativeEvent: {
+            contentOffset: { y: 120 },
+            contentSize: { height: 300, width: 0 },
+            layoutMeasurement: { height: 100, width: 0 },
+          },
+        });
+      });
+      h.scrollToOffset.mockClear();
 
       await emit("threads.selectionChanged");
 
-      expect(h.scrollToEnd).toHaveBeenCalledWith({ animated: false });
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(1);
+      expect(h.scrollToOffset).toHaveBeenCalledWith({
+        animated: false,
+        offset: 200,
+      });
     });
 
     it("does not rearm initialize scroll when thread-switch scroll is disabled", async () => {
@@ -585,7 +828,7 @@ describe("ThreadMessages", () => {
         components: messageComponents,
         scrollToBottomOnThreadSwitch: false,
       });
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
 
       await emit("threads.selectionChanged");
 
@@ -598,7 +841,7 @@ describe("ThreadMessages", () => {
         scrollToBottomOnThreadSwitch: false,
       });
 
-      expect(h.scrollToEnd).not.toHaveBeenCalled();
+      expect(h.scrollToOffset).not.toHaveBeenCalled();
     });
 
     it("honors opt-outs for automatic content growth and run-start scrolls", async () => {
@@ -610,7 +853,7 @@ describe("ThreadMessages", () => {
         scrollToBottomOnRunStart: false,
       });
       const props = getFlatListProps();
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
 
       await act(async () => {
         props.onLayout?.({
@@ -627,7 +870,7 @@ describe("ThreadMessages", () => {
       });
       await emit("thread.runStart");
 
-      expect(h.scrollToEnd).not.toHaveBeenCalled();
+      expect(h.scrollToOffset).not.toHaveBeenCalled();
     });
 
     it("sets a useful default scroll throttle", async () => {
@@ -655,10 +898,32 @@ describe("ThreadMessages", () => {
         });
         props.onContentSizeChange?.(0, 300);
       });
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
       return props;
     };
 
+    it("stays pinned when an anchor adjustment moves the offset with the content above it", async () => {
+      const props = await mountPinned();
+
+      await act(async () => {
+        props.onScroll?.({
+          nativeEvent: {
+            contentOffset: { y: 180 },
+            contentSize: { height: 280, width: 0 },
+            layoutMeasurement: { height: 100, width: 0 },
+          },
+        });
+      });
+      await act(async () => {
+        props.onContentSizeChange?.(0, 320);
+      });
+
+      expect(h.scrollToOffset).toHaveBeenCalledWith({
+        animated: false,
+        offset: 220,
+      });
+    });
+
     it("stays pinned when the viewport shrinks while at the bottom", async () => {
       const props = await mountPinned();
 
@@ -667,12 +932,15 @@ describe("ThreadMessages", () => {
           nativeEvent: { layout: { height: 60 } },
         });
       });
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
       await act(async () => {
         props.onContentSizeChange?.(0, 340);
       });
 
-      expect(h.scrollToEnd).toHaveBeenCalledWith({ animated: false });
+      expect(h.scrollToOffset).toHaveBeenCalledWith({
+        animated: false,
+        offset: 280,
+      });
     });
 
     it("commands a bottom scroll when the viewport shrinks while pinned", async () => {
@@ -684,22 +952,29 @@ describe("ThreadMessages", () => {
         });
       });
 
-      expect(h.scrollToEnd).toHaveBeenCalledWith({ animated: false });
+      expect(h.scrollToOffset).toHaveBeenCalledWith({
+        animated: false,
+        offset: 240,
+      });
     });
 
     it("preserves a pending animated scroll on a pinned viewport change", async () => {
       const props = await mountPinned();
 
       await emit("thread.runStart");
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
       await act(async () => {
         props.onLayout?.({
           nativeEvent: { layout: { height: 60 } },
         });
+        props.onContentSizeChange?.(0, 360);
       });
 
-      expect(h.scrollToEnd).toHaveBeenCalledTimes(1);
-      expect(h.scrollToEnd).toHaveBeenCalledWith({ animated: true });
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(2);
+      expect(h.scrollToOffset).toHaveBeenLastCalledWith({
+        animated: true,
+        offset: 300,
+      });
     });
 
     it("ignores a layout event with an unchanged viewport height", async () => {
@@ -711,13 +986,13 @@ describe("ThreadMessages", () => {
         });
       });
 
-      expect(h.scrollToEnd).not.toHaveBeenCalled();
+      expect(h.scrollToOffset).not.toHaveBeenCalled();
     });
 
     it("does not command a scroll on the first layout measurement", async () => {
       await mountFlatList({ components: messageComponents });
       getFlatListProps();
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
 
       await act(async () => {
         getFlatListProps().onLayout?.({
@@ -725,7 +1000,7 @@ describe("ThreadMessages", () => {
         });
       });
 
-      expect(h.scrollToEnd).not.toHaveBeenCalled();
+      expect(h.scrollToOffset).not.toHaveBeenCalled();
     });
 
     it("does not command a scroll on viewport change when autoScroll is off", async () => {
@@ -744,7 +1019,7 @@ describe("ThreadMessages", () => {
         });
         props.onContentSizeChange?.(0, 300);
       });
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
 
       await act(async () => {
         props.onLayout?.({
@@ -752,7 +1027,7 @@ describe("ThreadMessages", () => {
         });
       });
 
-      expect(h.scrollToEnd).not.toHaveBeenCalled();
+      expect(h.scrollToOffset).not.toHaveBeenCalled();
     });
 
     it("stays unpinned when the viewport shrinks after scrolling away", async () => {
@@ -776,7 +1051,7 @@ describe("ThreadMessages", () => {
         props.onContentSizeChange?.(0, 340);
       });
 
-      expect(h.scrollToEnd).not.toHaveBeenCalled();
+      expect(h.scrollToOffset).not.toHaveBeenCalled();
     });
 
     it("keeps the pin through a downward scroll echo after a commanded scroll", async () => {
@@ -795,7 +1070,7 @@ describe("ThreadMessages", () => {
       await act(async () => {
         props.onContentSizeChange?.(0, 320);
       });
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
       await act(async () => {
         props.onScroll?.({
           nativeEvent: {
@@ -809,14 +1084,17 @@ describe("ThreadMessages", () => {
         props.onContentSizeChange?.(0, 360);
       });
 
-      expect(h.scrollToEnd).toHaveBeenCalledWith({ animated: false });
+      expect(h.scrollToOffset).toHaveBeenCalledWith({
+        animated: false,
+        offset: 260,
+      });
     });
 
     it("unpins and cancels a pending scroll on an upward gesture echo", async () => {
       const props = await mountPinned();
 
       await emit("thread.runStart");
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
       await act(async () => {
         props.onScroll?.({
           nativeEvent: {
@@ -830,17 +1108,20 @@ describe("ThreadMessages", () => {
         props.onContentSizeChange?.(0, 360);
       });
 
-      expect(h.scrollToEnd).not.toHaveBeenCalled();
+      expect(h.scrollToOffset).not.toHaveBeenCalled();
     });
 
     it("scrolls on content growth while pinned and stays put while unpinned", async () => {
       const props = await mountPinned();
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
 
       await act(async () => {
         props.onContentSizeChange?.(0, 340);
       });
-      expect(h.scrollToEnd).toHaveBeenCalledWith({ animated: false });
+      expect(h.scrollToOffset).toHaveBeenCalledWith({
+        animated: false,
+        offset: 240,
+      });
 
       await act(async () => {
         props.onScroll?.({
@@ -851,12 +1132,12 @@ describe("ThreadMessages", () => {
           },
         });
       });
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
       await act(async () => {
         props.onContentSizeChange?.(0, 380);
       });
 
-      expect(h.scrollToEnd).not.toHaveBeenCalled();
+      expect(h.scrollToOffset).not.toHaveBeenCalled();
     });
   });
 });