@runtypelabs/persona 3.9.2 → 3.10.1

package/src/components/tool-bubble.ts

@@ -6,12 +6,76 @@ import { renderLucideIcon } from "../utils/icons";
 // Expansion state per widget instance
 export const toolExpansionState = new Set<string>();
 
+const appendRenderedValue = (
+  container: HTMLElement,
+  value: HTMLElement | string | null | undefined
+): boolean => {
+  if (value == null) return false;
+  if (typeof value === "string") {
+    container.textContent = value;
+    return true;
+  }
+  container.appendChild(value);
+  return true;
+};
+
+const getToolPreviewText = (message: AgentWidgetMessage, maxLines: number): string => {
+  const tool = message.toolCall;
+  if (!tool) return "";
+
+  const chunkText = (tool.chunks ?? []).join("").trim();
+  if (chunkText) {
+    const lines = chunkText
+      .split(/\r?\n/)
+      .map((line) => line.trim())
+      .filter(Boolean)
+      .slice(-maxLines);
+    return lines.join("\n");
+  }
+
+  const argsText = formatUnknownValue(tool.args).trim();
+  if (!argsText) return "";
+
+  return argsText
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .slice(0, maxLines)
+    .join("\n");
+};
+
+const getToolSummaryText = (
+  message: AgentWidgetMessage,
+  config?: AgentWidgetConfig
+): { summary: string; previewText: string; isActive: boolean } => {
+  const tool = message.toolCall;
+  const toolDisplayConfig = config?.features?.toolCallDisplay;
+  const collapsedMode = toolDisplayConfig?.collapsedMode ?? "tool-call";
+  const previewText = getToolPreviewText(message, toolDisplayConfig?.previewMaxLines ?? 3);
+  const defaultSummary = tool ? describeToolTitle(tool) : "";
+
+  if (!tool) {
+    return { summary: defaultSummary, previewText, isActive: false };
+  }
+
+  const isActive = tool.status !== "complete";
+  let summary = defaultSummary;
+  if (collapsedMode === "tool-name") {
+    summary = tool.name?.trim() || defaultSummary;
+  } else if (collapsedMode === "tool-preview" && previewText) {
+    summary = previewText;
+  }
+
+  return { summary, previewText, isActive };
+};
+
 // Helper function to update tool bubble UI after expansion state changes
 export const updateToolBubbleUI = (messageId: string, bubble: HTMLElement, config?: AgentWidgetConfig): void => {
   const expanded = toolExpansionState.has(messageId);
   const toolCallConfig = config?.toolCall ?? {};
   const header = bubble.querySelector('button[data-expand-header="true"]') as HTMLElement;
   const content = bubble.querySelector('.persona-border-t') as HTMLElement;
+  const preview = bubble.querySelector('[data-persona-collapsed-preview="tool"]') as HTMLElement | null;
   
   if (!header || !content) return;
   
@@ -32,6 +96,11 @@ export const updateToolBubbleUI = (messageId: string, bubble: HTMLElement, confi
   }
   
   content.style.display = expanded ? "" : "none";
+  if (preview) {
+    preview.style.display = expanded
+      ? "none"
+      : ((preview.textContent || preview.childNodes.length) ? "" : "none");
+  }
 };
 
 export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidgetConfig): HTMLElement => {
@@ -78,14 +147,21 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
     return bubble;
   }
 
-  let expanded = toolExpansionState.has(message.id);
+  const toolDisplayConfig = config?.features?.toolCallDisplay ?? {};
+  const expandable = toolDisplayConfig.expandable !== false;
+  let expanded = expandable && toolExpansionState.has(message.id);
+  const { summary, previewText, isActive } = getToolSummaryText(message, config);
   const header = createElement(
     "button",
-    "persona-flex persona-w-full persona-items-center persona-justify-between persona-gap-3 persona-bg-transparent persona-px-4 persona-py-3 persona-text-left persona-cursor-pointer persona-border-none"
+    expandable
+      ? "persona-flex persona-w-full persona-items-center persona-justify-between persona-gap-3 persona-bg-transparent persona-px-4 persona-py-3 persona-text-left persona-cursor-pointer persona-border-none"
+      : "persona-flex persona-w-full persona-items-center persona-justify-between persona-gap-3 persona-bg-transparent persona-px-4 persona-py-3 persona-text-left persona-cursor-default persona-border-none"
   ) as HTMLButtonElement;
   header.type = "button";
-  header.setAttribute("aria-expanded", expanded ? "true" : "false");
-  header.setAttribute("data-expand-header", "true");
+  if (expandable) {
+    header.setAttribute("aria-expanded", expanded ? "true" : "false");
+    header.setAttribute("data-expand-header", "true");
+  }
   header.setAttribute("data-bubble-type", "tool");
 
   // Apply header styles
