@runtypelabs/persona 4.23.2 → 4.25.0

package/src/ui.session-init.test.ts

@@ -0,0 +1,312 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createAgentExperience } from "./ui";
+import type { AgentWidgetConfig } from "./types";
+
+let controller: ReturnType<typeof createAgentExperience> | undefined;
+
+afterEach(() => {
+  controller?.destroy();
+  controller = undefined;
+  document.body.replaceChildren();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+type Reply = () => Response | Promise<Response>;
+
+const initResponse = () =>
+  Response.json({
+    sessionId: "session-1",
+    expiresAt: new Date(Date.now() + 600_000).toISOString(),
+    flow: { id: "agent-1", name: "Agent", description: null },
+    config: { welcomeMessage: null, placeholder: "Ask...", theme: null },
+  });
+
+function mountWidget(config: Partial<AgentWidgetConfig> = {}, initReplies: Reply[] = []) {
+  const inits: string[] = [];
+  const chats: string[] = [];
+  const other: string[] = [];
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (url: string) => {
+      if (url.endsWith("/v1/client/init")) {
+        const reply = initReplies[inits.length];
+        inits.push(url);
+        return reply ? reply() : initResponse();
+      }
+      if (url.endsWith("/v1/client/chat")) chats.push(url);
+      else other.push(url);
+      return new Response('data: {"type":"done"}\n\n', {
+        headers: { "Content-Type": "text/event-stream" },
+      });
+    })
+  );
+  const mount = document.createElement("div");
+  document.body.appendChild(mount);
+  controller = createAgentExperience(mount, {
+    apiUrl: "https://example.com",
+    clientToken: "ct_test_session_init",
+    agentId: "agent-1",
+    launcher: { enabled: false },
+    persistState: false,
+    ...config,
+  } as AgentWidgetConfig);
+  const textarea = mount.querySelector<HTMLTextAreaElement>("[data-persona-composer-input]")!;
+  const form = mount.querySelector<HTMLFormElement>("[data-persona-composer-form]")!;
+  const type = (value: string) => {
+    textarea.value = value;
+    textarea.dispatchEvent(
+      new InputEvent("input", { bubbles: true, inputType: "insertText", data: value.slice(-1) })
+    );
+  };
+  const submit = () =>
+    form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+  return { mount, textarea, form, type, submit, inits, chats, other };
+}
+
+// Lets any fire-and-forget init reach fetch before asserting it did not.
+const settle = async () => {
+  for (let i = 0; i < 5; i += 1) await new Promise((r) => setTimeout(r, 0));
+};
+
+describe("sessionInit: 'input' (default)", () => {
+  it("does not init on mount or on focus, and inits on the first keystroke", async () => {
+    const w = mountWidget({ autoFocusInput: true });
+    await settle();
+    w.textarea.focus();
+    w.textarea.dispatchEvent(new Event("pointerdown", { bubbles: true }));
+    await settle();
+    expect(w.inits).toHaveLength(0);
+
+    w.type("h");
+    await vi.waitFor(() => expect(w.inits).toHaveLength(1));
+    w.type("he");
+    w.type("hel");
+    await settle();
+    expect(w.inits).toHaveLength(1);
+  });
+
+  it("ignores whitespace-only input and programmatic value changes", async () => {
+    const w = mountWidget();
+    w.type("   ");
+    // Widget-internal edits (draft restore, setMessage, history recall)
+    // dispatch a plain Event with no inputType.
+    w.textarea.value = "restored draft";
+    w.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    controller!.setMessage("from the host");
+    await settle();
+    expect(w.inits).toHaveLength(0);
+  });
+
+  it("a send right after the first keystroke issues exactly one init", async () => {
+    const w = mountWidget();
+    w.type("hi");
+    w.submit();
+    await vi.waitFor(() => expect(w.chats).toHaveLength(1));
+    expect(w.inits).toHaveLength(1);
+  });
+
+  it("a send while the early init is in flight reuses it", async () => {
+    let release!: () => void;
+    const gate = new Promise<void>((resolve) => (release = resolve));
+    const w = mountWidget({}, [
+      async () => {
+        await gate;
+        return initResponse();
+      },
+    ]);
+    w.type("hi");
+    await vi.waitFor(() => expect(w.inits).toHaveLength(1));
+    w.submit();
+    await settle();
+    expect(w.chats).toHaveLength(0);
+    release();
+    await vi.waitFor(() => expect(w.chats).toHaveLength(1));
+    expect(w.inits).toHaveLength(1);
+  });
+
+  it("keeps the server welcome ahead of a send that raced the early init", async () => {
+    let release!: () => void;
+    const gate = new Promise<void>((resolve) => (release = resolve));
+    const w = mountWidget({}, [
+      async () => {
+        await gate;
+        return Response.json({
+          sessionId: "session-1",
+          expiresAt: new Date(Date.now() + 600_000).toISOString(),
+          flow: { id: "agent-1", name: "Agent", description: null },
+          config: { welcomeMessage: "Hi! How can I help?", placeholder: "Ask...", theme: null },
+        });
+      },
+    ]);
+    w.type("hello");
+    await vi.waitFor(() => expect(w.inits).toHaveLength(1));
+    w.submit();
+    await settle();
+    release();
+    await vi.waitFor(() => expect(w.chats).toHaveLength(1));
+    await vi.waitFor(() =>
+      expect(controller!.getMessages().map((m) => [m.role, m.content]).slice(0, 2)).toEqual([
+        ["assistant", "Hi! How can I help?"],
+        ["user", "hello"],
+      ])
+    );
+    expect(w.inits).toHaveLength(1);
+  });
+
+  it("swallows an early-init failure and the send retries init", async () => {
+    const onSessionExpired = vi.fn();
+    const w = mountWidget({ onSessionExpired }, [
+      () => Response.json({ error: "boom" }, { status: 500 }),
+    ]);
+    w.type("h");
+    await vi.waitFor(() => expect(w.inits).toHaveLength(1));
+    await settle();
+    w.type("hi");
+    await settle();
+    expect(w.inits).toHaveLength(1);
+    expect(onSessionExpired).not.toHaveBeenCalled();
+    expect(w.mount.querySelector('[data-message-id^="error"]')).toBeNull();
+
+    w.submit();
+    await vi.waitFor(() => expect(w.chats).toHaveLength(1));
+    expect(w.inits).toHaveLength(2);
+  });
+});
+
+describe("sessionInit: 'focus'", () => {
+  it("does not init on autofocus or programmatic focus", async () => {
+    const w = mountWidget({ sessionInit: "focus", autoFocusInput: true });
+    await settle();
+    w.textarea.focus();
+    await settle();
+    expect(w.inits).toHaveLength(0);
+  });
+
+  it("inits on a pointer focus of the composer", async () => {
+    const w = mountWidget({ sessionInit: "focus" });
+    w.textarea.dispatchEvent(new Event("pointerdown", { bubbles: true }));
+    await vi.waitFor(() => expect(w.inits).toHaveLength(1));
+  });
+
+  it("inits when the visitor tabs into the composer", async () => {
+    const w = mountWidget({ sessionInit: "focus" });
+    w.textarea.dispatchEvent(new KeyboardEvent("keyup", { key: "Tab", bubbles: true }));
+    await vi.waitFor(() => expect(w.inits).toHaveLength(1));
+  });
+});
+
+describe("sessionInit: 'send'", () => {
+  it("inits only on send", async () => {
+    const w = mountWidget({ sessionInit: "send" });
+    w.textarea.dispatchEvent(new Event("pointerdown", { bubbles: true }));
+    w.type("hi");
+    await settle();
+    expect(w.inits).toHaveLength(0);
+    w.submit();
+    await vi.waitFor(() => expect(w.chats).toHaveLength(1));
+    expect(w.inits).toHaveLength(1);
+  });
+});
+
+describe("sessionInit: 'mount'", () => {
+  it("inits on mount, as before this option existed", async () => {
+    const w = mountWidget({ sessionInit: "mount" });
+    await vi.waitFor(() => expect(w.inits).toHaveLength(1));
+  });
+});
+
+describe("custom sessionInit hooks", () => {
+  it("a function trigger inits when the host calls warm (e.g. on hover)", async () => {
+    const cleanup = vi.fn();
+    const hook = vi.fn(({ warm, mount }: { warm: () => void; mount: HTMLElement }) => {
+      mount.addEventListener("pointerenter", warm);
+      return cleanup;
+    });
+    const w = mountWidget({ sessionInit: hook });
+    expect(hook).toHaveBeenCalledTimes(1);
+    w.type("hi");
+    await settle();
+    expect(w.inits).toHaveLength(0);
+
+    w.mount.dispatchEvent(new Event("pointerenter"));
+    w.mount.dispatchEvent(new Event("pointerenter"));
+    await vi.waitFor(() => expect(w.inits).toHaveLength(1));
+    await settle();
+    expect(w.inits).toHaveLength(1);
+
+    controller!.destroy();
+    controller = undefined;
+    expect(cleanup).toHaveBeenCalledTimes(1);
+  });
+
+  it("update() swaps a custom trigger: old cleanup runs, new hook starts", async () => {
+    const firstCleanup = vi.fn();
+    const first = vi.fn(() => firstCleanup);
+    const secondCleanup = vi.fn();
+    const second = vi.fn(({ warm, mount }: { warm: () => void; mount: HTMLElement }) => {
+      mount.addEventListener("pointerenter", warm);
+      return secondCleanup;
+    });
+    const w = mountWidget({ sessionInit: first });
+    expect(first).toHaveBeenCalledTimes(1);
+    controller!.update({ sessionInit: second });
+    expect(firstCleanup).toHaveBeenCalledTimes(1);
+    expect(second).toHaveBeenCalledTimes(1);
+    // An unrelated update does not re-run the same hook.
+    controller!.update({ debug: false });
+    expect(second).toHaveBeenCalledTimes(1);
+    w.mount.dispatchEvent(new Event("pointerenter"));
+    await vi.waitFor(() => expect(w.inits).toHaveLength(1));
+    controller!.update({ sessionInit: "send" });
+    expect(secondCleanup).toHaveBeenCalledTimes(1);
+  });
+
+  it("a throwing hook cleanup does not block the replacement hook or destroy", async () => {
+    const throwingCleanup = vi.fn(() => {
+      throw new Error("host bug");
+    });
+    const next = vi.fn();
+    mountWidget({ sessionInit: () => throwingCleanup });
+    expect(() => controller!.update({ sessionInit: next })).not.toThrow();
+    expect(throwingCleanup).toHaveBeenCalledTimes(1);
+    expect(next).toHaveBeenCalledTimes(1);
+    // The failed cleanup is not retried on later updates.
+    controller!.update({ sessionInit: "send" });
+    expect(throwingCleanup).toHaveBeenCalledTimes(1);
+    controller!.update({ sessionInit: () => throwingCleanup });
+    expect(() => controller!.destroy()).not.toThrow();
+    controller = undefined;
+    expect(throwingCleanup).toHaveBeenCalledTimes(2);
+  });
+
+  it("controller.warmSession() inits imperatively", async () => {
+    const w = mountWidget({ sessionInit: "send" });
+    controller!.warmSession();
+    controller!.warmSession();
+    await vi.waitFor(() => expect(w.inits).toHaveLength(1));
+    await settle();
+    expect(w.inits).toHaveLength(1);
+  });
+});
+
+describe("non-client-token mode", () => {
+  it("proxy mode ignores sessionInit and never calls /v1/client/init", async () => {
+    const hook = vi.fn();
+    const w = mountWidget({
+      clientToken: undefined,
+      apiUrl: "https://example.com/api/chat/dispatch",
+      sessionInit: "mount",
+    });
+    w.textarea.dispatchEvent(new Event("pointerdown", { bubbles: true }));
+    w.type("hi");
+    controller!.warmSession();
+    await settle();
+    expect(w.inits).toHaveLength(0);
+    expect(w.other).toHaveLength(0);
+    controller!.update({ sessionInit: hook });
+    expect(hook).not.toHaveBeenCalled();
+  });
+});

