@frankieai/react 0.2.20 → 0.2.22

package/src/lib/theme-inherit.test.ts

@@ -72,6 +72,16 @@ describe("inferHostTheme", () => {
     expect(theme?.primary).toBe("rgb(220, 38, 38)");
   });
 
+  it("skips a grey link's text and takes the next colorful element", () => {
+    document.body.innerHTML = '<a href="/lessons" data-stub="grey-link">Lessons</a><button data-stub="green">Start</button>';
+    stubComputedStyle({
+      body: { backgroundColor: "rgb(255, 255, 255)", color: "rgb(29, 27, 34)" },
+      "grey-link": { backgroundColor: "rgba(0, 0, 0, 0)", color: "rgb(90, 88, 96)" },
+      green: { backgroundColor: "rgb(18, 161, 80)", color: "rgb(255, 255, 255)" },
+    });
+    expect(inferHostTheme()?.primary).toBe("rgb(18, 161, 80)");
+  });
+
   it("returns null for a transparent body background — nothing real to read", () => {
     stubComputedStyle({ body: { backgroundColor: "rgba(0, 0, 0, 0)", color: "rgb(10, 10, 10)" } });
     expect(inferHostTheme()).toBeNull();

package/src/lib/theme-inherit.ts

@@ -27,6 +27,12 @@ function luminance([r, g, b]: Rgba): number {
   return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
 }
 
+/** Whether a color has a hue of its own: a grey or near-black link is text, not a brand color. */
+function colorful([r, g, b]: Rgba): boolean {
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  return max - min >= 40;
+}
+
 function contrastRatio(a: Rgba, b: Rgba): number {
   const la = luminance(a), lb = luminance(b);
   return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
@@ -193,7 +199,7 @@ export function inferHostTheme(): Partial<WidgetTheme> | null {
       const surface = parseRgb(style.backgroundColor);
       if (surface && surface[3] > 0.5 && !sameColor(surface, background)) { accent = surface; break; }
       const text = parseRgb(style.color);
-      if (text && text[3] > 0.5 && !sameColor(text, foreground)) { accent = text; break; }
+      if (text && text[3] > 0.5 && !sameColor(text, foreground) && colorful(text)) { accent = text; break; }
     }
 
     // The page's light/dark decides the widget's, not the visitor's OS: a dark

package/src/mobile-sheet.test.tsx

@@ -0,0 +1,51 @@
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { PublicWidgetConfig } from "@frankieai/core";
+import { FrankieProvider } from "./hooks/FrankieProvider.jsx";
+import { FrankieWidget } from "./components/chat/FrankieWidget.js";
+
+const config: PublicWidgetConfig = {
+  tenantId: "acme", branding: { name: "Acme", tagline: "", launcherLabel: "Need a hand?" }, greeting: "Hi", suggestedPrompts: [],
+  theme: { mode: "light" }, allowAnonymous: true, showToolActivity: true,
+  features: { attachments: { enabled: false, accept: [], maxMb: 10, maxCount: 4 }, modelPicker: { enabled: false, models: [] } },
+};
+
+/** Pretend the viewport is (or isn't) phone-sized for `(max-width: 640px)`. */
+function viewport(phone: boolean) {
+  vi.stubGlobal("matchMedia", (query: string) => ({
+    matches: phone && query.includes("max-width: 640px"), media: query,
+    addEventListener: vi.fn(), removeEventListener: vi.fn(), addListener: vi.fn(), removeListener: vi.fn(), onchange: null, dispatchEvent: vi.fn(),
+  }));
+}
+
+afterEach(() => { cleanup(); vi.unstubAllGlobals(); document.documentElement.style.overflow = ""; });
+const root = () => document.querySelector(".frankie-widget");
+const renderWidget = () => render(
+  <FrankieProvider publishableKey="pk_sheet" config={config} fetchImpl={vi.fn()} persist={false}><FrankieWidget /></FrankieProvider>,
+);
+
+describe("the widget on a phone", () => {
+  it("marks itself open so the stylesheet can make it a full-screen sheet", () => {
+    viewport(true);
+    renderWidget();
+    expect(root()?.classList.contains("is-open")).toBe(false);
+    act(() => { fireEvent.click(screen.getByRole("button", { name: "Need a hand?" })); });
+    expect(root()?.classList.contains("is-open")).toBe(true);
+  });
+
+  it("stops the page behind it from scrolling, and gives scrolling back on close", () => {
+    viewport(true);
+    renderWidget();
+    act(() => { fireEvent.click(screen.getByRole("button", { name: "Need a hand?" })); });
+    expect(document.documentElement.style.overflow).toBe("hidden");
+    act(() => { fireEvent.click(screen.getByRole("button", { name: "Close" })); });
+    expect(document.documentElement.style.overflow).toBe("");
+  });
+
+  it("leaves page scrolling alone on a wider screen", () => {
+    viewport(false);
+    renderWidget();
+    act(() => { fireEvent.click(screen.getByRole("button", { name: "Need a hand?" })); });
+    expect(document.documentElement.style.overflow).toBe("");
+  });
+});

package/src/styles/frankie.css

@@ -614,3 +614,66 @@
 .frankie-root:not(.frankie-chat-panel-fill) .frankie-composer-controls:has(.frankie-composer-actions > :not(input[hidden])) > textarea { order:-1; flex:1 0 100%; width:100%; }
 .frankie-root:not(.frankie-chat-panel-fill) .frankie-composer-controls:has(.frankie-composer-actions > :not(input[hidden])) > .frankie-composer-actions { flex:1 1 auto; }
 .frankie-root:not(.frankie-chat-panel-fill) .frankie-composer-controls:has(.frankie-composer-actions > :not(input[hidden])) > button { margin-left:auto; }
+
+/* An action that changes data, waiting for the user's approval. */
+.frankie-root .frankie-action {
+  display:flex; flex-direction:column; gap:10px; margin-top:12px; padding:12px 14px;
+  border:1px solid var(--frankie-border); border-radius:var(--frankie-radius);
+  background:var(--frankie-background); color:var(--frankie-foreground); font-size:14px; line-height:1.4;
+}
+.frankie-root .frankie-action.is-pending {
+  border-color:color-mix(in srgb, var(--frankie-primary) 45%, var(--frankie-border));
+  background:color-mix(in srgb, var(--frankie-primary) 5%, var(--frankie-background));
+}
+.frankie-root .frankie-action-head { display:flex; align-items:flex-start; gap:10px; }
+.frankie-root .frankie-action-icon { margin-top:2px; flex-shrink:0; color:var(--frankie-primary); }
+.frankie-root .frankie-action-title { display:flex; flex-direction:column; gap:2px; min-width:0; }
+.frankie-root .frankie-action-title strong { font-weight:600; overflow-wrap:anywhere; }
+.frankie-root .frankie-action-title span { font-size:12px; color:var(--frankie-muted-foreground); }
+.frankie-root .frankie-action-route {
+  display:block; padding:6px 8px; border-radius:calc(var(--frankie-radius) * .6);
+  background:var(--frankie-muted); font-size:12px; overflow-wrap:anywhere;
+}
+.frankie-root .frankie-action-route span { font-weight:600; }
+.frankie-root .frankie-action-fields { display:grid; gap:6px; margin:0; }
+.frankie-root .frankie-action-fields > div { display:grid; grid-template-columns:minmax(0,35%) minmax(0,1fr); gap:10px; }
+.frankie-root .frankie-action-fields dt { color:var(--frankie-muted-foreground); font-size:12px; overflow-wrap:anywhere; }
+.frankie-root .frankie-action-fields dd {
+  margin:0; font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; max-height:8.5em; overflow:auto;
+}
+.frankie-root .frankie-action-buttons { display:flex; gap:8px; flex-wrap:wrap; }
+.frankie-root .frankie-action-buttons button {
+  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; cursor:pointer; font:inherit; font-size:14px; font-weight:500;
+  border-radius:var(--frankie-radius); border:1px solid var(--frankie-border); transition:background-color .15s ease, border-color .15s ease;
+}
+.frankie-root .frankie-action-approve { background:var(--frankie-primary); color:var(--frankie-primary-foreground); border-color:var(--frankie-primary); }
+.frankie-root .frankie-action-approve:hover:not(:disabled) { background:color-mix(in srgb, var(--frankie-primary) 88%, black); }
+.frankie-root .frankie-action-cancel { background:var(--frankie-background); color:var(--frankie-foreground); }
+.frankie-root .frankie-action-cancel:hover:not(:disabled) { background:var(--frankie-muted); }
+.frankie-root .frankie-action-buttons button:disabled { opacity:.55; cursor:not-allowed; }
+.frankie-root .frankie-action-buttons button:focus-visible { outline:none; box-shadow:0 0 0 2px color-mix(in srgb, var(--frankie-primary) 40%, transparent); }
+
+/* Phones: the open widget is a full-screen sheet, like a native chat, instead of
+   a card floating over a sliver of the page. The panel's own close button is the
+   way out, so the launcher steps aside; safe-area insets keep the header clear of
+   the notch and the composer clear of the home indicator. `!important` because
+   the widget positions itself with inline styles. */
+@media (max-width: 640px) {
+  .frankie-root.frankie-widget.is-open { inset: 0 !important; width: auto !important; }
+  .frankie-root.frankie-widget.is-open > div { height: 100%; gap: 0; }
+  .frankie-root.frankie-widget.is-open .frankie-launcher-slot { display: none; }
+  .frankie-root.frankie-widget.is-open .frankie-widget-sheet { width: 100%; height: 100%; }
+  .frankie-root.frankie-widget.is-open .frankie-widget-panel {
+    width: 100%; max-width: none; height: 100%; max-height: none;
+    border: 0; border-radius: 0; box-shadow: none;
+    padding-top: env(safe-area-inset-top);
+  }
+  .frankie-root.frankie-widget.is-open .frankie-widget-panel .frankie-composer-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
+  .frankie-root.frankie-widget.is-open .frankie-widget-panel [aria-label="Close"] { width: 44px; height: 44px; }
+}
+
+/* The floating panel is narrow at every viewport, so its agent-context pill
+   always uses the compact size; the full-size pill overflowed its right edge. */
+.frankie-root.frankie-widget-panel .frankie-agent-context > summary { gap:6px; padding:7px 9px; font-size:12px; }
+.frankie-root.frankie-widget-panel .frankie-agent-context > summary > span:first-of-type { padding-right:6px; }
+.frankie-root.frankie-widget-panel .frankie-agent-context > summary > svg { width:14px; }

package/src/widget.test.tsx

@@ -279,6 +279,11 @@ describe("Markdown", () => {
     expect(screen.queryByRole("link")).toBeNull();
   });
 
+  it("refuses protocol-relative links that would leave the site", () => {
+    render(<Markdown text={"[a](//evil.example/x) [b](/\\evil.example/y) [ok](/settings)"} />);
+    expect(screen.getAllByRole("link").map((link) => link.getAttribute("href"))).toEqual(["/settings"]);
+  });
+
   it("renders bullet lists", () => {
     const { container } = render(<Markdown text={"Steps:\n\n- one\n- two"} />);
     expect(container.querySelectorAll("li")).toHaveLength(2);
@@ -374,6 +379,49 @@ describe("ChatPanel", () => {
     expect(screen.getByText("spec abc123def456 · 4 operations")).toBeTruthy();
   });
 
+  it("asks before an action runs and answers with exactly that action", async () => {
+    cleanup();
+    const bodies: Array<Record<string, unknown>> = [];
+    let turn = 0;
+    const fetchImpl = vi.fn(async (url: string | URL | Request, init?: RequestInit) => {
+      if (String(url).endsWith("/v1/session")) return Response.json({ sessionId: "act", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: true } });
+      bodies.push(JSON.parse(String(init?.body)) as Record<string, unknown>);
+      turn += 1;
+      return new Response(sseStream(turn === 1
+        ? [
+            { type: "action_confirm", toolUseId: "toolu_1", name: "api__acme__deleteProject", label: "Delete project", preview: { method: "DELETE", path: "/projects/{id}", input: { id: "p_7" } } },
+            { type: "text_delta", text: "Approve it and I'll delete it." },
+            { type: "turn_end", stopReason: "end_turn" },
+          ]
+        : [{ type: "text_delta", text: "Deleted p_7." }, { type: "turn_end", stopReason: "end_turn" }]));
+    });
+    render(<FrankieProvider publishableKey="pk_action_fixture" config={config} fetchImpl={fetchImpl} persist={false}><ChatPanel /></FrankieProvider>);
+    await waitFor(() => expect((screen.getByLabelText("Message") as HTMLTextAreaElement).disabled).toBe(false));
+    fireEvent.change(screen.getByLabelText("Message"), { target: { value: "Delete p_7" } });
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    const card = await screen.findByRole("group", { name: "Approve: Delete project" });
+    expect(within(card).getByText("p_7")).toBeTruthy();
+    expect(bodies[0]).toMatchObject({ confirmActions: true });
+    await waitFor(() => expect((within(card).getByRole("button", { name: "Approve" }) as HTMLButtonElement).disabled).toBe(false));
+    fireEvent.click(within(card).getByRole("button", { name: "Approve" }));
+    expect(await screen.findByText("Deleted p_7.")).toBeTruthy();
+    expect(bodies[1]).toMatchObject({ message: "Go ahead", confirm: { toolUseId: "toolu_1", approved: true } });
+    // Answered: the buttons are gone and the card says what was decided.
+    expect(screen.queryByRole("button", { name: "Approve" })).toBeNull();
+    expect(screen.getByText("Approved")).toBeTruthy();
+    cleanup();
+  });
+
+  it("leaves out the agent context bar when the agent says so (Support, Docs and other page agents)", async () => {
+    cleanup();
+    const fetchImpl = vi.fn(async () => Response.json({}));
+    render(<FrankieProvider publishableKey="pk_support_fixture" config={{ ...config, agentContext: false }} fetchImpl={fetchImpl} persist={false}><ChatPanel /></FrankieProvider>);
+    expect(screen.queryByLabelText("Agent context")).toBeNull();
+    cleanup();
+    render(<FrankieProvider publishableKey="pk_product_fixture" config={{ ...config, agentContext: true }} fetchImpl={fetchImpl} persist={false}><ChatPanel /></FrankieProvider>);
+    expect(screen.getByLabelText("Agent context")).toBeTruthy();
+  });
+
   it("refreshes the context count and revisions from each server turn", async () => {
     cleanup();
     let turn = 0;
@@ -644,7 +692,7 @@ describe("client-side tool execution", () => {
     expect(body.result.body).toContain("Bistro");
   });
 
-  it("reports a transport failure when no host api client is configured", async () => {
+  it("calls the site the user is on, with the page's own sign-in, when no api option is set", async () => {
     const calls: Array<{ url: string; init?: RequestInit }> = [];
     const fetchImpl = vi.fn(async (url: string | URL | Request, init?: RequestInit) => {
       const href = String(url);
@@ -669,9 +717,10 @@ describe("client-side tool execution", () => {
     await client.send({ message: "hi" }, () => {});
 
     await waitFor(() => expect(calls.some((c) => c.url.endsWith("/v1/chat/tool-result"))).toBe(true));
+    const hostCall = calls.find((c) => c.url === `${window.location.origin}/x`)!;
+    expect(hostCall.init?.credentials).toBe("same-origin");
     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);
+    expect(body.result.status).toBe(200);
   });
 });