@runtypelabs/persona 3.8.2 → 3.9.0

package/dist/theme-editor.cjs

@@ -103,396 +103,686 @@ __export(theme_editor_exports, {
 });
 module.exports = __toCommonJS(theme_editor_exports);
 
-// src/utils/tokens.ts
-var DEFAULT_PALETTE = {
-  colors: {
-    primary: {
-      50: "#ffffff",
-      100: "#f5f5f5",
-      200: "#d4d4d4",
-      300: "#a3a3a3",
-      400: "#737373",
-      500: "#171717",
-      600: "#0f0f0f",
-      700: "#0a0a0a",
-      800: "#050505",
-      900: "#030303",
-      950: "#000000"
-    },
-    secondary: {
-      50: "#f5f3ff",
-      100: "#ede9fe",
-      200: "#ddd6fe",
-      300: "#c4b5fd",
-      400: "#a78bfa",
-      500: "#8b5cf6",
-      600: "#7c3aed",
-      700: "#6d28d9",
-      800: "#5b21b6",
-      900: "#4c1d95",
-      950: "#2e1065"
-    },
-    accent: {
-      50: "#ecfeff",
-      100: "#cffafe",
-      200: "#a5f3fc",
-      300: "#67e8f9",
-      400: "#22d3ee",
-      500: "#06b6d4",
-      600: "#0891b2",
-      700: "#0e7490",
-      800: "#155e75",
-      900: "#164e63",
-      950: "#083344"
-    },
-    gray: {
-      50: "#f9fafb",
-      100: "#f3f4f6",
-      200: "#e5e7eb",
-      300: "#d1d5db",
-      400: "#9ca3af",
-      500: "#6b7280",
-      600: "#4b5563",
-      700: "#374151",
-      800: "#1f2937",
-      900: "#111827",
-      950: "#030712"
-    },
-    success: {
-      50: "#f0fdf4",
-      100: "#dcfce7",
-      200: "#bbf7d0",
-      300: "#86efac",
-      400: "#4ade80",
-      500: "#22c55e",
-      600: "#16a34a",
-      700: "#15803d",
-      800: "#166534",
-      900: "#14532d"
-    },
-    warning: {
-      50: "#fefce8",
-      100: "#fef9c3",
-      200: "#fef08a",
-      300: "#fde047",
-      400: "#facc15",
-      500: "#eab308",
-      600: "#ca8a04",
-      700: "#a16207",
-      800: "#854d0e",
-      900: "#713f12"
-    },
-    error: {
-      50: "#fef2f2",
-      100: "#fee2e2",
-      200: "#fecaca",
-      300: "#fca5a5",
-      400: "#f87171",
-      500: "#ef4444",
-      600: "#dc2626",
-      700: "#b91c1c",
-      800: "#991b1b",
-      900: "#7f1d1d"
-    },
-    info: {
-      50: "#eff6ff",
-      100: "#dbeafe",
-      200: "#bfdbfe",
-      300: "#93c5fd",
-      400: "#60a5fa",
-      500: "#3b82f6",
-      600: "#2563eb",
-      700: "#1d4ed8",
-      800: "#1e40af",
-      900: "#1e3a8a",
-      950: "#172554"
+// src/utils/deep-merge.ts
+var isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+function deepMerge(base, override) {
+  if (!base) return override;
+  if (!override) return base;
+  const merged = { ...base };
+  for (const [key, value] of Object.entries(override)) {
+    const existing = merged[key];
+    if (isObject(existing) && isObject(value)) {
+      merged[key] = deepMerge(existing, value);
+    } else {
+      merged[key] = value;
     }
-  },
-  spacing: {
-    0: "0px",
-    1: "0.25rem",
-    2: "0.5rem",
-    3: "0.75rem",
-    4: "1rem",
-    5: "1.25rem",
-    6: "1.5rem",
-    8: "2rem",
-    10: "2.5rem",
-    12: "3rem",
-    16: "4rem",
-    20: "5rem",
-    24: "6rem",
-    32: "8rem",
-    40: "10rem",
-    48: "12rem",
-    56: "14rem",
-    64: "16rem"
-  },
-  typography: {
-    fontFamily: {
-      sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-      serif: 'Georgia, Cambria, "Times New Roman", Times, serif',
-      mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
-    },
-    fontSize: {
-      xs: "0.75rem",
-      sm: "0.875rem",
-      base: "1rem",
-      lg: "1.125rem",
-      xl: "1.25rem",
-      "2xl": "1.5rem",
-      "3xl": "1.875rem",
-      "4xl": "2.25rem"
+  }
+  return merged;
+}
+
+// src/defaults.ts
+var DEFAULT_FLOATING_LAUNCHER_WIDTH = "min(440px, calc(100vw - 24px))";
+var DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH = "440px";
+var DEFAULT_WIDGET_CONFIG = {
+  apiUrl: "http://localhost:43111/api/chat/dispatch",
+  // Client token mode defaults (optional, only used when clientToken is set)
+  clientToken: void 0,
+  theme: void 0,
+  darkTheme: void 0,
+  colorScheme: "light",
+  launcher: {
+    enabled: true,
+    mountMode: "floating",
+    dock: {
+      side: "right",
+      width: "420px"
     },
-    fontWeight: {
-      normal: "400",
-      medium: "500",
-      semibold: "600",
-      bold: "700"
+    title: "Chat Assistant",
+    subtitle: "Here to help you get answers fast",
+    agentIconText: "\u{1F4AC}",
+    agentIconName: "bot",
+    headerIconName: "bot",
+    position: "bottom-right",
+    width: DEFAULT_FLOATING_LAUNCHER_WIDTH,
+    heightOffset: 0,
+    autoExpand: false,
+    callToActionIconHidden: false,
+    agentIconSize: "40px",
+    headerIconSize: "40px",
+    closeButtonSize: "32px",
+    callToActionIconName: "arrow-up-right",
+    callToActionIconText: "",
+    callToActionIconSize: "32px",
+    callToActionIconPadding: "5px",
+    callToActionIconColor: void 0,
+    callToActionIconBackgroundColor: void 0,
+    // closeButtonColor / clearChat.iconColor omitted so theme.components.header.actionIconForeground applies.
+    closeButtonBackgroundColor: "transparent",
+    clearChat: {
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      enabled: true,
+      placement: "inline",
+      iconName: "refresh-cw",
+      size: "32px",
+      showTooltip: true,
+      tooltipText: "Clear chat",
+      paddingX: "0px",
+      paddingY: "0px"
     },
-    lineHeight: {
-      tight: "1.25",
-      normal: "1.5",
-      relaxed: "1.625"
-    }
+    headerIconHidden: false,
+    border: void 0,
+    shadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)"
   },
-  shadows: {
-    none: "none",
-    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
-    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
+  copy: {
+    welcomeTitle: "Hello \u{1F44B}",
+    welcomeSubtitle: "Ask anything about your account or products.",
+    inputPlaceholder: "How can I help...",
+    sendButtonLabel: "Send"
   },
-  borders: {
-    none: "none",
-    sm: "1px solid",
-    md: "2px solid",
-    lg: "4px solid"
+  sendButton: {
+    borderWidth: "0px",
+    paddingX: "12px",
+    paddingY: "10px",
+    borderColor: void 0,
+    useIcon: true,
+    iconText: "\u2191",
+    size: "40px",
+    showTooltip: true,
+    tooltipText: "Send message",
+    iconName: "send"
   },
-  radius: {
-    none: "0px",
-    sm: "0.125rem",
-    md: "0.375rem",
-    lg: "0.5rem",
-    xl: "0.75rem",
-    "2xl": "1rem",
-    full: "9999px"
-  }
-};
-var DEFAULT_SEMANTIC = {
-  colors: {
-    primary: "palette.colors.primary.500",
-    secondary: "palette.colors.secondary.500",
-    // Links/Focus role — solid primary
-    accent: "palette.colors.primary.600",
-    // Surfaces role — soft gray
-    surface: "palette.colors.gray.50",
-    background: "palette.colors.gray.50",
-    container: "palette.colors.gray.50",
-    text: "palette.colors.gray.900",
-    textMuted: "palette.colors.gray.500",
-    textInverse: "palette.colors.gray.50",
-    // Borders role — soft gray
-    border: "palette.colors.gray.200",
-    divider: "palette.colors.gray.200",
-    interactive: {
-      // Primary Actions role — solid primary
-      default: "palette.colors.primary.600",
-      hover: "palette.colors.primary.700",
-      // Links/Focus role — solid primary
-      focus: "palette.colors.primary.600",
-      active: "palette.colors.primary.600",
-      disabled: "palette.colors.gray.300"
-    },
-    feedback: {
-      success: "palette.colors.success.500",
-      warning: "palette.colors.warning.500",
-      error: "palette.colors.error.500",
-      info: "palette.colors.info.500"
-    }
-  },
-  spacing: {
-    xs: "palette.spacing.1",
-    sm: "palette.spacing.2",
-    md: "palette.spacing.4",
-    lg: "palette.spacing.6",
-    xl: "palette.spacing.8",
-    "2xl": "palette.spacing.10"
+  statusIndicator: {
+    visible: true,
+    idleText: "Online",
+    connectingText: "Connecting\u2026",
+    connectedText: "Streaming\u2026",
+    errorText: "Offline"
   },
-  typography: {
-    fontFamily: "palette.typography.fontFamily.sans",
-    fontSize: "palette.typography.fontSize.base",
-    fontWeight: "palette.typography.fontWeight.normal",
-    lineHeight: "palette.typography.lineHeight.normal"
-  }
-};
-var DEFAULT_COMPONENTS = {
-  button: {
-    primary: {
-      // Primary Actions role — solid primary
-      background: "palette.colors.primary.500",
-      foreground: "palette.colors.primary.50",
-      borderRadius: "palette.radius.lg",
-      padding: "semantic.spacing.md"
-    },
-    secondary: {
-      background: "semantic.colors.surface",
-      foreground: "semantic.colors.secondary",
-      borderRadius: "palette.radius.lg",
-      padding: "semantic.spacing.md"
-    },
-    ghost: {
-      background: "transparent",
-      foreground: "semantic.colors.text",
-      borderRadius: "palette.radius.md",
-      padding: "semantic.spacing.sm"
-    }
+  voiceRecognition: {
+    enabled: true,
+    pauseDuration: 2e3,
+    iconName: "mic",
+    iconSize: "39px",
+    borderWidth: "0px",
+    paddingX: "9px",
+    paddingY: "14px",
+    iconColor: void 0,
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    recordingIconColor: void 0,
+    recordingBackgroundColor: void 0,
+    recordingBorderColor: "transparent",
+    showTooltip: true,
+    tooltipText: "Start voice recognition"
   },
-  input: {
-    // Input role — soft gray
-    background: "palette.colors.gray.50",
-    placeholder: "palette.colors.gray.400",
-    borderRadius: "palette.radius.lg",
-    padding: "semantic.spacing.md",
-    focus: {
-      border: "palette.colors.gray.400",
-      ring: "palette.colors.gray.400"
+  features: {
+    showReasoning: true,
+    showToolCalls: true,
+    scrollToBottom: {
+      enabled: true,
+      iconName: "arrow-down",
+      label: ""
     }
   },
-  launcher: {
-    background: "palette.colors.primary.500",
-    foreground: "palette.colors.primary.50",
-    border: "palette.colors.gray.200",
-    size: "60px",
-    iconSize: "28px",
-    borderRadius: "palette.radius.full",
-    shadow: "palette.shadows.lg"
-  },
-  panel: {
-    width: "min(400px, calc(100vw - 24px))",
-    maxWidth: "400px",
-    height: "600px",
-    maxHeight: "calc(100vh - 80px)",
-    borderRadius: "palette.radius.xl",
-    shadow: "palette.shadows.xl"
-  },
-  header: {
-    // Header role — solid primary
-    background: "palette.colors.primary.500",
-    border: "palette.colors.primary.600",
-    borderRadius: "palette.radius.xl palette.radius.xl 0 0",
-    padding: "semantic.spacing.md",
-    iconBackground: "palette.colors.primary.600",
-    iconForeground: "palette.colors.primary.50",
-    titleForeground: "palette.colors.primary.50",
-    subtitleForeground: "palette.colors.primary.200",
-    actionIconForeground: "palette.colors.primary.200"
+  suggestionChips: [
+    "What can you help me with?",
+    "Tell me about your features",
+    "How does this work?"
+  ],
+  suggestionChipsConfig: {
+    fontFamily: "sans-serif",
+    fontWeight: "500",
+    paddingX: "12px",
+    paddingY: "6px"
   },
-  message: {
-    user: {
-      // User Messages role — solid primary
-      background: "palette.colors.primary.500",
-      text: "palette.colors.primary.50",
-      borderRadius: "palette.radius.lg",
-      shadow: "palette.shadows.sm"
+  layout: {
+    header: {
+      layout: "default",
+      showIcon: true,
+      showTitle: true,
+      showSubtitle: true,
+      showCloseButton: true,
+      showClearChat: true
     },
-    assistant: {
-      // Assistant Messages role — soft gray
-      background: "palette.colors.gray.50",
-      text: "palette.colors.gray.900",
-      borderRadius: "palette.radius.lg",
-      border: "palette.colors.gray.200",
-      shadow: "palette.shadows.sm"
+    messages: {
+      layout: "bubble",
+      avatar: {
+        show: false,
+        position: "left"
+      },
+      timestamp: {
+        show: false,
+        position: "below"
+      },
+      groupConsecutive: false
     },
-    border: "semantic.colors.border"
-  },
-  toolBubble: {
-    shadow: "palette.shadows.sm"
-  },
-  reasoningBubble: {
-    shadow: "palette.shadows.sm"
-  },
-  composer: {
-    shadow: "none"
+    slots: {}
   },
   markdown: {
-    inlineCode: {
-      background: "palette.colors.gray.50",
-      foreground: "palette.colors.gray.900"
+    options: {
+      gfm: true,
+      breaks: true
     },
-    link: {
-      // Links/Focus role — solid primary
-      foreground: "palette.colors.primary.600"
+    disableDefaultStyles: false
+  },
+  messageActions: {
+    enabled: true,
+    showCopy: true,
+    showUpvote: false,
+    // Requires backend - disabled by default
+    showDownvote: false,
+    // Requires backend - disabled by default
+    visibility: "hover",
+    align: "right",
+    layout: "pill-inside"
+  },
+  debug: false
+};
+function mergeThemePartials(base, override) {
+  if (!base && !override) return void 0;
+  if (!base) return override;
+  if (!override) return base;
+  return deepMerge(
+    base,
+    override
+  );
+}
+function mergeWithDefaults(config) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+  if (!config) return DEFAULT_WIDGET_CONFIG;
+  return {
+    ...DEFAULT_WIDGET_CONFIG,
+    ...config,
+    theme: mergeThemePartials(DEFAULT_WIDGET_CONFIG.theme, config.theme),
+    darkTheme: mergeThemePartials(DEFAULT_WIDGET_CONFIG.darkTheme, config.darkTheme),
+    launcher: {
+      ...DEFAULT_WIDGET_CONFIG.launcher,
+      ...config.launcher,
+      dock: {
+        ...(_a = DEFAULT_WIDGET_CONFIG.launcher) == null ? void 0 : _a.dock,
+        ...(_b = config.launcher) == null ? void 0 : _b.dock
+      },
+      clearChat: {
+        ...(_c = DEFAULT_WIDGET_CONFIG.launcher) == null ? void 0 : _c.clearChat,
+        ...(_d = config.launcher) == null ? void 0 : _d.clearChat
+      }
     },
-    prose: {
-      fontFamily: "inherit"
+    copy: {
+      ...DEFAULT_WIDGET_CONFIG.copy,
+      ...config.copy
     },
-    codeBlock: {
-      background: "semantic.colors.container",
-      borderColor: "semantic.colors.border",
-      textColor: "inherit"
+    sendButton: {
+      ...DEFAULT_WIDGET_CONFIG.sendButton,
+      ...config.sendButton
     },
-    table: {
-      headerBackground: "semantic.colors.container",
-      borderColor: "semantic.colors.border"
+    statusIndicator: {
+      ...DEFAULT_WIDGET_CONFIG.statusIndicator,
+      ...config.statusIndicator
     },
-    hr: {
-      color: "semantic.colors.divider"
+    voiceRecognition: {
+      ...DEFAULT_WIDGET_CONFIG.voiceRecognition,
+      ...config.voiceRecognition
     },
-    blockquote: {
-      borderColor: "palette.colors.gray.900",
-      background: "transparent",
-      textColor: "palette.colors.gray.500"
-    }
-  },
-  collapsibleWidget: {
-    container: "palette.colors.gray.50",
-    surface: "semantic.colors.surface",
-    border: "semantic.colors.border"
-  },
-  voice: {
-    recording: {
-      indicator: "palette.colors.error.500",
-      background: "palette.colors.error.50",
-      border: "palette.colors.error.200"
+    features: (() => {
+      var _a2, _b2, _c2, _d2;
+      const da = (_a2 = DEFAULT_WIDGET_CONFIG.features) == null ? void 0 : _a2.artifacts;
+      const ca = (_b2 = config.features) == null ? void 0 : _b2.artifacts;
+      const dsb = (_c2 = DEFAULT_WIDGET_CONFIG.features) == null ? void 0 : _c2.scrollToBottom;
+      const csb = (_d2 = config.features) == null ? void 0 : _d2.scrollToBottom;
+      const mergedArtifacts = da === void 0 && ca === void 0 ? void 0 : {
+        ...da,
+        ...ca,
+        layout: {
+          ...da == null ? void 0 : da.layout,
+          ...ca == null ? void 0 : ca.layout
+        }
+      };
+      const mergedScrollToBottom = dsb === void 0 && csb === void 0 ? void 0 : {
+        ...dsb,
+        ...csb
+      };
+      return {
+        ...DEFAULT_WIDGET_CONFIG.features,
+        ...config.features,
+        ...mergedScrollToBottom !== void 0 ? { scrollToBottom: mergedScrollToBottom } : {},
+        ...mergedArtifacts !== void 0 ? { artifacts: mergedArtifacts } : {}
+      };
+    })(),
+    suggestionChips: (_e = config.suggestionChips) != null ? _e : DEFAULT_WIDGET_CONFIG.suggestionChips,
+    suggestionChipsConfig: {
+      ...DEFAULT_WIDGET_CONFIG.suggestionChipsConfig,
+      ...config.suggestionChipsConfig
     },
-    processing: {
-      icon: "palette.colors.primary.500",
-      background: "palette.colors.primary.50"
+    layout: {
+      ...DEFAULT_WIDGET_CONFIG.layout,
+      ...config.layout,
+      header: {
+        ...(_f = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _f.header,
+        ...(_g = config.layout) == null ? void 0 : _g.header
+      },
+      messages: {
+        ...(_h = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _h.messages,
+        ...(_i = config.layout) == null ? void 0 : _i.messages,
+        avatar: {
+          ...(_k = (_j = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _j.messages) == null ? void 0 : _k.avatar,
+          ...(_m = (_l = config.layout) == null ? void 0 : _l.messages) == null ? void 0 : _m.avatar
+        },
+        timestamp: {
+          ...(_o = (_n = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _n.messages) == null ? void 0 : _o.timestamp,
+          ...(_q = (_p = config.layout) == null ? void 0 : _p.messages) == null ? void 0 : _q.timestamp
+        }
+      },
+      slots: {
+        ...(_r = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _r.slots,
+        ...(_s = config.layout) == null ? void 0 : _s.slots
+      }
     },
-    speaking: {
-      icon: "palette.colors.success.500"
+    markdown: {
+      ...DEFAULT_WIDGET_CONFIG.markdown,
+      ...config.markdown,
+      options: {
+        ...(_t = DEFAULT_WIDGET_CONFIG.markdown) == null ? void 0 : _t.options,
+        ...(_u = config.markdown) == null ? void 0 : _u.options
+      }
+    },
+    messageActions: {
+      ...DEFAULT_WIDGET_CONFIG.messageActions,
+      ...config.messageActions
     }
-  },
-  approval: {
-    requested: {
-      background: "palette.colors.warning.50",
-      border: "palette.colors.warning.200",
-      text: "palette.colors.gray.900"
+  };
+}
+
+// src/utils/tokens.ts
+var DEFAULT_PALETTE = {
+  colors: {
+    primary: {
+      50: "#ffffff",
+      100: "#f5f5f5",
+      200: "#d4d4d4",
+      300: "#a3a3a3",
+      400: "#737373",
+      500: "#171717",
+      600: "#0f0f0f",
+      700: "#0a0a0a",
+      800: "#050505",
+      900: "#030303",
+      950: "#000000"
     },
-    approve: {
-      background: "palette.colors.success.500",
-      foreground: "palette.colors.gray.50",
-      borderRadius: "palette.radius.md",
-      padding: "semantic.spacing.sm"
+    secondary: {
+      50: "#f5f3ff",
+      100: "#ede9fe",
+      200: "#ddd6fe",
+      300: "#c4b5fd",
+      400: "#a78bfa",
+      500: "#8b5cf6",
+      600: "#7c3aed",
+      700: "#6d28d9",
+      800: "#5b21b6",
+      900: "#4c1d95",
+      950: "#2e1065"
     },
-    deny: {
-      background: "palette.colors.error.500",
-      foreground: "palette.colors.gray.50",
-      borderRadius: "palette.radius.md",
-      padding: "semantic.spacing.sm"
+    accent: {
+      50: "#ecfeff",
+      100: "#cffafe",
+      200: "#a5f3fc",
+      300: "#67e8f9",
+      400: "#22d3ee",
+      500: "#06b6d4",
+      600: "#0891b2",
+      700: "#0e7490",
+      800: "#155e75",
+      900: "#164e63",
+      950: "#083344"
+    },
+    gray: {
+      50: "#f9fafb",
+      100: "#f3f4f6",
+      200: "#e5e7eb",
+      300: "#d1d5db",
+      400: "#9ca3af",
+      500: "#6b7280",
+      600: "#4b5563",
+      700: "#374151",
+      800: "#1f2937",
+      900: "#111827",
+      950: "#030712"
+    },
+    success: {
+      50: "#f0fdf4",
+      100: "#dcfce7",
+      200: "#bbf7d0",
+      300: "#86efac",
+      400: "#4ade80",
+      500: "#22c55e",
+      600: "#16a34a",
+      700: "#15803d",
+      800: "#166534",
+      900: "#14532d"
+    },
+    warning: {
+      50: "#fefce8",
+      100: "#fef9c3",
+      200: "#fef08a",
+      300: "#fde047",
+      400: "#facc15",
+      500: "#eab308",
+      600: "#ca8a04",
+      700: "#a16207",
+      800: "#854d0e",
+      900: "#713f12"
+    },
+    error: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      600: "#dc2626",
+      700: "#b91c1c",
+      800: "#991b1b",
+      900: "#7f1d1d"
+    },
+    info: {
+      50: "#eff6ff",
+      100: "#dbeafe",
+      200: "#bfdbfe",
+      300: "#93c5fd",
+      400: "#60a5fa",
+      500: "#3b82f6",
+      600: "#2563eb",
+      700: "#1d4ed8",
+      800: "#1e40af",
+      900: "#1e3a8a",
+      950: "#172554"
     }
   },
-  attachment: {
-    image: {
-      background: "palette.colors.gray.100",
-      border: "palette.colors.gray.200"
+  spacing: {
+    0: "0px",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    8: "2rem",
+    10: "2.5rem",
+    12: "3rem",
+    16: "4rem",
+    20: "5rem",
+    24: "6rem",
+    32: "8rem",
+    40: "10rem",
+    48: "12rem",
+    56: "14rem",
+    64: "16rem"
+  },
+  typography: {
+    fontFamily: {
+      sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      serif: 'Georgia, Cambria, "Times New Roman", Times, serif',
+      mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
+    },
+    fontSize: {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem"
+    },
+    fontWeight: {
+      normal: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700"
+    },
+    lineHeight: {
+      tight: "1.25",
+      normal: "1.5",
+      relaxed: "1.625"
     }
   },
-  scrollToBottom: {
-    background: "components.button.primary.background",
-    foreground: "components.button.primary.foreground",
+  shadows: {
+    none: "none",
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
+  },
+  borders: {
+    none: "none",
+    sm: "1px solid",
+    md: "2px solid",
+    lg: "4px solid"
+  },
+  radius: {
+    none: "0px",
+    sm: "0.125rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    full: "9999px"
+  }
+};
+var DEFAULT_SEMANTIC = {
+  colors: {
+    primary: "palette.colors.primary.500",
+    secondary: "palette.colors.secondary.500",
+    // Links/Focus role — solid primary
+    accent: "palette.colors.primary.600",
+    // Surfaces role — soft gray
+    surface: "palette.colors.gray.50",
+    background: "palette.colors.gray.50",
+    container: "palette.colors.gray.50",
+    text: "palette.colors.gray.900",
+    textMuted: "palette.colors.gray.500",
+    textInverse: "palette.colors.gray.50",
+    // Borders role — soft gray
+    border: "palette.colors.gray.200",
+    divider: "palette.colors.gray.200",
+    interactive: {
+      // Primary Actions role — solid primary
+      default: "palette.colors.primary.600",
+      hover: "palette.colors.primary.700",
+      // Links/Focus role — solid primary
+      focus: "palette.colors.primary.600",
+      active: "palette.colors.primary.600",
+      disabled: "palette.colors.gray.300"
+    },
+    feedback: {
+      success: "palette.colors.success.500",
+      warning: "palette.colors.warning.500",
+      error: "palette.colors.error.500",
+      info: "palette.colors.info.500"
+    }
+  },
+  spacing: {
+    xs: "palette.spacing.1",
+    sm: "palette.spacing.2",
+    md: "palette.spacing.4",
+    lg: "palette.spacing.6",
+    xl: "palette.spacing.8",
+    "2xl": "palette.spacing.10"
+  },
+  typography: {
+    fontFamily: "palette.typography.fontFamily.sans",
+    fontSize: "palette.typography.fontSize.base",
+    fontWeight: "palette.typography.fontWeight.normal",
+    lineHeight: "palette.typography.lineHeight.normal"
+  }
+};
+var DEFAULT_COMPONENTS = {
+  button: {
+    primary: {
+      // Primary Actions role — solid primary
+      background: "palette.colors.primary.500",
+      foreground: "palette.colors.primary.50",
+      borderRadius: "palette.radius.lg",
+      padding: "semantic.spacing.md"
+    },
+    secondary: {
+      background: "semantic.colors.surface",
+      foreground: "semantic.colors.secondary",
+      borderRadius: "palette.radius.lg",
+      padding: "semantic.spacing.md"
+    },
+    ghost: {
+      background: "transparent",
+      foreground: "semantic.colors.text",
+      borderRadius: "palette.radius.md",
+      padding: "semantic.spacing.sm"
+    }
+  },
+  input: {
+    // Input role — soft gray
+    background: "palette.colors.gray.50",
+    placeholder: "palette.colors.gray.400",
+    borderRadius: "palette.radius.lg",
+    padding: "semantic.spacing.md",
+    focus: {
+      border: "palette.colors.gray.400",
+      ring: "palette.colors.gray.400"
+    }
+  },
+  launcher: {
+    background: "palette.colors.primary.500",
+    foreground: "palette.colors.primary.50",
+    border: "palette.colors.gray.200",
+    size: "60px",
+    iconSize: "28px",
+    borderRadius: "palette.radius.full",
+    shadow: "palette.shadows.lg"
+  },
+  panel: {
+    width: DEFAULT_FLOATING_LAUNCHER_WIDTH,
+    maxWidth: DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH,
+    height: "600px",
+    maxHeight: "calc(100vh - 80px)",
+    borderRadius: "palette.radius.xl",
+    shadow: "palette.shadows.xl"
+  },
+  header: {
+    // Header role — solid primary
+    background: "palette.colors.primary.500",
+    border: "palette.colors.primary.600",
+    borderRadius: "palette.radius.xl palette.radius.xl 0 0",
+    padding: "semantic.spacing.md",
+    iconBackground: "palette.colors.primary.600",
+    iconForeground: "palette.colors.primary.50",
+    titleForeground: "palette.colors.primary.50",
+    subtitleForeground: "palette.colors.primary.200",
+    actionIconForeground: "palette.colors.primary.200"
+  },
+  message: {
+    user: {
+      // User Messages role — solid primary
+      background: "palette.colors.primary.500",
+      text: "palette.colors.primary.50",
+      borderRadius: "palette.radius.lg",
+      shadow: "palette.shadows.sm"
+    },
+    assistant: {
+      // Assistant Messages role — soft gray
+      background: "palette.colors.gray.50",
+      text: "palette.colors.gray.900",
+      borderRadius: "palette.radius.lg",
+      border: "palette.colors.gray.200",
+      shadow: "palette.shadows.sm"
+    },
+    border: "semantic.colors.border"
+  },
+  toolBubble: {
+    shadow: "palette.shadows.sm"
+  },
+  reasoningBubble: {
+    shadow: "palette.shadows.sm"
+  },
+  composer: {
+    shadow: "none"
+  },
+  markdown: {
+    inlineCode: {
+      background: "palette.colors.gray.50",
+      foreground: "palette.colors.gray.900"
+    },
+    link: {
+      // Links/Focus role — solid primary
+      foreground: "palette.colors.primary.600"
+    },
+    prose: {
+      fontFamily: "inherit"
+    },
+    codeBlock: {
+      background: "semantic.colors.container",
+      borderColor: "semantic.colors.border",
+      textColor: "inherit"
+    },
+    table: {
+      headerBackground: "semantic.colors.container",
+      borderColor: "semantic.colors.border"
+    },
+    hr: {
+      color: "semantic.colors.divider"
+    },
+    blockquote: {
+      borderColor: "palette.colors.gray.900",
+      background: "transparent",
+      textColor: "palette.colors.gray.500"
+    }
+  },
+  collapsibleWidget: {
+    container: "palette.colors.gray.50",
+    surface: "semantic.colors.surface",
+    border: "semantic.colors.border"
+  },
+  voice: {
+    recording: {
+      indicator: "palette.colors.error.500",
+      background: "palette.colors.error.50",
+      border: "palette.colors.error.200"
+    },
+    processing: {
+      icon: "palette.colors.primary.500",
+      background: "palette.colors.primary.50"
+    },
+    speaking: {
+      icon: "palette.colors.success.500"
+    }
+  },
+  approval: {
+    requested: {
+      background: "palette.colors.warning.50",
+      border: "palette.colors.warning.200",
+      text: "palette.colors.gray.900"
+    },
+    approve: {
+      background: "palette.colors.success.500",
+      foreground: "palette.colors.gray.50",
+      borderRadius: "palette.radius.md",
+      padding: "semantic.spacing.sm"
+    },
+    deny: {
+      background: "palette.colors.error.500",
+      foreground: "palette.colors.gray.50",
+      borderRadius: "palette.radius.md",
+      padding: "semantic.spacing.sm"
+    }
+  },
+  attachment: {
+    image: {
+      background: "palette.colors.gray.100",
+      border: "palette.colors.gray.200"
+    }
+  },
+  scrollToBottom: {
+    background: "components.button.primary.background",
+    foreground: "components.button.primary.foreground",
     border: "semantic.colors.primary",
     size: "40px",
     borderRadius: "palette.radius.full",
@@ -886,23 +1176,6 @@ function themeToCssVariables(theme) {
   return cssVars;
 }
 
-// src/utils/deep-merge.ts
-var isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
-function deepMerge(base, override) {
-  if (!base) return override;
-  if (!override) return base;
-  const merged = { ...base };
-  for (const [key, value] of Object.entries(override)) {
-    const existing = merged[key];
-    if (isObject(existing) && isObject(value)) {
-      merged[key] = deepMerge(existing, value);
-    } else {
-      merged[key] = value;
-    }
-  }
-  return merged;
-}
-
 // src/utils/theme.ts
 var DARK_PALETTE = {
   colors: {
@@ -932,444 +1205,173 @@ var DARK_PALETTE = {
       900: "#4c1d95",
       950: "#2e1065"
     },
-    accent: {
-      50: "#ecfeff",
-      100: "#cffafe",
-      200: "#a5f3fc",
-      300: "#67e8f9",
-      400: "#22d3ee",
-      500: "#06b6d4",
-      600: "#0891b2",
-      700: "#0e7490",
-      800: "#155e75",
-      900: "#164e63",
-      950: "#083344"
-    },
-    gray: {
-      50: "#f9fafb",
-      100: "#f3f4f6",
-      200: "#e5e7eb",
-      300: "#d1d5db",
-      400: "#9ca3af",
-      500: "#6b7280",
-      600: "#4b5563",
-      700: "#374151",
-      800: "#1f2937",
-      900: "#111827",
-      950: "#030712"
-    },
-    success: {
-      50: "#f0fdf4",
-      100: "#dcfce7",
-      200: "#bbf7d0",
-      300: "#86efac",
-      400: "#4ade80",
-      500: "#22c55e",
-      600: "#16a34a",
-      700: "#15803d",
-      800: "#166534",
-      900: "#14532d"
-    },
-    warning: {
-      50: "#fefce8",
-      100: "#fef9c3",
-      200: "#fef08a",
-      300: "#fde047",
-      400: "#facc15",
-      500: "#eab308",
-      600: "#ca8a04",
-      700: "#a16207",
-      800: "#854d0e",
-      900: "#713f12"
-    },
-    error: {
-      50: "#fef2f2",
-      100: "#fee2e2",
-      200: "#fecaca",
-      300: "#fca5a5",
-      400: "#f87171",
-      500: "#ef4444",
-      600: "#dc2626",
-      700: "#b91c1c",
-      800: "#991b1b",
-      900: "#7f1d1d"
-    }
-  }
-};
-var normalizeThemeConfig = (theme) => {
-  if (!theme || typeof theme !== "object" || Array.isArray(theme)) return void 0;
-  return theme;
-};
-var detectColorScheme = () => {
-  var _a;
-  if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
-    return "dark";
-  }
-  if (typeof window !== "undefined" && ((_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-color-scheme: dark)").matches)) {
-    return "dark";
-  }
-  return "light";
-};
-var getColorSchemeFromConfig = (config) => {
-  var _a;
-  const colorScheme = (_a = config == null ? void 0 : config.colorScheme) != null ? _a : "light";
-  if (colorScheme === "light") return "light";
-  if (colorScheme === "dark") return "dark";
-  return detectColorScheme();
-};
-var getColorScheme = (config) => {
-  return getColorSchemeFromConfig(config);
-};
-var createLightTheme = (userConfig) => {
-  return createTheme(userConfig);
-};
-var createDarkTheme = (userConfig) => {
-  var _a;
-  const baseTheme = createTheme(void 0, { validate: false });
-  return createTheme(
-    {
-      ...userConfig,
-      palette: {
-        ...baseTheme.palette,
-        colors: {
-          ...DARK_PALETTE.colors,
-          ...(_a = userConfig == null ? void 0 : userConfig.palette) == null ? void 0 : _a.colors
-        }
-      }
-    },
-    { validate: false }
-  );
-};
-var getActiveTheme = (config) => {
-  const scheme = getColorScheme(config);
-  const lightThemeConfig = normalizeThemeConfig(config == null ? void 0 : config.theme);
-  const darkThemeConfig = normalizeThemeConfig(config == null ? void 0 : config.darkTheme);
-  if (scheme === "dark") {
-    return createDarkTheme(
-      deepMerge(
-        lightThemeConfig != null ? lightThemeConfig : {},
-        darkThemeConfig != null ? darkThemeConfig : {}
-      )
-    );
-  }
-  return createLightTheme(lightThemeConfig);
-};
-var getCssVariables = (theme) => {
-  return themeToCssVariables(theme);
-};
-var applyThemeVariables = (element, config) => {
-  var _a;
-  const theme = getActiveTheme(config);
-  const cssVars = getCssVariables(theme);
-  for (const [name, value] of Object.entries(cssVars)) {
-    element.style.setProperty(name, value);
-  }
-  const toolCallShadow = (_a = config == null ? void 0 : config.toolCall) == null ? void 0 : _a.shadow;
-  if (toolCallShadow !== void 0) {
-    element.style.setProperty(
-      "--persona-tool-bubble-shadow",
-      toolCallShadow.trim() === "" ? "none" : toolCallShadow
-    );
-  }
-};
-var createThemeObserver = (callback) => {
-  const cleanupFns = [];
-  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());
-  }
-  if (typeof window !== "undefined" && window.matchMedia) {
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => callback(detectColorScheme());
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener("change", handleChange);
-      cleanupFns.push(() => mediaQuery.removeEventListener("change", handleChange));
-    } else if (mediaQuery.addListener) {
-      mediaQuery.addListener(handleChange);
-      cleanupFns.push(() => mediaQuery.removeListener(handleChange));
-    }
-  }
-  return () => {
-    cleanupFns.forEach((fn) => fn());
-  };
-};
-
-// src/defaults.ts
-var DEFAULT_WIDGET_CONFIG = {
-  apiUrl: "http://localhost:43111/api/chat/dispatch",
-  // Client token mode defaults (optional, only used when clientToken is set)
-  clientToken: void 0,
-  theme: void 0,
-  darkTheme: void 0,
-  colorScheme: "light",
-  launcher: {
-    enabled: true,
-    mountMode: "floating",
-    dock: {
-      side: "right",
-      width: "420px"
-    },
-    title: "Chat Assistant",
-    subtitle: "Here to help you get answers fast",
-    agentIconText: "\u{1F4AC}",
-    agentIconName: "bot",
-    headerIconName: "bot",
-    position: "bottom-right",
-    width: "min(400px, calc(100vw - 24px))",
-    heightOffset: 0,
-    autoExpand: false,
-    callToActionIconHidden: false,
-    agentIconSize: "40px",
-    headerIconSize: "40px",
-    closeButtonSize: "32px",
-    callToActionIconName: "arrow-up-right",
-    callToActionIconText: "",
-    callToActionIconSize: "32px",
-    callToActionIconPadding: "5px",
-    callToActionIconColor: void 0,
-    callToActionIconBackgroundColor: void 0,
-    // closeButtonColor / clearChat.iconColor omitted so theme.components.header.actionIconForeground applies.
-    closeButtonBackgroundColor: "transparent",
-    clearChat: {
-      backgroundColor: "transparent",
-      borderColor: "transparent",
-      enabled: true,
-      placement: "inline",
-      iconName: "refresh-cw",
-      size: "32px",
-      showTooltip: true,
-      tooltipText: "Clear chat",
-      paddingX: "0px",
-      paddingY: "0px"
-    },
-    headerIconHidden: false,
-    border: void 0,
-    shadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)"
-  },
-  copy: {
-    welcomeTitle: "Hello \u{1F44B}",
-    welcomeSubtitle: "Ask anything about your account or products.",
-    inputPlaceholder: "How can I help...",
-    sendButtonLabel: "Send"
-  },
-  sendButton: {
-    borderWidth: "0px",
-    paddingX: "12px",
-    paddingY: "10px",
-    borderColor: void 0,
-    useIcon: true,
-    iconText: "\u2191",
-    size: "40px",
-    showTooltip: true,
-    tooltipText: "Send message",
-    iconName: "send"
-  },
-  statusIndicator: {
-    visible: true,
-    idleText: "Online",
-    connectingText: "Connecting\u2026",
-    connectedText: "Streaming\u2026",
-    errorText: "Offline"
-  },
-  voiceRecognition: {
-    enabled: true,
-    pauseDuration: 2e3,
-    iconName: "mic",
-    iconSize: "39px",
-    borderWidth: "0px",
-    paddingX: "9px",
-    paddingY: "14px",
-    iconColor: void 0,
-    backgroundColor: "transparent",
-    borderColor: "transparent",
-    recordingIconColor: void 0,
-    recordingBackgroundColor: void 0,
-    recordingBorderColor: "transparent",
-    showTooltip: true,
-    tooltipText: "Start voice recognition"
-  },
-  features: {
-    showReasoning: true,
-    showToolCalls: true,
-    scrollToBottom: {
-      enabled: true,
-      iconName: "arrow-down",
-      label: ""
-    }
-  },
-  suggestionChips: [
-    "What can you help me with?",
-    "Tell me about your features",
-    "How does this work?"
-  ],
-  suggestionChipsConfig: {
-    fontFamily: "sans-serif",
-    fontWeight: "500",
-    paddingX: "12px",
-    paddingY: "6px"
-  },
-  layout: {
-    header: {
-      layout: "default",
-      showIcon: true,
-      showTitle: true,
-      showSubtitle: true,
-      showCloseButton: true,
-      showClearChat: true
-    },
-    messages: {
-      layout: "bubble",
-      avatar: {
-        show: false,
-        position: "left"
-      },
-      timestamp: {
-        show: false,
-        position: "below"
-      },
-      groupConsecutive: false
-    },
-    slots: {}
-  },
-  markdown: {
-    options: {
-      gfm: true,
-      breaks: true
-    },
-    disableDefaultStyles: false
-  },
-  messageActions: {
-    enabled: true,
-    showCopy: true,
-    showUpvote: false,
-    // Requires backend - disabled by default
-    showDownvote: false,
-    // Requires backend - disabled by default
-    visibility: "hover",
-    align: "right",
-    layout: "pill-inside"
-  },
-  debug: false
-};
-function mergeThemePartials(base, override) {
-  if (!base && !override) return void 0;
-  if (!base) return override;
-  if (!override) return base;
-  return deepMerge(
-    base,
-    override
-  );
-}
-function mergeWithDefaults(config) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
-  if (!config) return DEFAULT_WIDGET_CONFIG;
-  return {
-    ...DEFAULT_WIDGET_CONFIG,
-    ...config,
-    theme: mergeThemePartials(DEFAULT_WIDGET_CONFIG.theme, config.theme),
-    darkTheme: mergeThemePartials(DEFAULT_WIDGET_CONFIG.darkTheme, config.darkTheme),
-    launcher: {
-      ...DEFAULT_WIDGET_CONFIG.launcher,
-      ...config.launcher,
-      dock: {
-        ...(_a = DEFAULT_WIDGET_CONFIG.launcher) == null ? void 0 : _a.dock,
-        ...(_b = config.launcher) == null ? void 0 : _b.dock
-      },
-      clearChat: {
-        ...(_c = DEFAULT_WIDGET_CONFIG.launcher) == null ? void 0 : _c.clearChat,
-        ...(_d = config.launcher) == null ? void 0 : _d.clearChat
-      }
-    },
-    copy: {
-      ...DEFAULT_WIDGET_CONFIG.copy,
-      ...config.copy
-    },
-    sendButton: {
-      ...DEFAULT_WIDGET_CONFIG.sendButton,
-      ...config.sendButton
+    accent: {
+      50: "#ecfeff",
+      100: "#cffafe",
+      200: "#a5f3fc",
+      300: "#67e8f9",
+      400: "#22d3ee",
+      500: "#06b6d4",
+      600: "#0891b2",
+      700: "#0e7490",
+      800: "#155e75",
+      900: "#164e63",
+      950: "#083344"
     },
-    statusIndicator: {
-      ...DEFAULT_WIDGET_CONFIG.statusIndicator,
-      ...config.statusIndicator
+    gray: {
+      50: "#f9fafb",
+      100: "#f3f4f6",
+      200: "#e5e7eb",
+      300: "#d1d5db",
+      400: "#9ca3af",
+      500: "#6b7280",
+      600: "#4b5563",
+      700: "#374151",
+      800: "#1f2937",
+      900: "#111827",
+      950: "#030712"
     },
-    voiceRecognition: {
-      ...DEFAULT_WIDGET_CONFIG.voiceRecognition,
-      ...config.voiceRecognition
+    success: {
+      50: "#f0fdf4",
+      100: "#dcfce7",
+      200: "#bbf7d0",
+      300: "#86efac",
+      400: "#4ade80",
+      500: "#22c55e",
+      600: "#16a34a",
+      700: "#15803d",
+      800: "#166534",
+      900: "#14532d"
     },
-    features: (() => {
-      var _a2, _b2, _c2, _d2;
-      const da = (_a2 = DEFAULT_WIDGET_CONFIG.features) == null ? void 0 : _a2.artifacts;
-      const ca = (_b2 = config.features) == null ? void 0 : _b2.artifacts;
-      const dsb = (_c2 = DEFAULT_WIDGET_CONFIG.features) == null ? void 0 : _c2.scrollToBottom;
-      const csb = (_d2 = config.features) == null ? void 0 : _d2.scrollToBottom;
-      const mergedArtifacts = da === void 0 && ca === void 0 ? void 0 : {
-        ...da,
-        ...ca,
-        layout: {
-          ...da == null ? void 0 : da.layout,
-          ...ca == null ? void 0 : ca.layout
-        }
-      };
-      const mergedScrollToBottom = dsb === void 0 && csb === void 0 ? void 0 : {
-        ...dsb,
-        ...csb
-      };
-      return {
-        ...DEFAULT_WIDGET_CONFIG.features,
-        ...config.features,
-        ...mergedScrollToBottom !== void 0 ? { scrollToBottom: mergedScrollToBottom } : {},
-        ...mergedArtifacts !== void 0 ? { artifacts: mergedArtifacts } : {}
-      };
-    })(),
-    suggestionChips: (_e = config.suggestionChips) != null ? _e : DEFAULT_WIDGET_CONFIG.suggestionChips,
-    suggestionChipsConfig: {
-      ...DEFAULT_WIDGET_CONFIG.suggestionChipsConfig,
-      ...config.suggestionChipsConfig
+    warning: {
+      50: "#fefce8",
+      100: "#fef9c3",
+      200: "#fef08a",
+      300: "#fde047",
+      400: "#facc15",
+      500: "#eab308",
+      600: "#ca8a04",
+      700: "#a16207",
+      800: "#854d0e",
+      900: "#713f12"
     },
-    layout: {
-      ...DEFAULT_WIDGET_CONFIG.layout,
-      ...config.layout,
-      header: {
-        ...(_f = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _f.header,
-        ...(_g = config.layout) == null ? void 0 : _g.header
-      },
-      messages: {
-        ...(_h = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _h.messages,
-        ...(_i = config.layout) == null ? void 0 : _i.messages,
-        avatar: {
-          ...(_k = (_j = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _j.messages) == null ? void 0 : _k.avatar,
-          ...(_m = (_l = config.layout) == null ? void 0 : _l.messages) == null ? void 0 : _m.avatar
-        },
-        timestamp: {
-          ...(_o = (_n = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _n.messages) == null ? void 0 : _o.timestamp,
-          ...(_q = (_p = config.layout) == null ? void 0 : _p.messages) == null ? void 0 : _q.timestamp
+    error: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      600: "#dc2626",
+      700: "#b91c1c",
+      800: "#991b1b",
+      900: "#7f1d1d"
+    }
+  }
+};
+var normalizeThemeConfig = (theme) => {
+  if (!theme || typeof theme !== "object" || Array.isArray(theme)) return void 0;
+  return theme;
+};
+var detectColorScheme = () => {
+  var _a;
+  if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
+    return "dark";
+  }
+  if (typeof window !== "undefined" && ((_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-color-scheme: dark)").matches)) {
+    return "dark";
+  }
+  return "light";
+};
+var getColorSchemeFromConfig = (config) => {
+  var _a;
+  const colorScheme = (_a = config == null ? void 0 : config.colorScheme) != null ? _a : "light";
+  if (colorScheme === "light") return "light";
+  if (colorScheme === "dark") return "dark";
+  return detectColorScheme();
+};
+var getColorScheme = (config) => {
+  return getColorSchemeFromConfig(config);
+};
+var createLightTheme = (userConfig) => {
+  return createTheme(userConfig);
+};
+var createDarkTheme = (userConfig) => {
+  var _a;
+  const baseTheme = createTheme(void 0, { validate: false });
+  return createTheme(
+    {
+      ...userConfig,
+      palette: {
+        ...baseTheme.palette,
+        colors: {
+          ...DARK_PALETTE.colors,
+          ...(_a = userConfig == null ? void 0 : userConfig.palette) == null ? void 0 : _a.colors
         }
-      },
-      slots: {
-        ...(_r = DEFAULT_WIDGET_CONFIG.layout) == null ? void 0 : _r.slots,
-        ...(_s = config.layout) == null ? void 0 : _s.slots
-      }
-    },
-    markdown: {
-      ...DEFAULT_WIDGET_CONFIG.markdown,
-      ...config.markdown,
-      options: {
-        ...(_t = DEFAULT_WIDGET_CONFIG.markdown) == null ? void 0 : _t.options,
-        ...(_u = config.markdown) == null ? void 0 : _u.options
       }
     },
-    messageActions: {
-      ...DEFAULT_WIDGET_CONFIG.messageActions,
-      ...config.messageActions
+    { validate: false }
+  );
+};
+var getActiveTheme = (config) => {
+  const scheme = getColorScheme(config);
+  const lightThemeConfig = normalizeThemeConfig(config == null ? void 0 : config.theme);
+  const darkThemeConfig = normalizeThemeConfig(config == null ? void 0 : config.darkTheme);
+  if (scheme === "dark") {
+    return createDarkTheme(
+      deepMerge(
+        lightThemeConfig != null ? lightThemeConfig : {},
+        darkThemeConfig != null ? darkThemeConfig : {}
+      )
+    );
+  }
+  return createLightTheme(lightThemeConfig);
+};
+var getCssVariables = (theme) => {
+  return themeToCssVariables(theme);
+};
+var applyThemeVariables = (element, config) => {
+  var _a;
+  const theme = getActiveTheme(config);
+  const cssVars = getCssVariables(theme);
+  for (const [name, value] of Object.entries(cssVars)) {
+    element.style.setProperty(name, value);
+  }
+  const toolCallShadow = (_a = config == null ? void 0 : config.toolCall) == null ? void 0 : _a.shadow;
+  if (toolCallShadow !== void 0) {
+    element.style.setProperty(
+      "--persona-tool-bubble-shadow",
+      toolCallShadow.trim() === "" ? "none" : toolCallShadow
+    );
+  }
+};
+var createThemeObserver = (callback) => {
+  const cleanupFns = [];
+  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());
+  }
+  if (typeof window !== "undefined" && window.matchMedia) {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => callback(detectColorScheme());
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      cleanupFns.push(() => mediaQuery.removeEventListener("change", handleChange));
+    } else if (mediaQuery.addListener) {
+      mediaQuery.addListener(handleChange);
+      cleanupFns.push(() => mediaQuery.removeListener(handleChange));
     }
+  }
+  return () => {
+    cleanupFns.forEach((fn) => fn());
   };
-}
+};
 
 // src/theme-editor/state.ts
 function getByPath(obj, path) {
@@ -2234,8 +2236,8 @@ var panelLayoutSectionDef = {
   title: "Panel",
   collapsed: false,
   fields: [
-    { id: "panel-width", label: "Width", type: "text", path: "theme.components.panel.width", defaultValue: "min(400px, calc(100vw - 24px))" },
-    { id: "panel-max-width", label: "Max Width", type: "text", path: "theme.components.panel.maxWidth", defaultValue: "400px" },
+    { id: "panel-width", label: "Width", type: "text", path: "theme.components.panel.width", defaultValue: DEFAULT_FLOATING_LAUNCHER_WIDTH },
+    { id: "panel-max-width", label: "Max Width", type: "text", path: "theme.components.panel.maxWidth", defaultValue: DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH },
     { id: "panel-height", label: "Height", type: "text", path: "theme.components.panel.height", defaultValue: "600px" },
     { id: "panel-max-height", label: "Max Height", type: "text", path: "theme.components.panel.maxHeight", defaultValue: "calc(100vh - 80px)" },
     { id: "panel-border-radius", label: "Border Radius", type: "select", path: "theme.components.panel.borderRadius", defaultValue: "palette.radius.xl", options: [
@@ -2539,7 +2541,7 @@ var launcherBasicsSectionDef = {
     { id: "launch-enabled", label: "Enabled", type: "toggle", path: "launcher.enabled", defaultValue: true },
     { id: "launch-mount-mode", label: "Mount Mode", type: "select", path: "launcher.mountMode", defaultValue: "floating", options: [{ value: "floating", label: "Floating" }, { value: "docked", label: "Docked" }] },
     { id: "launch-position", label: "Position", type: "select", path: "launcher.position", defaultValue: "bottom-right", options: [{ value: "bottom-right", label: "Bottom Right" }, { value: "bottom-left", label: "Bottom Left" }, { value: "top-right", label: "Top Right" }, { value: "top-left", label: "Top Left" }] },
-    { id: "launch-width", label: "Width", type: "text", path: "launcher.width", defaultValue: "min(400px, calc(100vw - 24px))" },
+    { id: "launch-width", label: "Width", type: "text", path: "launcher.width", defaultValue: DEFAULT_FLOATING_LAUNCHER_WIDTH },
     { id: "launch-auto-expand", label: "Auto Expand", type: "toggle", path: "launcher.autoExpand", defaultValue: false },
     { id: "launch-title", label: "Title", type: "text", path: "launcher.title", defaultValue: "Chat Assistant" },
     { id: "launch-subtitle", label: "Subtitle", type: "text", path: "launcher.subtitle", defaultValue: "Here to help you get answers fast" }
@@ -4253,6 +4255,7 @@ var AgentWidgetClient = class {
     let assistantMessage = null;
     const assistantMessageRef = { current: null };
     const partIdState = { current: null };
+    let didSplitByPartId = false;
     const reasoningMessages = /* @__PURE__ */ new Map();
     const toolMessages = /* @__PURE__ */ new Map();
     const reasoningContext = {
@@ -4283,11 +4286,21 @@ var AgentWidgetClient = class {
         (_g2 = (_f2 = (_e2 = (_d2 = (_c2 = (_b2 = (_a2 = payload.callId) != null ? _a2 : payload.call_id) != null ? _b2 : payload.requestId) != null ? _c2 : payload.request_id) != null ? _d2 : payload.toolCallId) != null ? _e2 : payload.tool_call_id) != null ? _f2 : payload.stepId) != null ? _g2 : payload.step_id
       );
     };
+    const baseAssistantId = assistantMessageId;
+    let assistantIdConsumed = false;
     const ensureAssistantMessage = () => {
       if (assistantMessage) return assistantMessage;
+      let id;
+      if (!assistantIdConsumed && baseAssistantId) {
+        id = baseAssistantId;
+        assistantIdConsumed = true;
+      } else if (baseAssistantId && partIdState.current) {
+        id = `${baseAssistantId}_${partIdState.current}`;
+      } else {
+        id = `assistant-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+      }
       assistantMessage = {
-        // Use pre-generated ID if provided, otherwise generate one
-        id: assistantMessageId != null ? assistantMessageId : `assistant-${Date.now()}-${Math.random().toString(16).slice(2)}`,
+        id,
         role: "assistant",
         content: "",
         createdAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -4656,13 +4669,51 @@ var AgentWidgetClient = class {
           if (callKey) {
             toolContext.byCall.delete(callKey);
           }
+        } else if (payloadType === "text_start") {
+          const incomingPartId = payload.partId;
+          if (incomingPartId !== void 0 && partIdState.current !== null && incomingPartId !== partIdState.current) {
+            const prev = assistantMessage;
+            if (prev) {
+              prev.streaming = false;
+              emitMessage(prev);
+              assistantMessage = null;
+              didSplitByPartId = true;
+            }
+          }
+          if (incomingPartId !== void 0) {
+            partIdState.current = incomingPartId;
+          }
+        } else if (payloadType === "text_end") {
+          const prev = assistantMessage;
+          if (prev) {
+            prev.streaming = false;
+            emitMessage(prev);
+            assistantMessage = null;
+            didSplitByPartId = true;
+          }
         } else if (payloadType === "step_chunk" || payloadType === "step_delta") {
           const stepType = payload.stepType;
           const executionType = payload.executionType;
           if (stepType === "tool" || executionType === "context") {
             continue;
           }
+          const incomingPartId = payload.partId;
+          if (incomingPartId !== void 0 && partIdState.current !== null && incomingPartId !== partIdState.current) {
+            const prev = assistantMessage;
+            if (prev) {
+              prev.streaming = false;
+              emitMessage(prev);
+              assistantMessage = null;
+              didSplitByPartId = true;
+            }
+          }
+          if (incomingPartId !== void 0) {
+            partIdState.current = incomingPartId;
+          }
           const assistant = ensureAssistantMessage();
+          if (incomingPartId !== void 0 && !assistant.partId) {
+            assistant.partId = incomingPartId;
+          }
           const chunk = (_ca = (_ba = (_aa = (_$ = payload.text) != null ? _$ : payload.delta) != null ? _aa : payload.content) != null ? _ba : payload.chunk) != null ? _ca : "";
           if (chunk) {
             const rawBuffer = (_da = rawContentBuffers.get(assistant.id)) != null ? _da : "";
@@ -4886,7 +4937,17 @@ var AgentWidgetClient = class {
           }
         } else if (payloadType === "flow_complete") {
           const finalContent = (_ma = payload.result) == null ? void 0 : _ma.response;
-          if (finalContent !== void 0 && finalContent !== null) {
+          if (didSplitByPartId) {
+            if (assistantMessage !== null) {
+              const msg = assistantMessage;
+              streamParsers.delete(msg.id);
+              rawContentBuffers.delete(msg.id);
+              if (msg.streaming !== false) {
+                msg.streaming = false;
+                emitMessage(msg);
+              }
+            }
+          } else if (finalContent !== void 0 && finalContent !== null) {
             const assistant = ensureAssistantMessage();
             const rawBuffer = rawContentBuffers.get(assistant.id);
             const stringContent = rawBuffer != null ? rawBuffer : ensureStringContent(finalContent);
@@ -9306,7 +9367,7 @@ var createWrapper = (config) => {
     "persona-widget-panel persona-relative persona-min-h-[320px]"
   );
   const launcherWidth = (_i = (_h = config == null ? void 0 : config.launcher) == null ? void 0 : _h.width) != null ? _i : config == null ? void 0 : config.launcherWidth;
-  const width = launcherWidth != null ? launcherWidth : "min(400px, calc(100vw - 24px))";
+  const width = launcherWidth != null ? launcherWidth : DEFAULT_FLOATING_LAUNCHER_WIDTH;
   panel.style.width = width;
   panel.style.maxWidth = width;
   wrapper.appendChild(panel);
@@ -13482,6 +13543,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       selectedModelId: composerCfg == null ? void 0 : composerCfg.selectedModelId,
       onModelChange: (modelId) => {
         config.composer = { ...config.composer, selectedModelId: modelId };
+        if (config.agent) {
+          config.agent = { ...config.agent, model: modelId };
+        }
       },
       onVoiceToggle: ((_A = config.voiceRecognition) == null ? void 0 : _A.enabled) === true ? () => {
         composerVoiceBridge == null ? void 0 : composerVoiceBridge();
@@ -13528,6 +13592,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     composerForm.style.marginLeft = "auto";
     composerForm.style.marginRight = "auto";
   }
+  if (contentMaxWidth && suggestions) {
+    suggestions.style.maxWidth = contentMaxWidth;
+    suggestions.style.marginLeft = "auto";
+    suggestions.style.marginRight = "auto";
+  }
   if (contentMaxWidth && attachmentPreviewsContainer) {
     attachmentPreviewsContainer.style.maxWidth = contentMaxWidth;
     attachmentPreviewsContainer.style.marginLeft = "auto";
@@ -14006,7 +14075,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       const mobileBreakpoint = (_g2 = (_f2 = config.launcher) == null ? void 0 : _f2.mobileBreakpoint) != null ? _g2 : 640;
       if (mobileFullscreen && ownerWindow2.innerWidth <= mobileBreakpoint) return;
       if (!shouldExpandLauncherForArtifacts(config, launcherEnabled)) return;
-      const base = (_j2 = (_i2 = (_h2 = config.launcher) == null ? void 0 : _h2.width) != null ? _i2 : config.launcherWidth) != null ? _j2 : "min(400px, calc(100vw - 24px))";
+      const base = (_j2 = (_i2 = (_h2 = config.launcher) == null ? void 0 : _h2.width) != null ? _i2 : config.launcherWidth) != null ? _j2 : DEFAULT_FLOATING_LAUNCHER_WIDTH;
       const expanded = (_n2 = (_m2 = (_l2 = (_k2 = config.features) == null ? void 0 : _k2.artifacts) == null ? void 0 : _l2.layout) == null ? void 0 : _m2.expandedPanelWidth) != null ? _n2 : "min(720px, calc(100vw - 24px))";
       const hasVisible = lastArtifactsState.artifacts.length > 0 && !artifactsPaneUserHidden;
       if (hasVisible) {
@@ -14122,7 +14191,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       return;
     }
     const launcherWidth = (_r2 = (_q2 = config == null ? void 0 : config.launcher) == null ? void 0 : _q2.width) != null ? _r2 : config == null ? void 0 : config.launcherWidth;
-    const width = launcherWidth != null ? launcherWidth : "min(400px, calc(100vw - 24px))";
+    const width = launcherWidth != null ? launcherWidth : DEFAULT_FLOATING_LAUNCHER_WIDTH;
     if (!sidebarMode && !dockedMode) {
       if (isInlineEmbed && fullHeight) {
         panel.style.width = "100%";
@@ -15642,7 +15711,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
       if (!sidebarMode && !dockedMode) {
         const launcherWidth = (_k2 = (_j2 = config == null ? void 0 : config.launcher) == null ? void 0 : _j2.width) != null ? _k2 : config == null ? void 0 : config.launcherWidth;
-        const width = launcherWidth != null ? launcherWidth : "min(400px, calc(100vw - 24px))";
+        const width = launcherWidth != null ? launcherWidth : DEFAULT_FLOATING_LAUNCHER_WIDTH;
         panel.style.width = width;
         panel.style.maxWidth = width;
       }
@@ -16731,6 +16800,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           composerForm.style.marginLeft = "auto";
           composerForm.style.marginRight = "auto";
         }
+        if (suggestions) {
+          suggestions.style.maxWidth = updatedContentMaxWidth;
+          suggestions.style.marginLeft = "auto";
+          suggestions.style.marginRight = "auto";
+        }
       } else {
         messagesWrapper.style.maxWidth = "";
         messagesWrapper.style.marginLeft = "";
@@ -16741,6 +16815,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           composerForm.style.marginLeft = "";
           composerForm.style.marginRight = "";
         }
+        if (suggestions) {
+          suggestions.style.maxWidth = "";
+          suggestions.style.marginLeft = "";
+          suggestions.style.marginRight = "";
+        }
       }
       const statusIndicatorConfig = (_Qa = config.statusIndicator) != null ? _Qa : {};
       const isVisible = (_Ra = statusIndicatorConfig.visible) != null ? _Ra : true;