embeddedaichatux 1.6.0 → 1.7.1

package/EmbeddedChat.js

@@ -23,8 +23,8 @@
 
         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; max-height:80%; ${transitionStyle}`;
-        this.mode = options.mode || 'Chat'; // default to 'chat' if mode isn't provided
+            `position: fixed; right: 1em; bottom: 0; width: ${this.width}px; height: ${this.height}px; z-index: 100000; max-width:80%; ${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'
@@ -33,7 +33,6 @@
         }
 
         this.conversationId = this.getStoredConversationId();
-
         this.sessionInfo = options.sessionInfo || null;
         this.init();
     }
@@ -65,7 +64,6 @@
         const previousId = this.conversationId || 'null';
 
         if (newConversationId !== previousId) {
-            // Separate block for changes to allow breakpoint placement
             this.conversationId = newConversationId;
             this.setStoredConversationId(newConversationId);
         }
@@ -76,7 +74,7 @@
         this.addEventListeners();
     }
 
-    updateIframes() {
+    async 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;' : ''}`;
@@ -89,10 +87,11 @@
         this.containerDiv.innerHTML = iframeHtml;
         this.iframe = this.containerDiv.querySelector("#embedded-chat");
         this.minimizedIframe = this.containerDiv.querySelector("#embedded-chat-minimized");
+
+        await this.waitForIframeLoad(this.iframe);
     }
 
     addEventListeners() {
-        // 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; });
@@ -111,30 +110,47 @@
 
     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";
+            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";
+            }
+
+            // Collect updates for locale, width, and scale
+            if (e.data.locale) {
+                updates.locale = e.data.locale;
             }
+            if (e.data.width) {
+                updates.width = e.data.width;
+            }
+            if (e.data.scale) {
+                updates.scale = e.data.scale;
+            }
+
+            // Apply iframe updates (locale, width, scale) 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") {
-                    this.showMaximized();
-                }
-                if (e.data.scale) {
-                    this.applyScale(e.data.scale);
-                }
-                if (this.sessionInfo !== null) {
-                    this.setSessionInfo(this.sessionInfo);
+                    const animate = e.data.animate === true;
+                    this.showMaximized(animate);
                 }
             }
 
-            // Check and update conversationId after processing other conditions
+            // Handle conversationId update
             if (e.data.conversationId) {
                 this.setConversationId(e.data.conversationId);
             }
         } 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") {
@@ -146,37 +162,107 @@
     animateMinimize() {
         if (this.mode !== 'ContactForm') {
             this.iframe.style.height = this.minimizedHeight;
-            this.iframe.style.opacity = '0'; // Full transparency at the end
+            this.iframe.style.opacity = '0';
             setTimeout(() => {
                 this.iframe.style.display = "none";
-                this.iframe.style.opacity = '1'; // Reset opacity to 1 for next time
+                this.iframe.style.opacity = '1';
                 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
+                this.minimizedIframe.style.opacity = '1';
+            }, this.enableAnimation ? 300 : 0);
         }
     }
 
-    showMaximized() {
-        this.minimizedIframe.style.display = "none";
+    animateMaximize() {
+        if (this.mode !== 'ContactForm') {
+            // Start the animation for minimizing iframe
+            this.minimizedIframe.style.height = `${this.height}px`;
+            this.minimizedIframe.style.opacity = '0';
+
+            setTimeout(() => {
+                // Hide the minimized iframe
+                this.minimizedIframe.style.display = "none";
+                this.minimizedIframe.style.opacity = '1'; // Reset opacity
+
+                // Show and animate the main iframe
+                this.iframe.style.display = "block";
+                this.iframe.style.height = this.minimizedHeight; // Start with minimized height
+                this.iframe.style.opacity = '0'; // Start with zero opacity
+
+                // Trigger the maximize animation
+                setTimeout(() => {
+                    this.iframe.style.height = `${this.height}px`; // Animate to full height
+                    this.iframe.style.opacity = '1'; // Animate opacity to full
+                }, 10); // Small delay to allow display changes to take effect
+            }, this.enableAnimation ? 300 : 0); // Match the minimize animation duration
+        }
+    }
+
+    applyIframeUpdates({ locale, width, scale } = {}) {
+        // Update locale if provided and different (but do not update the iframe URL)
+        if (locale && typeof locale === 'string' && locale !== this.locale) {
+            this.locale = locale;
+            console.log(`Locale stored locally: ${this.locale}`);
+        }
+
+        // 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);
+            console.log(`Width updated to: ${this.width}px`);
+
+            // Apply width to container
+            this.containerDiv.style.width = `${this.width}px`;
 
-        this.minimizedIframe.style.height = `${this.height}px`;
-        this.minimizedIframe.style.opacity = ''; // Reset opacity to unset
+            // Apply width to the main iframe
+            if (this.iframe) {
+                this.iframe.style.width = `${this.width}px`;
+            }
 
-        this.iframe.style.display = "block";
+            // Apply width to the minimized iframe
+            if (this.minimizedIframe) {
+                this.minimizedIframe.style.width = `${this.width}px`;
+            }
+        }
 
-        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
+        // 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";
+            }
+            console.log(`Scale applied: ${scale}`);
         }
