@frankieai/react 0.2.18 → 0.2.20

package/src/hooks/useFrankieChat.ts

@@ -69,6 +69,34 @@ export function useFrankieChatState(): UseFrankieChatResult {
 
   const storageKey = `${client.namespace}.messages`;
 
+  // A reply the server is still writing after this browser lost the stream (a
+  // closed tab, a phone that backgrounded the page): show it as working and
+  // check back until it lands, then show the server's finished copy.
+  const followingRef = useRef(false);
+  const followRunningTurn = useCallback(async () => {
+    if (followingRef.current || !client.canResume) return;
+    followingRef.current = true;
+    setBusy(true);
+    try {
+      const deadline = Date.now() + 3 * 60_000;
+      while (mounted.current && Date.now() < deadline) {
+        await new Promise((resolve) => setTimeout(resolve, 2500));
+        const remote = await client.resumeConversation().catch(() => undefined);
+        if (!remote || remote.busy) continue;
+        if (remote.messages.length) {
+          const finished = remote.messages as ChatMessage[];
+          messagesRef.current = finished;
+          if (mounted.current) setMessages(finished);
+        }
+        if (mounted.current) setError(undefined);
+        return;
+      }
+    } finally {
+      followingRef.current = false;
+      if (mounted.current) setBusy(false);
+    }
+  }, [client]);
+
   // Restore local storage immediately, then hydrate the authoritative server
   // transcript. The server path makes the same signed-in user's chats available
   // on another browser or device.
@@ -90,10 +118,11 @@ export function useFrankieChatState(): UseFrankieChatResult {
       try {
         const remote = await client.resumeConversation();
         if (active && remote?.messages.length) {
-          const restoredMessages = remote.messages as ChatMessage[];
+          const restoredMessages = remote.busy ? stillWorking(remote.messages as ChatMessage[]) : (remote.messages as ChatMessage[]);
           messagesRef.current = restoredMessages;
           setMessages(restoredMessages);
         }
+        if (active && remote?.busy) void followRunningTurn();
       } catch (caught) {
         if (active) {
           const message =
@@ -110,7 +139,7 @@ export function useFrankieChatState(): UseFrankieChatResult {
     };
     void restore();
     return () => { active = false; };
-  }, [client, storageKey]);
+  }, [client, storageKey, followRunningTurn]);
 
   // Persist once a turn settles — never mid-stream — so the saved copy is clean.
   // Wait until the initial restore has completed so an empty initial state never
@@ -205,6 +234,7 @@ export function useFrankieChatState(): UseFrankieChatResult {
         patchAssistant(assistantId, (message) => ({ ...message, text: message.text + addText, thinking: message.thinking + addThinking }));
       };
 
+      let lostStream = false;
       try {
         let receivedText = false;
         let receivedToolActivity = false;
@@ -254,6 +284,10 @@ export function useFrankieChatState(): UseFrankieChatResult {
             status: "done",
             text: message.text || "Stopped.",
           }));
+        } else if (!(caught instanceof FrankieApiError) && client.canResume) {
+          // The connection dropped, not the turn: the server keeps going and
+          // saves the reply. Keep this message working and pick it up below.
+          lostStream = true;
         } else {
           const message =
             caught instanceof FrankieApiError
@@ -268,10 +302,13 @@ export function useFrankieChatState(): UseFrankieChatResult {
         // Ensure no frame is left pending and every buffered token is committed
         // before the turn settles and the transcript is persisted.
         flushDeltas();
-        // A turn that ended without a `turn_end` event still has to settle.
-        patchAssistant(assistantId, (message) =>
-          message.status === "streaming" ? { ...message, status: "done" } : message,
-        );
+        // A turn that ended without a `turn_end` event still has to settle,
+        // unless the server is still writing it (followed below).
+        if (!lostStream) {
+          patchAssistant(assistantId, (message) =>
+            message.status === "streaming" ? { ...message, status: "done" } : message,
+          );
+        }
         // Persist before send() resolves. This closes the previous gap where a
         // route change or tab close could leave a server conversation with no
         // rendered messages even though the agent transcript existed.
@@ -281,12 +318,19 @@ export function useFrankieChatState(): UseFrankieChatResult {
         }
         if (mounted.current) setBusy(false);
         abortRef.current = null;
+        if (lostStream) void followRunningTurn();
       }
     },
