@runtypelabs/persona 2.3.1 → 3.1.0

package/src/components/launcher.ts

@@ -1,7 +1,7 @@
 import { createElement } from "../utils/dom";
 import { AgentWidgetConfig } from "../types";
 import { positionMap } from "../utils/positioning";
-import { isDockedMountMode, resolveDockConfig } from "../utils/dock";
+import { isDockedMountMode } from "../utils/dock";
 import { renderLucideIcon } from "../utils/icons";
 
 export interface LauncherButton {
@@ -175,18 +175,21 @@ export const createLauncherButton = (
     button.style.boxShadow = launcher.shadow ?? defaultShadow;
 
     if (dockedMode) {
-      const dock = resolveDockConfig(newConfig);
-      button.style.width = `calc(${dock.collapsedWidth} - 16px)`;
-      button.style.minWidth = "40px";
-      button.style.maxWidth = `calc(${dock.collapsedWidth} - 16px)`;
-      button.style.justifyContent = "center";
-      button.style.padding = "12px 0";
+      // Docked mode uses a 0px column when closed and hides this button; keep no hit target.
+      button.style.width = "0";
+      button.style.minWidth = "0";
+      button.style.maxWidth = "0";
+      button.style.padding = "0";
+      button.style.overflow = "hidden";
+      button.style.border = "none";
+      button.style.boxShadow = "none";
     } else {
       button.style.width = "";
       button.style.minWidth = "";
       button.style.maxWidth = "";
       button.style.justifyContent = "";
       button.style.padding = "";
+      button.style.overflow = "";
     }
   };
 

package/src/components/message-bubble.ts

@@ -9,7 +9,7 @@ import {
   LoadingIndicatorRenderContext,
   ImageContentPart
 } from "../types";
-import { renderLucideIcon } from "../utils/icons";
+import { createIconButton } from "../utils/buttons";
 import { IMAGE_ONLY_MESSAGE_FALLBACK_TEXT } from "../utils/content";
 
 /** Validate that an image src URL uses a safe scheme (blocks javascript: and SVG data URIs). */
@@ -414,17 +414,13 @@ export const createMessageActions = (
     label: string,
     dataAction: string
   ): HTMLButtonElement => {
-    const button = document.createElement("button");
-    button.className = "persona-message-action-btn";
-    button.setAttribute("aria-label", label);
-    button.setAttribute("title", label);
+    const button = createIconButton({
+      icon: iconName,
+      label,
+      size: 14,
+      className: "persona-message-action-btn",
+    });
     button.setAttribute("data-action", dataAction);
-
-    const icon = renderLucideIcon(iconName, 14, "currentColor", 2);
-    if (icon) {
-      button.appendChild(icon);
-    }
-
     return button;
   };
 

package/src/components/panel.ts

@@ -133,10 +133,10 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
   body.id = "persona-scroll-container";
   body.setAttribute("data-persona-theme-zone", "messages");
   
-  const introCard = createElement(
-    "div",
-    "persona-rounded-2xl persona-bg-persona-surface persona-p-6 persona-shadow-sm"
-  );
+  const introCardClasses = isDockedMountMode(config)
+    ? "persona-rounded-2xl persona-bg-persona-surface persona-p-6"
+    : "persona-rounded-2xl persona-bg-persona-surface persona-p-6 persona-shadow-sm";
+  const introCard = createElement("div", introCardClasses);
   const introTitle = createElement(
     "h2",
     "persona-text-lg persona-font-semibold persona-text-persona-primary"

package/src/defaults.ts

@@ -1,82 +1,6 @@
-import type { AgentWidgetConfig, AgentWidgetTheme } from "./types";
-
-/**
- * Default light theme colors
- */
-export const DEFAULT_LIGHT_THEME: AgentWidgetTheme = {
-  primary: "#111827",
-  accent: "#1d4ed8",
-  surface: "#ffffff",
-  muted: "#6b7280",
-  container: "#f8fafc",
-  border: "#f1f5f9",
-  divider: "#f1f5f9",
-  messageBorder: "#f1f5f9",
-  inputBackground: "#ffffff",
-  callToAction: "#000000",
-  callToActionBackground: "#ffffff",
-  sendButtonBackgroundColor: "#111827",
-  sendButtonTextColor: "#ffffff",
-  sendButtonBorderColor: "#60a5fa",
-  closeButtonColor: "#6b7280",
-  closeButtonBackgroundColor: "transparent",
-  closeButtonBorderColor: "",
-  clearChatIconColor: "#6b7280",
-  clearChatBackgroundColor: "transparent",
-  clearChatBorderColor: "transparent",
-  micIconColor: "#111827",
-  micBackgroundColor: "transparent",
-  micBorderColor: "transparent",
-  recordingIconColor: "#ffffff",
-  recordingBackgroundColor: "#ef4444",
-  recordingBorderColor: "transparent",
-  inputFontFamily: "sans-serif",
-  inputFontWeight: "400",
-  radiusSm: "0.75rem",
-  radiusMd: "1rem",
-  radiusLg: "1.5rem",
-  launcherRadius: "9999px",
-  buttonRadius: "9999px",
-};
-
-/**
- * Default dark theme colors
- */
-export const DEFAULT_DARK_THEME: AgentWidgetTheme = {
-  primary: "#f9fafb",
-  accent: "#3b82f6",
-  surface: "#1f2937",
-  muted: "#9ca3af",
-  container: "#111827",
-  border: "#374151",
-  divider: "#374151",
-  messageBorder: "#374151",
-  inputBackground: "#111827",
-  callToAction: "#ffffff",
-  callToActionBackground: "#374151",
-  sendButtonBackgroundColor: "#3b82f6",
-  sendButtonTextColor: "#ffffff",
-  sendButtonBorderColor: "#60a5fa",
-  closeButtonColor: "#9ca3af",
-  closeButtonBackgroundColor: "transparent",
-  closeButtonBorderColor: "",
-  clearChatIconColor: "#9ca3af",
-  clearChatBackgroundColor: "transparent",
-  clearChatBorderColor: "transparent",
-  micIconColor: "#f9fafb",
-  micBackgroundColor: "transparent",
-  micBorderColor: "transparent",
-  recordingIconColor: "#ffffff",
-  recordingBackgroundColor: "#ef4444",
-  recordingBorderColor: "transparent",
-  inputFontFamily: "sans-serif",
-  inputFontWeight: "400",
-  radiusSm: "0.75rem",
-  radiusMd: "1rem",
-  radiusLg: "1.5rem",
-  launcherRadius: "9999px",
-  buttonRadius: "9999px",
-};
+import type { AgentWidgetConfig } from "./types";
+import type { DeepPartial, PersonaTheme } from "./types/theme";
+import { deepMerge } from "./utils/deep-merge";
 
 /**
  * Default widget configuration
@@ -86,8 +10,8 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
   apiUrl: "http://localhost:43111/api/chat/dispatch",
   // Client token mode defaults (optional, only used when clientToken is set)
   clientToken: undefined,
-  theme: DEFAULT_LIGHT_THEME,
-  darkTheme: DEFAULT_DARK_THEME,
+  theme: undefined,
+  darkTheme: undefined,
   colorScheme: "light",
   launcher: {
     enabled: true,
@@ -95,7 +19,6 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
     dock: {
       side: "right",
       width: "420px",
-      collapsedWidth: "72px",
     },
     title: "Chat Assistant",
     subtitle: "Here to help you get answers fast",
@@ -114,10 +37,9 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
     callToActionIconPadding: "5px",
     callToActionIconColor: "#000000",
     callToActionIconBackgroundColor: "#ffffff",
-    closeButtonColor: "#6b7280",
+    // closeButtonColor / clearChat.iconColor omitted so theme.components.header.actionIconForeground applies.
     closeButtonBackgroundColor: "transparent",
     clearChat: {
-      iconColor: "#6b7280",
       backgroundColor: "transparent",
       borderColor: "transparent",
       enabled: true,
@@ -225,7 +147,7 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
   messageActions: {
     enabled: true,
     showCopy: true,
-    showUpvote: false,  // Requires backend - disabled by default
+    showUpvote: false, // Requires backend - disabled by default
     showDownvote: false, // Requires backend - disabled by default
     visibility: "hover",
     align: "right",
@@ -234,6 +156,19 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
   debug: false,
 };
 
+function mergeThemePartials(
+  base: DeepPartial<PersonaTheme> | undefined,
+  override: DeepPartial<PersonaTheme> | undefined
+): DeepPartial<PersonaTheme> | undefined {
+  if (!base && !override) return undefined;
+  if (!base) return override;
+  if (!override) return base;
+  return deepMerge(
+    base as Record<string, unknown>,
+    override as Record<string, unknown>
+  ) as DeepPartial<PersonaTheme>;
+}
+
 /**
  * Helper to deep merge user config with defaults
  * This ensures all default values are present while allowing selective overrides
@@ -246,14 +181,8 @@ export function mergeWithDefaults(
   return {
     ...DEFAULT_WIDGET_CONFIG,
     ...config,
-    theme: {
-      ...DEFAULT_WIDGET_CONFIG.theme,
-      ...config.theme,
-    },
-    darkTheme: {
-      ...DEFAULT_WIDGET_CONFIG.darkTheme,
-      ...config.darkTheme,
-    },
+    theme: mergeThemePartials(DEFAULT_WIDGET_CONFIG.theme, config.theme),
+    darkTheme: mergeThemePartials(DEFAULT_WIDGET_CONFIG.darkTheme, config.darkTheme),
     launcher: {
       ...DEFAULT_WIDGET_CONFIG.launcher,
       ...config.launcher,

package/src/index.ts

@@ -5,7 +5,6 @@ import {
 
 export type {
   AgentWidgetConfig,
-  AgentWidgetTheme,
   AgentWidgetFeatureFlags,
   AgentWidgetArtifactsFeature,
   AgentWidgetArtifactsLayoutConfig,
@@ -179,6 +178,22 @@ export type { AgentWidgetInitHandle };
 export type { AgentWidgetPlugin } from "./plugins/types";
 export { pluginRegistry } from "./plugins/registry";
 
+// Dropdown utility exports
+export { createDropdownMenu } from "./utils/dropdown";
+export type { DropdownMenuItem, CreateDropdownOptions, DropdownMenuHandle } from "./utils/dropdown";
+
+// Button utility exports
+export { createIconButton, createLabelButton, createToggleGroup, createComboButton } from "./utils/buttons";
+export type {
+  CreateIconButtonOptions,
+  CreateLabelButtonOptions,
+  CreateToggleGroupOptions,
+  ToggleGroupItem,
+  ToggleGroupHandle,
+  CreateComboButtonOptions,
+  ComboButtonHandle
+} from "./utils/buttons";
+
 // Theme system exports
 export {
   createTheme,
@@ -206,11 +221,8 @@ export {
   highContrastPlugin,
   createPlugin
 } from "./utils/plugins";
-export {
-  migrateV1Theme,
-  validateV1Theme
-} from "./utils/migration";
 export type {
+  DeepPartial,
   PersonaTheme,
   PersonaThemePlugin,
   CreateThemeOptions,
@@ -229,6 +241,9 @@ export type {
   ArtifactToolbarTokens,
   ArtifactTabTokens,
   ArtifactPaneTokens,
+  IconButtonTokens,
+  LabelButtonTokens,
+  ToggleGroupTokens,
   ThemeValidationResult,
   ThemeValidationError
 } from "./types/theme";
@@ -251,8 +266,6 @@ export {
 // Default configuration exports
 export {
   DEFAULT_WIDGET_CONFIG,
-  DEFAULT_LIGHT_THEME,
-  DEFAULT_DARK_THEME,
   mergeWithDefaults
 } from "./defaults";
 export {

package/src/presets.ts

@@ -1,4 +1,5 @@
-import type { AgentWidgetConfig } from './types';
+import type { AgentWidgetConfig } from "./types";
+import type { DeepPartial, PersonaTheme } from "./types/theme";
 
 /**
  * A named preset containing partial widget configuration.
@@ -11,51 +12,71 @@ export interface WidgetPreset {
   config: Partial<AgentWidgetConfig>;
 }
 
+/** Shopping palette + semantic roles (matches prior shop preset visuals). */
+const SHOP_THEME: DeepPartial<PersonaTheme> = {
+  palette: {
+    colors: {
+      primary: { 500: "#111827" },
+      accent: { 600: "#1d4ed8" },
+      gray: {
+        50: "#ffffff",
+        100: "#f8fafc",
+        200: "#f1f5f9",
+        500: "#6b7280",
+        900: "#000000",
+      },
+    },
+    radius: {
+      sm: "0.75rem",
+      md: "1rem",
+      lg: "1.5rem",
+      launcher: "9999px",
+      button: "9999px",
+    },
+  },
+  semantic: {
+    colors: {
+      primary: "palette.colors.primary.500",
+      textInverse: "palette.colors.gray.50",
+    },
+  },
+};
+
+const PANEL_EDGELESS_THEME: DeepPartial<PersonaTheme> = {
+  components: {
+    panel: {
+      borderRadius: "0",
+      shadow: "none",
+    },
+  },
+};
+
 /**
  * Shopping / e-commerce preset.
  * Dark header, rounded launchers, shopping-oriented copy.
  */
 export const PRESET_SHOP: WidgetPreset = {
-  id: 'shop',
-  label: 'Shopping Assistant',
+  id: "shop",
+  label: "Shopping Assistant",
   config: {
-    theme: {
-      primary: '#111827',
-      accent: '#1d4ed8',
-      surface: '#ffffff',
-      muted: '#6b7280',
-      container: '#f8fafc',
-      border: '#f1f5f9',
-      divider: '#f1f5f9',
-      messageBorder: '#f1f5f9',
-      inputBackground: '#ffffff',
-      callToAction: '#000000',
-      callToActionBackground: '#ffffff',
-      sendButtonBackgroundColor: '#111827',
-      sendButtonTextColor: '#ffffff',
-      radiusSm: '0.75rem',
-      radiusMd: '1rem',
-      radiusLg: '1.5rem',
-      launcherRadius: '9999px',
-      buttonRadius: '9999px',
-    },
+    theme: SHOP_THEME,
     launcher: {
-      title: 'Shopping Assistant',
-      subtitle: 'Here to help you find what you need',
-      agentIconText: '🛍️',
-      position: 'bottom-right',
-      width: 'min(400px, calc(100vw - 24px))',
+      title: "Shopping Assistant",
+      subtitle: "Here to help you find what you need",
+      agentIconText: "🛍️",
+      position: "bottom-right",
+      width: "min(400px, calc(100vw - 24px))",
     },
     copy: {
-      welcomeTitle: 'Welcome to our shop!',
-      welcomeSubtitle: 'I can help you find products and answer questions',
-      inputPlaceholder: 'Ask me anything...',
-      sendButtonLabel: 'Send',
+      welcomeTitle: "Welcome to our shop!",
+      welcomeSubtitle: "I can help you find products and answer questions",
+      inputPlaceholder: "Ask me anything...",
+      sendButtonLabel: "Send",
     },
     suggestionChips: [
-      'What can you help me with?',
-      'Tell me about your features',
-      'How does this work?',
+      "What can you help me with?",
+      "Tell me about your features",
+      "How does this work?",
     ],
   },
 };
@@ -65,8 +86,8 @@ export const PRESET_SHOP: WidgetPreset = {
  * Stripped-down header, no launcher button, suitable for inline embeds.
  */
 export const PRESET_MINIMAL: WidgetPreset = {
-  id: 'minimal',
-  label: 'Minimal',
+  id: "minimal",
+  label: "Minimal",
   config: {
     launcher: {
       enabled: false,
@@ -74,17 +95,14 @@ export const PRESET_MINIMAL: WidgetPreset = {
     },
     layout: {
       header: {
-        layout: 'minimal',
+        layout: "minimal",
         showCloseButton: false,
       },
       messages: {
-        layout: 'minimal',
+        layout: "minimal",
       },
     },
-    theme: {
-      panelBorderRadius: '0',
-      panelShadow: 'none',
-    },
+    theme: PANEL_EDGELESS_THEME,
   },
 };
 
@@ -93,8 +111,8 @@ export const PRESET_MINIMAL: WidgetPreset = {
  * No launcher, content-max-width constrained, minimal header.
  */
 export const PRESET_FULLSCREEN: WidgetPreset = {
-  id: 'fullscreen',
-  label: 'Fullscreen Assistant',
+  id: "fullscreen",
+  label: "Fullscreen Assistant",
   config: {
     launcher: {
       enabled: false,
@@ -102,15 +120,12 @@ export const PRESET_FULLSCREEN: WidgetPreset = {
     },
     layout: {
       header: {
-        layout: 'minimal',
+        layout: "minimal",
         showCloseButton: false,
       },
-      contentMaxWidth: '72ch',
-    },
-    theme: {
-      panelBorderRadius: '0',
-      panelShadow: 'none',
+      contentMaxWidth: "72ch",
     },
+    theme: PANEL_EDGELESS_THEME,
   },
 };