@frankieai/react 0.2.6 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frankieai/react",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Embeddable, themeable chat widget for the Frankie onboarding agent — shadcn/ui components, works with or without Tailwind in the host app.",
   "license": "MIT",
   "type": "module",

package/src/components/chat/ChatPanel.tsx

@@ -52,17 +52,35 @@ export function ChatPanel({
   const theme = useFrankieTheme();
   const { messages, busy, restoring, error, send, stop, reset } = useFrankieChat();
   const scrollRef = useRef<HTMLDivElement>(null);
+  // Tracks whether the reader was at the bottom just before this render, not
+  // where the bottom ends up after it. Measuring post-render (against the
+  // already-grown scrollHeight) breaks as soon as one update — a sent message
+  // plus the reply's opening burst of text, say — adds more than the near-
+  // bottom threshold in a single paint: the check then reads "scrolled away"
+  // even though the reader never touched the scrollbar, and every later
+  // delta stops following. A live scroll listener captures the real, current
+  // position instead of re-deriving a stale one from updated content.
+  const atBottomRef = useRef(true);
 
   const features = config?.features;
   const pickerModels = features?.modelPicker.enabled ? features.modelPicker.models : [];
   const [model, setModel] = useState<string | undefined>(undefined);
 
-  // Follow the stream, but only while the reader is already near the bottom.
   useEffect(() => {
     const node = scrollRef.current;
     if (!node) return;
-    const distanceFromBottom = node.scrollHeight - node.scrollTop - node.clientHeight;
-    if (distanceFromBottom < 160) node.scrollTop = node.scrollHeight;
+    const onScroll = () => {
+      atBottomRef.current = node.scrollHeight - node.scrollTop - node.clientHeight < 160;
+    };
+    node.addEventListener("scroll", onScroll, { passive: true });
+    return () => node.removeEventListener("scroll", onScroll);
+  }, []);
+
+  // Follow the stream, but only while the reader is already near the bottom.
+  useEffect(() => {
+    const node = scrollRef.current;
+    if (!node || !atBottomRef.current) return;
+    node.scrollTop = node.scrollHeight;
   }, [messages]);
 
   const name = config?.branding.name ?? "Assistant";

package/src/widget.test.tsx

@@ -227,6 +227,40 @@ describe("ChatPanel", () => {
     expect(screen.queryByText("1 skill loaded")).toBeNull();
     cleanup();
   });
+  it("keeps following new messages even when one update grows the transcript past the near-bottom threshold", async () => {
+    cleanup();
+    const fetchImpl = vi.fn(async (url: string | URL | Request) =>
+      String(url).endsWith("/v1/session")
+        ? Response.json({ sessionId: "scroll", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: true } })
+        : new Response(sseStream([{ type: "text_delta", text: "A substantially longer reply than the one before it, to grow the transcript by more than the near-bottom threshold in a single update." }, { type: "turn_end", stopReason: "end_turn" }])),
+    );
+    const { container } = render(<FrankieProvider publishableKey="pk_scroll_fixture" config={config} fetchImpl={fetchImpl} persist={false}><ChatPanel fill /></FrankieProvider>);
+    const scroller = container.querySelector(".frankie-transcript") as HTMLElement;
+    let scrollTop = 0;
+    // jsdom has no layout engine, so scrollHeight/clientHeight are always 0.
+    // Tie scrollHeight to the actual rendered text so it grows the way a real
+    // browser's would as messages stream in, without hand-stepping it.
+    Object.defineProperty(scroller, "clientHeight", { configurable: true, get: () => 400 });
+    Object.defineProperty(scroller, "scrollHeight", { configurable: true, get: () => (scroller.textContent?.length ?? 0) * 50 });
+    Object.defineProperty(scroller, "scrollTop", { configurable: true, get: () => scrollTop, set: (value: number) => { scrollTop = value; } });
+
+    await waitFor(() => expect((screen.getByLabelText("Message") as HTMLTextAreaElement).disabled).toBe(false));
+    fireEvent.change(screen.getByLabelText("Message"), { target: { value: "First question" } });
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    await waitFor(() => expect(scrollTop).toBe(scroller.scrollHeight));
+
+    // The reader never touched the scrollbar between turns — they were left
+    // exactly at the bottom by the first turn. A second turn whose reply
+    // alone adds far more than 160px of content in one commit must still be
+    // followed: recomputing "distance from bottom" from the post-update DOM
+    // (the pre-fix approach) misreads that jump as the reader having
+    // scrolled away, and stops following for the rest of the turn.
+    fireEvent.change(screen.getByLabelText("Message"), { target: { value: "Second question" } });
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    await screen.findByText(/A substantially longer reply/);
+    await waitFor(() => expect(scrollTop).toBe(scroller.scrollHeight));
+    cleanup();
+  });
   it("refreshes the context count and revisions from each server turn", async () => {
     cleanup();
     let turn = 0;