@assistant-ui/react-native 0.1.41 → 0.1.42

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

@@ -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);
@@ -338,6 +338,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 +389,7 @@ describe("ThreadMessages", () => {
     await emit("thread.runStart");
     await emit("threads.selectionChanged");
 
-    expect(h.scrollToEnd).not.toHaveBeenCalled();
+    expect(h.scrollToOffset).not.toHaveBeenCalled();
   });
 
   describe("MessagesFlatList auto-scroll", () => {
@@ -379,24 +398,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 +437,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 +455,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 +463,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.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);
 
-      expect(h.scrollToEnd).toHaveBeenCalledTimes(2);
+      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, 80);
+        props.onContentSizeChange?.(0, 300);
       });
+      expect(h.scrollToOffset).toHaveBeenCalledTimes(1);
 
-      expect(h.scrollToEnd).toHaveBeenCalledTimes(2);
+      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.onLayout?.({
+          nativeEvent: { layout: { height: 80 } },
+        });
+        props.onContentSizeChange?.(0, 260);
+      });
+
+      expect(h.scrollToOffset).toHaveBeenLastCalledWith({
+        animated: false,
+        offset: 180,
+      });
     });
 
     it("keeps following through consecutive growth events without scroll echoes", async () => {
@@ -483,7 +627,7 @@ describe("ThreadMessages", () => {
           },
         });
       });
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
 
       await act(async () => {
         props.onContentSizeChange?.(0, 140);
@@ -492,14 +636,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 +666,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 +693,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 +709,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 +750,7 @@ describe("ThreadMessages", () => {
         components: messageComponents,
         scrollToBottomOnThreadSwitch: false,
       });
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
 
       await emit("threads.selectionChanged");
 
@@ -598,7 +763,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 +775,7 @@ describe("ThreadMessages", () => {
         scrollToBottomOnRunStart: false,
       });
       const props = getFlatListProps();
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
 
       await act(async () => {
         props.onLayout?.({
@@ -627,7 +792,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 +820,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 +854,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 +874,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 +908,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 +922,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 +941,7 @@ describe("ThreadMessages", () => {
         });
         props.onContentSizeChange?.(0, 300);
       });
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
 
       await act(async () => {
         props.onLayout?.({
@@ -752,7 +949,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 +973,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 +992,7 @@ describe("ThreadMessages", () => {
       await act(async () => {
         props.onContentSizeChange?.(0, 320);
       });
-      h.scrollToEnd.mockClear();
+      h.scrollToOffset.mockClear();
       await act(async () => {
         props.onScroll?.({
           nativeEvent: {
@@ -809,14 +1006,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 +1030,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 +1054,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();
     });
   });
 });