@runtypelabs/persona 4.7.0 → 4.8.0

package/src/ui.component-directive.test.ts

@@ -157,6 +157,110 @@ describe("component directive bubble: listener preservation across morphs", () =
     controller.destroy();
   });
 
+  it("renders a bubbleChrome:false component bare (no persona-message-bubble ancestor) under default config", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      parserType: "json",
+      enableComponentStreaming: true,
+      components: {},
+    } as unknown as Parameters<typeof createAgentExperience>[1]);
+
+    componentRegistry.register(
+      "BareCard",
+      ((props) => {
+        const el = document.createElement("div");
+        el.setAttribute("data-test-id", "bare-card");
+        el.textContent = String(props.label ?? "");
+        return el;
+      }) satisfies ComponentRenderer,
+      { bubbleChrome: false }
+    );
+
+    directiveMessage(controller, {
+      id: "bare-1",
+      rawContent: JSON.stringify({ component: "BareCard", props: { label: "hello" } }),
+    });
+
+    const card = mount.querySelector<HTMLElement>('[data-test-id="bare-card"]');
+    expect(card).not.toBeNull();
+    // No message-bubble chrome around the bare directive.
+    expect(card!.closest(".persona-message-bubble")).toBeNull();
+    // The bare stack wrapper is present instead.
+    expect(card!.closest('[data-persona-component-directive="true"]')).not.toBeNull();
+
+    controller.destroy();
+  });
+
+  it("wraps a component without bubbleChrome:false in the message bubble under default config", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      parserType: "json",
+      enableComponentStreaming: true,
+      components: {},
+    } as unknown as Parameters<typeof createAgentExperience>[1]);
+
+    componentRegistry.register(
+      "ChromeCard",
+      ((props) => {
+        const el = document.createElement("div");
+        el.setAttribute("data-test-id", "chrome-card");
+        el.textContent = String(props.label ?? "");
+        return el;
+      }) satisfies ComponentRenderer
+    );
+
+    directiveMessage(controller, {
+      id: "chrome-1",
+      rawContent: JSON.stringify({ component: "ChromeCard", props: { label: "hello" } }),
+    });
+
+    const card = mount.querySelector<HTMLElement>('[data-test-id="chrome-card"]');
+    expect(card).not.toBeNull();
+    expect(card!.closest(".persona-message-bubble")).not.toBeNull();
+
+    controller.destroy();
+  });
+
+  it("unwraps every component when wrapComponentDirectiveInBubble is false", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      parserType: "json",
+      enableComponentStreaming: true,
+      wrapComponentDirectiveInBubble: false,
+      components: {},
+    } as unknown as Parameters<typeof createAgentExperience>[1]);
+
+    // A component with default (chrome) options still renders bare when the
+    // global flag is off.
+    componentRegistry.register(
+      "ChromeCard",
+      ((props) => {
+        const el = document.createElement("div");
+        el.setAttribute("data-test-id", "chrome-card");
+        el.textContent = String(props.label ?? "");
+        return el;
+      }) satisfies ComponentRenderer
+    );
+
+    directiveMessage(controller, {
+      id: "off-1",
+      rawContent: JSON.stringify({ component: "ChromeCard", props: { label: "hello" } }),
+    });
+
+    const card = mount.querySelector<HTMLElement>('[data-test-id="chrome-card"]');
+    expect(card).not.toBeNull();
+    expect(card!.closest(".persona-message-bubble")).toBeNull();
+    expect(card!.closest('[data-persona-component-directive="true"]')).not.toBeNull();
+
+    controller.destroy();
+  });
+
   it("falls back to the standard render path when the directive component is not registered", () => {
     const mount = createMount();
     const controller = createAgentExperience(mount, {

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

@@ -1,11 +1,12 @@
 // @vitest-environment jsdom
 
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { createAgentExperience } from "./ui";
 
 describe("createAgentExperience composer-bar mode", () => {
   afterEach(() => {
+    vi.unstubAllGlobals();
     document.body.innerHTML = "";
     // The widget's default localStorage adapter persists chat history
     // across createAgentExperience calls. Clear it so each test starts
@@ -329,18 +330,26 @@ describe("createAgentExperience composer-bar mode", () => {
     controller.destroy();
   });
 
-  it("clicking the clear-chat button clears injected messages", () => {
+  it("clicking the clear-chat button clears messages and artifacts", () => {
+    vi.stubGlobal("matchMedia", () => ({ matches: false }));
     const mount = document.createElement("div");
     document.body.appendChild(mount);
 
     const controller = createAgentExperience(mount, {
       apiUrl: "https://api.example.com/chat",
       launcher: { mountMode: "composer-bar" },
+      features: { artifacts: { enabled: true } },
     });
 
     controller.injectAssistantMessage({ content: "hello there" });
     controller.injectUserMessage({ content: "ping" });
+    controller.upsertArtifact({
+      artifactType: "markdown",
+      title: "Generated analysis",
+      content: "# Revenue trend",
+    });
     expect(controller.getMessages().length).toBeGreaterThan(0);
+    expect(controller.getArtifacts()).toHaveLength(1);
 
     const clearChat = mount.querySelector<HTMLButtonElement>(
       "[aria-label='Clear chat'], [aria-label='Start over']"
@@ -349,6 +358,7 @@ describe("createAgentExperience composer-bar mode", () => {
     clearChat!.click();
 
     expect(controller.getMessages().length).toBe(0);
+    expect(controller.getArtifacts()).toHaveLength(0);
 
     controller.destroy();
   });
@@ -413,6 +423,54 @@ describe("createAgentExperience composer-bar mode", () => {
     controller.destroy();
   });
 
+  it("keeps the pill composer mounted when artifacts enable the split layout", () => {
+    const mount = document.createElement("div");
+    document.body.appendChild(mount);
+
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { mountMode: "composer-bar" },
+      features: { artifacts: { enabled: true } },
+    });
+
+    const pillRoot = mount.querySelector<HTMLElement>(".persona-widget-pill-root");
+    const composerInput = pillRoot?.querySelector<HTMLTextAreaElement>(
+      "[data-persona-composer-input]"
+    );
+    expect(pillRoot).not.toBeNull();
+    expect(composerInput).not.toBeNull();
+    expect(composerInput!.placeholder).toBeTruthy();
+
+    controller.open();
+    expect(pillRoot!.dataset.state).toBe("expanded");
+    expect(composerInput!.isConnected).toBe(true);
+
+    controller.destroy();
+  });
+
+  it("renders configured suggestion chips in the composer-bar footer", () => {
+    const mount = document.createElement("div");
+    document.body.appendChild(mount);
+
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { mountMode: "composer-bar" },
+      suggestionChips: ["Revenue trend", "Channel mix"],
+    });
+
+    const pillRoot = mount.querySelector<HTMLElement>(".persona-widget-pill-root");
+    const suggestions = pillRoot?.querySelector<HTMLElement>(
+      "[data-persona-composer-suggestions]"
+    );
+    expect(suggestions?.querySelectorAll("button")).toHaveLength(2);
+
+    controller.open();
+    expect(pillRoot!.dataset.state).toBe("expanded");
+    expect(suggestions!.isConnected).toBe(true);
+
+    controller.destroy();
+  });
+
   it("hides the container when collapsed and shows it (display:flex) when expanded", () => {
     const mount = document.createElement("div");
     document.body.appendChild(mount);