工具选择与提及
Tool Picker / Mentions
在发送消息前指定工具或引用一个有身份的对象。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'tool-selector'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
用户需要明确选择搜索、数据源或可调用能力。
什么时候不用
工具无真实连接或权限不可用时，不要将它标为可执行。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "本轮可用工具（示例）" |
name | "tools" |
items | [{"value":"search","label":"文档检索"},{"value":"calculator","label":"计算器"}] |
value | ["search"] |
disabled | false |
note | "启用工具不等于批准每一次执行。" |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 候选支持键盘导航。
- 已选对象有可读名称与移除方式。
和相似组件的区别
选择表达意图，不构成执行成功或敏感操作授权；提及对象也不一定是工具。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Web Components · 来源核验