@runtypelabs/persona 4.15.0 → 4.16.0

package/src/ui.content-width.test.ts

@@ -0,0 +1,91 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it } from "vitest";
+
+import { createAgentExperience } from "./ui";
+
+const mounts: HTMLElement[] = [];
+const controllers: ReturnType<typeof createAgentExperience>[] = [];
+
+const makeController = (config: Record<string, unknown> = {}) => {
+  const mount = document.createElement("div");
+  document.body.appendChild(mount);
+  mounts.push(mount);
+  const controller = createAgentExperience(mount, {
+    apiUrl: "https://api.example.com/chat",
+    launcher: { enabled: false },
+    persistState: false,
+    suggestionChips: [],
+    ...config,
+  } as unknown as Parameters<typeof createAgentExperience>[1]);
+  controllers.push(controller);
+  return { mount, controller };
+};
+
+const wrapper = (mount: HTMLElement) =>
+  mount.querySelector<HTMLElement>("#persona-scroll-container > .persona-widget-messages")!;
+
+describe("default content column", () => {
+  afterEach(() => {
+    controllers.splice(0).forEach((controller) => controller.destroy());
+    mounts.splice(0).forEach((mount) => mount.remove());
+    document.body.innerHTML = "";
+  });
+
+  it("keeps the transcript wrapper :empty pre-conversation so CSS drops it from the flex flow", () => {
+    // The stylesheet's .persona-widget-messages:empty { display: none } only
+    // works if nothing seeds the wrapper with placeholder nodes.
+    const { mount, controller } = makeController();
+    const messagesWrapper = wrapper(mount);
+    expect(messagesWrapper.matches(":empty")).toBe(true);
+
+    controller.injectUserMessage({ content: "hi" });
+    expect(messagesWrapper.matches(":empty")).toBe(false);
+  });
+
+  it("caps and centers the transcript at 768px by default", () => {
+    const { mount } = makeController();
+    const messagesWrapper = wrapper(mount);
+    expect(messagesWrapper.style.maxWidth).toBe("768px");
+    expect(messagesWrapper.style.marginLeft).toBe("auto");
+    expect(messagesWrapper.style.marginRight).toBe("auto");
+    expect(messagesWrapper.style.width).toBe("100%");
+  });
+
+  it("honors an explicit layout.contentMaxWidth", () => {
+    const { mount } = makeController({ layout: { contentMaxWidth: "90ch" } });
+    expect(wrapper(mount).style.maxWidth).toBe("90ch");
+  });
+
+  it("opts out with \"none\" for a full-width column", () => {
+    const { mount } = makeController({ layout: { contentMaxWidth: "none" } });
+    expect(wrapper(mount).style.maxWidth).toBe("none");
+  });
+
+  it("caps the composer status text to the same column as the composer form", () => {
+    const { mount, controller } = makeController();
+    const statusText = mount.querySelector<HTMLElement>("[data-persona-composer-status]")!;
+    expect(statusText.style.maxWidth).toBe("768px");
+    expect(statusText.style.marginLeft).toBe("auto");
+    expect(statusText.style.marginRight).toBe("auto");
+
+    controller.update({ layout: { contentMaxWidth: "90ch" } });
+    expect(statusText.style.maxWidth).toBe("90ch");
+
+    controller.update({ layout: { contentMaxWidth: "" } });
+    expect(statusText.style.maxWidth).toBe("");
+    expect(statusText.style.marginLeft).toBe("");
+  });
+
+  it("publishes the resolved column as a CSS var for plugin content", () => {
+    const { mount, controller } = makeController();
+    expect(
+      mount.style.getPropertyValue("--persona-content-max-width")
+    ).toBe("768px");
+
+    controller.update({ layout: { contentMaxWidth: "90ch" } });
+    expect(
+      mount.style.getPropertyValue("--persona-content-max-width")
+    ).toBe("90ch");
+  });
+});

package/src/ui.docked.test.ts

@@ -27,24 +27,27 @@ describe("createAgentExperience docked mode", () => {
     });
 
     const wrapper = mount.firstElementChild as HTMLElement | null;
-    const launcherButton = mount.lastElementChild as HTMLButtonElement | null;
+    // The launcher mounts inside its surface wrapper; visibility is driven on
+    // the wrapper so a teaser bubble hides with the button.
+    const launcherSurface = mount.lastElementChild as HTMLElement | null;
+    const launcherButton = launcherSurface?.querySelector("button") ?? null;
 
     expect(wrapper).not.toBeNull();
     expect(wrapper?.style.display).toBe("flex");
     expect(launcherButton).not.toBeNull();
     expect(launcherButton?.tagName).toBe("BUTTON");
-    expect(launcherButton?.style.display).toBe("none");
+    expect(launcherSurface?.style.display).toBe("none");
     expect(launcherButton?.className).toContain("persona-mt-4");
 
     controller.close();
 
     expect(wrapper?.style.display).toBe("none");
-    expect(launcherButton?.style.display).toBe("none");
+    expect(launcherSurface?.style.display).toBe("none");
 
     controller.open();
 
     expect(wrapper?.style.display).toBe("flex");
-    expect(launcherButton?.style.display).toBe("none");
+    expect(launcherSurface?.style.display).toBe("none");
 
     controller.destroy();
   });

package/src/ui.launcher-teaser.test.ts

