@frankieai/react 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frankieai/react",
-  "version": "0.2.5",
+  "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/components/chat/FrankieChatPage.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
-import { History, Menu, Plus, Settings, X } from "lucide-react";
+import { ChevronsLeft, ChevronsRight, History, Menu, Plus, Settings, X } from "lucide-react";
 import type { FrankieProviderProps } from "../../hooks/FrankieProvider.jsx";
 import { FrankieProvider, useFrankie, useFrankieTheme } from "../../hooks/FrankieProvider.jsx";
 import { useFrankieChat } from "../../hooks/useFrankieChat.js";
@@ -39,6 +39,10 @@ function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...pa
   const [historyError, setHistoryError] = useState("");
   const [historyLoading, setHistoryLoading] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [collapsed, setCollapsed] = useState(() => {
+    try { return window.localStorage.getItem("frankie.history-collapsed") === "1"; }
+    catch { return false; }
+  });
   const [query, setQuery] = useState("");
   const dialog = useRef<HTMLDialogElement>(null);
   const menu = useRef<HTMLButtonElement>(null);
@@ -61,6 +65,10 @@ function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...pa
     finally { if (version === requestVersion.current) setHistoryLoading(false); }
   }, [client, showHistory, config?.allowAnonymous]);
   useEffect(() => { if (!busy) void refresh(); return () => { requestVersion.current++; }; }, [refresh, busy]);
+  useEffect(() => {
+    try { window.localStorage.setItem("frankie.history-collapsed", collapsed ? "1" : "0"); }
+    catch { /* storage unavailable */ }
+  }, [collapsed]);
   useEffect(() => {
     const node = dialog.current;
     if (drawerOpen) { node?.showModal?.(); }
@@ -77,7 +85,10 @@ function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...pa
     {navigation ? <div className="frankie-host-navigation">{navigation}</div> : null}
   </>;
   return <div className={"frankie-page-shell" + (resolveMode(theme?.mode) === "dark" ? " dark" : "")} style={themeToCssVars(theme)}>
-    {showHistory ? <aside className="frankie-history-desktop">{history}</aside> : null}
+    {showHistory ? <aside className={"frankie-history-desktop" + (collapsed ? " frankie-history-collapsed" : "")}>
+      <button type="button" className="frankie-history-toggle" aria-label={collapsed ? "Expand conversations" : "Collapse conversations"} aria-expanded={!collapsed} onClick={() => setCollapsed(value => !value)}>{collapsed ? <ChevronsRight size={16} /> : <ChevronsLeft size={16} />}</button>
+      {collapsed ? null : history}
+    </aside> : null}
     <div className="frankie-page-main">
       <header className="frankie-page-header"><div>{showHistory ? <button type="button" className="frankie-mobile-only" ref={menu} aria-label="Open conversations" aria-haspopup="dialog" aria-expanded={drawerOpen} onClick={() => setDrawerOpen(true)}><Menu size={20} /></button> : null}<strong className="frankie-thread-title">{conversations.find(item => item.id === currentId)?.title ?? messages.find(message => message.role === "user")?.text ?? "New chat"}</strong></div><div>
         <button type="button" disabled={busy} onClick={onNew} aria-label="Start a new conversation"><Plus size={16} /><span>New chat</span></button>

package/src/styles/frankie.css

@@ -47,7 +47,11 @@
 @layer components {
   .frankie-page-shell { display:flex; flex:1; min-height:0; height:100%; background:var(--frankie-background); color:var(--frankie-foreground); }
   .frankie-page-main { display:flex; flex:1; min-width:0; min-height:0; flex-direction:column; }
-  .frankie-history-desktop { width:260px; flex-shrink:0; display:flex; flex-direction:column; gap:16px; padding:20px 14px; border-right:1px solid var(--frankie-border); background:var(--frankie-secondary); overflow:auto; }
+  .frankie-history-desktop { width:260px; flex-shrink:0; display:flex; flex-direction:column; gap:16px; padding:20px 14px; border-right:1px solid var(--frankie-border); background:var(--frankie-secondary); overflow:auto; transition:width .16s ease, padding .16s ease; }
+  .frankie-history-toggle { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:32px; height:32px; border:1px solid var(--frankie-border); border-radius:8px; background:var(--frankie-background); color:var(--frankie-muted-foreground); cursor:pointer; align-self:flex-end; }
+  .frankie-history-toggle:hover { color:var(--frankie-foreground); }
+  .frankie-history-collapsed { width:56px; padding:20px 8px; overflow:visible; }
+  .frankie-history-collapsed .frankie-history-toggle { align-self:center; }
   .frankie-history-heading { display:flex; align-items:center; justify-content:space-between; font-size:14px; }
   .frankie-new-chat { display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--frankie-border); border-radius:10px; background:var(--frankie-background); min-height:44px; font-weight:600; cursor:pointer; }
   .frankie-history-search > span { display:block; font-size:12px; color:var(--frankie-muted-foreground); margin-bottom:6px; }
@@ -381,6 +385,7 @@
 .frankie-root.frankie-chat-panel-fill .frankie-composer button[aria-label="Send"],.frankie-root.frankie-chat-panel-fill .frankie-composer button[aria-label="Stop"] { margin-left:auto; width:42px; height:42px; border-radius:50%; background:var(--frankie-primary); color:var(--frankie-primary-foreground); border:0; }
 .frankie-root.frankie-chat-panel-fill .frankie-composer button[aria-label="Attach files"] { width:42px; height:42px; border-radius:50%; }
 .frankie-root .frankie-history-desktop { width:290px; background:var(--frankie-background); padding:20px 12px; }
+.frankie-root .frankie-history-collapsed { width:56px; padding:20px 8px; }
 .frankie-root .frankie-new-chat { justify-content:flex-start; border:0; background:transparent; padding:8px 12px; font-size:15px; }
 .frankie-root .frankie-history-heading { font-size:12px; font-weight:400; color:var(--frankie-muted-foreground); padding:0 12px; }
 .frankie-root .frankie-history-list button { min-height:44px; padding:10px 12px; }

package/src/widget.test.tsx

@@ -1,8 +1,9 @@
-import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { FrankieServerEvent, PublicWidgetConfig } from "@frankieai/core";
 import { FrankieProvider } from "./hooks/FrankieProvider.jsx";
 import { ChatPanel } from "./components/chat/ChatPanel.js";
+import { FrankieChatPage } from "./components/chat/FrankieChatPage.js";
 import { Markdown } from "./components/chat/Markdown.js";
 import { FrankieClient, readEventStream } from "./lib/client.js";
 import { applyEvent, newAssistantMessage } from "./lib/messages.js";
@@ -226,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;
@@ -282,3 +317,35 @@ describe("ChatPanel", () => {
     expect(root.classList.contains("dark")).toBe(true);
   });
 });
