Enhance chatbot and search functionality

Added author and creation metadata comments to various files.
Updated `Program.cs` to output and open generated files.
Enhanced `ChatComponent.razor` with new UI elements, user input handling, and chat history clearing.
Updated `SearchPlugin.cs` to use a specific index schema and adjusted search logic.
Added configuration injection and initialization in `ChatComponent.razor`.
Removed unused JavaScript functions and added new ones for UI interactions in `ChatComponent.razor`.
Updated `TimeInformationPlugin.cs` to retrieve current UTC time.
Added new configuration import in `Program.cs`.
Updated solution settings to include specific words in the user dictionary.

Author: glensouza

src/Blazor.AI.SeedData/Program.cs

@@ -1,4 +1,15 @@
-using System.ClientModel;
+// ***********************************************************************
+// Author           : glensouza
+// Created          : 01-14-2025
+//
+// Last Modified By : glensouza
+// Last Modified On : 01-16-2025
+// ***********************************************************************
+// <summary>This Console App is to seed data on Azure AI Search.</summary>
+// ***********************************************************************
+
+using System.ClientModel;
+using System.Diagnostics;
 using System.Reflection;
 using Azure;
 using Azure.AI.OpenAI;
@@ -128,7 +139,6 @@
     new SystemChatMessage("You are an HR manager at Contoso Hotels, expert at employee handbook creation."),
     new UserChatMessage("Create a privacy policy, vacation policy, and describe a few job roles")
 );
-progress.Report("Seed data generation completed.");
 
 // Collect the seed data from chat completion text
 string text = string.Empty;
@@ -139,6 +149,19 @@
     text += message.Text;
 }
 
+// Output the employee handbook to text file, first checking if it already exists
+string filePath = "employee_handbook.txt";
+if (File.Exists(filePath))
+{
+    File.Delete(filePath);
+}
+
+File.WriteAllText(filePath, text);
+
+// Open the text file for the user to review
+Process.Start(new ProcessStartInfo(filePath) { UseShellExecute = true });
+progress.Report("Seed data generation completed.");
+
 // Chunk the text into smaller pieces
 progress.Report("Chunking text into smaller pieces...");
 const int maxChunkSize = 200;
@@ -189,6 +212,19 @@
     Console.WriteLine($"{message.Text}");
     text += message.Text;
 }
+
+// Output the good questions to text file, first checking if it already exists
+filePath = "good_questions.txt";
+if (File.Exists(filePath))
+{
+    File.Delete(filePath);
+}
+
+File.WriteAllText(filePath, text);
+
+// Open the text file for the user to review
+Process.Start(new ProcessStartInfo(filePath) { UseShellExecute = true });
+
 progress.Report("Good questions generation completed.");
 
 return;

src/Blazor.AI.SeedData/RAGSearchDocument.cs

@@ -1,4 +1,14 @@
-using System.Text.Json.Serialization;
+// ***********************************************************************
+// Author           : glensouza
+// Created          : 01-14-2025
+//
+// Last Modified By : glensouza
+// Last Modified On : 01-16-2025
+// ***********************************************************************
+// <summary>This class is for Azure AI Search model.</summary>
+// ***********************************************************************
+
+using System.Text.Json.Serialization;
 
 namespace Blazor.AI.SeedData;
 

src/Blazor.AI.Web/Components/Components/ChatComponent.razor

@@ -1,4 +1,15 @@
-@rendermode InteractiveServer
+@*
+***********************************************************************
+Author           : glensouza
+Created          : 01-14-2025
+
+Last Modified By : glensouza
+Last Modified On : 01-16-2025
+***********************************************************************
+<summary>Chatbot component to interact with Azure OpenAI</summary>
+***********************************************************************
+*@
+@rendermode InteractiveServer
 
 @inject IJSRuntime JsRuntime
 @using Azure
@@ -9,11 +20,14 @@
 @using Microsoft.SemanticKernel.ChatCompletion;
 @using Microsoft.SemanticKernel.Connectors.OpenAI;
 
+@* when checkbox is checked, the chatbot appears, otherwise it clears chat history and hides *@
 <input type="checkbox" id="check" @onclick="this.ClearChat" />
 <label class="chat-btn" for="check">
     <i class="fa fa-commenting-o comment"></i>
     <i class="fa fa-close close"></i>
 </label>
