vue-element-ui-x 0.1.8-beta → 0.1.10-beta

package/lib/mixins/index.js

@@ -112,7 +112,6 @@ __webpack_require__.d(__webpack_exports__, "XStream", function() { return /* ree
 // CONCATENATED MODULE: ./src/mixins/recordMixin.js
 /**
  * @description 提供语音识别的混入，允许语音输入并处理开始、结束、结果及错误等各种事件。
- *
  * @mixin recordMixin
  */
 
@@ -262,6 +261,9 @@ class XRequest {
       ...options,
       signal
     };
+
+    // 用于存储跨 chunk 的不完整数据
+    let buffer = '';
     return fetch(this._baseURL + url, fetchOptions).then(res => res.body).then(async body => {
       if (!body) {
         return Promise.reject(new Error('Response body is null in stream mode'));
@@ -276,6 +278,10 @@ class XRequest {
         } = await reader.read();
         done = streamDone;
         if (streamDone) {
+          // 处理缓冲区中剩余的数据
+          if (buffer.trim()) {
+            this.processBufferData(buffer);
+          }
           this._onFinish && this._onFinish(this._messages);
           return;
         }
@@ -283,16 +289,23 @@ class XRequest {
           const chunk = decoder.decode(value, {
             stream: true
           });
-          const chunkUse = chunk.startsWith('data: ') ? chunk.slice(6) : chunk;
-          try {
-            const res = this._transformer ? this._transformer(chunkUse) : chunkUse;
-            this._messages.push(res);
-            this._onMessage && this._onMessage(res);
-          } catch (error) {
-            this._onError && this._onError(error);
-            this._controller && this._controller.abort();
-            return Promise.reject(error);
-          }
+          // console.log('chunk:', chunk);
+          // 将新数据添加到缓冲区
+          buffer += chunk;
+
+          // 处理缓冲区中的完整行
+          buffer = this.processBuffer(buffer);
+          // const chunkUse = chunk.startsWith('data: ') ? chunk.slice(6) : chunk;
+
+          // try {
+          //   const res = this._transformer ? this._transformer(chunkUse) : chunkUse;
+          //   this._messages.push(res);
+          //   this._onMessage && this._onMessage(res);
+          // } catch (error) {
+          //   this._onError && this._onError(error);
+          //   this._controller && this._controller.abort();
+          //   return Promise.reject(error);
+          // }
         }
       }
     }).catch(err => {
@@ -304,6 +317,84 @@ class XRequest {
       this._controller && this._controller.abort();
     });
   }
+  /**
+   * 处理缓冲区数据，提取完整的行
+   * @param {string} buffer - 缓冲区数据
+   * @returns {string} 剩余的不完整数据
+   */
+  processBuffer(buffer) {
+    const lines = buffer.split('\n');
+    // console.log('lines:', lines);
+    // 保留最后一行（可能不完整）
+    const remainingData = lines.pop();
+
+    // 处理完整的行
+    for (const line of lines) {
+      this.processLine(line);
+    }
+    return remainingData || '';
+  }
+
+  /**
+   * 处理单行数据
+   * @param {string} line - 单行数据
+   */
+  processLine(line) {
+    // 跳过空行
+    if (!line.trim()) {
+      return;
+    }
+
+    // 处理 data: 开头的行
+    if (line.startsWith('data: ')) {
+      const dataContent = line.slice(6);
+
+      // 检查是否是结束标识
+      if (dataContent.trim() === '[DONE]') {
+        this._isFinished = true;
+        this._onFinish && this._onFinish(this._messages);
+        this.abort();
+        return;
+      }
+
+      // 跳过空数据
+      if (!dataContent.trim()) {
+        return;
+      }
+      try {
+        // 尝试解析和处理数据
+        let processedData;
+        try {
+          // 首先尝试作为 JSON 解析
+          processedData = JSON.parse(dataContent);
+        } catch {
+          // 如果不是 JSON，使用原始数据
+          processedData = dataContent;
+        }
+        // console.log('processedData:', processedData, processedData.answer);
+
+        const res = this._transformer ? this._transformer(processedData) : processedData;
+        this._messages.push(res);
+        this._onMessage && this._onMessage(res);
+      } catch (error) {
+        console.error('Error processing line:', line, error);
+        this._onError && this._onError(error);
+        this._controller && this._controller.abort();
+      }
+    }
+    // 可以在这里处理其他类型的行（如果需要）
+  }
+
+  /**
+   * 处理缓冲区中剩余的数据（在流结束时调用）
+   * @param {string} buffer - 剩余的缓冲区数据
+   */
+  processBufferData(buffer) {
+    const lines = buffer.split('\n');
+    for (const line of lines) {
+      this.processLine(line);
+    }
+  }
   _sendWithSSE(url, options = {}) {
     const es = new EventSource(this._baseURL + url, {
       ...this._baseOptions,
@@ -535,10 +626,8 @@ function createSendUtils(options = {}) {
 /* harmony default export */ var mixins_sendMixin = (sendMixin);
 // CONCATENATED MODULE: ./src/mixins/streamMixin.js
 /**
- * @fileoverview Vue2 流式数据处理 Mixin
- * 从 Vue3 useXStream hooks 转换而来，支持 SSE 数据解析和中断功能
- * @author Element UI X Team
- * @version 1.0.0
+ * @fileoverview  流式数据处理 Mixin
+ * 支持 SSE 数据解析和中断功能
  */
 
 /**
@@ -723,7 +812,7 @@ function XStream(options, signal) {
 }
 
 /**
- * streamMixin -
+ * streamMixin
  * 用于处理流式数据的 mixin，支持 SSE 数据解析和中断功能
  * @namespace streamMixin
  * @type {Object}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-element-ui-x",
-  "version": "0.1.8-beta",
+  "version": "0.1.10-beta",
   "description": "基于Vue 2 + Element UI的AI聊天组件库",
   "main": "lib/index.esm.js",
   "module": "lib/index.umd.js",

package/src/components/Attachments/index.js

@@ -1,8 +1,8 @@
-import ElXAttachments from './src/main.vue';
-
-/* istanbul ignore next */
-ElXAttachments.install = function (Vue) {
-  Vue.component(ElXAttachments.name, ElXAttachments);
-};
-
-export default ElXAttachments;
+import ElXAttachments from './src/main.vue';
+
+/* istanbul ignore next */
+ElXAttachments.install = function (Vue) {
+  Vue.component(ElXAttachments.name, ElXAttachments);
+};
+
+export default ElXAttachments;

package/src/components/Attachments/src/main.vue

@@ -19,9 +19,9 @@
           :action="uploadAction"
           :http-request="customUpload"
           :show-file-list="false"
-          @change="handleUploadChange"
-          @success="handleUploadSuccess"
-          @error="handleUploadError"
+          :on-change="handleUploadChange"
+          :on-success="handleUploadSuccess"
+          :on-error="handleUploadError"
         >
           <i class="el-icon-plus uploader-icon"></i>
         </el-upload>
@@ -94,9 +94,9 @@
                 height: overflow === 'scrollY' && '',
               }"
               class="el-x-attachments-upload-btn"
-              @change="handleUploadChange"
-              @success="handleUploadSuccess"
-              @error="handleUploadError"
+              :on-change="handleUploadChange"
+              :on-success="handleUploadSuccess"
+              :on-error="handleUploadError"
             >
               <i class="el-icon-plus uploader-icon"></i>
             </el-upload>
@@ -349,7 +349,7 @@
         // 默认实现：发出事件，让父组件处理
         const { file } = options;
         this.$emit(
-          'uploadChange',
+          'upload-change',
           {
             file,
           },
@@ -365,13 +365,13 @@
         return Promise.resolve();
       },
       handleUploadChange(file, fileList) {
-        this.$emit('uploadChange', file, fileList);
+        this.$emit('upload-change', file, fileList);
       },
       handleUploadSuccess(response, file, fileList) {
-        this.$emit('uploadSuccess', response, file, fileList);
+        this.$emit('upload-success', response, file, fileList);
       },
       handleUploadError(error, file, fileList) {
-        this.$emit('uploadError', error, file, fileList);
+        this.$emit('upload-error', error, file, fileList);
       },
 
       getTargetElement() {

package/src/components/Bubble/index.js

@@ -1,6 +1,6 @@
-import ElXBubble from './src/main.vue';
-/* istanbul ignore next */
-ElXBubble.install = function (Vue) {
-  Vue.component(ElXBubble.name, ElXBubble);
-};
-export default ElXBubble;
+import ElXBubble from './src/main.vue';
+/* istanbul ignore next */
+ElXBubble.install = function (Vue) {
+  Vue.component(ElXBubble.name, ElXBubble);
+};
+export default ElXBubble;