+
+describe("FrankieChatPage", () => {
+  it("collapses and expands the desktop conversations sidebar, remembering the choice", async () => {
+    cleanup();
+    window.localStorage.clear();
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => String(url).endsWith("/v1/session") ? Response.json({ sessionId: "page", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: true } }) : new Response(sseStream([{ type: "turn_end", stopReason: "end_turn" }])));
+    const { container } = render(<FrankieChatPage publishableKey="pk_page_fixture" config={config} fetchImpl={fetchImpl} persist={false} />);
+    const aside = () => container.querySelector(".frankie-history-desktop") as HTMLElement;
+    await waitFor(() => expect(within(aside()).getByText("Conversations")).toBeTruthy());
+    fireEvent.click(within(aside()).getByRole("button", { name: "Collapse conversations" }));
+    expect(within(aside()).queryByText("Conversations")).toBeNull();
+    expect(aside().classList.contains("frankie-history-collapsed")).toBe(true);
+    expect(window.localStorage.getItem("frankie.history-collapsed")).toBe("1");
+    fireEvent.click(within(aside()).getByRole("button", { name: "Expand conversations" }));
+    expect(within(aside()).getByText("Conversations")).toBeTruthy();
+    expect(aside().classList.contains("frankie-history-collapsed")).toBe(false);
+    expect(window.localStorage.getItem("frankie.history-collapsed")).toBe("0");
+    cleanup();
+  });
+
+  it("starts collapsed when a prior visit left the sidebar collapsed", async () => {
+    cleanup();
+    window.localStorage.setItem("frankie.history-collapsed", "1");
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => String(url).endsWith("/v1/session") ? Response.json({ sessionId: "page-2", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: true } }) : new Response(sseStream([{ type: "turn_end", stopReason: "end_turn" }])));
+    const { container } = render(<FrankieChatPage publishableKey="pk_page_fixture_2" config={config} fetchImpl={fetchImpl} persist={false} />);
+    const aside = () => container.querySelector(".frankie-history-desktop") as HTMLElement;
+    await waitFor(() => expect(within(aside()).getByRole("button", { name: "Expand conversations" })).toBeTruthy());
+    expect(within(aside()).queryByText("Conversations")).toBeNull();
+    window.localStorage.clear();
+    cleanup();
+  });
+});