如何在加载第二部分之前在前端初始化列表的一部分？ （Blazor 服务器）

Question

我是 Blazor 的初学者，正在尝试 ChatGPT API。我希望在加载 GPT 答案之前在消息中显示用户提示，但在加载两者之前它拒绝执行任何操作。

我的初始代码是这样的（最重要的部分是我认为带有注释的部分）：

<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();
    }
  }

}
 

此列表所基于的班级：

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;
}

任何帮助将不胜感激：D

Answer 1

好吧，伙计，你听着，我很聪明，可以告诉你，你需要告诉他们在去吃午餐之前排成一队，这样你想要排在前面的另一个人首先得到辣鸡肉三明治，因此它在前面结束.