ChatMessage

展示用户、助手或系统消息。中文惯用名：会话消息；与反馈分类全局 Message 区分。

稳定本期新增已接入

元信息

字段	值
规范 ID	`component.chat-message`
名称	ChatMessage
二级分类	AI 与会话（`ai-chat`）
用途	展示用户、助手或系统消息
描述	中文惯用名：会话消息；与反馈分类全局 Message 区分。

预览

静态结构：列（user 右对齐）= Sender（头像 / 名称 / 时间，showSender 可关）+ 有序 parts 渲染——text（user 主色气泡 / assistant muted 气泡）、markdown（ghost 气泡 + Markdown）、thinking（Thinking 卡）、tool-call（ToolCall 卡）、tool-result（pre）、status（muted 行）、error（destructive 行）——+ streaming 末尾光标 + 操作行（completed / error 时展示，onAction 传出 name）。parts 与 chat 的 ChatPart 结构对齐（dsl / artifact 段由 chat 产品层承接）。

DSL 结构

DslNode

{
  "type": "ChatMessage",
  "props": {
    "role": "assistant",
    "status": "completed",
    "agent": {
      "name": "Pactor 助手",
      "icon": "sparkles"
    },
    "time": "10:24",
    "parts": [
      {
        "type": "text",
        "content": "本月华东区销售额环比增长 12.4%。"
      },
      {
        "type": "markdown",
        "content": "**重点指标**\n\n- 新客转化率：8.2%\n- 复购率：41.5%"
      }
    ]
  },
  "events": {
    "onAction": {
      "action": "setState",
      "params": {
        "action": "${event}"
      }
    }
  }
}

何时用

何时使用

展示用户、助手或系统消息：会话回放、嵌入式问答、对话式表单。

何时不用

全局操作反馈：使用反馈分类 Message（二者职责不同）。
完整会话产品（流式 transport / 消息操作闭环 / artifact）：使用 @pactor-app/chat。

变体

变体	视觉形态	适用场景
user	主色气泡居右	用户提问
assistant	Sender + 多段正文	助手回答
streaming	末尾光标	生成中
带操作	操作行	重试 / 复制 / 反馈

API 属性

属性	类型	默认值	说明
`role`	`'user'	'assistant'	'system'`
`parts`	`ChatMessagePart[]`	[]	有序正文段：text / markdown / thinking / tool-call / tool-result / status / error
`status`	`'pending'	'streaming'	'completed'
`agent`	`{ name, icon? }`	—	助手身份（顶部 Sender 展示）
`time`	`string`	—	时间文本
`showSender`	`boolean`	true	是否展示发送方行
`actions`	`ChatMessageActionItem[]`	[]	操作：{ name, label?, icon? }
`onAction`	`event`	—	操作事件，传出 name（${event}）
`className / style`	`string / CSSProperties`	—	通用：根节点 class 合并 / 内联样式

使用规范

thinking 与正文分离，操作行仅在 completed / error 出现。
消息数据由调用方组装（props 驱动），组件不感知 store。

正例

✓ 会话回放页：历史消息数组逐条 ChatMessage 渲染。
✓ 嵌入式问答：用户提问 + 助手回答（thinking → markdown）单轮呈现。

反例

✕ 用 ChatMessage 展示系统全局通知（应使用 Message / Notification）。

Design Token 映射

不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。