@runtypelabs/persona 2.0.0 → 2.2.0

package/src/ui.ts

@@ -1142,6 +1142,9 @@ export const createAgentExperience = (
     event.stopPropagation();
     const artifactId = dlBtn.getAttribute('data-download-artifact');
     if (!artifactId) return;
+    // Let integrator intercept
+    const dlPrevented = config.features?.artifacts?.onArtifactAction?.({ type: 'download', artifactId });
+    if (dlPrevented === true) return;
     // Try session state first, fall back to content stored in the card's rawContent props
     const artifact = session.getArtifactById(artifactId);
     let markdown = artifact?.markdown;
@@ -1180,6 +1183,9 @@ export const createAgentExperience = (
     if (!card) return;
     const artifactId = card.getAttribute('data-open-artifact');
     if (!artifactId) return;
+    // Let integrator intercept
+    const openPrevented = config.features?.artifacts?.onArtifactAction?.({ type: 'open', artifactId });
+    if (openPrevented === true) return;
     event.preventDefault();
     event.stopPropagation();
     session.selectArtifact(artifactId);
@@ -3560,6 +3566,8 @@ export const createAgentExperience = (
       const previousMessageActions = config.messageActions;
       const previousLayoutMessages = config.layout?.messages;
       const previousColorScheme = config.colorScheme;
+      const previousLoadingIndicator = config.loadingIndicator;
+      const previousIterationDisplay = config.iterationDisplay;
       config = { ...config, ...nextConfig };
       // applyFullHeightStyles resets mount.style.cssText, so call it before applyThemeVariables
       applyFullHeightStyles();
@@ -3790,7 +3798,12 @@ export const createAgentExperience = (
       const toolCallConfigChanged = JSON.stringify(nextConfig.toolCall) !== JSON.stringify(previousToolCallConfig);
       const messageActionsChanged = JSON.stringify(config.messageActions) !== JSON.stringify(previousMessageActions);
       const layoutMessagesChanged = JSON.stringify(config.layout?.messages) !== JSON.stringify(previousLayoutMessages);
-      const messagesConfigChanged = toolCallConfigChanged || messageActionsChanged || layoutMessagesChanged;
+      const loadingIndicatorChanged = config.loadingIndicator?.render !== previousLoadingIndicator?.render
+        || config.loadingIndicator?.renderIdle !== previousLoadingIndicator?.renderIdle
+        || config.loadingIndicator?.showBubble !== previousLoadingIndicator?.showBubble;
+      const iterationDisplayChanged = config.iterationDisplay !== previousIterationDisplay;
+      const messagesConfigChanged = toolCallConfigChanged || messageActionsChanged || layoutMessagesChanged
+        || loadingIndicatorChanged || iterationDisplayChanged;
       if (messagesConfigChanged && session) {
         configVersion++;
         renderMessagesWithPlugins(messagesWrapper, session.getMessages(), postprocess);

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'] =
@@ -670,6 +689,42 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
     cssVars['--persona-md-prose-font-family'] = mdProseFont;
   }
 
+  // Artifact tokens
+  const components = theme.components;
+  const artifact = components?.artifact;
+  if (artifact?.toolbar) {
+    const t = artifact.toolbar;
+    if (t.iconHoverColor) cssVars['--persona-artifact-toolbar-icon-hover-color'] = t.iconHoverColor;
+    if (t.iconHoverBackground) cssVars['--persona-artifact-toolbar-icon-hover-bg'] = t.iconHoverBackground;
+    if (t.iconPadding) cssVars['--persona-artifact-toolbar-icon-padding'] = t.iconPadding;
+    if (t.iconBorderRadius) cssVars['--persona-artifact-toolbar-icon-radius'] = t.iconBorderRadius;
+    if (t.iconBorder) cssVars['--persona-artifact-toolbar-icon-border'] = t.iconBorder;
+    if (t.toggleGroupGap) cssVars['--persona-artifact-toolbar-toggle-group-gap'] = t.toggleGroupGap;
+    if (t.toggleBorderRadius) cssVars['--persona-artifact-toolbar-toggle-radius'] = t.toggleBorderRadius;
+    if (t.copyBackground) cssVars['--persona-artifact-toolbar-copy-bg'] = t.copyBackground;
+    if (t.copyBorder) cssVars['--persona-artifact-toolbar-copy-border'] = t.copyBorder;
+    if (t.copyColor) cssVars['--persona-artifact-toolbar-copy-color'] = t.copyColor;
+    if (t.copyBorderRadius) cssVars['--persona-artifact-toolbar-copy-radius'] = t.copyBorderRadius;
+    if (t.copyPadding) cssVars['--persona-artifact-toolbar-copy-padding'] = t.copyPadding;
+    if (t.copyMenuBackground) cssVars['--persona-artifact-toolbar-copy-menu-bg'] = t.copyMenuBackground;
+    if (t.copyMenuBorder) cssVars['--persona-artifact-toolbar-copy-menu-border'] = t.copyMenuBorder;
+    if (t.copyMenuShadow) cssVars['--persona-artifact-toolbar-copy-menu-shadow'] = t.copyMenuShadow;
+    if (t.copyMenuBorderRadius) cssVars['--persona-artifact-toolbar-copy-menu-radius'] = t.copyMenuBorderRadius;
+    if (t.copyMenuItemHoverBackground) cssVars['--persona-artifact-toolbar-copy-menu-item-hover-bg'] = t.copyMenuItemHoverBackground;
+  }
+  if (artifact?.tab) {
+    const t = artifact.tab;
+    if (t.background) cssVars['--persona-artifact-tab-bg'] = t.background;
+    if (t.activeBackground) cssVars['--persona-artifact-tab-active-bg'] = t.activeBackground;
+    if (t.activeBorder) cssVars['--persona-artifact-tab-active-border'] = t.activeBorder;
+    if (t.borderRadius) cssVars['--persona-artifact-tab-radius'] = t.borderRadius;
+    if (t.textColor) cssVars['--persona-artifact-tab-color'] = t.textColor;
+  }
+  if (artifact?.pane) {
+    const t = artifact.pane;
+    if (t.toolbarBackground) cssVars['--persona-artifact-toolbar-bg'] = t.toolbarBackground;
+  }
+
   return cssVars;
 }
 
@@ -680,3 +735,21 @@ export function applyThemeVariables(element: HTMLElement, theme: PersonaTheme):
     element.style.setProperty(name, value);
   }
 }
+
+/**
+ * Stable `data-persona-theme-zone` values applied to key widget regions.
+ * Visual editors should use `[data-persona-theme-zone="header"]` selectors
+ * rather than internal class names.
+ */
+export const THEME_ZONES = {
+  header: 'Widget header bar',
+  messages: 'Message list area',
+  'user-message': 'User message bubble',
+  'assistant-message': 'Assistant message bubble',
+  composer: 'Footer / composer area',
+  container: 'Main widget container',
+  'artifact-pane': 'Artifact sidebar',
+  'artifact-toolbar': 'Artifact toolbar',
+} as const;
+
+export type ThemeZone = keyof typeof THEME_ZONES;