# AI智能客服组件

一个功能完整的AI智能客服对话组件，支持多种消息类型和交互功能。

## 功能特性

- ✅ 支持对话上下文管理
- ✅ 支持多种消息类型：文本、Markdown、文件、音频、视频、链接、商品卡片
- ✅ 支持语音输入和录音
- ✅ 支持图片、文件、位置等附件发送
- ✅ 支持消息操作按钮（点赞、踩等）
- ✅ 支持历史消息加载
- ✅ 响应式设计，适配多端

## 安装使用

### 1. 引入组件

在 `pages.json` 中注册组件：

```json
{
  "usingComponents": {
    "ai-chat-message": "/components/ai-chat-message/ai-chat-message"
  }
}
```

### 2. 在页面中使用

```vue
<template>
  <view class="container">
    <ai-chat-message 
      ref="chat"
      :initial-messages="messages"
      @message-sent="onMessageSent"
      @ai-response="onAIResponse"
      @action-click="onActionClick" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        {
          id: 1,
          role: 'ai',
          type: 'text',
          content: '您好！我是AI智能客服，有什么可以帮助您的吗？',
          timestamp: Date.now()
        }
      ]
    }
  },
  methods: {
    onMessageSent(message) {
      console.log('用户发送消息:', message)
    },
    onAIResponse(message) {
      console.log('AI回复消息:', message)
    },
    onActionClick({ action, message }) {
      console.log('操作点击:', action, message)
    }
  }
}
</script>
```

## Props 配置

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| initialMessages | Array | [] | 初始消息列表 |
| userAvatar | String | '/static/images/default-avatar.png' | 用户头像 |
| aiAvatar | String | '/static/images/ai-avatar.png' | AI头像 |
| showLoadMore | Boolean | true | 是否显示加载更多 |
| maxMessages | Number | 100 | 最大消息数量 |

## Events 事件

| 事件名 | 参数 | 说明 |
|--------|------|------|
| message-sent | message | 用户发送消息 |
| ai-response | message | AI回复消息 |
| action-click | {action, message} | 操作按钮点击 |
| history-loaded | messages | 历史消息加载完成 |
| file-preview | message | 文件预览 |
| audio-play | message | 音频播放 |
| audio-pause | message | 音频暂停 |
| video-play | message | 视频播放 |
| video-pause | message | 视频暂停 |
| link-open | message | 链接打开 |
| product-view | message | 商品查看 |
| input-change | value | 输入内容变化 |

## 消息类型格式

### 文本消息
```javascript
{
  id: 1,
  role: 'user', // 或 'ai'
  type: 'text',
  content: '消息内容',
  timestamp: Date.now()
}
```

### Markdown消息
```javascript
{
  id: 2,
  role: 'ai',
  type: 'markdown',
  content: '# 标题\n**粗体** *斜体* `代码`',
  timestamp: Date.now()
}
```

### 文件消息
```javascript
{
  id: 3,
  role: 'ai',
  type: 'file',
  fileName: '文档.pdf',
  fileSize: 1024000,
  url: '文件地址',
  timestamp: Date.now()
}
```

### 音频消息
```javascript
{
  id: 4,
  role: 'ai',
  type: 'audio',
  title: '语音消息',
  duration: 60, // 秒
  url: '音频地址',
  timestamp: Date.now()
}
```

### 视频消息
```javascript
{
  id: 5,
  role: 'ai',
  type: 'video',
  title: '产品介绍',
  duration: 120, // 秒
  url: '视频地址',
  cover: '封面图',
  timestamp: Date.now()
}
```

### 链接消息
```javascript
{
  id: 6,
  role: 'ai',
  type: 'link',
  title: '帮助文档',
  description: '详细的使用说明',
  url: 'https://example.com',
  image: '缩略图',
  timestamp: Date.now()
}
```

### 商品卡片
```javascript
{
  id: 7,
  role: 'ai',
  type: 'product',
  title: '商品名称',
  price: 299,
  description: '商品描述',
  image: '商品图片',
  timestamp: Date.now()
}
```

## 方法

通过 ref 调用组件方法：

```javascript
// 添加消息
this.$refs.chat.addMessage(message)

// 清空消息
this.$refs.chat.clearMessages()

// 滚动到底部
this.$refs.chat.scrollToBottom()
```

## 样式定制

组件使用 SCSS 编写，可以通过 CSS 变量进行主题定制：

```css
.ai-chat-container {
  --primary-color: #ff4544;
  --bg-color: #f8f8f8;
  --text-color: #333;
}
```

## 方法

通过 ref 调用组件方法：

```javascript
// 添加消息
this.$refs.chat.addMessage(message)

// 清空消息
this.$refs.chat.clearMessages()

// 滚动到底部
this.$refs.chat.scrollToBottom()

// 开始语音输入
this.$refs.chat.startVoiceInput()

// 停止语音输入
this.$refs.chat.stopVoiceInput()
```

## 样式定制

组件使用 SCSS 编写，可以通过 CSS 变量进行主题定制：

```css
.ai-chat-container {
  --primary-color: #ff4544;
  --bg-color: #f8f8f8;
  --text-color: #333;
  --border-color: #eeeeee;
  --user-bg: #e6f7ff;
  --ai-bg: #f6f6f6;
}
```

## 图标字体

组件使用自定义图标字体，需要在页面中引入：

```html
<style>
@import url('/components/ai-chat-message/iconfont.css');
</style>
```

## 注意事项

1. 组件已适配项目中已有的 `ns-loading` 组件
2. 需要配置对应的图标字体文件
3. 音频播放功能在 H5 和 APP 端支持较好
4. 文件预览功能依赖平台能力
5. 语音输入功能需要用户授权麦克风权限