vanilla-agent 1.24.0 → 1.26.0

package/dist/install.global.js

@@ -1,2 +1,2 @@
-"use strict";var SiteAgentInstaller=(()=>{(function(){"use strict";if(window.__siteAgentInstallerLoaded)return;window.__siteAgentInstallerLoaded=!0;let c=(()=>{let e=document.currentScript;if(!e)return{};let t={},i=e.getAttribute("data-travrse-token");i&&(t.clientToken=i);let o=e.getAttribute("data-flow-id");o&&(t.flowId=o);let l=e.getAttribute("data-api-url");return l&&(t.apiUrl=l),t})(),n={...window.siteAgentConfig||{},...c},d=n.version||"latest",g=n.cdn||"jsdelivr",f=n.autoInit!==!1,u=()=>{if(n.cssUrl&&n.jsUrl)return{cssUrl:n.cssUrl,jsUrl:n.jsUrl};let t=`/npm/vanilla-agent@${d}/dist`;return g==="unpkg"?{cssUrl:`https://unpkg.com${t}/widget.css`,jsUrl:`https://unpkg.com${t}/index.global.js`}:{cssUrl:`https://cdn.jsdelivr.net${t}/widget.css`,jsUrl:`https://cdn.jsdelivr.net${t}/index.global.js`}},{cssUrl:r,jsUrl:s}=u(),w=()=>!!document.head.querySelector("link[data-vanilla-agent]")||!!document.head.querySelector('link[href*="widget.css"]'),p=()=>!!window.AgentWidget,A=()=>new Promise((e,t)=>{if(w()){e();return}let i=document.createElement("link");i.rel="stylesheet",i.href=r,i.setAttribute("data-vanilla-agent","true"),i.onload=()=>e(),i.onerror=()=>t(new Error(`Failed to load CSS from ${r}`)),document.head.appendChild(i)}),m=()=>new Promise((e,t)=>{if(p()){e();return}let i=document.createElement("script");i.src=s,i.async=!0,i.onload=()=>e(),i.onerror=()=>t(new Error(`Failed to load JS from ${s}`)),document.head.appendChild(i)}),C=()=>{if(!window.AgentWidget||!window.AgentWidget.initAgentWidget){console.warn("AgentWidget not available. Make sure the script loaded successfully.");return}let e=n.target||"body",t={...n.config};if(n.apiUrl&&!t.apiUrl&&(t.apiUrl=n.apiUrl),n.clientToken&&!t.clientToken&&(t.clientToken=n.clientToken),n.flowId&&!t.flowId&&(t.flowId=n.flowId),!(!(t.apiUrl||t.clientToken)&&Object.keys(t).length===0))try{window.AgentWidget.initAgentWidget({target:e,config:t})}catch(o){console.error("Failed to initialize AgentWidget:",o)}},a=async()=>{try{await A(),await m(),f&&(n.config||n.apiUrl||n.clientToken)&&setTimeout(C,0)}catch(e){console.error("Failed to install AgentWidget:",e)}};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",a):a()})();})();
+"use strict";var SiteAgentInstaller=(()=>{(function(){"use strict";if(window.__siteAgentInstallerLoaded)return;window.__siteAgentInstallerLoaded=!0;let d=(()=>{let n=document.currentScript;if(!n)return{};let t={},i=n.getAttribute("data-config");if(i)try{let r=JSON.parse(i);r.config?Object.assign(t,r):t.config=r}catch(r){console.error("Failed to parse data-config JSON:",r)}let o=n.getAttribute("data-travrse-token");o&&(t.clientToken=o);let s=n.getAttribute("data-flow-id");s&&(t.flowId=s);let c=n.getAttribute("data-api-url");return c&&(t.apiUrl=c),t})(),e={...window.siteAgentConfig||{},...d},g=e.version||"latest",f=e.cdn||"jsdelivr",u=e.autoInit!==!1,w=()=>{if(e.cssUrl&&e.jsUrl)return{cssUrl:e.cssUrl,jsUrl:e.jsUrl};let t=`/npm/vanilla-agent@${g}/dist`;return f==="unpkg"?{cssUrl:`https://unpkg.com${t}/widget.css`,jsUrl:`https://unpkg.com${t}/index.global.js`}:{cssUrl:`https://cdn.jsdelivr.net${t}/widget.css`,jsUrl:`https://cdn.jsdelivr.net${t}/index.global.js`}},{cssUrl:a,jsUrl:l}=w(),p=()=>!!document.head.querySelector("link[data-vanilla-agent]")||!!document.head.querySelector('link[href*="widget.css"]'),m=()=>!!window.AgentWidget,A=n=>{let t=!1,i=()=>{t||(t=!0,n())},o=()=>{typeof requestIdleCallback!="undefined"?requestIdleCallback(()=>{requestAnimationFrame(()=>{requestAnimationFrame(i)})},{timeout:3e3}):setTimeout(i,300)};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",o):o()},C=()=>new Promise((n,t)=>{if(p()){n();return}let i=document.createElement("link");i.rel="stylesheet",i.href=a,i.setAttribute("data-vanilla-agent","true"),i.onload=()=>n(),i.onerror=()=>t(new Error(`Failed to load CSS from ${a}`)),document.head.appendChild(i)}),h=()=>new Promise((n,t)=>{if(m()){n();return}let i=document.createElement("script");i.src=l,i.async=!0,i.onload=()=>n(),i.onerror=()=>t(new Error(`Failed to load JS from ${l}`)),document.head.appendChild(i)}),k=()=>{var o;if(!window.AgentWidget||!window.AgentWidget.initAgentWidget){console.warn("AgentWidget not available. Make sure the script loaded successfully.");return}let n=e.target||"body",t={...e.config};if(e.apiUrl&&!t.apiUrl&&(t.apiUrl=e.apiUrl),e.clientToken&&!t.clientToken&&(t.clientToken=e.clientToken),e.flowId&&!t.flowId&&(t.flowId=e.flowId),!(!(t.apiUrl||t.clientToken)&&Object.keys(t).length===0)){!t.postprocessMessage&&window.AgentWidget.markdownPostprocessor&&(t.postprocessMessage=({text:s})=>window.AgentWidget.markdownPostprocessor(s));try{window.AgentWidget.initAgentWidget({target:n,config:t,useShadowDom:(o=e.useShadowDom)!=null?o:!1})}catch(s){console.error("Failed to initialize AgentWidget:",s)}}};A(async()=>{try{await C(),await h(),u&&(e.config||e.apiUrl||e.clientToken)&&setTimeout(k,0)}catch(n){console.error("Failed to install AgentWidget:",n)}})})();})();
 //# sourceMappingURL=install.global.js.map

package/dist/install.global.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/install.ts"],"sourcesContent":["/**\n * Standalone installer script for easy script tag installation\n * This script automatically loads CSS and JS, then initializes the widget\n * if configuration is provided via window.siteAgentConfig\n */\n\ninterface SiteAgentInstallConfig {\n  version?: string;\n  cdn?: \"unpkg\" | \"jsdelivr\";\n  cssUrl?: string;\n  jsUrl?: string;\n  target?: string | HTMLElement;\n  config?: any;\n  autoInit?: boolean;\n  // Client token mode options (can also be set via data attributes)\n  clientToken?: string;\n  flowId?: string;\n  apiUrl?: string;\n}\n\ndeclare global {\n  interface Window {\n    siteAgentConfig?: SiteAgentInstallConfig;\n    AgentWidget?: any;\n  }\n}\n\n(function() {\n  \"use strict\";\n\n  // Prevent double installation\n  if ((window as any).__siteAgentInstallerLoaded) {\n    return;\n  }\n  (window as any).__siteAgentInstallerLoaded = true;\n\n  /**\n   * Read configuration from data attributes on the current script tag.\n   * Supports: data-travrse-token, data-flow-id, data-api-url\n   */\n  const getConfigFromScript = (): Partial<SiteAgentInstallConfig> => {\n    // Try to get the current script element\n    const script = document.currentScript as HTMLScriptElement | null;\n    if (!script) return {};\n\n    const scriptConfig: Partial<SiteAgentInstallConfig> = {};\n\n    // Client token from data attribute (primary method for client token mode)\n    const token = script.getAttribute('data-travrse-token');\n    if (token) {\n      scriptConfig.clientToken = token;\n    }\n\n    // Optional flow ID\n    const flowId = script.getAttribute('data-flow-id');\n    if (flowId) {\n      scriptConfig.flowId = flowId;\n    }\n\n    // Optional API URL override\n    const apiUrl = script.getAttribute('data-api-url');\n    if (apiUrl) {\n      scriptConfig.apiUrl = apiUrl;\n    }\n\n    return scriptConfig;\n  };\n\n  // Get config from script attributes (must be called synchronously during script execution)\n  const scriptConfig = getConfigFromScript();\n\n  // Merge script attributes with window config (script attributes take precedence)\n  const windowConfig: SiteAgentInstallConfig = window.siteAgentConfig || {};\n  const config: SiteAgentInstallConfig = { ...windowConfig, ...scriptConfig };\n  \n  const version = config.version || \"latest\";\n  const cdn = config.cdn || \"jsdelivr\";\n  const autoInit = config.autoInit !== false; // Default to true\n\n  // Determine CDN base URL\n  const getCdnBase = () => {\n    if (config.cssUrl && config.jsUrl) {\n      return { cssUrl: config.cssUrl, jsUrl: config.jsUrl };\n    }\n    \n    const packageName = \"vanilla-agent\";\n    const basePath = `/npm/${packageName}@${version}/dist`;\n    \n    if (cdn === \"unpkg\") {\n      return {\n        cssUrl: `https://unpkg.com${basePath}/widget.css`,\n        jsUrl: `https://unpkg.com${basePath}/index.global.js`\n      };\n    } else {\n      return {\n        cssUrl: `https://cdn.jsdelivr.net${basePath}/widget.css`,\n        jsUrl: `https://cdn.jsdelivr.net${basePath}/index.global.js`\n      };\n    }\n  };\n\n  const { cssUrl, jsUrl } = getCdnBase();\n\n  // Check if CSS is already loaded\n  const isCssLoaded = () => {\n    return !!document.head.querySelector('link[data-vanilla-agent]') ||\n           !!document.head.querySelector(`link[href*=\"widget.css\"]`);\n  };\n\n  // Check if JS is already loaded\n  const isJsLoaded = () => {\n    return !!(window as any).AgentWidget;\n  };\n\n  // Load CSS\n  const loadCSS = (): Promise<void> => {\n    return new Promise((resolve, reject) => {\n      if (isCssLoaded()) {\n        resolve();\n        return;\n      }\n\n      const link = document.createElement(\"link\");\n      link.rel = \"stylesheet\";\n      link.href = cssUrl;\n      link.setAttribute(\"data-vanilla-agent\", \"true\");\n      link.onload = () => resolve();\n      link.onerror = () => reject(new Error(`Failed to load CSS from ${cssUrl}`));\n      document.head.appendChild(link);\n    });\n  };\n\n  // Load JS\n  const loadJS = (): Promise<void> => {\n    return new Promise((resolve, reject) => {\n      if (isJsLoaded()) {\n        resolve();\n        return;\n      }\n\n      const script = document.createElement(\"script\");\n      script.src = jsUrl;\n      script.async = true;\n      script.onload = () => resolve();\n      script.onerror = () => reject(new Error(`Failed to load JS from ${jsUrl}`));\n      document.head.appendChild(script);\n    });\n  };\n\n  // Initialize widget\n  const initWidget = () => {\n    if (!window.AgentWidget || !window.AgentWidget.initAgentWidget) {\n      console.warn(\"AgentWidget not available. Make sure the script loaded successfully.\");\n      return;\n    }\n\n    const target = config.target || \"body\";\n    // Merge top-level config options into widget config\n    const widgetConfig = { ...config.config };\n    \n    // Merge apiUrl from top-level config into widget config if present\n    if (config.apiUrl && !widgetConfig.apiUrl) {\n      widgetConfig.apiUrl = config.apiUrl;\n    }\n    \n    // Merge clientToken from top-level config into widget config if present\n    if (config.clientToken && !widgetConfig.clientToken) {\n      widgetConfig.clientToken = config.clientToken;\n    }\n    \n    // Merge flowId from top-level config into widget config if present\n    if (config.flowId && !widgetConfig.flowId) {\n      widgetConfig.flowId = config.flowId;\n    }\n\n    // Only initialize if we have either apiUrl OR clientToken (or other config)\n    const hasApiConfig = widgetConfig.apiUrl || widgetConfig.clientToken;\n    if (!hasApiConfig && Object.keys(widgetConfig).length === 0) {\n      return;\n    }\n\n    try {\n      window.AgentWidget.initAgentWidget({\n        target,\n        config: widgetConfig\n      });\n    } catch (error) {\n      console.error(\"Failed to initialize AgentWidget:\", error);\n    }\n  };\n\n  // Main installation flow\n  const install = async () => {\n    try {\n      await loadCSS();\n      await loadJS();\n      \n      // Auto-init if we have config OR apiUrl OR clientToken\n      const shouldAutoInit = autoInit && (\n        config.config || \n        config.apiUrl || \n        config.clientToken\n      );\n      \n      if (shouldAutoInit) {\n        // Wait a tick to ensure AgentWidget is fully initialized\n        setTimeout(initWidget, 0);\n      }\n    } catch (error) {\n      console.error(\"Failed to install AgentWidget:\", error);\n    }\n  };\n\n  // Start installation\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\"DOMContentLoaded\", install);\n  } else {\n    install();\n  }\n})();\n\n"],"mappings":"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","names":["scriptConfig","script","token","flowId","apiUrl","config","version","cdn","autoInit","getCdnBase","basePath","cssUrl","jsUrl","isCssLoaded","isJsLoaded","loadCSS","resolve","reject","link","loadJS","initWidget","target","widgetConfig","error","install"]}
+{"version":3,"sources":["../src/install.ts"],"sourcesContent":["/**\n * Standalone installer script for easy script tag installation\n * This script automatically loads CSS and JS, then initializes the widget\n * if configuration is provided via window.siteAgentConfig\n */\n\ninterface SiteAgentInstallConfig {\n  version?: string;\n  cdn?: \"unpkg\" | \"jsdelivr\";\n  cssUrl?: string;\n  jsUrl?: string;\n  target?: string | HTMLElement;\n  config?: any;\n  autoInit?: boolean;\n  // Client token mode options (can also be set via data attributes)\n  clientToken?: string;\n  flowId?: string;\n  apiUrl?: string;\n  // Shadow DOM option (defaults to false for better CSS compatibility)\n  useShadowDom?: boolean;\n}\n\ndeclare global {\n  interface Window {\n    siteAgentConfig?: SiteAgentInstallConfig;\n    AgentWidget?: any;\n  }\n}\n\n(function() {\n  \"use strict\";\n\n  // Prevent double installation\n  if ((window as any).__siteAgentInstallerLoaded) {\n    return;\n  }\n  (window as any).__siteAgentInstallerLoaded = true;\n\n  /**\n   * Read configuration from data attributes on the current script tag.\n   * Supports: data-config (JSON), data-travrse-token, data-flow-id, data-api-url\n   */\n  const getConfigFromScript = (): Partial<SiteAgentInstallConfig> => {\n    // Try to get the current script element\n    const script = document.currentScript as HTMLScriptElement | null;\n    if (!script) return {};\n\n    const scriptConfig: Partial<SiteAgentInstallConfig> = {};\n\n    // Full config from data-config attribute (JSON string)\n    const configJson = script.getAttribute('data-config');\n    if (configJson) {\n      try {\n        const parsedConfig = JSON.parse(configJson);\n        // If it has nested 'config' property, use it; otherwise treat as widget config\n        if (parsedConfig.config) {\n          Object.assign(scriptConfig, parsedConfig);\n        } else {\n          // Treat the entire object as widget config\n          scriptConfig.config = parsedConfig;\n        }\n      } catch (e) {\n        console.error(\"Failed to parse data-config JSON:\", e);\n      }\n    }\n\n    // Client token from data attribute (primary method for client token mode)\n    const token = script.getAttribute('data-travrse-token');\n    if (token) {\n      scriptConfig.clientToken = token;\n    }\n\n    // Optional flow ID\n    const flowId = script.getAttribute('data-flow-id');\n    if (flowId) {\n      scriptConfig.flowId = flowId;\n    }\n\n    // Optional API URL override\n    const apiUrl = script.getAttribute('data-api-url');\n    if (apiUrl) {\n      scriptConfig.apiUrl = apiUrl;\n    }\n\n    return scriptConfig;\n  };\n\n  // Get config from script attributes (must be called synchronously during script execution)\n  const scriptConfig = getConfigFromScript();\n\n  // Merge script attributes with window config (script attributes take precedence)\n  const windowConfig: SiteAgentInstallConfig = window.siteAgentConfig || {};\n  const config: SiteAgentInstallConfig = { ...windowConfig, ...scriptConfig };\n  \n  const version = config.version || \"latest\";\n  const cdn = config.cdn || \"jsdelivr\";\n  const autoInit = config.autoInit !== false; // Default to true\n\n  // Determine CDN base URL\n  const getCdnBase = () => {\n    if (config.cssUrl && config.jsUrl) {\n      return { cssUrl: config.cssUrl, jsUrl: config.jsUrl };\n    }\n    \n    const packageName = \"vanilla-agent\";\n    const basePath = `/npm/${packageName}@${version}/dist`;\n    \n    if (cdn === \"unpkg\") {\n      return {\n        cssUrl: `https://unpkg.com${basePath}/widget.css`,\n        jsUrl: `https://unpkg.com${basePath}/index.global.js`\n      };\n    } else {\n      return {\n        cssUrl: `https://cdn.jsdelivr.net${basePath}/widget.css`,\n        jsUrl: `https://cdn.jsdelivr.net${basePath}/index.global.js`\n      };\n    }\n  };\n\n  const { cssUrl, jsUrl } = getCdnBase();\n\n  // Check if CSS is already loaded\n  const isCssLoaded = () => {\n    return !!document.head.querySelector('link[data-vanilla-agent]') ||\n           !!document.head.querySelector(`link[href*=\"widget.css\"]`);\n  };\n\n  // Check if JS is already loaded\n  const isJsLoaded = () => {\n    return !!(window as any).AgentWidget;\n  };\n\n  /**\n   * Wait for framework hydration to complete (Next.js, Nuxt, etc.)\n   * This prevents the framework from removing dynamically added CSS during reconciliation.\n   * Uses requestIdleCallback + double requestAnimationFrame for reliable detection.\n   */\n  const waitForHydration = (callback: () => void): void => {\n    let executed = false;\n    \n    const execute = () => {\n      if (executed) return;\n      executed = true;\n      callback();\n    };\n\n    const afterDom = () => {\n      // Strategy 1: Use requestIdleCallback if available (best for detecting idle after hydration)\n      if (typeof requestIdleCallback !== 'undefined') {\n        requestIdleCallback(() => {\n          // Double requestAnimationFrame ensures at least one full paint cycle completed\n          requestAnimationFrame(() => {\n            requestAnimationFrame(execute);\n          });\n        }, { timeout: 3000 }); // Max wait 3 seconds, then proceed anyway\n      } else {\n        // Strategy 2: Fallback for Safari (no requestIdleCallback)\n        // 300ms is typically enough for hydration on most pages\n        setTimeout(execute, 300);\n      }\n    };\n\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', afterDom);\n    } else {\n      // DOM already ready, but still wait for potential hydration\n      afterDom();\n    }\n  };\n\n  // Load CSS\n  const loadCSS = (): Promise<void> => {\n    return new Promise((resolve, reject) => {\n      if (isCssLoaded()) {\n        resolve();\n        return;\n      }\n\n      const link = document.createElement(\"link\");\n      link.rel = \"stylesheet\";\n      link.href = cssUrl;\n      link.setAttribute(\"data-vanilla-agent\", \"true\");\n      \n      link.onload = () => resolve();\n      link.onerror = () => reject(new Error(`Failed to load CSS from ${cssUrl}`));\n      document.head.appendChild(link);\n    });\n  };\n\n  // Load JS\n  const loadJS = (): Promise<void> => {\n    return new Promise((resolve, reject) => {\n      if (isJsLoaded()) {\n        resolve();\n        return;\n      }\n\n      const script = document.createElement(\"script\");\n      script.src = jsUrl;\n      script.async = true;\n      script.onload = () => resolve();\n      script.onerror = () => reject(new Error(`Failed to load JS from ${jsUrl}`));\n      document.head.appendChild(script);\n    });\n  };\n\n  // Initialize widget\n  const initWidget = () => {\n    if (!window.AgentWidget || !window.AgentWidget.initAgentWidget) {\n      console.warn(\"AgentWidget not available. Make sure the script loaded successfully.\");\n      return;\n    }\n\n    const target = config.target || \"body\";\n    // Merge top-level config options into widget config\n    const widgetConfig = { ...config.config };\n    \n    // Merge apiUrl from top-level config into widget config if present\n    if (config.apiUrl && !widgetConfig.apiUrl) {\n      widgetConfig.apiUrl = config.apiUrl;\n    }\n    \n    // Merge clientToken from top-level config into widget config if present\n    if (config.clientToken && !widgetConfig.clientToken) {\n      widgetConfig.clientToken = config.clientToken;\n    }\n    \n    // Merge flowId from top-level config into widget config if present\n    if (config.flowId && !widgetConfig.flowId) {\n      widgetConfig.flowId = config.flowId;\n    }\n\n    // Only initialize if we have either apiUrl OR clientToken (or other config)\n    const hasApiConfig = widgetConfig.apiUrl || widgetConfig.clientToken;\n    if (!hasApiConfig && Object.keys(widgetConfig).length === 0) {\n      return;\n    }\n\n    // Auto-apply markdown postprocessor if not explicitly set and available\n    if (!widgetConfig.postprocessMessage && window.AgentWidget.markdownPostprocessor) {\n      widgetConfig.postprocessMessage = ({ text }: { text: string }) => \n        window.AgentWidget.markdownPostprocessor(text);\n    }\n\n    try {\n      window.AgentWidget.initAgentWidget({\n        target,\n        config: widgetConfig,\n        // Explicitly disable shadow DOM for better CSS compatibility with host page\n        useShadowDom: config.useShadowDom ?? false\n      });\n    } catch (error) {\n      console.error(\"Failed to initialize AgentWidget:\", error);\n    }\n  };\n\n  // Main installation flow (called after hydration completes)\n  const install = async () => {\n    try {\n      await loadCSS();\n      await loadJS();\n      \n      // Auto-init if we have config OR apiUrl OR clientToken\n      const shouldAutoInit = autoInit && (\n        config.config || \n        config.apiUrl || \n        config.clientToken\n      );\n      \n      if (shouldAutoInit) {\n        // Wait a tick to ensure AgentWidget is fully initialized\n        setTimeout(initWidget, 0);\n      }\n    } catch (error) {\n      console.error(\"Failed to install AgentWidget:\", error);\n    }\n  };\n\n  // Start installation after hydration completes\n  // This prevents Next.js/Nuxt/etc. from removing dynamically added CSS\n  waitForHydration(install);\n})();\n\n"],"mappings":"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","names":["scriptConfig","script","configJson","parsedConfig","e","token","flowId","apiUrl","config","version","cdn","autoInit","getCdnBase","basePath","cssUrl","jsUrl","isCssLoaded","isJsLoaded","waitForHydration","callback","executed","execute","afterDom","loadCSS","resolve","reject","link","loadJS","initWidget","_a","target","widgetConfig","text","error"]}

package/dist/widget.css

@@ -1,7 +1,3 @@
-:root {
-  color-scheme: light only;
-}
-
 #vanilla-agent-root {
   all: initial;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-agent",
-  "version": "1.24.0",
+  "version": "1.26.0",
   "description": "Themeable, plugable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",

package/src/components/feedback.ts

@@ -375,3 +375,5 @@ export function createNPSFeedback(options: NPSFeedbackOptions): HTMLElement {
   return container;
 }
 
+
+

package/src/defaults.ts

@@ -1,4 +1,82 @@
-import type { AgentWidgetConfig } from "./types";
+import type { AgentWidgetConfig, AgentWidgetTheme } from "./types";
+
+/**
+ * Default light theme colors
+ */
+export const DEFAULT_LIGHT_THEME: AgentWidgetTheme = {
+  primary: "#111827",
+  accent: "#1d4ed8",
+  surface: "#ffffff",
+  muted: "#6b7280",
+  container: "#f8fafc",
+  border: "#f1f5f9",
+  divider: "#f1f5f9",
+  messageBorder: "#f1f5f9",
+  inputBackground: "#ffffff",
+  callToAction: "#000000",
+  callToActionBackground: "#ffffff",
+  sendButtonBackgroundColor: "#111827",
+  sendButtonTextColor: "#ffffff",
+  sendButtonBorderColor: "#60a5fa",
+  closeButtonColor: "#6b7280",
+  closeButtonBackgroundColor: "transparent",
+  closeButtonBorderColor: "",
+  clearChatIconColor: "#6b7280",
+  clearChatBackgroundColor: "transparent",
+  clearChatBorderColor: "transparent",
+  micIconColor: "#111827",
+  micBackgroundColor: "transparent",
+  micBorderColor: "transparent",
+  recordingIconColor: "#ffffff",
+  recordingBackgroundColor: "#ef4444",
+  recordingBorderColor: "transparent",
+  inputFontFamily: "sans-serif",
+  inputFontWeight: "400",
+  radiusSm: "0.75rem",
+  radiusMd: "1rem",
+  radiusLg: "1.5rem",
+  launcherRadius: "9999px",
+  buttonRadius: "9999px",
+};
+
+/**
+ * Default dark theme colors
+ */
+export const DEFAULT_DARK_THEME: AgentWidgetTheme = {
+  primary: "#f9fafb",
+  accent: "#3b82f6",
+  surface: "#1f2937",
+  muted: "#9ca3af",
+  container: "#111827",
+  border: "#374151",
+  divider: "#374151",
+  messageBorder: "#374151",
+  inputBackground: "#111827",
+  callToAction: "#ffffff",
+  callToActionBackground: "#374151",
+  sendButtonBackgroundColor: "#3b82f6",
+  sendButtonTextColor: "#ffffff",
+  sendButtonBorderColor: "#60a5fa",
+  closeButtonColor: "#9ca3af",
+  closeButtonBackgroundColor: "transparent",
+  closeButtonBorderColor: "",
+  clearChatIconColor: "#9ca3af",
+  clearChatBackgroundColor: "transparent",
+  clearChatBorderColor: "transparent",
+  micIconColor: "#f9fafb",
+  micBackgroundColor: "transparent",
+  micBorderColor: "transparent",
+  recordingIconColor: "#ffffff",
+  recordingBackgroundColor: "#ef4444",
+  recordingBorderColor: "transparent",
+  inputFontFamily: "sans-serif",
+  inputFontWeight: "400",
+  radiusSm: "0.75rem",
+  radiusMd: "1rem",
+  radiusLg: "1.5rem",
+  launcherRadius: "9999px",
+  buttonRadius: "9999px",
+};
 
 /**
  * Default widget configuration
@@ -8,41 +86,9 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
   apiUrl: "http://localhost:43111/api/chat/dispatch",
   // Client token mode defaults (optional, only used when clientToken is set)
   clientToken: undefined,
-  theme: {
-    primary: "#111827",
-    accent: "#1d4ed8",
-    surface: "#ffffff",
-    muted: "#6b7280",
-    container: "#f8fafc",
-    border: "#f1f5f9",
-    divider: "#f1f5f9",
-    messageBorder: "#f1f5f9",
-    inputBackground: "#ffffff",
-    callToAction: "#000000",
-    callToActionBackground: "#ffffff",
-    sendButtonBackgroundColor: "#111827",
-    sendButtonTextColor: "#ffffff",
-    sendButtonBorderColor: "#60a5fa",
-    closeButtonColor: "#6b7280",
-    closeButtonBackgroundColor: "transparent",
-    closeButtonBorderColor: "",
-    clearChatIconColor: "#6b7280",
-    clearChatBackgroundColor: "transparent",
-    clearChatBorderColor: "transparent",
-    micIconColor: "#111827",
-    micBackgroundColor: "transparent",
-    micBorderColor: "transparent",
-    recordingIconColor: "#ffffff",
-    recordingBackgroundColor: "#ef4444",
-    recordingBorderColor: "transparent",
-    inputFontFamily: "sans-serif",
-    inputFontWeight: "400",
-    radiusSm: "0.75rem",
-    radiusMd: "1rem",
-    radiusLg: "1.5rem",
-    launcherRadius: "9999px",
-    buttonRadius: "9999px",
-  },
+  theme: DEFAULT_LIGHT_THEME,
+  darkTheme: DEFAULT_DARK_THEME,
+  colorScheme: "light",
   launcher: {
     enabled: true,
     title: "Chat Assistant",
@@ -198,6 +244,10 @@ export function mergeWithDefaults(
       ...DEFAULT_WIDGET_CONFIG.theme,
       ...config.theme,
     },
+    darkTheme: {
+      ...DEFAULT_WIDGET_CONFIG.darkTheme,
+      ...config.darkTheme,
+    },
     launcher: {
       ...DEFAULT_WIDGET_CONFIG.launcher,
       ...config.launcher,

package/src/index.ts

@@ -105,7 +105,12 @@ export {
 } from "./utils/component-middleware";
 
 // Default configuration exports
-export { DEFAULT_WIDGET_CONFIG, mergeWithDefaults } from "./defaults";
+export {
+  DEFAULT_WIDGET_CONFIG,
+  DEFAULT_LIGHT_THEME,
+  DEFAULT_DARK_THEME,
+  mergeWithDefaults
+} from "./defaults";
 
 // Layout system exports
 export {

package/src/install.ts

@@ -16,6 +16,8 @@ interface SiteAgentInstallConfig {
   clientToken?: string;
   flowId?: string;
   apiUrl?: string;
+  // Shadow DOM option (defaults to false for better CSS compatibility)
+  useShadowDom?: boolean;
 }
 
 declare global {
@@ -36,7 +38,7 @@ declare global {
 
   /**
    * Read configuration from data attributes on the current script tag.
-   * Supports: data-travrse-token, data-flow-id, data-api-url
+   * Supports: data-config (JSON), data-travrse-token, data-flow-id, data-api-url
    */
   const getConfigFromScript = (): Partial<SiteAgentInstallConfig> => {
     // Try to get the current script element
@@ -45,6 +47,23 @@ declare global {
 
     const scriptConfig: Partial<SiteAgentInstallConfig> = {};
 
+    // Full config from data-config attribute (JSON string)
+    const configJson = script.getAttribute('data-config');
+    if (configJson) {
+      try {
+        const parsedConfig = JSON.parse(configJson);
+        // If it has nested 'config' property, use it; otherwise treat as widget config
+        if (parsedConfig.config) {
+          Object.assign(scriptConfig, parsedConfig);
+        } else {
+          // Treat the entire object as widget config
+          scriptConfig.config = parsedConfig;
+        }
+      } catch (e) {
+        console.error("Failed to parse data-config JSON:", e);
+      }
+    }
+
     // Client token from data attribute (primary method for client token mode)
     const token = script.getAttribute('data-travrse-token');
     if (token) {
@@ -112,6 +131,44 @@ declare global {
     return !!(window as any).AgentWidget;
   };
 
+  /**
+   * Wait for framework hydration to complete (Next.js, Nuxt, etc.)
+   * This prevents the framework from removing dynamically added CSS during reconciliation.
+   * Uses requestIdleCallback + double requestAnimationFrame for reliable detection.
+   */
+  const waitForHydration = (callback: () => void): void => {
+    let executed = false;
+    
+    const execute = () => {
+      if (executed) return;
+      executed = true;
+      callback();
+    };
+
+    const afterDom = () => {
+      // Strategy 1: Use requestIdleCallback if available (best for detecting idle after hydration)
+      if (typeof requestIdleCallback !== 'undefined') {
+        requestIdleCallback(() => {
+          // Double requestAnimationFrame ensures at least one full paint cycle completed
+          requestAnimationFrame(() => {
+            requestAnimationFrame(execute);
+          });
+        }, { timeout: 3000 }); // Max wait 3 seconds, then proceed anyway
+      } else {
+        // Strategy 2: Fallback for Safari (no requestIdleCallback)
+        // 300ms is typically enough for hydration on most pages
+        setTimeout(execute, 300);
+      }
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', afterDom);
+    } else {
+      // DOM already ready, but still wait for potential hydration
+      afterDom();
+    }
+  };
+
   // Load CSS
   const loadCSS = (): Promise<void> => {
     return new Promise((resolve, reject) => {
@@ -124,6 +181,7 @@ declare global {
       link.rel = "stylesheet";
       link.href = cssUrl;
       link.setAttribute("data-vanilla-agent", "true");
+      
       link.onload = () => resolve();
       link.onerror = () => reject(new Error(`Failed to load CSS from ${cssUrl}`));
       document.head.appendChild(link);
@@ -179,17 +237,25 @@ declare global {
       return;
     }
 
+    // Auto-apply markdown postprocessor if not explicitly set and available
+    if (!widgetConfig.postprocessMessage && window.AgentWidget.markdownPostprocessor) {
+      widgetConfig.postprocessMessage = ({ text }: { text: string }) => 
+        window.AgentWidget.markdownPostprocessor(text);
+    }
+
     try {
       window.AgentWidget.initAgentWidget({
         target,
-        config: widgetConfig
+        config: widgetConfig,
+        // Explicitly disable shadow DOM for better CSS compatibility with host page
+        useShadowDom: config.useShadowDom ?? false
       });
     } catch (error) {
       console.error("Failed to initialize AgentWidget:", error);
     }
   };
 
-  // Main installation flow
+  // Main installation flow (called after hydration completes)
   const install = async () => {
     try {
       await loadCSS();
@@ -211,11 +277,8 @@ declare global {
     }
   };
 
-  // Start installation
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", install);
-  } else {
-    install();
-  }
+  // Start installation after hydration completes
+  // This prevents Next.js/Nuxt/etc. from removing dynamically added CSS
+  waitForHydration(install);
 })();
 

package/src/styles/widget.css

@@ -1,7 +1,3 @@
-:root {
-  color-scheme: light only;
-}
-
 #vanilla-agent-root {
   all: initial;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;

package/src/types.ts

@@ -1124,6 +1124,34 @@ export type AgentWidgetConfig = {
     sendButtonLabel?: string;
   };
   theme?: AgentWidgetTheme;
+  /**
+   * Theme colors for dark mode. Applied when dark mode is detected
+   * (when colorScheme is 'dark' or 'auto' with dark mode active).
+   * If not provided, falls back to `theme` colors.
+   * 
+   * @example
+   * ```typescript
+   * config: {
+   *   theme: { primary: '#111827', surface: '#ffffff' },
+   *   darkTheme: { primary: '#f9fafb', surface: '#1f2937' },
+   *   colorScheme: 'auto'
+   * }
+   * ```
+   */
+  darkTheme?: AgentWidgetTheme;
+  /**
+   * Color scheme mode for the widget.
+   * - 'light': Always use light theme (default)
+   * - 'dark': Always use dark theme
+   * - 'auto': Automatically detect from page (HTML class or prefers-color-scheme)
+   * 
+   * When 'auto', detection order:
+   * 1. Check if `<html>` has 'dark' class
+   * 2. Fall back to `prefers-color-scheme: dark` media query
+   * 
+   * @default 'light'
+   */
+  colorScheme?: 'auto' | 'light' | 'dark';
   features?: AgentWidgetFeatureFlags;
   launcher?: AgentWidgetLauncherConfig;
   initialMessages?: AgentWidgetMessage[];

package/src/ui.ts

@@ -14,7 +14,7 @@ import {
   SlotRenderer,
   AgentWidgetMessageFeedback
 } from "./types";
-import { applyThemeVariables } from "./utils/theme";
+import { applyThemeVariables, createThemeObserver } from "./utils/theme";
 import { renderLucideIcon } from "./utils/icons";
 import { createElement } from "./utils/dom";
 import { statusCopy } from "./utils/constants";
@@ -642,6 +642,31 @@ export const createAgentExperience = (
   applyThemeVariables(mount, config);
 
   const destroyCallbacks: Array<() => void> = [];
+
+  // Set up theme observer for auto color scheme detection
+  let cleanupThemeObserver: (() => void) | null = null;
+  const setupThemeObserver = () => {
+    // Clean up existing observer if any
+    if (cleanupThemeObserver) {
+      cleanupThemeObserver();
+      cleanupThemeObserver = null;
+    }
+    // Set up new observer if colorScheme is 'auto'
+    if (config.colorScheme === 'auto') {
+      cleanupThemeObserver = createThemeObserver(() => {
+        // Re-apply theme when color scheme changes
+        applyThemeVariables(mount, config);
+      });
+    }
+  };
+  setupThemeObserver();
+  destroyCallbacks.push(() => {
+    if (cleanupThemeObserver) {
+      cleanupThemeObserver();
+      cleanupThemeObserver = null;
+    }
+  });
+
   const suggestionsManager = createSuggestions(suggestions);
   let closeHandler: (() => void) | null = null;
   let session: AgentWidgetSession;
@@ -1811,11 +1836,17 @@ export const createAgentExperience = (
   const controller: Controller = {
     update(nextConfig: AgentWidgetConfig) {
       const previousToolCallConfig = config.toolCall;
+      const previousColorScheme = config.colorScheme;
       config = { ...config, ...nextConfig };
       // applyFullHeightStyles resets mount.style.cssText, so call it before applyThemeVariables
       applyFullHeightStyles();
       applyThemeVariables(mount, config);
 
+      // Re-setup theme observer if colorScheme changed
+      if (config.colorScheme !== previousColorScheme) {
+        setupThemeObserver();
+      }
+
       // Update plugins
       const newPlugins = pluginRegistry.getForInstance(config.plugins);
       plugins.length = 0;