Enhance UI and improve code documentation

Updated button styles in Documents.razor for better appearance and usability. Improved the document table layout for responsiveness, integrating checkboxes into rows. Corrected comments in VectorSearchService.cs for clarity. Added new styles for content-type badges in app.css.

SqlDatabaseVectorSearch/Components/Pages/Documents.razor

@@ -41,7 +41,7 @@
         </div>
         <div class="col-md-2 col-sm-3 col-2">
             <div class="d-grid gap-2">
-                <Button @ref="uploadButton" Type="ButtonType.Submit" Color="ButtonColor.Primary" To="#" Disabled="@(Model.File is null)"><Icon Name="IconName.Upload" /><span class="d-none d-lg-inline ps-3">Upload</span></Button>
+                <Button @ref="uploadButton" Type="ButtonType.Submit" Color="ButtonColor.Primary" To="#" Disabled="@(Model.File is null)" Class="w-100 py-2 fw-semibold shadow-sm"><Icon Name="IconName.Upload" /><span class="d-none d-lg-inline ps-3">Upload</span></Button>
             </div>
         </div>
     </div>
@@ -60,40 +60,46 @@ else
         Available documents
     </h4>
 
-    <table class="table table-bordered table-striped table-hover">
+    <div class="table-responsive">
-        <thead>
+        <table class="table table-hover align-middle mb-0 border rounded overflow-hidden">
-            <tr>
+            <thead class="table-light sticky-top">
-                <th></th>
-                <th>ID</th>
-                <th>Name</th>
-                <th>Content type</th>
-                <th>Number of chunks</th>
-                <th>Creation date</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var document in documents)
-            {
                 <tr>
-                    <td>
+                    <th style="width:40px;"></th>
-                        <div class="d-flex justify-content-center align-items-center">
+                    <th class="text-secondary">ID</th>
-                            <CheckboxInput @bind-Value="document.IsSelected" />
+                    <th class="text-secondary">Name</th>
-                        </div>
+                    <th class="text-secondary">Content type</th>
-                    </td>
+                    <th class="text-secondary text-center">Chunks</th>
-                    <td>@document.Id</td>
+                    <th class="text-secondary">Created</th>
-                    <td>@document.Name</td>
-                    <td>@document.ContentType</td>
-                    <td>@document.ChunkCount</td>
-                    <td>@document.LocalCreationDateString</td>
                 </tr>
-            }
+            </thead>
-        </tbody>
+            <tbody>
-    </table>
+                @foreach (var document in documents)
-
+                {
+                    <tr class="@((document.IsSelected ? "table-primary" : null))">
+                        <td>
+                            <div class="d-flex justify-content-center align-items-center">
+                                <CheckboxInput @bind-Value="document.IsSelected" />
+                            </div>
+                        </td>
+                        <td class="text-break small">@document.Id</td>
+                        <td class="fw-medium">@document.Name</td>
+                        <td>
+                            <span class="badge content-type-badge px-2 py-1 rounded-pill small">
+                                @document.ContentType
+                            </span>
+                        </td>
+                        <td class="text-center">@document.ChunkCount</td>
+                        <td class="small text-secondary">@document.LocalCreationDateString</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
+    <div class="my-4"></div>
     <div class="row">
         <div class="col-md-2 col-sm-3 col-2">
             <div class="d-grid gap-2">
-                <Button @ref="deleteButton" Color="ButtonColor.Danger" Disabled="@(!documents.Any(d => d.IsSelected))" @onclick="DeleteSelectedDocuments">
+                <Button @ref="deleteButton" Color="ButtonColor.Danger" Disabled="@(!documents.Any(d => d.IsSelected))" @onclick="DeleteSelectedDocuments" Class="w-100 py-2 fw-semibold shadow-sm">
                     <Icon Name="IconName.Trash" /><span class="d-none d-lg-inline ps-3">Delete</span>
                 </Button>
             </div>

SqlDatabaseVectorSearch/Services/VectorSearchService.cs

@@ -88,7 +88,7 @@ public partial class VectorSearchService(IServiceProvider serviceProvider, Appli
 
         var (fullAnswer, tokenUsage) = await chatService.AskQuestionAsync(question.ConversationId, chunks, reformulatedQuestion.Text!, cancellationToken);
 
-        // Extract citations from the answer
+        // Extract citations from the answer.
         var (answer, citations) = ExtractCitations(fullAnswer);
 
         return new(question.Text, reformulatedQuestion.Text!, answer, StreamState.End, new(reformulatedQuestion.TokenUsage, embeddingTokenCount, tokenUsage), citations);

SqlDatabaseVectorSearch/wwwroot/css/app.css

@@ -63,6 +63,12 @@ h1:focus {
         content: "An error has occurred."
     }
 
+.content-type-badge {
+    background-color: #e5e7eb !important;
+    color: #495057 !important;
+    border: 1px solid #d1d5db !important;
+}
+
 .citation-box {
     width: fit-content;
     max-width: 100%;