@returningai/widget-sdk 1.4.1 → 1.4.2

package/dist/rai-widget.js

@@ -10827,6 +10827,11 @@ const DEFINED_ATTRS = /* @__PURE__ */ new Set([
   "accent",
   "font"
 ]);
+function isUserIdentifierAttribute(name) {
+  const normalized = name.toLowerCase();
+  if (!normalized.startsWith("data-")) return false;
+  return !DEFINED_ATTRS.has(normalized.slice(5));
+}
 const WIDGET_GLOBALS = {
   store: "RaiStoreWidget",
   channel: "RaiChannelWidget",
@@ -11094,15 +11099,20 @@ class BaseWidget extends HTMLElement {
     __publicField(this, "intersectionObserver");
     // #3
     __publicField(this, "themeObserver");
-    __publicField(this, "authAttributeObserver");
+    __publicField(this, "identityAttributeObserver");
     __publicField(this, "identitySignature", "");
+    __publicField(this, "hasAttemptedInit", false);
+    __publicField(this, "initGeneration", 0);
     __publicField(this, "lottieInstances", []);
     this.shadow = this.attachShadow({ mode: "closed" });
   }
+  static get observedAttributes() {
+    return ["embed-token", "data-embed-token"];
+  }
   connectedCallback() {
     this.config = readConfig(this, void 0);
     this.identitySignature = identitySignatureForConfig(this.config);
-    this.setupAuthAttributeObserver();
+    this.setupIdentityAttributeObserver();
     const style = document.createElement("style");
     style.textContent = widgetCSS;
     this.shadow.appendChild(style);
@@ -11135,32 +11145,45 @@ class BaseWidget extends HTMLElement {
     var _a, _b, _c;
     (_a = this.intersectionObserver) == null ? void 0 : _a.disconnect();
     (_b = this.themeObserver) == null ? void 0 : _b.disconnect();
-    (_c = this.authAttributeObserver) == null ? void 0 : _c.disconnect();
-    if (this.cleanupListener) this.cleanupListener();
+    (_c = this.identityAttributeObserver) == null ? void 0 : _c.disconnect();
+    this.teardownMountedWidget();
     this.clearLottieInstances();
     clearState(this.state);
   }
-  setupAuthAttributeObserver() {
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name !== "embed-token" && name !== "data-embed-token") return;
+    this.handleIdentityConfigChange();
+  }
+  setupIdentityAttributeObserver() {
     var _a;
-    (_a = this.authAttributeObserver) == null ? void 0 : _a.disconnect();
-    this.authAttributeObserver = new MutationObserver(() => {
-      var _a2;
-      const nextConfig = readConfig(this, (_a2 = this.config) == null ? void 0 : _a2.communityId);
-      const nextIdentitySignature = identitySignatureForConfig(nextConfig);
-      if (nextIdentitySignature === this.identitySignature) {
-        this.config = nextConfig;
-        return;
-      }
-      const previousConfig = this.config;
-      this.config = nextConfig;
-      this.identitySignature = nextIdentitySignature;
-      clearStorage(previousConfig);
-      clearStorage(this.config);
-      if (this.state.isAuthenticated || this.state.accessToken || this.state.refreshToken || this.state.iframe) {
-        void this.reload();
+    (_a = this.identityAttributeObserver) == null ? void 0 : _a.disconnect();
+    this.identityAttributeObserver = new MutationObserver((mutations) => {
+      const hasIdentityAttributeChange = mutations.some(
+        (mutation) => mutation.type === "attributes" && !!mutation.attributeName && isUserIdentifierAttribute(mutation.attributeName)
+      );
+      if (hasIdentityAttributeChange) {
+        this.handleIdentityConfigChange();
       }
     });
-    this.authAttributeObserver.observe(this, { attributes: true });
+    this.identityAttributeObserver.observe(this, { attributes: true });
+  }
+  handleIdentityConfigChange() {
+    if (!this.isConnected || !this.config) return;
+    const nextConfig = readConfig(this, this.config.communityId);
+    const nextIdentitySignature = identitySignatureForConfig(nextConfig);
+    if (nextIdentitySignature === this.identitySignature) {
+      this.config = nextConfig;
+      return;
+    }
+    const previousConfig = this.config;
+    this.config = nextConfig;
+    this.identitySignature = nextIdentitySignature;
+    clearStorage(previousConfig);
+    clearStorage(this.config);
+    if (this.hasAttemptedInit) {
+      void this.reload();
+    }
   }
   // ── DOM event helper (#1) ─────────────────────────────────────────────
   emit(type, detail) {
@@ -11473,12 +11496,19 @@ class BaseWidget extends HTMLElement {
   }
   // ── Initialization ─────────────────────────────────────────────────────
   async init() {
+    const initId = ++this.initGeneration;
+    this.hasAttemptedInit = true;
     if (!this.config.communityId) {
       this.showError();
       return;
     }
     await fetchErrorSettings(this.config, this.state);
+    if (!this.isCurrentInit(initId)) return;
     const launchWidget = () => {
+      var _a;
+      if (!this.isCurrentInit(initId)) return;
+      (_a = this.errorEl) == null ? void 0 : _a.classList.remove("visible");
+      this.shadow.querySelectorAll(".rai-custom-error").forEach((el) => el.remove());
       if (this.config.bundleUrl) {
         this.mountWidget();
       } else {
@@ -11491,6 +11521,7 @@ class BaseWidget extends HTMLElement {
         this.state,
         () => this.scheduleRefresh()
       );
+      if (!this.isCurrentInit(initId)) return;
       if (authed2) {
         this.emit("rai-authenticated");
         launchWidget();
@@ -11507,6 +11538,7 @@ class BaseWidget extends HTMLElement {
         this.state,
         () => this.scheduleRefresh()
       );
+      if (!this.isCurrentInit(initId)) return;
       if (authed2) {
         this.emit("rai-authenticated");
         launchWidget();
@@ -11522,6 +11554,7 @@ class BaseWidget extends HTMLElement {
         this.state,
         () => this.scheduleRefresh()
       );
+      if (!this.isCurrentInit(initId)) return;
       if (!refreshed) {
         this.showError();
         return;
@@ -11536,6 +11569,7 @@ class BaseWidget extends HTMLElement {
       this.state,
       () => this.scheduleRefresh()
     );
+    if (!this.isCurrentInit(initId)) return;
     if (authed) {
       this.emit("rai-authenticated");
       launchWidget();
@@ -11543,7 +11577,26 @@ class BaseWidget extends HTMLElement {
       this.showError();
     }
   }
+  isCurrentInit(initId) {
+    return this.isConnected && initId === this.initGeneration;
+  }
+  teardownMountedWidget() {
+    if (this.cleanupListener) {
+      this.cleanupListener();
+      this.cleanupListener = void 0;
+    }
+    if (this.state.syncTimer) {
+      clearInterval(this.state.syncTimer);
+      this.state.syncTimer = null;
+    }
+    this.state.iframe = null;
+    this.shadow.querySelectorAll("iframe").forEach((el) => el.remove());
+    this.querySelectorAll('[data-rai-widget-root="true"]').forEach(
+      (el) => el.remove()
+    );
+  }
   createIframe() {
+    this.teardownMountedWidget();
     const iframe = document.createElement("iframe");
     iframe.src = this.buildWidgetUrl(this.config);
     iframe.allow = "clipboard-write";
@@ -11581,6 +11634,7 @@ class BaseWidget extends HTMLElement {
   // ── Bundle mode (no-iframe) ──────────────────────────────────────────
   async mountWidget() {
     try {
+      this.teardownMountedWidget();
       const bundleApiUrl = this.config.v2ApiUrl || resolveV2ApiUrl(this.config.domainKey);
       const w = window;
       if (!w.DomainKey) {
@@ -11697,7 +11751,7 @@ class BaseWidget extends HTMLElement {
   // ── Logout helper ─────────────────────────────────────────────────────
   async logoutAndClear() {
     await logout(this.config, this.state);
-    this.shadow.querySelectorAll("iframe").forEach((el) => el.remove());
+    this.teardownMountedWidget();
     this.emit("rai-logout");
   }
   // ── Public API ────────────────────────────────────────────────────────
@@ -11710,8 +11764,8 @@ class BaseWidget extends HTMLElement {
     this.style.height = this.config.height;
     clearStorage(previousConfig);
     clearStorage(this.config);
+    this.teardownMountedWidget();
     clearState(this.state);
-    this.shadow.querySelectorAll("iframe").forEach((el) => el.remove());
     await this.init();
   }
   async logoutPublic() {
@@ -11832,7 +11886,7 @@ class CustomWidget extends BaseWidget {
     }
   }
 }
-console.log(`[rai-widget] v${"1.4.1"}`);
+console.log(`[rai-widget] v${"1.4.2"}`);
 class StoreWidgetCompat extends StoreWidget {
 }
 const WIDGET_REGISTRY = [
@@ -11896,7 +11950,7 @@ function exposePublicApi() {
   })();
   const widget = container == null ? void 0 : container.querySelector(ALL_WIDGET_SELECTOR);
   window.ReturningAIWidget = {
-    version: "1.4.1",
+    version: "1.4.2",
     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

@@ -1,6 +1,7 @@
 import type { WidgetConfig } from "./types";
 export declare function readConfig(el: Element, existingId?: string): WidgetConfig;
 export declare abstract class BaseWidget extends HTMLElement {
+    static get observedAttributes(): string[];
     protected shadow: ShadowRoot;
     protected config: WidgetConfig;
     private state;
@@ -10,14 +11,18 @@ export declare abstract class BaseWidget extends HTMLElement {
     private cleanupListener?;
     private intersectionObserver?;
     private themeObserver?;
-    private authAttributeObserver?;
+    private identityAttributeObserver?;
     private identitySignature;
+    private hasAttemptedInit;
+    private initGeneration;
     private lottieInstances;
     constructor();
     protected abstract buildWidgetUrl(config: WidgetConfig): string;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private setupAuthAttributeObserver;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private setupIdentityAttributeObserver;
+    private handleIdentityConfigChange;
     private emit;
     /**
      * Apply widget-defined CSS colors before first paint so the loader uses
@@ -80,6 +85,8 @@ export declare abstract class BaseWidget extends HTMLElement {
     private showError;
     private renderCustomError;
     private init;
+    private isCurrentInit;
+    private teardownMountedWidget;
     private createIframe;
     private mountWidget;
     private scheduleRefresh;

package/package.json

@@ -1,35 +1,35 @@
-{
-  "name": "@returningai/widget-sdk",
-  "version": "1.4.1",
-  "description": "Shadow DOM isolated widget SDK for ReturningAI",
-  "main": "dist/rai-widget.iife.js",
-  "module": "dist/rai-widget.js",
-  "types": "dist/types/index.d.ts",
-  "sideEffects": true,
-  "exports": {
-    ".": {
-      "import": "./dist/rai-widget.js",
-      "default": "./dist/rai-widget.iife.js"
-    }
-  },
-  "files": [
-    "dist",
-    "CHANGELOG.md",
-    "README.md"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "build:min": "vite build --mode production",
-    "types": "tsc --emitDeclarationOnly --outDir dist/types",
-    "prepublishOnly": "npm run build:min && npm run types"
-  },
-  "devDependencies": {
-    "terser": "^5.46.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.0"
-  },
-  "dependencies": {
-    "lottie-web": "^5.13.0"
-  }
-}
+{
+  "name": "@returningai/widget-sdk",
+  "version": "1.4.2",
+  "description": "Shadow DOM isolated widget SDK for ReturningAI",
+  "main": "dist/rai-widget.iife.js",
+  "module": "dist/rai-widget.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": true,
+  "exports": {
+    ".": {
+      "import": "./dist/rai-widget.js",
+      "default": "./dist/rai-widget.iife.js"
+    }
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:min": "vite build --mode production",
+    "types": "tsc --emitDeclarationOnly --outDir dist/types",
+    "prepublishOnly": "npm run build:min && npm run types"
+  },
+  "devDependencies": {
+    "terser": "^5.46.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.0"
+  },
+  "dependencies": {
+    "lottie-web": "^5.13.0"
+  }
+}