@@ -106,23 +182,78 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
   if (toolCallConfig.headerTextColor) {
     title.style.color = toolCallConfig.headerTextColor;
   }
-  title.textContent = describeToolTitle(tool);
-  headerContent.appendChild(title);
-
-  const toggleIcon = createElement("div", "persona-flex persona-items-center");
-  const iconColor = toolCallConfig.toggleTextColor || toolCallConfig.headerTextColor || "currentColor";
-  const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
-  if (chevronIcon) {
-    toggleIcon.appendChild(chevronIcon);
+  const customSummary = toolCallConfig.renderCollapsedSummary?.({
+    message,
+    toolCall: tool,
+    defaultSummary: summary,
+    previewText,
+    collapsedMode: toolDisplayConfig.collapsedMode ?? "tool-call",
+    isActive,
+    config: config ?? {},
+  });
+  if (typeof customSummary === "string" && customSummary.trim()) {
+    title.textContent = customSummary;
+    headerContent.appendChild(title);
+  } else if (customSummary instanceof HTMLElement) {
+    headerContent.appendChild(customSummary);
+  } else {
+    title.textContent = summary;
+    headerContent.appendChild(title);
+  }
+
+  let toggleIcon: HTMLElement | null = null;
+  if (expandable) {
+    toggleIcon = createElement("div", "persona-flex persona-items-center");
+    const iconColor = toolCallConfig.toggleTextColor || toolCallConfig.headerTextColor || "currentColor";
+    const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
+    if (chevronIcon) {
+      toggleIcon.appendChild(chevronIcon);
+    } else {
+      toggleIcon.textContent = expanded ? "Hide" : "Show";
+    }
+
+    const headerMeta = createElement("div", "persona-flex persona-items-center persona-gap-2 persona-ml-auto");
+    headerMeta.append(toggleIcon);
+    header.append(headerContent, headerMeta);
   } else {
-    // Fallback to text if icon fails
-    toggleIcon.textContent = expanded ? "Hide" : "Show";
+    header.append(headerContent);
   }
 
-  const headerMeta = createElement("div", "persona-flex persona-items-center persona-gap-2 persona-ml-auto");
-  headerMeta.append(toggleIcon);
+  const collapsedPreview = createElement(
+    "div",
+    "persona-px-4 persona-py-3 persona-text-xs persona-leading-snug persona-text-persona-muted"
+  );
+  collapsedPreview.setAttribute("data-persona-collapsed-preview", "tool");
+  collapsedPreview.style.display = "none";
+  collapsedPreview.style.whiteSpace = "pre-wrap";
 
-  header.append(headerContent, headerMeta);
+  if (
+    !expanded &&
+    isActive &&
+    toolDisplayConfig.activePreview &&
+    previewText
+  ) {
+    const renderedPreview = toolCallConfig.renderCollapsedPreview?.({
+      message,
+      toolCall: tool,
+      defaultPreview: previewText,
+      isActive,
+      config: config ?? {},
+    });
+    if (!appendRenderedValue(collapsedPreview, renderedPreview)) {
+      collapsedPreview.textContent = previewText;
+    }
+    collapsedPreview.style.display = "";
+  }
+
+  if (!expanded && isActive && toolDisplayConfig.activeMinHeight) {
+    bubble.style.minHeight = toolDisplayConfig.activeMinHeight;
+  }
+
+  if (!expandable) {
+    bubble.append(header, collapsedPreview);
+    return bubble;
+  }
 
   const content = createElement(
     "div",
@@ -265,22 +396,25 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
 
   const applyToolExpansion = () => {
     header.setAttribute("aria-expanded", expanded ? "true" : "false");
-    // Update chevron icon
-    toggleIcon.innerHTML = "";
-    const iconColor = toolCallConfig.toggleTextColor || toolCallConfig.headerTextColor || "currentColor";
-    const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
-    if (chevronIcon) {
-      toggleIcon.appendChild(chevronIcon);
-    } else {
-      // Fallback to text if icon fails
-      toggleIcon.textContent = expanded ? "Hide" : "Show";
+    if (toggleIcon) {
+      toggleIcon.innerHTML = "";
+      const iconColor = toolCallConfig.toggleTextColor || toolCallConfig.headerTextColor || "currentColor";
+      const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
+      if (chevronIcon) {
+        toggleIcon.appendChild(chevronIcon);
+      } else {
+        toggleIcon.textContent = expanded ? "Hide" : "Show";
+      }
     }
     content.style.display = expanded ? "" : "none";
+    collapsedPreview.style.display = expanded
+      ? "none"
+      : ((collapsedPreview.textContent || collapsedPreview.childNodes.length) ? "" : "none");
   };
 
   applyToolExpansion();
 
-  bubble.append(header, content);
+  bubble.append(header, collapsedPreview, content);
   return bubble;
 };
 

package/src/defaults.ts

@@ -117,6 +117,18 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
       iconName: "arrow-down",
       label: "",
     },
+    toolCallDisplay: {
+      collapsedMode: "tool-call",
+      activePreview: false,
+      grouped: false,
+      previewMaxLines: 3,
+      expandable: true,
+    },
+    reasoningDisplay: {
+      activePreview: false,
+      previewMaxLines: 3,
+      expandable: true,
+    },
   },
   suggestionChips: [
     "What can you help me with?",

package/src/styles/widget.css

@@ -93,6 +93,35 @@
   gap: 1.5rem;
 }
 
