@mxmweb/aichat 1.1.7 → 1.1.8

package/src/adopters/gientechCommon/components/FileManager/index.tsx

@@ -0,0 +1,381 @@
+import { Modal,  Button,  Upload, Popconfirm } from "antd";
+import { FileText,  FileImage, FileSpreadsheet, File, Plus, X } from 'lucide-react';
+import { useEffect, useState } from "react";
+import './style.css';
+import { AiChatStyles } from "../../../../components/defaultStyleSet";
+import ReferenceCard from '../Messages/ReferenceCard';
+import type { ThemeColors } from '../../../../components/defaultStyleSet';
+import FileCardCommon from '../../../../components/common/FileCardCommon';
+
+// 文件类型icon获取函数，优先用用户传入styles.theme.icons
+export function getFileTypeIcon(type: string, styles?: any) {
+  const icons = styles?.theme?.icons || {};
+  //console.log('type``````````', type,icons)
+  switch (type.toLowerCase()) {
+    case 'docx':
+    case 'doc':
+      return icons.docx ? (
+        <img src={icons.docx} alt="docx" style={{ width: 20, height: 20 }} />
+      ) : (
+        <FileText className="w-5 h-5 text-blue-400" />
+      );
+    case 'image':
+    case 'jpg':
+    case 'jpeg':
+    case 'png':
+    case 'gif':
+    case 'bmp':
+    case 'webp':
+    case 'svg':
+    case 'ico':
+      return icons.image ? (
+        <img src={icons.image} alt="image" style={{ width: 20, height: 20 }} />
+      ) : (
+        <FileImage className="w-5 h-5 text-blue-400" />
+      );
+    case 'pptx':
+    case 'ppt':
+      return icons.pptx ? (
+        <img src={icons.pptx} alt="pptx" style={{ width: 20, height: 20 }} />
+      ) : (
+        <File className="w-5 h-5 text-orange-400" />
+      );
+    case 'sheets':
+    case 'excel':
+    case 'xls':
+    case 'csv':
+    case 'xlsx':
+    case 'xlsm':
+    case 'xlsb':
+    case 'xltx':
+    case 'xltm':
+    case 'xlt':
+    case 'xlam':
+      return icons.sheets ? (
+        <img src={icons.sheets} alt="sheets" style={{ width: 20, height: 20 }} />
+      ) : (
+        <FileSpreadsheet className="w-5 h-5 text-green-400" />
+      );
+    case 'pdf':
+      return icons.pdf ? (
+        <img src={icons.pdf} alt="pdf" style={{ width: 20, height: 20 }} />
+      ) : (
+        <FileText className="w-5 h-5 text-red-400" />
+      );
+    case 'txt':
+      return icons.txt ? (
+        <img src={icons.txt} alt="txt" style={{ width: 20, height: 20 }} />
+      ) : (
+        <FileText className="w-5 h-5 text-gray-400" />
+      );
+    case 'md':
+      return icons.md ? (
+        <img src={icons.md} alt="txt" style={{ width: 20, height: 20 }} />
+      ) : (
+        <FileText className="w-5 h-5 text-gray-400" />
+      );
+    case 'json':
+      return icons.json ? (
+        <img src={icons.json} alt="json" style={{ width: 20, height: 20 }} />
+      ) : (
+        <FileText className="w-5 h-5 text-gray-400" />
+      );
+    case 'html':
+    case 'htm':
+      return icons.html ? (
+        <img src={icons.html} alt="html" style={{ width: 20, height: 20 }} />
+      ) : (
+        <FileText className="w-5 h-5 text-gray-400" />
+      );
+    case 'xml':
+    default:
+      return <File className="w-5 h-5 text-gray-400" />;
+  }
+}
+interface FileItem {
+  file: File;
+  preview?: string;
+  type: string;
+  status?: 'pending' | 'uploading' | 'uploaded' | 'error';
+  url?: string;
+  error?: string;
+}
+
+// Mock数据
+const mockFiles: FileItem[] = [
+  {
+    file: {
+      name: '产品需求文档.pdf',
+      size: 1024 * 1024 * 2.5, // 2.5MB
+      type: 'application/pdf',
+    } as File,
+    type: 'pdf',
+    status: 'uploaded',
+    url: 'https://example.com/file1.pdf',
+  },
+  {
+    file: {
+      name: '数据分析报告.xlsx',
+      size: 1024 * 1024 * 1.2, // 1.2MB
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    } as File,
+    type: 'excel',
+    status: 'uploaded',
+    url: 'https://example.com/file3.xlsx',
+  },
+  {
+    file: {
+      name: '系统架构图.png',
+      size: 1024 * 512, // 512KB
+      type: 'image/png',
+    } as File,
+    type: 'image',
+    status: 'uploaded',
+    url: 'https://example.com/file2.png',
+  },
+];
+
+const formatFileSize = (bytes: number) => {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+};
+
+export default function FileManager({
+  open,
+  onCancel,
+  files = mockFiles,
+  currentFiles = [],
+  onUpload,
+  onRemoveFile,
+  styles,
+  eventsEmit
+}: {
+  open: boolean;
+  onCancel: () => void;
+  files: FileItem[];
+  styles: AiChatStyles;
+  currentFiles: FileItem[];
+  onUpload?: (files: FileList) => void;
+  onRemoveFile?: (file: FileItem, idx: number, type: 'uploaded' | 'pending') => void;
+  eventsEmit?: (eventName: string, payload?: any) => void;
+}) {
+  // 状态映射
+  const statusMap = {
+    pending: '待上传',
+    uploading: '上传中',
+    uploaded: '已上传',
+    analyzing: '解析中',
+    analyze_failed: '解析失败',
+    error: '失败',
+  };
+
+  // 选中状态
+  const [selectedFiles, setSelectedFiles] = useState<number[]>([]);
+
+  const handleSelect = (idx: number) => {
+    setSelectedFiles(prev => prev.includes(idx) ? prev.filter(i => i !== idx) : [...prev, idx]);
+  };
+
+  // 已上传文件删除事件抛出
+  const handleRemove = (file: FileItem, idx: number) => {
+    eventsEmit && eventsEmit('uploaded_file:removeFromTemp', { file, idx });
+  };
+
+
+  // 主题色，提前定义，避免未初始化访问
+  const themeColors: ThemeColors = (styles && styles.theme && styles.theme.colors) ? styles.theme.colors : {
+    primary: '#007bff',
+    secondary: '#6c757d',
+    success: '#008000',
+    warning: '#FFA500',
+    error: '#FF0000',
+    info: '#0000FF',
+    background: '#f8f9fa',
+    text: '#343a40',
+    border: '#dee2e6',
+    disabled: '#808080',
+    disabledBackground: '#F5F5F5',
+    disabledText: '#808080',
+    shadow: '#000000',
+    appBackground: 'transparent',
+  };
+
+  // 拆分文件
+  const uploadedFileCards = files.map((f, idx) => (
+    <div key={f.file.name + idx} className="relative flex flex-col gap-2.5 items-center justify-center">
+      <div className="absolute right-1 top-1 z-10">
+        <Popconfirm
+          title="确认从临时对话知识库移除该文件？"
+          onConfirm={() => handleRemove(f, idx)}
+          okText="确认"
+          cancelText="取消"
+        >
+          <button
+            className="bg-white cursor-pointer rounded-full p-0.5"
+            style={{
+              lineHeight: 0,
+              color: themeColors && themeColors.text ? themeColors.text : '#FF0000',
+              transition: 'background 0.2s, color 0.2s',
+            }}
+            onMouseOver={e => {
+              (e.currentTarget as HTMLElement).style.color = themeColors && themeColors.error ? themeColors.error : '#FF0000';
+            }}
+            onMouseOut={e => {
+              (e.currentTarget as HTMLElement).style.color = themeColors.text;
+            }}
+            title="移除"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </Popconfirm>
+      </div>
+      <ReferenceCard
+        file_type={f.type}
+        file_name={f.file.name}
+        url={f.url}
+        retrieve_tags={[]}
+        styles={styles}
+        isUploadFile={true}
+        eventsEmit={eventsEmit}
+      />
+    </div>
+  ));
+  const pendingFileCards = currentFiles.map((f, idx) => {
+    const fileType = f.file.name.split('.').pop() || '';
+    const icon = getFileTypeIcon(fileType, styles);
+    return (
+      <FileCardCommon
+        key={f.file.name + idx}
+        cardId={`pending-file-card-${idx}`}
+        fileName={f.file.name}
+        fileSize={f.file.size}
+        icon={icon}
+        statusText={statusMap[f.status || 'pending']}
+        statusColor="text-gray-400"
+        showRemove={true}
+        onRemove={() => onRemoveFile && onRemoveFile(f, idx, 'pending')}
+        themeColors={themeColors}
+        style={{ boxShadow: 'none', height: 55, background: '#f8fafc' }}
+      />
+    );
+  });
+
+  // 多选删除
+  const handleBatchRemove = () => {
+    if (eventsEmit) {
+      const filesToRemove = selectedFiles.map(idx => ({ file: files[idx], idx })).filter(f => f.file);
+      eventsEmit('uploaded_file:remove_batch', filesToRemove);
+    }
+    setSelectedFiles([]);
+  };
+
+  // 主题色
+  const batchDeleteBtnStyle = selectedFiles.length > 0
+    ? {
+        borderColor: themeColors && themeColors.error ? themeColors.error : '#FF0000',
+        background: themeColors && themeColors.error ? themeColors.error + '22' : '#FF000022',
+        color: themeColors && themeColors.error ? themeColors.error : '#FF0000',
+      }
+    : {
+        borderColor: themeColors && themeColors.disabledText ? themeColors.disabledText : '#808080',
+        background: themeColors && themeColors.disabledBackground ? themeColors.disabledBackground : '#F5F5F5',
+        color: themeColors && themeColors.disabledText ? themeColors.disabledText : '#808080',
+        cursor: 'not-allowed',
+      };
+
+  return (
+    <Modal
+      open={open}
+      onCancel={onCancel}
+      footer={null}
+      title={'对话临时文件知识库'}
+      closable={false}
+      width={800}
+      styles={{
+        body: {
+          padding: '0',
+          maxHeight: '70vh',
+          overflow: 'auto',
+        },
+      }}
+    >
+      <div className="file-manager-modal space-y-6 px-4 py-4">
+        {/* 已上传文件区域 */}
+        <div className="">
+          <div className="flex items-center mb-2 justify-between">
+            <div className="flex items-center">
+              <span className="text-xs font-semibold text-gray-700">已上传文件</span>
+              <span className="ml-2 text-xs text-gray-400">{files.length} 个</span>
+            </div>
+            {/* <button
+              className="ml-4 px-2 cursor-pointer py-1 text-xs rounded border"
+              disabled={selectedFiles.length === 0}
+              onClick={handleBatchRemove}
+              style={batchDeleteBtnStyle}
+            >
+              删除知识文档
+            </button> */}
+          </div>
+          <div
+            className="w-full relative min-h-[200px] max-h-[260px] bg-slate-50 p-2 overflow-y-auto"
+            style={{ overflowX: 'hidden' }}
+          >
+            <div className="flex flex-wrap gap-1">
+              {uploadedFileCards.length > 0 ? (
+                uploadedFileCards
+              ) : (
+                <div className="flex items-center w-full h-full py-10 justify-center text-gray-400 text-sm">
+                  暂无已上传文件
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+        {/* 待上传文件区域 */}
+        <div>
+          <div className="flex items-center mb-2">
+            <span className="text-xs font-semibold text-gray-700">待上传文件</span>
+            <span className="ml-2 text-xs text-gray-400">{currentFiles.length} 个</span>
+          </div>
+          <div className="flex gap-2 overflow-x-auto pb-2">
+            {pendingFileCards}
+            {/* 上传卡片 */}
+            <Upload.Dragger
+              multiple
+              showUploadList={false}
+              beforeUpload={(file, fileList) => {
+                if (file === fileList[0]) {
+                  onUpload?.(fileList as unknown as FileList);
+                }
+                return false;
+              }}
+              className="!bg-gray-50 !border-dashed !border-gray-300 hover:!border-blue-400 cursor-pointer min-w-[160px] max-w-[220px] flex flex-row items-center justify-center border-2 rounded-lg transition-all"
+              style={{ height: 45, boxShadow: 'none', padding: 0 }}
+            >
+              <div className="flex flex-row items-center pb-8 justify-center">
+                <Plus size={20} className="text-blue-400 mr-2" />
+                <div className="text-xs text-gray-500">上传文件</div>
+              </div>
+            </Upload.Dragger>
+          </div>
+        </div>
+        <div className="flex justify-end gap-2">
+          <Button type="primary" onClick={onCancel}>
+            确认
+          </Button>
+          {/* <Button onClick={onCancel}>取消</Button> */}
+        </div>
+      </div>
+      <style>{`
+        .file-manager-modal .ant-upload-wrapper,
+        .file-manager-modal .ant-upload-drag,
+        .file-manager-modal .ant-upload-drag-container {
+          min-height: 55px !important;
+          height: 55px !important;
+          padding: 0 !important;
+        }
+      `}</style>
+    </Modal>
+  );
+}

package/src/adopters/gientechCommon/components/FileManager/style.css

@@ -0,0 +1,5 @@
+.ant-upload-drag-container {
+  height: 45px !important;
+  min-height: 45px !important;
+  padding: 0 !important;
+}