@runtypelabs/persona 3.18.0 → 3.20.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/component-middleware.test.ts

@@ -0,0 +1,134 @@
+import { describe, it, expect } from "vitest";
+
+import {
+  extractComponentDirectiveFromMessage,
+  hasComponentDirective
+} from "./component-middleware";
+import type { AgentWidgetMessage } from "../types";
+
+const baseMessage = (overrides: Partial<AgentWidgetMessage>): AgentWidgetMessage => ({
+  id: "msg-1",
+  role: "assistant",
+  content: "",
+  createdAt: "2026-01-01T00:00:00.000Z",
+  ...overrides
+});
+
+describe("extractComponentDirectiveFromMessage", () => {
+  it("extracts directive from rawContent (streamed path)", () => {
+    const directive = {
+      text: "Booking form",
+      component: "DynamicForm",
+      props: { title: "Book a demo" }
+    };
+    const message = baseMessage({
+      content: "Booking form",
+      rawContent: JSON.stringify(directive)
+    });
+
+    const result = extractComponentDirectiveFromMessage(message);
+
+    expect(result).not.toBeNull();
+    expect(result?.component).toBe("DynamicForm");
+    expect(result?.props).toEqual({ title: "Book a demo" });
+    expect(result?.raw).toBe(JSON.stringify(directive));
+  });
+
+  it("falls back to content when rawContent is missing and content looks like JSON", () => {
+    const directive = {
+      text: "Booking form",
+      component: "DynamicForm",
+      props: { title: "Book a demo" }
+    };
+    const message = baseMessage({
+      content: JSON.stringify(directive)
+    });
+
+    const result = extractComponentDirectiveFromMessage(message);
+
+    expect(result).not.toBeNull();
+    expect(result?.component).toBe("DynamicForm");
+    expect(result?.props).toEqual({ title: "Book a demo" });
+  });
+
+  it("prefers rawContent over content when both are present", () => {
+    const message = baseMessage({
+      rawContent: JSON.stringify({
+        text: "Raw form",
+        component: "RawComponent",
+        props: { source: "raw" }
+      }),
+      content: JSON.stringify({
+        text: "Content form",
+        component: "ContentComponent",
+        props: { source: "content" }
+      })
+    });
+
+    const result = extractComponentDirectiveFromMessage(message);
+
+    expect(result?.component).toBe("RawComponent");
+    expect(result?.props).toEqual({ source: "raw" });
+  });
+
+  it("returns null for plain-text content", () => {
+    const message = baseMessage({ content: "Hello, how can I help?" });
+    expect(extractComponentDirectiveFromMessage(message)).toBeNull();
+  });
+
+  it("returns null when content is JSON without a component field", () => {
+    const message = baseMessage({
+      content: JSON.stringify({ text: "Just text", foo: "bar" })
+    });
+    expect(extractComponentDirectiveFromMessage(message)).toBeNull();
+  });
+
+  it("returns null for empty rawContent and empty content", () => {
+    const message = baseMessage({ rawContent: "", content: "" });
+    expect(extractComponentDirectiveFromMessage(message)).toBeNull();
+  });
+
+  it("returns null when JSON is malformed", () => {
+    const message = baseMessage({ rawContent: '{"component": "Foo"' });
+    expect(extractComponentDirectiveFromMessage(message)).toBeNull();
+  });
+
+  it("defaults props to {} when the directive omits or nulls them", () => {
+    const message = baseMessage({
+      rawContent: JSON.stringify({ text: "x", component: "Foo" })
+    });
+    const result = extractComponentDirectiveFromMessage(message);
+    expect(result?.props).toEqual({});
+
+    const messageNullProps = baseMessage({
+      rawContent: JSON.stringify({ text: "x", component: "Foo", props: null })
+    });
+    expect(extractComponentDirectiveFromMessage(messageNullProps)?.props).toEqual({});
+  });
+});
+
+describe("hasComponentDirective", () => {
+  it("returns true when rawContent carries a directive", () => {
+    const message = baseMessage({
+      rawContent: JSON.stringify({ text: "x", component: "Foo", props: {} })
+    });
+    expect(hasComponentDirective(message)).toBe(true);
+  });
+
+  it("returns true when only content carries a directive", () => {
+    const message = baseMessage({
+      content: JSON.stringify({ text: "x", component: "Foo", props: {} })
+    });
+    expect(hasComponentDirective(message)).toBe(true);
+  });
+
+  it("returns false for plain content", () => {
+    const message = baseMessage({ content: "Hello!" });
+    expect(hasComponentDirective(message)).toBe(false);
+  });
+
+  it("returns false for malformed JSON", () => {
+    const message = baseMessage({ rawContent: "{not json" });
+    expect(hasComponentDirective(message)).toBe(false);
+  });
+});

