@frankieai/react 0.1.0

package/src/styles/frankie.css

@@ -0,0 +1,158 @@
+/*
+ * Prebuilt stylesheet for hosts that do not run Tailwind themselves.
+ *
+ * Preflight is deliberately omitted — this stylesheet is loaded into someone
+ * else's production page and must not restyle their elements. Only the
+ * utilities our components actually use are emitted, and every visual token is
+ * a CSS variable scoped to `.frankie-root`, so a host can restyle the widget
+ * without touching this file.
+ *
+ * Hosts that already run Tailwind v4 can skip this file entirely and instead
+ * add `@source "../node_modules/@frankieai/react/dist";` to their own CSS: the
+ * widget then compiles against their design tokens.
+ */
+
+@layer theme, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities) source(none);
+
+@source "../";
+
+/* shadcn/ui's class-based dark mode, scoped to the widget's own root. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Map Tailwind's color tokens onto the widget's variables so `bg-primary`
+   and friends resolve to whatever the host themed. */
+@theme inline {
+  --color-background: var(--frankie-background);
+  --color-foreground: var(--frankie-foreground);
+  --color-primary: var(--frankie-primary);
+  --color-primary-foreground: var(--frankie-primary-foreground);
+  --color-secondary: var(--frankie-secondary);
+  --color-secondary-foreground: var(--frankie-secondary-foreground);
+  --color-muted: var(--frankie-muted);
+  --color-muted-foreground: var(--frankie-muted-foreground);
+  --color-border: var(--frankie-border);
+}
+
+@layer components {
+  .frankie-root {
+    --frankie-background: #ffffff;
+    --frankie-foreground: #0a0a0a;
+    --frankie-primary: #171717;
+    --frankie-primary-foreground: #fafafa;
+    --frankie-secondary: #f5f5f5;
+    --frankie-secondary-foreground: #171717;
+    --frankie-muted: #f5f5f5;
+    --frankie-muted-foreground: #737373;
+    --frankie-border: #e5e5e5;
+    --frankie-radius: 0.625rem;
+    --frankie-font:
+      ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+    font-family: var(--frankie-font);
+    color: var(--frankie-foreground);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .frankie-root.dark {
+    --frankie-background: #0a0a0a;
+    --frankie-foreground: #fafafa;
+    --frankie-primary: #fafafa;
+    --frankie-primary-foreground: #171717;
+    --frankie-secondary: #262626;
+    --frankie-secondary-foreground: #fafafa;
+    --frankie-muted: #262626;
+    --frankie-muted-foreground: #a3a3a3;
+    --frankie-border: #262626;
+  }
+
+  /* The widget renders into the host's page, where `* { box-sizing }` and font
+     inheritance are not guaranteed. Reset only inside our own subtree. */
+  .frankie-root,
+  .frankie-root *,
+  .frankie-root *::before,
+  .frankie-root *::after {
+    box-sizing: border-box;
+  }
+
+  .frankie-root button,
+  .frankie-root textarea,
+  .frankie-root input {
+    font: inherit;
+    color: inherit;
+    margin: 0;
+  }
+
+  .frankie-root textarea {
+    background-color: var(--frankie-background);
+  }
+
+  .frankie-focus:focus-visible {
+    outline: 2px solid var(--frankie-primary);
+    outline-offset: 2px;
+  }
+
+  .frankie-scroll {
+    scrollbar-width: thin;
+    scrollbar-color: var(--frankie-border) transparent;
+  }
+
+  /* Typography for model output. Scoped so the host's prose styles do not leak
+     in and ours do not leak out. */
+  .frankie-prose > * + * {
+    margin-top: 0.5rem;
+  }
+
+  .frankie-prose p {
+    margin: 0;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  .frankie-prose ul,
+  .frankie-prose ol {
+    margin: 0;
+    padding-left: 1.15rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .frankie-prose ul {
+    list-style: disc;
+  }
+
+  .frankie-prose ol {
+    list-style: decimal;
+  }
+
+  .frankie-prose a {
+    color: var(--frankie-primary);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .frankie-prose code {
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+    font-size: 0.85em;
+    background-color: var(--frankie-muted);
+    border-radius: 0.25rem;
+    padding: 0.1em 0.3em;
+  }
+
+  .frankie-prose pre {
+    margin: 0;
+    padding: 0.625rem 0.75rem;
+    border-radius: var(--frankie-radius);
+    background-color: var(--frankie-muted);
+    overflow-x: auto;
+  }
+
+  .frankie-prose pre code {
+    background: none;
+    padding: 0;
+  }
+}

package/src/widget.test.tsx

@@ -0,0 +1,217 @@
+import { 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";
+import { ChatPanel } from "./components/chat/ChatPanel.js";
+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";
+
+const config: PublicWidgetConfig = {
+  tenantId: "acme",
+  branding: { name: "Acme Guide", tagline: "Setup help", launcherLabel: "Need a hand?" },
+  greeting: "Hi! What are you setting up?",
+  suggestedPrompts: ["Connect my first repo"],
+  theme: { mode: "light" },
+  allowAnonymous: true,
+  showToolActivity: true,
+};
+
+function sseStream(events: FrankieServerEvent[]): ReadableStream<Uint8Array> {
+  const encoder = new TextEncoder();
+  return new ReadableStream({
+    start(controller) {
+      for (const event of events) controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`));
+      controller.close();
+    },
+  });
+}
+
+describe("applyEvent", () => {
+  it("accumulates text deltas", () => {
+    let message = newAssistantMessage("a1");
+    message = applyEvent(message, { type: "text_delta", text: "Hel" });
+    message = applyEvent(message, { type: "text_delta", text: "lo" });
+    expect(message.text).toBe("Hello");
+  });
+
+  it("tracks a tool from start to finish", () => {
+    let message = newAssistantMessage("a1");
+    message = applyEvent(message, {
+      type: "tool_start",
+      toolUseId: "t1",
+      name: "mcp__acme__create",
+      label: "Create · acme",
+      input: {},
+    });
+    expect(message.tools[0]?.status).toBe("running");
+    message = applyEvent(message, { type: "tool_end", toolUseId: "t1", ok: true, preview: "created" });
+    expect(message.tools[0]).toMatchObject({ status: "done", detail: "created" });
+  });
+
+  it("records a denied tool that never started", () => {
+    const message = applyEvent(newAssistantMessage("a1"), {
+      type: "tool_denied",
+      toolUseId: "t9",
+      name: "Bash",
+      reason: "not allowed",
+    });
+    expect(message.tools).toEqual([
+      { id: "t9", name: "Bash", label: "Bash", status: "denied", detail: "not allowed" },
+    ]);
+  });
+
+  it("keeps an error status through turn_end", () => {
+    let message = newAssistantMessage("a1");
+    message = applyEvent(message, { type: "error", code: "upstream_error", message: "boom", retryable: true });
+    message = applyEvent(message, { type: "turn_end", stopReason: "error" });
+    expect(message.status).toBe("error");
+    expect(message.error).toBe("boom");
+  });
+
+  it("substitutes text when a turn ends empty", () => {
+    const message = applyEvent(newAssistantMessage("a1"), { type: "turn_end", stopReason: "max_turns" });
+    expect(message.text).toMatch(/narrow it down/);
+  });
+});
+
+describe("readEventStream", () => {
+  it("yields events split across chunk boundaries", async () => {
+    const encoder = new TextEncoder();
+    const stream = new ReadableStream<Uint8Array>({
+      start(controller) {
+        controller.enqueue(encoder.encode('data: {"type":"text_de'));
+        controller.enqueue(encoder.encode('lta","text":"hi"}\n\ndata: {"type":"ping"}\n\n'));
+        controller.close();
+      },
+    });
+    const events: FrankieServerEvent[] = [];
+    for await (const event of readEventStream(stream)) events.push(event);
+    expect(events).toEqual([{ type: "text_delta", text: "hi" }, { type: "ping" }]);
+  });
+});
+
+describe("FrankieClient", () => {
+  // The client persists its session to localStorage; isolate tests that reuse
+  // the same publishable-key namespace.
+  beforeEach(() => {
+    try {
+      localStorage.clear();
+    } catch {
+      /* no storage in this environment */
+    }
+  });
+
+  it("attaches the publishable key and session bearer token", 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 new Response(
+          JSON.stringify({
+            sessionToken: "sess.jwt",
+            sessionId: "s1",
+            expiresAt: new Date(Date.now() + 60_000).toISOString(),
+            user: { id: "u1", anonymous: true },
+          }),
+          { status: 200, headers: { "content-type": "application/json" } },
+        );
+      }
+      return new Response(sseStream([{ type: "text_delta", text: "ok" }]), { status: 200 });
+    }) as unknown as typeof fetch;
+
+    const client = new FrankieClient({ baseUrl: "https://agent.acme.com/", publishableKey: "pk_1", fetchImpl });
+    const seen: FrankieServerEvent[] = [];
+    await client.send({ message: "hi" }, (event) => seen.push(event));
+
+    expect(seen).toEqual([{ type: "text_delta", text: "ok" }]);
+    const chat = calls.find((call) => call.url.endsWith("/v1/chat"));
+    const headers = chat?.init?.headers as Record<string, string>;
+    expect(headers["authorization"]).toBe("Bearer sess.jwt");
+    expect(headers["x-frankie-key"]).toBe("pk_1");
+  });
+
+  it("drops a rejected session so the next send re-authenticates", async () => {
+    let sessionCalls = 0;
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => {
+      const href = String(url);
+      if (href.endsWith("/v1/session")) {
+        sessionCalls += 1;
+        return new Response(
+          JSON.stringify({
+            sessionToken: "sess.jwt",
+            sessionId: "s1",
+            expiresAt: new Date(Date.now() + 60_000).toISOString(),
+            user: { id: "u1", anonymous: true },
+          }),
+          { status: 200, headers: { "content-type": "application/json" } },
+        );
+      }
+      return new Response(JSON.stringify({ error: { code: "unauthorized", message: "expired" } }), { status: 401 });
+    }) as unknown as typeof fetch;
+
+    const client = new FrankieClient({ baseUrl: "https://agent.acme.com", publishableKey: "pk_1", fetchImpl });
+    await expect(client.send({ message: "hi" }, () => {})).rejects.toThrow(/expired/);
+    await expect(client.send({ message: "again" }, () => {})).rejects.toThrow(/expired/);
+    expect(sessionCalls).toBe(2);
+  });
+});
+
+describe("Markdown", () => {
+  it("renders bold, code and links", () => {
+    render(<Markdown text="Go **now** to [docs](https://acme.com/docs) and run `init`" />);
+    expect(screen.getByText("now").tagName).toBe("STRONG");
+    expect(screen.getByText("init").tagName).toBe("CODE");
+    expect(screen.getByRole("link", { name: "docs" })).toHaveProperty("rel", "noopener noreferrer nofollow");
+  });
+
+  it("refuses to linkify a javascript: url", () => {
+    render(<Markdown text="[click](javascript:alert(1))" />);
+    expect(screen.queryByRole("link")).toBeNull();
+  });
+
+  it("renders bullet lists", () => {
+    const { container } = render(<Markdown text={"Steps:\n\n- one\n- two"} />);
+    expect(container.querySelectorAll("li")).toHaveLength(2);
+  });
+});
+
+describe("themeToCssVars", () => {
+  it("maps only the keys that are set", () => {
+    expect(themeToCssVars({ primary: "#f50", radius: "1" })).toEqual({
+      "--frankie-primary": "#f50",
+      "--frankie-radius": "1rem",
+    });
+  });
+});
+
+describe("ChatPanel", () => {
+  it("shows the greeting and suggested prompts before the first message", async () => {
+    render(
+      <FrankieProvider baseUrl="https://agent.acme.com" publishableKey="pk_1" config={config}>
+        <ChatPanel />
+      </FrankieProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("Hi! What are you setting up?")).toBeDefined());
+    expect(screen.getByRole("button", { name: "Connect my first repo" })).toBeDefined();
+    expect(screen.getByLabelText("Message")).toBeDefined();
+  });
+
+  it("applies theme overrides as CSS variables", () => {
+    const { container } = render(
+      <FrankieProvider
+        baseUrl="https://agent.acme.com"
+        publishableKey="pk_1"
+        config={config}
+        theme={{ primary: "rgb(255, 0, 128)", mode: "dark" }}
+      >
+        <ChatPanel />
+      </FrankieProvider>,
+    );
+    const root = container.querySelector(".frankie-root") as HTMLElement;
+    expect(root.style.getPropertyValue("--frankie-primary")).toBe("rgb(255, 0, 128)");
+    expect(root.classList.contains("dark")).toBe(true);
+  });
+});