embeddedaichatux 2.2.0 → 2.3.0

package/EmbeddedChat.js

@@ -1,4 +1,4 @@
-class EmbeddedChat {
+class EmbeddedChat {
     static instanceCounter = 0;
 
     constructor(containerDiv, chatId, options) {
@@ -7,22 +7,26 @@
 
         if (!containerDiv) {
             containerDiv = this.createChatContainer();
+            this.createdContainer = true;
+        } else {
+            this.createdContainer = false;
         }
         this.containerDiv = containerDiv;
         this.chatId = chatId;
         this.options = options || {};
         this.isPreview = this.options.isPreview || false;
         this.locale = options.locale || 'en';
-        this.previewParam = this.isPreview ? "?isPreview=true" : "";
+
         this.serverUrl = this.options.serverUrl || 'https://app.bizdriver.ai/';
         this.height = options.height || 600; // Default height
-        this.width = options.width || 320;  // Default width
+        this.width = options.width || 400;  // Default width
         this.marginBottom = options.marginBottom || 0;
         this.enableAnimation = options.enableAnimation !== false; // Default to true if not provided
-        this.minimizedHeight = "180px"; // Sensible default instead of 30% calculation
+        this.theme = options.theme || this.containerDiv.dataset.theme || 'Standard';
+        this.minimizedHeight = this.theme === 'MinimalInput' ? "75px" : "80px"; // Default heights for different themes
         this.hasMeasuredSize = false;
         this.mouseInsideChat = false;
-        this.hasRefreshed = false; // Flag to prevent endless loop
+
         this.conversationId = null;
         this.userTokenProvider = options.userTokenProvider;
         this.targetOrigin = "*";
@@ -33,7 +37,9 @@
         this.position = this.options.position || this.containerDiv.dataset.position || 'fixed';
         this.positionStyle = this.position === 'in-place' ?
             `position: relative; width:100%; height:${this.height}px; ${transitionStyle}` :
-            `position: fixed; right: 1em; bottom: 0; width: ${this.width}px; z-index: 100000; max-width:90vw; max-height: 90vh; ${transitionStyle}`;
+            (this.theme === 'MinimalInput' ?
+                `position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 100%; max-width: ${this.width}px; bottom: ${this.marginBottom}px; z-index: 100000; max-height: 90vh; ${transitionStyle}` :
+                `position: fixed; right: 1em; bottom: ${this.marginBottom}px; width: 100%; max-width: ${this.width}px; z-index: 100000; max-height: 90vh; ${transitionStyle}`);
         this.mode = options.mode || 'Chat'; // default to 'chat'
         this.minimizeOnScroll = false; // Default to false
         if (this.mode === 'ContactForm' || this.mode === 'PartnerOffers') {
@@ -52,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;
@@ -89,17 +102,31 @@
     }
 
     async updateIframes() {
+        if (this.isDestroyed) return;
+
         const cleanedServerUrl = this.serverUrl.endsWith('/')
             ? this.serverUrl.slice(0, -1)
             : this.serverUrl;
         const baseIframeUrl = `${cleanedServerUrl}/ChatUX/${this.chatId}`;
+        const transitionStyle = this.enableAnimation ? 'transition: height 0.3s ease, opacity 0.3s ease;' : '';
+
+        // Recalculate positionStyle conditionally in case theme changed dynamically
+        this.positionStyle = this.position === 'in-place' ?
+            `position: relative; width:100%; height:${this.height}px; ${transitionStyle}` :
+            (this.theme === 'MinimalInput' ?
+                `position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; bottom: ${this.marginBottom}px; width: 95vw; max-width: ${this.width}px; z-index: 100000; max-height: 90vh; pointer-events: auto; ${transitionStyle}` :
+                `position: fixed; right: 1em; bottom: ${this.marginBottom}px; width: ${this.width}px; z-index: 100000; max-width:90vw; max-height: 90vh; pointer-events: auto; ${transitionStyle}`);
+
         const minimizedPositionStyle = this.position === 'in-place' ?
-            `position: relative; width: 100%; height: ${this.minimizedHeight}; ${this.enableAnimation ? 'transition: height 0.3s ease, opacity 0.3s ease;' : ''}` :
-            `position: fixed; right: 0; bottom: 0; width: 150px; height: ${this.minimizedHeight}; z-index: 100000; ${this.enableAnimation ? 'transition: height 0.3s ease, opacity 0.3s ease;' : ''}`;
+            `position: relative; width: 100%; height: ${this.minimizedHeight}; ${transitionStyle}` :
+            (this.theme === 'MinimalInput' ?
+                `position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; bottom: ${this.marginBottom}px; width: 100vw; max-width: ${Math.min(300, this.width) + 40}px; height: ${this.minimizedHeight}; z-index: 100000; pointer-events: auto; ${transitionStyle}` :
+                `position: fixed; right: 0; bottom: ${this.marginBottom}px; width: 150px; height: ${this.minimizedHeight}; z-index: 100000; max-width: 95vw; pointer-events: auto; ${transitionStyle}`);
 
         const params = {
             isPreview: this.isPreview,
             mode: this.mode,
+            theme: this.theme,
             locale: this.locale,
             conversationId: this.conversationId,
             instanceId: this.instanceId,
@@ -138,17 +165,26 @@
         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 your ContactForm logic
+        // Restore ContactForm logic
         if (this.mode === 'ContactForm' || this.mode === 'PartnerOffers') {
             this.iframe.style.maxWidth = '100%';
             this.iframe.style.display = 'block';
         }
+
+        // Apply pointer-events to container if theme is MinimalInput to prevent blocking page
+        if (this.theme === 'MinimalInput' && this.position !== 'in-place') {
+            this.containerDiv.style.pointerEvents = 'none';
+        } else {
+            this.containerDiv.style.pointerEvents = 'auto'; // Reset for other themes
+        }
     }
 
     addIframeEventListeners() {
@@ -163,41 +199,40 @@
     }
 
     addWindowEventListeners() {
-
-        // Use a flag to ensure window listeners aren't duplicated for this specific instance if setMode is called (though it shouldn't be)
         if (this.windowListenersAdded) return;
 
-        window.addEventListener("message", (e) => {
-            // Only trust messages from our server (when targetOrigin is not "*")
-            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",
-                width: window.innerWidth,  // Ensure correct size
+                width: window.innerWidth,
                 height: window.innerHeight,
                 instanceId: this.instanceId
             }, this.targetOrigin);
@@ -205,11 +240,9 @@
     }
 
     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();
@@ -234,65 +267,76 @@
         const targetChatId = (this.chatId || "").toString().toLowerCase();
         const incomingInstanceId = data.instanceId;
 
-        // Priority 1: Handle instance-specific routing
         if (incomingInstanceId && incomingInstanceId !== this.instanceId) return;
-
-        // Priority 2: Bail out if chatId doesn't match and is provided (legacy/fallback)
         if (!incomingInstanceId && incomingChatId && targetChatId && incomingChatId !== targetChatId) return;
 
-        // Allow the iframe to request a fresh token
         if (data.type === "requestAuth") {
             this.postAuthToIframes();
             return;
         }
 
-        // 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);
+            this.queueDOMUpdate(() => this.updateMinimizedSize(h, w));
             return;
         }
 
-        const updates = {};
+        if (msg === "collapseMinimalInput") {
+            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") {
+            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;
+        }
+
+        const updates = {};
         if (data.type === "setMinimizeOnScroll" || data.minimizeOnScroll !== undefined) {
             const minimizeValue = data.type === "setMinimizeOnScroll" ? data.value : data.minimizeOnScroll;
             this.minimizeOnScroll = minimizeValue === true || minimizeValue === "true";
         }
 
-        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;
-        }
+        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;
+        if (data.theme) updates.theme = data.theme;
 
-        // Apply iframe updates in one go
         if (Object.keys(updates).length > 0) {
-            this.applyIframeUpdates(updates);
+            this.queueDOMUpdate(() => this.applyIframeUpdates(updates));
         }
 
-        // Handle maximize/minimize/navigate
         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);
+            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") {
@@ -309,24 +353,24 @@
             }
         }
 
