embeddedaichatux 1.4.1 → 1.5.1

package/EmbeddedChat.js

@@ -11,10 +11,11 @@
         this.previewParam = this.isPreview ? "?isPreview=true" : "";
         this.serverUrl = this.options.serverUrl || 'https://embedgpt.chat/';
         this.height = options.height || 600; // Default height
-        this.width = options.width || 300;  // Default width
+        this.width = options.width || 320;  // Default width
         this.enableAnimation = options.enableAnimation !== false; // Default to true if not provided
         this.minimizedHeight = `${this.height * 0.3}px`; // 30% of the full height
         this.mouseInsideChat = false;
+        this.hasRefreshed = false; // Flag to prevent endless loop
 
         // Determine transition styles
         const transitionStyle = this.enableAnimation ? 'transition: height 0.3s ease, opacity 0.3s ease;' : '';
@@ -29,24 +30,56 @@
             this.positionStyle = `width:100%; height:${this.height}px; ${transitionStyle}`;
             this.containerDiv.style.height = `${this.height}px`;
         }
+
+        this.conversationId = this.getStoredConversationId();
+
         this.sessionInfo = options.sessionInfo || null;
         this.init();
     }
 
+    isSafari() {
+        var ua = navigator.userAgent.toLowerCase();
+        return ua.indexOf('safari') != -1 && ua.indexOf('chrome') == -1;
+    }
+
+    getStoredConversationId() {
+        try {
+            return localStorage.getItem(`conversationId_${this.chatId}`);
+        } catch (error) {
+            console.error('Error accessing localStorage:', error);
+            return null;
+        }
+    }
+
+    setStoredConversationId(conversationId) {
+        try {
+            localStorage.setItem(`conversationId_${this.chatId}`, conversationId);
+        } catch (error) {
+            console.error('Error accessing localStorage:', error);
+        }
+    }
+
     init() {
+        this.updateIframes();
+        this.addEventListeners();
+    }
+
+    updateIframes() {
         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 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" src="${this.buildIframeUrl(baseIframeUrl, { isPreview: this.isPreview, mode: this.mode, locale: this.locale })}"></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 })}"></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, { 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>
         `;
 
         this.containerDiv.innerHTML = iframeHtml;
         this.iframe = this.containerDiv.querySelector("#embedded-chat");
         this.minimizedIframe = this.containerDiv.querySelector("#embedded-chat-minimized");
+    }
 
+    addEventListeners() {
         // Add event listeners to track mouse position
         this.iframe.addEventListener("mouseenter", () => { this.mouseInsideChat = true; });
         this.iframe.addEventListener("mouseleave", () => { this.mouseInsideChat = false; });
@@ -83,6 +116,10 @@
                 if (this.sessionInfo !== null) {
                     this.setSessionInfo(this.sessionInfo);
                 }
+                if (e.data.message === "show" && e.data.conversationId) {
+                    this.conversationId = e.data.conversationId;
+                    this.setStoredConversationId(this.conversationId);
+                }
             }
         } else if (typeof e.data === "string") {
             if (e.data === "minimize") {
@@ -109,9 +146,20 @@
 
     showMaximized() {
         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";
+
+        if (this.isSafari() && !this.hasRefreshed) {
+            // Force refresh by resetting the iframe's src
+            const currentSrc = this.iframe.src;
+            this.iframe.src = '';  // Temporarily clear the src
+            this.iframe.src = currentSrc;  // Reset to the original src to trigger a reload
+            this.hasRefreshed = true; // Prevent endless loop
+        }
+
         this.iframe.style.height = `${this.height}px`;
         this.iframe.style.opacity = '1';
     }
@@ -157,7 +205,7 @@
     }
 
     buildIframeUrl(baseIframeUrl, params = {}) {
-        const urlParams = new URLSearchParams(params);
+        const urlParams = new URLSearchParams();
 
         if (params.isPreview) {
             urlParams.set('isPreview', 'true');
@@ -171,8 +219,12 @@
             urlParams.set('locale', params.locale);
         }
 
+        if (params.conversationId) {
+            urlParams.set('conversationId', params.conversationId);
+        }
+
         for (const [key, value] of Object.entries(params)) {
-            if (key !== 'mode' && key !== 'isPreview') {
+            if (key !== 'mode' && key !== 'isPreview' && key !== 'conversationId' && value !== null && value !== undefined) {
                 urlParams.set(key, value);
             }
         }

package/package.json

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