Bubble
提供基础对话气泡容器。中文惯用名：气泡。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.bubble |
| 名称 | Bubble |
| 二级分类 | AI 与会话（ai-chat） |
| 用途 | 提供基础对话气泡容器 |
| 描述 | 中文惯用名：气泡。 |
预览
静态结构：vendored Bubble（data-slot="bubble"，data-align / data-variant）+ BubbleContent；变体七态（default 主色 / secondary / muted / tinted / outline / ghost 透明 / destructive），align=end 居右。内容经 Renderer children 机制渲染 DSL 子树。
DSL 结构
{
"type": "Bubble",
"props": {
"align": "end",
"variant": "tinted"
},
"children": [
{
"type": "Text",
"props": {
"text": "帮我生成一份月报"
}
}
]
}何时用
何时使用
- 基础对话气泡容器：自定义消息体的底色与左右停靠。
- 承载任意 DSL 子树（文本、Markdown、卡片）作为气泡内容。
何时不用
- 完整消息（发送方 + 正文段 + 操作）：使用 ChatMessage。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| muted（默认） | muted 底色 | 助手消息 |
| default | 主色底白字 | 用户消息 |
| ghost | 透明无内边距 | 长文 / Markdown 正文 |
| outline / destructive | 描边 / 错误色 | 系统提示、错误消息 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
align | `'start' | 'end'` | 'start' |
variant | `'default' | 'secondary' | 'muted' |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 用户消息 default + end、助手消息 muted/ghost + start，保持同一产品内一致。
正例
- ✓ 系统提示：outline 气泡居中承载说明文字。
反例
- ✕ 用 Bubble 做普通卡片（应使用 Card）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。