不过，

用 TinyRobot Bubble 组件建立灵活强大的 AI 对话气泡

：为什么 AI 对话界面需要灵活的气泡组件？

在实际项目中。开发者往往面临以下痛点：

• 从基础开始实现对话气泡，需要手写大量样式和布局代码，导致项目周期拉长。
• 不同设备、主题甚至语言版本对 UI 的适配极其繁琐，一旦出现细微差别就会出现错位或渲染错误。
• 状态同步与消息渲染耦合度高，难以复用。老实说，
• 流式文本展示必须自己维护响应式逻辑与动画节奏。

TinyRobot Bubble 组件正是为解决这些痛点而诞生——它提供了声明式气泡程序，让你用极少的代码建立专业级 AI 对话界面。

主要能力一览

代码示例

基础气泡使用

最简单的气泡只需要一个 content 属性。 通过 CSS 变量可以快速调整样式。

是气泡组件的基础入口。传入字符串作为 content组件会自动使用内置的 BubbleRenderers.Text 渲染器展示文字。通过 --tr-bubble-box-bg 可以设置气泡背景色，--tr-bubble-text-font-size 控制文字大小。

流式文本——AI 回复的打字机效果

A.I 回复通常是逐字生成的。Bubble 的 content 是响应式的—动态追加内容就可以流式输出。

说到关键点。  tagref   tagref - 每次追加字符 Vue 都会触发重新渲染，Bubble 内部高效地更新显示内容，无需任何额外配置。

头像和位置

与。可通过 CSS 自定义更多细节。

&l div style="width:auto;&l">
&l tr-bubble
content="'你好，我想了解一下数据分析'"
:avatar=""
placement='end'';不过，style='--tr-bubble-box-bg:var'
/>
&l tr-bubble
content='好的。我来帮你分析，怎么说呢，'
:avatar=
placement='start'
/


import{TrB ubble}from '@opentiny/tiny‑robot';impor t{IconAi,IconUser}from '@opentiny/tin y‑robot-svgs';imp or{ h }from 'Vue';const aiAvatar=h;con st userAvatar=h;

\`placement=\"end\"\` =右侧对齐，\`placement=\"start\"\` =左侧对齐。头像可使用 Vue 的 `$h` 函数渲染 SVG 图标组件。

BubbleList + roleConfigs：批量消息管理

P.S. 单条气泡只能演示场景。但真实应用需在列表里呈现多条消息，这时就要用到 TrBubbleList 和统一角色配置。老实说，这能大幅减少重复代码并保持风格一致性。不过，

主要 API 示意
TrBubbleList 接收两大 props：
messages:
role-configs:	{'user':{placement:'end',avatar:userAvatar}。...}
group-strategy 可控制分组方式
- consecutive：连续相同角色合并一组 - divider：每个分割角色单独成组 - 自定义函数：=>...
示例代码
template />
script setup…/>

html