@frankieai/react 0.2.20 → 0.2.21

package/src/styles/frankie.css

@@ -614,3 +614,41 @@
 .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/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);
   });
 });