灵逍AI智能对话组件

项目介绍

灵逍AI（byt-lingxiao-ai）是邦业科技开发的一款智能对话机器人组件库，基于Vue 2.0框架开发，提供了完整的智能对话功能，包括文本交互、语音识别、音频播放等功能。

功能特性

• ✅ 智能对话：支持与AI进行自然语言交互
• ✅ 语音识别：集成WebSocket语音通信，支持实时语音输入
• ✅ 音频播放：内置音频播放器，支持语音回复播放
• ✅ 流式消息：支持服务器推送的流式消息处理
• ✅ 拖拽功能：支持聊天窗口拖拽定位
• ✅ 响应式设计：适配不同屏幕尺寸
• ✅ 自定义配置：支持多种参数配置
• ✅ 思考过程可视化：显示AI思考过程和用时

技术栈

• 前端框架：Vue 2.0
• UI组件：Element UI
• 通信协议：WebSocket
• 音频处理：Web Audio API
• 消息解析：自定义流式消息解析器
• 构建工具：Vue CLI

安装

使用npm安装

npm install byt-lingxiao-ai --save

使用yarn安装

yarn add byt-lingxiao-ai

使用

基本用法

// 接入智能AI
import 'byt-lingxiao-ai/dist/index.css'
import ChatWindow from 'byt-lingxiao-ai'
Vue.use(ChatWindow, {
  router,
  store
})

<!-- 在Vue组件中使用 -->
<template>
  <div id="app">
    <ChatWindow />
  </div>
</template>

自定义配置

Vue.use(ChatWindow, {
  title: '智能助手',  // 组件标题
  // 其他自定义配置
})

API 文档

ChatWindow 组件

组件属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | appendToBody | Boolean | true | 是否将聊天窗口添加到body元素中 |

事件

| 事件名 | 说明 | |--------|------| | send | 发送消息事件 | | thinking-click | 思考过程点击事件 | | overlay-click | 遮罩点击事件 |

配置项

API_URL

对话API接口地址，默认值：/lingxiao-byt/api/v1/mcp/ask

WS_URL

WebSocket连接地址，默认值：ws://${window.location.host}/audio/ws

AUDIO_URL

音频文件地址，默认值：/minio/lingxiaoai/byt.mp3

TIME_JUMP_POINTS_URL

音频时间跳转点配置文件地址，默认值：/minio/lingxiaoai/timeJumpPoints.json

项目结构

├── components/          # 组件目录
│   ├── ChatAvatar.vue      # AI头像组件
│   ├── ChatInputBox.vue    # 输入框组件
│   ├── ChatMessageList.vue # 消息列表组件
│   ├── ChatRobot.vue       # 机器人动画组件
│   ├── ChatWindow.vue      # 主聊天窗口组件
│   ├── ChatWindowDialog.vue # 聊天窗口对话框
│   ├── ChatWindowHeader.vue # 聊天窗口头部
│   ├── UserMessage.vue     # 用户消息组件
│   ├── AiMessage.vue       # AI消息组件
│   ├── assets/             # 静态资源
│   ├── config/             # 配置文件
│   ├── mixins/             # 混合器
│   │   ├── audioMixin.js   # 音频处理混合器
│   │   ├── messageMixin.js # 消息处理混合器
│   │   └── webSocketMixin.js # WebSocket通信混合器
│   └── utils/              # 工具函数
│       ├── Cookie.js       # Cookie工具
│       ├── StreamParser.js # 流式消息解析器
│       ├── Uuid.js         # UUID生成器
│       └── WorkletSource.js # Audio Worklet源码
├── examples/            # 示例代码
├── dist/                # 打包文件
├── package.json         # 项目配置
└── vue.config.js        # Vue CLI配置

核心功能说明

1. 消息处理流程

1. 用户输入消息
2. 调用 handleSend 方法发送消息
3. 创建用户消息记录
4. 创建AI回复消息记录
5. 发送请求到API接口
6. 使用 StreamParser 处理流式响应
7. 实时更新AI回复内容

2. 音频处理

• 使用 audioMixin 处理音频相关功能
• 支持麦克风录音
• 支持音频播放控制（播放、暂停、停止）
• 使用 WebSocket 实时传输音频数据

3. WebSocket通信

• 建立WebSocket连接进行语音通信
• 支持自动重连机制
• 处理服务端推送的各种消息类型

4. 拖拽功能

• 支持聊天窗口拖拽定位
• 限制窗口在视口范围内
• 平滑拖拽动画效果

浏览器支持

• Chrome (推荐)
• Firefox
• Safari
• Edge

开发与构建

开发

npm run serve

构建

npm run build

许可证

MIT License

作者信息

• 公司：邦业科技
• 邮箱：[email protected]

更新日志

v0.3.12

• 修复了一些已知问题
• 优化了音频处理性能

v0.3.10

• 新增拖拽功能
• 优化了消息流式处理

v0.3.0

• 初始版本发布
• 支持基本的聊天功能
• 支持语音识别和音频播放