-        // Handle conversationId update
         if (data.conversationId) {
             this.setConversationId(data.conversationId);
         }
     }
 
     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";
                 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", instanceId: this.instanceId }, this.targetOrigin);
                 }
@@ -335,11 +379,11 @@
     }
 
     updateMinimizedSize(contentHeight, contentWidth) {
+        if (this.isDestroyed) return;
         if (this.mode === 'ContactForm' || this.mode === 'PartnerOffers') return;
 
         this.hasMeasuredSize = true;
 
-        // Apply height update
         if (contentHeight && contentHeight >= 10) {
             const newHeight = `${contentHeight}px`;
             this.minimizedHeight = newHeight;
@@ -348,9 +392,8 @@
             }
         }
 
-        // Apply width update
         if (contentWidth && contentWidth >= 10) {
-            if (this.minimizedIframe) {
+            if (this.minimizedIframe && this.theme !== 'MinimalInput') {
                 this.minimizedIframe.style.width = `${contentWidth}px`;
             }
         }
@@ -358,97 +401,127 @@
 
     animateMaximize() {
         if (this.mode !== 'ContactForm' && this.mode !== 'PartnerOffers') {
-            // Start the animation for minimizing iframe
-            this.minimizedIframe.style.height = `${this.height}px`;
-            this.minimizedIframe.style.opacity = '0';
-
-            setTimeout(() => {
-                // Hide the minimized iframe
+            const onMinimizedAnimateEnd = () => {
+                this.minimizedIframe.removeEventListener("transitionend", onMinimizedAnimateEnd);
                 this.minimizedIframe.style.display = "none";
-                this.minimizedIframe.style.opacity = '1'; // Reset opacity
+                this.minimizedIframe.style.opacity = '1';
 
-                // 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
+                this.iframe.style.height = this.minimizedHeight;
+                this.iframe.style.opacity = "0";
 
-                // 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
+                this.iframe.offsetHeight;
+
+                this.iframe.style.height = `${this.height}px`;
+                this.iframe.style.opacity = "1";
+            };
+
+            if (this.enableAnimation) {
+                this.minimizedIframe.addEventListener("transitionend", onMinimizedAnimateEnd);
+                this.minimizedIframe.style.height = this.minimizedHeight;
+                this.minimizedIframe.style.opacity = "0";
+
+                // Notify iframe when maximize transition finishes to ensure final scroll-into-view
+                this.iframe.addEventListener("transitionend", (e) => {
+                    if (e.propertyName === 'height' && this.iframe.style.display !== 'none') {
+                        if (this.iframe.contentWindow) {
+                            this.iframe.contentWindow.postMessage({ message: "maximizeComplete", instanceId: this.instanceId }, this.targetOrigin);
+                        }
+                    }
+                }, { once: true });
+            } else {
+                onMinimizedAnimateEnd();
+            }
         }
     }
 
-    applyIframeUpdates({ locale, width, height, marginBottom, scale } = {}) {
-        // Update locale if provided and different (but do not update the iframe URL)
+    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}`);
+            this.minimizedHeight = this.theme === 'MinimalInput' ? "75px" : "80px";
+            this.updateIframes();
+            return;
+        }
+
         if (locale && typeof locale === 'string' && locale !== this.locale) {
             this.locale = locale;
             console.log(`Locale stored locally: ${this.locale}`);
         }
 
-        // Update width if provided and different
         const parsedWidth = parseInt(width, 10);
         if (!isNaN(parsedWidth) && parsedWidth > 0 && parsedWidth !== this.width) {
             this.width = parsedWidth;
             console.log(`Width updated to: ${this.width}px`);
 
-            // Apply width only if not in-place
             if (this.position !== 'in-place') {
-                this.containerDiv.style.width = `${this.width}px`;
-                if (this.iframe) {
-                    this.iframe.style.width = `${this.width}px`;
+                if (this.theme === 'MinimalInput') {
+                    this.containerDiv.style.width = '100vw'; // Use 100vw but keep pointerEvents none
+                    this.containerDiv.style.left = '0';
+                    this.containerDiv.style.right = '0';
+                    this.containerDiv.style.marginLeft = 'auto';
+                    this.containerDiv.style.marginRight = 'auto';
+                    this.containerDiv.style.pointerEvents = 'none'; // Prevent invisible area from blocking clicks
+                    if (this.iframe) {
+                        this.iframe.style.width = '95vw';
+                        this.iframe.style.maxWidth = `${this.width}px`;
+                        this.iframe.style.pointerEvents = 'auto';
+                        this.iframe.style.left = '0';
+                        this.iframe.style.right = '0';
+                        this.iframe.style.margin = 'auto';
+                    }
+                    if (this.minimizedIframe) {
+                        this.minimizedIframe.style.width = '100vw'; // Use 100vw to allow centering
+                        this.minimizedIframe.style.maxWidth = `${Math.min(300, this.width) + 40}px`;
+                        this.minimizedIframe.style.pointerEvents = 'auto';
+                        this.minimizedIframe.style.left = '0';
+                        this.minimizedIframe.style.right = '0';
+                        this.minimizedIframe.style.margin = 'auto';
+                    }
+                } else {
+                    this.containerDiv.style.width = `${this.width}px`;
+                    this.containerDiv.style.pointerEvents = 'auto'; // Ensure auto for other themes
+                    if (this.iframe) this.iframe.style.width = `${this.width}px`;
                 }
             } else {
                 this.containerDiv.style.width = '100%';
-                if (this.iframe) {
-                    this.iframe.style.width = '100%';
-                }
+                this.containerDiv.style.pointerEvents = 'auto';
+                if (this.iframe) this.iframe.style.width = '100%';
             }
         }
 
-        // Apply scale if provided
         if (typeof scale === 'number' && scale > 0) {
             this.applyScale(scale);
             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(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;
         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;
 
-            // Only use the 30% estimate if we haven't received a real measurement yet
             if (!this.hasMeasuredSize) {
-                this.minimizedHeight = `${this.height * 0.3}px`;
+                this.minimizedHeight = this.theme === 'MinimalInput' ? "75px" : "80px";
             }
 
-            console.log(`Height updated to: ${this.height}px (clamped to ${effectiveHeight}px for display), marginBottom: ${this.marginBottom}px`);
+            console.log(`Height updated to: ${this.height}px, marginBottom: ${this.marginBottom}px`);
 
-            // Apply the updated height/marginBottom
             if (this.mode !== 'ContactForm' && this.mode !== 'PartnerOffers') {
                 if (this.position === 'in-place') {
-                    // "in-place" uses full width, sets containerDiv height
                     this.containerDiv.style.position = 'relative';
                     this.containerDiv.style.width = '100%';
                     this.containerDiv.style.height = `${effectiveHeight}px`;
@@ -467,8 +540,6 @@
                         this.minimizedIframe.style.right = 'unset';
                     }
                 } 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`;
@@ -476,34 +547,38 @@
                     if (this.minimizedIframe) {
                         this.minimizedIframe.style.height = this.minimizedHeight;
                         this.minimizedIframe.style.bottom = `${this.marginBottom}px`;
+                        if (this.theme === 'MinimalInput') {
+                            this.minimizedIframe.style.width = '100vw';
+                            this.minimizedIframe.style.maxWidth = `${Math.min(300, this.width) + 40}px`;
+                        }
                     }
                 }
             } else {
-                // ContactForm mode
                 this.containerDiv.style.height = `${this.height}px`;
-                if (this.iframe) {
-                    this.iframe.style.height = `${this.height}px`;
-                }
+                if (this.iframe) this.iframe.style.height = `${this.height}px`;
             }
         }
     }
 
