AiBubble 对话气泡
承载对话消息的冒泡显示。
基础用法
可以展示 user 和 assistant 的样式差异，以及加载动画效果！
人工智能（AI）是一种能够执行通常需要人类智能的任务的技术。
那它能自己写代码吗？
进阶功能与变体
AiBubble 直接内置了强大的 Markdown 引擎与 highlight.js 代码高亮解析。并提供了丰富的变体 (variant) 与形制 (shape)、以及时间等信息传递的支持。
这是一段 Markdown 的渲染示例。来看一段代码：
typescriptconst greeting = 'Hello World';
console.log(greeting);
真棒！可以更换样式吗？
当然可以，这是 outlined 模式。
看起来非常有质感。
如果您不喜欢外轮廓，可以使用 borderless 模式。
打字特效与视觉反馈 (Typing & Ripple Effect)
这不仅仅是一个空 loading，它允许文字在一个一个吐出时跟随一个强烈的闪烁光标（类似光标指针的效果），以模仿正在被 AI 书写的感觉。
TIP
增强反馈：当开启 typing 模式时，组件会自动在最后一行附加**“光标闪烁”效果，并伴随背景的“温和波纹”**流光动效，让生成过程更具生命感。
- 极致性能 (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)
组件支持多种媒体格式的直接展示，包括图片网格、带波形动画的语音播放器以及标准化的文件/下载卡片。
这是我为你生成的语音素材和参考文档。
高级配置：Markdown & 结构化数据
通过 markdown-options 与 structured-data 以及回调 on-run-code / on-explain-code，你可以让 AiBubble 直接承载更复杂的 Markdown 交互与结构化内容渲染。
这是一段 Markdown 的渲染示例。来看一段代码：
typescriptconst greeting = 'Hello World';
console.log(greeting);
| 指标 | 数值 |
|---|---|
| Tokens | 256 |
| Latency(ms) | 120 |
更多示例
自定义头像
通过 avatar 属性或 #avatar 插槽自定义气泡的头像。
你好！我是 AI 助手，有什么可以帮助你的吗？
我想了解如何使用这个组件库。
自定义头部/尾部插槽
使用 #header 和 #footer 插槽自定义气泡的附加信息区域。
这是一个带有自定义头部和尾部的气泡。
气泡位置控制
通过 placement 属性控制气泡的对齐位置。
左侧气泡（start）
右侧气泡（end）
系统消息
使用 role="system" 展示系统提示或公告信息。
⚠️ 系统提示：当前对话时长已超过 30 分钟，建议保存进度。
有什么我可以帮助你的？
纯文本模式
关闭 Markdown 解析，显示纯文本内容。
完整对话流
展示多轮对话的完整效果。
你好！我是 AI 助手，今天有什么我可以帮助你的？
我想学习 Vue 3 的组合式 API。
组合式 API 是 Vue 3 引入的一种新的 API 风格，它允许你更好地组织组件逻辑。
能给我一个例子吗？
当然可以！
vue<script setup>
import { ref, computed } from "vue"
const count = ref(0)
const doubled = computed(() => count.value * 2)
<\/script>
<template>
<button @click="count++">Count: {{ count }}</button>
</template>
这就是一个简单的组合式 API 示例。