@frankieai/react 0.2.15 → 0.2.16

package/src/widget.test.tsx

@@ -261,6 +261,19 @@ describe("Markdown", () => {
     expect(screen.getByRole("link", { name: "docs" })).toHaveProperty("rel", "noopener noreferrer nofollow");
   });
 
+  it("renders *italic* but leaves a spaced asterisk and bold alone", () => {
+    render(<Markdown text="See *Key rotation* — 2 * 3 is **six**" />);
+    expect(screen.getByText("Key rotation").tagName).toBe("EM");
+    expect(screen.getByText("six").tagName).toBe("STRONG");
+    expect(screen.getByText(/2 \* 3 is/)).toBeTruthy();
+  });
+
+  it("keeps runs of asterisks literal instead of eating them as italic", () => {
+    const { container } = render(<Markdown text="Divider *** here and *x* too" />);
+    expect(container.textContent).toContain("Divider *** here");
+    expect(screen.getByText("x").tagName).toBe("EM");
+  });
+
   it("refuses to linkify a javascript: url", () => {
     render(<Markdown text="[click](javascript:alert(1))" />);
     expect(screen.queryByRole("link")).toBeNull();
@@ -297,6 +310,19 @@ describe("ChatPanel", () => {
     expect(screen.queryByText("1 skill loaded")).toBeNull();
     cleanup();
   });
+  it("opens the welcome screen at its top, not scrolled to the bottom", async () => {
+    cleanup();
+    const scrolls: number[] = [];
+    const { container } = render(<FrankieProvider publishableKey="pk_empty_fixture" config={config} fetchImpl={vi.fn()} persist={false}><ChatPanel /></FrankieProvider>);
+    const scroller = container.querySelector(".frankie-transcript") as HTMLElement;
+    Object.defineProperty(scroller, "scrollHeight", { configurable: true, get: () => 900 });
+    Object.defineProperty(scroller, "scrollTop", { configurable: true, get: () => scrolls.at(-1) ?? 0, set: (value: number) => { scrolls.push(value); } });
+    // A re-render with still no messages (e.g. config settling) must not jump to the bottom.
+    fireEvent.scroll(scroller);
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(scrolls.every((value) => value === 0)).toBe(true);
+    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) =>
@@ -429,6 +455,32 @@ describe("ChatPanel", () => {
     vi.restoreAllMocks();
   });
 
+  it("follows the host when it switches between light and dark, mode included", async () => {
+    document.body.innerHTML = '<button data-stub="host-accent">Buy</button>';
+    let dark = false;
+    const real = window.getComputedStyle.bind(window);
+    vi.spyOn(window, "getComputedStyle").mockImplementation((el: Element) => {
+      if (el === document.body) return (dark ? { backgroundColor: "rgb(15, 15, 14)", color: "rgb(243, 242, 238)" } : { backgroundColor: "rgb(250, 250, 250)", color: "rgb(20, 20, 20)" }) as CSSStyleDeclaration;
+      if ((el as HTMLElement).dataset?.stub === "host-accent") return { backgroundColor: "rgb(16, 185, 129)", color: "rgb(255, 255, 255)" } as CSSStyleDeclaration;
+      return real(el);
+    });
+    const { container } = render(
+      <FrankieProvider baseUrl="https://agent.acme.com" publishableKey="pk_1" config={{ ...config, theme: { mode: "light", source: "inherit" } }}>
+        <ChatPanel />
+      </FrankieProvider>,
+    );
+    const root = () => container.querySelector(".frankie-root") as HTMLElement;
+    await waitFor(() => expect(root().style.getPropertyValue("--frankie-background")).toBe("rgb(250, 250, 250)"));
+    expect(root().classList.contains("dark")).toBe(false);
+    // The site flips its own theme (as Frankie's dashboard does with data-theme).
+    dark = true;
+    document.documentElement.dataset.theme = "dark";
+    await waitFor(() => expect(root().style.getPropertyValue("--frankie-background")).toBe("rgb(15, 15, 14)"));
+    expect(root().classList.contains("dark")).toBe(true); // the configured "light" doesn't win over the page
+    delete document.documentElement.dataset.theme;
+    vi.restoreAllMocks();
+  });
+
   it("keeps the configured fallback when the host page can't be read reliably", async () => {
     vi.spyOn(window, "getComputedStyle").mockImplementation(() => ({ backgroundColor: "rgba(0, 0, 0, 0)", color: "rgba(0, 0, 0, 0)" }) as CSSStyleDeclaration);
     const { container } = render(
@@ -467,6 +519,45 @@ describe("FrankieChatPage", () => {
     cleanup();
   });
 
+  it("keeps the conversation list on screen while switching chats, and fetches the config once", async () => {
+    cleanup();
+    window.localStorage.clear();
+    const signedIn = { ...config, allowAnonymous: false };
+    const list = [
+      { id: "conv-a", title: "Hi, can you tell me what things I can do", createdAt: 1, updatedAt: Date.now() },
+      { id: "conv-b", title: "Hi", createdAt: 1, updatedAt: Date.now() - 3 * 86400000 },
+    ];
+    const session = (id: string) => ({ sessionId: id, sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: false } });
+    const calls: string[] = [];
+    const fetchImpl = vi.fn(async (url: string | URL | Request, init?: RequestInit) => {
+      const href = String(url);
+      calls.push(`${init?.method ?? "GET"} ${new URL(href).pathname}`);
+      if (href.endsWith("/v1/config")) return Response.json(signedIn);
+      if (href.endsWith("/v1/session")) return Response.json(session("s"));
+      if (href.endsWith("/v1/conversations")) return Response.json({ conversations: list });
+      if (/\/v1\/conversations\/[^/]+\/resume$/.test(href)) return Response.json({ session: session("r"), messages: [], title: "Hi" });
+      if (/\/v1\/conversations\/[^/]+$/.test(href)) return Response.json({ ok: true });
+      return new Response(sseStream([{ type: "turn_end", stopReason: "end_turn" }]));
+    });
+    const { container } = render(<FrankieChatPage publishableKey="pk_page_switch" conversationId="conv-a" fetchImpl={fetchImpl} persist={false} getUserToken={async () => "h.eyJzdWIiOiJvbmUifQ.s"} />);
+    const aside = () => container.querySelector(".frankie-history-desktop") as HTMLElement;
+    const items = () => within(aside()).queryAllByRole("button").filter((button) => button.textContent?.startsWith("Hi"));
+    await waitFor(() => expect(items()).toHaveLength(2));
+
+    // Click the other conversation. The list must still be there in the very
+    // next render — it used to empty and show "Loading history…" because the
+    // sidebar remounted with the conversation — and the page must not fetch
+    // the workspace config again.
+    const other = () => items().find((button) => button.querySelector("span")?.textContent === "Hi")!;
+    fireEvent.click(other());
+    expect(items()).toHaveLength(2);
+    expect(within(aside()).queryByText("Loading history…")).toBeNull();
+    await waitFor(() => expect(other().getAttribute("aria-current")).toBe("page"));
+    expect(items()).toHaveLength(2);
+    expect(calls.filter((call) => call.endsWith("/v1/config"))).toHaveLength(1);
+    cleanup();
+  });
+
   it("starts collapsed when a prior visit left the sidebar collapsed", async () => {
     cleanup();
     window.localStorage.setItem("frankie.history-collapsed", "1");