+    }
 
-        this.iframe.style.height = `${this.height}px`;
-        this.iframe.style.opacity = '1';
 
-        this.iframe.contentWindow.postMessage({ message: "show" }, "*");
+    showMaximized(animate = false) {
+        if (animate) {
+            this.animateMaximize();
+        }
+        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";
+
+            if (this.isSafari() && !this.hasRefreshed) {
+                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';
+
+            this.iframe.contentWindow.postMessage({ message: "show" }, "*");
+        }
     }
 
     applyScale(scale) {
@@ -245,6 +331,27 @@
 
         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;
+            }
+
+            // Set up a timeout to avoid waiting indefinitely
+            const timeoutId = setTimeout(() => {
+                reject(new Error('Iframe did not load within the timeout period.'));
+            }, timeout);
+
+            // Add the load event listener
+            iframe.addEventListener('load', () => {
+                clearTimeout(timeoutId); // Clear the timeout
+                resolve();
+            }, { once: true }); // Ensure the listener is triggered only once
+        });
+    }
 }
 
 export function initEmbeddedChat(containerDiv, chatId, options) {

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "embeddedaichatux",
-  "version": "1.6.0",
+  "version": "1.7.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": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "EmbedGPT.chat, LLC",
-  "license": "MIT"
+  "license": "MIT",
+  "files": [
+    "EmbeddedChat.js"
+  ]
 }

package/AIChat.npm.csproj

@@ -1,29 +0,0 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
-
-  <PropertyGroup>
-    <TargetFramework>net7.0</TargetFramework>
-    <Nullable>enable</Nullable>
-    <ImplicitUsings>enable</ImplicitUsings>
-  </PropertyGroup>
-
-  <Target Name="CopyCommonWebFiles" BeforeTargets="Build">
-    <ItemGroup>
-      <_CommonWebJsFiles Include="..\AIChat.Web\wwwroot\js\EmbeddedChat.js" />
-    </ItemGroup>
-
-    <Copy SourceFiles="@(_CommonWebJsFiles)" DestinationFolder="$(MSBuildProjectDirectory)" SkipUnchangedFiles="true" />
-  </Target>
-
-  <ItemGroup>
-    <None Remove="EmbeddedChat.js" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <Content Include="EmbeddedChat.js">
-      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
-      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
-    </Content>
-  </ItemGroup>
-
-
-</Project>

package/AIChat.npm.csproj.user

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
-  <PropertyGroup>
-    <ActiveDebugProfile>https</ActiveDebugProfile>
-  </PropertyGroup>
-</Project>

package/AIChat.npm.sln

@@ -1,25 +0,0 @@
-
-Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio Version 17
-VisualStudioVersion = 17.7.34024.191
-MinimumVisualStudioVersion = 10.0.40219.1
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AIChat.npm", "AIChat.npm.csproj", "{37DB7D9F-39C4-428D-A205-7E78FAB8BB25}"
-EndProject
-Global
-	GlobalSection(SolutionConfigurationPlatforms) = preSolution
-		Debug|Any CPU = Debug|Any CPU
-		Release|Any CPU = Release|Any CPU
-	EndGlobalSection
-	GlobalSection(ProjectConfigurationPlatforms) = postSolution
-		{37DB7D9F-39C4-428D-A205-7E78FAB8BB25}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{37DB7D9F-39C4-428D-A205-7E78FAB8BB25}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{37DB7D9F-39C4-428D-A205-7E78FAB8BB25}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{37DB7D9F-39C4-428D-A205-7E78FAB8BB25}.Release|Any CPU.Build.0 = Release|Any CPU
-	EndGlobalSection
-	GlobalSection(SolutionProperties) = preSolution
-		HideSolutionNode = FALSE
-	EndGlobalSection
-	GlobalSection(ExtensibilityGlobals) = postSolution
-		SolutionGuid = {33D9F6CE-532F-4C22-AAAD-2D8B3BB56596}
-	EndGlobalSection
-EndGlobal

package/Properties/launchSettings.json

@@ -1,37 +0,0 @@
-{
-  "iisSettings": {
-    "windowsAuthentication": false,
-    "anonymousAuthentication": true,
-    "iisExpress": {
-      "applicationUrl": "http://localhost:27434",
-      "sslPort": 44389
-    }
-  },
-  "profiles": {
-    "http": {
-      "commandName": "Project",
-      "dotnetRunMessages": true,
-      "launchBrowser": true,
-      "applicationUrl": "http://localhost:5103",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
-    },
-    "https": {
-      "commandName": "Project",
-      "dotnetRunMessages": true,
-      "launchBrowser": true,
-      "applicationUrl": "https://localhost:7299;http://localhost:5103",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
-    },
-    "IIS Express": {
-      "commandName": "IISExpress",
-      "launchBrowser": true,
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
-    }
-  }
-}