+
+@* the chatbot ui *@
 <div class="wrapper">
     <div class="container">
         <div class="d-flex justify-content-center">
@@ -22,10 +36,12 @@
                     <p class="mb-0 fw-bold">Chat with Azure OpenAI</p>
                 </div>
                 <div class="card-body" id="messages-container" style="height: 500px; overflow-y: auto; background-color: #eee; border: 2px solid #0CCAF0">
+                    @* display each message in history *@
                     @foreach (string chatMessage in this.messages)
                     {
                         @if (chatMessage.Contains("|AI|"))
                         {
+                            @* AI message *@
                             <div class="d-flex flex-row justify-content-start mb-4">
                                 <div class="avatarSticky">
                                     <img src="openai-chatgpt-logo-icon.webp" alt="avatar 1" style="width: 45px; height: 100%;">
@@ -37,6 +53,7 @@
                             continue;
                         }
 
+                        @* User message *@
                         <div class="d-flex flex-row justify-content-end mb-4">
                             <div class="p-3 me-3 border" style="border-radius: 15px; background-color: #fbfbfb;">
                                 @((MarkupString)chatMessage)
@@ -47,6 +64,7 @@
                         </div>
                     }
 
+                    @* display the streaming response *@
                     @if (!string.IsNullOrEmpty(this.htmlStreamingResponse))
                     {
                         <div class="d-flex flex-row justify-content-start mb-4">
@@ -59,6 +77,8 @@
                         </div>
                     }
                 </div>
+                
+                @* the form for user to ask question *@
                 <div class="card-footer bg-info text-white" style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">
                     <div class="input-group">
                         <input type="text" class="form-control" placeholder="Prompt..." @bind="this.message" id="Message" @onkeydown="this.EnterCheckMessage" disabled=@(!string.IsNullOrEmpty(this.htmlStreamingResponse)) />
@@ -74,20 +94,14 @@
     </div>
 </div>
 
+@* Include this javascript on the head section of html to be used by the chatbot *@
 <HeadContent>
     <script>
         function scrollToBottom() {
             var objDiv = document.getElementById("messages-container");
             objDiv.scrollTop = objDiv.scrollHeight;
         }
 
-        function focusOnWhatAmI() {
-            var what = document.getElementById("WhatAmI");
-            if (what != null) {
-                setTimeout(() => what.focus(), 100);
-            }
-        }
-
         function focusOnMessage() {
             var message = document.getElementById("Message");
             if (message != null) {
@@ -97,6 +111,7 @@
     </script>
 </HeadContent>
 
+@* ReSharper disable once CSharpWarnings::CS8618 *@
 @code {
 #pragma warning disable SKEXP0010 // Type is for evaluation purposes only and is subject to change or removal in future updates. Suppress this diagnostic to proceed.
 
@@ -118,8 +133,11 @@
     private string htmlStreamingResponse = string.Empty;
     private readonly List<string> messages = [];
 
+    #pragma warning disable CS1998 // Async method lacks 'await' operators and will run synchronously
     protected override async Task OnInitializedAsync()
+    #pragma warning restore CS1998 // Async method lacks 'await' operators and will run synchronously
     {
+        // Get Azure OpenAI settings
         string aoaiKey = this.Configuration["AzureOpenAI:Key"] ?? throw new Exception("AzureOpenAI:Key needs to be set"); string aoaiEndpoint = this.Configuration["AzureOpenAI:Endpoint"] ?? throw new Exception("AzureOpenAI:Endpoint needs to be set");
         string aoaiChatDeploymentName = this.Configuration["AzureOpenAI:ChatDeploymentName"] ?? throw new Exception("AzureOpenAI:ChatDeploymentName needs to be set");
         string aoaiEmbeddingDeploymentName = this.Configuration["AzureOpenAI:EmbeddingDeploymentName"] ?? throw new Exception("AzureOpenAI:EmbeddingDeploymentName needs to be set");
@@ -144,34 +162,23 @@
         // Finalize Kernel Builder
         this.kernel = kernelBuilder.Build();
 
-        // Add Search Plugin
-        this.kernel.Plugins.AddFromType<SearchPlugin>("SearchPlugin", this.kernel.Services);
-
-        // Add Time Information Plugin
-        this.kernel.Plugins.AddFromType<TimeInformationPlugin>();
+        // Add Plugins
+        this.kernel.Plugins.AddFromType<SearchPlugin>(nameof(SearchPlugin), this.kernel.Services);
+        this.kernel.Plugins.AddFromType<TimeInformationPlugin>(nameof(TimeInformationPlugin), this.kernel.Services);
 
         // Chat Completion Service
         this.chatCompletionService = this.kernel.Services.GetRequiredService<IChatCompletionService>();
 
         // Create OpenAIPromptExecutionSettings
         this.openAIPromptExecutionSettings = new OpenAIPromptExecutionSettings
-            {
-                ChatSystemPrompt = "You are an HR virtual assistant at Contoso Hotels, expert at answering employee questions related to privacy policy, vacation policy, and describe a few job roles. Ask followup questions if something is unclear or more data is needed to complete a task.",
-                Temperature = 0.9, // Set the temperature to 0.9
-                FunctionChoiceBehavior = FunctionChoiceBehavior.Auto() // Auto invoke kernel functions
-            };
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender)
         {
-            this.StateHasChanged();
-        }
-
-        await base.OnAfterRenderAsync(firstRender);
+            ChatSystemPrompt = "You are an HR virtual assistant at Contoso Hotels, expert at answering employee questions related to privacy policy, vacation policy, and describe a few job roles. Ask followup questions if something is unclear or more data is needed to complete a task. You can also answer generic questions about the world as it is a global company.",
+            Temperature = 0.9, // Set the temperature to 0.9
+            FunctionChoiceBehavior = FunctionChoiceBehavior.Auto() // Auto invoke kernel functions
+        };
     }
 
+    // Check if the user pressed Enter key
     private async Task EnterCheckMessage(KeyboardEventArgs e)
     {
         if (e.Key == "Enter")
@@ -180,6 +187,7 @@
         }
     }
 
