Streaming Response new 流式响应 web

AnswerGenerated from 3 sources

A good agent keeps its work visible: show the current step, preserve partial results, and ask before consequential actions.

Generating…

标本可交互,可以直接操作。

Anatomy — every part, named解剖 —— 每个部件的名字

  1. 1 Response body响应正文 <article>

    The growing answer that remains readable while new chunks arrive.

    新分段到达时持续增长、仍可阅读的回答。

    Prompt fragmentPrompt 片段

    an article that appends server chunks in order and keeps completed text selectable

    一个按服务器分段顺序追加内容的 article,已完成文字可选择

  2. 2 Streaming marker流式标记 CSS animation

    A restrained marker that shows the stream is still active.

    显示流仍在活动中的克制标记。

    Prompt fragmentPrompt 片段

    a small caret or live marker that stops when the response completes or errors

    一个小光标或活动标记,完成或出错后停止

  3. 3 Stream controls流式控制 AbortController

    Actions for stopping, retrying, and copying the response.

    停止、重试和复制回答的操作。

    Prompt fragmentPrompt 片段

    Stop while running, Retry after an error, and Copy when there is content

    运行中显示停止,错误后显示重试,有内容时提供复制

  4. 4 Stream status流式状态 role=status

    Short status text for generation milestones.

    播报生成节点的简短状态文字。

    Prompt fragmentPrompt 片段

    a polite status such as Generating, Stopped, or Complete beside the response

    在响应旁显示生成中、已停止或已完成等礼貌状态

Prompt — paste into your agentPrompt —— 直接粘贴给你的代理

Build a streaming AI response surface that appends readable chunks into a real article, shows a subtle active marker while generation is running, and exposes Stop, Retry, and Copy actions at the right states. Use AbortController for cancellation, keep the partial answer after Stop or Error, announce meaningful milestones politely, and never replace content with an endless typing animation.

构建一个流式 AI 响应区域,把可读的分段内容追加到真实文章中;生成时显示克制的活动标记,并在恰当状态提供停止、重试和复制。用 AbortController 取消请求;停止或出错后保留已生成内容;礼貌地播报重要节点;不要用无限打字动画伪造活动。

Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时

Debug my streaming response. Check that chunks append in order without duplicating text; Stop actually aborts the request and clears the busy state; a network error preserves partial content and exposes Retry; aria-live is not announcing every token; the caret disappears when complete; Copy returns plain text; and the response does not cause horizontal overflow. The symptom:

调试我的流式响应。检查分段是否按顺序追加且不重复;停止操作是否真的中止请求并清除忙碌状态;网络错误是否保留部分内容并提供重试;aria-live 是否逐 token 播报;完成后光标是否消失;复制是否返回纯文本;响应是否造成横向溢出。症状:

In code代码里叫什么

Framework框架Symbol符号Note说明
HTML aria-live="polite" announce completed chunks without making every token noisy
Web API ReadableStream consume chunks and handle abort/error events
Web API AbortController let users stop an in-flight generation
CSS white-space + caret keep partial text readable without layout jumps

See also相关词条

我的参考集

组合页面参考、知名网站、UI 元素和视觉风格,导出给 AI。

你的下一份设计,从这里开始。

在任意标本旁点击「加入参考」,就能把页面、品牌、组件和风格组合成一份 AI 设计说明。

浏览页面参考

搜索参考库Search the library

输入关键词,搜索所有参考。