Mirrors/SqlDatabaseVectorSearch
1
0
Fork 0
mirror of https://github.com/marcominerva/SqlDatabaseVectorSearch.git synced 2026-06-20 12:23:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve streaming content layout and spinner positioning

Browse Source 
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.
This commit is contained in:
Marco Minerva
2025-07-22 10:49:12 +02:00
parent d8343b16e5
commit caa2ed4542
2 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SqlDatabaseVectorSearch/Components/Pages/Ask.razor
+3 -3
View File
@@ -49,12 +49,12 @@
<div class="card card-text d-inline-block p-2 px-3 m-1"> <div class="card card-text d-inline-block p-2 px-3 m-1">
<div class="message-content"> <div class="message-content">
<div class="streaming-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> <Markdown style="overflow-y:auto;">@message.Text</Markdown>
</div> </div>
@if (message.Status == MessageStatus.Streaming) @if (message.Status == MessageStatus.Streaming)
{ {
<div class="streaming-spinner-bottom-right"> <div class="streaming-spinner-bottom-left">
<Spinner Size="SpinnerSize.Small" Color="SpinnerColor.Primary" /> <Spinner Size="SpinnerSize.Small" Color="SpinnerColor.Primary" />
</div> </div>
} }
@@ -327,7 +327,7 @@
public string? TokenUsage { get; set; } 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; } public IEnumerable<Citation>? Citations { get; set; }
} }
SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css
+11 -8
View File
@@ -82,20 +82,23 @@ input[type="checkbox"] + label {
} }
.streaming-content { .streaming-content {
display: flex; position: relative;
align-items: flex-end;
gap: 8px;
min-height: 1.5em; min-height: 1.5em;
} }
.streaming-text { .streaming-text {
flex: 1; /* Add padding to make space for the spinner when streaming */
min-width: 0;
} }
.streaming-spinner-bottom-right { .streaming-text-with-spinner {
flex-shrink: 0; padding-bottom: 28px; /* Space for spinner (16px height + 8px margin + 4px extra) */
align-self: flex-end; }
.streaming-spinner-bottom-left {
position: absolute;
bottom: 2px;
left: 0px;
z-index: 10;
} }
.btn-clipboard { .btn-clipboard {