Bubble 气泡

会话消息气泡表面：只负责气泡本身（背景/边框/圆角/宽度上限 + 内容），头像、名字、时间、发送态由 oas-message-row 组合行负责。用于 AI 助手、客服会话、IM 聊天等会话流场景。

基础用法

默认气泡

你好，介绍一下 OAS-UI 的会话组件族。

示例代码

气泡内容走默认插槽；宽度自适应内容、上限 80% 容器宽（可用 --oas-bubble-max-width 整链覆盖）。

方向（align）

我方 / 对方左右分侧

对方消息：默认靠 start 侧（逻辑属性，RTL 下自动镜像）。我方消息：align="end" 靠 end 侧，与对方视觉分侧。

示例代码

align="start" | "end" 用逻辑布局实现（margin-inline-start: auto + text-align: end），RTL 下自动翻转，无物理方向 CSS。

变体（variant）

六种语义变体

default：中性浅底（默认）。secondary：主色浅调，常用于我方消息。muted：无底、次级文字色。outline：白底描边。ghost：无底无框，宽度上限放开。destructive：危险语义（报错回显等）。

示例代码

variant="secondary" | "destructive" 的浅调底用 color-mix() 与主题语义色混合（theme-aware），暗色下自动适配；ghost 放开 80% 宽度上限，适合长回答整段流式。

打字中（loading）

loading 打字指示

帮我总结一下这段文档的要点。模拟回复中…

示例代码

布尔属性 loading 在场时内容切换为三点打字指示（AI「正在输入」场景），宿主元素反射 aria-busy；动画尊重 prefers-reduced-motion。

表情回应（reactions）

表情 + 计数（side / align）

这个方案我赞成，细节再对一下。上面的方案我已确认。

点击表情条上的按钮，这里显示收到的 oas-reaction。

示例代码

reactions 是 JSON 数组（每项 { emoji, count?, active?, label? }，emoji 必填；空数组/非法 JSON 不渲染反应条）；reactions-side 控制上下（默认 bottom，top 放气泡上方），reactions-align 覆盖横向对齐（缺省跟随气泡 align）。每条反应是真按钮（键盘可达 + 焦点环 + aria-pressed 反映选中态）：点击派发 oas-reaction（detail { emoji, count, active, index }）——反应数据仍由宿主拥有，组件只派发意图。

无障碍

• 方向语义不单靠颜色与对齐传达：发送者名/消息文本由 oas-message-row 的 header/内容承载，屏幕阅读器可读。
• loading 态打字点包 role="status" + locale 可读名称（「正在输入…」），三点本体 aria-hidden。
• 气泡无键盘交互（纯展示表面），入不做 tab 序；富内容（链接/按钮）由宿主放默认插槽，各自保持原生可达。

API

oas-bubble

属性

属性	说明	类型	默认值
align	方向：start（对方，默认）/ end（我方）——逻辑属性实现（align-self 镜像），RTL 自动镜像；显式设置时优先于容器 text-align 的继承反射	—	—
loading	打字中态（布尔在场）：内容切换为三点打字指示，宿主元素反射 aria-busy（AI「正在输入」场景）	boolean	—
reactions	表情回应条 JSON 数组，每项 { emoji, count?, active?, label? }（emoji 必填）；空数组/非法 JSON 不渲染反应条	—	—
reactions-align	反应条横向对齐：start / end；缺省跟随气泡 align	—	—
reactions-side	反应条纵向位置：bottom（默认，气泡下方）/ top（气泡上方）	—	—

事件

事件	说明
oas-reaction	点击某条反应时派发，detail { emoji, count, active, index }（反应数据仍由宿主拥有，组件只派发意图）

插槽

名称	说明
默认	气泡内容

CSS 变量

CSS 变量	默认值
--oas-bubble-max-width	80%
--oas-bubble-radius	var(--oas-radius-lg)

部件：::part(bubble) 气泡表面、::part(content) 内容区、::part(typing) 打字点、::part(reactions) 反应条 / ::part(reaction) 单个反应钮。align（start 默认 / end）与 variant（default / secondary / muted / outline / ghost / destructive）为纯 CSS 消费通道。