byt-lingxiao-ai 0.3.11 → 0.3.13

package/README.md

@@ -0,0 +1,224 @@
+# 凌霄AI智能对话组件
+
+## 项目介绍
+
+凌霄AI（byt-lingxiao-ai）是邦业科技开发的一款智能对话机器人组件库，基于Vue 2.0框架开发，提供了完整的智能对话功能，包括文本交互、语音识别、音频播放等功能。
+
+## 功能特性
+
+- ✅ **智能对话**：支持与AI进行自然语言交互
+- ✅ **语音识别**：集成WebSocket语音通信，支持实时语音输入
+- ✅ **音频播放**：内置音频播放器，支持语音回复播放
+- ✅ **流式消息**：支持服务器推送的流式消息处理
+- ✅ **拖拽功能**：支持聊天窗口拖拽定位
+- ✅ **响应式设计**：适配不同屏幕尺寸
+- ✅ **自定义配置**：支持多种参数配置
+- ✅ **思考过程可视化**：显示AI思考过程和用时
+
+## 技术栈
+
+- **前端框架**：Vue 2.0
+- **UI组件**：Element UI
+- **通信协议**：WebSocket
+- **音频处理**：Web Audio API
+- **消息解析**：自定义流式消息解析器
+- **构建工具**：Vue CLI
+
+## 安装
+
+### 使用npm安装
+
+```bash
+npm install byt-lingxiao-ai --save
+```
+
+### 使用yarn安装
+
+```bash
+yarn add byt-lingxiao-ai
+```
+
+## 使用
+
+### 基本用法
+
+```javascript
+// 引入Vue
+import Vue from 'vue'
+import App from './App.vue'
+
+// 引入Element UI
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+
+// 引入凌霄AI组件
+import ChatWindow from 'byt-lingxiao-ai'
+
+// 注册组件
+Vue.use(ElementUI)
+Vue.use(ChatWindow)
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')
+```
+
+```html
+<!-- 在Vue组件中使用 -->
+<template>
+  <div id="app">
+    <ChatWindow />
+  </div>
+</template>
+```
+
+### 自定义配置
+
+```javascript
+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
+
+## 开发与构建
+
+### 开发
+
+```bash
+npm run serve
+```
+
+### 构建
+
+```bash
+npm run build
+```
+
+## 许可证
+
+MIT License
+
+## 作者信息
+
+- 公司：邦业科技
+- 邮箱：xuepengfei@bonyear.com
+
+## 更新日志
+
+### v0.3.12
+- 修复了一些已知问题
+- 优化了音频处理性能
+
+### v0.3.10
+- 新增拖拽功能
+- 优化了消息流式处理
+
+### v0.3.0
+- 初始版本发布
+- 支持基本的聊天功能
+- 支持语音识别和音频播放

package/components/mixins/messageMixin.js

@@ -62,12 +62,15 @@ export default {
       // 重置解析器
       this.streamParser.reset();
 
+      const controller = new AbortController();
+
       try {
         const startTime = Date.now();
         const token = getCookie('bonyear-access_token') || `44e7f112-63f3-429d-908d-2c97ec380de2`;
         
         const response = await fetch(API_URL, {
           method: 'POST',
+          signal: controller.signal,
           headers: {
             'Content-Type': 'application/json',
             'Authorization': `Bearer ${token}`,

package/components/mixins/webSocketMixin.js

@@ -13,7 +13,7 @@ export default {
   methods: {
     initWebSocket() {
       try {
-        this.ws = new WebSocket(this.wsUrl);
+        this.ws = new WebSocket('ws://10.2.233.41:9999');
         this.ws.binaryType = 'arraybuffer';
 
         this.ws.onopen = async () => {

package/dist/index.common.js

@@ -31315,7 +31315,7 @@ const TIME_JUMP_POINTS_URL = '/minio/lingxiaoai/timeJumpPoints.json'; // 语音u
   methods: {
     initWebSocket() {
       try {
-        this.ws = new WebSocket(this.wsUrl);
+        this.ws = new WebSocket('ws://10.2.233.41:9999');
         this.ws.binaryType = 'arraybuffer';
         this.ws.onopen = async () => {
           console.log('WebSocket 连接成功');
@@ -31613,11 +31613,13 @@ const getCookie = cname => {
 
       // 重置解析器
       this.streamParser.reset();
+      const controller = new AbortController();
       try {
         const startTime = Date.now();
         const token = getCookie('bonyear-access_token') || `44e7f112-63f3-429d-908d-2c97ec380de2`;
         const response = await fetch(API_URL, {
           method: 'POST',
+          signal: controller.signal,
           headers: {
             'Content-Type': 'application/json',
             'Authorization': `Bearer ${token}`