为 AI 产品设计克制的流式交互

流式输出让 AI 产品显得即时，但它并不天然等于良好体验。用户真正需要的是清晰的状态、可控的等待和可以恢复的错误。

流式消息是一个状态机

一条 AI 消息至少可能经历以下状态：

idle → connecting → streaming → completed
                     ↘ failed
                     ↘ cancelled

如果界面只记录一段不断增长的文本，就很难正确处理重试、停止生成和历史消息恢复。

首字延迟需要明确反馈

连接建立后，模型可能仍需要几秒才返回第一个 Token。这个阶段不应该展示空白气泡，也不应该伪造高速打字效果。

更自然的反馈包括：

• 显示正在连接或正在思考。
• 允许用户取消请求。
• 超过阈值后给出网络提示。
• 保留用户刚刚发送的问题。

不要逐字符触发完整渲染

在移动端，频繁更新长文本可能引起布局抖动和列表滚动问题。可以在数据层持续接收 Token，但以较低频率批量提交到界面。

const FLUSH_INTERVAL = 50;
 
function scheduleFlush(buffer: string) {
  window.setTimeout(() => updateMessage(buffer), FLUSH_INTERVAL);
}

真实实现还应避免重复定时器，并在页面离开时清理任务。

滚动应该尊重用户

当用户停留在列表底部时，可以随内容自动滚动。一旦用户主动向上阅读，就应暂停自动跟随，并提供“回到最新内容”的轻量入口。

错误也是消息的一部分

连接中断时，已经接收的内容不应消失。保留部分结果、标记未完成状态，并提供重试，是比弹出通用错误框更连续的体验。

流式交互的高级感来自稳定、克制和可预测，而不是更快闪动的光标。