gis-victory-ai-chat

Vue 3 AI 聊天面板组件，支持流式对话、历史记录管理、多技能切换等功能。

安装

npm install @gis_victory/ai-chat
npm install tdesign-vue-next @tdesign-vue-next/chat

使用

基础使用

<template>
  <AiChatPanel 
    v-model:open="isOpen"
    mode="popup"
    :skills="skills"
    :base-url="baseURL"
    :on-send="handleSend"
  />
</template>

<script setup>
import { ref } from 'vue'
import { AiChatPanel } from 'gis-victory-ai-chat'
import 'gis-victory-ai-chat/style.css'

// 需要引入 TDesign 组件库
import TDesign from 'tdesign-vue-next'
import '@tdesign-vue-next/chat/es/style/index.css'

const isOpen = ref(false)

const skills = ref([
  { id: 'general', label: '综合问答', icon: '🤖' },
  { id: 'code', label: '代码助手', icon: '💻' },
  { id: 'document', label: '文档生成', icon: '📄' },
  { id: 'image', label: '图像生成', icon: '🎨' }
])

const baseURL = 'https://api.example.com/AiServer/Chat'

const handleSend = async (message, skill, conversationId) => {
  // 调用你的 AI 接口
  const response = await fetch('your-api-endpoint', {
    method: 'POST',
    body: JSON.stringify({ message, skill, conversationId })
  })
  return await response.text()
}
</script>

插件式安装

<template>
  <AiChatPanel 
    mode="page"
    :skills="skills"
    :on-send="handleSend"
  />
</template>

<script setup>
import { AiChatPanel } from 'gis-victory-ai-chat'
import 'gis-victory-ai-chat/style.css'

// 需要引入 TDesign 组件库
import TDesign from 'tdesign-vue-next'
import '@tdesign-vue-next/chat/es/style/index.css'

const skills = ref([
  { id: 'general', label: '综合问答' }
])

const handleSend = async (message, skill, conversationId) => {
  // 你的 AI 接口逻辑
}
</script>

依赖

• Vue 3.4.0+ - 核心框架
• tdesign-vue-next 1.12.0+ - UI 组件库
• @tdesign-vue-next/chat 0.5.2+ - 聊天组件

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | open | boolean | - | 面板是否打开（v-model 绑定） | | mode | 'popup' \| 'page' | 'popup' | 显示模式：弹窗模式或全屏模式 | | position | 'right-bottom' \| 'left-bottom' \| 'right-top' \| 'left-top' | 'right-bottom' | 浮动按钮位置（仅 popup 模式） | | width | number \| string | 500 | 面板宽度 | | height | number \| string | 'auto' | 面板高度 | | skills | Skill[] | - | 可用的技能列表 | | defaultSkill | string | - | 默认选中的技能 ID | | assistantName | string | 'AI 助手' | AI 助手名称 | | assistantAvatar | string | - | AI 助手头像 URL | | userAvatar | string | - | 用户头像 URL | | persistent | boolean | true | 是否持久化对话记录到 localStorage | | storageKey | string | 'ai-chat-panel' | localStorage 存储键 | | maxHistory | number | 50 | 最大历史对话数量 | | baseURL | string | - | 必需 - API 基础 URL（如 https://api.example.com/AiServer/Chat） | | token | string | - | 认证 token | | appId | string | - | 应用 ID |

Events

| 事件 | 参数 | 说明 | |------|------|------| | update:open | boolean | 面板打开/关闭状态变化 | | open | - | 面板打开时触发 | | close | - | 面板关闭时触发 | | send | { message, skill, conversationId } | 发送消息时触发 | | new-chat | - | 新建对话时触发 | | clear-history | - | 清除历史记录时触发 | | skill-change | skill | 技能切换时触发 |

TypeScript 类型

import type { Skill, AiChatPanelProps } from 'gis-victory-ai-chat'

interface Skill {
  id: string
  label: string
  icon?: string
}

注意事项

1. 组件依赖以下包，请确保你的项目已安装：

   • Vue 3.4.0+
   • tdesign-vue-next 1.12.0+
   • @tdesign-vue-next/chat 0.5.2+

2. 需要引入 TDesign 的样式：

   import '@tdesign-vue-next/chat/es/style/index.css'

3. 建议使用 v-model:open 来控制面板的打开/关闭状态

4. 在 popup 模式下，会显示一个浮动按钮，点击可打开/关闭面板

5. 在 page 模式下，面板会直接全屏显示

许可证

MIT