@frankieai/react 0.2.14 → 0.2.16

package/src/lib/theme-inherit.ts

@@ -39,7 +39,81 @@ function contrastRatio(a: Rgba, b: Rgba): number {
  * of guessed; everything after it is a heuristic guess at a "branded"
  * element, weakest last.
  */
-const ACCENT_SELECTORS = ["[data-frankie-accent]", "button[type=submit]", "a[href]", "button", "[class*=primary]", "[class*=btn]"];
+const ACCENT_SELECTORS = ["button[type=submit]", "a[href]", "button", "[class*=primary]", "[class*=btn]"];
+
+/**
+ * Brand-color custom properties, in the same order the dashboard's
+ * server-side preview reads them (`inferTheme` in @frankieai/core), so the
+ * live widget and the Appearance preview agree.
+ */
+const PRIMARY_VARS = ["--primary", "--color-primary", "--brand", "--color-brand", "--accent", "--color-accent"];
+
+/**
+ * Frankie's own DOM is never "the host's" color: once the chat is open, its
+ * send button (a `button[type=submit]` filled with the fallback accent) would
+ * otherwise be the first match and the widget would inherit itself.
+ */
+const OWN_DOM = ".frankie-root, [data-frankie-ignore]";
+
+function firstHostElement(selector: string): Element | null {
+  for (const element of document.querySelectorAll(selector)) if (!element.closest(OWN_DOM)) return element;
+  return null;
+}
+
+/** Resolve any CSS color (hex, hsl, oklch, shadcn's bare "221 83% 53%") to RGBA, or null. */
+function resolveColor(raw: string): Rgba | null {
+  const value = raw.trim();
+  if (!value) return null;
+  const candidate = /^[\d.]+(?:deg)?\s+[\d.]+%\s+[\d.]+%(?:\s*\/\s*[\d.]+%?)?$/.test(value) ? `hsl(${value})` : value;
+  const probe = document.createElement("span");
+  probe.style.color = candidate;
+  if (!probe.style.color) return null; // not a color
+  probe.style.display = "none";
+  probe.setAttribute("data-frankie-ignore", "");
+  document.body.appendChild(probe);
+  const computed = getComputedStyle(probe).color;
+  probe.remove();
+  const rgb = parseRgb(computed);
+  if (rgb) return rgb;
+  // Newer browsers keep oklch()/lab() as-is in computed styles: rasterize one pixel instead.
+  try {
+    const context = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+    if (!context) return null;
+    context.fillStyle = computed;
+    context.fillRect(0, 0, 1, 1);
+    const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;
+    return a ? [r!, g!, b!, a / 255] : null;
+  } catch {
+    return null;
+  }
+}
+
+/** The page's declared brand color (`--primary` and friends on :root or body), if any. */
+function declaredAccent(background: Rgba): Rgba | null {
+  for (const element of [document.documentElement, document.body]) {
+    const style = getComputedStyle(element);
+    if (typeof style.getPropertyValue !== "function") continue;
+    for (const name of PRIMARY_VARS) {
+      const color = resolveColor(style.getPropertyValue(name));
+      if (color && color[3] > 0.5 && !sameColor(color, background)) return color;
+    }
+  }
+  return null;
+}
+
+/** `a` moved `amount` of the way toward `b`: a surface or hairline in the page's own palette. */
+function mix(a: Rgba, b: Rgba, amount: number): Rgba {
+  return [0, 1, 2].map((i) => Math.round(a[i]! + (b[i]! - a[i]!) * amount)).concat(1) as Rgba;
+}
+
+/** The page's corner radius in rem, from a shadcn-style `--radius` (rem or px), if it declares one. */
+function declaredRadius(): string | undefined {
+  const raw = getComputedStyle(document.documentElement).getPropertyValue?.("--radius").trim();
+  const match = raw?.match(/^([\d.]+)(rem|px)$/);
+  if (!match) return undefined;
+  const rem = match[2] === "px" ? Number(match[1]) / 16 : Number(match[1]);
+  return rem >= 0 && rem <= 2 ? String(Math.round(rem * 1000) / 1000) : undefined;
+}
 
 /**
  * Best-effort read of the host page's own background/text/accent colors, for
@@ -52,8 +126,8 @@ const ACCENT_SELECTORS = ["[data-frankie-accent]", "button[type=submit]", "a[hre
  *
  * Never attempts full brand-color extraction (logos, images, gradients) —
  * only colors real elements are already rendering with, via
- * `getComputedStyle`. Runs once per mount; it does not track the host
- * toggling its own light/dark mode after that.
+ * `getComputedStyle`. The provider re-runs it when the host switches its own
+ * theme (see `watchHostTheme`).
  */
 export function inferHostTheme(): Partial<WidgetTheme> | null {
   if (typeof document === "undefined" || typeof getComputedStyle !== "function") return null;
@@ -65,9 +139,18 @@ export function inferHostTheme(): Partial<WidgetTheme> | null {
     if (background[3] < 0.5) return null; // a transparent/near-transparent body tells us nothing real
     if (contrastRatio(background, foreground) < 2) return null; // too low-contrast to trust as a real reading
 
+    // An explicit opt-in wins, then the page's declared brand variable, then
+    // a guess from rendered elements (never Frankie's own).
     let accent: Rgba | null = null;
-    for (const selector of ACCENT_SELECTORS) {
-      const element = document.querySelector(selector);
+    const marked = firstHostElement("[data-frankie-accent]");
+    if (marked) {
+      const style = getComputedStyle(marked);
+      const surface = parseRgb(style.backgroundColor);
+      accent = surface && surface[3] > 0.5 && !sameColor(surface, background) ? surface : parseRgb(style.color);
+    }
+    accent ??= declaredAccent(background);
+    for (const selector of accent ? [] : ACCENT_SELECTORS) {
+      const element = firstHostElement(selector);
       if (!element) continue;
       const style = getComputedStyle(element);
       const surface = parseRgb(style.backgroundColor);
@@ -77,13 +160,55 @@ export function inferHostTheme(): Partial<WidgetTheme> | null {
     }
     if (!accent) return null; // nothing distinct enough from the page's own surface to call an accent
 
+    // The page's light/dark decides the widget's, not the visitor's OS: a dark
+    // site on a light-mode machine must not get light borders and buttons.
+    // Muted surfaces and hairlines come from the page's own two colors so
+    // nothing in the widget keeps the default palette.
+    const font = bodyStyle.fontFamily?.trim();
+    const radius = declaredRadius();
     return {
+      mode: luminance(background) < 0.4 ? "dark" : "light",
       background: toCss(background),
       foreground: toCss(foreground),
       primary: toCss(accent),
-      primaryForeground: luminance(accent) > 0.5 ? "#0a0a0a" : "#fafafa",
+      // Whichever of near-black or near-white reads better on the accent.
+      primaryForeground: contrastRatio(accent, [10, 10, 10, 1]) > contrastRatio(accent, [250, 250, 250, 1]) ? "#0a0a0a" : "#fafafa",
+      muted: toCss(mix(background, foreground, 0.07)),
+      border: toCss(mix(background, foreground, 0.14)),
+      ...(font ? { fontFamily: font } : {}),
+      ...(radius ? { radius } : {}),
     };
   } catch {
     return null; // any DOM access failure (unusual host environment): never guess
   }
 }
+
+/**
+ * Call `onChange` when the host page may have switched its theme: a class,
+ * `data-*` or inline style change on <html> or <body> (how sites toggle light
+ * and dark), or the OS color scheme flipping. Coalesced to one call per
+ * frame. Watches only those two elements' own attributes, never the subtree,
+ * so the widget's own rendering can't trigger it. Returns a cleanup.
+ */
+export function watchHostTheme(onChange: () => void): () => void {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {};
+  let frame = 0;
+  const schedule = () => {
+    if (frame) return;
+    frame = (typeof requestAnimationFrame === "function" ? requestAnimationFrame : (fn: FrameRequestCallback) => setTimeout(fn, 16) as unknown as number)(() => {
+      frame = 0;
+      onChange();
+    });
+  };
+  const observer = new MutationObserver(schedule);
+  for (const element of [document.documentElement, document.body]) {
+    if (element) observer.observe(element, { attributes: true, attributeFilter: ["class", "style", "data-theme", "data-mode", "data-color-scheme", "data-color-mode"] });
+  }
+  const media = typeof window !== "undefined" && window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : undefined;
+  media?.addEventListener?.("change", schedule);
+  return () => {
+    observer.disconnect();
+    media?.removeEventListener?.("change", schedule);
+    if (frame && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame);
+  };
+}

package/src/styles/frankie.css

@@ -126,6 +126,14 @@
     margin: 0;
   }
 
+  /* A button with no fill of its own (ghost, icon) must not show the
+     browser's native gray face and border, which the host's color scheme
+     decides. Utilities like bg-primary and border still win. */
+  .frankie-root button {
+    background-color: transparent;
+    border: 0 solid;
+  }
+
   .frankie-root textarea {
     background-color: var(--frankie-background);
   }
@@ -312,11 +320,14 @@
     display: flex;
     width: min(100%, 44rem);
     min-height: 100%;
+    /* Grow with its content instead of shrinking into the small panel, where
+       centered content overflowed upward, past the top you can scroll to. */
+    flex-shrink: 0;
     margin: auto;
     padding: clamp(2rem, 7vh, 4.5rem) 1rem 2rem;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: safe center;
     gap: 2rem;
     text-align: center;
     /* Size the suggestion grid to the surface, not the viewport: one column in

package/src/styles/host-safety.test.ts

@@ -81,4 +81,14 @@ describe("widget stylesheet is host-safe", () => {
     expect(embedded).not.toMatch(/:(?:root|host)\s*[,{]/);
     expect(embedded).toContain(".frankie-root");
   });
+
+  it("gives the widget's own buttons no native face, so ghost buttons stay transparent in any host color scheme", () => {
+    expect(css).toMatch(/\.frankie-root button\s*\{[^}]*background-color:\s*(?:transparent|#0000)/);
+    expect(css).toMatch(/\.frankie-root button\s*\{[^}]*border:\s*0(?:px)? solid/);
+  });
+
+  it("never lets the welcome screen overflow above the top of the small panel", () => {
+    expect(css).toMatch(/\.frankie-page-empty\s*\{[^}]*flex-shrink:\s*0/);
+    expect(css).toMatch(/\.frankie-page-empty\s*\{[^}]*justify-content:\s*safe center/);
+  });
 });

package/src/theme-inherit.test.ts

@@ -0,0 +1,43 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { inferHostTheme } from "./lib/theme-inherit.js";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  document.body.removeAttribute("style");
+  document.documentElement.removeAttribute("style");
+});
+
+function page(html: string) {
+  document.body.style.backgroundColor = "rgb(255, 255, 255)";
+  document.body.style.color = "rgb(17, 17, 17)";
+  document.body.innerHTML = html;
+}
+
+describe("inferHostTheme", () => {
+  it("never inherits Frankie's own widget colors", () => {
+    page(`
+      <div class="frankie-root"><button type="submit" style="background-color: rgb(245, 196, 0)">Send</button></div>
+      <a href="/pricing" style="color: rgb(79, 70, 229)">Pricing</a>`);
+    expect(inferHostTheme()?.primary).toBe("rgb(79, 70, 229)");
+  });
+
+  it("prefers the page's declared brand variable over a guess from elements", () => {
+    page(`<a href="/" style="color: rgb(220, 38, 38)">Home</a>`);
+    document.documentElement.style.setProperty("--primary", "#4f46e5");
+    expect(inferHostTheme()?.primary).toBe("rgb(79, 70, 229)");
+  });
+
+  it("reads shadcn-style bare HSL variables", () => {
+    page("");
+    document.documentElement.style.setProperty("--primary", "243 75% 59%");
+    const primary = inferHostTheme()?.primary;
+    expect(primary).toMatch(/^rgb\(/);
+    expect(primary).not.toBe("rgb(255, 255, 255)");
+  });
+
+  it("an explicit data-frankie-accent element wins over everything", () => {
+    page(`<span data-frankie-accent style="background-color: rgb(22, 163, 74)"></span>`);
+    document.documentElement.style.setProperty("--primary", "#4f46e5");
+    expect(inferHostTheme()?.primary).toBe("rgb(22, 163, 74)");
+  });
+});

package/src/widget.test.tsx

@@ -261,6 +261,19 @@ describe("Markdown", () => {
     expect(screen.getByRole("link", { name: "docs" })).toHaveProperty("rel", "noopener noreferrer nofollow");
   });
 
+  it("renders *italic* but leaves a spaced asterisk and bold alone", () => {
+    render(<Markdown text="See *Key rotation* — 2 * 3 is **six**" />);
+    expect(screen.getByText("Key rotation").tagName).toBe("EM");
+    expect(screen.getByText("six").tagName).toBe("STRONG");
+    expect(screen.getByText(/2 \* 3 is/)).toBeTruthy();
+  });
+
+  it("keeps runs of asterisks literal instead of eating them as italic", () => {
+    const { container } = render(<Markdown text="Divider *** here and *x* too" />);
+    expect(container.textContent).toContain("Divider *** here");
+    expect(screen.getByText("x").tagName).toBe("EM");
+  });
+
   it("refuses to linkify a javascript: url", () => {
     render(<Markdown text="[click](javascript:alert(1))" />);
     expect(screen.queryByRole("link")).toBeNull();
@@ -297,6 +310,19 @@ describe("ChatPanel", () => {
     expect(screen.queryByText("1 skill loaded")).toBeNull();
     cleanup();
   });
+  it("opens the welcome screen at its top, not scrolled to the bottom", async () => {
+    cleanup();
+    const scrolls: number[] = [];
+    const { container } = render(<FrankieProvider publishableKey="pk_empty_fixture" config={config} fetchImpl={vi.fn()} persist={false}><ChatPanel /></FrankieProvider>);
+    const scroller = container.querySelector(".frankie-transcript") as HTMLElement;
+    Object.defineProperty(scroller, "scrollHeight", { configurable: true, get: () => 900 });
+    Object.defineProperty(scroller, "scrollTop", { configurable: true, get: () => scrolls.at(-1) ?? 0, set: (value: number) => { scrolls.push(value); } });
+    // A re-render with still no messages (e.g. config settling) must not jump to the bottom.
+    fireEvent.scroll(scroller);
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(scrolls.every((value) => value === 0)).toBe(true);
+    cleanup();
+  });
   it("keeps following new messages even when one update grows the transcript past the near-bottom threshold", async () => {
     cleanup();
     const fetchImpl = vi.fn(async (url: string | URL | Request) =>
@@ -429,6 +455,32 @@ describe("ChatPanel", () => {
     vi.restoreAllMocks();
   });
 
+  it("follows the host when it switches between light and dark, mode included", async () => {
+    document.body.innerHTML = '<button data-stub="host-accent">Buy</button>';
+    let dark = false;
+    const real = window.getComputedStyle.bind(window);
+    vi.spyOn(window, "getComputedStyle").mockImplementation((el: Element) => {
+      if (el === document.body) return (dark ? { backgroundColor: "rgb(15, 15, 14)", color: "rgb(243, 242, 238)" } : { backgroundColor: "rgb(250, 250, 250)", color: "rgb(20, 20, 20)" }) as CSSStyleDeclaration;
+      if ((el as HTMLElement).dataset?.stub === "host-accent") return { backgroundColor: "rgb(16, 185, 129)", color: "rgb(255, 255, 255)" } as CSSStyleDeclaration;
+      return real(el);
+    });
+    const { container } = render(
+      <FrankieProvider baseUrl="https://agent.acme.com" publishableKey="pk_1" config={{ ...config, theme: { mode: "light", source: "inherit" } }}>
+        <ChatPanel />
+      </FrankieProvider>,
+    );
+    const root = () => container.querySelector(".frankie-root") as HTMLElement;
+    await waitFor(() => expect(root().style.getPropertyValue("--frankie-background")).toBe("rgb(250, 250, 250)"));
+    expect(root().classList.contains("dark")).toBe(false);
+    // The site flips its own theme (as Frankie's dashboard does with data-theme).
+    dark = true;
+    document.documentElement.dataset.theme = "dark";
+    await waitFor(() => expect(root().style.getPropertyValue("--frankie-background")).toBe("rgb(15, 15, 14)"));
+    expect(root().classList.contains("dark")).toBe(true); // the configured "light" doesn't win over the page
+    delete document.documentElement.dataset.theme;
+    vi.restoreAllMocks();
+  });
+
   it("keeps the configured fallback when the host page can't be read reliably", async () => {
     vi.spyOn(window, "getComputedStyle").mockImplementation(() => ({ backgroundColor: "rgba(0, 0, 0, 0)", color: "rgba(0, 0, 0, 0)" }) as CSSStyleDeclaration);
     const { container } = render(
@@ -467,6 +519,45 @@ describe("FrankieChatPage", () => {
     cleanup();
   });
 
+  it("keeps the conversation list on screen while switching chats, and fetches the config once", async () => {
+    cleanup();
+    window.localStorage.clear();
+    const signedIn = { ...config, allowAnonymous: false };
+    const list = [
+      { id: "conv-a", title: "Hi, can you tell me what things I can do", createdAt: 1, updatedAt: Date.now() },
+      { id: "conv-b", title: "Hi", createdAt: 1, updatedAt: Date.now() - 3 * 86400000 },
+    ];
+    const session = (id: string) => ({ sessionId: id, sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: false } });
+    const calls: string[] = [];
+    const fetchImpl = vi.fn(async (url: string | URL | Request, init?: RequestInit) => {
+      const href = String(url);
+      calls.push(`${init?.method ?? "GET"} ${new URL(href).pathname}`);
+      if (href.endsWith("/v1/config")) return Response.json(signedIn);
+      if (href.endsWith("/v1/session")) return Response.json(session("s"));
+      if (href.endsWith("/v1/conversations")) return Response.json({ conversations: list });
+      if (/\/v1\/conversations\/[^/]+\/resume$/.test(href)) return Response.json({ session: session("r"), messages: [], title: "Hi" });
+      if (/\/v1\/conversations\/[^/]+$/.test(href)) return Response.json({ ok: true });
+      return new Response(sseStream([{ type: "turn_end", stopReason: "end_turn" }]));
+    });
+    const { container } = render(<FrankieChatPage publishableKey="pk_page_switch" conversationId="conv-a" fetchImpl={fetchImpl} persist={false} getUserToken={async () => "h.eyJzdWIiOiJvbmUifQ.s"} />);
+    const aside = () => container.querySelector(".frankie-history-desktop") as HTMLElement;
+    const items = () => within(aside()).queryAllByRole("button").filter((button) => button.textContent?.startsWith("Hi"));
+    await waitFor(() => expect(items()).toHaveLength(2));
+
+    // Click the other conversation. The list must still be there in the very
+    // next render — it used to empty and show "Loading history…" because the
+    // sidebar remounted with the conversation — and the page must not fetch
+    // the workspace config again.
+    const other = () => items().find((button) => button.querySelector("span")?.textContent === "Hi")!;
+    fireEvent.click(other());
+    expect(items()).toHaveLength(2);
+    expect(within(aside()).queryByText("Loading history…")).toBeNull();
+    await waitFor(() => expect(other().getAttribute("aria-current")).toBe("page"));
+    expect(items()).toHaveLength(2);
+    expect(calls.filter((call) => call.endsWith("/v1/config"))).toHaveLength(1);
+    cleanup();
+  });
+
   it("starts collapsed when a prior visit left the sidebar collapsed", async () => {
     cleanup();
     window.localStorage.setItem("frankie.history-collapsed", "1");