package/src/utils/component-middleware.ts

@@ -87,18 +87,42 @@ export function createComponentMiddleware() {
 }
 
 /**
- * Checks if a message contains a component directive in its raw content
+ * Picks the field that may carry a JSON directive payload. Streamed messages
+ * populate `rawContent`; manually injected messages may pass the JSON via
+ * `content` directly. We try `rawContent` first, then fall back to `content`
+ * when it looks like JSON, so both code paths render the same way.
+ */
+function selectDirectiveSource(message: AgentWidgetMessage): string | null {
+  if (typeof message.rawContent === "string" && message.rawContent.length > 0) {
+    return message.rawContent;
+  }
+  if (typeof message.content === "string") {
+    const trimmed = message.content.trim();
+    if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+      return message.content;
+    }
+  }
+  return null;
+}
+
+/**
+ * Checks if a message contains a component directive.
+ *
+ * Looks at `rawContent` first (the field set by stream parsers); falls back
+ * to `content` when it looks like JSON, so injected messages that pass the
+ * directive via `content` (or have no `rawContent`) are still recognized.
  */
 export function hasComponentDirective(message: AgentWidgetMessage): boolean {
-  if (!message.rawContent) return false;
-  
+  const source = selectDirectiveSource(message);
+  if (!source) return false;
+
   try {
-    const parsed = JSON.parse(message.rawContent);
+    const parsed = JSON.parse(source);
     return (
       typeof parsed === "object" &&
       parsed !== null &&
       "component" in parsed &&
-      typeof parsed.component === "string"
+      typeof (parsed as { component: unknown }).component === "string"
     );
   } catch {
     return false;
@@ -106,27 +130,34 @@ export function hasComponentDirective(message: AgentWidgetMessage): boolean {
 }
 
 /**
- * Extracts component directive from a complete message
+ * Extracts component directive from a complete message.
+ *
+ * Looks at `rawContent` first (the field set by stream parsers); falls back
+ * to `content` when it looks like JSON, so injected messages that pass the
+ * directive via `content` (or have no `rawContent`) render the same as
+ * streamed ones.
  */
 export function extractComponentDirectiveFromMessage(
   message: AgentWidgetMessage
 ): ComponentDirective | null {
-  if (!message.rawContent) return null;
+  const source = selectDirectiveSource(message);
+  if (!source) return null;
 
   try {
-    const parsed = JSON.parse(message.rawContent);
+    const parsed = JSON.parse(source);
     if (
       typeof parsed === "object" &&
       parsed !== null &&
       "component" in parsed &&
-      typeof parsed.component === "string"
+      typeof (parsed as { component: unknown }).component === "string"
     ) {
+      const directive = parsed as { component: string; props?: unknown };
       return {
-        component: parsed.component,
-        props: (parsed.props && typeof parsed.props === "object" && parsed.props !== null
-          ? parsed.props
+        component: directive.component,
+        props: (directive.props && typeof directive.props === "object" && directive.props !== null
+          ? directive.props
           : {}) as Record<string, unknown>,
-        raw: message.rawContent
+        raw: source
       };
     }
   } catch {

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;
 }
-