lucky_shop/components/ai-chat-message

AI智能客服组件

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

功能特性

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

安装使用

1. 引入组件

在 pages.json 中注册组件：

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

2. 在页面中使用

<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	输入内容变化

消息类型格式

文本消息

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

Markdown消息

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

文件消息

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

音频消息

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

视频消息

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

链接消息

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

商品卡片

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

方法

通过 ref 调用组件方法：

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

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

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

样式定制

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

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

方法

通过 ref 调用组件方法：

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

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

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

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

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

样式定制

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

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

图标字体

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

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

注意事项

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