+[data-persona-root] .persona-widget-container .persona-attachment-drop-overlay {
+  display: none;
+  position: absolute;
+  inset: var(--persona-drop-overlay-inset, 0);
+  z-index: 50;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  pointer-events: none;
+  background: var(--persona-drop-overlay-bg, rgba(59, 130, 246, 0.08));
+  -webkit-backdrop-filter: blur(var(--persona-drop-overlay-blur, 8px));
+  backdrop-filter: blur(var(--persona-drop-overlay-blur, 8px));
+  border: var(--persona-drop-overlay-border, 2px dashed rgba(59, 130, 246, 0.4));
+  border-radius: var(--persona-drop-overlay-radius, inherit);
+  transition: opacity 0.15s ease;
+}
+
+[data-persona-root] .persona-widget-container .persona-attachment-drop-overlay .persona-drop-overlay-label {
+  font-size: var(--persona-drop-overlay-label-size, 0.875rem);
+  color: var(--persona-drop-overlay-label-color, rgba(59, 130, 246, 0.8));
+  font-weight: 500;
+  user-select: none;
+}
+
+[data-persona-root] .persona-widget-container.persona-attachment-drop-active .persona-attachment-drop-overlay {
+  display: flex;
+}
+
 /* Widget CSS Variables - scoped to widget root to avoid polluting global namespace */
 [data-persona-root] {
   --persona-radius-sm: 0.125rem;
@@ -935,6 +964,7 @@
 }
 
 .persona-widget-container {
+  position: relative;
   border-radius: var(--persona-panel-radius, var(--persona-radius-xl, 0.75rem));
 }
 
@@ -2091,6 +2121,130 @@
   background-color: var(--cw-container, #f8fafc);
 }
 
