embeddedaichatux 2.0.1 → 2.2.0

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();
         }
@@ -14,7 +19,8 @@
         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;
@@ -24,19 +30,25 @@
         // 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}` :
+        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.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();
     }
 
@@ -81,31 +93,35 @@
             ? this.serverUrl.slice(0, -1)
             : this.serverUrl;
         const baseIframeUrl = `${cleanedServerUrl}/ChatUX/${this.chatId}`;
-        const minimizedPositionStyle = `
-        position: fixed; right: 0; bottom: 0;
-        width: ${this.width}px;
-        height: ${this.minimizedHeight};
-        z-index: 100000;
-        ${this.enableAnimation ? 'transition: height 0.3s ease, opacity 0.3s ease;' : ''}
-    `;
+        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;' : ''}`;
 
         const params = {
             isPreview: this.isPreview,
             mode: this.mode,
             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"
@@ -115,26 +131,27 @@
 
         // 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 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();
+        this.addIframeEventListeners();
 
         // Send auth to iframes after load
         await this.postAuthToIframes();
 
         // restore your ContactForm logic
-        if (this.mode === 'ContactForm') {
+        if (this.mode === 'ContactForm' || this.mode === 'PartnerOffers') {
             this.iframe.style.maxWidth = '100%';
             this.iframe.style.display = 'block';
         }
     }
 
-    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;
@@ -143,6 +160,12 @@
         this.iframe.addEventListener("mouseleave", () => { this.mouseInsideChat = false; });
         this.minimizedIframe.addEventListener("mouseenter", () => { this.mouseInsideChat = true; });
         this.minimizedIframe.addEventListener("mouseleave", () => { this.mouseInsideChat = false; });
+    }
+
+    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 "*")
@@ -156,13 +179,18 @@
             }
         });
 
-        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() {
@@ -170,12 +198,28 @@
             this.iframe.contentWindow.postMessage({
                 message: "resize",
                 width: window.innerWidth,  // Ensure correct size
-                height: window.innerHeight
+                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();
+                } else if (e.data === "show" || e.data === "maximize") {
+                    this.showMaximized();
+                }
+            }
+            return;
+        }
+
         console.log('[EmbeddedChat] Received message:', {
             origin: e.origin,
             type: e.data?.type,
@@ -184,73 +228,95 @@
             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();
+        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 (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;
+        }
+
+        const updates = {};
 
-            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";
-            }
+        if (data.type === "setMinimizeOnScroll" || data.minimizeOnScroll !== undefined) {
+            const minimizeValue = data.type === "setMinimizeOnScroll" ? data.value : data.minimizeOnScroll;
+            this.minimizeOnScroll = minimizeValue === true || minimizeValue === "true";
+        }
 
-            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.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;
+        }
 
-            // Apply iframe updates in one go
-            if (Object.keys(updates).length > 0) {
-                this.applyIframeUpdates(updates);
-            }
+        // Apply iframe updates in one go
+        if (Object.keys(updates).length > 0) {
+            this.applyIframeUpdates(updates);
+        }
 
-            // 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;
-                }
+        // 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();
             }
-
-            // Handle conversationId update
-            if (e.data.conversationId) {
-                this.setConversationId(e.data.conversationId);
+        } 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;
+        } 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 (typeof e.data === "string") {
-            // Preserve original handling for string messages
-            if (e.data === "minimize") {
-                this.animateMinimize();
-            } else if (e.data === "show" || e.data === "maximize") {
-                this.showMaximized();
+        } 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(() => {
@@ -259,12 +325,39 @@
                 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);
+                }
             }, this.enableAnimation ? 300 : 0);
         }
     }
 
+    updateMinimizedSize(contentHeight, contentWidth) {
+        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;
+            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') {
+        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';
@@ -298,33 +391,26 @@
         // 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
-            this.containerDiv.style.width = `${this.width}px`;
-
-            // Apply width to the main iframe
-            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 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`;
+                }
+            } else {
+                this.containerDiv.style.width = '100%';
+                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}`);
         }
 
@@ -342,28 +428,43 @@
 
         // 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
-            if (this.mode !== 'ContactForm') {
-                if (this.containerDiv.dataset.position === 'in-place') {
+            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' && this.mode !== 'PartnerOffers') {
+                if (this.position === 'in-place') {
                     // "in-place" uses full width, sets containerDiv height
-                    this.containerDiv.style.height = `${this.height}px`;
+                    this.containerDiv.style.position = 'relative';
+                    this.containerDiv.style.width = '100%';
+                    this.containerDiv.style.height = `${effectiveHeight}px`;
                     if (this.iframe) {
-                        this.iframe.style.height = `${this.height}px`;
+                        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)
@@ -392,7 +493,8 @@
             if (this.iframe.contentWindow) {
                 this.iframe.contentWindow.postMessage({
                     message: "show",
-                    sessionInfo: this.sessionInfo || null
+                    sessionInfo: this.sessionInfo || null,
+                    instanceId: this.instanceId
                 }, this.targetOrigin);
             } else {
                 // Schedule a single retry with a delay
@@ -400,7 +502,8 @@
                     if (this.iframe.contentWindow) {
                         this.iframe.contentWindow.postMessage({
                             message: "show",
-                            sessionInfo: this.sessionInfo || null
+                            sessionInfo: this.sessionInfo || null,
+                            instanceId: this.instanceId
                         }, this.targetOrigin);
                     } else {
                         console.warn("iframe contentWindow is not available.");
@@ -425,16 +528,21 @@
     }
 
     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') {
+            const origin = this.position === 'in-place' ? 'top center' : 'bottom right';
+            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();
         }
     }
@@ -445,7 +553,7 @@
 
         // 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);
         }
     }
 
@@ -464,8 +572,8 @@
             urlParams.set('isPreview', 'true');
         }
 
-        if (params.mode === 'ContactForm') {
-            urlParams.set('mode', 'ContactForm');
+        if (params.mode === 'ContactForm' || params.mode === 'PartnerOffers' || params.mode === 'Chat') {
+            urlParams.set('mode', params.mode);
         }
 
         if (params.locale) {
@@ -485,17 +593,12 @@
         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;
-            }
-
+    waitForIframeLoad(iframe, timeout = 10000) {
+        return new Promise((resolve) => {
             // Set up a timeout to avoid waiting indefinitely
             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
@@ -514,7 +617,6 @@
         }
 
         try {
-            console.log('[EmbeddedChat] Calling userTokenProvider...');
             const userToken = await this.userTokenProvider();
 
             if (!userToken) {
@@ -522,14 +624,13 @@
                 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({
                     type: 'auth',
                     userToken: userToken,
-                    chatId: this.chatId
+                    chatId: this.chatId,
+                    instanceId: this.instanceId
                 }, this.targetOrigin);
                 console.log('[EmbeddedChat] Auth message sent successfully');
             } else {
@@ -540,6 +641,33 @@
             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}` :
+                `position: fixed; right: 1em; bottom: 0; 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) {
@@ -550,3 +678,10 @@ 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.0.1",
+  "version": "2.2.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": {