embeddedaichatux 2.0.0 → 2.1.1

package/EmbeddedChat.js

@@ -14,17 +14,13 @@
         this.width = options.width || 320;  // Default width
         this.marginBottom = options.marginBottom || 0;
         this.enableAnimation = options.enableAnimation !== false; // Default to true if not provided
-        this.minimizedHeight = `${this.height * 0.3}px`; // 30% of the full height
+        this.minimizedHeight = "180px"; // Sensible default instead of 30% calculation
+        this.hasMeasuredSize = false;
         this.mouseInsideChat = false;
         this.hasRefreshed = false; // Flag to prevent endless loop
         this.conversationId = null;
         this.userTokenProvider = options.userTokenProvider;
-
-        try {
-            this.targetOrigin = new URL(this.serverUrl).origin;
-        } catch {
-            this.targetOrigin = "*";
-        }
+        this.targetOrigin = "*";
 
         // Determine transition styles
         const transitionStyle = this.enableAnimation ? 'transition: height 0.3s ease, opacity 0.3s ease;' : '';
@@ -46,7 +42,7 @@
     }
 
     isSafari() {
-        var ua = navigator.userAgent.toLowerCase();
+        const ua = navigator.userAgent.toLowerCase();
         return ua.indexOf('safari') != -1 && ua.indexOf('chrome') == -1;
     }
 
