migrate openai-asst-webpage-js to vite/esm

Azure · Apr 16, 2024 · 541f7ea · 541f7ea
1 parent b397dbe
commit 541f7ea
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 48 deletions.
diff --git a/src/ai/.x/templates/openai-asst-webpage-js/.env b/src/ai/.x/templates/openai-asst-webpage-js/.env
@@ -15,4 +15,4 @@ AZURE_OPENAI_ENDPOINT=<#= AZURE_OPENAI_ENDPOINT #>
 AZURE_OPENAI_CHAT_DEPLOYMENT=<#= AZURE_OPENAI_CHAT_DEPLOYMENT #>
 OPENAI_API_KEY=<#= OPENAI_API_KEY #>
 OPENAI_ORG_ID=<#= OPENAI_ORG_ID #>
-OPENAI_MODEL_NAME=<#= OPENAI_MODEL_NAME #>
+OPENAI_MODEL_NAME=<#= OPENAI_MODEL_NAME #>
diff --git a/...x/templates/openai-asst-webpage-js/ai.png → ...plates/openai-asst-webpage-js/favicon.png b/...x/templates/openai-asst-webpage-js/ai.png → ...plates/openai-asst-webpage-js/favicon.png
diff --git a/src/ai/.x/templates/openai-asst-webpage-js/index.html b/src/ai/.x/templates/openai-asst-webpage-js/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <link rel="icon" type="image/x-icon" href="favicon.png">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@@ -16,8 +17,8 @@
     </div>
 
     <div id="leftSide" class="w3-cell w3-center w3-hide-small w3-hide-medium">
-      <button id="newChatButton" class="w3-button w3-center" onclick="newChat()">
-        <div class="w3-left w3-medium"><img id="logoIcon" src="./ai.png" alt="Logo"> New chat</div>
+      <button id="newChatButton" class="w3-button w3-center">
+        <div class="w3-left w3-medium"><img id="logoIcon" src="./favicon.png" alt="Logo"> New chat</div>
         <div class="w3-right"><i class="fa fa-edit"></i></div>
       </button>
 
@@ -41,7 +42,7 @@ <h3>chat.contoso.com</h3>
         <!-- Main Chat Area -->
         <div id="main" class="w3-center">
           <div class="w3-col">
-            <img id="logo" src="./ai.png" alt="Logo">
+            <img id="logo" src="./favicon.png" alt="Logo">
 
             <!-- Chat Panel -->
             <div id="chatPanel" class="w3-center w3-padding">
@@ -53,7 +54,7 @@ <h3>chat.contoso.com</h3>
         <!-- User Input Panel -->
         <div id="userInputPanel" class="w3-center w3-bottom w3-padding w3-margin-bottom">
           <textarea id="userInput" class="w3-border w3-input w3-cell w3-left" placeholder="Type your message..." rows="1"></textarea>
-          <button id="sendButton" class="w3-button w3-cell" onclick="sendMessage()">
+          <button id="sendButton" class="w3-button w3-cell">
             <i class="fa fa-solid fa-arrow-up"></i>
           </button>
         </div>
@@ -64,7 +65,7 @@ <h3>chat.contoso.com</h3>
   </div>
 
   <!-- JavaScript for dynamic updates -->
-  <script src="dist/main.js"></script>
+  <script type="module" src="/src/script.js"></script>
 
 </body>
 </html>
diff --git a/src/ai/.x/templates/openai-asst-webpage-js/package.json b/src/ai/.x/templates/openai-asst-webpage-js/package.json
@@ -5,7 +5,9 @@
   "main": "script.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "webpack": "webpack"
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "author": "",
   "license": "MIT",
@@ -16,8 +18,6 @@
   },
   "keywords": [],
   "devDependencies": {
-    "dotenv-webpack": "^7.0.3",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4"
+    "vite": "^5.2.8"
   }
-}
+}
diff --git a/src/ai/.x/templates/openai-asst-webpage-js/src/OpenAIAssistantsStreamingClass.js b/src/ai/.x/templates/openai-asst-webpage-js/src/OpenAIAssistantsStreamingClass.js
@@ -1,9 +1,7 @@
 <#@ template hostspecific="true" #>
 <#@ output extension=".js" encoding="utf-8" #>
 <#@ parameter type="System.String" name="ClassName" #>
-const { OpenAI } = require('openai');
-
-class <#= ClassName #> {
+export class <#= ClassName #> {
 
   // Constructor
   constructor(openAIAssistantId, openai, simulateTypingDelay = 0) {

diff --git a/src/ai/.x/templates/openai-asst-webpage-js/src/script.js b/src/ai/.x/templates/openai-asst-webpage-js/src/script.js
@@ -9,11 +9,11 @@
 <#@ parameter type="System.String" name="OPENAI_API_KEY" #>
 <#@ parameter type="System.String" name="OPENAI_ORG_ID" #>
 <#@ parameter type="System.String" name="OPENAI_MODEL_NAME" #>
-const marked = require("marked");
-const hljs = require("highlight.js");
+import { setOptions, parse } from "marked";
+import * as hljs from "highlight.js";
 
-const { CreateOpenAI } = require("./CreateOpenAI");
-const { <#= ClassName #> } = require("./OpenAIAssistantsStreamingClass");
+import { CreateOpenAI } from "./CreateOpenAI";
+import { <#= ClassName #> } from "./OpenAIAssistantsStreamingClass";
 
 // NOTE: Never deploy your key in client-side environments like browsers or mobile apps
 //  SEE: https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety
@@ -506,10 +506,8 @@ async function init() {
 
   userInputTextAreaFocus();
 
-  window.newChat = newChat;
-  window.loadThread = loadThread;
-  window.sendMessage = sendMessage;
-  window.toggleTheme = toggleTheme;
+  document.querySelector('#sendButton').addEventListener('click', sendMessage);
+  document.querySelector('#newChatButton').addEventListener('click', newChat);
 }
 
-init();
+window.addEventListener('DOMContentLoaded', init);
diff --git a/src/ai/.x/templates/openai-asst-webpage-js/vite.config.js b/src/ai/.x/templates/openai-asst-webpage-js/vite.config.js
@@ -0,0 +1,3 @@
+export default {
+  envPrefix: ["ASSISTANT_ID", "AZURE_", "OPENAI_"],
+};
diff --git a/src/ai/.x/templates/openai-asst-webpage-js/webpack.config.js b/src/ai/.x/templates/openai-asst-webpage-js/webpack.config.js