Mirrors/SqlDatabaseVectorSearch
1
0
Fork 0
mirror of https://github.com/marcominerva/SqlDatabaseVectorSearch.git synced 2026-08-04 09:48:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refine icons, colors, and UI feedback for clarity

Browse Source 
Update icon choices and colors across the Blazor app for improved visual clarity and consistency. Use explicit InteractiveServerRenderMode in App.razor. Replace sidebar, header, and navigation icons with filled or colorized variants in MainLayout.razor. Update Ask.razor and Documents.razor with more descriptive icons. Enhance reconnect modal messaging and button visibility. Adjust app.css for individual sidebar icon colors and brand icon styling. Remove EFCore.SqlServer.VectorSearch from the home page feature list to focus on Agent Framework. These changes improve UI feedback, accessibility, and maintainability.
This commit is contained in:
Marco Minerva
2026-07-28 12:56:21 +02:00
parent ded1fba498
commit 9f0d4f6402
7 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SqlDatabaseVectorSearch/Components/App.razor
+2 -2
View File
@@ -14,11 +14,11 @@
<link rel="stylesheet" href="@Assets["SqlDatabaseVectorSearch.styles.css"]" />
<ImportMap />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet @rendermode="InteractiveServer" />
<HeadOutlet @rendermode="new InteractiveServerRenderMode(false)" />
</head>
<body>
<Routes @rendermode="InteractiveServer" />
<Routes @rendermode="new InteractiveServerRenderMode(false)" />
<ReconnectModal />
<script src="_framework/blazor.web.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
SqlDatabaseVectorSearch/Components/Layout/MainLayout.razor
+4 -4
View File
@@ -5,10 +5,10 @@
<BlazorBootstrapLayout StickyHeader="true">
<HeaderSection>
<a href="/swagger" target="_blank" class="text-decoration-none" title="OpenAPI documentation">
<Icon Name="IconName.FileTypeJson" Class="ps-3 ps-lg-2" Size="IconSize.x2" Color="IconColor.Muted"></Icon>
<Icon Name="IconName.FileEarmarkCodeFill" Class="ps-3 ps-lg-2" Size="IconSize.x2" Color="IconColor.Info"></Icon>
</a>
<a href="https://github.com/marcominerva/SqlDatabaseVectorSearch" target="_blank" class="text-decoration-none" title="View on GitHub">
<Icon Name="IconName.Github" Class="ps-4 ps-lg-4" Size="IconSize.x2" Color="IconColor.Muted"></Icon>
<Icon Name="IconName.Github" Class="ps-4 ps-lg-4" Size="IconSize.x2" Color="IconColor.Dark"></Icon>
</a>
</HeaderSection>
@@ -44,8 +44,8 @@
{
navItems = [
new() { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match = NavLinkMatch.All},
new() { Id = "2", Href= "/documents", IconName = IconName.FileText, Text = "Documents" },
new() { Id = "3", Href = "/ask", IconName = IconName.ChatDots, Text = "Ask"}
new() { Id = "2", Href= "/documents", IconName = IconName.FileEarmarkTextFill, Text = "Documents" },
new() { Id = "3", Href = "/ask", IconName = IconName.ChatDotsFill, Text = "Ask"}
];
return navItems;
SqlDatabaseVectorSearch/Components/Layout/ReconnectModal.razor
+5 -5
View File
@@ -10,7 +10,7 @@
Rejoining the server...
</p>
<p class="components-reconnect-repeated-attempt-visible">
Rejoin failed... Trying again in <span id="components-seconds-to-next-attempt"></span> seconds.
Rejoin failed... trying again in <span id="components-seconds-to-next-attempt"></span> seconds.
</p>
<p class="components-reconnect-failed-visible">
Failed to rejoin.<br />Please retry or reload the page.
@@ -21,11 +21,11 @@
<p class="components-pause-visible">
The session has been paused by the server.
</p>
<button id="components-resume-button" class="components-pause-visible">
<p class="components-resume-failed-visible">
Failed to resume the session.<br />Please retry or reload the page.
</p>
<button id="components-resume-button" class="components-pause-visible components-resume-failed-visible">
Resume
</button>
<p class="components-resume-failed-visible">
Failed to resume the session.<br />Please reload the page.
</p>
</div>
</dialog>
SqlDatabaseVectorSearch/Components/Pages/Ask.razor
+2 -2
View File
@@ -65,7 +65,7 @@
<div class="d-flex justify-content-between">
<div class="text-start bg-transparent mt-3">
<Tooltip Title="@message.TokenUsage" IsHtml="true" Color="TooltipColor.Primary" Placement="TooltipPlacement.Bottom">
<Icon Class="d-flex text-body-secondary" Name="IconName.InfoCircle"></Icon>
<Icon Class="d-flex" Name="IconName.CashCoin"></Icon>
</Tooltip>
</div>
<div class="text-end bg-transparent">
@@ -99,7 +99,7 @@
<div class="input-group">
<span class="input-group-text bg-transparent border-0">
<Tooltip Title="Messages aren't stored in any way on either the client or the server." Color="TooltipColor.Primary" Placement="TooltipPlacement.Bottom">
<Icon Class="d-flex text-body-secondary" Name="IconName.InfoCircle"></Icon>
<Icon Class="d-flex" Color="IconColor.Success" Name="IconName.ShieldLockFill"></Icon>
</Tooltip>
</span>
<input @ref="askInput" type="text" @bind="@question" @bind:event="oninput" placeholder="Ask me anything..." class="form-control border-0" maxlength="2000" @onkeydown="HandleKeyDown" />
SqlDatabaseVectorSearch/Components/Pages/Documents.razor
+4 -4
View File
@@ -9,7 +9,7 @@
<PageTitle>Documents</PageTitle>
<h4 class="mb-4">
<Icon Name="IconName.Upload" class="me-2" />
<Icon Name="IconName.CloudArrowUpFill" Color="IconColor.Primary" class="me-2" />
Upload new document
</h4>
@@ -21,7 +21,7 @@
<div class="input-group">
<span class="input-group-text">
<Tooltip Title="PDF, DOCX, TXT and MD files are supported" Color="TooltipColor.Primary" Placement="TooltipPlacement.Bottom">
<Icon Class="d-flex text-body-secondary" Name="IconName.InfoCircle"></Icon>
<Icon Class="d-flex" Color="IconColor.Info" Name="IconName.InfoCircle"></Icon>
</Tooltip>
</span>
<InputFile class="form-control" OnChange="@((e) => Model.File = e.File)" accept=".pdf,.docx,.txt,.md" id="fileInput" />
@@ -31,7 +31,7 @@
<div class="input-group">
<span class="input-group-text">
<Tooltip Title="The unique identifier (GUID) of the document. If not provided, a new one will be generated. If you specify an existing Document ID, the corresponding document will be overwritten." Color="TooltipColor.Primary" Placement="TooltipPlacement.Bottom">
<Icon Class="d-flex text-body-secondary me-2" Name="IconName.InfoCircle"></Icon>
<Icon Class="d-flex me-2" Color="IconColor.Warning" Name="IconName.KeyFill"></Icon>
</Tooltip>
Document ID
</span>
@@ -56,7 +56,7 @@
else
{
<h4 class="mt-4 mb-4">
<Icon Name="IconName.Files" class="me-2" />
<Icon Name="IconName.FileEarmarkTextFill" Color="IconColor.Info" class="me-2" />
Available documents
</h4>
SqlDatabaseVectorSearch/Components/Pages/Home.razor
+1 -1
View File
@@ -17,7 +17,7 @@
<li>Perform semantic search and RAG using Azure OpenAI agents</li>
<li>Interact via a Blazor Web App or programmatically via Minimal API</li>
</ul>
Document import, question reformulation, and RAG are orchestrated with <a href="https://github.com/microsoft/agent-framework" target="_blank">Microsoft Agent Framework</a>. Vectors are managed with <a href="https://github.com/efcore/EfCore.SqlServer.VectorSearch" target="_blank">EFCore.SqlServer.VectorSearch</a>.
Document import, question reformulation, and RAG are orchestrated with <a href="https://github.com/microsoft/agent-framework" target="_blank">Microsoft Agent Framework</a>.
</p>
<h3>Supported Features</h3>
SqlDatabaseVectorSearch/wwwroot/css/app.css
+14 -1
View File
@@ -11,7 +11,7 @@ body, html {
--bb-sidebar2-top-row-background-color: rgba(0,0,0,0.08);
--bb-sidebar2-top-row-border-color: rgb(194,192,192);
--bb-sidebar2-title-text-color: rgb(0,0,0);
--bb-sidebar2-brand-icon-color: rgb(0,0,0);
--bb-sidebar2-brand-icon-color: #0d6efd;
--bb-sidebar2-brand-image-width: 24px;
--bb-sidebar2-brand-image-height: 24px;
--bb-sidebar2-title-badge-text-color: rgb(255,255,255);
@@ -37,6 +37,19 @@ body, html {
color: rgba(0,0,0,0.9) !important;
}
/* The nav item icons inherit the black link color, so they are colored individually. */
.bb-sidebar2 nav .nav-item a .bi-house-door-fill {
color: #0d6efd;
}
.bb-sidebar2 nav .nav-item a .bi-file-earmark-text-fill {
color: #0dcaf0;
}
.bb-sidebar2 nav .nav-item a .bi-chat-dots-fill {
color: #198754;
}
h1:focus {
outline: none;
}