@frankieai/react 0.2.19 → 0.2.21

package/src/lib/messages.ts

@@ -1,4 +1,4 @@
-import type { FrankieServerEvent } from "@frankieai/core";
+import type { ActionPreview, FrankieServerEvent } from "@frankieai/core";
 
 export interface ToolActivity {
   id: string;
@@ -22,6 +22,18 @@ export interface UserChatMessage {
   createdAt: number;
 }
 
+/**
+ * An action that changes data, paused until the user approves it. `pending`
+ * shows Approve and Cancel; the other states record the answer.
+ */
+export interface ActionRequest {
+  toolUseId: string;
+  name: string;
+  label: string;
+  preview: ActionPreview;
+  state: "pending" | "approved" | "cancelled";
+}
+
 export interface AssistantChatMessage {
   id: string;
   role: "assistant";
@@ -31,6 +43,8 @@ export interface AssistantChatMessage {
   status: "streaming" | "done" | "error";
   error?: string;
   createdAt: number;
+  /** An action this reply is waiting on the user to approve. */
+  action?: ActionRequest;
 }
 
 export type ChatMessage = UserChatMessage | AssistantChatMessage;
@@ -72,6 +86,12 @@ export function applyEvent(message: AssistantChatMessage, event: FrankieServerEv
         ),
       };
 
+    case "action_confirm":
+      return {
+        ...message,
+        action: { toolUseId: event.toolUseId, name: event.name, label: event.label, preview: event.preview, state: "pending" },
+      };
+
     case "tool_denied":
       return {
         ...message,

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/outside-click.test.tsx

@@ -0,0 +1,42 @@
+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: [] } },
+};
+
+afterEach(cleanup);
+const panel = () => document.querySelector(".frankie-widget-panel");
+const renderWidget = (props: { closeOnOutsideClick?: boolean } = {}) => render(
+  <div>
+    <button type="button">Elsewhere</button>
+    <button type="button" data-frankie-open>Ask</button>
+    <FrankieProvider publishableKey="pk_outside" config={config} fetchImpl={vi.fn()} persist={false}><FrankieWidget defaultOpen {...props} /></FrankieProvider>
+  </div>,
+);
+
+describe("clicking outside the widget", () => {
+  it("closes the panel", () => {
+    renderWidget();
+    expect(panel()).toBeTruthy();
+    act(() => { fireEvent.pointerDown(screen.getByRole("button", { name: "Elsewhere" })); });
+    expect(panel()).toBeNull();
+  });
+  it("keeps it open for clicks inside it and on the host's own Ask button", () => {
+    renderWidget();
+    act(() => { fireEvent.pointerDown(panel()!); });
+    expect(panel()).toBeTruthy();
+    act(() => { fireEvent.pointerDown(screen.getByRole("button", { name: "Ask" })); });
+    expect(panel()).toBeTruthy();
+  });
+  it("can be turned off", () => {
+    renderWidget({ closeOnOutsideClick: false });
+    act(() => { fireEvent.pointerDown(screen.getByRole("button", { name: "Elsewhere" })); });
+    expect(panel()).toBeTruthy();
+  });
+});

package/src/styles/frankie.css

@@ -607,3 +607,48 @@
     animation:frankie-skeleton-pulse 1.6s ease-in-out infinite;
   }
 }
+/* The compact composer (widget, inline) with an attach button or model picker:
+   the message box gets its own row and the tools + send sit below it, so the
+   row can't run past a narrow panel's edge. */
+.frankie-root:not(.frankie-chat-panel-fill) .frankie-composer-controls:has(.frankie-composer-actions > :not(input[hidden])) { flex-wrap:wrap; align-items:center; row-gap:8px; }
+.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); }

package/src/theme-ready.test.tsx

@@ -33,4 +33,23 @@ describe("first paint", () => {
     await waitFor(() => expect(root.style.opacity).toBe(""));
     expect(root.dataset.frankieMode).toBe("light");
   });
+
+  it("shows the widget anyway when the config never answers, instead of hiding it for as long as the browser waits", async () => {
+    stylesLoaded();
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    try {
+      // A hung request: no response, no error, and the client sets no timeout of its own.
+      const fetchImpl = vi.fn(() => new Promise<Response>(() => {}));
+      const { container } = render(<FrankieProvider publishableKey="pk_test" baseUrl="https://frankie.test" fetchImpl={fetchImpl as unknown as typeof fetch}><FrankieWidget /></FrankieProvider>);
+      const root = container.querySelector(".frankie-widget") as HTMLElement;
+      await waitFor(() => expect(root.dataset.frankieStyles).toBe("ready"));
+      expect(root.style.opacity).toBe("0");
+      await act(async () => { await vi.advanceTimersByTimeAsync(4_000); });
+      expect(root.style.opacity).toBe("0");
+      await act(async () => { await vi.advanceTimersByTimeAsync(1_500); });
+      expect(root.style.opacity).toBe("");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
 });

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);
   });
 });