流式与生成状态
Streaming / Generation Status
告诉用户系统是在等待、输出，还是已经停止。
组件图鉴帮助你理解每一种交互。
等待开始
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'stream',
{
"demo": true
}
);
view.element.addEventListener('ui:start', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
内容逐步到达或任务耗时不可预知。
什么时候不用
没有真实进度数据时不要展示虚构百分比。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
output | "组件图鉴帮助你理解每一种交互。" |
text | "组件图鉴帮助你理解每一种交互。过程可以结束，结果依然可以回看。" |
interval | 60 |
source | null |
demo | false |
事件
ui:start ui:chunk ui:complete ui:stop ui:error
INTERACTION NOTES
交互与可访问性
- 不要逐 token 播报。
- 停止按钮有明确名称，完成状态可被感知。
和相似组件的区别
生成状态是短暂过程，生成的正文才是可回看的结果。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js · 来源核验