+    // Send chat message to the AI
     private async Task SendChat()
     {
         if (string.IsNullOrEmpty(this.message))
@@ -211,11 +219,12 @@
         await this.JsRuntime.InvokeVoidAsync("focusOnMessage");
     }
 
+    // Clear the chat
     private async Task ClearChat()
     {
         this.messages.Clear();
         this.chatHistory.Clear();
-        this.chatHistory.AddSystemMessage("You are an HR virtual assistant at Contoso Hotels, expert at answering employee questions related to privacy policy, vacation policy, and describe a few job roles. Ask followup questions if something is unclear or more data is needed to complete a task.");
+        this.chatHistory.AddSystemMessage("You are an HR virtual assistant at Contoso Hotels, expert at answering employee questions related to privacy policy, vacation policy, and describe a few job roles. Ask followup questions if something is unclear or more data is needed to complete a task. You can also answer generic questions about the world as it is a global company.");
         this.htmlStreamingResponse = string.Empty;
         this.message = string.Empty;
         this.messages.Add("|AI|Welcome to the AI chatbot! I am an AI chatbot trained by OpenAI.");

src/Blazor.AI.Web/Plugins/SearchPlugin.cs

@@ -1,16 +1,27 @@
-using Azure.Search.Documents;
+// ***********************************************************************
+// Author           : glensouza
+// Created          : 01-14-2025
+//
+// Last Modified By : glensouza
+// Last Modified On : 01-16-2025
+// ***********************************************************************
+// <summary>This plugin is used to search documents for the employer Contoso</summary>
+// ***********************************************************************
+
+using System.ComponentModel;
+using System.Text.Json.Serialization;
 using Azure;
+using Azure.Search.Documents;
 using Azure.Search.Documents.Indexes;
 using Azure.Search.Documents.Models;
 using Microsoft.SemanticKernel;
 using Microsoft.SemanticKernel.Embeddings;
-using System.ComponentModel;
-using System.Text.Json.Serialization;
 
 namespace Blazor.AI.Web.Plugins;
 
 #pragma warning disable SKEXP0001 // Type is for evaluation purposes only and is subject to change or removal in future updates. Suppress this diagnostic to proceed.
 
+// ReSharper disable once ClassNeverInstantiated.Global
 public class SearchPlugin(ITextEmbeddingGenerationService textEmbeddingGenerationService, SearchIndexClient indexClient)
 {
     [KernelFunction("contoso_search")]
@@ -20,40 +31,34 @@ public async Task<string> SearchAsync([Description("The users optimized semantic
         // Convert string query to vector
         ReadOnlyMemory<float> embedding = await textEmbeddingGenerationService.GenerateEmbeddingAsync(query);
 
-        // Set the index to use in AI Search
+        // Set the index to use in AI Search, the hard coded "demo" index was established in the SeedData project
         SearchClient searchClient = indexClient.GetSearchClient("demo");
 
         // Configure request parameters
         VectorizedQuery vectorQuery = new(embedding);
-        vectorQuery.Fields.Add("contentVector"); // name of the vector field from index schema
-
-        SearchOptions searchOptions = new() { VectorSearch = new() { Queries = { vectorQuery } } };
-
-        //var response = await searchClient.SearchAsync<SearchDocument>(searchOptions);
+        vectorQuery.Fields.Add("contentVector"); // name of the vector field from Azure AI Search schema established in the SeedData project 
 
         // Perform search request
-        Response<SearchResults<IndexSchema>> response = await searchClient.SearchAsync<IndexSchema>(searchOptions);
+        SearchOptions searchOptions = new() { VectorSearch = new VectorSearchOptions { Queries = { vectorQuery } } };
+        Response<SearchResults<RAGSearchDocument>> response = await searchClient.SearchAsync<RAGSearchDocument>(searchOptions);
 
-        //// Collect search results
-        await foreach (SearchResult<IndexSchema> result in response.Value.GetResultsAsync())
+        // Collect search results
+        await foreach (SearchResult<RAGSearchDocument> result in response.Value.GetResultsAsync())
         {
             return result.Document.Content; // Return text from first result
         }
 
         return string.Empty;
     }
 
-    //This schema comes from the index schema in Azure AI Search
-    private sealed class IndexSchema
+    //This schema comes from the Azure AI Search model established in the SeedData project
+    // ReSharper disable once ClassNeverInstantiated.Local
+    private sealed class RAGSearchDocument
     {
-        [JsonPropertyName("content")]
-        public string Content { get; set; }
-
         [JsonPropertyName("title")]
-        public string Title { get; set; }
+        public string Title { get; init; } = string.Empty;
 
-        [JsonPropertyName("url")]
-        public string Url { get; set; }
+        [JsonPropertyName("content")]
+        public string Content { get; init; } = string.Empty;
     }
-
-}
+}

src/Blazor.AI.Web/Plugins/TimeInformationPlugin.cs

@@ -1,11 +1,23 @@
-using Microsoft.SemanticKernel;
+// ***********************************************************************
+// Author           : glensouza
+// Created          : 01-14-2025
+//
+// Last Modified By : glensouza
+// Last Modified On : 01-16-2025
+// ***********************************************************************
+// <summary>This plugin provides a function to retrieve the current time in UTC.</summary>
+// ***********************************************************************
+
 using System.ComponentModel;
+using Microsoft.SemanticKernel;
 
 namespace Blazor.AI.Web.Plugins;
 
+// ReSharper disable once ClassNeverInstantiated.Global
 public class TimeInformationPlugin
 {
     [KernelFunction]
     [Description("Retrieves the current time in UTC.")]
+    // ReSharper disable once UnusedMember.Global
     public string GetCurrentUtcTime() => DateTime.UtcNow.ToString("R");
 }

src/Blazor.AI.Web/Program.cs

@@ -1,4 +1,5 @@
 using Blazor.AI.Web.Components;
+using Microsoft.Extensions.Configuration;
 
 WebApplicationBuilder builder = WebApplication.CreateBuilder(args);
 

src/Blazor.AI.sln.DotSettings

@@ -0,0 +1,4 @@
+<wpf:ResourceDictionary xml:space="preserve" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:ss="urn:shemas-jetbrains-com:settings-storage-xaml" xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
+	<s:Boolean x:Key="/Default/UserDictionary/Words/=Contoso/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/UserDictionary/Words/=Hnsw/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/UserDictionary/Words/=Vectorizer/@EntryIndexedValue">True</s:Boolean></wpf:ResourceDictionary>