@gientech/modual 2.0.3 → 2.0.5

package/src/utils/gientechCommon/hooks/useFileDisplayTools.tsx

@@ -0,0 +1,204 @@
+import React, { useState, useMemo } from 'react';
+import { Popover, Badge } from 'antd';
+import { FileText } from 'lucide-react';
+import { Icon } from '@mxmweb/zui';
+
+interface UseFileDisplayToolsOptions {
+  fileManagerData: { uploadedFiles: any[] };
+  styles?: any;
+  eventsEmit: (eventName: string, data: any) => void;
+}
+
+/**
+ * 文件展示工具 Hook
+ * 用于在 chatHeader.tools 中展示已上传的文件
+ * 右上角显示一个文件图标 + 文件数量徽章，点击后弹出文件列表
+ */
+export function useFileDisplayTools({
+  fileManagerData,
+  styles,
+  eventsEmit,
+}: UseFileDisplayToolsOptions) {
+  const [fileListPopoverOpen, setFileListPopoverOpen] = useState(false);
+
+  const FileDisplayTools = useMemo(() => {
+    const fileCount = fileManagerData.uploadedFiles?.length || 0;
+
+    // 如果没有文件，不显示
+    if (fileCount === 0) {
+      return null;
+    }
+
+    // 格式化文件大小
+    const formatSize = (size?: number) => {
+      if (!size) return '';
+      if (size < 1024) return `${size}B`;
+      if (size < 1024 * 1024) return `${(size / 1024).toFixed(0)}KB`;
+      return `${(size / 1024 / 1024).toFixed(1)}MB`;
+    };
+
+    // 获取文件类型大写显示（如 DOC, PDF, PNG）
+    const getFileTypeDisplay = (fileName: string) => {
+      const ext = fileName.split('.').pop()?.toUpperCase() || '';
+      if (ext === 'DOCX' || ext === 'DOC') return 'DOC';
+      if (ext === 'XLSX' || ext === 'XLS') return 'XLS';
+      if (ext === 'PPTX' || ext === 'PPT') return 'PPT';
+      if (ext === 'JPG' || ext === 'JPEG') return 'JPG';
+      return ext;
+    };
+
+    // 获取 zui-icon 文件类型图标
+    const getZuiFileIcon = (fileName: string) => {
+      const ext = fileName.split('.').pop()?.toLowerCase() || '';
+      switch (ext) {
+        case 'docx':
+        case 'doc':
+          return <Icon type='rag/word' size={18} />;
+        case 'jpg':
+        case 'jpeg':
+        case 'png':
+        case 'gif':
+        case 'bmp':
+        case 'webp':
+        case 'svg':
+        case 'ico':
+          return <Icon type='rag/pic' size={18} />;
+        case 'pptx':
+        case 'ppt':
+          return <Icon type='rag/ppt' size={18} />;
+        case 'xls':
+        case 'xlsx':
+        case 'xlsm':
+        case 'xlsb':
+        case 'xltx':
+        case 'xltm':
+        case 'xlt':
+        case 'xlam':
+        case 'csv':
+          return <Icon type='rag/excel' size={18} />;
+        case 'pdf':
+          return <Icon type='rag/pdf' size={18} />;
+        case 'txt':
+          return <Icon type='rag/txt' size={18} />;
+        case 'md':
+          return <Icon type='rag/document' size={18} />;
+        case 'json':
+          return <Icon type='rag/json' size={18} />;
+        case 'html':
+        case 'htm':
+          return <Icon type='rag/url' size={18} />;
+        default:
+          return <Icon type='rag/file' size={18} />;
+      }
+    };
+
+    // 文件列表弹出内容 - 完全按照设计图的列表样式
+    const fileListContent = (
+      <div
+        className="bg-white rounded-lg"
+        style={{
+          width: '360px',
+          maxHeight: '400px',
+          overflowY: 'auto',
+          padding: '16px',
+        }}
+      >
+        {/* 标题 */}
+        <div
+          className="text-sm font-semibold mb-4"
+          style={{
+            color: '#333',
+            fontWeight: 600,
+          }}
+        >
+          当前问答上传文件
+        </div>
+
+        {/* 文件列表 - 垂直排列 */}
+        <div className="flex flex-col gap-3">
+          {fileManagerData.uploadedFiles.map((file: any, idx: number) => {
+            const fileName = file.name || file.file?.name || '';
+            const fileSize = file.file?.size || file.size || 0;
+            const fileIcon = getZuiFileIcon(fileName);
+            const fileTypeDisplay = getFileTypeDisplay(fileName);
+
+            return (
+              <div
+                key={file.uid || idx}
+                className="flex items-start gap-3 cursor-pointer hover:bg-gray-50 rounded transition-colors"
+                style={{
+                  padding: '8px',
+                }}
+                onClick={() => {
+                  // 先关闭 Popover，避免与预览 Drawer 重叠
+                  setFileListPopoverOpen(false);
+                  // 点击文件项时，发送事件并返回文件数据
+                  eventsEmit('uploaded_file:item_click', {
+                    file,
+                    index: idx,
+                  });
+                }}
+              >
+                {/* 文件图标 */}
+                <div className="shrink-0 mt-0.5">
+                  {fileIcon}
+                </div>
+
+                {/* 文件信息 */}
+                <div className="flex-1 min-w-0">
+                  {/* 文件名 - 深灰色，过长时截断 */}
+                  <div
+                    className="text-sm font-medium truncate"
+                    style={{
+                      color: '#333',
+                      marginBottom: '4px',
+                    }}
+                    title={fileName}
+                  >
+                    {fileName}
+                  </div>
+
+                  {/* 文件类型和大小 - 浅灰色小字 */}
+                  <div
+                    className="text-xs"
+                    style={{
+                      color: '#999',
+                    }}
+                  >
+                    {fileTypeDisplay} {formatSize(fileSize)}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+
+    return (
+      <Popover
+        content={fileListContent}
+        trigger="click"
+        placement="bottomRight"
+        overlayClassName="file-list-popover"
+        open={fileListPopoverOpen}
+        onOpenChange={setFileListPopoverOpen}
+      >
+        <div className="flex items-center cursor-pointer hover:opacity-80 transition-opacity">
+          <Badge count={fileCount} size="small" offset={[-4, 4]}>
+            <FileText
+              size={20}
+              className="text-gray-600"
+              style={{ color: styles?.theme?.colors?.text || '#666' }}
+            />
+          </Badge>
+        </div>
+      </Popover>
+    );
+  }, [fileManagerData.uploadedFiles, styles, eventsEmit, fileListPopoverOpen]);
+
+  return {
+    FileDisplayTools,
+    setFileListPopoverOpen,
+  };
+}

package/src/utils/gientechCommon/hooks/useFileManager.ts

@@ -0,0 +1,193 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import axios from 'axios';
+import { message } from 'antd';
+import { normalizeFileItem, mergeFiles, normalizeUploadedFiles } from '../utils/fileUtils';
+import { removeFilefromTempUpload } from '../utils/serverFn';
+import { getFileTypeByName } from '../../../utils/commonFn';
+import { maxPollCount, maxPollInterval } from '../configs/commonConfig';
+
+interface UseFileManagerOptions {
+  url: string;
+  token: string;
+  CSRFToken?: string;
+  activeSessionId?: string;
+  chatData: any[];
+  onError?: (error: any) => void;
+}
+
+interface PollCallbacks {
+  onStatusUpdate: (serverStatuses: any[]) => void;
+  onComplete: () => void;
+  onFail: (errorMsg: string) => void;
+}
+
+/**
+ * 文件管理 Hook
+ * 统一管理文件上传、解析、删除等逻辑
+ * 用于 chat 和 headlessChat 模块
+ */
+export function useFileManager({
+  url,
+  token,
+  CSRFToken,
+  activeSessionId,
+  chatData,
+  onError,
+}: UseFileManagerOptions) {
+  const [fileStatuses, setFileStatuses] = useState<any[]>([]);
+  const [fileManagerData, setFileManagerData] = useState<{ uploadedFiles: any[] }>(() => {
+    return { uploadedFiles: [] };
+  });
+  const stoppedRef = useRef(false);
+
+  /**
+   * 从 AI 消息的 reference 字段同步文件到 fileManagerData
+   * 当 AI 消息的 resultType === 5 且 reference 字段存在时，解析文件列表
+   */
+  useEffect(() => {
+    if (!activeSessionId) return;
+    const conv = chatData.find((c: any) => c.id === activeSessionId);
+    let uploaded: any[] = [];
+    let hasReference = false;
+    if (conv && conv.messages) {
+      const lastAiMsg = [...(conv.messages || [])]
+        .reverse()
+        .find((msg: any) => msg.istype === 'ai');
+      if (lastAiMsg?.reference && lastAiMsg.resultType === 5) {
+        hasReference = true;
+        try {
+          const fileList = JSON.parse(lastAiMsg.reference);
+          uploaded = fileList.map((f: any) => normalizeFileItem(f));
+        } catch (e) {
+          console.error('解析 reference 字段失败:', e);
+        }
+      }
+    }
+    if (hasReference) {
+      setFileManagerData({ uploadedFiles: uploaded });
+    }
+    // 否则不动，保持原有 uploadedFiles
+  }, [chatData, activeSessionId]);
+
+  /**
+   * 切换会话时清空文件列表
+   */
+  useEffect(() => {
+    setFileManagerData({ uploadedFiles: [] });
+  }, [activeSessionId]);
+
+  /**
+   * 轮询文件解析状态
+   * @param uids - 文件UID列表
+   * @param callbacks - 回调函数集合
+   * @returns 停止轮询的函数
+   */
+  const pollFileStatus = useCallback(
+    (uids: string[], callbacks: PollCallbacks) => {
+      const uidsString = uids.join(',');
+      let pollCount = 0;
+      let stopPoll: (() => void) | null = null;
+
+      stopPoll = () => {
+        stoppedRef.current = true;
+      };
+
+      const checkStatus = async () => {
+        if (stoppedRef.current) return;
+        if (pollCount >= maxPollCount) {
+          if (!stoppedRef.current) callbacks.onFail('文件解析超时，请稍后重试');
+          return;
+        }
+        pollCount++;
+        try {
+          const res = await axios.get(
+            `${url}/index/knowledgeBase/file/getFileStatusByUids?uids=${uidsString}`,
+            {
+              headers: { Authorization: token },
+            }
+          );
+          if (stoppedRef.current) return;
+          if (res.data.success) {
+            const statuses = res.data.data;
+            if (!stoppedRef.current) callbacks.onStatusUpdate(statuses);
+            const allDone = statuses.every((file: any) => file.status === 3);
+            if (allDone) {
+              if (!stoppedRef.current) callbacks.onComplete();
+            } else {
+              if (!stoppedRef.current) setTimeout(checkStatus, maxPollInterval);
+            }
+          } else {
+            if (!stoppedRef.current) callbacks.onFail(res.data.errorMsg || '查询文件状态失败');
+          }
+        } catch (error) {
+          onError?.(error);
+          if (stoppedRef.current) return;
+          callbacks.onFail('查询文件状态时发生网络错误');
+        }
+      };
+      checkStatus();
+
+      return stopPoll;
+    },
+    [url, token, onError]
+  );
+
+  /**
+   * 处理从临时知识库删除文件
+   * @param uid - 文件UID
+   * @param queryId - 查询ID（可选）
+   */
+  const handleRemoveFromTemp = useCallback(
+    async (uid: string, queryId?: string) => {
+      if (!uid) {
+        console.warn('[DEBUG] 缺少uid，无法删除临时文件');
+        return;
+      }
+
+      removeFilefromTempUpload(
+        { url, token, CSRFToken },
+        { uid, queryId },
+        (success, res) => {
+          if (success) {
+            message.success('文件已从临时知识库移除');
+            // 用后端返回的新data数组（新文件列表）更新本地uploadedFiles
+            if (res && Array.isArray(res.data?.data)) {
+              const uploaded = normalizeUploadedFiles(res.data.data, getFileTypeByName);
+              setFileManagerData({ uploadedFiles: uploaded });
+            }
+          } else {
+            console.log('[DEBUG] removeFilefromTempUpload 回调 false，res:', res);
+            message.error('文件移除失败');
+          }
+        }
+      );
+    },
+    [url, token, CSRFToken]
+  );
+
+  /**
+   * 重置停止标志（用于开始新的上传流程）
+   */
+  const resetStopFlag = useCallback(() => {
+    stoppedRef.current = false;
+  }, []);
+
+  /**
+   * 设置停止标志（用于停止当前上传/解析流程）
+   */
+  const setStopFlag = useCallback(() => {
+    stoppedRef.current = true;
+  }, []);
+
+  return {
+    fileManagerData,
+    fileStatuses,
+    setFileManagerData,
+    setFileStatuses,
+    pollFileStatus,
+    handleRemoveFromTemp,
+    resetStopFlag,
+    setStopFlag,
+    stoppedRef,
+  };
+}