embeddedaichatux 1.8.0 → 2.0.0

package/EmbeddedChat.js

@@ -9,7 +9,7 @@
         this.isPreview = this.options.isPreview || false;
         this.locale = options.locale || 'en';
         this.previewParam = this.isPreview ? "?isPreview=true" : "";
-        this.serverUrl = this.options.serverUrl || 'https://embedgpt.chat/';
+        this.serverUrl = this.options.serverUrl || 'https://app.bizdriver.ai/';
         this.height = options.height || 600; // Default height
         this.width = options.width || 320;  // Default width
         this.marginBottom = options.marginBottom || 0;
@@ -18,6 +18,13 @@
         this.mouseInsideChat = false;
         this.hasRefreshed = false; // Flag to prevent endless loop
         this.conversationId = null;
+        this.userTokenProvider = options.userTokenProvider;
+
+        try {
+            this.targetOrigin = new URL(this.serverUrl).origin;
+        } catch {
+            this.targetOrigin = "*";
+        }
 
         // Determine transition styles
         const transitionStyle = this.enableAnimation ? 'transition: height 0.3s ease, opacity 0.3s ease;' : '';
@@ -70,40 +77,81 @@
         }
     }
 
-    init() {
-        this.updateIframes();
-        this.addEventListeners();
+    async init() {
+        await this.updateIframes();
     }
 
     async updateIframes() {
-        const cleanedServerUrl = this.serverUrl.endsWith('/') ? this.serverUrl.slice(0, -1) : this.serverUrl;
+        const cleanedServerUrl = this.serverUrl.endsWith('/')
+            ? 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 = `
+        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 params = {
+            isPreview: this.isPreview,
+            mode: this.mode,
+            locale: this.locale,
+            conversationId: this.conversationId
+        };
 
         const iframeHtml = `
-            <iframe id="embedded-chat" 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, { isPreview: this.isPreview, mode: this.mode, locale: this.locale, conversationId: this.conversationId })}"></iframe>
-            <iframe id="embedded-chat-minimized" style="${minimizedPositionStyle}; display: none; border:none; overflow:hidden;" frameborder="0" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="${this.buildIframeUrl(baseIframeUrl, { isPreview: this.isPreview, isMinimized: true, locale: this.locale, conversationId: this.conversationId })}"></iframe>
-        `;
-
+        <iframe
+            id="embedded-chat"
+            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"
+            style="${minimizedPositionStyle}; display: none; border:none; overflow:hidden;"
+            frameborder="0"
+            sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+            src="${this.buildIframeUrl(baseIframeUrl, { ...params, isMinimized: true })}"
+        ></iframe>
+    `;
+
+        // 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('#embedded-chat');
+        this.minimizedIframe = this.containerDiv.querySelector('#embedded-chat-minimized');
 
+        // wait for the real <iframe> element to load
         await this.waitForIframeLoad(this.iframe);
 
+        // now that this.iframe & this.minimizedIframe exist, hook up events
+        this.addEventListeners();
+
+        // Send auth to iframes after load
+        await this.postAuthToIframes();
+
+        // restore your ContactForm logic
         if (this.mode === 'ContactForm') {
-            this.iframe.style.maxWidth = "100%";
-            this.iframe.style.display = "block";
+            this.iframe.style.maxWidth = '100%';
+            this.iframe.style.display = 'block';
         }
     }
 
     addEventListeners() {
+        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;
+        }
         this.iframe.addEventListener("mouseenter", () => { this.mouseInsideChat = true; });
         this.iframe.addEventListener("mouseleave", () => { this.mouseInsideChat = false; });
         this.minimizedIframe.addEventListener("mouseenter", () => { this.mouseInsideChat = true; });
         this.minimizedIframe.addEventListener("mouseleave", () => { this.mouseInsideChat = false; });
 
         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);
         });
 
@@ -128,11 +176,26 @@
                 message: "resize",
                 width: window.innerWidth,  // Ensure correct size
                 height: window.innerHeight
-            }, "*");
+            }, this.targetOrigin);
         }
     }
 
     handleMessage(e) {
+        console.log('[EmbeddedChat] Received message:', {
+            origin: e.origin,
+            type: e.data?.type,
+            message: e.data?.message,
+            chatId: e.data?.chatId,
+            data: e.data
+        });
+
+        // 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');
+            this.postAuthToIframes();
+            return;
+        }
+
         if (typeof e.data === "object" && (!e.data.chatId || e.data.chatId === this.chatId)) {
             const updates = {};
 
@@ -332,12 +395,18 @@
     showMaximized(animate = false) {
         const schedulePostMessage = () => {
             if (this.iframe.contentWindow) {
-                this.iframe.contentWindow.postMessage({ message: "show" }, "*");
+                this.iframe.contentWindow.postMessage({
+                    message: "show",
+                    sessionInfo: this.sessionInfo || null
+                }, this.targetOrigin);
             } else {
                 // Schedule a single retry with a delay
                 setTimeout(() => {
                     if (this.iframe.contentWindow) {
-                        this.iframe.contentWindow.postMessage({ message: "show" }, "*");
+                        this.iframe.contentWindow.postMessage({
+                            message: "show",
+                            sessionInfo: this.sessionInfo || null
+                        }, this.targetOrigin);
                     } else {
                         console.warn("iframe contentWindow is not available.");
                     }
@@ -347,20 +416,17 @@
 
         if (animate) {
             this.animateMaximize();
-        }
-        else {
+        } else {
             this.minimizedIframe.style.display = "none";
             this.minimizedIframe.style.height = `${this.height}px`;
             this.minimizedIframe.style.opacity = ''; // Reset opacity to unset
 
             this.iframe.style.display = "block";
-
-
             this.iframe.style.height = `${this.height}px`;
             this.iframe.style.opacity = '1';
-
-            schedulePostMessage();
         }
+
+        schedulePostMessage();
     }
 
     applyScale(scale) {
@@ -380,17 +446,11 @@
 
     setSessionInfo(sessionInfo) {
         console.log('setSessionInfo called with sessionInfo:', sessionInfo);
-
         this.sessionInfo = sessionInfo;
 
-        const iframe = this.containerDiv.querySelector("#embedded-chat");
-
-        const postMessage = () => {
-            iframe.contentWindow.postMessage({ type: 'setSessionInfo', sessionInfo: sessionInfo }, "*");
-        };
-
-        if (iframe.style.display !== "none") {
-            postMessage();
+        // 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);
         }
     }
 
@@ -422,7 +482,7 @@
         }
 
         for (const [key, value] of Object.entries(params)) {
-            if (key !== 'mode' && key !== 'isPreview' && key !== 'conversationId' && value !== null && value !== undefined) {
+            if (key !== 'mode' && key !== 'isPreview' && key !== 'conversationId' && key !== 'userToken' && value !== null && value !== undefined) {
                 urlParams.set(key, value);
             }
         }
@@ -450,6 +510,41 @@
             }, { once: true }); // Ensure the listener is triggered only once
         });
     }
+
+    async postAuthToIframes() {
+        console.log('[EmbeddedChat] postAuthToIframes called');
+        if (typeof this.userTokenProvider !== 'function') {
+            console.warn('[EmbeddedChat] No userTokenProvider function provided');
+            return;
+        }
+
+        try {
+            console.log('[EmbeddedChat] Calling userTokenProvider...');
+            const userToken = await this.userTokenProvider();
+
+            if (!userToken) {
+                console.warn('[EmbeddedChat] userTokenProvider returned null/empty token');
+                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
+                }, 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);
+        }
+    }
 }
 
 export function initEmbeddedChat(containerDiv, chatId, options) {

package/package.json

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