@runtypelabs/persona 3.9.1 → 3.10.0

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();
+  });
+});

package/src/ui.ts

@@ -2213,6 +2213,18 @@ export const createAgentExperience = (
     };
 
     const inlineLoadingRenderer = getInlineLoadingIndicatorRenderer();
+    const appendRenderedValue = (
+      containerEl: HTMLElement,
+      value: HTMLElement | string | null | undefined
+    ): boolean => {
+      if (value == null) return false;
+      if (typeof value === "string") {
+        containerEl.textContent = value;
+        return true;
+      }
+      containerEl.appendChild(value);
+      return true;
+    };
 
     // Track active message IDs for cache pruning
     const activeMessageIds = new Set<string>();
@@ -2255,7 +2267,7 @@ export const createAgentExperience = (
           if (!showReasoning) return;
           bubble = matchingPlugin.renderReasoning({
             message,
-            defaultRenderer: () => createReasoningBubble(message),
+            defaultRenderer: () => createReasoningBubble(message, config),
             config
           });
         } else if (message.variant === "tool" && message.toolCall && matchingPlugin.renderToolCall) {
@@ -2371,7 +2383,7 @@ export const createAgentExperience = (
       if (!bubble) {
         if (message.variant === "reasoning" && message.reasoning) {
           if (!showReasoning) return;
-          bubble = createReasoningBubble(message);
+          bubble = createReasoningBubble(message, config);
         } else if (message.variant === "tool" && message.toolCall) {
           if (!showToolCalls) return;
           bubble = createToolBubble(message, config);
@@ -2428,6 +2440,86 @@ export const createAgentExperience = (
       tempContainer.appendChild(wrapper);
     });
 
+    if (config.features?.toolCallDisplay?.grouped) {
+      const toolGroups: AgentWidgetMessage[][] = [];
+      let currentGroup: AgentWidgetMessage[] = [];
+
+      messages.forEach((message) => {
+        if (message.variant === "tool" && message.toolCall && showToolCalls) {
+          currentGroup.push(message);
+          return;
+        }
+        if (currentGroup.length > 1) {
+          toolGroups.push(currentGroup);
+        }
+        currentGroup = [];
+      });
+      if (currentGroup.length > 1) {
+        toolGroups.push(currentGroup);
+      }
+
+      toolGroups.forEach((group, groupIndex) => {
+        const wrappers = group
+          .map((groupMessage) =>
+            Array.from(tempContainer.children).find(
+              (child) =>
+                child instanceof HTMLElement &&
+                child.getAttribute("data-wrapper-id") === groupMessage.id
+            ) as HTMLElement | undefined
+          )
+          .filter((wrapper): wrapper is HTMLElement => Boolean(wrapper));
+
+        if (wrappers.length < 2) {
+          return;
+        }
+
+        const groupWrapper = document.createElement("div");
+        groupWrapper.className = "persona-flex";
+        groupWrapper.id = `wrapper-tool-group-${groupIndex}-${group[0].id}`;
+        groupWrapper.setAttribute("data-wrapper-id", `tool-group-${groupIndex}-${group[0].id}`);
+
+        const groupContainer = document.createElement("div");
+        groupContainer.className =
+          "persona-tool-group persona-flex persona-w-full persona-flex-col persona-gap-2";
+        groupContainer.setAttribute("data-persona-tool-group", "true");
+
+        const summary = document.createElement("div");
+        summary.className =
+          "persona-tool-group-summary persona-text-xs persona-text-persona-muted";
+
+        const defaultSummary = `Called ${group.length} tools`;
+        const renderedSummary = config.toolCall?.renderGroupedSummary?.({
+          messages: group,
+          toolCalls: group
+            .map((groupMessage) => groupMessage.toolCall)
+            .filter((toolCall): toolCall is NonNullable<typeof group[number]["toolCall"]> => Boolean(toolCall)),
+          defaultSummary,
+          config,
+        });
+        if (!appendRenderedValue(summary, renderedSummary)) {
+          summary.textContent = defaultSummary;
+        }
+
+        const stack = document.createElement("div");
+        stack.className = "persona-tool-group-stack persona-flex persona-flex-col";
+
+        groupContainer.append(summary, stack);
+        groupWrapper.appendChild(groupContainer);
+        wrappers[0].before(groupWrapper);
+
+        wrappers.forEach((wrapper, wrapperIndex) => {
+          const item = document.createElement("div");
+          item.className = "persona-tool-group-item persona-relative";
+          item.setAttribute("data-persona-tool-group-item", "true");
+          if (wrapperIndex < wrappers.length - 1) {
+            item.setAttribute("data-persona-tool-group-connector", "true");
+          }
+          item.appendChild(wrapper);
+          stack.appendChild(item);
+        });
+      });
+    }
+
     // Remove cache entries for messages that no longer exist
     pruneCache(messageCache, activeMessageIds);
 
@@ -3853,6 +3945,10 @@ export const createAgentExperience = (
       const previousColorScheme = config.colorScheme;
       const previousLoadingIndicator = config.loadingIndicator;
       const previousIterationDisplay = config.iterationDisplay;
+      const previousShowReasoning = config.features?.showReasoning;
+      const previousShowToolCalls = config.features?.showToolCalls;
+      const previousToolCallDisplay = config.features?.toolCallDisplay;
+      const previousReasoningDisplay = config.features?.reasoningDisplay;
       config = { ...config, ...nextConfig };
       // applyFullHeightStyles resets mount.style.cssText, so call it before applyThemeVariables
       applyFullHeightStyles();
@@ -4093,8 +4189,12 @@ export const createAgentExperience = (
         || config.loadingIndicator?.renderIdle !== previousLoadingIndicator?.renderIdle
         || config.loadingIndicator?.showBubble !== previousLoadingIndicator?.showBubble;
       const iterationDisplayChanged = config.iterationDisplay !== previousIterationDisplay;
+      const featuresChanged = (config.features?.showReasoning ?? true) !== (previousShowReasoning ?? true)
+        || (config.features?.showToolCalls ?? true) !== (previousShowToolCalls ?? true)
+        || JSON.stringify(config.features?.toolCallDisplay) !== JSON.stringify(previousToolCallDisplay)
+        || JSON.stringify(config.features?.reasoningDisplay) !== JSON.stringify(previousReasoningDisplay);
       const messagesConfigChanged = toolCallConfigChanged || messageActionsChanged || layoutMessagesChanged
-        || loadingIndicatorChanged || iterationDisplayChanged;
+        || loadingIndicatorChanged || iterationDisplayChanged || featuresChanged;
       if (messagesConfigChanged && session) {
         configVersion++;
         renderMessagesWithPlugins(messagesWrapper, session.getMessages(), postprocess);

package/src/utils/message-fingerprint.test.ts

@@ -90,6 +90,23 @@ describe("computeMessageFingerprint", () => {
     expect(fp1).not.toBe(fp2);
   });
 
+  it("changes when toolCall chunks change", () => {
+    const fp1 = computeMessageFingerprint(
+      makeMessage({ toolCall: { status: "running", chunks: ["Loaded tools"] } }),
+      0
+    );
+    const fp2 = computeMessageFingerprint(
+      makeMessage({
+        toolCall: {
+          status: "running",
+          chunks: ["Loaded tools", "\nFetched platform documentation"],
+        },
+      }),
+      0
+    );
+    expect(fp1).not.toBe(fp2);
+  });
+
   it("changes when reasoning chunks change", () => {
     const fp1 = computeMessageFingerprint(makeMessage({ reasoning: { chunks: ["step 1"] } }), 0);
     const fp2 = computeMessageFingerprint(makeMessage({ reasoning: { chunks: ["step 1", "step 2"] } }), 0);

package/src/utils/message-fingerprint.ts

@@ -16,7 +16,12 @@ export type FingerprintableMessage = {
   rawContent?: string;
   llmContent?: string;
   approval?: { status?: string; [key: string]: unknown };
-  toolCall?: { status?: string; [key: string]: unknown };
+  toolCall?: {
+    status?: string;
+    chunks?: string[];
+    args?: unknown;
+    [key: string]: unknown;
+  };
   reasoning?: { chunks?: string[]; status?: string; [key: string]: unknown };
   contentParts?: unknown[];
 };
@@ -48,6 +53,13 @@ export function computeMessageFingerprint(
     message.llmContent?.length ?? 0,
     message.approval?.status ?? "",
     message.toolCall?.status ?? "",
+    message.toolCall?.chunks?.length ?? 0,
+    message.toolCall?.chunks?.[message.toolCall.chunks.length - 1]?.slice(-32) ?? "",
+    typeof message.toolCall?.args === "string"
+      ? message.toolCall.args.length
+      : message.toolCall?.args
+        ? JSON.stringify(message.toolCall.args).length
+        : 0,
     message.reasoning?.chunks?.length ?? 0,
     message.contentParts?.length ?? 0,
     configVersion,