@returningai/widget-sdk 1.8.12 → 1.8.13

package/dist/rai-widget.js

@@ -14304,6 +14304,8 @@ class BaseWidget extends HTMLElement {
     return [
       "embed-token",
       "data-embed-token",
+      "theme",
+      "data-theme",
       "language",
       "data-language",
       "locale",
@@ -14326,16 +14328,8 @@ class BaseWidget extends HTMLElement {
     const style = document.createElement("style");
     style.textContent = widgetCSS;
     this.shadow.appendChild(style);
-    const theme = this.config.theme;
-    const accentColor = theme === "dark" ? "#ffffff" : "#000000";
-    const text4Color = theme === "dark" ? "#9ca3af" : "#6b7280";
-    const bgColor = theme === "dark" ? "#1a1a1a" : "#ffffff";
     this.style.width = this.config.width;
     this.style.height = this.config.height;
-    this.style.setProperty("--rai-accent", accentColor);
-    this.style.setProperty("--rai-text4", text4Color);
-    this.style.setProperty("--rai-loader-bg", bgColor);
-    this.style.setProperty("--rai-error-bg", bgColor);
     this.applyFirstPaintColors();
     this.renderShell();
     if (this.hasAttribute("eager")) {
@@ -14378,6 +14372,8 @@ class BaseWidget extends HTMLElement {
         void this.reload();
       } else {
         this.config = readConfig(this, this.config.communityId);
+        this.applyFirstPaintColors();
+        this.renderLoaderAnimation();
       }
     }
   }
@@ -14453,6 +14449,17 @@ class BaseWidget extends HTMLElement {
       }
     }
     const theme = this.config.theme === "dark" ? "dark" : "light";
+    this.style.setProperty(
+      "--rai-accent",
+      theme === "dark" ? "#ffffff" : "#000000"
+    );
+    this.style.setProperty(
+      "--rai-text4",
+      theme === "dark" ? "#9ca3af" : "#6b7280"
+    );
+    const bgColor = theme === "dark" ? "#1a1a1a" : "#ffffff";
+    this.style.setProperty("--rai-loader-bg", bgColor);
+    this.style.setProperty("--rai-error-bg", bgColor);
     const cachedPalette = (_a = cached == null ? void 0 : cached.themePalette) == null ? void 0 : _a[theme];
     if (cachedPalette) this.applyPalette(cachedPalette);
     const cachedFont = typeof (cached == null ? void 0 : cached.font) === "string" ? cached.font : void 0;
@@ -14536,19 +14543,7 @@ class BaseWidget extends HTMLElement {
     }
   }
   renderShell() {
-    this.loaderEl = document.createElement("div");
-    this.loaderEl.className = "rai-loader";
-    if (this.config.widgetType === "custom" && !loadErrorSettingsFromStorage(this.config)) {
-      this.loaderEl.classList.add("rai-loader-pending-settings");
-    }
-    const textEl = document.createElement("h1");
-    textEl.className = "rai-loader-text";
-    textEl.textContent = this.config.loadingText;
-    this.loaderEl.appendChild(textEl);
-    this.shadow.appendChild(this.loaderEl);
-    this.freezeIframeLoaderHeight();
-    this.applyLoadingSettings();
-    this.fetchAndRenderLoader();
+    this.showLoader();
     this.errorEl = document.createElement("div");
     this.errorEl.className = "rai-error";
     this.msgEl = document.createElement("span");
@@ -14563,6 +14558,26 @@ class BaseWidget extends HTMLElement {
     this.errorEl.appendChild(btn);
     this.shadow.appendChild(this.errorEl);
   }
+  showLoader() {
+    var _a;
+    this.clearLottieInstances();
+    this.shadow.querySelectorAll(".rai-loader").forEach((el2) => el2.remove());
+    (_a = this.errorEl) == null ? void 0 : _a.classList.remove("visible");
+    this.shadow.querySelectorAll(".rai-custom-error").forEach((el2) => el2.remove());
+    this.loaderEl = document.createElement("div");
+    this.loaderEl.className = "rai-loader";
+    if (this.config.widgetType === "custom" && !loadErrorSettingsFromStorage(this.config)) {
+      this.loaderEl.classList.add("rai-loader-pending-settings");
+    }
+    const textEl = document.createElement("h1");
+    textEl.className = "rai-loader-text";
+    textEl.textContent = this.config.loadingText;
+    this.loaderEl.appendChild(textEl);
+    this.shadow.appendChild(this.loaderEl);
+    this.freezeIframeLoaderHeight();
+    this.applyLoadingSettings();
+    void this.fetchAndRenderLoader();
+  }
   /**
    * Loads the community loading animation + theme palette from cache or API
    * and renders the configured animation above the loading text.
@@ -14573,6 +14588,7 @@ class BaseWidget extends HTMLElement {
    */
   async fetchAndRenderLoader() {
     var _a;
+    const loaderEl = this.loaderEl;
     const cached = loadErrorSettingsFromStorage(this.config);
     if (cached) {
       applyErrorSettingsToState(this.state, cached);
@@ -14584,8 +14600,7 @@ class BaseWidget extends HTMLElement {
       await fetchErrorSettings(this.config, this.state);
     } catch {
     }
-    const loaderEl = this.loaderEl;
-    if (!loaderEl) return;
+    if (!loaderEl || loaderEl !== this.loaderEl || !this.isConnected) return;
     if (!this.config.themeExplicit && (this.state.defaultColorSchema === "light" || this.state.defaultColorSchema === "dark") && this.state.defaultColorSchema !== this.config.theme) {
       this.config.theme = this.state.defaultColorSchema;
     }
@@ -14690,7 +14705,7 @@ class BaseWidget extends HTMLElement {
     setTimeout(() => {
       loader.remove();
       lottieInstances.forEach((instance) => instance.destroy());
-      this.restoreLoaderHeight();
+      if (!this.loaderEl) this.restoreLoaderHeight();
     }, 300);
     this.loaderEl = null;
   }
@@ -15436,6 +15451,8 @@ class BaseWidget extends HTMLElement {
     this.teardownMountedWidget();
     this.removeBanner();
     clearState(this.state);
+    this.applyFirstPaintColors();
+    this.showLoader();
     await this.init();
   }
   async logoutPublic() {
@@ -15571,7 +15588,7 @@ class CustomWidget extends BaseWidget {
     }
   }
 }
-console.log(`[rai-widget] v${"1.8.12"}`);
+console.log(`[rai-widget] v${"1.8.13"}`);
 class StoreWidgetCompat extends StoreWidget {
 }
 const WIDGET_REGISTRY = [
@@ -15635,7 +15652,7 @@ function exposePublicApi() {
   })();
   const widget = container == null ? void 0 : container.querySelector(ALL_WIDGET_SELECTOR);
   window.ReturningAIWidget = {
-    version: "1.8.12",
+    version: "1.8.13",
     reload: () => (widget == null ? void 0 : widget.reload()) ?? Promise.resolve(),
     logout: () => (widget == null ? void 0 : widget.logoutPublic()) ?? Promise.resolve(),
     isAuthenticated: () => (widget == null ? void 0 : widget.isAuthenticated()) ?? false,

package/dist/types/BaseWidget.d.ts

@@ -59,6 +59,7 @@ export declare abstract class BaseWidget extends HTMLElement {
     private applyPalette;
     private applyLoadingSettings;
     private renderShell;
+    private showLoader;
     /**
      * Loads the community loading animation + theme palette from cache or API
      * and renders the configured animation above the loading text.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@returningai/widget-sdk",
-  "version": "1.8.12",
+  "version": "1.8.13",
   "description": "Shadow DOM isolated widget SDK for ReturningAI",
   "main": "dist/rai-widget.iife.js",
   "module": "dist/rai-widget.js",
@@ -42,7 +42,7 @@
     "build:all": "npm run build && npm run build:banner",
     "build:all:min": "npm run build:min && npm run build:banner:min",
     "types": "tsc --emitDeclarationOnly --outDir dist/types && cp src/jsx.d.ts src/react18.d.ts src/react19.d.ts dist/types/",
-    "test": "npm run test:host-callback && npm run test:bundle-readiness && npm run test:bundle-runtime-cache && npm run test:bundle-token-sync && npm run test:auth-bootstrap && npm run test:auth-error-reporting && npm run test:auth-refresh-state && npm run test:auth-renewal-recovery && npm run test:auth-session-coordinator && npm run test:startup-performance && npm run test:widget-error-presentation && npm run test:fonts && npm run test:jsx-types",
+    "test": "npm run test:host-callback && npm run test:bundle-readiness && npm run test:bundle-runtime-cache && npm run test:bundle-token-sync && npm run test:auth-bootstrap && npm run test:auth-error-reporting && npm run test:auth-refresh-state && npm run test:auth-renewal-recovery && npm run test:auth-session-coordinator && npm run test:startup-performance && npm run test:widget-error-presentation && npm run test:fonts && npm run test:jsx-types && npm run test:loader-lifecycle",
     "test:host-callback": "rm -rf test/.tmp && tsc -p test/tsconfig.json && node test/.tmp/test/postmessage-host-callback.test.js",
     "test:bundle-readiness": "rm -rf test/.tmp && tsc -p test/tsconfig.json && node test/.tmp/test/bundle-readiness.test.js",
     "test:bundle-runtime-cache": "rm -rf test/.tmp && tsc -p test/tsconfig.json && node test/.tmp/test/bundle-runtime-cache.test.js",
@@ -59,7 +59,8 @@
     "coverage:repowise": "rm -rf coverage && npm run coverage:host-callback && npm run coverage:bundle-readiness && npm run test:jsx-types",
     "coverage:host-callback": "rm -rf test/.tmp && tsc -p test/tsconfig.json && c8 --reporter=lcov --reports-dir=coverage/host-callback --exclude-after-remap --exclude='**/*.test.ts' node test/.tmp/test/postmessage-host-callback.test.js && node scripts/name-lcov-test.mjs coverage/host-callback/lcov.info test/postmessage-host-callback.test.ts",
     "coverage:bundle-readiness": "rm -rf test/.tmp && tsc -p test/tsconfig.json && c8 --reporter=lcov --reports-dir=coverage/bundle-readiness --exclude-after-remap --exclude='**/*.test.ts' node test/.tmp/test/bundle-readiness.test.js && node scripts/name-lcov-test.mjs coverage/bundle-readiness/lcov.info test/bundle-readiness.test.ts",
-    "prepublishOnly": "npm run build:all:min && npm run types"
+    "prepublishOnly": "npm run build:all:min && npm run types",
+    "test:loader-lifecycle": "node --test test/loader-lifecycle.test.mjs"
   },
   "devDependencies": {
     "@types/react": "^19.1.10",