embeddedaichatux 1.3.2 → 1.4.1

package/EmbeddedChat.js

@@ -1,5 +1,4 @@
-// embeddedChat.js
-class EmbeddedChat {
+class EmbeddedChat {
     constructor(containerDiv, chatId, options) {
         if (!containerDiv) {
             containerDiv = this.createChatContainer();
@@ -11,12 +10,24 @@ class EmbeddedChat {
         this.locale = options.locale || 'en';
         this.previewParam = this.isPreview ? "?isPreview=true" : "";
         this.serverUrl = this.options.serverUrl || 'https://embedgpt.chat/';
-        this.positionStyle = this.containerDiv.dataset.position === 'in-place' ? 'width:100%; height:600px' : 'position: fixed; right: 0; bottom: 0; width: 300px; height: 600px; z-index: 100000';
+        this.height = options.height || 600; // Default height
+        this.width = options.width || 300;  // 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;
+
+        // 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: 0; bottom: 0; width: ${this.width}px; height: ${this.height}px; z-index: 100000; ${transitionStyle}`;
         this.mode = options.mode || 'Chat'; // default to 'chat' if mode isn't provided
+        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:600px';
-            this.containerDiv.style.height = '600px';
+            this.positionStyle = `width:100%; height:${this.height}px; ${transitionStyle}`;
+            this.containerDiv.style.height = `${this.height}px`;
         }
         this.sessionInfo = options.sessionInfo || null;
         this.init();
@@ -25,74 +36,113 @@ class EmbeddedChat {
     init() {
         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: 300px; height: 70px; z-index: 100000';
+        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" 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>
+        `;
 
         this.containerDiv.innerHTML = iframeHtml;
         this.iframe = this.containerDiv.querySelector("#embedded-chat");
         this.minimizedIframe = this.containerDiv.querySelector("#embedded-chat-minimized");
 
+        // Add event listeners to track mouse position
+        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) => {
-            // Check if the data is an object and has a message property
-            if (typeof e.data === "object" && e.data.message && (!e.data.chatId || e.data.chatId === this.chatId)) {
+            this.handleMessage(e);
+        });
+
+        window.addEventListener("scroll", () => {
+            if (this.minimizeOnScroll && !this.mouseInsideChat) {
+                this.minimizeOnScrollAction();
+            }
+        });
+    }
+
+    handleMessage(e) {
+        if (typeof e.data === "object" && (!e.data.chatId || e.data.chatId === this.chatId)) {
+            if (e.data.type === "setMinimizeOnScroll") {
+                this.minimizeOnScroll = e.data.value === "true";
+            }
+            if (e.data.message) {
                 if (e.data.message === "minimize") {
                     if (this.mode !== 'ContactForm') {
-                        // No minimize support for ContactForm
-                        this.iframe.style.display = "none";
-                        this.minimizedIframe.style.display = "block";
+                        this.animateMinimize();
                     }
                 } else if (e.data.message === "show" || e.data.message === "maximize") {
-                    this.iframe.style.display = "block";
-                    this.minimizedIframe.style.display = "none";
-                    // Check if the data has a scale property
-                    if (e.data.scale) {
-                        if (this.mode !== 'ContactForm') {
-                            // No scaling support for ContactForm
-
-                            // Resize the iframe according to the scale factor
-                            this.iframe.style.transform = `scale(${e.data.scale})`;
-                            this.iframe.style.transformOrigin = "bottom right";
-                        }
-                    }
-                    // Send sessionInfo if available
-                    if (this.sessionInfo !== null) {
-                        this.setSessionInfo(this.sessionInfo);
-                    }
+                    this.showMaximized();
                 }
-            }
-            // For backward compatibility, handle the case when the data is a string
-            else if (typeof e.data === "string") {
-                if (e.data === "minimize") {
-                    this.iframe.style.display = "none";
-                    this.minimizedIframe.style.display = "block";
-                } else if (e.data === "show" || e.data === "maximize") {
-                    this.iframe.style.display = "block";
-                    this.minimizedIframe.style.display = "none";
+                if (e.data.scale) {
+                    this.applyScale(e.data.scale);
+                }
+                if (this.sessionInfo !== null) {
+                    this.setSessionInfo(this.sessionInfo);
                 }
             }
-        });
+        } else if (typeof e.data === "string") {
+            if (e.data === "minimize") {
+                this.animateMinimize();
+            } else if (e.data === "show" || e.data === "maximize") {
+                this.showMaximized();
+            }
+        }
+    }
+
+    animateMinimize() {
+        if (this.mode !== 'ContactForm') {
+            this.iframe.style.height = this.minimizedHeight;
+            this.iframe.style.opacity = '0'; // Full transparency at the end
+            setTimeout(() => {
+                this.iframe.style.display = "none";
+                this.iframe.style.opacity = '1'; // Reset opacity to 1 for next time
+                this.minimizedIframe.style.display = "block";
+                this.minimizedIframe.style.height = this.minimizedHeight;
+                this.minimizedIframe.style.opacity = '1'; // Reset opacity to 1
+            }, this.enableAnimation ? 300 : 0); // Match the transition duration
+        }
+    }
+
+    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";
+        this.iframe.style.height = `${this.height}px`;
+        this.iframe.style.opacity = '1';
+    }
+
+    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";
+        }
+    }
+
+    minimizeOnScrollAction() {
+        if (this.mode !== 'ContactForm' && this.iframe.style.display !== "none") {
+            this.animateMinimize();
+        }
     }
 
     setSessionInfo(sessionInfo) {
         console.log('setSessionInfo called with sessionInfo:', sessionInfo);
 
-        // Store the new sessionInfo
         this.sessionInfo = sessionInfo;
 
-        // Obtain the iframe element
         const iframe = this.containerDiv.querySelector("#embedded-chat");
 
-        // Function to post the message with a structured object
         const postMessage = () => {
             console.log('Posting message to iframe:', { type: 'setSessionInfo', sessionInfo: sessionInfo });
             iframe.contentWindow.postMessage({ type: 'setSessionInfo', sessionInfo: sessionInfo }, "*");
         };
 
-        // If the iframe is visible, post the message
         if (iframe.style.display !== "none") {
             postMessage();
         }
@@ -109,7 +159,6 @@ class EmbeddedChat {
     buildIframeUrl(baseIframeUrl, params = {}) {
         const urlParams = new URLSearchParams(params);
 
-        // Add parameters as needed, based on values in the params object
         if (params.isPreview) {
             urlParams.set('isPreview', 'true');
         }
@@ -122,9 +171,8 @@ class EmbeddedChat {
             urlParams.set('locale', params.locale);
         }
 
-        // Handle other parameters directly from the params object
         for (const [key, value] of Object.entries(params)) {
-            if (key !== 'mode' && key !== 'isPreview') { // Avoid duplicates
+            if (key !== 'mode' && key !== 'isPreview') {
                 urlParams.set(key, value);
             }
         }
@@ -138,6 +186,6 @@ export function initEmbeddedChat(containerDiv, chatId, options) {
 }
 
 export function initContactForm(containerDiv, chatId, options) {
-    const clonedOptions = { ...options, mode: 'ContactForm' }; // Clone with spread syntax
+    const clonedOptions = { ...options, mode: 'ContactForm' };
     return new EmbeddedChat(containerDiv, chatId, clonedOptions);
 }

package/package.json

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