@runtypelabs/persona 3.17.0 → 3.19.0

package/src/utils/attachment-manager.ts

@@ -66,7 +66,7 @@ function getFileIconName(mimeType: string): string {
   if (mimeType.startsWith('text/')) return 'file-text';
   if (mimeType.includes('word')) return 'file-text';
   if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return 'file-spreadsheet';
-  if (mimeType === 'application/json') return 'file-json';
+  if (mimeType === 'application/json') return 'file-code';
   return 'file';
 }
 

package/src/utils/dock.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { isComposerBarMountMode, isDockedMountMode } from "./dock";
+import type { AgentWidgetConfig } from "../types";
+
+describe("isDockedMountMode", () => {
+  it("returns true for mountMode: 'docked'", () => {
+    const config: AgentWidgetConfig = { apiUrl: "/api", launcher: { mountMode: "docked" } };
+    expect(isDockedMountMode(config)).toBe(true);
+  });
+
+  it("returns false for default and other mount modes", () => {
+    expect(isDockedMountMode(undefined)).toBe(false);
+    expect(isDockedMountMode({ apiUrl: "/api" } as AgentWidgetConfig)).toBe(false);
+    expect(
+      isDockedMountMode({ apiUrl: "/api", launcher: { mountMode: "composer-bar" } } as AgentWidgetConfig)
+    ).toBe(false);
+  });
+});
+
+describe("isComposerBarMountMode", () => {
+  it("returns true for mountMode: 'composer-bar'", () => {
+    const config: AgentWidgetConfig = {
+      apiUrl: "/api",
+      launcher: { mountMode: "composer-bar" },
+    };
+    expect(isComposerBarMountMode(config)).toBe(true);
+  });
+
+  it("returns false for default, floating, and docked modes", () => {
+    expect(isComposerBarMountMode(undefined)).toBe(false);
+    expect(isComposerBarMountMode({ apiUrl: "/api" } as AgentWidgetConfig)).toBe(false);
+    expect(
+      isComposerBarMountMode({
+        apiUrl: "/api",
+        launcher: { mountMode: "floating" },
+      } as AgentWidgetConfig)
+    ).toBe(false);
+    expect(
+      isComposerBarMountMode({
+        apiUrl: "/api",
+        launcher: { mountMode: "docked" },
+      } as AgentWidgetConfig)
+    ).toBe(false);
+  });
+});

package/src/utils/dock.ts

