@gis_victory/ai-chat

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

Events

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