-    [busy, client, context, patchAssistant, restored],
+    [busy, client, context, patchAssistant, restored, followRunningTurn],
   );
 
-  const stop = useCallback(() => abortRef.current?.abort(), []);
+  // Closing the stream no longer stops a turn (a closed tab keeps its reply),
+  // so Stop tells the server first, then closes it.
+  const stop = useCallback(() => {
+    if (!abortRef.current) return;
+    void client.stopTurn();
+    abortRef.current.abort();
+  }, [client]);
 
   const reset = useCallback(() => {
     abortRef.current?.abort();
@@ -315,3 +359,10 @@ function conversationTitle(messages: ChatMessage[]): string | undefined {
   const title = first.text.trim().replace(/\s+/g, " ");
   return title.length > 42 ? `${title.slice(0, 42)}…` : title;
 }
+
+/** Show the last reply as still being written: reopen a broken one, or add an empty one. */
+function stillWorking(messages: ChatMessage[]): ChatMessage[] {
+  const last = messages[messages.length - 1];
+  if (last?.role === "assistant") return [...messages.slice(0, -1), { ...last, status: "streaming", error: undefined }];
+  return [...messages, { id: "pending_" + Date.now(), role: "assistant", text: "", thinking: "", tools: [], status: "streaming", createdAt: Date.now() }];
+}

package/src/lib/bottom-bars.ts

@@ -0,0 +1,43 @@
+/**
+ * How far a fixed or sticky bar along the bottom of the viewport (a mobile tab
+ * bar, a cookie banner, a sticky "Buy" bar) rises over the widget's corner, in
+ * pixels. The launcher sits above it instead of hiding beneath it.
+ *
+ * It samples the corner where the launcher sits, ignoring the widget itself,
+ * and counts only elements anchored to the bottom edge and shorter than 40% of
+ * the viewport, so a full-height sidebar or a modal never pushes it away.
+ */
+export function bottomObstruction(root: Element | null, position: "bottom-right" | "bottom-left", offset: number): number {
+  if (typeof document === "undefined" || typeof window === "undefined" || typeof document.elementsFromPoint !== "function") return 0;
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  if (!width || !height) return 0;
+  const xs = position === "bottom-right" ? [width - offset - 24, width - 8] : [offset + 24, 8];
+  const ys = [height - offset - 24, height - 4];
+  let lift = 0;
+  const seen = new Set<Element>();
+  for (const x of xs) for (const y of ys) {
+    for (const hit of document.elementsFromPoint(x, y)) {
+      if (root?.contains(hit)) continue;
+      const bar = anchoredAncestor(hit);
+      if (!bar || seen.has(bar)) continue;
+      seen.add(bar);
+      const rect = bar.getBoundingClientRect();
+      const anchoredToBottom = rect.bottom >= height - 4;
+      const short = rect.height > 0 && rect.height < height * 0.4;
+      if (anchoredToBottom && short) lift = Math.max(lift, height - rect.top);
+    }
+  }
+  return Math.round(lift);
+}
+
+/** The nearest fixed or sticky element at or above `element` (a few levels up at most). */
+function anchoredAncestor(element: Element): Element | null {
+  let node: Element | null = element;
+  for (let depth = 0; node && depth < 8 && node !== document.body && node !== document.documentElement; depth += 1) {
+    const position = getComputedStyle(node).position;
+    if (position === "fixed" || position === "sticky") return node;
+    node = node.parentElement;
+  }
+  return null;
+}

package/src/lib/client.ts

@@ -207,7 +207,25 @@ export class FrankieClient {
     return Array.isArray(body.conversations) ? body.conversations : [];
   }
 
-  async resumeConversation(id = this.options.conversationId): Promise<{ messages: unknown[]; title: string } | undefined> {
+  /** Whether a conversation can be reloaded from the server (a signed-in user and a conversation id). */
+  get canResume(): boolean {
+    return Boolean(this.options.conversationId && this.options.getUserToken);
+  }
+
+  /**
+   * Ask the server to stop the running turn. Closing the stream no longer
+   * stops it (a closed tab shouldn't lose the reply), so Stop says so
+   * explicitly. Best effort: the stream is closed right after either way.
+   */
+  async stopTurn(): Promise<void> {
+    if (!this.session) return;
+    await this.doFetch(`${this.baseUrl}/v1/chat/stop`, {
+      method: "POST",
+      headers: { "x-frankie-key": this.options.publishableKey, authorization: `Bearer ${this.session.sessionToken}` },
+    }).catch(() => undefined);
+  }
+
+  async resumeConversation(id = this.options.conversationId): Promise<{ messages: unknown[]; title: string; busy: boolean } | undefined> {
     if (!id || !this.options.getUserToken) return undefined;
     const userToken = await this.requireUserToken();
     const response = await this.doFetch(`${this.baseUrl}/v1/conversations/${encodeURIComponent(id)}/resume`, {
@@ -215,11 +233,11 @@ export class FrankieClient {
       headers: { "x-frankie-key": this.options.publishableKey, authorization: `Bearer ${userToken}` },
     });
     if (response.status === 404) return undefined;
-    const body = (await this.unwrap(response)) as { session: CreateSessionResponse; messages?: unknown[]; title?: string };
+    const body = (await this.unwrap(response)) as { session: CreateSessionResponse; messages?: unknown[]; title?: string; busy?: boolean };
     this.session = body.session;
     this.sessionUserKey = sessionIdentity(userToken);
     this.writeStored();
-    return { messages: Array.isArray(body.messages) ? body.messages : [], title: body.title ?? "New chat" };
+    return { messages: Array.isArray(body.messages) ? body.messages : [], title: body.title ?? "New chat", busy: body.busy === true };
   }
 
   async syncConversation(messages: unknown[], title?: string): Promise<void> {

package/src/lib/viewport-fill.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState, type RefObject } from "react";
+import { bottomObstruction } from "./bottom-bars.js";
+
+/**
+ * The height that fills the viewport from where `ref` starts down to the
+ * bottom edge, less any fixed bar along the bottom (a mobile tab bar). A
+ * full-page chat inside a host layout with no sized parent otherwise stops at
+ * its minimum height and leaves a gap above the host's navigation.
+ * Re-measured on resize and, throttled, as the page changes.
+ */
+export function useViewportFill(ref: RefObject<HTMLElement | null>, enabled: boolean): number {
+  const [fill, setFill] = useState(0);
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") { setFill(0); return; }
+    let timer = 0;
+    let last = 0;
+    const measure = () => {
+      timer = 0;
+      last = Date.now();
+      const node = ref.current;
+      if (!node) return;
+      const top = node.getBoundingClientRect().top + window.scrollY;
+      const lift = bottomObstruction(node, "bottom-right", 0);
+      setFill(Math.max(0, Math.round(window.innerHeight - top - lift)));
+    };
+    const schedule = () => {
+      if (timer) return;
+      timer = window.setTimeout(() => requestAnimationFrame(measure), Math.max(0, 300 - (Date.now() - last)));
+    };
+    measure();
+    window.addEventListener("resize", schedule);
+    const observer = typeof MutationObserver === "function"
+      ? new MutationObserver((records) => { if (records.some((record) => !ref.current?.contains(record.target))) schedule(); })
+      : undefined;
+    observer?.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style"] });
+    return () => { window.clearTimeout(timer); window.removeEventListener("resize", schedule); observer?.disconnect(); };
+  }, [ref, enabled]);
+  return fill;
+}

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

@@ -66,7 +66,7 @@
   .frankie-chat-settings > div { position:absolute; top:46px; right:0; z-index:5; width:min(280px,80vw); display:grid; gap:12px; padding:16px; border:1px solid var(--frankie-border); border-radius:12px; background:var(--frankie-background); box-shadow:0 10px 30px #0002; font-size:13px; }.frankie-chat-settings p { margin:0; color:var(--frankie-muted-foreground); }
   .frankie-loaded-skills { width:100%; max-width:760px; font-size:12px; color:var(--frankie-muted-foreground); }.frankie-loaded-skills summary { cursor:pointer; padding:6px 0; }.frankie-loaded-skills ul { list-style:none; padding:4px 0; margin:0; }.frankie-loaded-skills li { display:flex; gap:8px; padding:4px 0; }.frankie-loaded-skills small { opacity:.7; }
   .frankie-history-dialog { padding:0; border:0; margin:0; max-height:none; height:100dvh; max-width:none; width:min(320px,86vw); background:var(--frankie-secondary); color:var(--frankie-foreground); }.frankie-history-dialog::backdrop { background:#0008; }.frankie-history-dialog > aside { display:flex; flex-direction:column; gap:16px; height:100%; padding:calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); overflow:auto; }
-  .frankie-mobile-only { display:none!important; }.frankie-widget-panel { max-height:calc(100dvh - 100px); }
+  .frankie-mobile-only { display:none!important; }.frankie-widget-panel { max-height:calc(100dvh - 100px - var(--frankie-lift, 0px)); }
   .frankie-root button:focus-visible,.frankie-root summary:focus-visible,.frankie-root input:focus-visible { outline:2px solid var(--frankie-primary); outline-offset:3px; }
   .frankie-root button:disabled { opacity:.5; cursor:not-allowed; }
   @media(max-width:760px) { .frankie-history-desktop { display:none; }.frankie-mobile-only { display:inline-flex!important; }.frankie-header-caption { display:none; }.frankie-page-header { padding:6px 10px; }.frankie-history-heading button { border:0; background:transparent; min-width:44px; min-height:44px; align-items:center; justify-content:center; }.frankie-page-prompts { gap:8px; }.frankie-widget-panel { width:calc(100vw - 32px); } }
@@ -591,11 +591,14 @@
   height:12px; border-radius:6px;
   background:linear-gradient(90deg,
     color-mix(in srgb, var(--frankie-muted-foreground) 11%, transparent) 25%,
-    color-mix(in srgb, var(--frankie-muted-foreground) 26%, transparent) 37%,
+    color-mix(in srgb, var(--frankie-muted-foreground) 19%, transparent) 37%,
     color-mix(in srgb, var(--frankie-muted-foreground) 11%, transparent) 63%);
   background-size:400% 100%;
-  animation:frankie-shimmer 1.4s ease infinite;
+  animation:frankie-shimmer 2.2s ease-in-out infinite;
 }
+/* Fades in after a beat, so a fast first word never flashes a skeleton. */
+.frankie-root .frankie-skeleton.is-delayed { animation:frankie-skeleton-in .25s ease .35s both; }
+@keyframes frankie-skeleton-in { from { opacity:0; } to { opacity:1; } }
 @keyframes frankie-shimmer { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }
 @keyframes frankie-skeleton-pulse { 0%,100% { opacity:.45; } 50% { opacity:.85; } }
 @media (prefers-reduced-motion: reduce) {
@@ -604,3 +607,10 @@
     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; }

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/turn-follow.test.tsx

@@ -0,0 +1,111 @@
+import { cleanup, fireEvent, render, screen, waitFor } 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 { useFrankieChat } from "./hooks/useFrankieChat.js";
+
+const config: PublicWidgetConfig = {
+  tenantId: "acme",
+  branding: { name: "Acme Guide", tagline: "Setup help", launcherLabel: "Need a hand?" },
+  greeting: "Hi!",
+  suggestedPrompts: [],
+  theme: { mode: "light" },
+  allowAnonymous: false,
+  showToolActivity: true,
+  features: {
+    attachments: { enabled: false, accept: ["image/*"], maxMb: 10, maxCount: 4 },
+    modelPicker: { enabled: false, models: [] },
+  },
+};
+
+const session = { sessionId: "s", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: false } };
+const token = async () => "h.eyJzdWIiOiJvbmUifQ.s";
+const user = { id: "u1", role: "user", text: "Find the backrooms", createdAt: 1 };
+const done = { id: "a1", role: "assistant", text: "Here they are.", thinking: "", tools: [], status: "done", createdAt: 2 };
+
+/** Prints the chat state so tests can read it. */
+function Probe() {
+  const chat = useFrankieChat();
+  const last = chat.messages[chat.messages.length - 1];
+  return (
+    <>
+      <output data-testid="state">{`${chat.busy ? "busy" : "idle"}|${last ? `${last.role}:${last.role === "assistant" ? last.status : ""}:${last.text}` : "empty"}`}</output>
+      <button disabled={chat.restoring} onClick={() => void chat.send("hello")}>Send</button>
+      <button onClick={() => chat.stop()}>Stop</button>
+    </>
+  );
+}
+
+const state = () => screen.getByTestId("state").textContent;
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+describe("a reply the server is still writing", () => {
+  it("shows as working after a reload and lands when the server finishes", async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    let resumes = 0;
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => {
+      if (!String(url).endsWith("/resume")) return Response.json({ ok: true });
+      resumes += 1;
+      // First visit: the tab was closed mid-reply and the turn is still running.
+      return resumes === 1
+        ? Response.json({ session, messages: [user], title: "Backrooms", busy: true })
+        : Response.json({ session, messages: [user, done], title: "Backrooms", busy: false });
+    });
+    render(<FrankieProvider publishableKey="pk_follow" config={config} conversationId="conv-1" fetchImpl={fetchImpl} persist={false} getUserToken={token}><Probe /></FrankieProvider>);
+    await waitFor(() => expect(state()).toBe("busy|assistant:streaming:"));
+    await vi.advanceTimersByTimeAsync(3000);
+    await waitFor(() => expect(state()).toBe("idle|assistant:done:Here they are."));
+    expect(resumes).toBe(2);
+  });
+
+  it("keeps a reply working when only the connection drops, then picks it up", async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    let resumes = 0;
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => {
+      const href = String(url);
+      if (href.endsWith("/resume")) {
+        resumes += 1;
+        return resumes === 1
+          ? Response.json({ session, messages: [], title: "New chat", busy: false })
+          : Response.json({ session, messages: [{ ...user, text: "hello" }, done], title: "hello", busy: false });
+      }
+      if (href.endsWith("/v1/chat")) throw new TypeError("network error");
+      return Response.json({ ok: true });
+    });
+    render(<FrankieProvider publishableKey="pk_drop" config={config} conversationId="conv-2" fetchImpl={fetchImpl} persist={false} getUserToken={token}><Probe /></FrankieProvider>);
+    await waitFor(() => expect((screen.getByRole("button", { name: "Send" }) as HTMLButtonElement).disabled).toBe(false));
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    await waitFor(() => expect(state()).toBe("busy|assistant:streaming:"));
+    await vi.advanceTimersByTimeAsync(3000);
+    await waitFor(() => expect(state()).toBe("idle|assistant:done:Here they are."));
+  });
+
+  it("tells the server to stop when the visitor presses Stop", async () => {
+    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("/resume")) return Response.json({ session, messages: [], title: "New chat", busy: false });
+      if (href.endsWith("/v1/chat")) {
+        // A stream that stays open until the request is aborted.
+        return new Response(new ReadableStream({
+          start(controller) {
+            init?.signal?.addEventListener("abort", () => controller.error(new DOMException("aborted", "AbortError")));
+          },
+        }));
+      }
+      return Response.json({ ok: true });
+    });
+    render(<FrankieProvider publishableKey="pk_stop" config={config} conversationId="conv-3" fetchImpl={fetchImpl} persist={false} getUserToken={token}><Probe /></FrankieProvider>);
+    await waitFor(() => expect((screen.getByRole("button", { name: "Send" }) as HTMLButtonElement).disabled).toBe(false));
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    await waitFor(() => expect(calls).toContain("POST /v1/chat"));
+    fireEvent.click(screen.getByRole("button", { name: "Stop" }));
+    await waitFor(() => expect(calls).toContain("POST /v1/chat/stop"));
+    await waitFor(() => expect(state()).toBe("idle|assistant:done:Stopped."));
+  });
+});