embeddedaichatux 2.1.1 → 2.2.1

package/EmbeddedChat.js

@@ -1,5 +1,10 @@
 class EmbeddedChat {
+    static instanceCounter = 0;
+
     constructor(containerDiv, chatId, options) {
+        EmbeddedChat.instanceCounter++;
+        this.instanceId = `ec_${EmbeddedChat.instanceCounter}_${Date.now()}`;
+
         if (!containerDiv) {
             containerDiv = this.createChatContainer();
         }
@@ -8,16 +13,17 @@
         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 = "*";
@@ -25,19 +31,27 @@
         // Determine transition styles
         const transitionStyle = this.enableAnimation ? 'transition: height 0.3s ease, opacity 0.3s ease;' : '';
 
-        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; z-index: 100000; max-width:90vw; max-height: 90vh; ${transitionStyle}`;
+        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}` :
+            (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') {
-            // Adjust position style for contact form if mode is 'ContactForm'
-            this.positionStyle = `width:100%; height:${this.height}px; ${transitionStyle}`;
+        if (this.mode === 'ContactForm' || this.mode === 'PartnerOffers') {
+            // Adjust position style for contact form/offers - force relative/absolute to occupy container
+            this.positionStyle = `position: relative; width:100%; height:${this.height}px; ${transitionStyle}`;
+            this.containerDiv.style.position = 'relative';
             this.containerDiv.style.height = `${this.height}px`;
         }
 
         this.conversationId = this.getStoredConversationId();
         this.sessionInfo = options.sessionInfo || null;
+
+        // Initialize window event listeners only once per instance
+        this.addWindowEventListeners();
+
         this.init();
     }
 
@@ -82,31 +96,47 @@
             ? this.serverUrl.slice(0, -1)
             : this.serverUrl;
         const baseIframeUrl = `${cleanedServerUrl}/ChatUX/${this.chatId}`;
-        const minimizedPositionStyle = `
-        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;' : ''}
-    `;
+        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}; ${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
+            conversationId: this.conversationId,
+            instanceId: this.instanceId,
+            customStyle: this.options.customStyle,
+            customJs: this.options.customJs
         };
 
+        const iframeId = `ec-iframe-${this.instanceId}`;
+        const minimizedIframeId = `ec-minimized-${this.instanceId}`;
+
         const iframeHtml = `
         <iframe
-            id="embedded-chat"
+            id="${iframeId}"
+            title="AI chatbot"
             style="${this.positionStyle}; display: none; border:none; overflow:hidden;"
             frameborder="0"
             sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-top-navigation-by-user-activation"
             src="${this.buildIframeUrl(baseIframeUrl, params)}"
         ></iframe>
         <iframe
-            id="embedded-chat-minimized"
+            id="${minimizedIframeId}"
+            title="AI chatbot"
             style="${minimizedPositionStyle}; display: none; border:none; overflow:hidden;"
             frameborder="0"
             sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
@@ -116,27 +146,34 @@
 
         // 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(`#${iframeId}`);
+        this.minimizedIframe = this.containerDiv.querySelector(`#${minimizedIframeId}`);
 
         // Wait for main iframe to load
         if (this.iframe) {
             await this.waitForIframeLoad(this.iframe);
         }
 
-        this.addEventListeners();
+        this.addIframeEventListeners();
 
         // Send auth to iframes after load
         await this.postAuthToIframes();
 
-        // restore your ContactForm logic
-        if (this.mode === 'ContactForm') {
+        // 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
+        }
     }
 
-    addEventListeners() {
+    addIframeEventListeners() {
         if (!this.iframe || !this.minimizedIframe) {
             console.error('EmbeddedChat: iframe or minimizedIframe is not defined when trying to add event listeners.', this.iframe, this.minimizedIframe);
             return;
@@ -145,9 +182,12 @@
         this.iframe.addEventListener("mouseleave", () => { this.mouseInsideChat = false; });
         this.minimizedIframe.addEventListener("mouseenter", () => { this.mouseInsideChat = true; });
         this.minimizedIframe.addEventListener("mouseleave", () => { this.mouseInsideChat = false; });
+    }
+
+    addWindowEventListeners() {
+        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);
         });
@@ -158,31 +198,35 @@
             }
         });
 
-        window.addEventListener("load", () => {
+        const handleResizeTrigger = () => {
             this.postResizeMessage();
-        });
+        };
 
-        window.addEventListener("resize", () => {
-            this.postResizeMessage();
-        });
+        if (document.readyState === 'complete') {
+            handleResizeTrigger();
+        } else {
+            window.addEventListener("load", handleResizeTrigger);
+        }
+
+        window.addEventListener("resize", handleResizeTrigger);
+        this.windowListenersAdded = true;
     }
 
     postResizeMessage() {
         if (this.iframe?.contentWindow) {
             this.iframe.contentWindow.postMessage({
                 message: "resize",
-                width: window.innerWidth,  // Ensure correct size
-                height: window.innerHeight
+                width: window.innerWidth,
+                height: window.innerHeight,
+                instanceId: this.instanceId
             }, this.targetOrigin);
         }
     }
 
     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();
