@runtypelabs/persona 3.9.2 → 3.10.1

package/src/ui.attachments-drop.test.ts

@@ -0,0 +1,188 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { createAgentExperience } from "./ui";
+import { AttachmentManager } from "./utils/attachment-manager";
+
+const createMount = () => {
+  const mount = document.createElement("div");
+  document.body.appendChild(mount);
+  return mount;
+};
+
+/** jsdom does not expose `DataTransfer`; real browsers set `dropEffect` on dragover. */
+function createFileDataTransfer(files: File[]): DataTransfer {
+  const list: File[] = [...files];
+  const fileList = list as unknown as FileList;
+  return {
+    dropEffect: "none",
+    effectAllowed: "all",
+    files: fileList,
+    items: {
+      add: () => {},
+      clear: () => {},
+      remove: () => {}
+    } as unknown as DataTransferItemList,
+    types: files.length > 0 ? ["Files"] : [],
+    clearData: () => {},
+    getData: () => "",
+    setData: () => {},
+    setDragImage: () => {}
+  } as unknown as DataTransfer;
+}
+
+function createDragEvent(type: string, dataTransfer: DataTransfer): DragEvent {
+  const ev = new Event(type, { bubbles: true, cancelable: true }) as unknown as DragEvent;
+  Object.defineProperty(ev, "dataTransfer", { value: dataTransfer, enumerable: true });
+  return ev;
+}
+
+describe("createAgentExperience attachment file drop", () => {
+  beforeEach(() => {
+    vi.stubGlobal("requestAnimationFrame", (cb: (time: number) => void) => {
+      cb(0);
+      return 1;
+    });
+    vi.stubGlobal("cancelAnimationFrame", () => {});
+    window.scrollTo = vi.fn();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("calls AttachmentManager.handleFiles when files are dropped on the mount", () => {
+    const handleFilesSpy = vi.spyOn(AttachmentManager.prototype, "handleFiles");
+
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      attachments: { enabled: true, maxFiles: 4 },
+    });
+
+    const file = new File(["x"], "test.png", { type: "image/png" });
+    const dt = createFileDataTransfer([file]);
+
+    // dragover/drop are on mount so the browser default is suppressed everywhere
+    const dragOver = createDragEvent("dragover", dt);
+    mount.dispatchEvent(dragOver);
+    expect(dragOver.defaultPrevented).toBe(true);
+    expect(dt.dropEffect).toBe("copy");
+
+    const drop = createDragEvent("drop", dt);
+    mount.dispatchEvent(drop);
+    expect(drop.defaultPrevented).toBe(true);
+
+    expect(handleFilesSpy).toHaveBeenCalledTimes(1);
+    const passed = handleFilesSpy.mock.calls[0]?.[0] as File[];
+    expect(passed).toHaveLength(1);
+    expect(passed[0]?.name).toBe("test.png");
+
+    handleFilesSpy.mockRestore();
+    controller.destroy();
+  });
+
+  it("shows drop-active highlight on container during dragenter", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      attachments: { enabled: true, maxFiles: 4 },
+    });
+
+    const container = mount.querySelector(".persona-widget-container")!;
+    const file = new File(["x"], "test.png", { type: "image/png" });
+    const dt = createFileDataTransfer([file]);
+
+    container.dispatchEvent(createDragEvent("dragenter", dt));
+    expect(container.classList.contains("persona-attachment-drop-active")).toBe(true);
+
+    container.dispatchEvent(createDragEvent("dragleave", dt));
+    expect(container.classList.contains("persona-attachment-drop-active")).toBe(false);
+
+    controller.destroy();
+  });
+
+  it("renders drop overlay with icon inside container", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      attachments: { enabled: true, maxFiles: 4 },
+    });
+
+    const overlay = mount.querySelector(".persona-attachment-drop-overlay");
+    expect(overlay).not.toBeNull();
+    expect(overlay!.querySelector("svg")).not.toBeNull();
+
+    controller.destroy();
+  });
+
+  it("applies custom dropOverlay config as CSS variables", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      attachments: {
+        enabled: true,
+        maxFiles: 4,
+        dropOverlay: {
+          background: "rgba(255, 0, 0, 0.1)",
+          backdropBlur: "12px",
+          border: "2px solid red",
+          inset: "8px",
+          iconName: "image-plus",
+          label: "Drop here",
+        },
+      },
+    });
+
+    const overlay = mount.querySelector<HTMLElement>(".persona-attachment-drop-overlay")!;
+    expect(overlay).not.toBeNull();
+    expect(overlay.style.getPropertyValue("--persona-drop-overlay-bg")).toBe("rgba(255, 0, 0, 0.1)");
+    expect(overlay.style.getPropertyValue("--persona-drop-overlay-blur")).toBe("12px");
+    expect(overlay.style.getPropertyValue("--persona-drop-overlay-border")).toBe("2px solid red");
+    expect(overlay.style.getPropertyValue("--persona-drop-overlay-inset")).toBe("8px");
+
+    const label = overlay.querySelector(".persona-drop-overlay-label");
+    expect(label).not.toBeNull();
+    expect(label!.textContent).toBe("Drop here");
+
+    controller.destroy();
+  });
+
+  it("does not render drop overlay when attachments are disabled", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      attachments: { enabled: false },
+    });
+
+    const overlay = mount.querySelector(".persona-attachment-drop-overlay");
+    expect(overlay).toBeNull();
+
+    controller.destroy();
+  });
+
+  it("does not prevent dragover when attachments are disabled", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      attachments: { enabled: false },
+    });
+
+    const file = new File(["x"], "test.png", { type: "image/png" });
+    const dt = createFileDataTransfer([file]);
+
+    const dragOver = createDragEvent("dragover", dt);
+    mount.dispatchEvent(dragOver);
+    expect(dragOver.defaultPrevented).toBe(false);
+
+    controller.destroy();
+  });
+});

