# AI 聊天模块 (Vue 2 版本)

这个模块提供了一套完整的AI聊天组件，专为Vue 2项目设计。组件包括悬浮按钮、聊天面板和AI助手工具类，可以轻松集成到任何Vue 2项目中。

## 组件介绍

### AIFloatButton.vue

悬浮按钮组件，点击后会显示聊天面板。支持拖动、消息提醒和自定义位置功能。

### AIChat.vue

聊天面板组件，包含消息展示区和输入区域。支持发送消息、文件上传、历史记录管理等功能。

### aiAssistant.js

AI助手工具类，提供知识库查询、内容提取和消息格式化功能。

## 功能特性

- 支持悬浮按钮拖动定位
- 消息提醒和动画效果
- 支持发送文本消息和文件上传
- 支持知识库查询和内容提取
- 自适应响应式设计
- 键盘快捷操作支持（Enter发送，Shift+Enter换行）

## 使用方法

### 1. 安装依赖

确保项目中已安装必要的依赖：

```bash
npm install axios clipboard --save
```

### 2. 组件引入

```javascript
// 在Vue 2组件中引入
import AIFloatButton from './components/AIChatModuleVue2/AIFloatButton.vue';

export default {
  components: {
    AIFloatButton
  }
}
```

### 3. 基本使用

```vue
<template>
  <div id="app">
    <!-- 基本使用方式 -->
    <AIFloatButton />
    
    <!-- 自定义配置 -->
    <AIFloatButton
      :chatModelUrl="'https://api.example.com'"
      :modelAuthKey="'your-model-auth-key'"
      :knowledgeBaseId="'your-knowledge-base-id'"
      :headerTitle="'智能助手'"
      :openText="'AI助手'"
      :closeText="'关闭'"
      :useDefaultAIChat="true"
    />
  </div>
</template>
```

### 4. 自定义内容插槽

```vue
<AIFloatButton>
  <template v-slot:button-icon="{ isChatOpen }">
    <!-- 自定义按钮图标 -->
    <span v-if="!isChatOpen">💬</span>
    <span v-else>✖</span>
  </template>
  
  <template v-slot:header-icon>
    <!-- 自定义头部图标 -->
    <span>🤖</span>
  </template>
  
  <!-- 自定义聊天面板内容 -->
  <div slot-scope="{ closeChat }">
    <h2>自定义聊天内容</h2>
    <button @click="closeChat">关闭</button>
  </div>
</template>
```

## 配置说明

### AIFloatButton 组件属性

| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|--------|------|------|--------|------|
| chatModelUrl | String | 否 | 'https://qianfan.baidubce.com/v2' | AI模型聊天完成URL |
| modelAuthKey | String | 否 | null | 模型认证密钥 |
| knowledgeBaseId | String | 否 | null | 知识库ID |
| knowledgeBaseUrl | String | 否 | '/api/knowledgebases/query' | 知识库查询接口 |
| knowledgeBaseAuthKey | String | 否 | 'Bearer bce-v3/ALTAK-Whk44lUWwOsyro8mNlVhq/a0f9f719410e695928289034690003afe1571556' | 知识库认证密钥 |
| openText | String | 否 | 'AI助手' | 按钮打开文本 |
| closeText | String | 否 | '关闭' | 按钮关闭文本 |
| headerTitle | String | 否 | 'AI 助手' | 聊天面板标题 |
| useDefaultAIChat | Boolean | 否 | true | 是否使用默认聊天组件 |
| initialPosition | Object | 否 | { x: null, y: null } | 按钮初始位置 |

### AIFloatButton 组件事件

| 事件名 | 说明 | 参数 |
|--------|------|------|
| toggle | 聊天面板显示状态切换 | showChat: Boolean |
| close | 聊天面板关闭事件 | 无 |
| new-message | 收到新消息事件 | 无 |

### AIChat 组件属性

| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|--------|------|------|--------|------|
| chatModelUrl | String | 否 | 'https://qianfan.baidubce.com/v2' | AI模型聊天完成URL |
| modelAuthKey | String | 否 | null | 模型认证密钥 |
| knowledgeBaseId | String | 否 | null | 知识库ID |
| knowledgeBaseUrl | String | 否 | '/api/knowledgebases/query' | 知识库查询接口 |
| knowledgeBaseAuthKey | String | 否 | 'Bearer bce-v3/ALTAK-Whk44lUWwOsyro8mNlVhq/a0f9f719410e695928289034690003afe1571556' | 知识库认证密钥 |

### AIChat 组件事件

| 事件名 | 说明 | 参数 |
|--------|------|------|
| new-message | 收到新消息事件 | message: Object |
| send-message | 发送消息事件 | message: Object |
| loading-change | 加载状态变化事件 | isLoading: Boolean |

## 键盘快捷键

- **Enter**: 发送消息
- **Shift + Enter**: 换行
- **Esc**: 关闭聊天面板

## 响应式设计

组件支持桌面端和移动端自适应布局：

- 桌面端：聊天面板固定位置，支持拖动
- 移动端：聊天面板自适应屏幕宽度，优化触摸操作

## 浏览器兼容性

支持所有现代浏览器，包括：

- Chrome (最新2个版本)
- Firefox (最新2个版本)
- Safari (最新2个版本)
- Edge (最新2个版本)

## Vue 2 版本与 Vue 3 版本的主要差异

1. **语法差异**：使用Vue 2的Options API替代Vue 3的Composition API
2. **生命周期钩子**：使用Vue 2的生命周期钩子（mounted, beforeDestroy）
3. **响应式数据**：使用data选项替代ref/reactive
4. **计算属性**：使用computed选项替代computed函数
5. **监听器**：使用watch选项替代watch/onMounted等组合式API

## 注意事项

1. 确保Vue 2项目版本 >= 2.6.0，以支持所有特性
2. 在生产环境中，请正确配置API密钥和知识库ID
3. 如需自定义主题，请通过CSS变量或覆盖样式实现
4. 对于大型项目，建议使用Vuex管理聊天状态