vanilla-agent 1.26.0 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-agent",
-  "version": "1.26.0",
+  "version": "1.28.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/utils/code-generators.ts

@@ -1329,14 +1329,48 @@ function generateScriptAdvancedCode(config: any): string {
     "    });",
     "  };",
     "",
-    "  // Boot sequence: load CSS, then JS, then initialize",
-    "  loadCSS();",
-    "  loadJS(function() {",
+    "  // Wait for framework hydration to complete (Next.js, Nuxt, etc.)",
+    "  // This prevents the framework from removing dynamically added CSS during reconciliation",
+    "  var waitForHydration = function(callback) {",
+    "    var executed = false;",
+    "    ",
+    "    var execute = function() {",
+    "      if (executed) return;",
+    "      executed = true;",
+    "      callback();",
+    "    };",
+    "",
+    "    var afterDom = function() {",
+    "      // Strategy 1: Use requestIdleCallback if available (best for detecting idle after hydration)",
+    "      if (typeof requestIdleCallback !== 'undefined') {",
+    "        requestIdleCallback(function() {",
+    "          // Double requestAnimationFrame ensures at least one full paint cycle completed",
+    "          requestAnimationFrame(function() {",
+    "            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', init);",
+    "      document.addEventListener('DOMContentLoaded', afterDom);",
     "    } else {",
-    "      init();",
+    "      // DOM already ready, but still wait for potential hydration",
+    "      afterDom();",
     "    }",
+    "  };",
+    "",
+    "  // Boot sequence: wait for hydration, then load CSS and JS, then initialize",
+    "  // This prevents Next.js/Nuxt/etc. from removing dynamically added CSS during reconciliation",
+    "  waitForHydration(function() {",
+    "    loadCSS();",
+    "    loadJS(function() {",
+    "      init();",
+    "    });",
     "  });",
     "})();",
     "</script>"