@runtypelabs/persona 3.10.1 → 3.11.0

package/src/utils/formatting.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { createJsonStreamParser } from "./formatting";
+import { createJsonStreamParser, parseFormattedTemplate } from "./formatting";
 
 describe("JSON Stream Parser", () => {
   it("should extract text field incrementally as JSON streams in", () => {
@@ -170,3 +170,77 @@ describe("JSON Stream Parser", () => {
     expect(finalResult).toBe("You're welcome! Enjoy your browsing, and I'm here if you need anything!");
   });
 });
+
+describe("parseFormattedTemplate", () => {
+  it("returns plain text segments when no formatting markers are present", () => {
+    const segments = parseFormattedTemplate("Calling {toolName}...", "Get Weather");
+    expect(segments).toEqual([
+      { text: "Calling Get Weather...", styles: [] },
+    ]);
+  });
+
+  it("resolves {toolName} placeholder", () => {
+    const segments = parseFormattedTemplate("{toolName} running", "Search Catalog");
+    expect(segments).toEqual([
+      { text: "Search Catalog running", styles: [] },
+    ]);
+  });
+
+  it("parses ~dim~ markers", () => {
+    const segments = parseFormattedTemplate("Finished {toolName} ~{duration}~", "Get Weather");
+    expect(segments).toEqual([
+      { text: "Finished Get Weather ", styles: [] },
+      { text: "{duration}", styles: ["dim"], isDuration: true },
+    ]);
+  });
+
+  it("parses *italic* markers", () => {
+    const segments = parseFormattedTemplate("*{toolName}* completed", "Search");
+    expect(segments).toEqual([
+      { text: "Search", styles: ["italic"] },
+      { text: " completed", styles: [] },
+    ]);
+  });
+
+  it("parses **bold** markers", () => {
+    const segments = parseFormattedTemplate("**Calling** {toolName}", "Lookup");
+    expect(segments).toEqual([
+      { text: "Calling", styles: ["bold"] },
+      { text: " Lookup", styles: [] },
+    ]);
+  });
+
+  it("handles multiple formatting markers in one template", () => {
+    const segments = parseFormattedTemplate("**Done** *{toolName}* ~{duration}~", "API");
+    expect(segments).toEqual([
+      { text: "Done", styles: ["bold"] },
+      { text: " ", styles: [] },
+      { text: "API", styles: ["italic"] },
+      { text: " ", styles: [] },
+      { text: "{duration}", styles: ["dim"], isDuration: true },
+    ]);
+  });
+
+  it("handles {duration} without formatting markers", () => {
+    const segments = parseFormattedTemplate("Ran for {duration}", "Tool");
+    expect(segments).toEqual([
+      { text: "Ran for ", styles: [] },
+      { text: "{duration}", styles: [], isDuration: true },
+    ]);
+  });
+
+  it("handles template with no placeholders", () => {
+    const segments = parseFormattedTemplate("Running...", "Ignored");
+    expect(segments).toEqual([
+      { text: "Running...", styles: [] },
+    ]);
+  });
+
+  it("handles empty tool name fallback in template", () => {
+    const segments = parseFormattedTemplate("{toolName}", "  ");
+    // toolName is resolved before parsing, so whitespace stays
+    expect(segments).toEqual([
+      { text: "  ", styles: [] },
+    ]);
+  });
+});

package/src/utils/formatting.ts

@@ -87,6 +87,136 @@ 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);
+};
+
+/**
+ * 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/morph.ts

@@ -21,14 +21,20 @@ 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;
+            }
             return false;
           }
         }