From caa2ed45422db56e7d2e14c8ce13fcbd2f364ae6 Mon Sep 17 00:00:00 2001
From: Marco Minerva <marco.minerva@gmail.com>
Date: Tue, 22 Jul 2025 10:49:12 +0200
Subject: [PATCH] Improve streaming content layout and spinner positioning

Updated `Ask.razor` to conditionally apply a CSS class for the `streaming-text` div based on message status, enabling a spinner display during streaming. Adjusted spinner position from bottom right to bottom left and ensured proper layout with a minimum height for `streaming-content`. Modified a comment for clarity regarding the `Citations` property.

In `Ask.razor.css`, added padding to `streaming-text` for spinner accommodation and adjusted spinner styling to maintain layout integrity.
---
 .../Components/Pages/Ask.razor                |  6 +++---
 .../Components/Pages/Ask.razor.css            | 19 +++++++++++--------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
index d8d30a9..b18fa18 100644
--- a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
+++ b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
@@ -49,12 +49,12 @@
                                 <div class="card card-text d-inline-block p-2 px-3 m-1">
                                     <div class="message-content">
                                         <div class="streaming-content">
-                                            <div class="streaming-text">
+                                            <div class="streaming-text @(message.Status == MessageStatus.Streaming ? "streaming-text-with-spinner" : "")">
                                                 <Markdown style="overflow-y:auto;">@message.Text</Markdown>
                                             </div>
                                             @if (message.Status == MessageStatus.Streaming)
                                             {
-                                                <div class="streaming-spinner-bottom-right">
+                                                <div class="streaming-spinner-bottom-left">
                                                     <Spinner Size="SpinnerSize.Small" Color="SpinnerColor.Primary" />
                                                 </div>
                                             }
@@ -327,7 +327,7 @@
 
         public string? TokenUsage { get; set; }
 
-        // List of citations extracted from the answer
+        // List of citations extracted from the answer.
         public IEnumerable<Citation>? Citations { get; set; }
     }
 
diff --git a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css
index 88c6c81..cb1f054 100644
--- a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css
+++ b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css
@@ -82,20 +82,23 @@ input[type="checkbox"] + label {
 }
 
 .streaming-content {
-    display: flex;
-    align-items: flex-end;
-    gap: 8px;
+    position: relative;
     min-height: 1.5em;
 }
 
 .streaming-text {
-    flex: 1;
-    min-width: 0;
+    /* Add padding to make space for the spinner when streaming */
 }
 
-.streaming-spinner-bottom-right {
-    flex-shrink: 0;
-    align-self: flex-end;
+.streaming-text-with-spinner {
+    padding-bottom: 28px; /* Space for spinner (16px height + 8px margin + 4px extra) */
+}
+
+.streaming-spinner-bottom-left {
+    position: absolute;
+    bottom: 2px;
+    left: 0px;
+    z-index: 10;
 }
 
 .btn-clipboard {