@frankieai/react 0.1.5 → 0.2.1

package/src/lib/client.ts

@@ -21,15 +21,15 @@ export interface FrankieClientOptions {
   publishableKey: string;
   /**
    * Fetches a short-lived JWT for the signed-in user from the host's own
-   * backend. Called once per session, and again when a session expires.
+   * backend. Called before each turn; return undefined after sign-out.
    * Omit only for tenants that allow anonymous chat.
    */
   getUserToken?: () => Promise<string | undefined> | string | undefined;
   fetchImpl?: typeof fetch;
   /**
    * Remember the session (and, in the hook, the transcript) in localStorage so a
-   * page reload resumes the same conversation. On by default in the browser;
-   * set false for an ephemeral chat that starts fresh every load.
+   * page reload resumes the same anonymous conversation. Authenticated chat
+   * never writes tokens or transcripts to localStorage; it uses server history.
    */
   persist?: boolean;
   /** Override localStorage namespace for session and transcript. */
@@ -59,11 +59,15 @@ export class FrankieClient {
   private readonly baseUrl: string;
   private readonly doFetch: typeof fetch;
   private session?: CreateSessionResponse;
+  private sessionUserToken?: string;
 
   constructor(private readonly options: FrankieClientOptions) {
     this.baseUrl = (options.baseUrl ?? FRANKIE_CLOUD_URL).replace(/\/+$/, "");
     this.doFetch = options.fetchImpl ?? globalThis.fetch.bind(globalThis);
     this.session = this.readStored();
+    if (options.getUserToken && typeof window !== "undefined") {
+      try { for (const suffix of ["session", "messages"]) window.localStorage.removeItem(`${this.namespace}.${suffix}`); } catch { /* storage may be unavailable */ }
+    }
   }
 
   get sessionId(): string | undefined {
@@ -76,7 +80,9 @@ export class FrankieClient {
 
   /** Whether this client persists across reloads (browser only, opt-out via `persist:false`). */
   get persist(): boolean {
-    return this.options.persist !== false && typeof window !== "undefined";
+    // Authenticated history comes from the identity-checked server. Do not leave
+    // a previous user's bearer token or transcript in shared browser storage.
+    return !this.options.getUserToken && this.options.persist !== false && typeof window !== "undefined";
   }
 
   /** localStorage namespace for this tenant/conversation, shared with the chat hook. */
@@ -115,15 +121,17 @@ export class FrankieClient {
   }
 
   async ensureSession(context?: PageContext): Promise<CreateSessionResponse> {
-    if (this.session && new Date(this.session.expiresAt).getTime() > Date.now() + 30_000) return this.session;
     const userToken = await this.options.getUserToken?.();
     if (this.options.getUserToken && !userToken) {
+      this.resetSession();
       throw new FrankieApiError(
         "Your signed-in Frankie session could not be verified. Refresh the page and sign in again.",
         401,
         "user_token_unavailable",
       );
     }
+    if (userToken !== this.sessionUserToken) this.resetSession();
+    if (this.session && new Date(this.session.expiresAt).getTime() > Date.now() + 30_000) return this.session;
     const response = await this.doFetch(`${this.baseUrl}/v1/session`, {
       method: "POST",
       headers: { "content-type": "application/json", "x-frankie-key": this.options.publishableKey },
@@ -134,6 +142,7 @@ export class FrankieClient {
       }),
     });
     this.session = (await this.unwrap(response)) as CreateSessionResponse;
+    this.sessionUserToken = userToken;
     this.writeStored();
     return this.session;
   }
@@ -148,7 +157,7 @@ export class FrankieClient {
   }
 
   async resumeConversation(id = this.options.conversationId): Promise<{ messages: unknown[]; title: string } | undefined> {
-    if (!id) return undefined;
+    if (!id || !this.options.getUserToken) return undefined;
     const userToken = await this.requireUserToken();
     const response = await this.doFetch(`${this.baseUrl}/v1/conversations/${encodeURIComponent(id)}/resume`, {
       method: "POST",
@@ -157,6 +166,7 @@ export class FrankieClient {
     if (response.status === 404) return undefined;
     const body = (await this.unwrap(response)) as { session: CreateSessionResponse; messages?: unknown[]; title?: string };
     this.session = body.session;
+    this.sessionUserToken = userToken;
     this.writeStored();
     return { messages: Array.isArray(body.messages) ? body.messages : [], title: body.title ?? "New chat" };
   }

package/src/styles/frankie.css

@@ -45,6 +45,27 @@
 }
 
 @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-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; }
+  .frankie-history-search input { width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--frankie-border); border-radius:8px; background:var(--frankie-background); }
+  .frankie-history-list { display:flex; flex-direction:column; gap:4px; flex:1; }
+  .frankie-history-list button { display:flex; flex-direction:column; align-items:flex-start; gap:5px; border:1px solid transparent; border-radius:8px; padding:10px; min-height:54px; background:transparent; text-align:left; cursor:pointer; }
+  .frankie-history-list button span { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
+  .frankie-history-list small { font-size:11px; color:var(--frankie-muted-foreground); }.frankie-history-list button:hover,.frankie-history-list button[aria-current] { background:var(--frankie-background); border-color:var(--frankie-border); }
+  .frankie-history-desktop > p,.frankie-history-dialog p { font-size:13px; color:var(--frankie-muted-foreground); }
+  .frankie-header-caption { color:var(--frankie-muted-foreground); font-size:12px; }.frankie-page-header button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:40px; min-height:40px; cursor:pointer; }
+  .frankie-chat-settings { position:relative; }.frankie-chat-settings summary { list-style:none; display:grid; place-items:center; width:40px; height:40px; cursor:pointer; border-radius:8px; }.frankie-chat-settings summary::-webkit-details-marker { display:none; }
+  .frankie-chat-settings > div { position:absolute; top:46px; right:0; z-index:5; width:min(280px,80vw); display:grid; gap:12px; padding:16px; border:1px solid var(--frankie-border); border-radius:12px; background:var(--frankie-background); box-shadow:0 10px 30px #0002; font-size:13px; }.frankie-chat-settings p { margin:0; color:var(--frankie-muted-foreground); }
+  .frankie-loaded-skills { width:100%; max-width:760px; font-size:12px; color:var(--frankie-muted-foreground); }.frankie-loaded-skills summary { cursor:pointer; padding:6px 0; }.frankie-loaded-skills ul { list-style:none; padding:4px 0; margin:0; }.frankie-loaded-skills li { display:flex; gap:8px; padding:4px 0; }.frankie-loaded-skills small { opacity:.7; }
+  .frankie-history-dialog { padding:0; border:0; margin:0; max-height:none; height:100dvh; max-width:none; width:min(320px,86vw); background:var(--frankie-secondary); color:var(--frankie-foreground); }.frankie-history-dialog::backdrop { background:#0008; }.frankie-history-dialog > aside { display:flex; flex-direction:column; gap:16px; height:100%; padding:calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); overflow:auto; }
+  .frankie-mobile-only { display:none!important; }.frankie-widget-panel { max-height:calc(100dvh - 100px); }
+  .frankie-root button:focus-visible,.frankie-root summary:focus-visible,.frankie-root input:focus-visible { outline:2px solid var(--frankie-primary); outline-offset:3px; }
+  .frankie-root button:disabled { opacity:.5; cursor:not-allowed; }
+  @media(max-width:760px) { .frankie-history-desktop { display:none; }.frankie-mobile-only { display:inline-flex!important; }.frankie-header-caption { display:none; }.frankie-page-header { padding:6px 10px; }.frankie-history-heading button { border:0; background:transparent; min-width:44px; min-height:44px; align-items:center; justify-content:center; }.frankie-page-prompts { gap:8px; }.frankie-widget-panel { width:calc(100vw - 32px); } }
   .frankie-root {
     --frankie-background: #ffffff;
     --frankie-foreground: #0a0a0a;
@@ -294,7 +315,7 @@
   .frankie-page-prompts button {
     display: grid;
     min-height: 60px;
-    grid-template-columns: 2rem minmax(0, 1fr) auto;
+    grid-template-columns: minmax(0, 1fr) auto;
     align-items: center;
     gap: .65rem;
     padding: .75rem .9rem;
@@ -325,3 +346,64 @@
     .frankie-page-canvas .frankie-root > .border-t { padding: .65rem .75rem calc(.65rem + env(safe-area-inset-bottom)); }
   }
 }
+
+/* Shared conversation surface: SDK pages, embedded panels and Frankie's app. */
+.frankie-root.frankie-chat-panel { min-height:0; position:relative; }
+.frankie-root .frankie-agent-context-wrap { flex:none; display:flex; justify-content:center; padding:12px 10px; }
+.frankie-root .frankie-agent-context { position:relative; max-width:100%; color:var(--frankie-foreground); font-size:13px; }
+.frankie-root .frankie-agent-context > summary { display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:7px 13px; border:1px solid var(--frankie-border); border-radius:999px; background:var(--frankie-background); box-shadow:0 1px 3px #0000000d; cursor:pointer; list-style:none; white-space:nowrap; }
+.frankie-root .frankie-agent-context > summary::-webkit-details-marker { display:none; }
+.frankie-root .frankie-agent-context > summary > svg { flex:none; color:var(--frankie-muted-foreground); }
+.frankie-root .frankie-context-count { padding:2px 10px; border-radius:999px; background:var(--frankie-muted); font-size:12px; color:var(--frankie-muted-foreground); }
+.frankie-root .frankie-context-status { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--frankie-muted-foreground); }
+.frankie-root .frankie-context-status i { width:7px; height:7px; border-radius:50%; background:currentColor; }
+.frankie-root .frankie-context-status[data-active="true"] { color:#00976b; }
+.frankie-root .frankie-context-detail { position:absolute; z-index:10; top:calc(100% + 10px); left:50%; transform:translateX(-50%); width:340px; max-width:calc(100vw - 32px); padding:18px; border:1px solid var(--frankie-border); border-radius:16px; background:var(--frankie-background); box-shadow:0 12px 32px #00000016; }
+.frankie-root .frankie-context-detail p { margin:10px 0 0; font-size:12px; line-height:1.6; color:var(--frankie-muted-foreground); }
+.frankie-root .frankie-context-detail ul { list-style:none; margin:12px 0; padding:0; max-height:220px; overflow:auto; }
+.frankie-root .frankie-context-detail li { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--frankie-border); overflow-wrap:anywhere; }
+.frankie-root .frankie-context-detail small { flex:none; color:var(--frankie-muted-foreground); }
+.frankie-root .frankie-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
+.frankie-root.frankie-chat-panel-fill { --frankie-canvas:color-mix(in srgb,var(--frankie-background) 60%,var(--frankie-muted)); background:var(--frankie-canvas); }
+.frankie-root.frankie-chat-panel-fill .frankie-agent-context-wrap { padding:44px 16px 26px; }
+.frankie-root.frankie-chat-panel-fill .frankie-transcript { padding:14px max(24px,calc((100% - 960px)/2)) 24px; }
+.frankie-root.frankie-chat-panel-fill .frankie-message-list { gap:38px; }
+.frankie-root.frankie-chat-panel-fill .frankie-user-bubble { border-radius:24px; padding:12px 20px; background:var(--frankie-muted); color:var(--frankie-foreground); font-size:15px; white-space:pre-wrap; overflow-wrap:anywhere; }
+.frankie-root.frankie-chat-panel-fill .frankie-assistant-content { max-width:100%; flex:1; font-size:15px; line-height:1.7; }
+.frankie-root.frankie-chat-panel-fill .frankie-assistant-message { gap:14px; }
+.frankie-root .frankie-thinking { color:var(--frankie-muted-foreground); gap:5px; }
+.frankie-root .frankie-thinking-label { margin-right:6px; font-size:14px; }
+.frankie-root.frankie-chat-panel-fill .frankie-composer-footer { border:0; padding:16px max(24px,calc((100% - 1000px)/2)) 24px; background:transparent; flex:none; }
+.frankie-root.frankie-chat-panel-fill .frankie-composer { padding:14px; border:1px solid var(--frankie-border); border-radius:28px; background:var(--frankie-background); box-shadow:0 2px 4px #0000000a; }
+.frankie-root.frankie-chat-panel-fill .frankie-composer:focus-within { border-color:color-mix(in srgb,var(--frankie-foreground) 32%,var(--frankie-border)); box-shadow:0 0 0 2px color-mix(in srgb,var(--frankie-primary) 8%,transparent); }
+.frankie-root.frankie-chat-panel-fill .frankie-composer-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
+.frankie-root.frankie-chat-panel-fill .frankie-composer textarea { order:-1; flex:0 0 100%; width:100%; min-height:32px; max-height:140px; margin-bottom:4px; padding:2px 6px; border:0; border-radius:0; resize:none; background:transparent; color:var(--frankie-foreground); font-size:16px; box-shadow:none; outline:none; }
+.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-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; }
+.frankie-root .frankie-history-list button span { font-size:14px; }
+.frankie-root .frankie-history-list button[aria-current],.frankie-root .frankie-history-list button:hover { border-color:transparent; background:var(--frankie-muted); }
+.frankie-root .frankie-history-list small { display:none; }
+.frankie-root .frankie-page-header { min-height:56px; height:56px; background:var(--frankie-background); }
+.frankie-root .frankie-page-header > div { min-width:0; }
+.frankie-root .frankie-thread-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:55vw; font-weight:500; }
+.frankie-root .frankie-page-header button { border-color:transparent; background:transparent; }
+.frankie-root .frankie-page-canvas > .frankie-inline { max-width:none; }
+@media(max-width:760px) {
+  .frankie-root.frankie-chat-panel-fill .frankie-agent-context-wrap { padding:20px 8px 14px; }
+  .frankie-root.frankie-chat-panel-fill .frankie-transcript { padding:12px 16px 16px; }
+  .frankie-root.frankie-chat-panel-fill .frankie-composer-footer { padding:10px 12px calc(12px + env(safe-area-inset-bottom)); }
+  .frankie-root .frankie-agent-context > summary { gap:6px; padding:7px 9px; font-size:12px; }
+  .frankie-root .frankie-context-count { padding:2px 7px; font-size:11px; }
+  .frankie-root .frankie-context-status { font-size:11px; gap:4px; }
+  .frankie-root .frankie-agent-context > summary > svg { width:14px; }
+  .frankie-root .frankie-thread-title { max-width:42vw; }
+}
+.frankie-root .frankie-agent-context > summary > svg:first-child { box-sizing:content-box; padding:4px; border-radius:50%; background:var(--frankie-muted); }
+.frankie-root.frankie-chat-panel-fill .frankie-agent-context > summary { font-size:14px; }
+
+.frankie-root .frankie-agent-context > summary > span:first-of-type { border-right:1px solid var(--frankie-border); padding-right:10px; }
+@media(max-width:760px) { .frankie-root .frankie-page-header button > span { display:none; } }

package/src/widget.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen, waitFor } 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";
@@ -7,6 +7,7 @@ import { Markdown } from "./components/chat/Markdown.js";
 import { FrankieClient, readEventStream } from "./lib/client.js";
 import { applyEvent, newAssistantMessage } from "./lib/messages.js";
 import { themeToCssVars } from "./lib/theme.js";
+import { useFrankieChat } from "./hooks/useFrankieChat.js";
 
 const config: PublicWidgetConfig = {
   tenantId: "acme",
@@ -97,6 +98,24 @@ describe("readEventStream", () => {
 });
 
 describe("FrankieClient", () => {
+  it("does not request signed-in history for an anonymous conversation", async () => {
+    const fetchImpl = vi.fn();
+    const client = new FrankieClient({ publishableKey: "pk_anonymous_fixture", conversationId: "new", fetchImpl, persist: false });
+    expect(await client.resumeConversation()).toBeUndefined();
+    expect(fetchImpl).not.toHaveBeenCalled();
+  });
+  it("keeps authenticated tokens out of storage and rejects a cached session after sign-out", async () => {
+    let token: string | undefined = "fixture-user-token";
+    const fetchImpl = vi.fn(async () => Response.json({ sessionId: "one", sessionToken: "fixture-bearer", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: false } }));
+    const client = new FrankieClient({ publishableKey: "pk_auth_fixture", getUserToken: () => token, fetchImpl });
+    await client.ensureSession();
+    expect(client.persist).toBe(false);
+    expect(window.localStorage.getItem("frankie.pk_auth_fixture.session")).toBeNull();
+    token = undefined;
+    await expect(client.ensureSession()).rejects.toThrow("sign in again");
+    expect(client.sessionId).toBeUndefined();
+    expect(fetchImpl).toHaveBeenCalledTimes(1);
+  });
   // The client persists its session to localStorage; isolate tests that reuse
   // the same publishable-key namespace.
   beforeEach(() => {
@@ -192,6 +211,50 @@ describe("themeToCssVars", () => {
 });
 
 describe("ChatPanel", () => {
+  it("shares prompt controls, transcript and loaded skills across provider consumers", async () => {
+    cleanup();
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => String(url).endsWith("/v1/session") ? Response.json({ sessionId: "shared", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: true } }) : new Response(sseStream([{ type: "skills_loaded", skills: [{ id: "review", name: "Review items", revision: 2 }] }, { type: "text_delta", text: "Shared response" }, { type: "turn_end", stopReason: "end_turn" }])));
+    function Prompt() { const chat = useFrankieChat(); return <button disabled={chat.restoring} onClick={() => void chat.send("Shared prompt")}>External prompt</button>; }
+    render(<FrankieProvider publishableKey="pk_shared_fixture" config={config} fetchImpl={fetchImpl} persist={false}><Prompt /><ChatPanel /></FrankieProvider>);
+    await waitFor(() => expect((screen.getByRole("button", { name: "External prompt" }) as HTMLButtonElement).disabled).toBe(false));
+    fireEvent.click(screen.getByRole("button", { name: "External prompt" }));
+    expect(await screen.findByText("Shared response")).toBeTruthy();
+    expect(screen.getByText("1 skill loaded")).toBeTruthy();
+    expect(fetchImpl.mock.calls.filter(([url]) => String(url).endsWith("/v1/chat"))).toHaveLength(1);
+    fireEvent.click(screen.getByRole("button", { name: "Start a new conversation" }));
+    await waitFor(() => expect(screen.queryByText("Shared response")).toBeNull());
+    expect(screen.queryByText("1 skill loaded")).toBeNull();
+    cleanup();
+  });
+  it("refreshes the context count and revisions from each server turn", async () => {
+    cleanup();
+    let turn = 0;
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => {
+      if (String(url).endsWith("/v1/session")) return Response.json({ sessionId: "context", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: true } });
+      turn++;
+      const skills = turn === 1 ? [{ id: "one", name: "Reservations", revision: 2 }, { id: "two", name: "Locations", revision: 1 }, { id: "three", name: "Service", revision: 3 }] : [];
+      return new Response(sseStream([{ type: "skills_loaded", skills }, { type: "text_delta", text: `Response ${turn}` }, { type: "turn_end", stopReason: "end_turn" }]));
+    });
+    render(<FrankieProvider publishableKey="pk_context_fixture" config={config} fetchImpl={fetchImpl} persist={false}><ChatPanel fill /></FrankieProvider>);
+    expect(screen.getByText("Not checked")).toBeTruthy();
+    await waitFor(() => expect((screen.getByLabelText("Message") as HTMLTextAreaElement).disabled).toBe(false));
+    fireEvent.change(screen.getByLabelText("Message"), { target: { value: "Review service" } });
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    await screen.findByText("Response 1");
+    expect(screen.getByText("3 skills")).toBeTruthy();
+    expect(screen.getByText("Active")).toBeTruthy();
+    fireEvent.click(screen.getByLabelText("Agent context"));
+    expect(screen.getByText("Reservations")).toBeTruthy();
+    expect(screen.getByText("v3")).toBeTruthy();
+    await waitFor(() => expect(screen.getByRole("button", { name: "Send" })).toBeTruthy());
+    fireEvent.change(screen.getByLabelText("Message"), { target: { value: "Try again" } });
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    await screen.findByText("Response 2");
+    expect(screen.getByText("0 skills")).toBeTruthy();
+    expect(screen.queryByText("Active")).toBeNull();
+    expect(screen.queryByText("Reservations")).toBeNull();
+    cleanup();
+  });
   it("shows the greeting and suggested prompts before the first message", async () => {
     render(
       <FrankieProvider baseUrl="https://agent.acme.com" publishableKey="pk_1" config={config}>