Refactor Ask.razor and update dependencies

- Renamed `CopyToClipboard` to `CopyToClipboardAsync` in `Ask.razor` for clarity on asynchronous operation.
- Added `ElementReference` for `chat` and introduced `EnsureMessageIsVisibleAsync` to improve message visibility.
- Modified streaming state handling for better readability.
- Made `FormatTokenUsage` and `FormatTokenUsageDetails` methods static and adjusted their implementations.
- Enhanced styling in `Home.razor` with a new paragraph class.
- Updated `SqlDatabaseVectorSearch.csproj` to upgrade `Microsoft.SemanticKernel` and other package versions.
- Added a new `scrollTo` function in `functions.js` to improve user experience by ensuring elements are visible.

SqlDatabaseVectorSearch/Components/Pages/Ask.razor

@@ -59,7 +59,7 @@
                                             </div>
                                             <div class="text-end bg-transparent">
                                                 <Tooltip Title="Copy to Clipboard" Color="TooltipColor.Dark" Placement="TooltipPlacement.Bottom">
-                                                    <Button Type="ButtonType.Button" Outline="false" @onclick="@(async () => await CopyToClipboard(message.Text))">
+                                                    <Button Type="ButtonType.Button" Outline="false" @onclick="@(async () => await CopyToClipboardAsync(message.Text))">
                                                         <Icon Name="IconName.Clipboard" />
                                                     </Button>
                                                 </Tooltip>
@@ -73,6 +73,8 @@
                 </div>
             }
         }
+
+        <div @ref="chat"></div>
     </div>
 
     <div class="card-footer bg-white w-100 bottom-0 m-0 p-1">
@@ -100,6 +102,7 @@
     private Button askButton = default!;
     private Button resetButton = default!;
     private ElementReference askInput = default!;
+    private ElementReference chat = default!;
 
     private IList<Message> messages = [];
     private string? question;
@@ -148,6 +151,8 @@
         question = null;
         await Task.Yield();
 
+        await EnsureMessageIsVisibleAsync();
+
         try
         {
             await using var scope = ServiceProvider.CreateAsyncScope();
@@ -160,7 +165,7 @@
                 {
                     assistantMessage.TokenUsage = FormatTokenUsage(delta.TokenUsage);
                 }
-                if (delta.StreamState == StreamState.Append)
+                else if (delta.StreamState == StreamState.Append)
                 {
                     assistantMessage.Text += delta.Answer;
                 }
@@ -172,6 +177,8 @@
 
                 await Task.Yield();
                 StateHasChanged();
+
+                await EnsureMessageIsVisibleAsync();
             }
         }
         catch (Exception ex)
@@ -181,6 +188,8 @@
         }
         finally
         {
+            await EnsureMessageIsVisibleAsync();
+
             isAsking = false;
         }
     }
@@ -192,12 +201,12 @@
         messages.Clear();
     }
 
-    private async Task CopyToClipboard(string text)
+    private async Task CopyToClipboardAsync(string text)
     {
         await JSRuntime.InvokeVoidAsync("navigator.clipboard.writeText", text);
     }
 
-    private string FormatTokenUsage(TokenUsageResponse? tokenUsageResponse)
+    private static string FormatTokenUsage(TokenUsageResponse? tokenUsageResponse)
     {
         if (tokenUsageResponse is null)
         {
@@ -217,18 +226,23 @@
             : string.Empty;
 
         return $"{reformulation}{embeddingTokenCount}{question}";
+
+        static string FormatTokenUsageDetails(TokenUsage? tokenUsage)
+        {
+            if (tokenUsage is null)
+            {
+                return string.Empty;
+            }
+
+            return $"Input Token Count: {tokenUsage.InputTokenCount}<br />" +
+                   $"Output Token Count: {tokenUsage.OutputTokenCount}<br />" +
+                   $"Total Token Count: {tokenUsage.TotalTokenCount}";
+        }
     }
 
-    private string FormatTokenUsageDetails(TokenUsage? tokenUsage)
+    private async Task EnsureMessageIsVisibleAsync()
     {
-        if (tokenUsage is null)
-        {
-            return string.Empty;
-        }
-
-        return $"Input Token Count: {tokenUsage.InputTokenCount}<br />" +
-               $"Output Token Count: {tokenUsage.OutputTokenCount}<br />" +
-               $"Total Token Count: {tokenUsage.TotalTokenCount}";
+        await JSRuntime.InvokeVoidAsync("scrollTo", chat);
     }
 
     public class Message

SqlDatabaseVectorSearch/Components/Pages/Home.razor

@@ -4,7 +4,7 @@
 <PageTitle>SQL Database Vector Search</PageTitle>
 
 <h1>SQL Database Vector Search</h1>
-<p>
+<p class="mt-3">
     How to use the native VECTOR type in <img src="/images/sqldatabase.svg" /> Azure SQL Database to perform embeddings and RAG with <img src="/images/openai.svg" /> Azure OpenAI.
 </p>
 <p>

SqlDatabaseVectorSearch/SqlDatabaseVectorSearch.csproj

@@ -23,12 +23,12 @@
         <PackageReference Include="Microsoft.ML.Tokenizers" Version="1.0.2" />
         <PackageReference Include="Microsoft.ML.Tokenizers.Data.Cl100kBase" Version="1.0.2" />
         <PackageReference Include="Microsoft.ML.Tokenizers.Data.O200kBase" Version="1.0.2" />
-        <PackageReference Include="Microsoft.SemanticKernel" Version="1.39.0" />
+        <PackageReference Include="Microsoft.SemanticKernel" Version="1.40.0" />
         <PackageReference Include="MimeMapping" Version="3.1.0" />
         <PackageReference Include="MinimalHelpers.OpenApi" Version="2.1.4" />
         <PackageReference Include="PdfPig" Version="0.1.9" />
-        <PackageReference Include="Swashbuckle.AspNetCore.SwaggerUI" Version="7.3.0" />
-        <PackageReference Include="TinyHelpers.AspNetCore" Version="4.0.19" />
+        <PackageReference Include="Swashbuckle.AspNetCore.SwaggerUI" Version="7.3.1" />
+        <PackageReference Include="TinyHelpers.AspNetCore" Version="4.0.20" />
 	</ItemGroup>
 
 </Project>

SqlDatabaseVectorSearch/wwwroot/js/functions.js

@@ -3,6 +3,13 @@
         element.focus();
     }
 };
+
+window.scrollTo = (element) => {
+    if (element) {
+        element.scrollIntoView();
+    }
+}
+
 function getLocalTime(utcDateTime) {
     return new Date(utcDateTime).toLocaleString();
 }