@runtypelabs/persona 3.17.0 → 3.18.0

package/src/utils/storage.ts

@@ -1,7 +1,8 @@
 import type {
   AgentWidgetMessage,
   AgentWidgetStorageAdapter,
-  AgentWidgetStoredState
+  AgentWidgetStoredState,
+  PersonaArtifactRecord
 } from "../types";
 
 const safeJsonParse = (value: string | null) => {
@@ -23,6 +24,12 @@ const sanitizeMessages = (messages: AgentWidgetMessage[]) =>
     streaming: false
   }));
 
+const sanitizeArtifacts = (artifacts: PersonaArtifactRecord[]) =>
+  artifacts.map((artifact) => ({
+    ...artifact,
+    status: "complete" as const
+  }));
+
 export const createLocalStorageAdapter = (
   key = "persona-state"
 ): AgentWidgetStorageAdapter => {
@@ -45,7 +52,8 @@ export const createLocalStorageAdapter = (
       try {
         const payload: AgentWidgetStoredState = {
           ...state,
-          messages: state.messages ? sanitizeMessages(state.messages) : undefined
+          messages: state.messages ? sanitizeMessages(state.messages) : undefined,
+          artifacts: state.artifacts ? sanitizeArtifacts(state.artifacts) : undefined
         };
         storage.setItem(key, JSON.stringify(payload));
       } catch (error) {

package/src/utils/theme.test.ts

@@ -252,6 +252,42 @@ describe('theme utils', () => {
     expect(cssVars['--persona-scroll-to-bottom-icon-size']).toBe('14px');
   });
 
+  it('maps introCard component tokens to dedicated CSS variables', () => {
+    const theme = createTheme({
+      components: {
+        introCard: {
+          background: 'palette.colors.accent.50',
+          borderRadius: 'palette.radius.xl',
+          padding: 'semantic.spacing.lg',
+          shadow: '0 10px 30px rgba(53, 44, 131, 0.15)',
+        },
+      },
+    } as any);
+
+    const cssVars = themeToCssVariables(theme);
+
+    expect(cssVars['--persona-components-introCard-background']).toBe('#ecfeff');
+    expect(cssVars['--persona-components-introCard-borderRadius']).toBe('0.75rem');
+    expect(cssVars['--persona-components-introCard-padding']).toBe('1.5rem');
+    expect(cssVars['--persona-components-introCard-shadow']).toBe(
+      '0 10px 30px rgba(53, 44, 131, 0.15)'
+    );
+    expect(cssVars['--persona-intro-card-bg']).toBe('#ecfeff');
+    expect(cssVars['--persona-intro-card-radius']).toBe('0.75rem');
+    expect(cssVars['--persona-intro-card-padding']).toBe('1.5rem');
+    expect(cssVars['--persona-intro-card-shadow']).toBe(
+      '0 10px 30px rgba(53, 44, 131, 0.15)'
+    );
+  });
+
+  it('falls back to the legacy intro-card shadow when no token is set', () => {
+    const theme = createTheme({});
+    const cssVars = themeToCssVariables(theme);
+    expect(cssVars['--persona-intro-card-shadow']).toBe(
+      '0 5px 15px rgba(15, 23, 42, 0.08)'
+    );
+  });
+
   it('lets config.toolCall.shadow override theme tool bubble shadow on the root element', () => {
     const el = document.createElement('div');
     applyThemeVariables(el, {

package/src/utils/tokens.ts

@@ -318,6 +318,14 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
     },
     border: 'semantic.colors.border',
   },
+  introCard: {
+    // Defaults preserve the legacy `persona-shadow-sm` look exactly so existing
+    // pages render unchanged when no token is set.
+    background: 'semantic.colors.surface',
+    borderRadius: 'palette.radius.2xl',
+    padding: 'semantic.spacing.lg',
+    shadow: '0 5px 15px rgba(15, 23, 42, 0.08)',
+  },
   toolBubble: {
     shadow: 'palette.shadows.sm',
   },
@@ -763,6 +771,21 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
   if (headerTokens?.shadow) cssVars['--persona-header-shadow'] = headerTokens.shadow;
   if (headerTokens?.borderBottom) cssVars['--persona-header-border-bottom'] = headerTokens.borderBottom;
 
+  // Intro card aliases — short names the panel inline-styles read directly.
+  // The full-path `--persona-components-introCard-*` variables auto-emit above;
+  // these mirror them with sensible fallbacks so existing pages keep their look.
+  const introCardTokens = theme.components?.introCard;
+  cssVars['--persona-intro-card-bg'] =
+    cssVars['--persona-components-introCard-background'] ?? cssVars['--persona-surface'];
+  cssVars['--persona-intro-card-radius'] =
+    cssVars['--persona-components-introCard-borderRadius'] ?? '1rem';
+  cssVars['--persona-intro-card-padding'] =
+    cssVars['--persona-components-introCard-padding'] ?? '1.5rem';
+  cssVars['--persona-intro-card-shadow'] =
+    introCardTokens?.shadow
+      ?? cssVars['--persona-components-introCard-shadow']
+      ?? '0 5px 15px rgba(15, 23, 42, 0.08)';
+
   cssVars['--persona-input-background'] =
     cssVars['--persona-components-input-background'] ?? cssVars['--persona-surface'];
   cssVars['--persona-input-placeholder'] =