Authome Chat UI

一个基于 Vue3 + PrimeVue4 + Tailwind CSS 的 AI 对话组件库。

特性

• 🚀 基于 Vue3 Composition API
• 🎨 使用 PrimeVue4 组件库和 Tailwind CSS
• 💬 两步式对话流程（创建消息 + 流式响应）
• 🌊 SSE 流式响应，实时显示AI回答过程
• 🔧 灵活的 API 接口配置
• 💾 支持会话管理和历史记录持久化
• 📱 响应式设计
• 🎯 TypeScript 类型支持
• 📦 支持 npm 包和 CDN 使用
• ⚡ 支持请求取消功能

安装

npm install authome-chat-ui

快速开始

1. 基本使用（开箱即用）

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import AuthomeChatUI from 'authome-chat-ui'
import 'authome-chat-ui/dist/style.css'

const app = createApp(App)

// 自动配置 PrimeVue 主题，开箱即用
app.use(AuthomeChatUI)

app.mount('#app')

2. 自定义 PrimeVue 配置

如果你的项目已经使用了 PrimeVue 或需要自定义主题：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import AuthomeChatUI from 'authome-chat-ui'
import 'authome-chat-ui/dist/style.css'

// 自定义 PrimeVue 配置
import PrimeVue from 'primevue/config'
import Aura from '@primeuix/themes/aura'

const app = createApp(App)

// 先配置你的 PrimeVue 主题
app.use(PrimeVue, {
  theme: {
    preset: Aura // 使用你喜欢的主题
  }
})

// 禁用自动 PrimeVue 配置
app.use(AuthomeChatUI, {
  autoPrimeVue: false
})

app.mount('#app')

2. 基本使用

推荐方式（v3.0+）：使用项目标识和环境参数

组件内部已经封装了所有 API 请求，使用方只需要传递项目标识（project-key）和环境（environment）即可：

<template>
  <div>
    <ChatContainer
      :width="'400px'"
      :height="'600px'"
      title="AI 助手"
      project-key="innovation-home"
      environment="production"
      :session-id="currentSessionId"
      :model="selectedModel"
      @message-sent="onMessageSent"
      @message-received="onMessageReceived"
      @session-created="onSessionCreated"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ChatContainer } from 'authome-chat-ui'
import 'authome-chat-ui/dist/style.css'

const currentSessionId = ref(null)
const selectedModel = ref('tongyi/qwen-long')
</script>

支持的项目和环境：

• 项目标识 (project-key):

  • innovation-home: 创新之家项目
  • aidoc-admin: AI文档管理项目

• 环境 (environment):

  • development: 开发环境
  • staging: 测试环境
  • production: 生产环境

传统方式（向后兼容）：使用 API 配置

如果需要自定义 API 配置，仍然可以使用传统的 api-config 参数：

<template>
  <ChatContainer
    :api-config="chatApiConfig"
    :session-id="currentSessionId"
    :model="selectedModel"
    @session-created="onSessionCreated"
  />
</template>

<script setup>
import { ref } from 'vue'
import { ChatContainer } from 'authome-chat-ui'

const currentSessionId = ref(null)
const selectedModel = ref('tongyi/qwen-long')

// API配置格式
const chatApiConfig = {
  // 创建消息接口（必需）
  createMessage: {
    url: '/doc-api/chatMessage/create',
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer your-token'
    }
  },

  // 发送消息接口 - SSE流式（必需）
  sendMessage: {
    url: '/doc-api/chatMessage/send?messageId={messageId}',
    method: 'GET',
    headers: {
      'Accept': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Authorization': 'Bearer your-token'
    }
  },

  // 可选接口
  getSessions: {
    url: '/doc-api/chatSession/page',
    method: 'GET'
  },
  getMessages: {
    url: '/doc-api/chatMessage/page',
    method: 'GET'
  },
  getModels: {
    url: '/doc-api/chatMessage/models',
    method: 'GET'
  }
}

const onMessageSent = (message) => {
  console.log('用户发送:', message)
}

const onMessageReceived = (message) => {
  console.log('AI 回复:', message)
}

const onSessionCreated = (sessionId) => {
  currentSessionId.value = sessionId
  console.log('创建新会话:', sessionId)
}
</script>

