Chat 聊天

AI 聊天界面组件集合：消息列表、输入框、思考过程、工具调用等。

何时使用

需要展示对话或聊天气泡内容时。

基础用法

<script setup lang="ts">
import {
  ChatPalette,
  ChatMessages,
  ChatMessage,
  ChatPrompt,
  ChatPromptSubmit,
} from "@reglow/reui";
</script>

<template>
  <ChatPalette class="h-96">
    <ChatMessages>
      <ChatMessage side="left">
        <template #leading>
          <div class="size-8 rounded-full bg-primary" />
        </template>
        <p>你好，有什么可以帮你的？</p>
      </ChatMessage>
    </ChatMessages>

    <template #prompt>
      <ChatPrompt>
        <textarea class="w-full bg-transparent outline-none text-sm" placeholder="输入消息..." />
        <template #footer>
          <ChatPromptSubmit />
        </template>
      </ChatPrompt>
    </template>
  </ChatPalette>
</template>

数据渲染（messages）

ChatMessages 支持直接传入 messages 数据渲染，按 role 自动分左右（user 右侧、assistant 左侧），并叠加 user / assistant 默认样式；设置 status="streaming" 时列表底部显示加载指示。

<script setup lang="ts">
import { ref } from "vue";

const messages = ref([
  { id: "1", role: "assistant", name: "AI 助手", content: "你好！有什么可以帮你的吗？" },
  { id: "2", role: "user", name: "我", content: "帮我总结一下今天的待办事项" },
]);

const status = ref("ready");
</script>

<template>
  <ChatPalette class="h-96">
    <ChatMessages v-model:status="status" :messages="messages" />
    <template #prompt>
      <ChatPrompt>
        <textarea class="w-full bg-transparent outline-none text-sm" placeholder="输入消息..." />
        <template #footer>
          <ChatPromptSubmit :status="status" />
        </template>
      </ChatPrompt>
    </template>
  </ChatPalette>
</template>

消息头部与操作栏

ChatMessage 支持 name / time（气泡上方）、avatar（圆形头像）与 actions（消息下方操作栏：复制 / 点赞 / 删除等）。

<script setup lang="ts">
import { ref } from "vue";
import { Copy, ThumbsUp, Trash2 } from "lucide-vue-next";

const messages = ref([
  {
    id: "1",
    role: "assistant",
    name: "AI 助手",
    time: "14:30",
    avatar: "https://i.pravatar.cc/64?img=1",
    content: "你好！我是 AI 助手，可以为你解答问题。",
    actions: [
      { key: "copy", label: "复制", icon: Copy },
      { key: "like", label: "点赞", icon: ThumbsUp },
      { key: "delete", label: "删除", icon: Trash2, danger: true },
    ],
  },
]);
</script>

<template>
  <ChatPalette class="h-96">
    <ChatMessages :messages="messages" />
  </ChatPalette>
</template>

表单提交（v-model）

ChatPrompt 内置 textarea 与 v-model，支持 submit-on-enter（Enter 提交 / Shift+Enter 换行）、autoresize 自动增高与 maxrows 上限。底部操作区分左右：#footerLeading 放附件 / 图片（靠左，分隔符自行放置），#footer 放提交按钮（自动靠右）。

<script setup lang="ts">
import { ref } from "vue";
import { ImagePlus, Paperclip } from "lucide-vue-next";

const input = ref("");

function onSubmit() {
  console.log("提交：", input.value);
}
</script>

<template>
  <ChatPrompt
    v-model="input"
    placeholder="Enter 提交 / Shift+Enter 换行"
    :autoresize="true"
    :maxrows="4"
    @submit="onSubmit"
  >
    <template #footerLeading>
      <button type="button" aria-label="上传附件">
        <Paperclip class="size-4" />
      </button>
      <!-- 分隔符放在附件与图片之间 -->
      <div class="mx-1 h-4 w-px bg-border" />
      <button type="button" aria-label="上传图片">
        <ImagePlus class="size-4" />
      </button>
    </template>
    <template #footer>
      <ChatPromptSubmit />
    </template>
  </ChatPrompt>
</template>

消息变体与思考过程

ChatMessage 支持 naked、solid、outline、soft、subtle 五种样式变体。

<template>
  <ChatMessage variant="solid" side="left">实心消息</ChatMessage>
  <ChatMessage variant="outline" side="right">描边消息</ChatMessage>
  <ChatMessage variant="soft" side="left">柔和消息</ChatMessage>
  <ChatMessage compact>紧凑模式消息</ChatMessage>

  <ChatReasoning :loading="true" variant="card">思考中...</ChatReasoning>
</template>

紧凑模式

设置 compact 减少消息间距，适合密集对话场景。

<template>
  <ChatMessage compact>紧凑模式消息</ChatMessage>
</template>

工具调用

ChatTool 用于展示 AI 工具调用的过程和结果。

<template>
  <ChatTool tool-name="搜索" status="success">
    搜索结果：找到了 3 条相关内容
  </ChatTool>
</template>

加载骨架

ChatShimmer 在消息加载时展示骨架屏。

<template>
  <ChatShimmer :lines="4" />
</template>

提交按钮

ChatPromptSubmit 在加载状态下自动切换为停止按钮。

<template>
  <ChatPromptSubmit :loading="true" />
  <ChatPromptSubmit :loading="false" />
</template>

导入

import {
  ChatMessage,
  ChatMessages,
  ChatPalette,
  ChatPrompt,
  ChatPromptSubmit,
  ChatReasoning,
  ChatShimmer,
  ChatTool,
} from "@reglow/reui";

API

