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>

你好

你好！有什么可以帮你的吗？

消息变体与思考过程

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

属性	类型	默认值	说明
`variant`	`"naked" \| "solid" \| "outline" \| "soft" \| "subtle"`	`"naked"`	样式变体
`side`	`"left" \| "right"`	`"left"`	消息位置
`compact`	`boolean`	`false`	紧凑模式
`showActions`	`boolean`	`false`	显示操作区

ChatMessage Slots

名称	说明
`default`	消息内容
`header`	消息头部
`leading`	头像/图标
`actions`	操作按钮

ChatMessages Props

属性	类型	默认值	说明
`autoScroll`	`boolean`	`true`	自动滚动到底部
`compact`	`boolean`	`false`	紧凑模式

ChatMessages Events

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

ChatPrompt Props

属性	类型	默认值	说明
`variant`	`"outline" \| "soft" \| "subtle" \| "naked"`	`"outline"`	样式变体

ChatPrompt Slots

名称	说明
`default`	输入区域
`header`	头部
`footer`	底部

ChatPromptSubmit Props

属性	类型	默认值	说明
`loading`	`boolean`	`false`	加载中（显示停止按钮）
`disabled`	`boolean`	`false`	禁用

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）。

Card 卡片

Collapsible 折叠面板

展开或折叠内容的容器