@runtypelabs/persona 4.19.0 → 4.20.0

package/src/ui.composer-action-visibility.test.ts

@@ -0,0 +1,202 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { createAgentExperience } from "./ui";
+import type { ComposerAction } from "./types";
+
+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 };
+};
+
+/** The store coalesces on a microtask, so state-driven syncs need a turn. */
+const flush = async (times = 4) => {
+  for (let i = 0; i < times; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await Promise.resolve();
+  }
+};
+
+const actionEl = (mount: HTMLElement, id: string) =>
+  mount.querySelector<HTMLElement>(`[data-persona-composer-action="${id}"]`);
+
+const typeInto = (mount: HTMLElement, value: string): void => {
+  const textarea = mount.querySelector<HTMLTextAreaElement>(
+    "[data-persona-composer-input]"
+  )!;
+  textarea.value = value;
+  textarea.dispatchEvent(new Event("input", { bubbles: true }));
+};
+
+const voiceAction = (patch: Partial<ComposerAction> = {}): ComposerAction =>
+  ({
+    id: "voice-mode",
+    placement: "end",
+    label: "Voice mode",
+    iconName: "mic",
+    onSelect: () => {},
+    ...patch,
+  }) as ComposerAction;
+
+describe("ComposerAction.visibility", () => {
+  beforeEach(() => {
+    window.scrollTo = vi.fn();
+  });
+
+  afterEach(() => {
+    controllers.splice(0).forEach((controller) => {
+      try {
+        controller.destroy();
+      } catch {
+        /* already destroyed in the test */
+      }
+    });
+    mounts.splice(0).forEach((mount) => mount.remove());
+    document.body.innerHTML = "";
+    window.localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it("mounts the control on every draft state under the default", async () => {
+    const { mount } = makeController({
+      composer: { actions: [voiceAction()] },
+    });
+
+    expect(actionEl(mount, "voice-mode")).toBeTruthy();
+    typeInto(mount, "Hello");
+    await flush();
+    expect(actionEl(mount, "voice-mode")).toBeTruthy();
+  });
+
+  it('"when-empty" drops the control out of the DOM once the draft has text', async () => {
+    const { mount } = makeController({
+      composer: { actions: [voiceAction({ visibility: "when-empty" })] },
+    });
+
+    await flush();
+    expect(actionEl(mount, "voice-mode")).toBeTruthy();
+
+    typeInto(mount, "Hello");
+    await flush();
+    // Removed, not faded: gone from layout and from tab order.
+    expect(actionEl(mount, "voice-mode")).toBeNull();
+
+    // Whitespace is not a draft.
+    typeInto(mount, "   ");
+    await flush();
+    expect(actionEl(mount, "voice-mode")).toBeTruthy();
+  });
+
+  it('"when-text" is the inverse of "when-empty" on the same state', async () => {
+    const { mount } = makeController({
+      composer: {
+        actions: [
+          voiceAction({ visibility: "when-empty" }),
+          voiceAction({ id: "improve", visibility: "when-text", label: "Improve" }),
+        ],
+      },
+    });
+
+    await flush();
+    expect(actionEl(mount, "voice-mode")).toBeTruthy();
+    expect(actionEl(mount, "improve")).toBeNull();
+
+    typeInto(mount, "Hello");
+    await flush();
+    expect(actionEl(mount, "voice-mode")).toBeNull();
+    expect(actionEl(mount, "improve")).toBeTruthy();
+  });
+
+  it('hides a "when-empty" control while streaming, and holds it across chunks', async () => {
+    const chunks = [
+      'data: {"type":"text_delta","delta":"one"}\n\n',
+      'data: {"type":"text_delta","delta":" two"}\n\n',
+    ];
+    let release: () => void = () => {};
+    const settled = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+    const encoder = new TextEncoder();
+    global.fetch = vi.fn().mockImplementation(
+      async () =>
+        ({
+          ok: true,
+          headers: new Headers({ "content-type": "text/event-stream" }),
+          body: new ReadableStream({
+            async start(controller) {
+              for (const chunk of chunks) {
+                controller.enqueue(encoder.encode(chunk));
+                // Each chunk is its own turn, so the action row re-syncs between
+                // them: a post-render patch would be visible here.
+                await Promise.resolve();
+              }
+              await settled;
+              controller.close();
+            },
+          }),
+        }) as unknown as Response
+    );
+
+    const { mount } = makeController({
+      composer: { actions: [voiceAction({ visibility: "when-empty" })] },
+    });
+
+    typeInto(mount, "Hello");
+    await flush();
+    mount
+      .querySelector<HTMLButtonElement>("[data-persona-composer-submit]")!
+      .click();
+
+    // The draft cleared on submit; the stream is what keeps the control hidden.
+    for (let i = 0; i < 12; i += 1) {
+      // eslint-disable-next-line no-await-in-loop
+      await flush();
+      expect(actionEl(mount, "voice-mode")).toBeNull();
+    }
+
+    release();
+    await flush(20);
+    expect(actionEl(mount, "voice-mode")).toBeTruthy();
+  });
+
+  it("stays hidden when the visible predicate says so, whatever the draft", async () => {
+    const { mount } = makeController({
+      composer: {
+        actions: [voiceAction({ visibility: "when-empty", visible: false })],
+      },
+    });
+
+    await flush();
+    expect(actionEl(mount, "voice-mode")).toBeNull();
+  });
+
+  it("follows a live update() of the visibility mode", async () => {
+    const { mount, controller } = makeController({
+      composer: { actions: [voiceAction()] },
+    });
+
+    typeInto(mount, "Hello");
+    await flush();
+    expect(actionEl(mount, "voice-mode")).toBeTruthy();
+
+    controller.update({
+      composer: { actions: [voiceAction({ visibility: "when-empty" })] },
+    });
+    await flush();
+    expect(actionEl(mount, "voice-mode")).toBeNull();
+  });
+});

package/src/ui.composer-models.test.ts

@@ -335,6 +335,43 @@ describe("composer model picker", () => {
       );
     });
 
+    it("returns the menu to the stylesheet fallback when an update unsets the token", () => {
+      const token = "--persona-components-composer-modelPicker-menuBackground";
+      const { mount, controller } = makeController({
+        ...popoverConfig(),
+        theme: {
+          components: { composer: { modelPicker: { menuBackground: "#1e1f20" } } },
+        },
+      });
+      expect(mount.style.getPropertyValue(token)).toBe("#1e1f20");
+      // The panel is portaled to document.body, so it never inherits the
+      // mount's theme vars. Stamped on the trigger here because jsdom's
+      // computed style does not inherit custom properties.
+      const button = trigger(mount)!;
+      button.style.setProperty(token, "#1e1f20");
+
+      button.click();
+      const panel = menu()!;
+      expect(panel.style.getPropertyValue(token)).toBe("#1e1f20");
+      button.click();
+
+      // Explicit undefined is the documented reset, so the mount stops
+      // carrying the var; the trigger's stand-in follows it.
+      controller.update({
+        theme: {
+          components: { composer: { modelPicker: { menuBackground: undefined } } },
+        },
+      });
+      expect(mount.style.getPropertyValue(token)).toBe("");
+      button.style.removeProperty(token);
+
+      // The menu outlives the update, so the next open has to clear the value
+      // the first one stamped; an empty inline value is the fallback state.
+      trigger(mount)!.click();
+      expect(menu()).toBe(panel);
+      expect(panel.style.getPropertyValue(token)).toBe("");
+    });
+
     it("shows the selected label on the closed control", () => {
       const { mount } = makeController(
         popoverConfig({ selectedModelId: "smart" })

package/src/ui.composer-modes.test.ts

@@ -326,3 +326,85 @@ describe("composer modes", () => {
     expect(panel.querySelector('[role="menuitem"]')?.textContent).toContain("Hidden");
   });
 });
+
+describe("modeGroups chipVisibility", () => {
+  beforeEach(() => {
+    window.scrollTo = vi.fn();
+  });
+
+  afterEach(() => {
+    controllers.splice(0).forEach((controller) => {
+      try {
+        controller.destroy();
+      } catch {
+        /* already destroyed */
+      }
+    });
+    mounts.splice(0).forEach((mount) => mount.remove());
+    document.body.innerHTML = "";
+    window.localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  const hiddenGroups: ComposerModeGroup[] = [
+    { id: "tool", selection: "single", chipVisibility: "hidden" },
+    { id: "style", selection: "multiple" },
+  ];
+
+  it("keeps the bar button but renders no chip for the opted-out group", async () => {
+    const { mount, controller } = makeController({
+      composer: { modes, modeGroups: hiddenGroups },
+    });
+
+    modeButton(mount, "search").click();
+    await flush();
+    expect(controller.getComposerState().activeModeIds).toEqual(["search"]);
+    expect(modeButton(mount, "search").getAttribute("aria-pressed")).toBe("true");
+    expect(chips(mount)).toHaveLength(0);
+  });
+
+  it("still chips a group that did not opt out", async () => {
+    const { mount } = makeController({
+      composer: { modes, modeGroups: hiddenGroups },
+    });
+
+    modeButton(mount, "search").click();
+    modeButton(mount, "concise").click();
+    await flush();
+    expect(
+      chips(mount).map((chip) => chip.getAttribute("data-persona-composer-mode"))
+    ).toEqual(["concise"]);
+  });
+
+  it("leaves no chip row gap when every active mode is suppressed", async () => {
+    const { mount } = makeController({
+      composer: {
+        modes,
+        modeGroups: hiddenGroups,
+        defaultActiveModeIds: ["search"],
+      },
+    });
+    await flush();
+    const row = chipRow(mount);
+    expect(row === null || row.style.display === "none").toBe(true);
+  });
+
+  it("follows a live update() that opts the group back in", async () => {
+    const { mount, controller } = makeController({
+      composer: {
+        modes,
+        modeGroups: hiddenGroups,
+        defaultActiveModeIds: ["search"],
+      },
+    });
+    await flush();
+    expect(chips(mount)).toHaveLength(0);
+
+    controller.update({ composer: { modes, modeGroups } });
+    await flush();
+    expect(
+      chips(mount).map((chip) => chip.getAttribute("data-persona-composer-mode"))
+    ).toEqual(["search"]);
+    expect(chipRow(mount)!.style.display).toBe("flex");
+  });
+});

package/src/ui.composer-overflow.test.ts

@@ -103,6 +103,84 @@ describe("composer overflow menu in the live widget", () => {
     vi.restoreAllMocks();
   });
 
+  it("forwards the panel surface tokens onto the portaled menu on open", () => {
+    const { mount } = makeController({
+      composer: {
+        actions: [action("folded", { presentation: "overflow" })],
+        actionOverflow: { enabled: true },
+      },
+    });
+    // The panel is portaled to document.body, so it never inherits the mount's
+    // theme vars. Stamped on the trigger here because jsdom's computed style
+    // does not inherit custom properties.
+    const trigger = triggerOf(mount)!;
+    trigger.style.setProperty(
+      "--persona-components-composer-overflowMenu-background",
+      "#353535"
+    );
+    trigger.style.setProperty(
+      "--persona-components-composer-overflowMenu-borderColor",
+      "rgba(255, 255, 255, 0.08)"
+    );
+
+    const panel = openPanel(mount)!;
+
+    expect(
+      panel.style.getPropertyValue(
+        "--persona-components-composer-overflowMenu-background"
+      )
+    ).toBe("#353535");
+    expect(
+      panel.style.getPropertyValue(
+        "--persona-components-composer-overflowMenu-borderColor"
+      )
+    ).toBe("rgba(255, 255, 255, 0.08)");
+    // Unset keys stamp nothing, so the stylesheet's fallback still stands.
+    expect(
+      panel.style.getPropertyValue(
+        "--persona-components-composer-overflowMenu-shadow"
+      )
+    ).toBe("");
+  });
+
+  it("returns the panel to the stylesheet fallback when an update unsets the token", () => {
+    const token = "--persona-components-composer-overflowMenu-background";
+    const { mount, controller } = makeController({
+      composer: {
+        actions: [action("folded", { presentation: "overflow" })],
+        actionOverflow: { enabled: true },
+      },
+      theme: {
+        components: { composer: { overflowMenu: { background: "#353535" } } },
+      },
+    });
+    expect(mount.style.getPropertyValue(token)).toBe("#353535");
+    // Stamped on the trigger for the same reason as the test above: jsdom's
+    // computed style does not inherit custom properties.
+    const trigger = triggerOf(mount)!;
+    trigger.style.setProperty(token, "#353535");
+
+    const panel = openPanel(mount)!;
+    expect(panel.style.getPropertyValue(token)).toBe("#353535");
+    triggerOf(mount)!.click();
+
+    // Explicit undefined is the documented reset, so the mount stops carrying
+    // the var; the trigger's stand-in follows it.
+    controller.update({
+      theme: {
+        components: { composer: { overflowMenu: { background: undefined } } },
+      },
+    });
+    expect(mount.style.getPropertyValue(token)).toBe("");
+    trigger.style.removeProperty(token);
+
+    // The panel outlives the update, so the next open has to clear the value
+    // the first one stamped; an empty inline value is the fallback state.
+    const reopened = openPanel(mount)!;
+    expect(reopened).toBe(panel);
+    expect(reopened.style.getPropertyValue(token)).toBe("");
+  });
+
   it("sorts the trigger at the 900 anchor by default", () => {
     const { mount } = makeController({
       composer: {