From c22b4100fb28f64dd9867b4c376825850ff7d801 Mon Sep 17 00:00:00 2001
From: Marco Minerva <marco.minerva@gmail.com>
Date: Thu, 20 Feb 2025 15:01:25 +0100
Subject: [PATCH] Refactor Ask component and improve sidebar styles

- Removed clipboard icon reference and added ElementReference for input field in Ask.razor.
- Introduced OnAfterRenderAsync method to manage input focus.
- Updated app.css with new CSS variables for enhanced sidebar styling.
- Added setFocus function in functions.js to manage element focus.
---
 .../Components/Pages/Ask.razor                | 16 +++++++++--
 SqlDatabaseVectorSearch/wwwroot/css/app.css   | 28 +++++++++++++------
 .../wwwroot/js/functions.js                   |  7 ++++-
 3 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
index b1c282d..e02079c 100644
--- a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
+++ b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
@@ -60,7 +60,7 @@
                                             <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))">
-                                                        <Icon @ref="clipboardIcon" Name="IconName.Clipboard" />
+                                                        <Icon Name="IconName.Clipboard" />
                                                     </Button>
                                                 </Tooltip>
                                             </div>
@@ -82,7 +82,7 @@
                     <Icon Class="d-flex text-body-secondary" Name="IconName.InfoCircle"></Icon>
                 </Tooltip>
             </span>
-            <input type="text" @bind="@question" @bind:event="oninput" placeholder="Ask me anything..." class="form-control border-0" maxlength="2000" autofocus @onkeydown="HandleKeyDown" />
+            <input @ref="askInput" type="text" @bind="@question" @bind:event="oninput" placeholder="Ask me anything..." class="form-control border-0" maxlength="2000" @onkeydown="HandleKeyDown" />
             <div class="input-group-text bg-transparent border-0">
                 <Button Type="ButtonType.Submit" @ref="askButton" Color="ButtonColor.Primary" Disabled="@(isAsking || string.IsNullOrWhiteSpace(question))" @onclick="AskQuestion">
                     <Icon Name="IconName.Send" />
@@ -99,7 +99,7 @@
 {
     private Button askButton = default!;
     private Button resetButton = default!;
-    private Icon clipboardIcon = default!;
+    private ElementReference askInput = default!;
 
     private IList<Message> messages = [];
     private string? question;
@@ -110,6 +110,16 @@
     [Inject]
     protected ToastService ToastService { get; set; } = default!;
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender)
+        {
+            return;
+        }
+
+        await JSRuntime.InvokeVoidAsync("setFocus", askInput);        
+    }
+
     private async Task HandleKeyDown(KeyboardEventArgs e)
     {
         if (e.Key == "Enter" && !isAsking && !string.IsNullOrWhiteSpace(question))
diff --git a/SqlDatabaseVectorSearch/wwwroot/css/app.css b/SqlDatabaseVectorSearch/wwwroot/css/app.css
index 947645a..0c3636e 100644
--- a/SqlDatabaseVectorSearch/wwwroot/css/app.css
+++ b/SqlDatabaseVectorSearch/wwwroot/css/app.css
@@ -1,14 +1,24 @@
 :root {
-    --bs-body-bg: #fff;
-    --bb-sidebar2-top-row-background-color: var(--bb-violet-bg);
-    --bb-sidebar2-top-row-border-color: var(--bb-violet-bg);
-    --bb-sidebar2-navbar-toggler-icon-color: var(--bb-violet-bg);
-    --bb-sidebar2-nav-item-text-active-color-rgb: 112.520718, 44.062154, 249.437846;
+    --bb-sidebar2-width: 270px;
+    --bb-sidebar2-collapsed-width: 50px;
+    --bb-sidebar2-background-color: rgba(234, 234, 234, 1);
+    --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: #6f42c1;
+    --bb-sidebar2-brand-image-width: 24px;
+    --bb-sidebar2-brand-image-height: 24px;
+    --bb-sidebar2-title-badge-text-color: rgb(255,255,255);
+    --bb-sidebar2-title-badge-background-color: rgba(25,135,84,var(--bs-bg-opacity,1));
+    --bb-sidebar2-navbar-toggler-icon-color: rgb(0,0,0);
+    --bb-sidebar2-navbar-toggler-background-color: rgba(0,0,0,0.08);
+    --bb-sidebar2-content-border-color: rgb(194,192,192);
     --bb-sidebar2-nav-item-text-color: rgba(0,0,0,0.9);
-    --bb-sidebar2-nav-item-text-hover-color: rgba(var(--bb-sidebar2-nav-item-text-active-color-rgb), 0.9);
-    --bb-sidebar2-nav-item-text-active-color: rgba(var(--bb-sidebar2-nav-item-text-active-color-rgb), 0.9);
-    --bb-sidebar2-nav-item-background-hover-color: rgba(var(--bb-sidebar2-nav-item-text-active-color-rgb), 0.08);
-    --bb-sidebar2-nav-item-group-background-color: rgba(var(--bb-sidebar2-nav-item-text-active-color-rgb), 0.08);
+    --bb-sidebar2-nav-item-text-active-color-rgb: 0,0,0;
+    --bb-sidebar2-nav-item-text-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
+    --bb-sidebar2-nav-item-text-active-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
+    --bb-sidebar2-nav-item-background-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
+    --bb-sidebar2-nav-item-group-background-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
 }
 
 .bb-sidebar2 nav .nav-item a {
diff --git a/SqlDatabaseVectorSearch/wwwroot/js/functions.js b/SqlDatabaseVectorSearch/wwwroot/js/functions.js
index 75b35c4..e18877e 100644
--- a/SqlDatabaseVectorSearch/wwwroot/js/functions.js
+++ b/SqlDatabaseVectorSearch/wwwroot/js/functions.js
@@ -1,3 +1,8 @@
-function getLocalTime(utcDateTime) {
+window.setFocus = (element) => {
+    if (element) {
+        element.focus();
+    }
+};
+function getLocalTime(utcDateTime) {
     return new Date(utcDateTime).toLocaleString();
 }