embeddedaichatux 2.1.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();
         }
@@ -25,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();
     }
 
@@ -82,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: 150px;
-        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"
@@ -116,27 +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 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') {
+        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;
@@ -145,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 "*")
@@ -158,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() {
@@ -172,7 +198,8 @@
             this.iframe.contentWindow.postMessage({
                 message: "resize",
                 width: window.innerWidth,  // Ensure correct size
-                height: window.innerHeight
+                height: window.innerHeight,
+                instanceId: this.instanceId
             }, this.targetOrigin);
         }
     }
@@ -205,9 +232,13 @@
         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;
 
-        // Bail out if chatId doesn't match and is provided
-        if (incomingChatId && targetChatId && incomingChatId !== targetChatId) 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") {
@@ -254,7 +285,9 @@
 
         // 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") {
@@ -262,6 +295,18 @@
             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 (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
@@ -271,7 +316,7 @@
     }
 
     animateMinimize() {
-        if (this.mode !== 'ContactForm') {
+        if (this.mode !== 'ContactForm' && this.mode !== 'PartnerOffers') {
             this.iframe.style.height = this.minimizedHeight;
             this.iframe.style.opacity = '0';
             setTimeout(() => {
@@ -283,14 +328,14 @@
 
                 // 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;
 
@@ -312,7 +357,7 @@
     }
 
     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';
@@ -349,25 +394,23 @@
             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 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}`);
         }
 
@@ -403,15 +446,25 @@
             console.log(`Height updated to: ${this.height}px (clamped to ${effectiveHeight}px for display), marginBottom: ${this.marginBottom}px`);
 
             // Apply the updated height/marginBottom
-            if (this.mode !== 'ContactForm') {
-                if (this.containerDiv.dataset.position === 'in-place') {
+            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`;
                     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)
@@ -440,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
@@ -448,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.");
@@ -473,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();
         }
     }
@@ -493,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);
         }
     }
 
@@ -512,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) {
@@ -533,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
@@ -574,7 +629,8 @@
                 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 {
@@ -585,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) {
@@ -595,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.1.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": {