+/* Collapsed live preview blocks — match expanded content's 1px border-top with transparent border */
+[data-persona-root] [data-persona-collapsed-preview] {
+  border-top: 1px solid transparent;
+}
+
+/* Grouped tool-call transcript chrome */
+[data-persona-root] .persona-tool-group {
+  --_rail-x: 0.5rem;
+  --_rail-w: 2px;
+  --_dot-size: 6px;
+  --_branch-len: 0.75rem;
+  --_branch-y: 1.5rem;
+  --_rail-color: var(--cw-border, #d1d5db);
+  gap: 0;
+}
+
+/* ---- Summary row ---- */
+[data-persona-root] .persona-tool-group-summary {
+  position: relative;
+  min-height: 1.5rem;
+  padding-left: calc(var(--_rail-x) + var(--_branch-len) + 0.625rem);
+  margin-bottom: 0.625rem;
+  display: flex;
+  align-items: center;
+}
+
+/* horizontal branch from rail to summary text */
+[data-persona-root] .persona-tool-group-summary::before {
+  content: "";
+  position: absolute;
+  left: var(--_rail-x);
+  top: 50%;
+  width: var(--_branch-len);
+  height: var(--_rail-w);
+  background: var(--_rail-color);
+  transform: translateY(-50%);
+}
+
+/* dot at the rail end of the summary branch */
+[data-persona-root] .persona-tool-group-summary::after {
+  content: "";
+  position: absolute;
+  left: var(--_rail-x);
+  top: 50%;
+  width: var(--_dot-size);
+  height: var(--_dot-size);
+  border-radius: 999px;
+  border: var(--_rail-w) solid var(--_rail-color);
+  background: var(--cw-surface, #fff);
+  transform: translate(-50%, -50%);
+}
+
+/* ---- Stack (children column) ---- */
+[data-persona-root] .persona-tool-group-stack {
+  position: relative;
+  margin-left: var(--_rail-x);
+  padding-left: calc(var(--_branch-len) + 0.125rem);
+  gap: 0.625rem;
+}
+
+/* vertical rail */
+[data-persona-root] .persona-tool-group-stack::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: calc(-0.625rem - (var(--_dot-size) / 2));
+  bottom: calc(100% - var(--_branch-y));
+  width: var(--_rail-w);
+  background: var(--_rail-color);
+  transform: translateX(-50%);
+}
+
+/* extend rail between items when there are multiple */
+[data-persona-root] .persona-tool-group-stack::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--_rail-w);
+  background: var(--_rail-color);
+  transform: translateX(-50%);
+  z-index: 0;
+  pointer-events: none;
+}
+
+/* clip the rail at the last item's branch-y */
+[data-persona-root] .persona-tool-group-item:last-child {
+  position: relative;
+}
+
+/* ---- Item branches ---- */
+[data-persona-root] .persona-tool-group-item {
+  position: relative;
+  z-index: 1;
+}
+
+/* horizontal branch from rail to each child bubble */
+[data-persona-root] .persona-tool-group-item::before {
+  content: "";
+  position: absolute;
+  left: calc(-1 * var(--_branch-len) - 0.125rem);
+  top: var(--_branch-y);
+  width: calc(var(--_branch-len) + 0.125rem);
+  height: var(--_rail-w);
+  background: var(--_rail-color);
+  transform: translateY(-50%);
+}
+
+/* dot at the junction of the rail and each branch */
+[data-persona-root] .persona-tool-group-item::after {
+  content: "";
+  position: absolute;
+  left: calc(-1 * var(--_branch-len) - 0.125rem);
+  top: var(--_branch-y);
+  width: var(--_dot-size);
+  height: var(--_dot-size);
+  border-radius: 999px;
+  border: var(--_rail-w) solid var(--_rail-color);
+  background: var(--cw-surface, #fff);
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
 /* ============================================
    Approval Bubble Theme Styles
    ============================================ */

package/src/theme-editor/index.ts

@@ -81,12 +81,17 @@ export {
   buildShellCss,
   applyShellTheme,
   buildSrcdoc,
+  getPreviewTranscriptPresetLabel,
+  createPreviewTranscriptEntry,
+  appendPreviewTranscriptEntry,
   createPreviewMessages,
   applySceneConfig,
   buildPreviewConfig,
+  buildPreviewConfigWithMessages,
 } from './preview-utils';
 export type {
   PreviewScene,
+  PreviewTranscriptEntryPreset,
   PreviewShellPalette,
   PreviewConfigOptions,
 } from './preview-utils';

package/src/theme-editor/preview-utils.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  appendPreviewTranscriptEntry,
+  buildPreviewConfig,
+  createPreviewTranscriptEntry,
+} from "./preview-utils";
+
+describe("theme editor preview demo data", () => {
+  it("seeds tool call preview messages when advanced tool display modes are enabled", () => {
+    const config = buildPreviewConfig({
+      scene: "conversation",
+      config: {
+        features: {
+          toolCallDisplay: {
+            activePreview: true,
+          },
+        },
+      },
+    });
+
+    expect(config.initialMessages?.some((message) => message.variant === "tool")).toBe(true);
+  });
+
+  it("seeds reasoning preview messages when advanced reasoning display modes are enabled", () => {
+    const config = buildPreviewConfig({
+      scene: "conversation",
+      config: {
+        features: {
+          reasoningDisplay: {
+            activePreview: true,
+          },
+        },
+      },
+    });
+
+    expect(config.initialMessages?.some((message) => message.variant === "reasoning")).toBe(true);
+  });
+
+  it("creates public preview transcript entries for tool and reasoning presets", () => {
+    const toolMessage = createPreviewTranscriptEntry("tool-running", 1);
+    const reasoningMessage = createPreviewTranscriptEntry("reasoning-streaming", 2);
+
+    expect(toolMessage.variant).toBe("tool");
+    expect(toolMessage.toolCall?.status).toBe("running");
+    expect(reasoningMessage.variant).toBe("reasoning");
+    expect(reasoningMessage.reasoning?.status).toBe("streaming");
+  });
+
+  it("appends public preview transcript entries to an existing conversation", () => {
+    const messages = appendPreviewTranscriptEntry([], "tool-running");
+    const updated = appendPreviewTranscriptEntry(messages, "reasoning-complete");
+
+    expect(updated).toHaveLength(2);
+    expect(updated[0].variant).toBe("tool");
+    expect(updated[1].variant).toBe("reasoning");
+  });
+});