glecaros · glecaros · Apr 26, 2024 · Apr 26, 2024 · Apr 26, 2024 · Apr 26, 2024
diff --git a/Backend/Services/SemanticKernelApp.cs b/Backend/Services/SemanticKernelApp.cs
@@ -58,25 +58,28 @@ internal SemanticKernelSession(Kernel kernel, IDistributedCache cache, Guid sess
         Id = sessionId;
     }
 
-    public async Task<AIChatCompletion> ProcessRequest(AIChatRequest message)
-    {
-        const string prompt = @"
+    const string prompt = @"
         ChatBot can have a conversation with you about any topic.
         It can give explicit instructions or say 'I don't know' if it does not know the answer.
 
         {{$history}}
         User: {{$userInput}}
         ChatBot:";
-        /* TODO: Add settings. */
+
+    public async Task<AIChatCompletion> ProcessRequest(AIChatRequest message)
+    {
+        var cacheKey = Id.ToString();
         var chatFunction = _kernel.CreateFunctionFromPrompt(prompt);
         var userInput = message.Messages.Last();
-        string history = await _cache.GetStringAsync(Id.ToString()) ?? "";
+        string history = await _cache.GetStringAsync(cacheKey) ?? "";
         var arguments = new KernelArguments()
         {
             ["history"] = history,
             ["userInput"] = userInput.Content,
         };
         var botResponse = await chatFunction.InvokeAsync(_kernel, arguments);
+        var updatedHistory = $"{history}\nUser: {userInput.Content}\nChatBot: {botResponse}";
+        await _cache.SetStringAsync(cacheKey, updatedHistory);
         return new AIChatCompletion(Message: new AIChatMessage
         {
             Role = AIChatRole.Assistant,
@@ -89,15 +92,7 @@ ChatBot can have a conversation with you about any topic.
 
     public async IAsyncEnumerable<AIChatCompletionDelta> ProcessStreamingRequest(AIChatRequest message)
     {
-        const string prompt = @"
-        ChatBot can have a conversation with you about any topic.
-        It can give explicit instructions or say 'I don't know' if it does not know the answer.
-
-        {{$history}}
-        User: {{$userInput}}
-        ChatBot:";
-        /* TODO: Add settings. */
-        string cacheKey = Id.ToString();
+        var cacheKey = Id.ToString();
         var chatFunction = _kernel.CreateFunctionFromPrompt(prompt);
         var userInput = message.Messages.Last();
         string history = await _cache.GetStringAsync(cacheKey) ?? "";

diff --git a/Frontend/.gitignore b/Frontend/.gitignore
@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+certs
diff --git a/Frontend/index.html b/Frontend/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Chat Protocol + Semantic Kernel</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
diff --git a/Frontend/package.json b/Frontend/package.json
@@ -15,6 +15,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@types/node": "^20.12.7",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

diff --git a/Frontend/public/icon.svg b/Frontend/public/icon.svg
diff --git a/Frontend/public/vite.svg b/Frontend/public/vite.svg
diff --git a/Frontend/src/ChatWindow.tsx b/Frontend/src/ChatWindow.tsx
@@ -1,10 +1,10 @@
 
 import { useEffect, useRef, useState } from 'react';
 import ChatInput from './ChatInput';
-import { AIChatMessage, AIChatProtocolClient } from '@microsoft/ai-chat-protocol';
+import { AIChatMessage, AIChatMessageDelta, AIChatProtocolClient } from '@microsoft/ai-chat-protocol';
 
 function ChatWindow() {
-  const client = new AIChatProtocolClient('/api/chat', { allowInsecureConnection: true })
+  const client = new AIChatProtocolClient('/api/chat');
 
   const [messages, setMessages] = useState<AIChatMessage[]>([]);
   const [sessionState, setSessionState] = useState<unknown | undefined>(undefined);
@@ -15,25 +15,32 @@ function ChatWindow() {
       content: message,
       role: 'user',
     };
-    setMessages((prevMessages) => [...prevMessages, userMessage]);
 
-    const stream = await client.getStreamedCompletion([userMessage], {
-      sessionState: sessionState,
-    });
+    const updatedMessages = [...messages, userMessage];
 
-    let responseMessage: AIChatMessage = {
+    setMessages((_) => [...updatedMessages]);
+
+    const responseMessage: AIChatMessage = {
       content: '',
       role: 'assistant',
     };
-    const updateMessages = [...messages, userMessage];
+
+    const updateMessages = (delta: AIChatMessageDelta) => {
+      responseMessage.content += delta.content;
+      setMessages((_) => [...updatedMessages, responseMessage]);
+    };
+
+    const stream = await client.getStreamedCompletion([userMessage], {
+      sessionState: sessionState,
+    });
+
     for await (const response of stream) {
       if (response.sessionState) {
         setSessionState(response.sessionState);
       }
       if (response.delta?.content) {
-        responseMessage.content += response.delta.content;
+        updateMessages(response.delta);
       }
-      setMessages((_) => [...updateMessages, responseMessage]);
     }
   };
 

diff --git a/Frontend/src/index.css b/Frontend/src/index.css
@@ -16,7 +16,6 @@
   :root {
     --color-scheme: light dark;
     --color: rgba(0, 0, 0, 0.87);
-    --background-color: #ffffff;
   }
 }
 

diff --git a/Frontend/vite.config.ts b/Frontend/vite.config.ts
@@ -1,12 +1,17 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import fs from 'fs';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   server: {
     port: 5002,
     strictPort: true,
+    https: {
+      key: fs.readFileSync('./certs/localhost.key'),
+      cert: fs.readFileSync('./certs/localhost.crt'),
+    },
     proxy: {
       '/api': {
         target: 'http://localhost:5000',
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,3 +22,4 @@ dist-ssr @@
     *.njsproj
     *.sln
     *.sw?
+    certs