Suggestion Chips
横向排列的提问建议胶囊，供用户一键发起后续对话。
Suggestion Chips
基础用法
Suggestion Chips
示例加载中...
纵向追问列表
layout="list" 把胶囊改成带分隔线的纵向行，行首是一枚回车折返箭头，逐行错峰浮现。这是答案定稿后收尾的形态：追问是一份可以读完的清单，而不是一条需要横向拖动的轨道。
流式回答里的追问
正文流完后，来源堆叠与追问列表一起变为可用。
示例加载中...
交互契约
layout="list"只改版式，不改数据与事件：select仍然携带完整建议对象。- 列表形态下每行按位置错峰入场（每行 90ms）；减弱动效下入场直接关闭，行本身照常显示。
- 行分隔线画在每行的下边框上，包括最后一行——这是上游的观感，与截图一致。
suggestions为空数组时整个组件不渲染，无需在外层再包一层v-if。- 每个胶囊以
suggestion.id作为key，请保证同一组内id唯一。 - 点击派发
select，参数是被点中的完整建议对象，而不是索引或 id。 - 组件不维护选中态，也不会在点击后移除建议；是否清空由消费方决定。
- 容器溢出时可横向滚动，滚动条被隐藏，两侧用渐变遮罩提示可滚动。
- 容器为
role="list"，胶囊为role="listitem"：这会覆盖<button>的隐式语义，屏幕阅读器将其读作列表项而非按钮。若需要按钮语义，请在外层补充说明文本。
API
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
suggestions | AiSuggestion[] | — | 建议列表；AiSuggestion 为 { id: string, text: string }。必填。 |
layout | 'wrap' | 'list' | 'wrap' | list 改为带分隔线与折返箭头的纵向行。 |
Events
| 事件名 | 参数 | 说明 |
|---|---|---|
select | (suggestion: AiSuggestion) | 点击某个胶囊时派发，携带该建议对象。 |
Slots
TxSuggestionChips 不暴露插槽。胶囊文案取自 suggestion.text，需要富文本时请改用自定义实现。
最佳实践
- 一次给出 3~5 条建议；超出屏宽虽可滚动，但被折叠的选项实际很少被点到。
- 文案写成用户会说的话（「补充单元测试」），而不是功能名（「测试生成」）。
- 点击后通常应清空或替换建议列表，避免用户重复发送同一条。
id用稳定标识而非文案本身，便于埋点统计与后续去重。