@@ -205,73 +249,102 @@
         const msg = (data.message || data.type || "").toString();
         const incomingChatId = (data.chatId || "").toString().toLowerCase();
         const targetChatId = (this.chatId || "").toString().toLowerCase();
+        const incomingInstanceId = data.instanceId;
 
-        // Bail out if chatId doesn't match and is provided
-        if (incomingChatId && targetChatId && incomingChatId !== targetChatId) return;
+        if (incomingInstanceId && incomingInstanceId !== this.instanceId) return;
+        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);
             return;
         }
 
-        const updates = {};
+        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';
+            }
+            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';
+            }
+            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);
         }
 
-        // Handle maximize/minimize/navigate
         if (msg === "minimize") {
-            if (this.mode !== 'ContactForm') {
+            if (typeof this.options.onMinimize === 'function') {
+                this.options.onMinimize();
+            } else if (this.mode !== 'ContactForm' && this.mode !== 'PartnerOffers') {
                 this.animateMinimize();
             }
         } else if (msg === "show" || msg === "maximize") {
             const animate = data.animate === true;
-            this.showMaximized(animate);
+            this.showMaximized(animate, data.initialMessage);
         } else if (msg === "navigate" && data.url) {
             window.location.href = data.url;
+        } else if (data.type === "switchToChat" || msg === "switchToChat") {
+            if (typeof this.options.onSwitchToChat === 'function') {
+                this.options.onSwitchToChat(data.partner);
+            } else {
+                this.setMode('Chat', { ...data, initialState: 'Maximized' });
+            }
+        } else if (data.type === "switchToContactForm" || msg === "switchToContactForm") {
+            if (typeof this.options.onSwitchToContactForm === 'function') {
+                this.options.onSwitchToContactForm(data.partner);
+            } else {
+                this.setMode('ContactForm', { partner: data.partner, initialState: 'Maximized' });
+            }
         }
 
-        // Handle conversationId update
         if (data.conversationId) {
             this.setConversationId(data.conversationId);
         }
     }
 
     animateMinimize() {
-        if (this.mode !== 'ContactForm') {
+        if (this.mode !== 'ContactForm' && this.mode !== 'PartnerOffers') {
             this.iframe.style.height = this.minimizedHeight;
             this.iframe.style.opacity = '0';
             setTimeout(() => {
@@ -281,20 +354,18 @@
                 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.minimizedIframe.contentWindow.postMessage({ message: "requestHeightUpdate", instanceId: this.instanceId }, this.targetOrigin);
                 }
             }, this.enableAnimation ? 300 : 0);
         }
     }
 
     updateMinimizedSize(contentHeight, contentWidth) {
-        if (this.mode === 'ContactForm') 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;
@@ -303,119 +374,153 @@
             }
         }
 
-        // Apply width update
         if (contentWidth && contentWidth >= 10) {
-            if (this.minimizedIframe) {
+            if (this.minimizedIframe && this.theme !== 'MinimalInput') {
                 this.minimizedIframe.style.width = `${contentWidth}px`;
             }
         }
     }
 
     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
