BubbleList
BubbleList 渲染消息数组，并在新增消息或流式输出时自动滚动到底部。
导入方式
按需导入
import { BubbleList } from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'完整导入
import * as AiChatVue from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'
app.use(AiChatVue)
// 模板中可直接使用 <BubbleList />基础用法
U
帮我总结这个组件库的核心能力。
AI
识别用户目标：需要一个可复用的聊天界面。
组合消息气泡、输入框和 Markdown 渲染能力。
它提供 聊天容器、消息气泡、输入框 和 Markdown 渲染能力。
HTML
状态卡片
HTML · v1
<div style="font-family:sans-serif;padding:24px"><h2>构建完成</h2><p>示例 Artifact 预览。</p></div>
API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
messages | Message[] | 必填 | 消息列表 |
isGenerating | boolean | false | 是否生成中 |
enableMarkdown | boolean | false | 是否启用 Markdown |
virtual | boolean | true | 是否启用虚拟滚动 |
virtualThreshold | number | 80 | 触发虚拟滚动的消息数量 |
estimatedItemHeight | number | 96 | 未测量消息的估算高度 |
virtualBuffer | number | 6 | 可视区域外的缓冲消息数量 |
onRetry | (id: string) => void | undefined | 列表级重试消息 |
onEdit | (id: string, content: string) => void | undefined | 列表级编辑消息 |
onDelete | (id: string) => void | undefined | 列表级删除消息 |
注意事项
外层容器需要提供高度，否则滚动区域无法形成。
当 messages.length > virtualThreshold 且 virtual !== false 时，BubbleList 只渲染可视区域和缓冲区内的消息。组件会测量已渲染消息高度，未测量项使用 estimatedItemHeight 参与滚动占位计算。消息高度差异极大的场景可以调大 virtualBuffer，或传入 virtual={false} 关闭虚拟滚动。
滚动容器内置 role="log"、aria-live="polite" 和 aria-relevant="additions"，新消息会以非打断方式通知屏幕阅读器。Headless 场景下，useHeadlessBubbleList().listAttrs 提供同样的属性集合。
Bubble 是单条消息组件，onRetry、onDelete 不需要参数；BubbleList 是列表组件，同一个回调会服务多条消息，因此通过 id 标识目标消息。需要拿到完整消息对象时，可以在回调中用 messages.find(message => message.id === id) 解析。
onEdit(id, content) 会透传自子级 Bubble.onEdit，只负责把目标消息 id 和当前内容交给调用方，不会自动修改消息或重新触发流式回复。