API 文档

ChatContainer Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | width | String | '400px' | 组件宽度 | | height | String | '600px' | 组件高度 | | title | String | 'AI 助手' | 标题 | | placeholder | String | '输入您的问题...' | 输入框占位符 | | emptyMessage | String | '开始与 AI 助手对话吧！' | 空状态提示 | | showClearButton | Boolean | true | 是否显示清空按钮 | | showCloseButton | Boolean | true | 是否显示关闭按钮 | | showInputHint | Boolean | true | 是否显示输入提示 | | initialMessage | String | '' | 初始消息内容 | | apiConfig | Object | - | API 配置 | | sessionId | String | null | 会话ID（用于持续对话） | | model | String | null | AI模型名称 | | persistHistory | Boolean | true | 是否持久化历史记录 | | storageKey | String | 'authome-chat-history' | 存储键名 | | maxHistoryLength | Number | 100 | 最大历史记录数 |

ChatContainer Events

| 事件 | 参数 | 说明 | |------|------|------| | close | - | 关闭组件时触发 | | message-sent | message | 发送消息时触发 | | message-received | message | 接收到回复时触发 | | session-created | sessionId | 创建新会话时触发 |

API配置格式

const chatApiConfig = {
  // 创建消息接口（必需）
  createMessage: {
    url: '/doc-api/chatMessage/create',
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer your-token'
    },
    timeout: 30000
  },

  // 发送消息接口 - SSE流式（必需）
  sendMessage: {
    url: '/doc-api/chatMessage/send?messageId={messageId}',
    method: 'GET',
    headers: {
      'Accept': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Authorization': 'Bearer your-token'
    }
  },

  // 以下为可选接口
  getSessions: {
    url: '/doc-api/chatSession/page',
    method: 'GET'
  },
  getMessages: {
    url: '/doc-api/chatMessage/page',
    method: 'GET'
  },
  getModels: {
    url: '/doc-api/chatMessage/models',
    method: 'GET'
  },
  deleteSession: {
    url: '/doc-api/chatSession/delete',
    method: 'POST'
  }
}

接口数据格式

创建消息请求

{
  "sessionId": "optional-session-id",
  "questionContent": "用户问题内容",
  "model": "tongyi/qwen-long"
}

创建消息响应

{
  "result": {
    "id": "message-id",
    "sessionId": "session-id"
  }
}

SSE流式响应格式

data: {"answerContent": "AI回答内容", "messageStatus": 1}
data: {"answerContent": "更多内容...", "messageStatus": 3}
data: {"answerContent": "完整回答", "messageStatus": 5}

使用 Composable

import { useChat } from 'authome-chat-ui'

const { chat, createMessage, sendMessageStream, getSessions } = useChat(chatApiConfig)

// 完整对话流程
const result = await chat('你好', {
  sessionId: 'session-123',
  model: 'tongyi/qwen-long',
  onMessage: (data) => console.log('收到消息:', data),
  onComplete: () => console.log('对话完成')
})

// 单独创建消息
const messageResult = await createMessage({
  questionContent: '你好',
  model: 'gpt-3.5-turbo'
})

// 获取会话列表
const sessions = await getSessions({ pageIndex: 1, pageSize: 10 })

📁 项目结构

authome-chat-ui/
├── src/                    # 源代码
│   ├── components/         # 组件
│   ├── composables/        # 组合式函数
│   ├── config/             # 配置管理 (v3.0 新增)
│   ├── utils/              # 工具函数
│   └── style.css          # 样式文件
├── demo/                   # 演示应用 (展示最新功能)
├── examples/               # 使用示例
│   └── new-usage.vue      # v3.0 新用法示例
├── dist/                   # 构建输出
└── docs/                   # 文档

🚀 演示和示例

• 在线演示：运行 npm run dev 查看最新功能演示
• 使用示例：查看 examples/new-usage.vue 了解 v3.0 新用法
• 迁移指南：查看 MIGRATION_GUIDE.md 了解如何从 v2.x 升级

开发

# 安装依赖
npm install

# 开发模式 (启动演示应用)
npm run dev

# 构建库
npm run build:lib

# 构建演示
npm run build

许可证

MIT