AiBubble 对话气泡
承载对话消息的冒泡显示。
基础用法
可以展示 user 和 assistant 的样式差异，以及加载动画效果！
人工智能（AI）是一种能够执行通常需要人类智能的任务的技术。
那它能自己写代码吗？
进阶功能与变体
AiBubble 直接内置了强大的 Markdown 引擎与 highlight.js 代码高亮解析。并提供了丰富的变体 (variant) 与形制 (shape)、以及时间等信息传递的支持。
这是一段 Markdown 的渲染示例。来看一段代码：
const greeting = 'Hello World';
console.log(greeting);
真棒！可以更换样式吗？
当然可以，这是 outlined 模式。
看起来非常有质感。
如果您不喜欢外轮廓，可以使用 borderless 模式。
打字特效与 60fps 流式渲染防抖
这不仅仅是一个空 loading，它允许文字在一个一个吐出时跟随一个强烈的闪烁光标（类似光标指针的效果），以模仿正在被 AI 书写的感觉。
- 极致性能 (Streaming Performance)：在底层我们引入了
requestAnimationFrame截流刷新机制。当在typing模式下接收大量文本包进行 Markdown 复杂频繁重绘时，不仅能防止引发页面主线程卡死，更能将您的打印机的刷新率恒定在舒适的 60 帧每秒！
引用来源与幻觉标注 (Citations & Reference Tooltip)
AI 回复的信息通常需要来源支撑以避免模型幻觉。除了底部展示详细的长串被引地址，我们在底层注入了智能学术脚注（Citation）解析器。 当且仅当属性 citations 数组有内容时，若大模型在 Markdown 返回内容中包含 [1] 或 [2] 这样的结构：气泡将其自动转义拦截拦截为带有交互光效状态的学术悬浮角标！ 💡 试一试： 停留在下方的 [1], [2], [3] 等文字段落上悬浮，观察动态出现带有链接及标题的精细化气泡弹出组件。
根据最新的 YH-UI 指南 1，我们建议在处理 AI 对话时使用组合式 API 2。此外，Vite 的构建优化 3 也能显著提升用户体验。
多模态渲染 (Multimodal)
组件支持多种媒体格式的直接展示，包括图片网格、带波形动画的语音播放器以及标准化的文件/下载卡片。
这是我为你生成的语音素材和参考文档。
主题定制 (Theme Overrides)
除了全局 CSS 变量外，您还可以通过 theme-overrides 属性对单个气泡进行精细化的外观定制。
我已经根据您的品牌色调整了我的外观。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| content | 会话文本 | string | '' |
| markdown | 开启 Markdown 和代码高亮解析引擎 | boolean | true |
| role | 发送方身份 | 'user' | 'assistant' | 'system' | 'assistant' |
| placement | 气泡排列位置 | 'start' | 'end' | 根据 role 自动推断 |
| shape | 气泡边角形制 | 'corner' | 'round' | 'corner' |
| variant | 气泡视觉变体风格 | 'filled' | 'outlined' | 'shadow' | 'borderless' | 'filled' |
| time | 气泡顶部时间标签 | string | — |
| avatar | 自定义气泡头像地址 | string | — |
| loading | 是否正在输出 | boolean | false |
| typing | 显示打字特效动画 | boolean | false |
| citations | 参考引用列表 | AiCitation[] | [] |
| multimodal | 多模态内容 (图片、音频、文件等) | AiMultimodal[] | [] |
| themeOverrides | 主题变量覆盖 | ComponentThemeVars | — |
AiCitation
| 属性名 | 说明 | 类型 |
|---|---|---|
id | 引用索引，对应文本中的标识 | string | number |
title | 来源标题 | string |
url | 详细链接 | string |
source | 来源站点名称 | string |
icon | 来源图标 | string |
AiMultimodal
| 属性名 | 说明 | 类型 |
|---|---|---|
type | 媒体类型 | 'image' | 'audio' | 'file' | 'video' |
title | 标题/文件名 | string |
url | 资源链接 | string |
size | 文件大小 | string |
extra | 额外参数（如语音 duration） | Record<string, unknown> |
Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| default | 内容自定义 | — |
| avatar | 自定义头像 | — |
| header | 自定义头部区域 | — |
| footer | 自定义尾部区域 | — |
在 Nuxt 中使用
该组件完美支持 Nuxt 3/4。在 Nuxt 项目中，组件会被自动按需导入。
有关详细配置，请阅读 Nuxt 集成文档。
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-ai-bubble-user-bg | 用户气泡背景色 | var(--yh-color-primary) |
--yh-ai-bubble-user-color | 用户气泡文字颜色 | var(--yh-color-white) |
--yh-ai-bubble-assistant-bg | AI 气泡背景色 | var(--yh-fill-color-light) |
--yh-ai-bubble-assistant-color | AI 气泡文字颜色 | var(--yh-text-color-primary) |
--yh-ai-bubble-border-radius | 气泡圆角大小 | 12px |