Azure · mcasalaina · May 15, 2024
@@ -1,6 +1,6 @@
-# `ai` chat website
+# `ai` chat website (TypeScript Version)
 
-This is a simple website chat interface that uses OpenAI's API to generate text responses to user input.
+This is a simple website chat interface that uses OpenAI's API to generate text responses to user input, now fully converted to TypeScript.
 
 User input is typed into a text box and added to the conversation as a message inside a chat panel. The panel scrolls up and the computer responds with streaming text output into another message in the chat panel. There is a left nav that has a "new chat" button and has a spot for future expansion w/ a list of historical chats.
 
@@ -10,7 +10,7 @@ To build the website, run the following commands:
 
 ```bash
 npm install
-npm run webpack
+npm run vite
 ```
 
 To run the website, launch `index.html` in your browser.
@@ -21,12 +21,12 @@ These setup steps are also represented in tasks.json and launch.json, so that yo
 
 | Category | File | Description
 | --- | --- | ---
-| **SOURCE CODE** | ai.png | Logo/icon for the website.
+| **SOURCE CODE** | favicon.png | Logo/icon for the website.
 | | index.html | HTML file with controls and layout.
 | | style.css | CSS file with layout and styling.
-| | src/script.js | Main JS file with HTML to JS interactions.
-| | src/OpenAIAssistantsFunctionsStreamingClass.js | Main JS file with JS to OpenAI interactions.
+| | src/index.ts | Main TS file with HTML to TS interactions.
+| | src/OpenAIAssistantsFunctionsStreamingClass.ts | Main TS file with TS to OpenAI interactions.
 | | |
 | **BUILD + PACKAGING** | .env | Contains the API keys, endpoints, etc.
 | | package.json | Contains the dependencies.
-| | webpack.config.js | The webpack config file.
+| | vite.config.ts | The Vite config file.
@@ -1,12 +1,12 @@
 {
   "_LongName": "OpenAI Assistants Webpage (w/ Functions)",
   "_ShortName": "openai-asst-webpage-with-functions",
-  "_Language": "JavaScript",
+  "_Language": "TypeScript",
 
   "ClassName": "OpenAIAssistantsFunctionsStreamingClass",
   "AZURE_OPENAI_AUTH_METHOD": "KEY",
   "USE_AZURE_OPENAI": "true",
 
   "_IS_BROWSER_TEMPLATE": "true",
   "_IS_OPENAI_ASST_TEMPLATE": "true"
-}
+}
@@ -2,10 +2,12 @@
 <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">
   <link rel="stylesheet" href="style.css">
+
   <title>Chat Interface</title>
 </head>
 
@@ -16,8 +18,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 +43,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 +55,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>
@@ -63,8 +65,7 @@ <h3>chat.contoso.com</h3>
     </div>
   </div>
 
-  <!-- JavaScript for dynamic updates -->
-  <script src="dist/main.js"></script>
+  <script type="module" src="/src/index.ts"></script>
 
 </body>
-</html>
+</html>
@@ -3,22 +3,23 @@
   "version": "1.0.0",
   "description": "Chat Interface with OpenAI",
   "main": "script.js",
+  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "webpack": "webpack"
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@azure/identity": "4.1.0",
     "highlight.js": "^11.7.2",
     "marked": "^4.0.10",
     "openai": "^4.31.0"
   },
   "keywords": [],
   "devDependencies": {
-    "dotenv-webpack": "^7.0.3",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4"
+    "@types/marked": "^6.0.0",
+    "vite": "^5.2.8"
   }
 }