package/src/ui.scroll.test.ts

@@ -135,6 +135,36 @@ const emitReasoningMessage = (
   });
 };
 
+const emitToolMessage = (
+  controller: ReturnType<typeof createAgentExperience>,
+  {
+    id = STREAM_MESSAGE_ID,
+    status = "running",
+    chunks,
+  }: {
+    id?: string;
+    status?: "pending" | "running" | "complete";
+    chunks: string[];
+  }
+) => {
+  controller.injectTestMessage({
+    type: "message",
+    message: {
+      id,
+      role: "assistant",
+      content: "",
+      createdAt: STREAM_CREATED_AT,
+      streaming: status !== "complete",
+      variant: "tool",
+      toolCall: {
+        id,
+        status,
+        chunks,
+      }
+    }
+  });
+};
+
 const createCustomComposer = () => {
   const footer = document.createElement("div");
   footer.className = "persona-widget-footer";
@@ -368,6 +398,126 @@ describe("createAgentExperience streaming scroll", () => {
     controller.destroy();
   });
 
+  it("keeps following collapsed tool preview updates while active", () => {
+    const raf = installRafMock();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: {
+        toolCallDisplay: {
+          activePreview: true,
+        },
+      },
+    } as any);
+
+    const scrollContainer = mount.querySelector<HTMLElement>("#persona-scroll-container");
+    expect(scrollContainer).not.toBeNull();
+
+    const metrics = installScrollMetrics(scrollContainer!, {
+      scrollHeight: 980,
+      clientHeight: 400
+    });
+
+    emitStreamingStatus(controller);
+    emitToolMessage(controller, { chunks: ["Loaded tools"] });
+    raf.flush();
+
+    expect(metrics.getScrollTop()).toBe(metrics.getBottomScrollTop());
+
+    metrics.setScrollHeight(1045);
+    emitToolMessage(controller, {
+      chunks: ["Loaded tools", "\nFetched platform documentation"]
+    });
+    raf.flush();
+
+    expect(metrics.getScrollTop()).toBe(metrics.getBottomScrollTop());
+
+    controller.destroy();
+  });
+
+  it("keeps following grouped tool sequences as new tool rows arrive", () => {
+    const raf = installRafMock();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: {
+        toolCallDisplay: {
+          grouped: true,
+        },
+      },
+    } as any);
+
+    const scrollContainer = mount.querySelector<HTMLElement>("#persona-scroll-container");
+    expect(scrollContainer).not.toBeNull();
+
+    const metrics = installScrollMetrics(scrollContainer!, {
+      scrollHeight: 960,
+      clientHeight: 400
+    });
+
+    emitStreamingStatus(controller);
+    emitToolMessage(controller, { id: "tool-1", chunks: ["Loaded tools"] });
+    raf.flush();
+
+    expect(metrics.getScrollTop()).toBe(metrics.getBottomScrollTop());
+
+    metrics.setScrollHeight(1030);
+    emitToolMessage(controller, { id: "tool-2", chunks: ["Fetched platform documentation"] });
+    raf.flush();
+
+    expect(metrics.getScrollTop()).toBe(metrics.getBottomScrollTop());
+
+    controller.destroy();
+  });
+
+  it("ignores layout-driven scroll events before a scheduled auto-scroll starts", () => {
+    const raf = installRafMock();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: {
+        toolCallDisplay: {
+          activePreview: true,
+        },
+      },
+    } as any);
+
+    const scrollContainer = mount.querySelector<HTMLElement>("#persona-scroll-container");
+    expect(scrollContainer).not.toBeNull();
+
+    const metrics = installScrollMetrics(scrollContainer!, {
+      scrollHeight: 960,
+      clientHeight: 400,
+    });
+
+    emitStreamingStatus(controller);
+    emitToolMessage(controller, { id: "tool-1", chunks: ["Loaded tools"] });
+    emitToolMessage(controller, { id: "tool-2", chunks: ["Fetched docs"] });
+    raf.flush();
+
+    expect(metrics.getScrollTop()).toBe(metrics.getBottomScrollTop());
+
+    metrics.setScrollHeight(1035);
+    emitToolMessage(controller, {
+      id: "tool-3",
+      chunks: ["Compared layouts and noted launcher sizing"],
+    });
+
+    // Simulate the browser emitting a scroll event caused by layout/scroll
+    // anchoring before the scheduled auto-scroll rAF has started.
+    metrics.setScrollTop(metrics.getScrollTop() - 2);
+    scrollContainer!.dispatchEvent(new Event("scroll"));
+
+    raf.flush();
+
+    expect(metrics.getScrollTop()).toBe(metrics.getBottomScrollTop());
+
+    controller.destroy();
+  });
+
   it("uses icon-only arrow-down defaults for the transcript affordance", () => {
     const raf = installRafMock();
     const mount = createMount();

package/src/ui.tool-display.test.ts

@@ -0,0 +1,204 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { createAgentExperience } from "./ui";
+import type { AgentWidgetController } from "./ui";
+
+const createMount = () => {
+  const mount = document.createElement("div");
+  document.body.appendChild(mount);
+  return mount;
+};
+
+const injectToolMessage = (
+  controller: AgentWidgetController,
+  {
+    id,
+    name,
+    status = "running",
+    chunks = [],
+  }: {
+    id: string;
+    name?: string;
+    status?: "pending" | "running" | "complete";
+    chunks?: string[];
+  }
+) => {
+  controller.injectTestMessage({
+    type: "message",
+    message: {
+      id,
+      role: "assistant",
+      content: "",
+      createdAt: new Date().toISOString(),
+      streaming: status !== "complete",
+      variant: "tool",
+      toolCall: {
+        id,
+        name,
+        status,
+        chunks,
+      },
+    },
+  });
+};
+
+const injectReasoningMessage = (
+  controller: AgentWidgetController,
+  {
+    id,
+    status = "streaming",
+    chunks = [],
+  }: {
+    id: string;
+    status?: "pending" | "streaming" | "complete";
+    chunks?: string[];
+  }
+) => {
+  controller.injectTestMessage({
+    type: "message",
+    message: {
+      id,
+      role: "assistant",
+      content: "",
+      createdAt: new Date().toISOString(),
+      streaming: status !== "complete",
+      variant: "reasoning",
+      reasoning: {
+        id,
+        status,
+        chunks,
+      },
+    },
+  });
+};
+
+describe("createAgentExperience tool call display modes", () => {
+  beforeEach(() => {
+    vi.stubGlobal("requestAnimationFrame", (cb: (time: number) => void) => {
+      cb(0);
+      return 1;
+    });
+    vi.stubGlobal("cancelAnimationFrame", () => {});
+    window.scrollTo = vi.fn();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("keeps collapsed tool rows on the generic summary by default", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+    });
+
+    injectToolMessage(controller, {
+      id: "tool-1",
+      name: "Get platform documentation",
+      chunks: ["Loaded tools, used Runtype integration"],
+    });
+
+    const header = mount.querySelector(".persona-tool-bubble button[data-expand-header='true']");
+    expect(header?.textContent).toContain("Using tool...");
+    expect(header?.textContent).not.toContain("Get platform documentation");
+
+    controller.destroy();
+  });
+
+  it("shows the tool name in collapsed rows when configured", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: {
+        toolCallDisplay: {
+          collapsedMode: "tool-name",
+        },
+      },
+    } as any);
+
+    injectToolMessage(controller, {
+      id: "tool-1",
+      name: "Get platform documentation",
+      chunks: ["Loaded tools, used Runtype integration"],
+    });
+
+    const header = mount.querySelector(".persona-tool-bubble button[data-expand-header='true']");
+    expect(header?.textContent).toContain("Get platform documentation");
+
+    controller.destroy();
+  });
+
+  it("renders a collapsed preview for active tool rows when enabled", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: {
+        toolCallDisplay: {
+          activePreview: true,
+        },
+      },
+    } as any);
+
+    injectToolMessage(controller, {
+      id: "tool-1",
+      name: "Get platform documentation",
+      chunks: ["Loaded tools, used Runtype integration"],
+    });
+
+    const preview = mount.querySelector("[data-persona-collapsed-preview='tool']");
+    expect(preview?.textContent).toContain("Loaded tools, used Runtype integration");
+
+    controller.destroy();
+  });
+
+  it("renders a collapsed preview for active reasoning rows when enabled", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: {
+        reasoningDisplay: {
+          activePreview: true,
+        },
+      },
+    } as any);
+
+    injectReasoningMessage(controller, {
+      id: "reason-1",
+      chunks: ["Now let me get the Persona embed documentation and builtin tools catalog."],
+    });
+
+    const preview = mount.querySelector("[data-persona-collapsed-preview='reasoning']");
+    expect(preview?.textContent).toContain("Now let me get the Persona embed documentation");
+
+    controller.destroy();
+  });
+
+  it("groups consecutive tool calls when enabled", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: {
+        toolCallDisplay: {
+          grouped: true,
+        },
+      },
+    } as any);
+
+    injectToolMessage(controller, { id: "tool-1", name: "Load tools", chunks: ["Loaded tools"] });
+    injectToolMessage(controller, { id: "tool-2", name: "Get docs", chunks: ["Fetched docs"] });
+
+    const group = mount.querySelector("[data-persona-tool-group='true']");
+    expect(group).not.toBeNull();
+    expect(group?.textContent).toContain("Called 2 tools");
+
+    controller.destroy();
+  });
+});