Preview Updated 2026-05-10

ChatBubble 对话气泡

单条对话消息：role / state / timestamp / author / hover 工具条（复制 / 重试 / 编辑 / 分支）。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

role 决定颜色与对齐：user 默认右对齐 accent 实色背景，assistant 左对齐 surface 背景，system 居左 dashed 边框。state 控制状态：sending 半透明、streaming 显示闪烁光标、error 出红色错误条。hover 显示复制 / 重试 / 编辑 / 分支按钮。

背景视口

Yifan09:01

帮我把这段 SQL 优化一下，加索引提示和 EXPLAIN 输出。

Claude09:01

可以在 user_id 和 created_at 上加一个复合索引；下面的 EXPLAIN 已经能命中索引扫描，扫描行数从 320k 降到 12 行。

Claude

正在生成…

Claude

消息发送失败。

此对话已开启 Web 搜索能力。

src/App.vue

<script setup lang="ts">
import { CfChatBubble } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack" style="gap: 4px;">
    <CfChatBubble
      role="user"
      content="帮我把这段 SQL 优化一下，加索引提示和 EXPLAIN 输出。"
      :author="{ name: 'Yifan' }"
      :timestamp="new Date()"
    />
    <CfChatBubble
      role="assistant"
      :author="{ name: 'Claude' }"
      :timestamp="new Date()"
    >
      可以在 <code>user_id</code> 和 <code>created_at</code> 上加一个复合索引；
      下面的 EXPLAIN 已经能命中索引扫描，扫描行数从 320k 降到 12 行。
    </CfChatBubble>
    <CfChatBubble role="assistant" state="streaming" :author="{ name: 'Claude' }">
      正在生成…
    </CfChatBubble>
    <CfChatBubble role="assistant" state="error" :author="{ name: 'Claude' }" />
    <CfChatBubble role="system" content="此对话已开启 Web 搜索能力。" />
  </div>
</template>

<script setup>
import { CfChatBubble } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack" style="gap: 4px;">
    <CfChatBubble
      role="user"
      content="帮我把这段 SQL 优化一下，加索引提示和 EXPLAIN 输出。"
      :author="{ name: 'Yifan' }"
      :timestamp="new Date()"
    />
    <CfChatBubble
      role="assistant"
      :author="{ name: 'Claude' }"
      :timestamp="new Date()"
    >
      可以在 <code>user_id</code> 和 <code>created_at</code> 上加一个复合索引；
      下面的 EXPLAIN 已经能命中索引扫描，扫描行数从 320k 降到 12 行。
    </CfChatBubble>
    <CfChatBubble role="assistant" state="streaming" :author="{ name: 'Claude' }">
      正在生成…
    </CfChatBubble>
    <CfChatBubble role="assistant" state="error" :author="{ name: 'Claude' }" />
    <CfChatBubble role="system" content="此对话已开启 Web 搜索能力。" />
  </div>
</template>

import { CfChatBubble } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div className="demo-stack" style={{ gap: 4 }}>
          <CfChatBubble role="user" content="帮我把这段 SQL 优化一下，加索引提示和 EXPLAIN 输出。" author={{ name: 'Yifan' }} timestamp={new Date()} />
          <CfChatBubble role="assistant" author={{ name: 'Claude' }} timestamp={new Date()} >
            可以在 <code>user_id</code> 和 <code>created_at</code> 上加一个复合索引；
            下面的 EXPLAIN 已经能命中索引扫描，扫描行数从 320k 降到 12 行。
          </CfChatBubble>
          <CfChatBubble role="assistant" state="streaming" author={{ name: 'Claude' }}>
            正在生成…
          </CfChatBubble>
          <CfChatBubble role="assistant" state="error" author={{ name: 'Claude' }} />
          <CfChatBubble role="system" content="此对话已开启 Web 搜索能力。" />
        </div>
    </>
  );
}

import { CfChatBubble } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div className="demo-stack" style={{ gap: 4 }}>
          <CfChatBubble role="user" content="帮我把这段 SQL 优化一下，加索引提示和 EXPLAIN 输出。" author={{ name: 'Yifan' }} timestamp={new Date()} />
          <CfChatBubble role="assistant" author={{ name: 'Claude' }} timestamp={new Date()} >
            可以在 <code>user_id</code> 和 <code>created_at</code> 上加一个复合索引；
            下面的 EXPLAIN 已经能命中索引扫描，扫描行数从 320k 降到 12 行。
          </CfChatBubble>
          <CfChatBubble role="assistant" state="streaming" author={{ name: 'Claude' }}>
            正在生成…
          </CfChatBubble>
          <CfChatBubble role="assistant" state="error" author={{ name: 'Claude' }} />
          <CfChatBubble role="system" content="此对话已开启 Web 搜索能力。" />
        </div>
    </>
  );
}

API

属性	类型	默认	说明
`role`	`'user' \| 'assistant' \| 'system'`	`—`	决定颜色与默认对齐
`content`	`string`	`—`	纯文本快路径；slot/children 覆盖
`timestamp`	`Date \| string`	`—`	时间，显示 HH:mm
`author`	`{ name?, avatar?, initials? }`	`—`	作者信息
`state`	`'sending' \| 'sent' \| 'error' \| 'streaming'`	`'sent'`	消息状态
`showCopy`	`boolean`	`true`	显示 hover 复制
`showActions`	`boolean`	`true`	显示 hover 工具条
`align`	`'auto' \| 'start' \| 'end'`	`'auto'`	覆盖自动对齐

Events

Vue	React	说明
`copy` / `retry` / `edit` / `branch`	`onCopy` / `onRetry` / `onEdit` / `onBranch`	工具条按钮
`action`	`onAction`	统一回调，payload 为 action 名