@runtypelabs/persona 1.36.0

package/src/utils/icons.ts

@@ -0,0 +1,92 @@
+import * as icons from "lucide";
+import type { IconNode } 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
+ */
+export const renderLucideIcon = (
+  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 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);
+    return null;
+  }
+};
+
+/**
+ * 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;
+  }
+
+  // Create SVG element
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", color);
+  svg.setAttribute("stroke-width", String(strokeWidth));
+  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": "..."}], ...]
+  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);
+      }
+    }
+  });
+  
+  return svg;
+}
+

package/src/utils/message-id.ts

@@ -0,0 +1,37 @@
+/**
+ * Message ID utilities for client-side message tracking
+ * Used for feedback integration with the Travrse API
+ */
+
+/**
+ * Generate a unique message ID for tracking
+ * Format: msg_{timestamp_base36}_{random_8chars}
+ */
+export function generateMessageId(): string {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 10);
+  return `msg_${timestamp}_${random}`;
+}
+
+/**
+ * Generate a unique user message ID
+ * Format: usr_{timestamp_base36}_{random_8chars}
+ */
+export function generateUserMessageId(): string {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 10);
+  return `usr_${timestamp}_${random}`;
+}
+
+/**
+ * Generate a unique assistant message ID
+ * Format: ast_{timestamp_base36}_{random_8chars}
+ */
+export function generateAssistantMessageId(): string {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 10);
+  return `ast_${timestamp}_${random}`;
+}
+
+
+

package/src/utils/morph.ts

@@ -0,0 +1,36 @@
+import { Idiomorph } from "idiomorph";
+
+export type MorphOptions = {
+  preserveTypingAnimation?: boolean;
+};
+
+/**
+ * Morph a container's contents using idiomorph with chat-widget-specific
+ * preservation rules for typing indicators.
+ *
+ * Action buttons are matched by their `id` attribute (set to `actions-{messageId}`)
+ * so idiomorph updates them in place rather than recreating them.
+ */
+export const morphMessages = (
+  container: HTMLElement,
+  newContent: HTMLElement,
+  options: MorphOptions = {}
+): void => {
+  const { preserveTypingAnimation = true } = options;
+
+  Idiomorph.morph(container, newContent.innerHTML, {
+    morphStyle: "innerHTML",
+    callbacks: {
+      beforeNodeMorphed(oldNode: Node, newNode: Node): boolean | void {
+        if (!(oldNode instanceof HTMLElement)) return;
+
+        // Preserve typing indicator dots to maintain animation continuity
+        if (preserveTypingAnimation) {
+          if (oldNode.classList.contains("tvw-animate-typing")) {
+            return false;
+          }
+        }
+      },
+    },
+  });
+};

package/src/utils/positioning.ts

@@ -0,0 +1,17 @@
+export const positionMap: Record<
+  "bottom-right" | "bottom-left" | "top-right" | "top-left",
+  string
+> = {
+  "bottom-right": "tvw-bottom-6 tvw-right-6",
+  "bottom-left": "tvw-bottom-6 tvw-left-6",
+  "top-right": "tvw-top-6 tvw-right-6",
+  "top-left": "tvw-top-6 tvw-left-6"
+};
+
+
+
+
+
+
+
+

package/src/utils/storage.ts

@@ -0,0 +1,72 @@
+import type {
+  AgentWidgetMessage,
+  AgentWidgetStorageAdapter,
+  AgentWidgetStoredState
+} from "../types";
+
+const safeJsonParse = (value: string | null) => {
+  if (!value) return null;
+  try {
+    return JSON.parse(value);
+  } catch (error) {
+    if (typeof console !== "undefined") {
+      // eslint-disable-next-line no-console
+      console.error("[AgentWidget] Failed to parse stored state:", error);
+    }
+    return null;
+  }
+};
+
+const sanitizeMessages = (messages: AgentWidgetMessage[]) =>
+  messages.map((message) => ({
+    ...message,
+    streaming: false
+  }));
+
+export const createLocalStorageAdapter = (
+  key = "persona-state"
+): AgentWidgetStorageAdapter => {
+  const getStorage = () => {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return null;
+    }
+    return window.localStorage;
+  };
+
+  return {
+    load: () => {
+      const storage = getStorage();
+      if (!storage) return null;
+      return safeJsonParse(storage.getItem(key));
+    },
+    save: (state: AgentWidgetStoredState) => {
+      const storage = getStorage();
+      if (!storage) return;
+      try {
+        const payload: AgentWidgetStoredState = {
+          ...state,
+          messages: state.messages ? sanitizeMessages(state.messages) : undefined
+        };
+        storage.setItem(key, JSON.stringify(payload));
+      } catch (error) {
+        if (typeof console !== "undefined") {
+          // eslint-disable-next-line no-console
+          console.error("[AgentWidget] Failed to persist state:", error);
+        }
+      }
+    },
+    clear: () => {
+      const storage = getStorage();
+      if (!storage) return;
+      try {
+        storage.removeItem(key);
+      } catch (error) {
+        if (typeof console !== "undefined") {
+          // eslint-disable-next-line no-console
+          console.error("[AgentWidget] Failed to clear stored state:", error);
+        }
+      }
+    }
+  };
+};
+