@@ -0,0 +1,162 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { createAgentExperience } from "./ui";
+import { mount as mountCriticalLauncher } from "./launcher-global";
+
+const TEASER = "[data-persona-launcher-teaser]";
+
+const createMount = () => {
+  const mount = document.createElement("div");
+  document.body.appendChild(mount);
+  return mount;
+};
+
+let keyCounter = 0;
+const nextPrefix = () => `ui-teaser-test-${++keyCounter}-`;
+
+describe("launcher teaser", () => {
+  beforeEach(() => {
+    window.scrollTo = vi.fn();
+    window.localStorage.clear();
+    window.sessionStorage.clear();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  it("renders the same teaser from the full widget and the critical bundle", () => {
+    const prefix = nextPrefix();
+    const config = {
+      apiUrl: "https://api.example.com/chat",
+      persistState: { keyPrefix: prefix },
+      launcher: { teaser: { text: "Questions about pricing?" } },
+    };
+
+    const host = createMount();
+    const controller = createAgentExperience(host, config);
+    const eager = host.querySelector<HTMLElement>(TEASER);
+
+    const criticalTarget = createMount();
+    const critical = mountCriticalLauncher({
+      target: criticalTarget,
+      config,
+      onOpen: () => {},
+    });
+    const deferred = criticalTarget.querySelector<HTMLElement>(TEASER);
+
+    expect(eager).not.toBeNull();
+    expect(deferred).not.toBeNull();
+    expect(deferred!.outerHTML).toBe(eager!.outerHTML);
+    expect(deferred!.parentElement!.getAttribute("data-teaser")).toBe(
+      eager!.parentElement!.getAttribute("data-teaser")
+    );
+
+    critical.destroy();
+    controller.destroy();
+  });
+
+  it("live-updates the teaser through controller.update()", () => {
+    const prefix = nextPrefix();
+    const host = createMount();
+    const controller = createAgentExperience(host, {
+      apiUrl: "https://api.example.com/chat",
+      persistState: { keyPrefix: prefix },
+    });
+
+    expect(host.querySelector(TEASER)).toBeNull();
+
+    controller.update({ launcher: { teaser: { text: "Need a hand?" } } });
+    const teaser = host.querySelector<HTMLElement>(TEASER);
+    expect(teaser).not.toBeNull();
+    expect(teaser!.querySelector("button")!.textContent).toBe("Need a hand?");
+
+    controller.update({ launcher: { teaser: { text: "Still here to help" } } });
+    expect(host.querySelector<HTMLElement>(TEASER)!.querySelector("button")!.textContent).toBe(
+      "Still here to help"
+    );
+
+    controller.update({ launcher: { teaser: undefined } });
+    expect(host.querySelector(TEASER)).toBeNull();
+
+    controller.destroy();
+  });
+
+  it("suppresses the teaser when the panel starts open", () => {
+    vi.useFakeTimers();
+    const prefix = nextPrefix();
+    const host = createMount();
+    const controller = createAgentExperience(host, {
+      apiUrl: "https://api.example.com/chat",
+      persistState: { keyPrefix: prefix },
+      launcher: { autoExpand: true, teaser: { text: "Need a hand?" } },
+    });
+
+    vi.advanceTimersByTime(1000);
+    expect(host.querySelector<HTMLElement>(TEASER)!.hidden).toBe(true);
+
+    controller.destroy();
+  });
+
+  it("suppresses the teaser when restored open state opens the panel", () => {
+    vi.useFakeTimers();
+    const prefix = nextPrefix();
+    window.sessionStorage.setItem(`${prefix}widget-open`, "true");
+    const host = createMount();
+    const controller = createAgentExperience(host, {
+      apiUrl: "https://api.example.com/chat",
+      persistState: { keyPrefix: prefix, persist: { openState: true } },
+      launcher: { teaser: { text: "Need a hand?" } },
+    });
+
+    vi.advanceTimersByTime(1000);
+
+    expect(host.querySelector<HTMLElement>(TEASER)!.hidden).toBe(true);
+    expect(window.localStorage.getItem(`${prefix}teaser-dismissed`)).toBeNull();
+
+    controller.destroy();
+  });
+
+  it("suppresses the teaser when onStateLoaded requests an open", () => {
+    vi.useFakeTimers();
+    const prefix = nextPrefix();
+    const host = createMount();
+    const controller = createAgentExperience(host, {
+      apiUrl: "https://api.example.com/chat",
+      persistState: { keyPrefix: prefix },
+      launcher: { teaser: { text: "Need a hand?" } },
+      onStateLoaded: (state) => ({ state, open: true }),
+    });
+
+    vi.advanceTimersByTime(1000);
+
+    expect(host.querySelector<HTMLElement>(TEASER)!.hidden).toBe(true);
+    expect(window.localStorage.getItem(`${prefix}teaser-dismissed`)).toBeNull();
+
+    controller.destroy();
+  });
+
+  it("clears the pending teaser timer when the widget is destroyed", () => {
+    vi.useFakeTimers();
+    const prefix = nextPrefix();
+    const host = createMount();
+    const controller = createAgentExperience(host, {
+      apiUrl: "https://api.example.com/chat",
+      persistState: { keyPrefix: prefix },
+      launcher: { teaser: { text: "Need a hand?", delayMs: 5000 } },
+    });
+
+    const teaser = host.querySelector<HTMLElement>(TEASER);
+    expect(teaser!.hidden).toBe(true);
+
+    controller.destroy();
+    vi.advanceTimersByTime(10000);
+
+    expect(teaser!.hidden).toBe(true);
+    expect(host.querySelector(TEASER)).toBeNull();
+  });
+});