ChatMessage Props

属性	类型	默认值	说明
`role`	`"user" \| "assistant"`	`"assistant"`	消息角色：user 右侧发送方，assistant 左侧接收方（AI）
`variant`	`"naked" \| "solid" \| "outline" \| "soft" \| "subtle"`	`"naked"`	样式变体
`side`	`"left" \| "right"`	`"left"`	消息位置
`name`	`string`	-	姓名（头像/气泡上方）
`time`	`string \| number \| Date`	-	时间（头像/气泡上方，HH:MM）
`avatar`	`string \| { src, icon, alt }`	-	头像：URL 或对象；不传时按 role 渲染默认图标
`actions`	`ChatMessageAction[]`	-	操作栏（复制/点赞/删除等），`{ key, label, icon, danger, onClick }`
`compact`	`boolean`	`false`	紧凑模式
`showActions`	`boolean`	`false`	显示操作区

ChatMessage Slots

名称	说明	作用域参数
`default`	消息内容	-
`leading`	头像/图标（默认按 avatar/role 渲染圆形头像）	`{ name }`
`header`	姓名/时间头部（默认渲染 name + time）	`{ name, time }`
`content`	对话内容（默认渲染默认插槽）	-
`actions`	操作栏（默认按 actions prop 渲染按钮组）	-
`files`	附件文件区	-
`footer`	消息底部	-

ChatMessages Props

属性	类型	默认值	说明
`messages`	`ChatMessageData[]`	-	消息列表（不传则用默认插槽渲染）
`status`	`"submitted" \| "streaming" \| "ready" \| "error"`	-	AI 处理状态，submitted/streaming 显示加载指示
`shouldAutoScroll`	`boolean`	`false`	新消息到达时是否持续自动滚动到底部
`shouldScrollToBottom`	`boolean`	`true`	挂载时是否滚动到底部
`autoScroll`	`boolean \| Record<string, any>`	`true`	是否显示「回到最新」按钮（对象透传到按钮）
`autoScrollIcon`	`Component`	`ChevronDown`	「回到最新」按钮图标
`user`	`Partial<ChatMessageProps>`	-	user 消息默认 props（覆盖 role/side/variant/avatar 等）
`assistant`	`Partial<ChatMessageProps>`	-	assistant 消息默认 props
`compact`	`boolean`	`false`	紧凑模式

ChatMessages Slots

名称	说明	作用域参数
`default`	消息内容（messages 未传时）	-
`indicator`	自定义加载指示（status 为 submitted/streaming 时显示）	-
`message`	自定义消息渲染（messages 模式，逐条传入）	`{ message, index }`

ChatMessages Events

事件	说明
`scrollTop`	滚动到顶部
`scrollBottom`	滚动到底部

ChatPrompt Props

属性	类型	默认值	说明
`as`	`string \| Component`	`"form"`	渲染元素
`variant`	`"outline" \| "soft" \| "subtle" \| "naked"`	`"outline"`	样式变体（`naked` 不注入聚焦环，适合调用方自绘输入框）
`modelValue`	`string`	`""`	文本内容（v-model）
`placeholder`	`string`	`"输入消息…"`	占位文字
`submitOnEnter`	`boolean`	`true`	true=Enter 提交 / Shift+Enter 换行；false=Enter 换行 / Ctrl+Enter 提交
`error`	`Error`	-	绑定错误（显示错误提示态）
`rows`	`number`	`1`	textarea 行数
`autofocus`	`boolean`	`true`	自动聚焦
`autoresize`	`boolean`	`true`	自动增高
`maxrows`	`number`	-	自动增高最大行数
`disabled`	`boolean`	`false`	禁用
`loading`	`boolean`	`false`	加载中

ChatPrompt Slots

名称	说明	作用域参数
`default`	输入区域（自定义内容）	-
`header`	头部	-
`body`	替换内部 textarea（如接入编辑器），暴露提交/关闭	`{ submit, close }`
`footer`	底部右侧提交区（提交按钮自动靠右）	-
`footerLeading`	底部左侧操作区（附件 / 图片等），分隔符由使用者自行放置	-
`leading`	前置图标	-
`trailing`	后置图标	-

ChatPromptSubmit Props

属性	类型	默认值	说明
`loading`	`boolean`	`false`	加载中（显示停止按钮）
`disabled`	`boolean`	`false`	禁用
`status`	`"idle" \| "submitted" \| "streaming" \| "ready" \| "error" \| "loading"`	`"idle"`	AI 处理状态，submitted/streaming 显示停止按钮

ChatReasoning Props

属性	类型	默认值	说明
`variant`	`"inline" \| "card"`	`"inline"`	样式
`loading`	`boolean`	`false`	思考中
`defaultOpen`	`boolean`	`true`	默认展开

ChatTool Props

属性	类型	默认值	说明
`toolName`	`string`	-	工具名称
`status`	`"pending" \| "running" \| "success" \| "error"`	-	状态
`defaultOpen`	`boolean`	-	默认展开

ChatShimmer Props

属性	类型	默认值	说明
`lines`	`number`	`3`	骨架行数
`class`	`string`	-	附加类名

ChatPalette Slots

名称	说明
`default`	内容区域
`prompt`	输入区域

国际化

"思考中..."、"思考过程"、"工具调用"、"滚动到底部" 等文案默认跟随全局语言（zh-CN / zh-TW / en-US）。

Chart 图表

基于 Unovis 的图表组件，涵盖面积 / 柱状 / 折线 / 环图等常规图表，以及漏斗、仪表盘、雷达、迷你图等扩展类型

Collapse 折叠面板