embeddedaichatux 1.7.1 → 1.8.0

package/EmbeddedChat.js

@@ -12,6 +12,7 @@
         this.serverUrl = this.options.serverUrl || 'https://embedgpt.chat/';
         this.height = options.height || 600; // Default height
         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.mouseInsideChat = false;
@@ -23,7 +24,7 @@
 
         this.positionStyle = this.containerDiv.dataset.position === 'in-place' ?
             `width:100%; height:${this.height}px; ${transitionStyle}` :
-            `position: fixed; right: 1em; bottom: 0; width: ${this.width}px; height: ${this.height}px; z-index: 100000; max-width:80%; ${transitionStyle}`;
+            `position: fixed; right: 1em; bottom: 0; width: ${this.width}px; z-index: 100000; max-width:90vw; max-height: 90vh; ${transitionStyle}`;
         this.mode = options.mode || 'Chat'; // default to 'chat'
         this.minimizeOnScroll = false; // Default to false
         if (this.mode === 'ContactForm') {
@@ -89,6 +90,11 @@
         this.minimizedIframe = this.containerDiv.querySelector("#embedded-chat-minimized");
 
         await this.waitForIframeLoad(this.iframe);
+
+        if (this.mode === 'ContactForm') {
+            this.iframe.style.maxWidth = "100%";
+            this.iframe.style.display = "block";
+        }
     }
 
     addEventListeners() {
@@ -106,6 +112,24 @@
                 this.minimizeOnScrollAction();
             }
         });
+
+        window.addEventListener("load", () => {
+            this.postResizeMessage();
+        });
+
+        window.addEventListener("resize", () => {
+            this.postResizeMessage();
+        });
+    }
+
+    postResizeMessage() {
+        if (this.iframe?.contentWindow) {
+            this.iframe.contentWindow.postMessage({
+                message: "resize",
+                width: window.innerWidth,  // Ensure correct size
+                height: window.innerHeight
+            }, "*");
+        }
     }
 
     handleMessage(e) {
@@ -117,18 +141,23 @@
                 this.minimizeOnScroll = minimizeValue === true || minimizeValue === "true";
             }
 
-            // Collect updates for locale, width, and scale
             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;
             }
 
-            // Apply iframe updates (locale, width, scale) in one go
+            // Apply iframe updates in one go
             if (Object.keys(updates).length > 0) {
                 this.applyIframeUpdates(updates);
             }
@@ -142,6 +171,9 @@
                 } 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;
                 }
             }
 
@@ -198,7 +230,7 @@
         }
     }
 
-    applyIframeUpdates({ locale, width, scale } = {}) {
+    applyIframeUpdates({ locale, width, height, marginBottom, scale } = {}) {
         // Update locale if provided and different (but do not update the iframe URL)
         if (locale && typeof locale === 'string' && locale !== this.locale) {
             this.locale = locale;
@@ -237,10 +269,82 @@
             }
             console.log(`Scale applied: ${scale}`);
         }
-    }
 
+        // Handle height and marginBottom
+        let parsedHeight = parseInt(height, 10);
+        let parsedMarginBottom = parseInt(marginBottom, 10);
+
+        // Default to existing values if not provided or invalid
+        if (isNaN(parsedHeight) || parsedHeight <= 0) {
+            parsedHeight = this.height;
+        }
+        if (isNaN(parsedMarginBottom) || parsedMarginBottom < 0) {
+            parsedMarginBottom = (typeof this.marginBottom === 'number') ? this.marginBottom : 0;
+        }
+
+        // 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);
+        }
+
+        // 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`);
+
+            // Apply the updated height/marginBottom if not ContactForm
+            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`;
+                    if (this.iframe) {
+                        this.iframe.style.height = `${this.height}px`;
+                    }
+                    if (this.minimizedIframe) {
+                        this.minimizedIframe.style.height = this.minimizedHeight;
+                    }
+                } else {
+                    // position: fixed (typical floating chat)
+                    // Update bottom offset, main height
+                    if (this.iframe) {
+                        this.iframe.style.height = `${this.height}px`;
+                        this.iframe.style.bottom = `${this.marginBottom}px`;
+                    }
+                    if (this.minimizedIframe) {
+                        this.minimizedIframe.style.height = this.minimizedHeight;
+                        this.minimizedIframe.style.bottom = `${this.marginBottom}px`;
+                    }
+                }
+            } else {
+                // ContactForm mode
+                this.containerDiv.style.height = `${this.height}px`;
+                if (this.iframe) {
+                    this.iframe.style.height = `${this.height}px`;
+                }
+            }
+        }
+    }
 
     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 (animate) {
             this.animateMaximize();
         }
@@ -251,17 +355,11 @@
 
             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.contentWindow.postMessage({ message: "show" }, "*");
+            schedulePostMessage();
         }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "embeddedaichatux",
-  "version": "1.7.1",
+  "version": "1.8.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": {