Blazor Server中如何在GPT响应加载前先显示用户Prompt消息？

问题本质 #

当前代码中，虽然在添加用户Prompt后调用了StateHasChanged()，但由于Blazor的同步上下文机制，UI不会立即触发渲染，必须等到整个异步方法中的API请求完成后才会更新界面，导致用户消息无法即时显示。

修复方案 #

在调用GPT API前添加await Task.Yield()，让UI线程先处理渲染逻辑，再执行耗时的API请求。同时可优化UI渲染代码的可读性。

修改后的SubmitInput方法 #

private async Task SubmitInput()
{
    if (!string.IsNullOrEmpty(UserInput))
    {
        // 将用户Prompt加入交互列表，初始答案设为null
        var interaction = new GPTInteraction(UserInput, null, Interactions.Count);
        Interactions.Add(interaction);

        // 清空输入框
        UserInput = string.Empty;

        // 让出线程优先级，让UI先完成渲染更新
        await Task.Yield();

        // 异步请求GPT API结果
        var completion = await GPTAPIResultService.LoadGPTResultAsync(interaction.Prompt);

        // 更新交互项的实际答案
        interaction.Answer = completion;

        // 通知UI刷新
        StateHasChanged();
    }
}

优化后的UI渲染代码 #

简化循环内的逻辑写法，去除冗余代码块：

<div class="messages">
    @foreach (var interaction in Interactions)
    {
        <div class="message-circle">@interaction.Prompt</div>
        <div class="message-left">
            @(interaction.Answer != null ? interaction.Answer.Content[0].Text : "<span>...</span>")
        </div>
    }
</div>

逻辑说明 #

Task.Yield()会暂停当前异步操作，将控制权交还给UI线程，让Blazor有机会立即渲染新增的用户消息，之后再继续执行GPT API的调用流程，实现用户消息即时显示的效果。

内容的提问来源于stack exchange，提问作者Kk.cs