消息操作栏
Message Actions / Action Bar
在单条回答旁提供复制、反馈、重新生成等操作。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'message-actions',
{
"demo": true
}
);
view.element.addEventListener('ui:feedback', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
操作针对某一条消息，而非整个会话。
什么时候不用
不支持的操作不要只为填满图标栏而出现。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
text | "过程结束后，结果仍然可以回看。" |
value | null |
copyLabel | "复制回答" |
helpfulLabel | "有帮助" |
unhelpfulLabel | "需改进" |
disabled | false |
demo | false |
事件
ui:feedback ui:copy ui:error
INTERACTION NOTES
交互与可访问性
- 图标按钮有可读名称。
- 切换型反馈暴露按下状态，反馈不能只在悬停时可达。
和相似组件的区别
复制只读内容；重新生成可能创建新分支，并触发新的模型或工具运行。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt · 来源核验