@@ -88,7 +84,7 @@
         const baseIframeUrl = `${cleanedServerUrl}/ChatUX/${this.chatId}`;
         const minimizedPositionStyle = `
         position: fixed; right: 0; bottom: 0;
-        width: ${this.width}px;
+        width: 150px;
         height: ${this.minimizedHeight};
         z-index: 100000;
         ${this.enableAnimation ? 'transition: height 0.3s ease, opacity 0.3s ease;' : ''}
@@ -120,13 +116,14 @@
 
         // inject and capture references
         this.containerDiv.innerHTML = iframeHtml;
-        this.iframe = this.containerDiv.querySelector('#embedded-chat');
-        this.minimizedIframe = this.containerDiv.querySelector('#embedded-chat-minimized');
+        this.iframe = this.containerDiv.querySelector("#embedded-chat");
+        this.minimizedIframe = this.containerDiv.querySelector("#embedded-chat-minimized");
 
-        // wait for the real <iframe> element to load
-        await this.waitForIframeLoad(this.iframe);
+        // Wait for main iframe to load
+        if (this.iframe) {
+            await this.waitForIframeLoad(this.iframe);
+        }
 
-        // now that this.iframe & this.minimizedIframe exist, hook up events
         this.addEventListeners();
 
         // Send auth to iframes after load
@@ -181,6 +178,21 @@
     }
 
     handleMessage(e) {
+        // Only trust messages from our server (when targetOrigin is not "*")
+        if (this.targetOrigin !== "*" && e.origin !== this.targetOrigin) return;
+
+        if (typeof e.data !== "object") {
+            // Preserve original handling for string messages
+            if (typeof e.data === "string") {
+                if (e.data === "minimize") {
+                    this.animateMinimize();
+                } else if (e.data === "show" || e.data === "maximize") {
+                    this.showMaximized();
+                }
+            }
+            return;
+        }
+
         console.log('[EmbeddedChat] Received message:', {
             origin: e.origin,
             type: e.data?.type,
@@ -189,68 +201,72 @@
             data: e.data
         });
 
+        const data = e.data;
+        const msg = (data.message || data.type || "").toString();
+        const incomingChatId = (data.chatId || "").toString().toLowerCase();
+        const targetChatId = (this.chatId || "").toString().toLowerCase();
+
+        // Bail out if chatId doesn't match and is provided
+        if (incomingChatId && targetChatId && incomingChatId !== targetChatId) return;
+
         // Allow the iframe to request a fresh token
-        if (typeof e.data === "object" && e.data?.type === "requestAuth") {
-            console.log('[EmbeddedChat] Received requestAuth message, calling postAuthToIframes');
+        if (data.type === "requestAuth") {
             this.postAuthToIframes();
             return;
         }
 
-        if (typeof e.data === "object" && (!e.data.chatId || e.data.chatId === this.chatId)) {
-            const updates = {};
+        // Priority 1: Handle minimized size updates (CRITICAL: Bail out early and DO NOT pollute configuration)
+        if (msg === "updateMinimizedSize") {
+            // Support both new and legacy keys for compatibility with cached scripts
+            const h = data.minimizedHeight || data.height;
+            const w = data.minimizedWidth || data.width;
+            this.updateMinimizedSize(h, w);
+            return;
+        }
 
-            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";
-            }
+        const updates = {};
 
-            if (e.data.locale) {
-                updates.locale = e.data.locale;
-            }
-            if (e.data.width) {
-                updates.width = e.data.width;
-            }
-            if (e.data.height) {
-                updates.height = e.data.height;
-            }
-            if (e.data.marginBottom) {
-                updates.marginBottom = e.data.marginBottom;
-            }
-            if (e.data.scale) {
-                updates.scale = e.data.scale;
-            }
+        if (data.type === "setMinimizeOnScroll" || data.minimizeOnScroll !== undefined) {
+            const minimizeValue = data.type === "setMinimizeOnScroll" ? data.value : data.minimizeOnScroll;
+            this.minimizeOnScroll = minimizeValue === true || minimizeValue === "true";
+        }
 
-            // Apply iframe updates in one go
-            if (Object.keys(updates).length > 0) {
-                this.applyIframeUpdates(updates);
-            }
+        if (data.locale) {
+            updates.locale = data.locale;
+        }
+        if (data.width) {
+            updates.width = data.width;
+        }
+        if (data.height) {
+            updates.height = data.height;
+        }
+        if (data.marginBottom) {
+            updates.marginBottom = data.marginBottom;
+        }
+        if (data.scale) {
+            updates.scale = data.scale;
+        }
 
-            // Handle maximize/minimize
-            if (e.data.message) {
-                if (e.data.message === "minimize") {
-                    if (this.mode !== 'ContactForm') {
-                        this.animateMinimize();
-                    }
-                } else if (e.data.message === "show" || e.data.message === "maximize") {
-                    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;
-                }
-            }
+        // Apply iframe updates in one go
+        if (Object.keys(updates).length > 0) {
+            this.applyIframeUpdates(updates);
+        }
 
-            // Handle conversationId update
-            if (e.data.conversationId) {
-                this.setConversationId(e.data.conversationId);
-            }
-        } else if (typeof e.data === "string") {
-            // Preserve original handling for string messages
-            if (e.data === "minimize") {
+        // Handle maximize/minimize/navigate
+        if (msg === "minimize") {
+            if (this.mode !== 'ContactForm') {
                 this.animateMinimize();
-            } else if (e.data === "show" || e.data === "maximize") {
-                this.showMaximized();
             }
+        } else if (msg === "show" || msg === "maximize") {
+            const animate = data.animate === true;
+            this.showMaximized(animate);
+        } else if (msg === "navigate" && data.url) {
+            window.location.href = data.url;
+        }
+
+        // Handle conversationId update
+        if (data.conversationId) {
+            this.setConversationId(data.conversationId);
         }
     }
 
@@ -264,10 +280,37 @@
                 this.minimizedIframe.style.display = "block";
                 this.minimizedIframe.style.height = this.minimizedHeight;
                 this.minimizedIframe.style.opacity = '1';
+
+                // Request a height update after showing
+                if (this.minimizedIframe.contentWindow) {
+                    this.minimizedIframe.contentWindow.postMessage({ message: "requestHeightUpdate" }, this.targetOrigin);
+                }
             }, this.enableAnimation ? 300 : 0);
         }
     }
 
+    updateMinimizedSize(contentHeight, contentWidth) {
+        if (this.mode === 'ContactForm') return;
+
+        this.hasMeasuredSize = true;
+
+        // Apply height update
+        if (contentHeight && contentHeight >= 10) {
+            const newHeight = `${contentHeight}px`;
+            this.minimizedHeight = newHeight;
+            if (this.minimizedIframe) {
+                this.minimizedIframe.style.height = newHeight;
+            }
+        }
+
+        // Apply width update
+        if (contentWidth && contentWidth >= 10) {
+            if (this.minimizedIframe) {
+                this.minimizedIframe.style.width = `${contentWidth}px`;
+            }
+        }
+    }
+
     animateMaximize() {
         if (this.mode !== 'ContactForm') {
             // Start the animation for minimizing iframe
@@ -303,7 +346,7 @@
         // Update width if provided and different
         const parsedWidth = parseInt(width, 10);
         if (!isNaN(parsedWidth) && parsedWidth > 0 && parsedWidth !== this.width) {
-            this.width = Math.max(parsedWidth, 320);
+            this.width = parsedWidth;
             console.log(`Width updated to: ${this.width}px`);
 
             // Apply width to container
@@ -313,11 +356,6 @@
             if (this.iframe) {
                 this.iframe.style.width = `${this.width}px`;
             }
-
-            // Apply width to the minimized iframe
-            if (this.minimizedIframe) {
-                this.minimizedIframe.style.width = `${this.width}px`;
-            }
         }
 
         // Apply scale if provided
@@ -347,25 +385,30 @@
 
         // Clamp so that height + marginBottom doesn't exceed 90% of viewport
         const viewportHeight = window.innerHeight;
-        if (parsedHeight + parsedMarginBottom > 0.9 * viewportHeight) {
-            parsedHeight = Math.max(0, 0.9 * viewportHeight - parsedMarginBottom);
+        let effectiveHeight = parsedHeight;
+        if (effectiveHeight + parsedMarginBottom > 0.9 * viewportHeight) {
+            effectiveHeight = Math.max(100, 0.9 * viewportHeight - parsedMarginBottom);
         }
 
         // Only apply if there's an actual change
         if (parsedHeight !== this.height || parsedMarginBottom !== this.marginBottom) {
             this.height = parsedHeight;
             this.marginBottom = parsedMarginBottom;
-            this.minimizedHeight = `${this.height * 0.3}px`;
 
-            console.log(`Height updated to: ${this.height}px, marginBottom: ${this.marginBottom}px`);
+            // Only use the 30% estimate if we haven't received a real measurement yet
+            if (!this.hasMeasuredSize) {
+                this.minimizedHeight = `${this.height * 0.3}px`;
+            }
 
-            // Apply the updated height/marginBottom if not ContactForm
+            console.log(`Height updated to: ${this.height}px (clamped to ${effectiveHeight}px for display), marginBottom: ${this.marginBottom}px`);
+
+            // Apply the updated height/marginBottom
             if (this.mode !== 'ContactForm') {
                 if (this.containerDiv.dataset.position === 'in-place') {
                     // "in-place" uses full width, sets containerDiv height
-                    this.containerDiv.style.height = `${this.height}px`;
+                    this.containerDiv.style.height = `${effectiveHeight}px`;
                     if (this.iframe) {
-                        this.iframe.style.height = `${this.height}px`;
+                        this.iframe.style.height = `${effectiveHeight}px`;
                     }
                     if (this.minimizedIframe) {
                         this.minimizedIframe.style.height = this.minimizedHeight;
@@ -519,7 +562,6 @@
         }
 
         try {
-            console.log('[EmbeddedChat] Calling userTokenProvider...');
             const userToken = await this.userTokenProvider();
 
             if (!userToken) {
@@ -527,8 +569,6 @@
                 return;
             }
 
-            console.log('[EmbeddedChat] Got user token, length:', userToken?.length || 0);
-
             if (this.iframe?.contentWindow) {
                 console.log('[EmbeddedChat] Sending auth message to iframe with targetOrigin:', this.targetOrigin);
                 this.iframe.contentWindow.postMessage({

package/package.json

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