package/src/utils/theme.ts

@@ -0,0 +1,105 @@
+import { AgentWidgetConfig, AgentWidgetTheme } from "../types";
+
+/**
+ * Detects the current color scheme from the page.
+ * 1. Checks if <html> element has 'dark' class
+ * 2. Falls back to prefers-color-scheme media query
+ */
+export const detectColorScheme = (): 'light' | 'dark' => {
+  // Check for 'dark' class on <html> element
+  if (typeof document !== 'undefined' && document.documentElement.classList.contains('dark')) {
+    return 'dark';
+  }
+  
+  // Fall back to media query
+  if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches) {
+    return 'dark';
+  }
+  
+  return 'light';
+};
+
+/**
+ * Gets the active theme based on colorScheme setting and current detection.
+ */
+export const getActiveTheme = (config?: AgentWidgetConfig): AgentWidgetTheme => {
+  const colorScheme = config?.colorScheme ?? 'light';
+  const lightTheme = config?.theme ?? {};
+  const darkTheme = config?.darkTheme ?? lightTheme;
+  
+  if (colorScheme === 'light') {
+    return lightTheme;
+  }
+  
+  if (colorScheme === 'dark') {
+    return darkTheme;
+  }
+  
+  // colorScheme === 'auto'
+  const detectedScheme = detectColorScheme();
+  return detectedScheme === 'dark' ? darkTheme : lightTheme;
+};
+
+/**
+ * Creates observers for theme changes (HTML class and media query).
+ * Returns a cleanup function.
+ */
+export const createThemeObserver = (
+  callback: (scheme: 'light' | 'dark') => void
+): (() => void) => {
+  const cleanupFns: Array<() => void> = [];
+  
+  // Observe HTML class changes
+  if (typeof document !== 'undefined' && typeof MutationObserver !== 'undefined') {
+    const observer = new MutationObserver(() => {
+      callback(detectColorScheme());
+    });
+    
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+    
+    cleanupFns.push(() => observer.disconnect());
+  }
+  
+  // Observe media query changes
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = () => callback(detectColorScheme());
+    
+    // Use addEventListener if available (modern browsers), otherwise addListener
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', handleChange);
+      cleanupFns.push(() => mediaQuery.removeEventListener('change', handleChange));
+    } else if (mediaQuery.addListener) {
+      // Legacy Safari
+      mediaQuery.addListener(handleChange);
+      cleanupFns.push(() => mediaQuery.removeListener(handleChange));
+    }
+  }
+  
+  return () => {
+    cleanupFns.forEach(fn => fn());
+  };
+};
+
+export const applyThemeVariables = (
+  element: HTMLElement,
+  config?: AgentWidgetConfig
+) => {
+  const theme = getActiveTheme(config);
+  Object.entries(theme).forEach(([key, value]) => {
+    // Skip undefined or empty values
+    if (value === undefined || value === null || value === "") {
+      return;
+    }
+    // Convert camelCase to kebab-case (e.g., radiusSm → radius-sm)
+    const kebabKey = key.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
+    element.style.setProperty(`--cw-${kebabKey}`, String(value));
+  });
+};
+
+
+
+

package/src/widget.css

@@ -0,0 +1 @@
+@import "./styles/widget.css";

package/widget.css

@@ -0,0 +1 @@
+@import "./src/widget.css";