embeddedaichatux 1.0.1 → 1.0.5

package/AIChat.npm.csproj

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

package/EmbeddedChat.js

@@ -1,44 +1,75 @@
+// embeddedChat.js
 class EmbeddedChat {
     constructor(containerDiv, chatId, options) {
+        if (!containerDiv) {
+            containerDiv = this.createChatContainer();
+        }
         this.containerDiv = containerDiv;
         this.chatId = chatId;
         this.options = options || {};
-        this.avatarImage = this.options.avatarImage || '/img/avatar.jpg';
         this.isPreview = this.options.isPreview || false;
         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';
         this.init();
     }
 
     init() {
+        const cleanedServerUrl = this.serverUrl.endsWith('/') ? this.serverUrl.slice(0, -1) : this.serverUrl;
+        const baseIframeUrl = `${cleanedServerUrl}/ChatUX/${this.chatId}`;
+        const previewQueryString = this.isPreview ? "?isPreview=true" : "";
+        const minimizedQueryString = this.isPreview ? "&isMinimized=true" : "?isMinimized=true";
+
+        const minimizedPositionStyle = 'position: fixed; right: 0; bottom: 0; width: 300px; height: 70px;';
+
         const iframeHtml = `
-            <div id="embedded-chat-minimized" class="container" style="color:#43636e;width:100%; position: fixed; right: 0; bottom: 0; width: 300px; height: 50px; padding-top: 10px;padding-left: 100px;">
-                <img title="Chat" src="${this.avatarImage}" style="height:40px; border-radius: 50%;" />
-                <button id="embedded-chat-now" class="btn btn-primary">Chat Now</button>
-            </div>
-            <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="https://embedgpt.chat/ChatUX/${this.chatId}${this.previewParam}"></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="${baseIframeUrl}${previewQueryString}"></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="${baseIframeUrl}${previewQueryString}${minimizedQueryString}"></iframe>
+    `;
 
         this.containerDiv.innerHTML = iframeHtml;
         this.iframe = this.containerDiv.querySelector("#embedded-chat");
-        this.minimizedDiv = this.containerDiv.querySelector("#embedded-chat-minimized");
-        this.chatNowButton = this.containerDiv.querySelector("#embedded-chat-now");
-
-        this.chatNowButton.addEventListener("click", () => {
-            this.iframe.style.display = "block";
-            this.minimizedDiv.style.display = "none";
-        });
+        this.minimizedIframe = this.containerDiv.querySelector("#embedded-chat-minimized");
 
         window.addEventListener("message", (e) => {
-            if (e.data === "minimize") {
-                this.iframe.style.display = "none";
-                this.minimizedDiv.style.display = "block";
-            } else if (e.data === "show") {
-                this.iframe.style.display = "block";
-                this.minimizedDiv.style.display = "none";
+            // Check if the data is an object and has a message property
+            if (typeof e.data === "object" && e.data.message) {
+                if (e.data.message === "minimize") {
+                    this.iframe.style.display = "none";
+                    this.minimizedIframe.style.display = "block";
+                } 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) {
+                        // Resize the iframe according to the scale factor
+                        this.iframe.style.transform = `scale(${e.data.scale})`;
+                        this.iframe.style.transformOrigin = "bottom right";
+                    }
+                }
+            }
+            // 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";
+                }
             }
         });
     }
+
+
+
+    createChatContainer() {
+        const chatContainer = document.createElement('div');
+        chatContainer.className = 'embedded-chat-container';
+        chatContainer.style.position = 'relative';
+        document.body.appendChild(chatContainer);
+        return chatContainer;
+    }
 }
 
 export function initEmbeddedChat(containerDiv, chatId, options) {

package/README.md

@@ -4,4 +4,11 @@ A lightweight and customizable embedded chat UI component that seamlessly integr
 
 ## Installation
 
-npm install aichatembedded
+To update
+1. Modify the version in package.json
+1. NPM login
+1. npm publish
+
+NPM: https://www.npmjs.com/settings/aichatepicenter/packages 
+
+

package/bin/Debug/net7.0/package.json

@@ -1,6 +1,6 @@
 {
   "name": "embeddedaichatux",
-  "version": "1.0.1",
+  "version": "1.0.5",
   "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": {

package/obj/Debug/net7.0/AIChat.npm.csproj.FileListAbsolute.txt

@@ -1,7 +1,6 @@
 C:\Git\AIChat\AIChat.npm\bin\Debug\net7.0\appsettings.Development.json
 C:\Git\AIChat\AIChat.npm\bin\Debug\net7.0\appsettings.json
 C:\Git\AIChat\AIChat.npm\bin\Debug\net7.0\package.json
-C:\Git\AIChat\AIChat.npm\bin\Debug\net7.0\AIChat.npm.staticwebassets.runtime.json
 C:\Git\AIChat\AIChat.npm\bin\Debug\net7.0\AIChat.npm.exe
 C:\Git\AIChat\AIChat.npm\bin\Debug\net7.0\AIChat.npm.deps.json
 C:\Git\AIChat\AIChat.npm\bin\Debug\net7.0\AIChat.npm.runtimeconfig.json

package/obj/Debug/net7.0/staticwebassets.build.json

@@ -1,19 +1,11 @@
 {
   "Version": 1,
-  "Hash": "tgwDmMv0sNqFpS/YhU/JuTb1QFLHbsjUk/iZBXYCB2Y=",
+  "Hash": "XERhvELNAMUvgNoh15s4mBH/fub4TdCl8jFj3CODgig=",
   "Source": "AIChat.npm",
   "BasePath": "_content/AIChat.npm",
   "Mode": "Default",
   "ManifestType": "Build",
   "ReferencedProjectsConfiguration": [],
-  "DiscoveryPatterns": [
-    {
-      "Name": "AIChat.npm\\wwwroot",
-      "Source": "AIChat.npm",
-      "ContentRoot": "C:\\Git\\AIChat\\AIChat.npm\\wwwroot\\",
-      "BasePath": "_content/AIChat.npm",
-      "Pattern": "**"
-    }
-  ],
+  "DiscoveryPatterns": [],
   "Assets": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "embeddedaichatux",
-  "version": "1.0.1",
+  "version": "1.0.5",
   "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": {

package/bin/Debug/net7.0/AIChat.npm.staticwebassets.runtime.json

@@ -1 +0,0 @@
-{"ContentRoots":["C:\\Git\\AIChat\\AIChat.npm\\wwwroot\\"],"Root":{"Children":null,"Asset":null,"Patterns":[{"ContentRootIndex":0,"Pattern":"**","Depth":0}]}}

package/obj/Debug/net7.0/staticwebassets.development.json

@@ -1 +0,0 @@
-{"ContentRoots":["C:\\Git\\AIChat\\AIChat.npm\\wwwroot\\"],"Root":{"Children":null,"Asset":null,"Patterns":[{"ContentRootIndex":0,"Pattern":"**","Depth":0}]}}