提示输入
Prompt Input / Composer
把文本、附件和发送动作放在一个明确的输入区域。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'composer',
{
"demo": true
}
);
view.element.addEventListener('ui:submit', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
用户给 Assistant 下达问题或补充上下文。
什么时候不用
固定字段的数据收集更适合表单。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "演示消息" |
placeholder | "描述你想完成的任务…" |
value | "" |
submitLabel | "发送" |
disabled | false |
attachments | false |
demo | false |
事件
ui:submit ui:files ui:error
INTERACTION NOTES
交互与可访问性
- 输入框有可见标签或可读名称。
- 中文输入法组字时不要把 Enter 当作发送。
和相似组件的区别
它管理消息草稿；上传组件只管理文件传输。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt、Svelte / SvelteKit、Web Components · 来源核验