-    showMaximized(animate = false) {
+    showMaximized(animate = false, initialMessage = null) {
+        if (this.isDestroyed) return;
         const schedulePostMessage = () => {
             if (this.iframe.contentWindow) {
                 this.iframe.contentWindow.postMessage({
                     message: "show",
                     sessionInfo: this.sessionInfo || null,
-                    instanceId: this.instanceId
+                    instanceId: this.instanceId,
+                    initialMessage: initialMessage
                 }, this.targetOrigin);
             } else {
-                // Schedule a single retry with a delay
                 setTimeout(() => {
+                    if (this.isDestroyed) return;
                     if (this.iframe.contentWindow) {
                         this.iframe.contentWindow.postMessage({
                             message: "show",
                             sessionInfo: this.sessionInfo || null,
-                            instanceId: this.instanceId
+                            instanceId: this.instanceId,
+                            initialMessage: initialMessage
                         }, this.targetOrigin);
                     } else {
                         console.warn("iframe contentWindow is not available.");
@@ -516,8 +591,7 @@
             this.animateMaximize();
         } else {
             this.minimizedIframe.style.display = "none";
-            this.minimizedIframe.style.height = `${this.height}px`;
-            this.minimizedIframe.style.opacity = ''; // Reset opacity to unset
+            this.minimizedIframe.style.opacity = '';
 
             this.iframe.style.display = "block";
             this.iframe.style.height = `${this.height}px`;
@@ -529,7 +603,8 @@
 
     applyScale(scale) {
         if (this.mode !== 'ContactForm' && this.mode !== 'PartnerOffers') {
-            const origin = this.position === 'in-place' ? 'top center' : 'bottom right';
+            let origin = this.position === 'in-place' ? 'top center' : 'bottom right';
+            if (this.theme === 'MinimalInput') origin = 'bottom center';
             if (this.iframe) {
                 this.iframe.style.transform = `scale(${scale})`;
                 this.iframe.style.transformOrigin = origin;
@@ -542,16 +617,14 @@
     }
 
     minimizeOnScrollAction() {
+        if (this.isDestroyed) return;
         if (this.mode !== 'ContactForm' && this.mode !== 'PartnerOffers' && this.iframe.style.display !== "none") {
             this.animateMinimize();
         }
     }
 
     setSessionInfo(sessionInfo) {
-        console.log('setSessionInfo called with sessionInfo:', sessionInfo);
         this.sessionInfo = sessionInfo;
-
-        // Send session info immediately if the chat is already maximized
         if (this.iframe?.contentWindow && this.iframe.style.display !== "none") {
             this.iframe.contentWindow.postMessage({ type: 'setSessionInfo', sessionInfo: this.sessionInfo, instanceId: this.instanceId }, this.targetOrigin);
         }
@@ -565,78 +638,56 @@
         return chatContainer;
     }
 
+    maximizeWithText(text) {
+        this.showMaximized(true, text);
+    }
+
     buildIframeUrl(baseIframeUrl, params = {}) {
         const urlParams = new URLSearchParams();
-
-        if (params.isPreview) {
-            urlParams.set('isPreview', 'true');
-        }
-
+        if (params.isPreview) urlParams.set('isPreview', 'true');
         if (params.mode === 'ContactForm' || params.mode === 'PartnerOffers' || params.mode === 'Chat') {
             urlParams.set('mode', params.mode);
         }
-
-        if (params.locale) {
-            urlParams.set('locale', params.locale);
-        }
-
-        if (params.conversationId) {
-            urlParams.set('conversationId', params.conversationId);
-        }
+        if (params.locale) urlParams.set('locale', params.locale);
+        if (params.conversationId) urlParams.set('conversationId', params.conversationId);
+        if (params.instanceId) urlParams.set('instanceId', params.instanceId);
 
         for (const [key, value] of Object.entries(params)) {
-            if (key !== 'mode' && key !== 'isPreview' && key !== 'conversationId' && key !== 'userToken' && value !== null && value !== undefined) {
+            if (!['mode', 'isPreview', 'conversationId', 'instanceId', 'userToken'].includes(key) && value !== null && value !== undefined) {
                 urlParams.set(key, value);
             }
         }
-
         return `${baseIframeUrl}?${urlParams.toString()}`;
     }
 
     waitForIframeLoad(iframe, timeout = 10000) {
         return new Promise((resolve) => {
-            // Set up a timeout to avoid waiting indefinitely
             const timeoutId = setTimeout(() => {
                 console.warn('EmbeddedChat: Iframe load timeout, proceeding with initialization.');
                 resolve();
             }, timeout);
 
-            // Add the load event listener
             iframe.addEventListener('load', () => {
-                clearTimeout(timeoutId); // Clear the timeout
+                clearTimeout(timeoutId);
                 resolve();
-            }, { once: true }); // Ensure the listener is triggered only once
+            }, { once: true });
         });
     }
 
     async postAuthToIframes() {
-        console.log('[EmbeddedChat] postAuthToIframes called');
-        if (typeof this.userTokenProvider !== 'function') {
-            console.warn('[EmbeddedChat] No userTokenProvider function provided');
-            return;
-        }
-
+        if (this.isDestroyed) return;
+        if (typeof this.userTokenProvider !== 'function') return;
         try {
             const userToken = await this.userTokenProvider();
-
-            if (!userToken) {
-                console.warn('[EmbeddedChat] userTokenProvider returned null/empty token');
-                return;
-            }
-
+            if (!userToken) return;
             if (this.iframe?.contentWindow) {
-                console.log('[EmbeddedChat] Sending auth message to iframe with targetOrigin:', this.targetOrigin);
                 this.iframe.contentWindow.postMessage({
                     type: 'auth',
                     userToken: userToken,
                     chatId: this.chatId,
                     instanceId: this.instanceId
                 }, this.targetOrigin);
-                console.log('[EmbeddedChat] Auth message sent successfully');
-            } else {
-                console.error('[EmbeddedChat] iframe.contentWindow is not available');
             }
-            // No longer send auth to minimizedIframe
         } catch (err) {
             console.error('[EmbeddedChat] Failed to get user token:', err);
         }
@@ -647,9 +698,7 @@
 
         console.log(`[EmbeddedChat] Setting mode to ${newMode}`, options);
         this.mode = newMode;
-        if (options.chatId) {
-            this.chatId = options.chatId;
-        }
+        if (options.chatId) this.chatId = options.chatId;
         this.options = { ...this.options, ...options };
         const transitionStyle = this.enableAnimation ? 'transition: height 0.3s ease, opacity 0.3s ease;' : '';
         if (this.mode === 'ContactForm' || this.mode === 'PartnerOffers') {
@@ -659,7 +708,9 @@
         } else {
             this.positionStyle = this.position === 'in-place' ?
                 `position: relative; width:100%; height:${this.height}px; ${transitionStyle}` :
-                `position: fixed; right: 1em; bottom: 0; width: ${this.width}px; z-index: 100000; max-width:90vw; max-height: 90vh; ${transitionStyle}`;
+                (this.theme === 'MinimalInput' ?
+                    `position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; bottom: ${this.marginBottom}px; width: ${this.width}px; z-index: 100000; max-width:90vw; max-height: 90vh; ${transitionStyle}` :
+                    `position: fixed; right: 1em; bottom: ${this.marginBottom}px; width: ${this.width}px; z-index: 100000; max-width:90vw; max-height: 90vh; ${transitionStyle}`);
             if (this.position === 'in-place') {
                 this.containerDiv.style.position = 'relative';
                 this.containerDiv.style.width = '100%';
@@ -668,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) {
@@ -684,4 +756,3 @@ export function initOffers(options = {}) {
     const mergedOptions = { ...options, mode: 'PartnerOffers', height: options.height || 500 };
     return new EmbeddedChat(options.container, chatId, mergedOptions);
 }
-

package/package.json

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