@frankieai/react 0.2.15 → 0.2.17

package/src/lib/theme-inherit.ts

@@ -101,28 +101,79 @@ function declaredAccent(background: Rgba): Rgba | null {
   return null;
 }
 
+/** A color custom property declared on <html> or <body> (shadcn's `--background`, Tailwind v4's `--color-background`). */
+function declaredColor(names: string[]): Rgba | null {
+  for (const element of [document.documentElement, document.body]) {
+    const style = getComputedStyle(element);
+    if (typeof style.getPropertyValue !== "function") continue;
+    for (const name of names) {
+      const color = resolveColor(style.getPropertyValue(name));
+      if (color && color[3] >= 0.5) return color;
+    }
+  }
+  return null;
+}
+
+/** An element's own background, when it's opaque enough to be a page surface. */
+function solidBackground(element: Element | null | undefined): Rgba | null {
+  if (!element || element.closest(OWN_DOM)) return null;
+  const color = parseRgb(getComputedStyle(element).backgroundColor ?? "");
+  return color && color[3] >= 0.5 ? color : null;
+}
+
+/**
+ * The page's real background and text. Many sites leave <body> transparent
+ * and paint <html>, a top-level wrapper (`<div class="min-h-screen bg-…">`)
+ * or only declare `--background`, so each is tried in turn; <body>'s own
+ * text color stays the default unless the background came from elsewhere
+ * and the page declares `--foreground`.
+ */
+function pageColors(bodyStyle: CSSStyleDeclaration): { background: Rgba; foreground: Rgba } | null {
+  const bodyText = parseRgb(bodyStyle.color);
+  const fromBody = parseRgb(bodyStyle.backgroundColor);
+  if (fromBody && fromBody[3] >= 0.5) return bodyText ? { background: fromBody, foreground: bodyText } : null;
+  const wrapper = document.body.firstElementChild;
+  const background = solidBackground(document.documentElement) ?? solidBackground(wrapper) ?? solidBackground(wrapper?.firstElementChild) ?? declaredColor(["--background", "--color-background"]);
+  const foreground = declaredColor(["--foreground", "--color-foreground"]) ?? bodyText;
+  return background && foreground ? { background, foreground } : 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
  * a workspace that chose "inherit my site's theme" over a manually configured
- * palette. Deliberately conservative: returns `null` — never a guess — the
- * moment anything sampled looks unreliable (no DOM to read, a transparent
- * body background, illegible contrast, no element that reads as an accent),
- * so the caller falls back to the configured or default theme rather than
- * shipping a widget that looks broken on a page this heuristic can't read.
+ * palette. Conservative: returns `null` — never a guess — when nothing
+ * sampled is reliable (no DOM to read, no opaque surface on <body>, <html>,
+ * the top wrapper or a declared `--background`, illegible contrast), so the
+ * caller falls back to the configured theme rather than shipping a widget
+ * that looks broken. With no distinct accent it still returns the page's
+ * surfaces and leaves the configured accent in place.
  *
  * 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;
   try {
     const bodyStyle = getComputedStyle(document.body);
-    const background = parseRgb(bodyStyle.backgroundColor);
-    const foreground = parseRgb(bodyStyle.color);
-    if (!background || !foreground) return null;
-    if (background[3] < 0.5) return null; // a transparent/near-transparent body tells us nothing real
+    const colors = pageColors(bodyStyle);
+    if (!colors) return null; // no opaque surface anywhere: nothing real to read
+    const { background, foreground } = colors;
     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
@@ -144,15 +195,60 @@ export function inferHostTheme(): Partial<WidgetTheme> | null {
       const text = parseRgb(style.color);
       if (text && text[3] > 0.5 && !sameColor(text, foreground)) { accent = text; break; }
     }
-    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();
+    // No accent distinct from the page: the page's surfaces still apply, and
+    // the configured accent (the fallback) stays for buttons and links.
     return {
+      mode: luminance(background) < 0.4 ? "dark" : "light",
       background: toCss(background),
       foreground: toCss(foreground),
-      primary: toCss(accent),
-      primaryForeground: luminance(accent) > 0.5 ? "#0a0a0a" : "#fafafa",
+      ...(accent ? {
+        primary: toCss(accent),
+        // 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/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");