@frankieai/react 0.2.8 → 0.2.10

package/src/widget.test.tsx

@@ -5,6 +5,7 @@ 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 { sessionIdentity } from "./lib/identity.js";
 import { FrankieClient, readEventStream } from "./lib/client.js";
 import { applyEvent, newAssistantMessage } from "./lib/messages.js";
 import { themeToCssVars } from "./lib/theme.js";
@@ -157,6 +158,75 @@ describe("FrankieClient", () => {
     expect(headers["x-frankie-key"]).toBe("pk_1");
   });
 
+  /** A JWT with the given claims; the signature is irrelevant to the client. */
+  const jwt = (claims: Record<string, unknown>) =>
+    `h.${Buffer.from(JSON.stringify(claims)).toString("base64url")}.sig`;
+
+  it("keeps the same session when the same user's token is re-minted between turns", async () => {
+    // Hosts mint with setIssuedAt(), so every getUserToken() call returns a
+    // different string for the same person. That must not start a new,
+    // empty conversation — the agent would never see the previous turn.
+    let iat = 1_700_000_000;
+    const getUserToken = () => jwt({ sub: "user_42", iat: iat++ });
+    let sessionCalls = 0;
+    const bearers: string[] = [];
+    const fetchImpl = vi.fn(async (url: string | URL | Request, init?: RequestInit) => {
+      const href = String(url);
+      if (href.endsWith("/v1/session")) {
+        sessionCalls += 1;
+        return Response.json({ sessionId: `s${sessionCalls}`, sessionToken: `bearer-${sessionCalls}`, expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "user_42", anonymous: false } });
+      }
+      bearers.push((init?.headers as Record<string, string>)["authorization"] ?? "");
+      return new Response(sseStream([{ type: "text_delta", text: "ok" }]), { status: 200 });
+    }) as unknown as typeof fetch;
+
+    const client = new FrankieClient({ publishableKey: "pk_rotate", getUserToken, fetchImpl });
+    await client.send({ message: "first" }, () => {});
+    await client.send({ message: "second" }, () => {});
+
+    expect(sessionCalls).toBe(1);
+    expect(bearers).toEqual(["Bearer bearer-1", "Bearer bearer-1"]);
+    expect(client.sessionId).toBe("s1");
+  });
+
+  it("still starts a new session when a different user signs in", async () => {
+    let sub = "user_42";
+    const getUserToken = () => jwt({ sub, iat: 1 });
+    let sessionCalls = 0;
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => {
+      if (String(url).endsWith("/v1/session")) {
+        sessionCalls += 1;
+        return Response.json({ sessionId: `s${sessionCalls}`, sessionToken: `bearer-${sessionCalls}`, expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: sub, anonymous: false } });
+      }
+      return new Response(sseStream([{ type: "text_delta", text: "ok" }]), { status: 200 });
+    }) as unknown as typeof fetch;
+
+    const client = new FrankieClient({ publishableKey: "pk_switch", getUserToken, fetchImpl });
+    await client.send({ message: "as 42" }, () => {});
+    sub = "user_99"; // account change on the host
+    await client.send({ message: "as 99" }, () => {});
+
+    expect(sessionCalls).toBe(2);
+    expect(client.sessionId).toBe("s2");
+  });
+
+  it("falls back to comparing an opaque token, so a changed one still resets", async () => {
+    let token = "opaque-token-a";
+    let sessionCalls = 0;
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => {
+      if (String(url).endsWith("/v1/session")) {
+        sessionCalls += 1;
+        return Response.json({ sessionId: `s${sessionCalls}`, sessionToken: `b${sessionCalls}`, expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "u", anonymous: false } });
+      }
+      return new Response(sseStream([{ type: "text_delta", text: "ok" }]), { status: 200 });
+    }) as unknown as typeof fetch;
+    const client = new FrankieClient({ publishableKey: "pk_opaque", getUserToken: () => token, fetchImpl });
+    await client.send({ message: "a" }, () => {});
+    token = "opaque-token-b";
+    await client.send({ message: "b" }, () => {});
+    expect(sessionCalls).toBe(2);
+  });
+
   it("drops a rejected session so the next send re-authenticates", async () => {
     let sessionCalls = 0;
     const fetchImpl = vi.fn(async (url: string | URL | Request) => {
@@ -333,6 +403,49 @@ describe("ChatPanel", () => {
     expect(root.style.getPropertyValue("--frankie-primary")).toBe("rgb(255, 0, 128)");
     expect(root.classList.contains("dark")).toBe(true);
   });
+
+  it("inherits the host page's own colors once sampling succeeds", async () => {
+    document.body.innerHTML = '<button data-stub="host-accent">Buy</button>';
+    const real = window.getComputedStyle.bind(window);
+    vi.spyOn(window, "getComputedStyle").mockImplementation((el: Element) => {
+      if (el === document.body) return { 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", primary: "#configured-fallback" } }}
+      >
+        <ChatPanel />
+      </FrankieProvider>,
+    );
+    const root = () => container.querySelector(".frankie-root") as HTMLElement;
+    // Sampling runs post-mount, so the first paint still shows the configured
+    // fallback — never a blank/undefined value — until inference resolves.
+    await waitFor(() => expect(root().style.getPropertyValue("--frankie-primary")).toBe("rgb(16, 185, 129)"));
+    expect(root().style.getPropertyValue("--frankie-background")).toBe("rgb(250, 250, 250)");
+    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(
+      <FrankieProvider
+        baseUrl="https://agent.acme.com"
+        publishableKey="pk_1"
+        config={{ ...config, theme: { mode: "light", source: "inherit", primary: "rgb(1, 2, 3)" } }}
+      >
+        <ChatPanel />
+      </FrankieProvider>,
+    );
+    const root = container.querySelector(".frankie-root") as HTMLElement;
+    // A transparent body background means inference declines to guess, so
+    // the configured value is what the widget shows — not left blank.
+    await waitFor(() => expect(root.style.getPropertyValue("--frankie-primary")).toBe("rgb(1, 2, 3)"));
+    vi.restoreAllMocks();
+  });
 });
 
 describe("FrankieChatPage", () => {
@@ -366,3 +479,108 @@ describe("FrankieChatPage", () => {
     cleanup();
   });
 });
+
+describe("sessionIdentity", () => {
+  const jwt = (claims: Record<string, unknown>) => `h.${Buffer.from(JSON.stringify(claims)).toString("base64url")}.sig`;
+  it("reads the JWT subject", () => expect(sessionIdentity(jwt({ sub: "user_42", iat: 1 }))).toBe("user_42"));
+  it("is stable across re-minted tokens for the same subject", () =>
+    expect(sessionIdentity(jwt({ sub: "u", iat: 1 }))).toBe(sessionIdentity(jwt({ sub: "u", iat: 2 }))));
+  it("falls back to the raw token when there is no readable subject", () => {
+    expect(sessionIdentity("opaque")).toBe("opaque");
+    expect(sessionIdentity("a.b")).toBe("a.b");
+    expect(sessionIdentity(jwt({ iat: 1 }))).toBe(jwt({ iat: 1 }));
+    expect(sessionIdentity("h.%%%notbase64%%%.s")).toBe("h.%%%notbase64%%%.s");
+  });
+  it("maps a missing token to undefined", () => expect(sessionIdentity(undefined)).toBeUndefined());
+});
+
+describe("client-side tool execution", () => {
+  it("joinHostUrl joins base and relative path, and refuses an absolute one", async () => {
+    const { joinHostUrl } = await import("./lib/client.js");
+    expect(joinHostUrl("https://app.acme.com/api", "restaurants/1?x=2")).toBe("https://app.acme.com/api/restaurants/1?x=2");
+    expect(joinHostUrl("https://app.acme.com/api/", "/restaurants")).toBe("https://app.acme.com/api/restaurants");
+    expect(() => joinHostUrl("https://app.acme.com", "https://evil.com/steal")).toThrow(/relative/);
+    expect(() => joinHostUrl("https://app.acme.com", "//evil.com/steal")).toThrow(/relative/);
+  });
+
+  it("runs a tool_call_request against the host API and posts the outcome back", async () => {
+    const calls: Array<{ url: string; init?: RequestInit }> = [];
+    const fetchImpl = vi.fn(async (url: string | URL | Request, init?: RequestInit) => {
+      const href = String(url);
+      calls.push({ url: href, ...(init ? { init } : {}) });
+      if (href.endsWith("/v1/session")) {
+        return Response.json({ sessionId: "s1", sessionToken: "bearer-1", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "u", anonymous: true } });
+      }
+      if (href.endsWith("/v1/chat")) {
+        return new Response(
+          sseStream([
+            { type: "tool_call_request", callId: "c-1", toolUseId: "c-1", name: "api__acme__getRestaurant", request: { source: "acme", method: "GET", path: "restaurants/9" } },
+            { type: "text_delta", text: "done" },
+            { type: "turn_end", stopReason: "end_turn" },
+          ]),
+          { status: 200 },
+        );
+      }
+      if (href.endsWith("/v1/chat/tool-result")) return Response.json({ ok: true });
+      // The host API call itself.
+      return new Response(JSON.stringify({ name: "Bistro" }), { status: 200 });
+    }) as unknown as typeof fetch;
+
+    const client = new FrankieClient({
+      baseUrl: "https://agent.acme.com",
+      publishableKey: "pk_client_exec",
+      api: { baseUrl: "https://app.acme.com/api", credentials: "include" },
+      fetchImpl,
+      persist: false,
+    });
+
+    await client.send({ message: "show me restaurant 9" }, () => {});
+
+    // The host API was called from the browser, at the configured base, with the
+    // app's own credentials — Frankie added no Authorization of its own.
+    await waitFor(() => expect(calls.some((c) => c.url === "https://app.acme.com/api/restaurants/9")).toBe(true));
+    const hostCall = calls.find((c) => c.url === "https://app.acme.com/api/restaurants/9")!;
+    expect(hostCall.init?.method).toBe("GET");
+    expect(hostCall.init?.credentials).toBe("include");
+    expect((hostCall.init?.headers as Record<string, string> | undefined)?.["authorization"]).toBeUndefined();
+
+    // The outcome was posted back with the matching callId and the host status.
+    await waitFor(() => expect(calls.some((c) => c.url.endsWith("/v1/chat/tool-result"))).toBe(true));
+    const post = calls.find((c) => c.url.endsWith("/v1/chat/tool-result"))!;
+    const body = JSON.parse(String(post.init?.body)) as { callId: string; result: { status: number; body: string } };
+    expect(body.callId).toBe("c-1");
+    expect(body.result.status).toBe(200);
+    expect(body.result.body).toContain("Bistro");
+  });
+
+  it("reports a transport failure when no host api client is configured", async () => {
+    const calls: Array<{ url: string; init?: RequestInit }> = [];
+    const fetchImpl = vi.fn(async (url: string | URL | Request, init?: RequestInit) => {
+      const href = String(url);
+      calls.push({ url: href, ...(init ? { init } : {}) });
+      if (href.endsWith("/v1/session")) {
+        return Response.json({ sessionId: "s1", sessionToken: "b1", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "u", anonymous: true } });
+      }
+      if (href.endsWith("/v1/chat")) {
+        return new Response(
+          sseStream([
+            { type: "tool_call_request", callId: "c-2", toolUseId: "c-2", name: "api__acme__x", request: { source: "acme", method: "GET", path: "x" } },
+            { type: "turn_end", stopReason: "end_turn" },
+          ]),
+          { status: 200 },
+        );
+      }
+      return Response.json({ ok: true });
+    }) as unknown as typeof fetch;
+
+    // No `api` option configured.
+    const client = new FrankieClient({ baseUrl: "https://agent.acme.com", publishableKey: "pk_no_api", fetchImpl, persist: false });
+    await client.send({ message: "hi" }, () => {});
+
+    await waitFor(() => expect(calls.some((c) => c.url.endsWith("/v1/chat/tool-result"))).toBe(true));
+    const post = calls.find((c) => c.url.endsWith("/v1/chat/tool-result"))!;
+    const body = JSON.parse(String(post.init?.body)) as { result: { status: number; error?: string } };
+    expect(body.result.status).toBe(0);
+    expect(body.result.error).toMatch(/no host API client/i);
+  });
+});