package/src/ui.status-indicator.test.ts

@@ -0,0 +1,82 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createAgentExperience } from "./ui";
+import type { AgentWidgetConfig } from "./types";
+import { isStatusIndicatorVisible } from "./utils/status-indicator";
+
+const controllers: ReturnType<typeof createAgentExperience>[] = [];
+const mountWidget = (config: Partial<AgentWidgetConfig>) => {
+  window.scrollTo = vi.fn();
+  const mount = document.createElement("div");
+  document.body.append(mount);
+  const controller = createAgentExperience(mount, {
+    apiUrl: "/dispatch", persistState: false, launcher: { enabled: false }, ...config,
+  });
+  controllers.push(controller);
+  return {
+    controller,
+    status: mount.querySelector<HTMLElement>("[data-persona-composer-status]")!,
+    form: mount.querySelector<HTMLElement>("[data-persona-composer-form]")!,
+  };
+};
+afterEach(() => {
+  controllers.splice(0).forEach((controller) => controller.destroy());
+  document.body.replaceChildren();
+  vi.restoreAllMocks();
+});
+
+describe.each([false, true])("status indicator (v5=%s)", (v5Defaults) => {
+  it("selects the default mode and placement", () => {
+    const { status, form } = mountWidget({ future: { v5Defaults } });
+    expect(status.style.display).toBe(v5Defaults ? "none" : "");
+    expect(v5Defaults ? status.nextElementSibling : form.nextElementSibling)
+      .toBe(v5Defaults ? form : status);
+  });
+
+  it("shows transient connection and error states, hiding idle and streaming", () => {
+    const { controller, status, form } = mountWidget({
+      future: { v5Defaults }, statusIndicator: { mode: "transient", errorText: "Try again" },
+    });
+    expect(status.nextElementSibling).toBe(form);
+    for (const state of ["connecting", "connected", "error", "idle"] as const) {
+      controller.injectTestMessage({ type: "status", status: state });
+      expect(status.style.display, state).toBe(state === "connecting" || state === "error" ? "" : "none");
+      if (state === "error") expect(status.textContent).toBe("Try again");
+    }
+  });
+
+  it("honors explicit visibility and permits live mode changes", () => {
+    const { controller, status, form } = mountWidget({
+      future: { v5Defaults }, statusIndicator: { mode: "always", idleText: "Ready" },
+    });
+    expect(form.nextElementSibling).toBe(status);
+    expect(status.style.display).toBe("");
+    controller.update({ statusIndicator: { mode: "transient" } });
+    expect(status.nextElementSibling).toBe(form);
+    expect(status.style.display).toBe("none");
+    controller.update({ statusIndicator: { visible: false } });
+    controller.injectTestMessage({ type: "status", status: "connecting" });
+    expect(status.style.display).toBe("none");
+    controller.update({ statusIndicator: { mode: "always", visible: true } });
+    expect(form.nextElementSibling).toBe(status);
+    expect(status.style.display).toBe("");
+  });
+
+  it("keeps a composer lock reason readable in transient mode", () => {
+    const { controller, status } = mountWidget({
+      future: { v5Defaults }, statusIndicator: { mode: "transient" },
+      composer: { inputDisabled: { reason: "Sign in to continue" } },
+    });
+    expect(status.textContent).toBe("Sign in to continue");
+    expect(status.style.display).toBe("");
+    controller.injectTestMessage({ type: "status", status: "connected" });
+    expect(status.textContent).toBe("Sign in to continue");
+    controller.update({ composer: { inputDisabled: false } });
+    expect(status.style.display).toBe("none");
+  });
+});
+
+it.each(["paused", "resuming"])("shows reconnect status %s in transient mode", (status) => {
+  expect(isStatusIndicatorVisible({ mode: "transient" }, status)).toBe(true);
+  expect(isStatusIndicatorVisible({ mode: "transient", visible: false }, status)).toBe(false);
+});

package/src/ui.suggest-replies.test.ts

@@ -189,6 +189,17 @@ describe("suggest_replies chips UI", () => {
     scrolling.controller.destroy();
   });
 
+  it("caps legacy suggestion chips at the same four-item starter default", () => {
+    const { mount, controller } = makeController({
+      suggestionChips: ["One", "Two", "Three", "Four", "Five"],
+    });
+
+    expect(mount.querySelectorAll("button.persona-suggestion")).toHaveLength(4);
+    expect(chipButtons(mount, "Five")).toHaveLength(0);
+
+    controller.destroy();
+  });
+
   it("wraps follow-ups by default", () => {
     // 2-4 compact chips always fit at widget width; a scroll strip hides
     // most of the set behind a fade, so scroll is opt-in for large sets.