@ai-group/chat-sdk 2.1.0 → 2.1.3

package/dist/esm/components/XAdkSender/index.js

@@ -0,0 +1,611 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useRef, useCallback } from 'react';
+import { Popconfirm, message, Progress, Tooltip, Input, Modal } from 'antd';
+import { ClearOutlined, LoadingOutlined, ArrowUpOutlined, PaperClipOutlined, CloseOutlined } from '@ant-design/icons';
+import { useStyles } from "./styles";
+
+// 文件类型图标映射
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var FILE_ICONS = {
+  // ... 保持不变
+};
+var XAdkSender = function XAdkSender(_ref) {
+  var _ref$clearBtnShow = _ref.clearBtnShow,
+    clearBtnShow = _ref$clearBtnShow === void 0 ? true : _ref$clearBtnShow,
+    _ref$allowUpload = _ref.allowUpload,
+    allowUpload = _ref$allowUpload === void 0 ? false : _ref$allowUpload,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$uploadProps = _ref.uploadProps,
+    uploadProps = _ref$uploadProps === void 0 ? {} : _ref$uploadProps,
+    onClear = _ref.onClear,
+    onChange = _ref.onChange,
+    onSubmit = _ref.onSubmit,
+    onStop = _ref.onStop,
+    onFilesChange = _ref.onFilesChange,
+    _ref$maxFileSize = _ref.maxFileSize,
+    maxFileSize = _ref$maxFileSize === void 0 ? 10 : _ref$maxFileSize,
+    _ref$allowedFileTypes = _ref.allowedFileTypes,
+    allowedFileTypes = _ref$allowedFileTypes === void 0 ? ['image/*', 'application/pdf', 'text/plain'] : _ref$allowedFileTypes,
+    _ref$maxFiles = _ref.maxFiles,
+    maxFiles = _ref$maxFiles === void 0 ? 5 : _ref$maxFiles;
+  var styles = useStyles();
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    files = _useState4[0],
+    setFiles = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isDragOver = _useState6[0],
+    setIsDragOver = _useState6[1];
+  var containerRef = useRef(null);
+  var fileInputRef = useRef(null);
+  var uploadRef = useRef(null);
+
+  // 生成唯一ID
+  var generateId = function generateId() {
+    return Date.now().toString(36) + Math.random().toString(36).substr(2);
+  };
+
+  // 获取文件图标
+  var getFileIcon = function getFileIcon(fileType) {
+    return FILE_ICONS[fileType] || FILE_ICONS.default;
+  };
+
+  // 格式化文件大小
+  var formatFileSize = function formatFileSize(bytes) {
+    if (bytes < 1024) return bytes + ' Bytes';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+  };
+
+  // 检查文件类型
+  var checkFileType = function checkFileType(file) {
+    if (!allowedFileTypes.length) return true;
+    return allowedFileTypes.some(function (type) {
+      if (type.includes('/*')) {
+        var mainType = type.split('/')[0];
+        return file.type.startsWith(mainType);
+      }
+      return file.type === type;
+    });
+  };
+
+  // 检查文件大小
+  var checkFileSize = function checkFileSize(file) {
+    var maxSize = maxFileSize * 1024 * 1024;
+    return file.size <= maxSize;
+  };
+
+  // 验证文件
+  var validateFile = function validateFile(file) {
+    if (files.length >= maxFiles) {
+      return {
+        valid: false,
+        message: "\u6700\u591A\u53EA\u80FD\u4E0A\u4F20 ".concat(maxFiles, " \u4E2A\u6587\u4EF6")
+      };
+    }
+    if (!checkFileSize(file)) {
+      return {
+        valid: false,
+        message: "\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7 ".concat(maxFileSize, "MB")
+      };
+    }
+    if (!checkFileType(file)) {
+      return {
+        valid: false,
+        message: '不支持的文件类型'
+      };
+    }
+    return {
+      valid: true
+    };
+  };
+
+  // 获取文件扩展名
+  var getFileExtension = function getFileExtension(filename) {
+    var ext = filename.split('.').pop();
+    return ext ? ext.toLowerCase() : '';
+  };
+
+  // 处理文件选择
+  var handleFileSelect = useCallback(function (selectedFiles) {
+    var fileArray = Array.from(selectedFiles);
+    var validFiles = [];
+    fileArray.forEach(function (file) {
+      var validation = validateFile(file);
+      if (validation.valid) {
+        validFiles.push({
+          id: generateId(),
+          uid: generateId(),
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          file: file,
+          progress: 0,
+          status: 'pending',
+          response: null
+        });
+      } else {
+        message.error(validation.message);
+      }
+    });
+    if (validFiles.length > 0) {
+      setFiles(function (prev) {
+        return [].concat(_toConsumableArray(prev), validFiles);
+      });
+      uploadFiles(validFiles);
+    }
+  }, [files.length, maxFiles, maxFileSize, allowedFileTypes]);
+
+  // 上传文件
+  var uploadFiles = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(fileList) {
+      var _iterator, _step, _loop;
+      return _regeneratorRuntime().wrap(function _callee$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _iterator = _createForOfIteratorHelper(fileList);
+            _context2.prev = 1;
+            _loop = /*#__PURE__*/_regeneratorRuntime().mark(function _loop() {
+              var localFile, rcFile, options;
+              return _regeneratorRuntime().wrap(function _loop$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    localFile = _step.value;
+                    // 开始上传
+                    setFiles(function (prev) {
+                      return prev.map(function (f) {
+                        return f.id === localFile.id ? _objectSpread(_objectSpread({}, f), {}, {
+                          status: 'uploading'
+                        }) : f;
+                      });
+                    });
+                    try {
+                      // 如果外部提供了 customRequest，使用它
+                      if (uploadProps.customRequest) {
+                        // 构建 UploadRequestOption
+                        rcFile = Object.assign(localFile.file, {
+                          uid: localFile.uid
+                        });
+                        options = {
+                          action: uploadProps.action,
+                          file: rcFile,
+                          filename: 'file',
+                          data: uploadProps.data,
+                          headers: uploadProps.headers,
+                          withCredentials: uploadProps.withCredentials,
+                          method: 'POST',
+                          onProgress: function onProgress(event) {
+                            setFiles(function (prev) {
+                              return prev.map(function (f) {
+                                return f.id === localFile.id ? _objectSpread(_objectSpread({}, f), {}, {
+                                  progress: event.percent || 0
+                                }) : f;
+                              });
+                            });
+                          },
+                          onSuccess: function onSuccess(response, file) {
+                            setFiles(function (prev) {
+                              return prev.map(function (f) {
+                                return f.id === localFile.id ? _objectSpread(_objectSpread({}, f), {}, {
+                                  status: 'success',
+                                  progress: 100,
+                                  response: response
+                                }) : f;
+                              });
+                            });
+                          },
+                          onError: function onError(error) {
+                            // 提取错误信息
+                            var errorMessage = '上传失败';
+                            if (error instanceof Error) {
+                              errorMessage = error.message;
+                            } else if (error && _typeof(error) === 'object' && 'status' in error) {
+                              errorMessage = "HTTP ".concat(error.status);
+                            }
+                            setFiles(function (prev) {
+                              return prev.map(function (f) {
+                                return f.id === localFile.id ? _objectSpread(_objectSpread({}, f), {}, {
+                                  status: 'error'
+                                }) : f;
+                              });
+                            });
+                            message.error("".concat(localFile.name, " \u4E0A\u4F20\u5931\u8D25: ").concat(errorMessage));
+                          }
+                        }; // 调用外部传入的 customRequest
+                        uploadProps.customRequest(options, {
+                          defaultRequest: function defaultRequest() {
+                            // 默认的上传逻辑
+                            simulateUpload([localFile]);
+                          }
+                        });
+                      } else {
+                        // 使用默认的上传逻辑
+                        simulateUpload([localFile]);
+                      }
+                    } catch (error) {
+                      setFiles(function (prev) {
+                        return prev.map(function (f) {
+                          return f.id === localFile.id ? _objectSpread(_objectSpread({}, f), {}, {
+                            status: 'error'
+                          }) : f;
+                        });
+                      });
+                      message.error("".concat(localFile.name, " \u4E0A\u4F20\u5931\u8D25"));
+                    }
+                  case 3:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _loop);
+            });
+            _iterator.s();
+          case 4:
+            if ((_step = _iterator.n()).done) {
+              _context2.next = 8;
+              break;
+            }
+            return _context2.delegateYield(_loop(), "t0", 6);
+          case 6:
+            _context2.next = 4;
+            break;
+          case 8:
+            _context2.next = 13;
+            break;
+          case 10:
+            _context2.prev = 10;
+            _context2.t1 = _context2["catch"](1);
+            _iterator.e(_context2.t1);
+          case 13:
+            _context2.prev = 13;
+            _iterator.f();
+            return _context2.finish(13);
+          case 16:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee, null, [[1, 10, 13, 16]]);
+    }));
+    return function uploadFiles(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  // 模拟上传过程
+  var simulateUpload = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(uploadFilesList) {
+      return _regeneratorRuntime().wrap(function _callee2$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            uploadFilesList.forEach(function (localFile) {
+              var progress = 0;
+              var interval = setInterval(function () {
+                progress += 10;
+                setFiles(function (prev) {
+                  return prev.map(function (f) {
+                    return f.id === localFile.id ? _objectSpread(_objectSpread({}, f), {}, {
+                      progress: progress
+                    }) : f;
+                  });
+                });
+                if (progress >= 100) {
+                  clearInterval(interval);
+                  setTimeout(function () {
+                    // 模拟服务器响应
+                    var mockResponse = {
+                      code: 200,
+                      data: {
+                        fileId: Math.floor(Math.random() * 1000) + 1,
+                        tempUrl: "https://example.com/uploads/".concat(localFile.name),
+                        fileName: localFile.name,
+                        fileType: getFileExtension(localFile.name)
+                      }
+                    };
+                    setFiles(function (prev) {
+                      return prev.map(function (f) {
+                        return f.id === localFile.id ? _objectSpread(_objectSpread({}, f), {}, {
+                          status: 'success',
+                          progress: 100,
+                          response: mockResponse
+                        }) : f;
+                      });
+                    });
+                  }, 300);
+                }
+              }, 100);
+            });
+          case 1:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee2);
+    }));
+    return function simulateUpload(_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  // 删除文件
+  var handleRemoveFile = function handleRemoveFile(id) {
+    setFiles(function (prev) {
+      return prev.filter(function (file) {
+        return file.id !== id;
+      });
+    });
+  };
+
+  // 触发文件选择
+  var triggerFileSelect = function triggerFileSelect() {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  // 处理拖拽事件
+  var handleDragOver = useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (allowUpload) {
+      setIsDragOver(true);
+    }
+  }, [allowUpload]);
+  var handleDragLeave = useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (allowUpload) {
+      setIsDragOver(false);
+    }
+  }, [allowUpload]);
+  var handleDrop = useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    if (allowUpload && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      handleFileSelect(Array.from(e.dataTransfer.files));
+    }
+  }, [allowUpload, handleFileSelect]);
+
+  // 处理提交
+  var handleSubmit = function handleSubmit() {
+    if (!value.trim() && files.length === 0) {
+      message.warning('请输入消息或选择文件');
+      return;
+    }
+    var successFiles = files.filter(function (file) {
+      return file.status === 'success';
+    });
+    var uploadingFiles = files.filter(function (file) {
+      return file.status === 'uploading';
+    });
+    if (uploadingFiles.length > 0) {
+      Modal.confirm({
+        title: '文件上传中',
+        content: "\u8FD8\u6709 ".concat(uploadingFiles.length, " \u4E2A\u6587\u4EF6\u6B63\u5728\u4E0A\u4F20\uFF0C\u662F\u5426\u7EE7\u7EED\u53D1\u9001\uFF1F"),
+        okText: '发送已完成的',
+        cancelText: '等待全部完成',
+        onOk: function onOk() {
+          var formattedFiles = formatFilesForServer(successFiles);
+          if (onSubmit) {
+            onSubmit({
+              text: value,
+              files: formattedFiles
+            });
+          }
+          setValue('');
+          setFiles(function (prev) {
+            return prev.filter(function (f) {
+              return f.status !== 'success';
+            });
+          });
+        },
+        onCancel: function onCancel() {
+          message.info('请等待文件上传完成后再发送');
+        }
+      });
+    } else {
+      var formattedFiles = formatFilesForServer(successFiles);
+      if (onSubmit) {
+        onSubmit({
+          text: value,
+          files: formattedFiles
+        });
+      }
+      setValue('');
+      setFiles(function (prev) {
+        return prev.filter(function (f) {
+          return f.status !== 'success';
+        });
+      });
+    }
+  };
+
+  // 格式化文件列表为服务端格式
+  var formatFilesForServer = function formatFilesForServer(fileList) {
+    return fileList.filter(function (file) {
+      var _file$response;
+      return file.status === 'success' && ((_file$response = file.response) === null || _file$response === void 0 ? void 0 : _file$response.data);
+    }).map(function (file) {
+      var responseData = file.response.data;
+      return {
+        fileName: file.name,
+        fileId: responseData.fileId || responseData.id || 0,
+        tempUrl: responseData.tempUrl || responseData.url || '',
+        type: responseData.fileType || getFileExtension(file.name),
+        mimeType: file.type
+      };
+    });
+  };
+
+  // 处理输入框变化
+  var handleInputChange = function handleInputChange(e) {
+    var newValue = e.target.value;
+    setValue(newValue);
+    onChange === null || onChange === void 0 || onChange(newValue);
+  };
+
+  // 处理回车键
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  // 渲染文件列表
+  var renderFileList = function renderFileList() {
+    if (files.length === 0) return null;
+    return /*#__PURE__*/_jsx("div", {
+      className: styles.fileListArea,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.fileList,
+        children: files.map(function (file) {
+          return /*#__PURE__*/_jsxs("div", {
+            className: styles.fileCard,
+            children: [/*#__PURE__*/_jsx("div", {
+              className: styles.fileIcon,
+              children: getFileIcon(file.type)
+            }), /*#__PURE__*/_jsxs("div", {
+              className: styles.fileInfo,
+              children: [/*#__PURE__*/_jsx("div", {
+                className: styles.fileName,
+                children: /*#__PURE__*/_jsx(Tooltip, {
+                  title: file.name,
+                  children: file.name.length > 15 ? "".concat(file.name.substring(0, 15), "...") : file.name
+                })
+              }), file.status === 'uploading' ? /*#__PURE__*/_jsx("div", {
+                className: styles.uploadProgress,
+                children: /*#__PURE__*/_jsx(Progress, {
+                  percent: file.progress,
+                  size: "small",
+                  showInfo: false,
+                  strokeColor: "#1890ff"
+                })
+              }) : /*#__PURE__*/_jsx("div", {
+                className: styles.fileSize,
+                children: formatFileSize(file.size)
+              })]
+            }), /*#__PURE__*/_jsx("button", {
+              className: styles.fileRemoveBtn,
+              onClick: function onClick() {
+                return handleRemoveFile(file.id);
+              },
+              disabled: file.status === 'uploading',
+              "aria-label": "\u5220\u9664\u6587\u4EF6",
+              children: /*#__PURE__*/_jsx(CloseOutlined, {
+                style: {
+                  fontSize: 8
+                }
+              })
+            })]
+          }, file.id);
+        })
+      })
+    });
+  };
+  var containerClass = "".concat(styles.container, " ").concat(isDragOver ? 'drag-over' : '');
+  var uploading = files.some(function (f) {
+    return f.status === 'uploading';
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    className: containerClass,
+    onDragOver: allowUpload ? handleDragOver : undefined,
+    onDragLeave: allowUpload ? handleDragLeave : undefined,
+    onDrop: allowUpload ? handleDrop : undefined,
+    children: [allowUpload && files.length > 0 && renderFileList(), allowUpload && /*#__PURE__*/_jsx("input", {
+      ref: fileInputRef,
+      type: "file",
+      multiple: true,
+      accept: allowedFileTypes.join(','),
+      style: {
+        display: 'none'
+      },
+      onChange: function onChange(e) {
+        if (e.target.files) {
+          handleFileSelect(Array.from(e.target.files));
+          e.target.value = '';
+        }
+      }
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.mainArea,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: styles.senderWrap,
+        children: [clearBtnShow && /*#__PURE__*/_jsx(Popconfirm, {
+          title: "\u786E\u5B9A\u8981\u6E05\u7A7A\u804A\u5929\u8BB0\u5F55\u5417\uFF1F",
+          onConfirm: onClear,
+          placement: "top",
+          okText: "\u786E\u5B9A",
+          cancelText: "\u53D6\u6D88",
+          disabled: uploading || loading,
+          children: /*#__PURE__*/_jsx("button", {
+            className: "".concat(styles.iconButton, " ").concat(styles.clearButton),
+            disabled: uploading || loading,
+            "aria-label": "\u6E05\u7A7A\u804A\u5929\u8BB0\u5F55",
+            children: /*#__PURE__*/_jsx(ClearOutlined, {})
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: styles.inputAndButtons,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: styles.textAreaWrapper,
+            children: /*#__PURE__*/_jsx(Input.TextArea, {
+              className: styles.textArea,
+              value: value,
+              onChange: handleInputChange,
+              onKeyDown: handleKeyDown,
+              placeholder: "\u8BF7\u8F93\u5165\u6D88\u606F...",
+              disabled: uploading || loading,
+              autoSize: {
+                minRows: 1,
+                maxRows: 4
+              },
+              style: {
+                border: 'none',
+                boxShadow: 'none',
+                outline: 'none',
+                padding: 0
+              }
+            })
+          }), /*#__PURE__*/_jsxs("div", {
+            className: styles.buttonGroup,
+            children: [allowUpload && /*#__PURE__*/_jsx(Tooltip, {
+              title: "\u4E0A\u4F20\u6587\u4EF6",
+              children: /*#__PURE__*/_jsx("button", {
+                className: "".concat(styles.iconButton, " ").concat(styles.uploadButton),
+                onClick: triggerFileSelect,
+                disabled: uploading || loading,
+                "aria-label": "\u4E0A\u4F20\u6587\u4EF6",
+                children: /*#__PURE__*/_jsx(PaperClipOutlined, {})
+              })
+            }), /*#__PURE__*/_jsx(Tooltip, {
+              title: loading ? "停止生成" : "发送消息",
+              children: /*#__PURE__*/_jsx("button", {
+                className: "".concat(styles.iconButton, " ").concat(styles.sendButton, " ").concat(loading ? 'stop' : ''),
+                onClick: loading ? onStop : handleSubmit,
+                disabled: uploading,
+                "aria-label": loading ? "停止生成" : "发送消息",
+                children: loading ? /*#__PURE__*/_jsx(LoadingOutlined, {}) : /*#__PURE__*/_jsx(ArrowUpOutlined, {})
+              })
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.tip,
+        children: "\u5185\u5BB9\u7531AI\u751F\u6210\uFF0C\u65E0\u6CD5\u786E\u4FDD\u771F\u5B9E\u51C6\u786E\uFF0C\u4EC5\u4F9B\u53C2\u8003"
+      })]
+    })]
+  });
+};
+export default XAdkSender;
+//# sourceMappingURL=index.js.map