@dbgpt/vue-chat-system

Vue 3 聊天组件库，基于 DB-GPT 项目开发的高可复用聊天系统

✨ 特性

• 🎨 现代化 UI - 基于 Element Plus 和 Tailwind CSS
• 🔌 按需引入 - 支持 Tree Shaking，只打包使用的组件
• 📦 开箱即用 - 提供完整的聊天功能，包括消息渲染、输入面板等
• 🎯 TypeScript - 完整的类型定义支持
• 🔄 流式响应 - 支持 SSE 流式对话
• 📊 多种渲染 - Markdown、代码高亮、图表、JSON 等
• 🎭 主题切换 - 支持深色/浅色主题
• 🌍 国际化 - 内置中英文支持

📦 安装

# npm
npm install @dbgpt/vue-chat-system

# pnpm
pnpm add @dbgpt/vue-chat-system

# yarn
yarn add @dbgpt/vue-chat-system

Peer Dependencies

确保你的项目已安装以下依赖：

npm install vue@^3.4.0 element-plus@^2.4.0

可选依赖（如果需要状态管理和路由）：

npm install pinia@^2.1.0 vue-router@^4.2.0

🚀 快速开始

完整引入（使用组件）

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入完整样式
import '@dbgpt/vue-chat-system/dist/style.css'
import VueChatSystem from '@dbgpt/vue-chat-system'

const app = createApp(App)
app.use(ElementPlus)
app.use(VueChatSystem)
app.mount('#app')

按需引入组件（推荐）

<template>
  <IntegratedChat 
    :chat-id="chatId"
    :scene="scene"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IntegratedChat } from '@dbgpt/vue-chat-system'
// 引入完整样式
import '@dbgpt/vue-chat-system/dist/style.css'

const chatId = ref('conv_123')
const scene = ref('chat_normal')
</script>

完全自定义 UI（不使用组件样式）

如果你使用 Hooks 完全自己实现 UI，可以不引入样式：

<template>
  <div class="my-chat">
    <!-- 使用 Tailwind/UnoCSS 等完全自定义 UI -->
    <div v-for="msg in chatStore.history" :key="msg.order">
      {{ msg.context }}
    </div>
    <input v-model="text" @keyup.enter="send" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useChat, useChatStore } from '@dbgpt/vue-chat-system'
// 不引入任何样式，或只引入 CSS 变量
// import '@dbgpt/vue-chat-system/dist/styles/theme.css'

const chatStore = useChatStore()
const { handleChat } = useChat()
const text = ref('')

const send = async () => {
  await handleChat(text.value)
  text.value = ''
}
</script>

<style>
/* 使用你自己的样式 */
.my-chat {
  /* 可选：使用库提供的 CSS 变量 */
  background: var(--chat-bg-color);
}
</style>

📖 使用示例

基础聊天组件

<template>
  <div class="chat-container">
    <IntegratedChat 
      :chat-id="chatId"
      :scene="scene"
      @send-message="handleSend"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IntegratedChat, useChat } from '@dbgpt/vue-chat-system'
import '@dbgpt/vue-chat-system/dist/style.css'

const chatId = ref('conv_123')
const scene = ref('chat_normal')

const { handleChat } = useChat()

const handleSend = async (message: string) => {
  await handleChat(message)
}
</script>

使用 DB-GPT 服务

import { dbgptService } from '@dbgpt/vue-chat-system'

// 发送聊天消息
const response = await dbgptService.chat({
  user_input: 'Hello, AI!',
  conv_uid: 'conv_123',
  chat_mode: 'chat_normal'
})

// 流式聊天
await dbgptService.chatStream(
  {
    user_input: 'Tell me a story',
    conv_uid: 'conv_123'
  },
  (chunk) => {
    console.log('Received:', chunk)
  },
  () => {
    console.log('Stream complete')
  }
)

使用 Hooks

import { useChat } from '@dbgpt/vue-chat-system'

const {
  handleChat,      // 发送消息
  pauseChat,       // 暂停响应
  regenerateAnswer, // 重新生成
  clearChatMemory  // 清除记忆
} = useChat({
  queryAgentURL: '/api/v1/chat/completions',
  app_code: 'my-app'
})

// 发送消息
await handleChat('Hello!')

// 暂停
pauseChat()

// 重新生成
await regenerateAnswer()

使用状态管理

import { useChatStore } from '@dbgpt/vue-chat-system'

const chatStore = useChatStore()

// 添加消息
chatStore.addMessage({
  role: 'human',
  context: 'Hello',
  order: 1,
  time_stamp: Date.now()
})

// 清空历史
chatStore.clearHistory()

// 设置主题
chatStore.setMode('dark')

🎨 组件列表

核心组件

• IntegratedChat - 集成聊天组件（推荐）
• ChatPage - 完整聊天页面
• ChatContainer - 聊天容器
• ChatContent - 聊天内容区
• ChatInputPanel - 输入面板
• ChatHeader - 聊天头部
• ChatSider - 侧边栏

渲染组件

• MarkdownRenderer - Markdown 渲染器
• DBGPTRenderer - DB-GPT 特殊标签渲染
• ChartRenderer - 图表渲染器
• CodeView - 代码查看器
• JsonViewer - JSON 查看器
• HtmlPreview - HTML 预览

图表组件

• LineChart - 折线图
• BarChart - 柱状图
• PieChart - 饼图
• AreaChart - 面积图
• ScatterChart - 散点图
• BubbleChart - 气泡图
• HeatmapChart - 热力图

🔧 API 文档

IntegratedChat Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | chatId | string | - | 对话 ID | | scene | string | - | 聊天场景 | | modelName | string | - | 模型名称 | | autoFocus | boolean | true | 自动聚焦输入框 |

IntegratedChat Events

| 事件名 | 参数 | 说明 | |--------|------|------| | send-message | (message: string) | 发送消息时触发 | | message-received | (message: ChatMessage) | 收到消息时触发 |

useChat Options

interface UseChatOptions {
  queryAgentURL?: string  // API 地址
  app_code?: string       // 应用代码
}

dbgptService API

// 聊天
dbgptService.chat(params: ChatRequest): Promise<ChatResponse>

// 流式聊天
dbgptService.chatStream(
  params: ChatRequest,
  onChunk: (chunk: string) => void,
  onComplete?: () => void,
  onError?: (error: Error) => void
): Promise<void>

// 获取对话列表
dbgptService.getConversations(): Promise<Conversation[]>

// 获取对话历史
dbgptService.getConversationHistory(convUid: string): Promise<ChatMessage[]>

// 删除对话
dbgptService.deleteConversation(convUid: string): Promise<void>

// 清空对话
dbgptService.clearConversation(convUid: string): Promise<void>

🎯 TypeScript 支持

库提供完整的类型定义：

import type {
  ChatMessage,
  ChatParams,
  UserChatContent,
  ChatContext,
  AppInfo,
  ChartData,
  ApiResponse
} from '@dbgpt/vue-chat-system'

🌍 环境变量

# API 基础地址
VITE_API_BASE_URL=http://localhost:5000

# DB-GPT API 地址
VITE_DBGPT_API_URL=http://localhost:5000

📝 开发指南

本地开发

# 克隆仓库
git clone https://github.com/your-org/vue-chat-system.git

# 安装依赖
cd vue-chat-system
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build:lib

打包发布

# 构建
npm run build:lib

# 发布到 npm
npm publish

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 License

MIT

🔗 相关链接

• DB-GPT 项目
• Element Plus
• Vue 3
• Vite

📧 联系我们

• Issues: GitHub Issues
• Email: [email protected]