@runtypelabs/persona 2.0.0 → 2.1.0

package/dist/widget.css

@@ -927,6 +927,7 @@
 
 .persona-widget-composer {
   border-radius: var(--persona-input-radius, var(--persona-radius-lg, 0.5rem));
+  box-shadow: var(--persona-composer-shadow, none);
 }
 
 .persona-form-grid {
@@ -1168,6 +1169,18 @@
   box-shadow: var(--persona-message-assistant-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
+#persona-root .vanilla-message-user-bubble.persona-shadow-sm {
+  box-shadow: var(--persona-message-user-shadow, 0 5px 15px rgba(15, 23, 42, 0.08));
+}
+
+#persona-root .vanilla-tool-bubble.persona-shadow-sm {
+  box-shadow: var(--persona-tool-bubble-shadow, 0 5px 15px rgba(15, 23, 42, 0.08));
+}
+
+#persona-root .vanilla-reasoning-bubble.persona-shadow-sm {
+  box-shadow: var(--persona-reasoning-bubble-shadow, 0 5px 15px rgba(15, 23, 42, 0.08));
+}
+
 /* Artifact markdown (no .vanilla-message-bubble wrapper) */
 #persona-root .persona-markdown-bubble {
   color: var(--persona-text, #111827);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "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

@@ -927,6 +927,7 @@
 
 .persona-widget-composer {
   border-radius: var(--persona-input-radius, var(--persona-radius-lg, 0.5rem));
+  box-shadow: var(--persona-composer-shadow, none);
 }
 
 .persona-form-grid {
@@ -1168,6 +1169,18 @@
   box-shadow: var(--persona-message-assistant-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
+#persona-root .vanilla-message-user-bubble.persona-shadow-sm {
+  box-shadow: var(--persona-message-user-shadow, 0 5px 15px rgba(15, 23, 42, 0.08));
+}
+
+#persona-root .vanilla-tool-bubble.persona-shadow-sm {
+  box-shadow: var(--persona-tool-bubble-shadow, 0 5px 15px rgba(15, 23, 42, 0.08));
+}
+
+#persona-root .vanilla-reasoning-bubble.persona-shadow-sm {
+  box-shadow: var(--persona-reasoning-bubble-shadow, 0 5px 15px rgba(15, 23, 42, 0.08));
+}
+
 /* Artifact markdown (no .vanilla-message-bubble wrapper) */
 #persona-root .persona-markdown-bubble {
   color: var(--persona-text, #111827);

package/src/types/theme.ts

@@ -206,6 +206,8 @@ export interface MessageTokens {
     background: TokenReference<'color'>;
     text: TokenReference<'color'>;
     borderRadius: TokenReference<'radius'>;
+    /** User bubble box-shadow (token ref or raw CSS, e.g. `none`). */
+    shadow?: string;
   };
   assistant: {
     background: TokenReference<'color'>;
@@ -279,6 +281,23 @@ export interface AttachmentTokens {
   };
 }
 
+/** Tool-call row chrome (collapsible tool bubbles). */
+export interface ToolBubbleTokens {
+  /** Box-shadow for tool bubbles (token ref or raw CSS, e.g. `none`). */
+  shadow: string;
+}
+
+/** Reasoning / “thinking” row chrome. */
+export interface ReasoningBubbleTokens {
+  shadow: string;
+}
+
+/** Composer (message input) chrome. */
+export interface ComposerChromeTokens {
+  /** Box-shadow on the composer form (raw CSS, e.g. `none`). */
+  shadow: string;
+}
+
 export interface ComponentTokens {
   button: ButtonTokens;
   input: InputTokens;
@@ -291,6 +310,9 @@ export interface ComponentTokens {
   voice: VoiceTokens;
   approval: ApprovalTokens;
   attachment: AttachmentTokens;
+  toolBubble: ToolBubbleTokens;
+  reasoningBubble: ReasoningBubbleTokens;
+  composer: ComposerChromeTokens;
 }
 
 export interface PaletteExtras {

package/src/types.ts

@@ -714,6 +714,28 @@ export type AgentWidgetTheme = {
    * @default "16px"
    */
   panelBorderRadius?: string;
+  /**
+   * Box-shadow for user message bubbles (bubble message layout).
+   * @example "none" | "0 1px 2px rgba(0,0,0,0.05)"
+   */
+  messageUserShadow?: string;
+  /**
+   * Box-shadow for assistant message bubbles (bubble message layout).
+   * Overrides the default subtle assistant shadow when set.
+   */
+  messageAssistantShadow?: string;
+  /**
+   * Box-shadow for tool-call / function-call rows.
+   */
+  toolBubbleShadow?: string;
+  /**
+   * Box-shadow for reasoning (“thinking”) rows.
+   */
+  reasoningBubbleShadow?: string;
+  /**
+   * Box-shadow on the composer (input) container.
+   */
+  composerShadow?: string;
 };
 
 export type AgentWidgetDockConfig = {
@@ -1141,6 +1163,8 @@ export type AgentWidgetApprovalConfig = {
 };
 
 export type AgentWidgetToolCallConfig = {
+  /** Box-shadow for tool-call bubbles; overrides `theme.toolBubbleShadow` when set. */
+  shadow?: string;
   backgroundColor?: string;
   borderColor?: string;
   borderWidth?: string;

package/src/utils/migration.ts

@@ -139,6 +139,28 @@ export function migrateV1Theme(
         migrated.components.panel = {};
       }
       migrated.components.panel.borderRadius = value;
+    } else if (key === 'messageUserShadow') {
+      if (!migrated.components) migrated.components = {};
+      if (!migrated.components.message) migrated.components.message = {};
+      if (!migrated.components.message.user) migrated.components.message.user = {};
+      (migrated.components.message.user as { shadow?: string }).shadow = value as string;
+    } else if (key === 'messageAssistantShadow') {
+      if (!migrated.components) migrated.components = {};
+      if (!migrated.components.message) migrated.components.message = {};
+      if (!migrated.components.message.assistant) migrated.components.message.assistant = {};
+      (migrated.components.message.assistant as { shadow?: string }).shadow = value as string;
+    } else if (key === 'toolBubbleShadow') {
+      if (!migrated.components) migrated.components = {};
+      if (!migrated.components.toolBubble) migrated.components.toolBubble = {};
+      (migrated.components.toolBubble as { shadow?: string }).shadow = value as string;
+    } else if (key === 'reasoningBubbleShadow') {
+      if (!migrated.components) migrated.components = {};
+      if (!migrated.components.reasoningBubble) migrated.components.reasoningBubble = {};
+      (migrated.components.reasoningBubble as { shadow?: string }).shadow = value as string;
+    } else if (key === 'composerShadow') {
+      if (!migrated.components) migrated.components = {};
+      if (!migrated.components.composer) migrated.components.composer = {};
+      (migrated.components.composer as { shadow?: string }).shadow = value as string;
     }
   }
 
@@ -165,8 +187,27 @@ export function validateV1Theme(v1Theme: unknown): {
     return { valid: true, warnings: [] };
   }
 
+  const v1ThemeChromeKeys = new Set([
+    'panelBorder',
+    'panelShadow',
+    'panelBorderRadius',
+    'messageUserShadow',
+    'messageAssistantShadow',
+    'toolBubbleShadow',
+    'reasoningBubbleShadow',
+    'composerShadow',
+  ]);
+
   const deprecatedProperties = Object.keys(theme).filter(
-    (key) => !(key in v1ToV2Mapping || key in v1RadiusMapping || key === 'inputFontFamily' || key === 'inputFontWeight' || key.startsWith('panel'))
+    (key) =>
+      !(
+        key in v1ToV2Mapping ||
+        key in v1RadiusMapping ||
+        key === 'inputFontFamily' ||
+        key === 'inputFontWeight' ||
+        key.startsWith('panel') ||
+        v1ThemeChromeKeys.has(key)
+      )
   );
 
   if (deprecatedProperties.length > 0) {

package/src/utils/theme.test.ts

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 
 import { afterEach, describe, expect, it } from 'vitest';
-import { createTheme, getActiveTheme, themeToCssVariables } from './theme';
+import { applyThemeVariables, createTheme, getActiveTheme, themeToCssVariables } from './theme';
 
 describe('theme utils', () => {
   afterEach(() => {
@@ -122,4 +122,36 @@ describe('theme utils', () => {
     expect(cssVars['--persona-md-h2-weight']).toBe('600');
     expect(cssVars['--persona-md-prose-font-family']).toBe('Georgia, serif');
   });
+
+  it('maps flat AgentWidgetTheme bubble shadow keys to consumer CSS variables', () => {
+    const cfg = {
+      colorScheme: 'light' as const,
+      theme: {
+        toolBubbleShadow: 'none',
+        reasoningBubbleShadow: 'none',
+        messageUserShadow: 'none',
+        messageAssistantShadow: 'none',
+        composerShadow: 'none',
+      },
+    };
+
+    const active = getActiveTheme(cfg as any);
+    const cssVars = themeToCssVariables(active);
+
+    expect(cssVars['--persona-tool-bubble-shadow']).toBe('none');
+    expect(cssVars['--persona-reasoning-bubble-shadow']).toBe('none');
+    expect(cssVars['--persona-message-user-shadow']).toBe('none');
+    expect(cssVars['--persona-message-assistant-shadow']).toBe('none');
+    expect(cssVars['--persona-composer-shadow']).toBe('none');
+  });
+
+  it('lets config.toolCall.shadow override theme tool bubble shadow on the root element', () => {
+    const el = document.createElement('div');
+    applyThemeVariables(el, {
+      colorScheme: 'light',
+      theme: { toolBubbleShadow: '0 1px 2px rgba(255,0,0,0.5)' },
+      toolCall: { shadow: 'none' },
+    } as any);
+    expect(el.style.getPropertyValue('--persona-tool-bubble-shadow').trim()).toBe('none');
+  });
 });

package/src/utils/theme.ts

@@ -220,6 +220,14 @@ export const applyThemeVariables = (
   for (const [name, value] of Object.entries(cssVars)) {
     element.style.setProperty(name, value);
   }
+
+  const toolCallShadow = (config as AgentWidgetConfig | undefined)?.toolCall?.shadow;
+  if (toolCallShadow !== undefined) {
+    element.style.setProperty(
+      '--persona-tool-bubble-shadow',
+      toolCallShadow.trim() === '' ? 'none' : toolCallShadow
+    );
+  }
 };
 
 export const createThemeObserver = (

package/src/utils/tokens.ts

@@ -271,6 +271,7 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
       background: 'semantic.colors.primary',
       text: 'semantic.colors.textInverse',
       borderRadius: 'palette.radius.lg',
+      shadow: 'palette.shadows.sm',
     },
     assistant: {
       background: 'semantic.colors.container',
@@ -280,6 +281,15 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
       shadow: 'palette.shadows.sm',
     },
   },
+  toolBubble: {
+    shadow: 'palette.shadows.sm',
+  },
+  reasoningBubble: {
+    shadow: 'palette.shadows.sm',
+  },
+  composer: {
+    shadow: 'none',
+  },
   markdown: {
     inlineCode: {
       background: 'semantic.colors.container',
@@ -637,6 +647,8 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
     cssVars['--persona-components-message-user-background'] ?? cssVars['--persona-accent'];
   cssVars['--persona-message-user-text'] =
     cssVars['--persona-components-message-user-text'] ?? cssVars['--persona-text-inverse'];
+  cssVars['--persona-message-user-shadow'] =
+    cssVars['--persona-components-message-user-shadow'] ?? '0 5px 15px rgba(15, 23, 42, 0.08)';
   cssVars['--persona-message-assistant-bg'] =
     cssVars['--persona-components-message-assistant-background'] ?? cssVars['--persona-surface'];
   cssVars['--persona-message-assistant-text'] =
@@ -646,6 +658,13 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
   cssVars['--persona-message-assistant-shadow'] =
     cssVars['--persona-components-message-assistant-shadow'] ?? '0 1px 2px 0 rgb(0 0 0 / 0.05)';
 
+  cssVars['--persona-tool-bubble-shadow'] =
+    cssVars['--persona-components-toolBubble-shadow'] ?? '0 5px 15px rgba(15, 23, 42, 0.08)';
+  cssVars['--persona-reasoning-bubble-shadow'] =
+    cssVars['--persona-components-reasoningBubble-shadow'] ?? '0 5px 15px rgba(15, 23, 42, 0.08)';
+  cssVars['--persona-composer-shadow'] =
+    cssVars['--persona-components-composer-shadow'] ?? 'none';
+
   cssVars['--persona-md-inline-code-bg'] =
     cssVars['--persona-components-markdown-inlineCode-background'] ?? cssVars['--persona-container'];
   cssVars['--persona-md-inline-code-color'] =