@runtypelabs/persona 4.32.0 → 4.32.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "4.32.0",
+  "version": "4.32.1",
   "description": "Themeable, pluggable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",

package/src/styles/widget.css

@@ -6993,6 +6993,18 @@
 .persona-turn-activity-body .persona-tool-bubble.persona-activity-row {
   --persona-activity-height: var(--persona-components-toolBubble-rowHeight, var(--persona-components-activity-rowHeight, 28px));
 }
+[data-persona-defaults="v5"] [data-persona-tool-group-stack] .persona-tool-bubble.persona-activity-row {
+  --persona-activity-height: var(--persona-components-toolBubble-rowHeight, var(--persona-components-activity-rowHeight, 24px));
+}
+[data-persona-defaults="v5"] [data-persona-tool-group-stack] .persona-activity-header:not(.persona-theme-padding) {
+  padding-block: 2px;
+  line-height: max(18px, calc(var(--persona-activity-label-size) * 1.35));
+}
+@media (any-pointer: coarse) {
+  [data-persona-defaults="v5"] [data-persona-tool-group-stack] .persona-tool-bubble.persona-activity-row {
+    --persona-activity-height: var(--persona-components-toolBubble-rowHeight, var(--persona-components-activity-rowHeight, 44px));
+  }
+}
 .persona-turn-activity-body .persona-reasoning-bubble.persona-activity-row {
   --persona-activity-height: var(--persona-components-reasoningBubble-rowHeight, var(--persona-components-activity-rowHeight, 28px));
 }

package/src/utils/brand.test.ts

@@ -73,6 +73,56 @@ describe('brand derivation', () => {
     expect(theme.components?.panel?.modes?.floating?.border).toContain('var(--persona-border)');
     expect(theme.components?.panel?.shadow).toBe(theme.palette?.shadows?.xl);
   });
