rt-chat-messages

AI 对话消息展示组件库，提供开箱即用的 Markdown 渲染、代码高亮、Mermaid 图表、多模态消息（语音/图片/文件）展示功能。

预览

特性

• 📦 开箱即用：封装了复杂的 Markdown 和流式消息渲染逻辑
• 🎨 零 UI 库依赖：内置基础 UI 组件，不依赖 Element Plus 等庞大组件库
• 📱 响应式设计：完美适配 PC 和移动端
• 🌙 深色模式：内置深色模式支持
• 🛠 Mermaid & KaTeX：内置图表和数学公式支持
• 🤖 Agent 支持：内置 Agent 执行步骤展示

安装

npm install rt-chat-messages

快速使用

引入样式

在你的入口文件 (main.ts) 中引入样式：

import "rt-chat-messages/style.css";

使用组件

<template>
  <div class="chat-container">
    <ChatMessageList
      :messages="messages"
      :is-streaming="isStreaming"
      :is-typing="isWaiting"
      app-name="荣小宝"
      @copy="handleCopy"
    />
  </div>
</template>

<script setup>
import { ChatMessageList } from "rt-chat-messages";
import { ref } from "vue";

const messages = ref([
  { role: "user", content: "你好" },
  { role: "assistant", content: "你好！我是荣小宝，有什么可以帮你？" },
]);
const isStreaming = ref(false);
const isWaiting = ref(false);

const handleCopy = (message) => {
  console.log("Copy:", message.content);
};
</script>

<style>
.chat-container {
  height: 600px; /* 必须给容器高度 */
}
</style>

组件 API

ChatMessageList

Props

| 属性 | 类型 | 默认值 | 说明 | | ---------------- | --------------- | ---------- | -------------------------------------------------- | | messages | ChatMessage[] | [] | 消息列表 | | isStreaming | boolean | false | 是否正在流式输出（用于优化渲染性能） | | isTyping | boolean | false | 是否显示输入的等待动画 | | autoScroll | boolean | true | 是否自动跟随内容滚动到底部 | | showWelcome | boolean | true | 是否显示欢迎页（当无消息时） | | appName | string | 'AI助手' | 欢迎页显示的名称 | | appLogo | string | - | 欢迎页 Logo URL | | agentSteps | AgentStep[] | [] | Agent 执行步骤（用于展示思考过程），格式见下方定义 | | showAgentSteps | boolean | true | 是否显示 Agent 步骤 |

AgentStep 类型定义

export interface AgentStep {
  /** 唯一标识符 */
  name: string;
  /** 显示名称 */
  displayName: string;
  /** 状态 */
  status: "running" | "completed" | "error";
  /** 开始时间戳 (ms) */
  startTime?: number;
}

Events

| 事件名 | 参数 | 说明 | | --------------- | ------------------------ | ------------------ | | copy | (message: ChatMessage) | 点击复制按钮时触发 | | scroll | (event: Event) | 滚动事件 | | scroll-bottom | - | 滚动到底部时触发 |

类型定义

export interface ChatMessage {
  id?: string;
  role: "user" | "assistant" | "system" | string;
  content: string;
  metadata?: string | any;
  attachments?: FileAttachment[];
  create_time?: string;
  // 允许其他任意属性
  [key: string]: any;
}

export interface FileAttachment {
  name: string;
  size: number;
  type: string;
  fileType?: string;
}

MultimodalMessage / MarkdownMessage

这两个组件也可以单独使用，用于渲染单条消息或 Markdown 内容。

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build