For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.0/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.0/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.0/components/streaming-text.md.

流式文本

在内容逐步到达时保持稳定的阅读区域,并明确区分生成中、暂停、完成和失败。

实时预览
Checking package contracts and visual statesReceiving verified output…

用法

<output class="streaming-text" data-state="streaming" aria-live="polite">
  <span data-streaming-content>Checking package contracts and visual states</span><span data-streaming-status>Receiving verified output…</span>
</output>

独立控制器

import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/streaming-text";

const component = document.querySelector(".streaming-text");
component.getState();

控制器是幂等的;完整包可改为一次导入 @a3s-lab/ui/all。宿主通过可取消的 before-* 事件执行权限与业务校验。

契约

接口值
根选择器.streaming-text
原生根元素<output>
状态streaming, complete, paused, error
事件a3s:streaming-text-complete, a3s:streaming-text-update
方法append, complete, getState, setText

产品边界

组件不建立网络连接、不解析富文本,也不自动滚动父容器。传输、中止、重试和可信渲染属于宿主。

组件只发布可复用的交互边界。数据获取、持久化、权限、可信内容与业务实体继续由宿主产品拥有。

可访问性

更新使用 polite 实时区域,减弱动态效果下仍保留静态状态提示。完成或错误必须有可读文字,不能只靠闪烁光标。