+  describe.each(['light', 'dark'] as const)('%s message presentation', (colorScheme) => {
+    const elevations = [
+      ['flat', 'none'],
+      ['subtle', '0 2px 8px rgba(0, 0, 0, 0.08)'],
+      ['raised', '0 12px 32px rgba(0, 0, 0, 0.18)'],
+    ] as const;
+    it.each(elevations)('keeps V5 prose plain with %s elevation at every density', (elevation, shadow) => {
+      for (const density of ['compact', 'comfortable', 'spacious'] as const) {
+        const config = { colorScheme, future: { v5Defaults: true }, brand: { elevation, density } };
+        const vars = getCssVariables(getActiveTheme(config));
+        expect(vars['--persona-message-assistant-shadow']).toBe('none');
+        expect(vars['--persona-message-assistant-border']).toBe('transparent');
+        expect(vars['--persona-message-assistant-padding']).toBe('0px');
+        // These existing surfaces still follow elevation; this is not a global
+        // rule that every default of `none` must opt out of brand styling.
+        expect(vars['--persona-message-user-shadow']).toBe(shadow);
+        expect(getActiveTheme(config).components.introCard?.shadow).toBe(shadow);
+        const v4 = getCssVariables(getActiveTheme({ ...config, future: { v5Defaults: false } }));
+        expect(v4['--persona-message-assistant-shadow']).toBe(shadow);
+        expect(v4['--persona-message-assistant-border']).not.toBe('transparent');
+      }
+    });
+    it.each(elevations)('lets custom padded bubbles follow %s elevation', (elevation, shadow) => {
+      for (const [density, padding] of [['compact', '8px'], ['comfortable', '12px'], ['spacious', '16px']] as const) {
+        const theme = { components: { message: { assistant: {
+          background: 'semantic.colors.container', padding, borderRadius: '12px',
+          border: 'semantic.colors.border', borderWidth: '1px', shadow: 'palette.shadows.sm',
+        } } } };
+        // Shared overrides and dark-only overrides both remain authoritative.
+        for (const overrides of colorScheme === 'dark' ? [{ theme }, { darkTheme: theme }] : [{ theme }]) {
+          const vars = getCssVariables(getActiveTheme({
+            colorScheme, future: { v5Defaults: true }, brand: { elevation, density }, ...overrides,
+          }));
+          expect(vars['--persona-message-assistant-shadow']).toBe(shadow);
+          expect(vars['--persona-message-assistant-padding']).toBe(padding);
+          expect(vars['--persona-message-assistant-border']).not.toBe('transparent');
+          expect(vars['--persona-message-assistant-border-width']).toBe('1px');
+        }
+      }
+    });
+    it('preserves explicit assistant shadows and borders over brand elevation', () => {
+      const vars = getCssVariables(getActiveTheme({
+        colorScheme, future: { v5Defaults: true }, brand: { elevation: 'raised' },
+        theme: { components: { message: { assistant: { shadow: '0 1px 2px red', border: '#123456' } } } },
+        ...(colorScheme === 'dark' ? { darkTheme: { components: { message: { assistant: { shadow: 'none', border: '#abcdef' } } } } } : {}),
+      }));
+      expect(vars['--persona-message-assistant-shadow']).toBe(colorScheme === 'dark' ? 'none' : '0 1px 2px red');
+      expect(vars['--persona-message-assistant-border']).toBe(colorScheme === 'dark' ? '#abcdef' : '#123456');
+    });
+  });
   it.each([false, true])('keeps neutral-derived surfaces and elevation coherent (%s)', (v5Defaults) => {
     const theme = getActiveTheme({ future: { v5Defaults }, brand: { neutral: '#161b22', radius: 'none', elevation: 'flat' } });
     const vars = getCssVariables(theme);

package/src/utils/brand.ts

@@ -111,8 +111,12 @@ export const deriveBrandTheme = (brand?: BrandConfig, scheme: 'light' | 'dark' =
     const shadow = flat ? 'none' : brand.elevation === 'subtle' ? '0 2px 8px rgba(0, 0, 0, 0.08)' : '0 12px 32px rgba(0, 0, 0, 0.18)';
     const border = flat ? '1px solid var(--persona-border)' : '1px solid color-mix(in srgb, var(--persona-border) 65%, transparent)';
     theme.palette = { ...theme.palette, shadows: { sm: shadow, md: shadow, lg: shadow, xl: shadow, '2xl': shadow } };
-    const shadows = (node: Record<string, unknown>): Record<string, unknown> => {
+    const shadows = (node: Record<string, unknown>, path = ''): Record<string, unknown> => {
       const overlay: Record<string, unknown> = {};
+      // V5 assistant defaults are unpadded prose, not a surface to elevate.
+      // Explicit theme tokens still win; custom bubbles can opt into the brand
+      // shadow scale with `palette.shadows.sm` alongside their padding/background.
+      if (v5Defaults && path === 'message.assistant') return overlay;
       for (const [key, value] of Object.entries(node)) {
         if (key.toLowerCase().endsWith('shadow')) {
           overlay[key] = shadow;
@@ -120,7 +124,7 @@ export const deriveBrandTheme = (brand?: BrandConfig, scheme: 'light' | 'dark' =
           if (borderKey in node) overlay[borderKey] = typeof node[borderKey] === 'string' && (node[borderKey] as string).includes('solid') ? border : flat ? 'semantic.colors.border' : 'color-mix(in srgb, var(--persona-border) 65%, transparent)';
         }
         else if (value && typeof value === 'object') {
-          const child = shadows(value as Record<string, unknown>);
+          const child = shadows(value as Record<string, unknown>, path ? `${path}.${key}` : key);
           if (Object.keys(child).length) overlay[key] = child;
         }
       }

package/src/utils/tokens.ts

@@ -603,7 +603,8 @@ export const DEFAULT_COMPONENTS_V5: ComponentTokens = {
   },
   launcher: CIRCLE_LAUNCHER_TOKENS,
   activity: {
-    rowHeight: "32px", labelSize: "13px", iconSize: "16px", indent: "0px",
+    // CSS owns contextual parent, nested, and coarse-pointer row heights.
+    labelSize: "13px", iconSize: "16px", indent: "0px",
     transcriptGap: "0px", responseGap: "12px",
     groupIndent: "16px", groupGap: "2px", groupPadding: "2px 0",
     bodyPadding: "4px 0", bodyFontWeight: "400", sectionGap: "8px", bodySurface: "transparent",

package/src/utils/tool-activity-summary.test.ts

@@ -6,6 +6,7 @@ const tool = (name: string, extra: Partial<AgentWidgetToolCall> = {}): AgentWidg
 
 describe("semantic tool activity", () => {
   it.each([
+    ["search_docs", "Searched docs"], ["read_file", "Read a file"],
     ["web_search", "Searched the web"], ["web_search_preview", "Searched the web"], ["WebSearch", "Searched the web"],
     ["web_fetch", "Read a web page"], ["WebFetch", "Read a web page"],
     ["file_search", "Searched files"], ["search_files", "Searched files"], ["Glob", "Searched files"],
@@ -22,6 +23,12 @@ describe("semantic tool activity", () => {
     ["sql_db_query", "Queried the database"], ["search_gmail", "Searched email"],
   ])("maps exact alias %s", (name, label) => expect(toolActivityLabel(tool(name))).toBe(label));
 
+  it("summarizes documentation searches and file reads without a custom hook", () => {
+    expect(summarizeToolActivity([tool("search_docs"), tool("read_file")])).toBe("Searched docs, read files");
+    expect(summarizeToolActivity([tool("search_docs", { status: "running" }), tool("read_file", { status: "pending" })])).toBe("Searching docs, reading files");
+    expect(toolActivityLabel(tool("read_file", { status: "running" }))).toBe("Reading a file");
+  });
+
   it.each(["search_events", "search_nodes", "read_graph", "open_nodes", "read", "search", "git_commit", "my_web_search", "web_search_custom"])("keeps ambiguous %s generic", name => {
     expect(toolActivityLabel(tool(name))).toMatch(/^Used /);
   });
@@ -127,6 +134,7 @@ describe("semantic tool activity", () => {
 });
 
  it.each([
+   ["search_docs", "search"], ["read_file", "file-text"],
    ["web_search", "globe"], ["Read", "file-text"], ["edit_file", "pencil"], ["Bash", "terminal"],
    ["sql_db_query", "database"], ["search_events", "wrench"], ["my_web_search", "wrench"],
  ])("maps the completed icon for %s without guessing", (name, icon) => expect(toolActivityIcon(tool(name))).toBe(icon));

package/src/utils/tool-activity-summary.ts

@@ -3,10 +3,11 @@ import type { AgentWidgetConfig, AgentWidgetToolCall } from "../types";
 // Exact documented names only. Ambiguous names such as search_events or
 // search_nodes need provider metadata, which tool messages do not carry.
 const categories = [
+  ["search_docs", "Searching docs", "Searched docs", "search"],
   ["web_search|web_search_preview|WebSearch", "Searching the web", "Searched the web", "globe"],
   ["web_fetch|WebFetch", "Reading web pages", "Read web pages", "globe", "single"],
   ["file_search|search_files|Glob", "Searching files", "Searched files", "search"],
-  ["read_text_file|read_multiple_files|Read", "Reading files", "Read files", "file-text", "single"],
+  ["read_file|read_text_file|read_multiple_files|Read", "Reading files", "Read files", "file-text", "single"],
   ["write_file|edit_file|apply_patch|Write|Edit|NotebookEdit", "Editing files", "Edited files", "pencil", "single"],
   ["list_directory|list_directory_with_sizes|directory_tree", "Browsing files", "Browsed files", "folder"],
   ["Grep", "Searching code", "Searched code", "search"],

package/dist/chunk-DDAwu89-.js

@@ -1 +0,0 @@
-const e=`4.32.0`;export{e as t};