ChatMessage

chat-message

对话气泡 · user右(primary)/assistant左(surface)/system居中 + 头像(复用Avatar)/名称/时间 + loading态(TypingDots) + 操作槽·纯皮肤RSC

用法

用户与助手

role 决定对齐与气泡底色：user 右对齐 primary 底 / assistant 左对齐 surface 底。name 显示在正文上方。

我

帮我把首页重写成 100% dogfood

瑚琏 AI

好的，我先看下现有结构再动手。

tsx

<>
  <ChatMessage role="user" name="我">帮我把首页重写成 100% dogfood</ChatMessage>
  <ChatMessage role="assistant" name="瑚琏 AI">好的，我先看下现有结构再动手。</ChatMessage>
</>

加载态

loading 在正文位置渲染 TypingDots（agent 生成中），children 作占位被忽略。

瑚琏 AI

tsx

<ChatMessage role="assistant" name="瑚琏 AI" loading>占位</ChatMessage>

已读回执

status 仅在 role=user（右气泡）渲染：sending 转圈 / sent 单勾 / read 双蓝勾。

我

坐席·小琏刚刚

已为您提交工单。

我

坐席·小琏刚刚

退款预计 1-3 个工作日到账。

tsx

<>
  <ChatMessage role="user" name="坐席·小琏" timestamp="刚刚" status="sent">已为您提交工单。</ChatMessage>
  <ChatMessage role="user" name="坐席·小琏" timestamp="刚刚" status="read">退款预计 1-3 个工作日到账。</ChatMessage>
</>

头像与操作区

avatar 槽传自定义 <Avatar/>，actions 槽放 <MessageActions/>（复制 / 赞 / 踩等，按回调与 content 显隐）。

琏

瑚琏 AI

已完成首页重写，全程 100% dogfood @hulianui/ui。

tsx

<ChatMessage
  role="assistant"
  name="瑚琏 AI"
  avatar={<Avatar fallback="琏" />}
  actions={
    <MessageActions
      content="已完成首页重写"
      onLike={() => {}}
      onDislike={() => {}}
    />
  }
>
  已完成首页重写，全程 100% dogfood @hulianui/ui。
</ChatMessage>

系统通告

role=system 居中弱化，不进气泡/头像体系，用于切换提示等。

已切换到 Opus 4.8

tsx

<ChatMessage role="system">已切换到 Opus 4.8</ChatMessage>

何时用

渲染单条对话气泡（用户/助手/系统通告）。多条气泡的滚动堆叠交给 Conversation；气泡下方的操作按钮用 MessageActions 放进 actions 槽。

导入

import { ChatMessage } from "@hulianui/ui"

Props

继承 Omit<HTMLAttributes<HTMLDivElement>, "title">。

名称	类型	默认	说明
role *	`"user" ｜ "assistant" ｜ "system"`	`"assistant"`(showcase)	user 右对齐(primary 底) / assistant 左对齐(surface 底) / system 居中弱化通告
loading	`boolean`	`false`	加载态：正文位置显示 TypingDots（agent 生成中）
status	`"sending" ｜ "sent" ｜ "read"`	—	已读回执：仅 role=user 渲染。sending 转圈 / sent 单勾 / read 双蓝勾

Slots

插槽	类型	说明
children	`ReactNode`	正文；markdown 建议外层包 `<Prose/>`，纯文本直接传
avatar	`ReactNode`	头像槽（传瑚琏 `<Avatar/>`）；不传用角色默认字符 fallback。system 不渲染头像
name	`ReactNode`	发送者名称（正文上方）
timestamp	`ReactNode`	时间戳（名称右侧，弱化色）
actions	`ReactNode`	底部操作区槽（放 `<MessageActions/>`，仅气泡下方）

禁忌 / 坑

status 已读回执仅在 role="user"（右气泡）渲染，传给 assistant/system 不显示。
loading 为真时正文被 TypingDots 替换，children 仅作占位不展示。

Playground

role正文loading回执(仅右气泡)

你好，我能帮你做什么？

<ChatMessage role="assistant">你好，我能帮你做什么？</ChatMessage>

用法

用户与助手

role 决定对齐与气泡底色：user 右对齐 primary 底 / assistant 左对齐 surface 底。name 显示在正文上方。

我

帮我把首页重写成 100% dogfood

瑚琏 AI

好的，我先看下现有结构再动手。

tsx

<>
  <ChatMessage role="user" name="我">帮我把首页重写成 100% dogfood</ChatMessage>
  <ChatMessage role="assistant" name="瑚琏 AI">好的，我先看下现有结构再动手。</ChatMessage>
</>

加载态

loading 在正文位置渲染 TypingDots（agent 生成中），children 作占位被忽略。

瑚琏 AI

tsx

<ChatMessage role="assistant" name="瑚琏 AI" loading>占位</ChatMessage>

已读回执

status 仅在 role=user（右气泡）渲染：sending 转圈 / sent 单勾 / read 双蓝勾。

我

坐席·小琏刚刚

已为您提交工单。

我

坐席·小琏刚刚

退款预计 1-3 个工作日到账。

tsx

<>
  <ChatMessage role="user" name="坐席·小琏" timestamp="刚刚" status="sent">已为您提交工单。</ChatMessage>
  <ChatMessage role="user" name="坐席·小琏" timestamp="刚刚" status="read">退款预计 1-3 个工作日到账。</ChatMessage>
</>

头像与操作区

avatar 槽传自定义 <Avatar/>，actions 槽放 <MessageActions/>（复制 / 赞 / 踩等，按回调与 content 显隐）。

琏

瑚琏 AI

已完成首页重写，全程 100% dogfood @hulianui/ui。

tsx

<ChatMessage
  role="assistant"
  name="瑚琏 AI"
  avatar={<Avatar fallback="琏" />}
  actions={
    <MessageActions
      content="已完成首页重写"
      onLike={() => {}}
      onDislike={() => {}}
    />
  }
>
  已完成首页重写，全程 100% dogfood @hulianui/ui。
</ChatMessage>

系统通告

role=system 居中弱化，不进气泡/头像体系，用于切换提示等。

已切换到 Opus 4.8

tsx

<ChatMessage role="system">已切换到 Opus 4.8</ChatMessage>

Props

继承 Omit<HTMLAttributes<HTMLDivElement>, "title">。

名称	类型	默认	说明
role *	`"user" ｜ "assistant" ｜ "system"`	`"assistant"`(showcase)	user 右对齐(primary 底) / assistant 左对齐(surface 底) / system 居中弱化通告
loading	`boolean`	`false`	加载态：正文位置显示 TypingDots（agent 生成中）
status	`"sending" ｜ "sent" ｜ "read"`	—	已读回执：仅 role=user 渲染。sending 转圈 / sent 单勾 / read 双蓝勾

Slots

插槽	类型	说明
children	`ReactNode`	正文；markdown 建议外层包 `<Prose/>`，纯文本直接传
avatar	`ReactNode`	头像槽（传瑚琏 `<Avatar/>`）；不传用角色默认字符 fallback。system 不渲染头像
name	`ReactNode`	发送者名称（正文上方）
timestamp	`ReactNode`	时间戳（名称右侧，弱化色）
actions	`ReactNode`	底部操作区槽（放 `<MessageActions/>`，仅气泡下方）

ChatMessage

用法

用户与助手

加载态

已读回执

头像与操作区

系统通告

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

ChatMessage

用法

用户与助手

加载态

已读回执

头像与操作区

系统通告

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground