@aidoc/chat-ui

一个基于 Vue 3 的现代化聊天界面组件库，专为 LLM 应用设计，支持流式响应、对话历史、模型选择等完整功能。

✨ 特性

• 🚀 开箱即用 - 提供完整的对话界面解决方案
• 💬 流式响应 - 支持 SSE 流式消息接收
• 📚 对话历史 - 完整的会话管理和历史记录
• 🎨 主题定制 - 支持亮色/暗色主题及自定义样式
• 🔧 高度可配置 - 灵活的配置选项和插槽系统
• 📱 响应式设计 - 适配各种屏幕尺寸
• 🌐 国际化 - 内置多语言支持
• ⚡ 性能优化 - 虚拟滚动和懒加载
• 🔌 API 抽象 - 通过适配器模式支持不同后端

📦 安装

npm install aidoc-chat-ui-component
# 或
yarn add aidoc-chat-ui-component
# 或
pnpm add aidoc-chat-ui-component

🚀 快速开始

基础使用

<template>
  <div style="height: 600px;">
    <ChatInterface
      :config="chatConfig"
      :api-adapter="apiAdapter"
      :knowledge-base-id="knowledgeBaseId"
      @message-sent="handleMessageSent"
      @message-received="handleMessageReceived"
    />
  </div>
</template>

<script setup>
import { ChatInterface, createDefaultApiAdapter, createChatConfig } from '@aidoc/chat-ui'
import '@aidoc/chat-ui/dist/style.css'

// 创建配置
const chatConfig = createChatConfig({
  theme: 'light',
  enableHistory: true,
  enableModelSelection: true,
  placeholder: '请输入您的问题...'
})

// 创建 API 适配器
const apiAdapter = createDefaultApiAdapter({
  apiEndpoint: '/api/chat',
  headers: {
    Authorization: 'Bearer your-token'
  }
})

const knowledgeBaseId = ref(1)

const handleMessageSent = (message) => {
  console.log('发送消息:', message)
}

const handleMessageReceived = (message) => {
  console.log('收到回复:', message)
}
</script>

全局注册

import { createApp } from 'vue'
import AidocChatUI from 'aidoc-chat-ui-component'
import 'aidoc-chat-ui-component/dist/style.css'

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

📖 配置选项

ChatConfig

const config = createChatConfig({
  // API 配置
  apiEndpoint: '/api/chat',
  headers: {},

  // 功能开关
  enableHistory: true,
  enableSummary: false,
  enableModelSelection: true,
  enableMessageActions: true,

  // 界面配置
  theme: 'light', // 'light' | 'dark' | 'auto'
  locale: 'zh-CN',
  placeholder: '请输入您的问题...',

  // 行为配置
  maxHistoryItems: 50,
  autoScroll: true,
  showTimestamp: true,
  enableMarkdown: true,

  // 样式配置
  height: '600px',
  width: '100%',
  borderRadius: '8px'
})

API 适配器

// 使用默认适配器
const apiAdapter = createDefaultApiAdapter({
  apiEndpoint: '/api/chat',
  headers: {
    Authorization: 'Bearer token'
  }
})

// 或创建自定义适配器
class CustomApiAdapter {
  async createMessage(options) {
    // 实现创建消息逻辑
  }

  sendMessage(messageId, callbacks) {
    // 实现流式消息发送
    return cancelFunction
  }

  async getModels() {
    // 返回可用模型列表
  }

  // ... 其他方法
}

🎨 主题定制

预设主题

<ChatInterface :config="{ theme: 'dark' }" />

支持的主题：

• light - 浅色主题
• dark - 深色主题
• auto - 自动跟随系统
• blue - 蓝色主题
• green - 绿色主题
• purple - 紫色主题

自定义样式

.aidoc-chat {
  --chat-primary-color: #your-color;
  --chat-bg-color: #your-bg;
  --chat-text-color: #your-text;
  /* 更多 CSS 变量... */
}

🔧 高级用法

自定义插槽

<ChatInterface :config="config" :api-adapter="adapter">
  <template #title>
    <h3>我的智能助手</h3>
  </template>
  
  <template #header-actions>
    <button @click="customAction">自定义按钮</button>
  </template>
  
  <template #message-actions="{ message }">
    <button @click="customMessageAction(message)">
      自定义操作
    </button>
  </template>
</ChatInterface>

事件处理

<ChatInterface
  @message-sent="onMessageSent"
  @message-received="onMessageReceived"
  @session-changed="onSessionChanged"
  @model-changed="onModelChanged"
  @error="onError"
/>

📚 组件 API

ChatInterface Props

| 属性 | 类型 | 默认值 | 描述 | | --------------- | ------------- | ------ | -------------- | | config | Object | {} | 聊天配置对象 | | apiAdapter | Object | - | API 适配器实例 | | knowledgeBaseId | String/Number | null | 知识库 ID | | sessionId | String/Number | null | 会话 ID |

ChatInterface Events

| 事件 | 参数 | 描述 | | ---------------- | ------- | -------------- | | message-sent | message | 消息发送时触发 | | message-received | message | 收到消息时触发 | | session-changed | session | 会话切换时触发 | | model-changed | model | 模型切换时触发 | | error | error | 发生错误时触发 |

🛠️ 开发

# 克隆项目
git clone https://github.com/aidoc/chat-ui.git

# 安装依赖
cd chat-ui
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 预览
npm run preview

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📞 支持

如有问题，请提交 Issue 或联系我们。