embeddedaichatux 1.7.0 → 1.7.2

package/EmbeddedChat.js

@@ -74,7 +74,7 @@
         this.addEventListeners();
     }
 
-    updateIframes() {
+    async updateIframes() {
         const cleanedServerUrl = this.serverUrl.endsWith('/') ? this.serverUrl.slice(0, -1) : this.serverUrl;
         const baseIframeUrl = `${cleanedServerUrl}/ChatUX/${this.chatId}`;
         const minimizedPositionStyle = `position: fixed; right: 0; bottom: 0; width: ${this.width}px; height: ${this.minimizedHeight}; z-index: 100000; ${this.enableAnimation ? 'transition: height 0.3s ease, opacity 0.3s ease;' : ''}`;
@@ -87,6 +87,8 @@
         this.containerDiv.innerHTML = iframeHtml;
         this.iframe = this.containerDiv.querySelector("#embedded-chat");
         this.minimizedIframe = this.containerDiv.querySelector("#embedded-chat-minimized");
+
+        await this.waitForIframeLoad(this.iframe);
     }
 
     addEventListeners() {
@@ -110,9 +112,9 @@
         if (typeof e.data === "object" && (!e.data.chatId || e.data.chatId === this.chatId)) {
             const updates = {};
 
-            // Preserve minimize on scroll functionality
-            if (e.data.type === "setMinimizeOnScroll") {
-                this.minimizeOnScroll = e.data.value === "true";
+            if (e.data.type === "setMinimizeOnScroll" || e.data.minimizeOnScroll !== undefined) {
+                const minimizeValue = e.data.type === "setMinimizeOnScroll" ? e.data.value : e.data.minimizeOnScroll;
+                this.minimizeOnScroll = minimizeValue === true || minimizeValue === "true";
             }
 
             // Collect updates for locale, width, and scale
@@ -138,7 +140,11 @@
                         this.animateMinimize();
                     }
                 } else if (e.data.message === "show" || e.data.message === "maximize") {
-                    this.showMaximized();
+                    const animate = e.data.animate === true;
+                    this.showMaximized(animate);
+                } else if (e.data.message === "navigate" && e.data.url) {
+                    // Handle the navigate message
+                    window.location.href = e.data.url;
                 }
             }
 
@@ -170,6 +176,31 @@
         }
     }
 
+    animateMaximize() {
+        if (this.mode !== 'ContactForm') {
+            // Start the animation for minimizing iframe
+            this.minimizedIframe.style.height = `${this.height}px`;
+            this.minimizedIframe.style.opacity = '0';
+
+            setTimeout(() => {
+                // Hide the minimized iframe
+                this.minimizedIframe.style.display = "none";
+                this.minimizedIframe.style.opacity = '1'; // Reset opacity
+
+                // Show and animate the main iframe
+                this.iframe.style.display = "block";
+                this.iframe.style.height = this.minimizedHeight; // Start with minimized height
+                this.iframe.style.opacity = '0'; // Start with zero opacity
+
+                // Trigger the maximize animation
+                setTimeout(() => {
+                    this.iframe.style.height = `${this.height}px`; // Animate to full height
+                    this.iframe.style.opacity = '1'; // Animate opacity to full
+                }, 10); // Small delay to allow display changes to take effect
+            }, this.enableAnimation ? 300 : 0); // Match the minimize animation duration
+        }
+    }
+
     applyIframeUpdates({ locale, width, scale } = {}) {
         // Update locale if provided and different (but do not update the iframe URL)
         if (locale && typeof locale === 'string' && locale !== this.locale) {
@@ -212,26 +243,44 @@
     }
 
 
-    showMaximized() {
-        this.minimizedIframe.style.display = "none";
-
-        this.minimizedIframe.style.height = `${this.height}px`;
-        this.minimizedIframe.style.opacity = ''; // Reset opacity to unset
-
-        this.iframe.style.display = "block";
+    showMaximized(animate = false) {
+        const schedulePostMessage = () => {
+            if (this.iframe.contentWindow) {
+                this.iframe.contentWindow.postMessage({ message: "show" }, "*");
+            } else {
+                // Schedule a single retry with a delay
+                setTimeout(() => {
+                    if (this.iframe.contentWindow) {
+                        this.iframe.contentWindow.postMessage({ message: "show" }, "*");
+                    } else {
+                        console.warn("iframe contentWindow is not available.");
+                    }
+                }, 500);
+            }
+        };
 
-        if (this.isSafari() && !this.hasRefreshed) {
-            // Force refresh by resetting the iframe's src
-            const currentSrc = this.iframe.src;
-            this.iframe.src = '';  // Temporarily clear the src
-            this.iframe.src = currentSrc;  // Reset to the original src to trigger a reload
-            this.hasRefreshed = true; // Prevent endless loop
+        if (animate) {
+            this.animateMaximize();
         }
+        else {
+            this.minimizedIframe.style.display = "none";
+            this.minimizedIframe.style.height = `${this.height}px`;
+            this.minimizedIframe.style.opacity = ''; // Reset opacity to unset
+
+            this.iframe.style.display = "block";
+
+            if (this.isSafari() && !this.hasRefreshed) {
+                const currentSrc = this.iframe.src;
+                this.iframe.src = '';  // Temporarily clear the src
+                this.iframe.src = currentSrc;  // Reset to the original src to trigger a reload
+                this.hasRefreshed = true; // Prevent endless loop
+            }
 
-        this.iframe.style.height = `${this.height}px`;
-        this.iframe.style.opacity = '1';
+            this.iframe.style.height = `${this.height}px`;
+            this.iframe.style.opacity = '1';
 
-        this.iframe.contentWindow.postMessage({ message: "show" }, "*");
+            schedulePostMessage();
+        }
     }
 
     applyScale(scale) {
@@ -300,6 +349,27 @@
 
         return `${baseIframeUrl}?${urlParams.toString()}`;
     }
+
+    waitForIframeLoad(iframe, timeout = 5000) {
+        return new Promise((resolve, reject) => {
+            // Check if the iframe is already loaded
+            if (iframe.contentDocument || iframe.contentWindow) {
+                resolve();
+                return;
+            }
+
+            // Set up a timeout to avoid waiting indefinitely
+            const timeoutId = setTimeout(() => {
+                reject(new Error('Iframe did not load within the timeout period.'));
+            }, timeout);
+
+            // Add the load event listener
+            iframe.addEventListener('load', () => {
+                clearTimeout(timeoutId); // Clear the timeout
+                resolve();
+            }, { once: true }); // Ensure the listener is triggered only once
+        });
+    }
 }
 
 export function initEmbeddedChat(containerDiv, chatId, options) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "embeddedaichatux",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "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": {