Vue3项目中集成AI对话功能的实战经验分享

npm install ai-suspended-ball-chat

<template>
  <SuspendedBallChat
    :url="apiUrl"
    :app-name="appName"
    :domain-name="domainName"
    :enable-streaming="true"
    :callbacks="callbacks"
  />
</template>

<script setup>
import { SuspendedBallChat } from 'ai-suspended-ball-chat'

const apiUrl = 'https://api.your-domain.com/chat'
const appName = 'my-app'
const domainName = 'user123'

const callbacks = {
  onUserMessage: (message) => {
    console.log('用户发送:', message)
  },
  onAssistantMessage: (message) => {
    console.log('AI回复:', message)
  },
  onError: (error) => {
    console.error('错误:', error)
  }
}
</script>

// 后端需要返回SSE格式的数据
{"code": 0, "result": "Vue.js是一个用于构建", "is_end": false}
{"code": 0, "result": "用户界面的渐进式", "is_end": false}
{"code": 0, "result": "JavaScript框架。", "is_end": false}
{"code": 0, "result": "", "is_end": true}

<SuspendedBallChat
  :enable-image-upload="true"
  :callbacks="callbacks"
/>

<SuspendedBallChat
  :enable-voice-input="true"
  :enable-auto-speech="true"
  :callbacks="callbacks"
/>

<SuspendedBallChat
  :enable-local-storage="true"
  :storage-key="'my-chat-history'"
  :max-history-count="50"
  :callbacks="callbacks"
/>

<template>
  <div class="customer-service">
    <SuspendedBallChat
      :url="chatApiUrl"
      :app-name="'customer-service'"
      :domain-name="userId"
      :location="'right-bottom'"
      :size="'medium'"
      :custom-icon-url="'/icons/service.png'"
      :enable-streaming="true"
      :enable-image-upload="true"
      :assistant-config="assistantConfig"
      :callbacks="serviceCallbacks"
    />
  </div>
</template>

<script setup>
const assistantConfig = {
  avatar: '/avatars/service-bot.png',
  name: '小助手',
  description: '我是您的专属客服助手'
}

const serviceCallbacks = {
  onUserMessage: (message) => {
    // 记录用户咨询日志
    logUserQuery(message)
  },
  onAssistantMessage: (message) => {
    // 分析回复质量
    analyzeResponse(message)
  }
}
</script>

<template>
  <div class="code-editor-layout">
    <div class="editor-area">
      <!-- 代码编辑器 -->
    </div>
    <div class="assistant-panel" v-if="showAssistant">
      <ChatPanel
        :url="codeApiUrl"
        :app-name="'code-assistant'"
        :domain-name="userId"
        :title="'代码助手'"
        :enable-streaming="true"
        :preset-tasks="codeTasks"
        :callbacks="codeCallbacks"
        @close="showAssistant = false"
      />
    </div>
  </div>
</template>

<script setup>
const codeTasks = [
  {
    icon: '🐛',
    title: '代码调试',
    description: '帮助分析和修复代码问题'
  },
  {
    icon: '📝',
    title: '代码注释',
    description: '为代码添加详细注释'
  },
  {
    icon: '🔧',
    title: '代码优化',
    description: '提供代码优化建议'
  }
]

const codeCallbacks = {
  clickAssistantMsgCallback: (message) => {
    // 将AI生成的代码插入到编辑器
    insertCodeToEditor(message)
  }
}
</script>

<template>
  <div>
    <button @click="loadChat">打开AI助手</button>
    <component :is="chatComponent" v-if="chatComponent" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const chatComponent = ref(null)

const loadChat = async () => {
  if (!chatComponent.value) {
    const { SuspendedBallChat } = await import('ai-suspended-ball-chat')
    chatComponent.value = SuspendedBallChat
  }
}
</script>

const customRequestConfig = {
  headers: {
    'Authorization': `Bearer ${token}`,
  },
  timeout: 30000,
  retryCount: 3,
  retryDelay: 1000
}

// 限制历史记录数量，避免localStorage过大
<SuspendedBallChat
  :max-history-count="20"
  :storage-key="`chat-${userId}`"
/>

/* 使用更具体的选择器覆盖样式 */
.my-app .chat-panel-container {
  font-family: 'PingFang SC', sans-serif !important;
}

/* 或者使用CSS变量自定义主题 */
:root {
  --ai-chat-primary-color: #1890ff;
  --ai-chat-bg-color: #ffffff;
}

<SuspendedBallChat
  :location="isMobile ? 'right-bottom' : 'right-center'"
  :size="isMobile ? 'small' : 'medium'"
/>

const callbacks = {
  onError: (error) => {
    if (error.code === 'NETWORK_ERROR') {
      // 显示网络错误提示
      showToast('网络连接异常，请检查网络后重试')
    } else {
      // 其他错误处理
      showToast('服务暂时不可用，请稍后重试')
    }
  }
}

// 统一的响应格式
{
  "code": 0,
  "result": "AI回复内容",
  "is_end": true,
  "metadata": {
    "usage": { "tokens": 150 },
    "model": "gpt-3.5-turbo"
  }
}