Im a beginner in Blazor and im experimenting with the ChatGPT API. I want the user prompt to be shown in a message before the GPT answer is loaded, but its refusing to do anything until both are loaded.
My Initial Code was this (the most important part is the one with the comments i think):
<div class="messages"> @{ foreach (var Interaction in Interactions) {<div class="message-circle"> @Interaction.Prompt</div><div class="message-left"> @{ if (Interaction.Answer != null) { @Interaction.Answer.Content[0].Text; } else {<span>...</span> } }</div> } }</div><form class="messageBox" @onsubmit="SubmitInput"><input class="messageInput" type="text" placeholder="Input prompt!" id="messageInput" @bind="UserInput" @bind:event="oninput"/><button type="submit" id="sendButton"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 664 663">path stuff...</svg></button></form>@code { private string UserInput { get; set; } = string.Empty; private List<GPTInteraction> Interactions = new List<GPTInteraction>(); private async Task SubmitInput() { if (!string.IsNullOrEmpty(UserInput)) { // Add the prompt to the list with a "null" answer initially var interaction = new GPTInteraction(UserInput, null, Interactions.Count); Interactions.Add(interaction); // Clear input field UserInput = string.Empty; // Notify the UI StateHasChanged(); // Get the response asynchronously var completion = await GPTAPIResultService.LoadGPTResultAsync(interaction.Prompt); // Update the placeholder with the actual completion interaction.Answer = completion; // Notify the UI StateHasChanged(); } }}The Class this list is based of:
using OpenAI.Chat;namespace GPTStandards.Data.GPTAPI;public class GPTInteraction(string prompt, ChatCompletion? completion, int id){ public string Prompt { get; set; } = prompt; public ChatCompletion? Answer { get; set; } = completion; public int ID { get; set; } = id;}Any Help would be greatly appreciated :D