@@ -1,17 +1,19 @@
 class FunctionFactory {
+  functions: { [name: string]: { schema: any; function: Function } };
+
   constructor() {
     this.functions = {};
   }
 
-  addFunction(schema, fun) {
+  addFunction(schema: any, fun: Function): void {
     this.functions[schema.name] = { schema: schema, function: fun };
   }
 
-  getFunctionSchemas() {
+  getFunctionSchemas(): any[] {
     return Object.values(this.functions).map(value => value.schema);
   }
 
-  getTools() {
+  getTools(): any[] {
     return Object.values(this.functions).map(value => {
       return {
         type: "function",
@@ -20,7 +22,7 @@ class FunctionFactory {
     });
   }
 
-  tryCallFunction(function_name, function_arguments) {
+  tryCallFunction(function_name: string, function_arguments: any): any {
     const function_info = this.functions[function_name];
     if (function_info === undefined) {
       return undefined;
@@ -33,4 +35,4 @@ class FunctionFactory {
   }
 }
 
-exports.FunctionFactory = FunctionFactory;
+export { FunctionFactory };
@@ -1,7 +1,7 @@
-const { FunctionFactory } = require("./FunctionFactory");
+import { FunctionFactory } from "./FunctionFactory";
 let factory = new FunctionFactory();
 
-function getCurrentWeather(function_arguments) {
+function getCurrentWeather(function_arguments: string): string {
     const location = JSON.parse(function_arguments).location;
     return `The weather in ${location} is 72 degrees and sunny.`;
   };
@@ -27,7 +27,7 @@ const getCurrentWeatherSchema = {
 
 factory.addFunction(getCurrentWeatherSchema, getCurrentWeather);
 
-function getCurrentDate() {
+function getCurrentDate(): string {
   const date = new Date();
   return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
 }
@@ -43,7 +43,7 @@ const getCurrentDateSchema = {
 
 factory.addFunction(getCurrentDateSchema, getCurrentDate);
 
-function getCurrentTime() {
+function getCurrentTime(): string {
   const date = new Date();
   return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
 }
@@ -59,4 +59,4 @@ const getCurrentTimeSchema = {
 
 factory.addFunction(getCurrentTimeSchema, getCurrentTime);
 
-exports.factory = factory;
+export { factory };
@@ -1,9 +1,9 @@
-const { OpenAI } = require('openai');
+import { OpenAI } from 'openai';
 
-class {ClassName} {
+class OpenAIAssistantsFunctionsStreamingClass {
 
   // Constructor
-  constructor(openAIAssistantId, functionFactory, openai, simulateTypingDelay = 0) {
+  constructor(private openAIAssistantId: string, private functionFactory: any, private openai: OpenAI, private simulateTypingDelay: number = 0) {
     this.simulateTypingDelay = simulateTypingDelay;
     this.openAIAssistantId = openAIAssistantId;
     this.functionFactory = functionFactory;
@@ -19,14 +19,14 @@ class {ClassName} {
   }
 
   // Retrieve an existing thread
-  async retrieveThread(threadId) {
+  async retrieveThread(threadId: string) {
     this.thread =await this.openai.beta.threads.retrieve(threadId);
     console.log(`Thread ID: ${this.thread.id}`);
     return this.thread;
   }
 
   // Get the messages in the thread
-  async getThreadMessages(callback) {
+  async getThreadMessages(callback: (role: string, content: string) => void) {
 
     const messages = await this.openai.beta.threads.messages.list(this.thread.id);
     messages.data.reverse();
@@ -38,7 +38,7 @@ class {ClassName} {
   }
 
   // Get the response from the Assistant
-  async getResponse(userInput, callback) {
+  async getResponse(userInput: string, callback: (content: string) => void) {
 
     if (this.thread == null) {
       await this.createThread();
@@ -61,9 +61,9 @@ class {ClassName} {
   }
 
   // Handle the stream events
-  async handleStreamEvents(stream, callback) {
-    stream.on('textDelta', async (textDelta, snapshot) => await this.onTextDelta(textDelta, callback));
-    stream.on('event', async (event) => {
+  async handleStreamEvents(stream: any, callback: (content: string) => void) {
+    stream.on('textDelta', async (textDelta: any, snapshot: any) => await this.onTextDelta(textDelta, callback));
+    stream.on('event', async (event: any) => {
       if (event.event == 'thread.run.completed') {
         this.resolveRunCompletedPromise();
       }
@@ -77,7 +77,7 @@ class {ClassName} {
     });
   }
 
-  async onTextDelta(textDelta, callback) {
+  async onTextDelta(textDelta: any, callback: (content: string) => void) {
     let content = textDelta.value;
     if (content != null) {
       if(callback != null) {
@@ -89,7 +89,7 @@ class {ClassName} {
     }
   }
 
-  async onThreadRunRequiresAction(event, callback) {
+  async onThreadRunRequiresAction(event: any, callback: (content: string) => void) {
     let toolCalls = event.data?.required_action?.submit_tool_outputs?.tool_calls;
     if (toolCalls != null) {
       let tool_outputs = this.getToolOutputs(toolCalls);
@@ -98,7 +98,7 @@ class {ClassName} {
     }
   }
 
-  getToolOutputs(toolCalls) {
+  getToolOutputs(toolCalls: any[]) {
     let tool_outputs = [];
     for (let toolCall of toolCalls) {
       if (toolCall.type == 'function') {
@@ -113,4 +113,4 @@ class {ClassName} {
   }
 }
 
-exports.{ClassName} = {ClassName};
+export { OpenAIAssistantsFunctionsStreamingClass };