+        if (this.mode !== 'ContactForm' && this.mode !== 'PartnerOffers') {
+            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 (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 to container
-            this.containerDiv.style.width = `${this.width}px`;
-
-            // Apply width to the main iframe
-            if (this.iframe) {
-                this.iframe.style.width = `${this.width}px`;
+            if (this.position !== 'in-place') {
+                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%';
+                this.containerDiv.style.pointerEvents = 'auto';
+                if (this.iframe) this.iframe.style.width = '100%';
             }
         }
 
-        // Apply scale if provided
         if (typeof scale === 'number' && scale > 0) {
-            if (this.iframe) {
-                this.iframe.style.transform = `scale(${scale})`;
-                this.iframe.style.transformOrigin = "bottom right";
-            }
-            if (this.minimizedIframe) {
-                this.minimizedIframe.style.transform = `scale(${scale})`;
-                this.minimizedIframe.style.transformOrigin = "bottom right";
-            }
+            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') {
-                if (this.containerDiv.dataset.position === 'in-place') {
-                    // "in-place" uses full width, sets containerDiv height
+            if (this.mode !== 'ContactForm' && this.mode !== 'PartnerOffers') {
+                if (this.position === 'in-place') {
+                    this.containerDiv.style.position = 'relative';
+                    this.containerDiv.style.width = '100%';
                     this.containerDiv.style.height = `${effectiveHeight}px`;
                     if (this.iframe) {
+                        this.iframe.style.position = 'relative';
+                        this.iframe.style.width = '100%';
                         this.iframe.style.height = `${effectiveHeight}px`;
+                        this.iframe.style.bottom = 'unset';
+                        this.iframe.style.right = 'unset';
                     }
                     if (this.minimizedIframe) {
+                        this.minimizedIframe.style.position = 'relative';
+                        this.minimizedIframe.style.width = '100%';
                         this.minimizedIframe.style.height = this.minimizedHeight;
+                        this.minimizedIframe.style.bottom = 'unset';
+                        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`;
@@ -423,32 +528,36 @@
                     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) {
         const schedulePostMessage = () => {
             if (this.iframe.contentWindow) {
                 this.iframe.contentWindow.postMessage({
                     message: "show",
-                    sessionInfo: this.sessionInfo || null
+                    sessionInfo: this.sessionInfo || null,
+                    instanceId: this.instanceId,
+                    initialMessage: initialMessage
                 }, this.targetOrigin);
             } else {
-                // Schedule a single retry with a delay
                 setTimeout(() => {
                     if (this.iframe.contentWindow) {
                         this.iframe.contentWindow.postMessage({
                             message: "show",
-                            sessionInfo: this.sessionInfo || null
+                            sessionInfo: this.sessionInfo || null,
+                            instanceId: this.instanceId,
+                            initialMessage: initialMessage
                         }, this.targetOrigin);
                     } else {
                         console.warn("iframe contentWindow is not available.");
@@ -461,8 +570,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`;
@@ -473,27 +581,30 @@
     }
 
     applyScale(scale) {
-        if (this.mode !== 'ContactForm') {
-            this.iframe.style.transform = `scale(${scale})`;
-            this.iframe.style.transformOrigin = "bottom right";
-            this.minimizedIframe.style.transform = `scale(${scale})`;
-            this.minimizedIframe.style.transformOrigin = "bottom right";
+        if (this.mode !== 'ContactForm' && this.mode !== 'PartnerOffers') {
+            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;
+            }
+            if (this.minimizedIframe) {
+                this.minimizedIframe.style.transform = `scale(${scale})`;
+                this.minimizedIframe.style.transformOrigin = origin;
+            }
         }
     }
 
     minimizeOnScrollAction() {
-        if (this.mode !== 'ContactForm' && this.iframe.style.display !== "none") {
+        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 }, this.targetOrigin);
+            this.iframe.contentWindow.postMessage({ type: 'setSessionInfo', sessionInfo: this.sessionInfo, instanceId: this.instanceId }, this.targetOrigin);
         }
     }
 
@@ -505,86 +616,86 @@
         return chatContainer;
     }
 
+    maximizeWithText(text) {
+        this.showMaximized(true, text);
+    }
+
     buildIframeUrl(baseIframeUrl, params = {}) {
         const urlParams = new URLSearchParams();
-
-        if (params.isPreview) {
-            urlParams.set('isPreview', 'true');
-        }
-
-        if (params.mode === 'ContactForm') {
-            urlParams.set('mode', 'ContactForm');
-        }
-
-        if (params.locale) {
-            urlParams.set('locale', params.locale);
-        }
-
-        if (params.conversationId) {
-            urlParams.set('conversationId', params.conversationId);
+        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.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 = 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
+    waitForIframeLoad(iframe, timeout = 10000) {
+        return new Promise((resolve) => {
             const timeoutId = setTimeout(() => {
-                reject(new Error('Iframe did not load within the timeout period.'));
+                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 (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
+                    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);
         }
     }
+
+    setMode(newMode, options = {}) {
+        if (this.mode === newMode && (!options.chatId || options.chatId === this.chatId)) return;
+
+        console.log(`[EmbeddedChat] Setting mode to ${newMode}`, options);
+        this.mode = newMode;
+        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') {
+            this.positionStyle = `position: relative; width:100%; height:${this.height}px; ${transitionStyle}`;
+            this.containerDiv.style.position = 'relative';
+            this.containerDiv.style.height = `${this.height}px`;
+        } else {
+            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: ${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%';
+                this.containerDiv.style.height = `${this.height}px`;
+            }
+        }
+        this.updateIframes();
+    }
 }
 
 export function initEmbeddedChat(containerDiv, chatId, options) {
@@ -595,3 +706,9 @@ export function initContactForm(containerDiv, chatId, options) {
     const clonedOptions = { ...options, mode: 'ContactForm' };
     return new EmbeddedChat(containerDiv, chatId, clonedOptions);
 }
+
+export function initOffers(options = {}) {
+    const chatId = options.chatConfigId;
+    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.1.1",
+  "version": "2.2.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": {