From f8a48930f3cd4251a87916821b9cc0a0e7a34dbb Mon Sep 17 00:00:00 2001
From: Marco Minerva <marco.minerva@gmail.com>
Date: Thu, 3 Jul 2025 11:54:16 +0200
Subject: [PATCH] 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.
---
 .../Components/Pages/Documents.razor          | 66 ++++++++++---------
 .../Services/VectorSearchService.cs           |  2 +-
 SqlDatabaseVectorSearch/wwwroot/css/app.css   |  6 ++
 3 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/SqlDatabaseVectorSearch/Components/Pages/Documents.razor b/SqlDatabaseVectorSearch/Components/Pages/Documents.razor
index af67098..eec9704 100644
--- a/SqlDatabaseVectorSearch/Components/Pages/Documents.razor
+++ b/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">
-        <thead>
-            <tr>
-                <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)
-            {
+    <div class="table-responsive">
+        <table class="table table-hover align-middle mb-0 border rounded overflow-hidden">
+            <thead class="table-light sticky-top">
                 <tr>
-                    <td>
-                        <div class="d-flex justify-content-center align-items-center">
-                            <CheckboxInput @bind-Value="document.IsSelected" />
-                        </div>
-                    </td>
-                    <td>@document.Id</td>
-                    <td>@document.Name</td>
-                    <td>@document.ContentType</td>
-                    <td>@document.ChunkCount</td>
-                    <td>@document.LocalCreationDateString</td>
+                    <th style="width:40px;"></th>
+                    <th class="text-secondary">ID</th>
+                    <th class="text-secondary">Name</th>
+                    <th class="text-secondary">Content type</th>
+                    <th class="text-secondary text-center">Chunks</th>
+                    <th class="text-secondary">Created</th>
                 </tr>
-            }
-        </tbody>
-    </table>
-
+            </thead>
+            <tbody>
+                @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>
diff --git a/SqlDatabaseVectorSearch/Services/VectorSearchService.cs b/SqlDatabaseVectorSearch/Services/VectorSearchService.cs
index 75f7c45..18bfa3e 100644
--- a/SqlDatabaseVectorSearch/Services/VectorSearchService.cs
+++ b/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);
diff --git a/SqlDatabaseVectorSearch/wwwroot/css/app.css b/SqlDatabaseVectorSearch/wwwroot/css/app.css
index 3d4dd04..3c0b751 100644
--- a/SqlDatabaseVectorSearch/wwwroot/css/app.css
+++ b/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%;