@@ -10,6 +10,9 @@ const DEFAULT_DOCK_CONFIG: Required<AgentWidgetDockConfig> = {
 export const isDockedMountMode = (config?: AgentWidgetConfig): boolean =>
   (config?.launcher?.mountMode ?? "floating") === "docked";
 
+export const isComposerBarMountMode = (config?: AgentWidgetConfig): boolean =>
+  (config?.launcher?.mountMode ?? "floating") === "composer-bar";
+
 /**
  * Resolved dock layout. For `reveal: "resize"`, when the panel is closed the dock column is `0px`.
  * For `reveal: "overlay"`, the panel overlays with `transform`. For `reveal: "push"`, a sliding track

package/src/utils/icons.ts

@@ -1,58 +1,324 @@
-import * as icons from "lucide";
 import type { IconNode } from "lucide";
+import {
+  // ---------- Mandatory (referenced as string literals in widget source) ----------
+  Activity,
+  ArrowDown,
+  ArrowUp,
+  ArrowUpRight,
+  Bot,
+  ChevronDown,
+  ChevronUp,
+  ChevronRight,
+  ChevronLeft,
+  Check,
+  Clipboard,
+  ClipboardCopy,
+  Copy,
+  File as FileIcon,
+  FileCode,
+  FileSpreadsheet,
+  FileText,
+  ImagePlus,
+  Loader,
+  LoaderCircle,
+  Mic,
+  Paperclip,
+  RefreshCw,
+  Search,
+  Send,
+  ShieldAlert,
+  ShieldCheck,
+  ShieldX,
+  Square,
+  ThumbsDown,
+  ThumbsUp,
+  Upload,
+  Volume2,
+  X,
+  // ---------- Forms / inputs ----------
+  User,
+  Mail,
+  Phone,
+  Calendar,
+  Clock,
+  Building,
+  MapPin,
+  Lock,
+  Key,
+  CreditCard,
+  AtSign,
+  Hash,
+  Globe,
+  Link,
+  // ---------- Status / feedback ----------
+  CircleCheck,
+  CircleX,
+  TriangleAlert,
+  Info,
+  Ban,
+  Shield,
+  // ---------- Navigation ----------
+  ArrowLeft,
+  ArrowRight,
+  ExternalLink,
+  Ellipsis,
+  EllipsisVertical,
+  Menu,
+  House,
+  // ---------- Actions ----------
+  Plus,
+  Minus,
+  Pencil,
+  Trash,
+  Trash2,
+  Save,
+  Download,
+  Share,
+  Funnel,
+  Settings,
+  RotateCw,
+  Maximize,
+  Minimize,
+  // ---------- Commerce ----------
+  ShoppingCart,
+  ShoppingBag,
+  Package,
+  Truck,
+  Tag,
+  Gift,
+  Receipt,
+  Wallet,
+  Store,
+  DollarSign,
+  Percent,
+  // ---------- Media ----------
+  Play,
+  Pause,
+  VolumeX,
+  Camera,
+  Image as ImageIcon,
+  Film,
+  Headphones,
+  // ---------- Social / Comms ----------
+  MessageCircle,
+  MessageSquare,
+  Bell,
+  Heart,
+  Star,
+  Eye,
+  EyeOff,
+  Bookmark,
+  // ---------- Time ----------
+  CalendarDays,
+  History,
+  Timer,
+  // ---------- Files ----------
+  Folder,
+  FolderOpen,
+  Files,
+  // ---------- Decorative ----------
+  Sparkles,
+  Zap,
+  Sun,
+  Moon,
+  Flag,
+  // ---------- Devices ----------
+  Monitor,
+  Smartphone,
+} from "lucide";
 
 /**
- * Renders a Lucide icon as an inline SVG element
- * This approach requires no CSS and works on any page
- * 
- * @param iconName - The Lucide icon name in kebab-case (e.g., "arrow-up")
- * @param size - The size of the icon (default: 24)
- * @param color - The stroke color (default: "currentColor")
- * @param strokeWidth - The stroke width (default: 2)
- * @returns SVGElement or null if icon not found
+ * Curated registry of lucide icons available to `renderLucideIcon`.
+ *
+ * The widget used to do `import * as icons from "lucide"` and look up
+ * icons dynamically by string. That defeated tree-shaking, so the IIFE
+ * (CDN/script-tag) bundle shipped all 1640 lucide icons (~400KB of icon
+ * data) regardless of which we actually used. This explicit registry
+ * lets the bundler drop any icon not listed here.
+ *
+ * Trade-off: `renderLucideIcon(name)` is now a *closed set*. Names not
+ * in this map return `null` and log a warning, exactly as a typo did
+ * before. The registry is intentionally generous (~110 icons) so that
+ * custom `ComponentRenderer` authors rarely hit a missing-icon dead end.
+ *
+ * To add icons: add a named import above and a row in `LUCIDE_ICONS`,
+ * keyed by the lucide kebab-case name (matches their filename and
+ * https://lucide.dev/icons).
+ *
+ * See `packages/widget/docs/icon-registry-shortlist.md` for the full
+ * curation rationale and which icons were considered but excluded.
+ */
+const LUCIDE_ICONS = {
+  // Mandatory
+  "activity": Activity,
+  "arrow-down": ArrowDown,
+  "arrow-up": ArrowUp,
+  "arrow-up-right": ArrowUpRight,
+  "bot": Bot,
+  "chevron-down": ChevronDown,
+  "chevron-up": ChevronUp,
+  "chevron-right": ChevronRight,
+  "chevron-left": ChevronLeft,
+  "check": Check,
+  "clipboard": Clipboard,
+  "clipboard-copy": ClipboardCopy,
+  "copy": Copy,
+  "file": FileIcon,
+  "file-code": FileCode,
+  "file-spreadsheet": FileSpreadsheet,
+  "file-text": FileText,
+  "image-plus": ImagePlus,
+  "loader": Loader,
+  "loader-circle": LoaderCircle,
+  "mic": Mic,
+  "paperclip": Paperclip,
+  "refresh-cw": RefreshCw,
+  "search": Search,
+  "send": Send,
+  "shield-alert": ShieldAlert,
+  "shield-check": ShieldCheck,
+  "shield-x": ShieldX,
+  "square": Square,
+  "thumbs-down": ThumbsDown,
+  "thumbs-up": ThumbsUp,
+  "upload": Upload,
+  "volume-2": Volume2,
+  "x": X,
+  // Forms / inputs
+  "user": User,
+  "mail": Mail,
+  "phone": Phone,
+  "calendar": Calendar,
+  "clock": Clock,
+  "building": Building,
+  "map-pin": MapPin,
+  "lock": Lock,
+  "key": Key,
+  "credit-card": CreditCard,
+  "at-sign": AtSign,
+  "hash": Hash,
+  "globe": Globe,
+  "link": Link,
+  // Status / feedback
+  "circle-check": CircleCheck,
+  "circle-x": CircleX,
+  "triangle-alert": TriangleAlert,
+  "info": Info,
+  "ban": Ban,
+  "shield": Shield,
+  // Navigation
+  "arrow-left": ArrowLeft,
+  "arrow-right": ArrowRight,
+  "external-link": ExternalLink,
+  "ellipsis": Ellipsis,
+  "ellipsis-vertical": EllipsisVertical,
+  "menu": Menu,
+  "house": House,
+  // Actions
+  "plus": Plus,
+  "minus": Minus,
+  "pencil": Pencil,
+  "trash": Trash,
+  "trash-2": Trash2,
+  "save": Save,
+  "download": Download,
+  "share": Share,
+  "funnel": Funnel,
+  "settings": Settings,
+  "rotate-cw": RotateCw,
+  "maximize": Maximize,
+  "minimize": Minimize,
+  // Commerce
+  "shopping-cart": ShoppingCart,
+  "shopping-bag": ShoppingBag,
+  "package": Package,
+  "truck": Truck,
+  "tag": Tag,
+  "gift": Gift,
+  "receipt": Receipt,
+  "wallet": Wallet,
+  "store": Store,
+  "dollar-sign": DollarSign,
+  "percent": Percent,
+  // Media
+  "play": Play,
+  "pause": Pause,
+  "volume-x": VolumeX,
+  "camera": Camera,
+  "image": ImageIcon,
+  "film": Film,
+  "headphones": Headphones,
+  // Social / Comms
+  "message-circle": MessageCircle,
+  "message-square": MessageSquare,
+  "bell": Bell,
+  "heart": Heart,
+  "star": Star,
+  "eye": Eye,
+  "eye-off": EyeOff,
+  "bookmark": Bookmark,
+  // Time
+  "calendar-days": CalendarDays,
+  "history": History,
+  "timer": Timer,
+  // Files
+  "folder": Folder,
+  "folder-open": FolderOpen,
+  "files": Files,
+  // Decorative
+  "sparkles": Sparkles,
+  "zap": Zap,
+  "sun": Sun,
+  "moon": Moon,
+  "flag": Flag,
+  // Devices
+  "monitor": Monitor,
+  "smartphone": Smartphone,
+} as const satisfies Record<string, IconNode>;
+
+/**
+ * Names of lucide icons that ship with the widget. Names not in this
+ * union return `null` from `renderLucideIcon` (with a console warning).
+ */
+export type IconName = keyof typeof LUCIDE_ICONS;
+
+/**
+ * Renders a lucide icon as an inline SVG element. Works inside Shadow
+ * DOM and requires no CSS.
+ *
+ * @param iconName - A lucide kebab-case name from the registry. See
+ *   `IconName` for the full list, or `docs/icon-registry-shortlist.md`
+ *   for rationale.
+ * @param size - The size in pixels (number) or any CSS length string.
+ * @param color - Stroke color (default: "currentColor").
+ * @param strokeWidth - Stroke width (default: 2).
+ * @returns SVGElement, or null if the name is not in the registry.
  */
 export const renderLucideIcon = (
-  iconName: string,
+  iconName: IconName | (string & {}),
   size: number | string = 24,
   color: string = "currentColor",
   strokeWidth: number = 2
 ): SVGElement | null => {
-  try {
-    // Convert kebab-case to PascalCase (e.g., "arrow-up" -> "ArrowUp")
-    const pascalName = iconName
-      .split("-")
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-      .join("");
-    
-    // Lucide's icons object contains IconNode data directly, not functions
-    const iconData = (icons as unknown as Record<string, IconNode>)[pascalName] as IconNode;
-    
-    if (!iconData) {
-      console.warn(`Lucide icon "${iconName}" not found (tried "${pascalName}"). Available icons: https://lucide.dev/icons`);
-      return null;
-    }
-
-    return createSvgFromIconData(iconData, size, color, strokeWidth);
-  } catch (error) {
-    console.warn(`Failed to render Lucide icon "${iconName}":`, error);
+  const iconData = (LUCIDE_ICONS as Record<string, IconNode | undefined>)[iconName];
+  if (!iconData) {
+    console.warn(
+      `Lucide icon "${iconName}" is not in the Persona registry. ` +
+      `Add it to packages/widget/src/utils/icons.ts (see docs/icon-registry-shortlist.md).`
+    );
     return null;
   }
+  return createSvgFromIconData(iconData, size, color, strokeWidth);
 };
 
-/**
- * Helper function to create SVG from IconNode data
- */
 function createSvgFromIconData(
   iconData: IconNode,
   size: number | string,
   color: string,
   strokeWidth: number
 ): SVGElement | null {
-  if (!iconData || !Array.isArray(iconData)) {
-    return null;
-  }
+  if (!Array.isArray(iconData)) return null;
 
-  // Create SVG element
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg.setAttribute("width", String(size));
   svg.setAttribute("height", String(size));
@@ -63,30 +329,20 @@ function createSvgFromIconData(
   svg.setAttribute("stroke-linecap", "round");
   svg.setAttribute("stroke-linejoin", "round");
   svg.setAttribute("aria-hidden", "true");
-  
-  // Render elements from icon data
-  // IconNode format: [["path", {"d": "..."}], ["rect", {"x": "...", "y": "..."}], ...]
+
+  // IconNode shape: [["path", {"d": "..."}], ["circle", {"cx": "..."}], ...]
   iconData.forEach((elementData) => {
-    if (Array.isArray(elementData) && elementData.length >= 2) {
-      const tagName = elementData[0] as string;
-      const attrs = elementData[1] as Record<string, string>;
-      
-      if (attrs) {
-        // Create the appropriate SVG element (path, rect, circle, ellipse, line, etc.)
-        const element = document.createElementNS("http://www.w3.org/2000/svg", tagName);
-        
-        // Apply all attributes, but skip 'stroke' (we want to use the parent SVG's stroke for consistent coloring)
-        Object.entries(attrs).forEach(([key, value]) => {
-          if (key !== "stroke") {
-            element.setAttribute(key, String(value));
-          }
-        });
-        
-        svg.appendChild(element);
-      }
-    }
+    if (!Array.isArray(elementData) || elementData.length < 2) return;
+    const tagName = elementData[0] as string;
+    const attrs = elementData[1] as Record<string, string> | undefined;
+    if (!attrs) return;
+    const element = document.createElementNS("http://www.w3.org/2000/svg", tagName);
+    Object.entries(attrs).forEach(([key, value]) => {
+      // Skip 'stroke' so the parent SVG's stroke attribute drives color uniformly
+      if (key !== "stroke") element.setAttribute(key, String(value));
+    });
+    svg.appendChild(element);
   });
-  
+
   return svg;
 }
-

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/stream-animation.ts

@@ -275,7 +275,7 @@ export const wrapStreamAnimation = (
   html: string,
   mode: "char" | "word",
   messageId: string,
-  options?: { skipTags?: string[] }
+  options?: { skipTags?: string[]; startIndex?: number }
 ): string => {
   if (!html) return html;
   if (typeof document === "undefined") return html;
@@ -294,7 +294,12 @@ export const wrapStreamAnimation = (
     node = walker.nextNode();
   }
 
-  const counterRef = { value: 0 };
+  // `startIndex` lets callers number spans by their absolute position in a
+  // larger string, even when only a slice is being wrapped. The peek banner
+  // uses this so per-char span IDs stay stable as the trailing-100-char
+  // window shifts each chunk — idiomorph then preserves animations on
+  // already-revealed chars instead of restarting them.
+  const counterRef = { value: options?.startIndex ?? 0 };
   const wrap = mode === "char" ? wrapTextNodeChars : wrapTextNodeWords;
   for (const textNode of textNodes) {
     wrap(textNode, messageId, counterRef);

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'] =