@runtypelabs/persona 3.8.3 → 3.9.0

package/dist/theme-editor.js

@@ -1,3 +1,293 @@
+// 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/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"
+    },
+    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"
+    },
+    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
+    },
+    statusIndicator: {
+      ...DEFAULT_WIDGET_CONFIG.statusIndicator,
+      ...config.statusIndicator
+    },
+    voiceRecognition: {
+      ...DEFAULT_WIDGET_CONFIG.voiceRecognition,
+      ...config.voiceRecognition
+    },
+    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
+    },
+    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
+      }
+    },
+    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
+    }
+  };
+}
+
 // src/utils/tokens.ts
 var DEFAULT_PALETTE = {
   colors: {
@@ -265,8 +555,8 @@ var DEFAULT_COMPONENTS = {
     shadow: "palette.shadows.lg"
   },
   panel: {
-    width: "min(400px, calc(100vw - 24px))",
-    maxWidth: "400px",
+    width: DEFAULT_FLOATING_LAUNCHER_WIDTH,
+    maxWidth: DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH,
     height: "600px",
     maxHeight: "calc(100vh - 80px)",
     borderRadius: "palette.radius.xl",
@@ -755,516 +1045,228 @@ function themeToCssVariables(theme) {
     if (t.copyMenuItemHoverBackground) {
       cssVars["--persona-artifact-toolbar-copy-menu-item-hover-bg"] = t.copyMenuItemHoverBackground;
       cssVars["--persona-dropdown-item-hover-bg"] = (_ab = cssVars["--persona-dropdown-item-hover-bg"]) != null ? _ab : t.copyMenuItemHoverBackground;
-    }
-    if (t.iconBackground) cssVars["--persona-artifact-toolbar-icon-bg"] = t.iconBackground;
-    if (t.toolbarBorder) cssVars["--persona-artifact-toolbar-border"] = t.toolbarBorder;
-  }
-  if (artifact == null ? void 0 : artifact.tab) {
-    const t = artifact.tab;
-    if (t.background) cssVars["--persona-artifact-tab-bg"] = t.background;
-    if (t.activeBackground) cssVars["--persona-artifact-tab-active-bg"] = t.activeBackground;
-    if (t.activeBorder) cssVars["--persona-artifact-tab-active-border"] = t.activeBorder;
-    if (t.borderRadius) cssVars["--persona-artifact-tab-radius"] = t.borderRadius;
-    if (t.textColor) cssVars["--persona-artifact-tab-color"] = t.textColor;
-    if (t.hoverBackground) cssVars["--persona-artifact-tab-hover-bg"] = t.hoverBackground;
-    if (t.listBackground) cssVars["--persona-artifact-tab-list-bg"] = t.listBackground;
-    if (t.listBorderColor) cssVars["--persona-artifact-tab-list-border-color"] = t.listBorderColor;
-    if (t.listPadding) cssVars["--persona-artifact-tab-list-padding"] = t.listPadding;
-  }
-  if (artifact == null ? void 0 : artifact.pane) {
-    const t = artifact.pane;
-    if (t.toolbarBackground) {
-      const toolbarBg = (_bb = resolveTokenValue(theme, t.toolbarBackground)) != null ? _bb : t.toolbarBackground;
-      cssVars["--persona-artifact-toolbar-bg"] = toolbarBg;
-    }
-  }
-  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: {
-    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"
-    }
-  }
-};
-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
-    );
+    }
+    if (t.iconBackground) cssVars["--persona-artifact-toolbar-icon-bg"] = t.iconBackground;
+    if (t.toolbarBorder) cssVars["--persona-artifact-toolbar-border"] = t.toolbarBorder;
   }
-};
-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 (artifact == null ? void 0 : artifact.tab) {
+    const t = artifact.tab;
+    if (t.background) cssVars["--persona-artifact-tab-bg"] = t.background;
+    if (t.activeBackground) cssVars["--persona-artifact-tab-active-bg"] = t.activeBackground;
+    if (t.activeBorder) cssVars["--persona-artifact-tab-active-border"] = t.activeBorder;
+    if (t.borderRadius) cssVars["--persona-artifact-tab-radius"] = t.borderRadius;
+    if (t.textColor) cssVars["--persona-artifact-tab-color"] = t.textColor;
+    if (t.hoverBackground) cssVars["--persona-artifact-tab-hover-bg"] = t.hoverBackground;
+    if (t.listBackground) cssVars["--persona-artifact-tab-list-bg"] = t.listBackground;
+    if (t.listBorderColor) cssVars["--persona-artifact-tab-list-border-color"] = t.listBorderColor;
+    if (t.listPadding) cssVars["--persona-artifact-tab-list-padding"] = t.listPadding;
   }
-  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));
+  if (artifact == null ? void 0 : artifact.pane) {
+    const t = artifact.pane;
+    if (t.toolbarBackground) {
+      const toolbarBg = (_bb = resolveTokenValue(theme, t.toolbarBackground)) != null ? _bb : t.toolbarBackground;
+      cssVars["--persona-artifact-toolbar-bg"] = toolbarBg;
     }
   }
-  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
-  );
+  return cssVars;
 }
-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
-      }
+
+// src/utils/theme.ts
+var DARK_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"
     },
-    copy: {
-      ...DEFAULT_WIDGET_CONFIG.copy,
-      ...config.copy
+    secondary: {
+      50: "#f5f3ff",
+      100: "#ede9fe",
+      200: "#ddd6fe",
+      300: "#c4b5fd",
+      400: "#a78bfa",
+      500: "#8b5cf6",
+      600: "#7c3aed",
+      700: "#6d28d9",
+      800: "#5b21b6",
+      900: "#4c1d95",
+      950: "#2e1065"
     },
-    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) {
@@ -2129,8 +2131,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: [
@@ -2434,7 +2436,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" }
@@ -4148,6 +4150,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 = {
@@ -4178,11 +4181,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(),
@@ -4551,13 +4564,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 : "";
@@ -4781,7 +4832,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);
@@ -9201,7 +9262,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);
@@ -13909,7 +13970,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) {
@@ -14025,7 +14086,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%";
@@ -15545,7 +15606,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;
       }