diff --git a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor index 699532a..d8d30a9 100644 --- a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor +++ b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor @@ -47,10 +47,20 @@ else {
-
- @message.Text +
+
+
+ @message.Text +
+ @if (message.Status == MessageStatus.Streaming) + { +
+ +
+ } +
- @if (message.IsCompleted) + @if (message.Status == MessageStatus.Completed) {
@@ -170,10 +180,10 @@ isAsking = true; var userQuestion = new Question(conversationId, question!); - var userMessage = new Message { Text = userQuestion.Text, Role = "user" }; + var userMessage = new Message { Text = userQuestion.Text, Role = "user", Status = MessageStatus.Completed }; messages.Add(userMessage); - var assistantMessage = new Message { Role = "assistant" }; + var assistantMessage = new Message { Role = "assistant", Status = MessageStatus.New }; messages.Add(assistantMessage); question = null; @@ -193,6 +203,7 @@ { userMessage.Text = delta.ReformulatedQuestion; assistantMessage.TokenUsage = FormatTokenUsage(delta.TokenUsage); + assistantMessage.Status = MessageStatus.Streaming; } else if (delta.StreamState == StreamState.Append) { @@ -212,7 +223,7 @@ IndexOnPage = c.IndexOnPage }); - assistantMessage.IsCompleted = true; + assistantMessage.Status = MessageStatus.Completed; assistantMessage.TokenUsage += FormatTokenUsage(delta.TokenUsage); } @@ -225,7 +236,7 @@ catch (Exception ex) { assistantMessage.Text = $"There was an error while processing the question: {ex.Message}"; - assistantMessage.IsCompleted = true; + assistantMessage.Status = MessageStatus.Completed; } finally { @@ -299,13 +310,20 @@ await JSRuntime.InvokeVoidAsync("scrollTo", chat); } + public enum MessageStatus + { + New, + Streaming, + Completed + } + public class Message { public string? Text { get; set; } public required string Role { get; set; } - public bool IsCompleted { get; set; } + public MessageStatus Status { get; set; } = MessageStatus.New; public string? TokenUsage { get; set; } diff --git a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css index 0299a21..88c6c81 100644 --- a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css +++ b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css @@ -77,6 +77,27 @@ input[type="checkbox"] + label { } } +.message-content { + position: relative; +} + +.streaming-content { + display: flex; + align-items: flex-end; + gap: 8px; + min-height: 1.5em; +} + +.streaming-text { + flex: 1; + min-width: 0; +} + +.streaming-spinner-bottom-right { + flex-shrink: 0; + align-self: flex-end; +} + .btn-clipboard { line-height: 1; color: var(--bs-body-color);