@webless/agent 0.7.5 → 0.8.0

package/dist/embed.cjs

@@ -3580,6 +3580,48 @@ var defaultDarkAgentRailTheme = {
   danger: "#ff8da1"
 };
 
+// src/react/lib/agent-theme.ts
+function agentThemeStyle(theme, resolvedColorScheme) {
+  const brandedTheme = { ...defaultAgentRailTheme, ...theme };
+  const resolvedTheme = resolvedColorScheme === "dark" ? {
+    ...brandedTheme,
+    brand: theme?.brand ?? defaultDarkAgentRailTheme.brand,
+    brandDeep: theme?.brandDeep ?? defaultDarkAgentRailTheme.brandDeep,
+    brandSoft: theme?.brandSoft ?? `color-mix(in srgb, ${theme?.brand ?? defaultDarkAgentRailTheme.brand} 18%, ${defaultDarkAgentRailTheme.surface})`,
+    border: theme?.border ?? defaultDarkAgentRailTheme.border,
+    danger: theme?.danger ?? defaultDarkAgentRailTheme.danger,
+    onBrand: theme?.onBrand ?? defaultDarkAgentRailTheme.onBrand,
+    success: theme?.success ?? defaultDarkAgentRailTheme.success,
+    surface: theme?.surface ?? defaultDarkAgentRailTheme.surface,
+    surfaceMuted: theme?.surfaceMuted ?? defaultDarkAgentRailTheme.surfaceMuted,
+    text: theme?.text ?? defaultDarkAgentRailTheme.text,
+    textMuted: theme?.textMuted ?? defaultDarkAgentRailTheme.textMuted,
+    textSubtle: theme?.textSubtle ?? defaultDarkAgentRailTheme.textSubtle,
+    visitorBubble: theme?.visitorBubble ?? theme?.brand ?? defaultDarkAgentRailTheme.visitorBubble
+  } : brandedTheme;
+  return {
+    "--rail-width": resolvedTheme.railMaxWidth,
+    "--as-rail-max-width": resolvedTheme.railMaxWidth,
+    "--as-brand": resolvedTheme.brand,
+    "--as-brand-soft": resolvedTheme.brandSoft,
+    "--as-brand-deep": resolvedTheme.brandDeep,
+    "--as-surface": resolvedTheme.surface,
+    "--as-surface-muted": resolvedTheme.surfaceMuted,
+    "--as-text": resolvedTheme.text,
+    "--as-text-muted": resolvedTheme.textMuted,
+    "--as-text-subtle": resolvedTheme.textSubtle,
+    "--as-border": resolvedTheme.border,
+    "--as-visitor-bubble": resolvedTheme.visitorBubble,
+    "--as-visitor-text": resolvedTheme.visitorText,
+    "--as-on-brand": resolvedTheme.onBrand,
+    "--as-success": resolvedTheme.success,
+    "--as-danger": resolvedTheme.danger,
+    "--as-font-body": resolvedTheme.fontBody,
+    "--as-font-display": resolvedTheme.fontDisplay,
+    colorScheme: resolvedColorScheme
+  };
+}
+
 // src/react/hooks/useAgentColorScheme.ts
 var import_react4 = require("react");
 var DARK_MODE_QUERY = "(prefers-color-scheme: dark)";
@@ -6188,44 +6230,7 @@ function AgentRail({
   const [failedLogoUrl, setFailedLogoUrl] = (0, import_react14.useState)(null);
   const showBrandLogo = Boolean(resolvedBrandLogoUrl) && failedLogoUrl !== resolvedBrandLogoUrl;
   const resolvedColorScheme = useAgentColorScheme(colorScheme);
-  const brandedTheme = { ...defaultAgentRailTheme, ...theme };
-  const resolvedTheme = resolvedColorScheme === "dark" ? {
-    ...brandedTheme,
-    brand: theme?.brand ?? defaultDarkAgentRailTheme.brand,
-    brandDeep: theme?.brandDeep ?? defaultDarkAgentRailTheme.brandDeep,
-    brandSoft: theme?.brandSoft ?? `color-mix(in srgb, ${theme?.brand ?? defaultDarkAgentRailTheme.brand} 18%, ${defaultDarkAgentRailTheme.surface})`,
-    border: theme?.border ?? defaultDarkAgentRailTheme.border,
-    danger: theme?.danger ?? defaultDarkAgentRailTheme.danger,
-    onBrand: theme?.onBrand ?? defaultDarkAgentRailTheme.onBrand,
-    success: theme?.success ?? defaultDarkAgentRailTheme.success,
-    surface: theme?.surface ?? defaultDarkAgentRailTheme.surface,
-    surfaceMuted: theme?.surfaceMuted ?? defaultDarkAgentRailTheme.surfaceMuted,
-    text: theme?.text ?? defaultDarkAgentRailTheme.text,
-    textMuted: theme?.textMuted ?? defaultDarkAgentRailTheme.textMuted,
-    textSubtle: theme?.textSubtle ?? defaultDarkAgentRailTheme.textSubtle,
-    visitorBubble: theme?.visitorBubble ?? theme?.brand ?? defaultDarkAgentRailTheme.visitorBubble
-  } : brandedTheme;
-  const railStyle = {
-    "--rail-width": resolvedTheme.railMaxWidth,
-    "--as-rail-max-width": resolvedTheme.railMaxWidth,
-    "--as-brand": resolvedTheme.brand,
-    "--as-brand-soft": resolvedTheme.brandSoft,
-    "--as-brand-deep": resolvedTheme.brandDeep,
-    "--as-surface": resolvedTheme.surface,
-    "--as-surface-muted": resolvedTheme.surfaceMuted,
-    "--as-text": resolvedTheme.text,
-    "--as-text-muted": resolvedTheme.textMuted,
-    "--as-text-subtle": resolvedTheme.textSubtle,
-    "--as-border": resolvedTheme.border,
-    "--as-visitor-bubble": resolvedTheme.visitorBubble,
-    "--as-visitor-text": resolvedTheme.visitorText,
-    "--as-on-brand": resolvedTheme.onBrand,
-    "--as-success": resolvedTheme.success,
-    "--as-danger": resolvedTheme.danger,
-    "--as-font-body": resolvedTheme.fontBody,
-    "--as-font-display": resolvedTheme.fontDisplay,
-    colorScheme: resolvedColorScheme
-  };
+  const railStyle = agentThemeStyle(theme, resolvedColorScheme);
   const pendingInputRequests = (state.pendingInputs ?? []).filter(
     (request) => shouldRenderVisitorInputCard(request) && (!state.pendingOffer || request.kind === "tool-approval")
   );