embeddedaichatux 2.2.1 → 2.3.0

package/EmbeddedChat.js

@@ -1,4 +1,4 @@
-class EmbeddedChat {
+class EmbeddedChat {
     static instanceCounter = 0;
 
     constructor(containerDiv, chatId, options) {
@@ -7,6 +7,9 @@
 
         if (!containerDiv) {
             containerDiv = this.createChatContainer();
+            this.createdContainer = true;
+        } else {
+            this.createdContainer = false;
         }
         this.containerDiv = containerDiv;
         this.chatId = chatId;
@@ -55,6 +58,13 @@
         this.init();
     }
 
+    queueDOMUpdate(fn) {
+        requestAnimationFrame(() => {
+            if (this.isDestroyed) return;
+            fn();
+        });
+    }
+
     isSafari() {
         const ua = navigator.userAgent.toLowerCase();
         return ua.indexOf('safari') != -1 && ua.indexOf('chrome') == -1;
@@ -92,6 +102,8 @@
     }
 
     async updateIframes() {
+        if (this.isDestroyed) return;
+
         const cleanedServerUrl = this.serverUrl.endsWith('/')
             ? this.serverUrl.slice(0, -1)
             : this.serverUrl;
@@ -153,11 +165,13 @@
         if (this.iframe) {
             await this.waitForIframeLoad(this.iframe);
         }
+        if (this.isDestroyed) return;
 
         this.addIframeEventListeners();
 
         // Send auth to iframes after load
         await this.postAuthToIframes();
+        if (this.isDestroyed) return;
 
         // Restore ContactForm logic
         if (this.mode === 'ContactForm' || this.mode === 'PartnerOffers') {
@@ -187,32 +201,34 @@
     addWindowEventListeners() {
         if (this.windowListenersAdded) return;
 
-        window.addEventListener("message", (e) => {
-            if (this.targetOrigin !== "*" && e.origin !== this.targetOrigin) return;
-            this.handleMessage(e);
-        });
-
-        window.addEventListener("scroll", () => {
-            if (this.minimizeOnScroll && !this.mouseInsideChat) {
-                this.minimizeOnScrollAction();
-            }
-        });
+        this.listeners = [
+            { type: "message", fn: (e) => {
+                if (this.targetOrigin !== "*" && e.origin !== this.targetOrigin) return;
+                this.handleMessage(e);
+            }},
+            { type: "scroll", fn: () => {
+                if (this.minimizeOnScroll && !this.mouseInsideChat) {
+                    this.queueDOMUpdate(() => this.minimizeOnScrollAction());
+                }
+            }},
+            { type: "resize", fn: () => this.queueDOMUpdate(() => this.postResizeMessage()) }
+        ];
 
-        const handleResizeTrigger = () => {
-            this.postResizeMessage();
-        };
+        this.listeners.forEach(l => window.addEventListener(l.type, l.fn));
 
+        const loadFn = () => this.queueDOMUpdate(() => this.postResizeMessage());
         if (document.readyState === 'complete') {
-            handleResizeTrigger();
+            loadFn();
         } else {
-            window.addEventListener("load", handleResizeTrigger);
+            this.listeners.push({ type: "load", fn: loadFn });
+            window.addEventListener("load", loadFn);
         }
 
-        window.addEventListener("resize", handleResizeTrigger);
         this.windowListenersAdded = true;
     }
 
     postResizeMessage() {
+        if (this.isDestroyed) return;
         if (this.iframe?.contentWindow) {
             this.iframe.contentWindow.postMessage({
                 message: "resize",
@@ -262,37 +278,36 @@
         if (msg === "updateMinimizedSize") {
             const h = data.minimizedHeight || data.height;
             const w = data.minimizedWidth || data.width;
-            this.updateMinimizedSize(h, w);
+            this.queueDOMUpdate(() => this.updateMinimizedSize(h, w));
             return;
         }
 
         if (msg === "collapseMinimalInput") {
-            if (this.minimizedIframe) {
-                this.minimizedIframe.style.width = '80px';
-                this.minimizedIframe.style.height = '80px';
-                this.minimizedIframe.style.left = 'auto';
-                this.minimizedIframe.style.right = '0';
-                this.minimizedIframe.style.marginLeft = '0';
-                this.minimizedIframe.style.marginRight = '0';
-                this.minimizedIframe.style.pointerEvents = 'auto';
-            }
+            this.queueDOMUpdate(() => {
+                if (this.minimizedIframe) {
+                    Object.assign(this.minimizedIframe.style, {
+                        width: '80px', height: '80px', left: 'auto', right: '0',
+                        marginLeft: '0', marginRight: '0', pointerEvents: 'auto'
+                    });
+                }
+            });
             return;
         }
 
         if (msg === "restoreMinimalInput") {
-            if (this.minimizedIframe) {
-                this.minimizedIframe.style.width = '100vw';
-                this.minimizedIframe.style.maxWidth = `${Math.min(300, this.width) + 40}px`;
-                this.minimizedIframe.style.height = this.theme === 'MinimalInput' ? "75px" : this.minimizedHeight;
-                this.minimizedIframe.style.left = '0';
-                this.minimizedIframe.style.right = '0';
-                this.minimizedIframe.style.marginLeft = 'auto';
-                this.minimizedIframe.style.marginRight = 'auto';
-                this.minimizedIframe.style.pointerEvents = 'auto';
-            }
-            if (this.theme === 'MinimalInput' && this.position !== 'in-place') {
-                this.containerDiv.style.pointerEvents = 'none';
-            }
+            this.queueDOMUpdate(() => {
+                if (this.minimizedIframe) {
+                    Object.assign(this.minimizedIframe.style, {
+                        width: '100vw', maxWidth: `${Math.min(300, this.width) + 40}px`,
+                        height: this.theme === 'MinimalInput' ? "75px" : this.minimizedHeight,
+                        left: '0', right: '0', marginLeft: 'auto', marginRight: 'auto',
+                        pointerEvents: 'auto'
+                    });
+                }
+                if (this.theme === 'MinimalInput' && this.position !== 'in-place') {
+                    this.containerDiv.style.pointerEvents = 'none';
+                }
+            });
             return;
         }
 
@@ -310,18 +325,18 @@
         if (data.theme) updates.theme = data.theme;
 
         if (Object.keys(updates).length > 0) {
-            this.applyIframeUpdates(updates);
+            this.queueDOMUpdate(() => this.applyIframeUpdates(updates));
         }
 
         if (msg === "minimize") {
             if (typeof this.options.onMinimize === 'function') {
                 this.options.onMinimize();
             } else if (this.mode !== 'ContactForm' && this.mode !== 'PartnerOffers') {
-                this.animateMinimize();
+                this.queueDOMUpdate(() => this.animateMinimize());
             }
         } else if (msg === "show" || msg === "maximize") {
             const animate = data.animate === true;
-            this.showMaximized(animate, data.initialMessage);
+            this.queueDOMUpdate(() => this.showMaximized(animate, data.initialMessage));
         } else if (msg === "navigate" && data.url) {
             window.location.href = data.url;
         } else if (data.type === "switchToChat" || msg === "switchToChat") {
@@ -344,10 +359,12 @@
     }
 
     animateMinimize() {
+        if (this.isDestroyed) return;
         if (this.mode !== 'ContactForm' && this.mode !== 'PartnerOffers') {
             this.iframe.style.height = this.minimizedHeight;
             this.iframe.style.opacity = '0';
             setTimeout(() => {
+                if (this.isDestroyed) return;
                 this.iframe.style.display = "none";
                 this.iframe.style.opacity = '1';
                 this.minimizedIframe.style.display = "block";
@@ -362,6 +379,7 @@
     }
 
     updateMinimizedSize(contentHeight, contentWidth) {
+        if (this.isDestroyed) return;
         if (this.mode === 'ContactForm' || this.mode === 'PartnerOffers') return;
 
         this.hasMeasuredSize = true;
@@ -418,6 +436,7 @@
     }
 
     applyIframeUpdates({ locale, width, height, marginBottom, scale, theme } = {}) {
+        if (this.isDestroyed) return;
         if (theme && typeof theme === 'string' && theme !== this.theme) {
             this.theme = theme;
             console.log(`Theme updated to: ${this.theme}`);
@@ -542,6 +561,7 @@
     }
 
     showMaximized(animate = false, initialMessage = null) {
+        if (this.isDestroyed) return;
         const schedulePostMessage = () => {
             if (this.iframe.contentWindow) {
                 this.iframe.contentWindow.postMessage({
@@ -552,6 +572,7 @@
                 }, this.targetOrigin);
             } else {
                 setTimeout(() => {
+                    if (this.isDestroyed) return;
                     if (this.iframe.contentWindow) {
                         this.iframe.contentWindow.postMessage({
                             message: "show",
@@ -596,6 +617,7 @@
     }
 
     minimizeOnScrollAction() {
+        if (this.isDestroyed) return;
         if (this.mode !== 'ContactForm' && this.mode !== 'PartnerOffers' && this.iframe.style.display !== "none") {
             this.animateMinimize();
         }
@@ -653,6 +675,7 @@
     }
 
     async postAuthToIframes() {
+        if (this.isDestroyed) return;
         if (typeof this.userTokenProvider !== 'function') return;
         try {
             const userToken = await this.userTokenProvider();
@@ -696,6 +719,27 @@
         }
         this.updateIframes();
     }
+
+    destroy() {
+        if (this.listeners) {
+            this.listeners.forEach(l => window.removeEventListener(l.type, l.fn));
+            this.listeners = null;
+        }
+
+        this.windowListenersAdded = false;
+        this.isDestroyed = true;
+
+        if (this.containerDiv) {
+            if (this.createdContainer && this.containerDiv.parentNode) {
+                this.containerDiv.parentNode.removeChild(this.containerDiv);
+            } else if (!this.createdContainer) {
+                this.containerDiv.innerHTML = '';
+            }
+        }
+        this.iframe = null;
+        this.minimizedIframe = null;
+        this.containerDiv = null;
+    }
 }
 
 export function initEmbeddedChat(containerDiv, chatId, options) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "embeddedaichatux",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "A lightweight and customizable embedded AI chat UI component that seamlessly integrates into web applications, offering minimized and expanded views, with iframe-based content rendering.",
   "main": "EmbeddedChat.js",
   "scripts": {