@runtypelabs/persona 3.10.1 → 3.12.0

package/src/utils/formatting.ts

@@ -87,6 +87,151 @@ export const describeToolTitle = (tool: AgentWidgetToolCall) => {
   return "Using tool...";
 };
 
+/**
+ * Formats a millisecond duration as a short human-readable string.
+ * Returns "2.3s", "15s", or "<0.1s".
+ */
+export const formatElapsedMs = (ms: number): string => {
+  const seconds = ms / 1000;
+  if (seconds < 0.1) return "<0.1s";
+  if (seconds >= 10) return `${Math.round(seconds)}s`;
+  return `${seconds.toFixed(1).replace(/\.0$/, "")}s`;
+};
+
+/**
+ * Computes the current elapsed time string for a tool call.
+ */
+export const computeToolElapsed = (tool: AgentWidgetToolCall): string => {
+  const durationMs =
+    typeof tool.duration === "number"
+      ? tool.duration
+      : typeof tool.durationMs === "number"
+        ? tool.durationMs
+        : Math.max(
+            0,
+            (tool.completedAt ?? Date.now()) -
+              (tool.startedAt ?? tool.completedAt ?? Date.now())
+          );
+  return formatElapsedMs(durationMs);
+};
+
+/**
+ * Computes the current elapsed time string for a reasoning block.
+ */
+export const computeReasoningElapsed = (reasoning: AgentWidgetReasoning): string => {
+  const durationMs =
+    reasoning.durationMs !== undefined
+      ? reasoning.durationMs
+      : Math.max(
+          0,
+          (reasoning.completedAt ?? Date.now()) -
+            (reasoning.startedAt ?? reasoning.completedAt ?? Date.now())
+        );
+  return formatElapsedMs(durationMs);
+};
+
+/**
+ * Resolves a text template with tool call placeholders.
+ * Supported placeholders: {toolName}, {duration}
+ * Returns the fallback if template is undefined.
+ */
+export const resolveToolHeaderText = (
+  tool: AgentWidgetToolCall,
+  template: string | undefined,
+  fallback: string
+): string => {
+  if (!template) return fallback;
+
+  const toolName = tool.name?.trim() || "tool";
+  const duration = computeToolElapsed(tool);
+
+  return template
+    .replace(/\{toolName\}/g, toolName)
+    .replace(/\{duration\}/g, duration);
+};
+
+/**
+ * A segment of parsed template text with optional inline formatting.
+ */
+export interface TemplateSegment {
+  /** The text content (or "{duration}" for duration placeholders) */
+  text: string;
+  /** CSS modifier names to apply: "dim", "bold", "italic" */
+  styles: string[];
+  /** True when this segment represents a {duration} placeholder */
+  isDuration?: boolean;
+}
+
+/**
+ * Parses a template string with inline formatting markers into segments.
+ *
+ * Supported markers (Markdown-like):
+ * - `**text**` → bold
+ * - `*text*`  → italic
+ * - `~text~`  → dim / muted
+ *
+ * Placeholders `{toolName}` are resolved; `{duration}` is preserved as a
+ * typed segment so the caller can render it as a live-updating DOM node.
+ *
+ * @example
+ * parseFormattedTemplate("Finished {toolName} ~{duration}~", "Get Weather")
+ * // → [
+ * //   { text: "Finished Get Weather ", styles: [] },
+ * //   { text: "{duration}", styles: ["dim"], isDuration: true }
+ * // ]
+ */
+export const parseFormattedTemplate = (
+  template: string,
+  toolName: string
+): TemplateSegment[] => {
+  const resolved = template.replace(/\{toolName\}/g, toolName);
+  const segments: TemplateSegment[] = [];
+  // Order matters: ** must match before *
+  const regex = /\*\*(.+?)\*\*|\*(.+?)\*|~(.+?)~/g;
+
+  let lastIndex = 0;
+  let match;
+
+  while ((match = regex.exec(resolved)) !== null) {
+    if (match.index > lastIndex) {
+      pushSegments(segments, resolved.slice(lastIndex, match.index), []);
+    }
+
+    if (match[1] !== undefined) {
+      pushSegments(segments, match[1], ["bold"]);
+    } else if (match[2] !== undefined) {
+      pushSegments(segments, match[2], ["italic"]);
+    } else if (match[3] !== undefined) {
+      pushSegments(segments, match[3], ["dim"]);
+    }
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < resolved.length) {
+    pushSegments(segments, resolved.slice(lastIndex), []);
+  }
+
+  return segments;
+};
+
+/** Splits text on {duration} and pushes typed segments. */
+const pushSegments = (
+  segments: TemplateSegment[],
+  text: string,
+  styles: string[]
+): void => {
+  const parts = text.split("{duration}");
+  for (let i = 0; i < parts.length; i++) {
+    if (parts[i]) {
+      segments.push({ text: parts[i], styles });
+    }
+    if (i < parts.length - 1) {
+      segments.push({ text: "{duration}", styles, isDuration: true });
+    }
+  }
+};
+
 /**
  * Creates a regex-based parser for extracting text from JSON streams.
  * This is a simpler alternative to schema-stream that uses regex to extract

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

@@ -90,6 +90,18 @@ describe("computeMessageFingerprint", () => {
     expect(fp1).not.toBe(fp2);
   });
 
+  it("changes when toolCall name changes", () => {
+    const fp1 = computeMessageFingerprint(
+      makeMessage({ toolCall: { status: "running" } }),
+      0
+    );
+    const fp2 = computeMessageFingerprint(
+      makeMessage({ toolCall: { status: "running", name: "UCP Search Catalog" } }),
+      0
+    );
+    expect(fp1).not.toBe(fp2);
+  });
+
   it("changes when toolCall chunks change", () => {
     const fp1 = computeMessageFingerprint(
       makeMessage({ toolCall: { status: "running", chunks: ["Loaded tools"] } }),

package/src/utils/message-fingerprint.ts

@@ -53,6 +53,7 @@ export function computeMessageFingerprint(
     message.llmContent?.length ?? 0,
     message.approval?.status ?? "",
     message.toolCall?.status ?? "",
+    message.toolCall?.name ?? "",
     message.toolCall?.chunks?.length ?? 0,
     message.toolCall?.chunks?.[message.toolCall.chunks.length - 1]?.slice(-32) ?? "",
     typeof message.toolCall?.args === "string"

package/src/utils/morph.test.ts

@@ -0,0 +1,86 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest";
+import { morphMessages } from "./morph";
+
+function makeContainer(html: string): HTMLElement {
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  return div;
+}
+
+function makeNewContent(html: string): HTMLElement {
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  return div;
+}
+
+describe("morphMessages", () => {
+  describe("data-preserve-animation", () => {
+    it("preserves animated element when old and new both have data-preserve-animation with same text", () => {
+      const container = makeContainer(
+        '<span data-preserve-animation="true">Calling tool... 0.1s</span>'
+      );
+      const oldSpan = container.querySelector("span")!;
+
+      morphMessages(
+        container,
+        makeNewContent(
+          '<span data-preserve-animation="true">Calling tool... 0.1s</span>'
+        )
+      );
+
+      expect(container.querySelector("span")).toBe(oldSpan);
+    });
+
+    it("allows morph when new node drops data-preserve-animation (tool completed)", () => {
+      const container = makeContainer(
+        '<span data-preserve-animation="true">Calling tool... 0.5s</span>'
+      );
+
+      morphMessages(
+        container,
+        makeNewContent("<span>Finished tool 0.5s</span>")
+      );
+
+      expect(container.querySelector("span")!.textContent).toBe(
+        "Finished tool 0.5s"
+      );
+      expect(
+        container.querySelector("span")!.hasAttribute("data-preserve-animation")
+      ).toBe(false);
+    });
+
+    it("allows morph when text content changes despite both having data-preserve-animation", () => {
+      const container = makeContainer(
+        '<span data-preserve-animation="true">Calling tool... 0.1s</span>'
+      );
+
+      morphMessages(
+        container,
+        makeNewContent(
+          '<span data-preserve-animation="true">Calling UCP Search Catalog... 0.2s</span>'
+        )
+      );
+
+      expect(container.querySelector("span")!.textContent).toBe(
+        "Calling UCP Search Catalog... 0.2s"
+      );
+    });
+
+    it("does not preserve when preserveTypingAnimation is false", () => {
+      const container = makeContainer(
+        '<span data-preserve-animation="true">Old text</span>'
+      );
+
+      morphMessages(
+        container,
+        makeNewContent(
+          '<span data-preserve-animation="true">New text</span>'
+        ),
+        { preserveTypingAnimation: false }
+      );
+
+      expect(container.querySelector("span")!.textContent).toBe("New text");
+    });
+  });
+});

package/src/utils/morph.ts

@@ -21,14 +21,28 @@ export const morphMessages = (
   Idiomorph.morph(container, newContent.innerHTML, {
     morphStyle: "innerHTML",
     callbacks: {
-      beforeNodeMorphed(oldNode: Node, _newNode: Node): boolean | void {
+      beforeNodeMorphed(oldNode: Node, newNode: Node): boolean | void {
         if (!(oldNode instanceof HTMLElement)) return;
 
         // Preserve typing indicator dots to maintain animation continuity
         // Also preserve elements with data-preserve-animation attribute for custom loading indicators
         if (preserveTypingAnimation) {
-          if (oldNode.classList.contains("persona-animate-typing") ||
-              oldNode.hasAttribute("data-preserve-animation")) {
+          if (oldNode.classList.contains("persona-animate-typing")) {
+            return false;
+          }
+          if (oldNode.hasAttribute("data-preserve-animation")) {
+            // Allow morph when the new node drops the attribute (e.g. tool completed)
+            if (newNode instanceof HTMLElement && !newNode.hasAttribute("data-preserve-animation")) {
+              return;
+            }
+            // Allow morph when content has meaningfully changed (e.g. tool name arrived)
+            if (newNode instanceof HTMLElement && newNode.hasAttribute("data-preserve-animation")) {
+              const oldText = oldNode.textContent ?? "";
+              const newText = newNode.textContent ?? "";
+              if (oldText !== newText) {
+                return;
+              }
+            }
             return false;
           }
         }