跳到主要内容
前端术语库

UI 组件 · 消息

聊天气泡

Chat Bubble

也叫：消息气泡、对话气泡、聊天消息、Message Bubble、Chat Message、Speech Bubble

聊天和 AI 对话界面里的一条消息：一块圆角带底色的文字框，自己发的靠右、对方或 AI 的靠左，旁边带头像和时间。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

做一个 AI 助手的对话消息区：对话区最大宽度 760px 居中。用户消息靠右，浅灰底 #F4F4F4、圆角 18px、内边距 10px 16px，最大宽度 75%；AI 回复靠左，左侧 28px 圆形头像，正文不加底色，支持段落、列表和带复制按钮的代码块，回复下方一排 28px 的图标按钮「复制、点赞、点踩、重新生成」，鼠标悬停在这条消息上时才显示。AI 正在生成时显示三个跳动的圆点，旁边可以点「停止」。发送失败的消息左侧显示红色感叹号和「重试」。消息之间间距 16px；新消息到来时自动滚到底部，用户往上翻看历史时不自动滚动，右下角出现「↓ 回到最新」按钮。

发给

01判断

你的内容是这样吗？

对照两列，确认聊天气泡是不是你要找的。

符合这些情况，用聊天气泡

  • 即时聊天、在线客服、私信这类两个人或多人一来一回的对话
  • ChatGPT 风格的 AI 助手，展示用户的提问和 AI 的回复
  • 工单、订单沟通里按时间展示买家、卖家和客服之间的往来消息

是这些情况，换成别的

  • 文章、商品下面的评论和回复，用评论组件，按时间或热度排成一列

    改用评论

  • 系统发来的通知、公告，不是对话

    改用通知中心警告提示

  • 操作记录、审批流转这类按时间排的事件

    改用时间线

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    双方的消息都靠左、同一种颜色，得看昵称才知道哪句是自己说的

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    气泡撑满整行宽度，长段落一行横跨整个屏幕，读起来很累

  3. 03

    新消息来了不滚动到底部，或者用户正往上翻历史记录时被强行拉回最底下

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由头像、昵称和时间（可选）、带底色的消息框和消息操作（复制、重新生成等）组成；自己和对方的消息左右分开排列，AI 回复里可以嵌段落、列表和代码块。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一列上下交错的圆角文字框，有的靠左、有的靠右，颜色不同
  2. 2靠左的消息旁边有圆形头像，框的上方或下方有小字时间
  3. 3最下方通常是一个带发送按钮的输入框

04解释

详细解释

聊天气泡是对话界面的基本单位。微信、在线客服、ChatGPT 这类 AI 助手里，每条消息都装在一个气泡里：自己发的靠右、用主色或灰色底，对方发的靠左、用白底或浅灰底，旁边是头像，上方或下方有昵称和发送时间。AI 助手的回复通常更宽、甚至不加底色，里面可以有段落、列表、代码块，下方跟一排「复制、点赞、重新生成」的小按钮；正在生成时显示三个跳动的圆点，或者文字一个个冒出来。

它和 评论 长得像，都是头像加一段话，区别在场景：评论挂在一篇文章、一个商品下面，所有人的评论靠左排成一列，每条可以点赞、回复；聊天气泡是两个人（或人和 AI）一来一回的对话，左右交替排列，新消息出现在最下面。它也不是 气泡卡片：气泡卡片是点击按钮后弹出的浮层，和聊天无关。

左右位置和颜色要一眼分出是谁说的；气泡最大宽度控制在对话区的 70%~80%，长文字自动换行，不要撑满整行。同一个人连续发的几条可以只显示一次头像、缩小间距；隔了较长时间插一行居中的时间。发送中、发送失败（红色感叹号加「重试」）、已读这些状态都要画出来。新消息到来时自动滚到底部，但用户正在往上翻历史时不要把他拉回去。

开发者信息
术语 ID
component-chat-bubble
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-bubble
  • .chat-bubble
  • .chat:is(.chat-start, .chat-end)
  • [data-message-author-role]
  • .cs-message
  • .rce-mbox
  • .str-chat__message
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • chat-bubble
  • message-bubble
  • msg-bubble
  • bubble
  • chat-message
  • chat-msg
  • message
  • message-item
  • message-row
  • user-message
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • ChatBubble
  • MessageBubble
  • ChatMessage
  • MessageItem
  • Bubble
  • UserMessage
  • AssistantMessage
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30