@frankieai/react 0.2.18 → 0.2.19

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/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) {

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."));
+  });
+});