@gientech/modual 2.2.3-fix.5 → 2.2.3-fix.6

package/src/utils/gientechCommon/hooks/style.less

@@ -0,0 +1,8 @@
+.linshiBtn:hover {
+  background-color: #f7faff;
+}
+
+.fileItem:hover {
+  background-color: #f6f8ff;
+  border: 1px solid #4e6ef2 !important;
+}

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

@@ -0,0 +1,352 @@
+import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
+import { Popover, Badge, Switch, Tooltip, message, Popconfirm } from 'antd';
+import { Icon } from '@mxmweb/zui';
+import { X, FileText } from 'lucide-react';
+import './style.less';
+import { removeFilefromTempUpload } from '../utils/serverFn';
+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 [checked, setChecked] = 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`;
+      if (isNaN(size)) return size || '';
+      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 文件类型图标（使用 rag/xxx 格式）
+    const getZuiFileIcon = (fileName: string) => {
+      const ext = fileName.split('.').pop()?.toLowerCase() || '';
+      switch (ext) {
+        case 'docx':
+        case 'doc':
+          return <Icon type="rag/word" size={32} />;
+        case 'jpg':
+        case 'jpeg':
+        case 'png':
+        case 'gif':
+        case 'bmp':
+        case 'webp':
+        case 'svg':
+        case 'ico':
+          return <Icon type="rag/pic" size={32} />;
+        case 'pptx':
+        case 'ppt':
+          return <Icon type="rag/ppt" size={32} />;
+        case 'xls':
+        case 'xlsx':
+        case 'xlsm':
+        case 'xlsb':
+        case 'xltx':
+        case 'xltm':
+        case 'xlt':
+        case 'xlam':
+          return <Icon type="rag/excel" size={32} />;
+        case 'csv':
+          return <Icon type="rag/csv" size={32} />;
+        case 'pdf':
+          return <Icon type="rag/pdf" size={32} />;
+        case 'txt':
+          return <Icon type="rag/txt" size={32} />;
+        case 'md':
+          return <Icon type="rag/txt" size={32} />;
+        case 'json':
+          return <Icon type="rag/json" size={32} />;
+        case 'html':
+        case 'htm':
+          return <Icon type="rag/url" size={32} />;
+        default:
+          return <Icon type="rag/file" size={32} />;
+      }
+    };
+
+    // 文件列表弹出内容 - 完全按照设计图的列表样式
+    const fileListContent = (
+      <div
+        className="bg-white rounded-lg"
+        style={{
+          width: '280px',
+          maxHeight: '400px',
+          overflowY: 'auto',
+          padding: '8px',
+        }}
+      >
+        {/* 标题 */}
+        <div
+          className="text-sm font-semibold"
+          style={{
+            color: '#333',
+            fontWeight: 700,
+            fontSize: '16px',
+          }}
+        >
+          临时知识库文档
+        </div>
+        <div style={{ fontSize: '12px', color: '#86909C', marginTop: '4px' }}>
+          临时知识库内容为本次会话上传文件，删除后将不再生效。
+        </div>
+
+        {/* 文件列表 - 垂直排列 */}
+        <div className="flex flex-col gap-3">
+          {fileManagerData.uploadedFiles.map((file: any, idx: number) => {
+            const fileName =
+              file.name || file.file?.name || file.fileName || file.file?.fileName || '';
+            const fileSize = file.file?.size || file.size || 0;
+            const fileIcon = getZuiFileIcon(fileName);
+            const fileTypeDisplay = getFileTypeDisplay(fileName);
+
+            return (
+              <div
+                key={file.uid || idx}
+                className="fileItem flex items-center cursor-pointer rounded transition-colors"
+                style={{
+                  padding: '8px',
+                  border: '1px solid transparent',
+                  height: '56px',
+                }}
+                onClick={() => {
+                  // 先关闭 Popover，避免与预览 Drawer 重叠
+                  setFileListPopoverOpen(false);
+                  // 点击文件项时，发送事件并返回文件数据
+                  const fileType = (fileName || '').split('.').pop()?.toLowerCase() || '';
+                  const parseUrl = file.convertedFilePath || file.parseUrl || file.parsedFilePath;
+                  const fileUrl = file.url || file.filePath || file.convertedFilePath;
+
+                  // 如果没有 parse_url 但有 uid，使用 referenceFile_question 事件，传递完整的数据结构以支持预览
+                  if (!parseUrl && file.uid) {
+                    eventsEmit('referenceFile_question', {
+                      data: {
+                        ...file,
+                        file_name: fileName,
+                        file_type: fileType,
+                        url: fileUrl, // 添加 url 字段，用于可预览类型
+                        convertedFilePath: file.convertedFilePath,
+                        filePath: file.url || file.filePath,
+                        parsedFilePath: file.parsedFilePath || file.convertedFilePath,
+                        pdfPages: file.pdfPages || 0,
+                        size: file.size || formatSize(fileSize),
+                        metadata: {
+                          ...(file.metadata || {}),
+                          source: fileUrl, // 确保有 source 字段，用于可预览类型
+                          convertedFilePath: file.convertedFilePath,
+                          filePath: file.url || file.filePath,
+                          name: fileName,
+                          pdfPages: file.pdfPages || 0,
+                          size: file.size || formatSize(fileSize),
+                        },
+                      },
+                    });
+                  } else {
+                    // 如果有 parse_url，使用 reference_file:click 事件
+                    eventsEmit('reference_file:click', {
+                      file: fileName,
+                      file_type: fileType,
+                      url: file.url || file.filePath,
+                      parse_url: parseUrl,
+                      retrieve_tags: file.retrieveTags || [],
+                      file_id: file.uid || file.file_id,
+                      uid: file.uid, // 添加 uid 字段，用于 referenceFile_question_upload
+                      parsed_file_type: fileType,
+                      type: fileType,
+                      isUploadFile: true,
+                      pdfPages: file.pdfPages || 0,
+                      metadata: file.metadata || {
+                        convertedFilePath: file.convertedFilePath,
+                        filePath: file.url || file.filePath,
+                        name: fileName,
+                        pdfPages: file.pdfPages || 0,
+                      },
+                    });
+                  }
+                }}
+              >
+                {/* 文件图标 */}
+                <div style={{ width: '32px', height: '32px', marginRight: '12px' }}>{fileIcon}</div>
+
+                {/* 文件信息 */}
+                <div className="flex-1 min-w-0">
+                  {/* 文件名 - 深灰色，过长时截断 */}
+                  <div className="flex justify-between items-center">
+                    <div
+                      className="text-sm font-medium truncate"
+                      style={{
+                        color: '#333',
+                        marginBottom: '4px',
+                      }}
+                      title={fileName}
+                    >
+                      {fileName}
+                    </div>
+                    <Popconfirm
+                      title="确认从临时对话知识库移除该文件？"
+                      onConfirm={(e: any) => {
+                        e.stopPropagation();
+                        eventsEmit && eventsEmit('uploaded_file:removeFromTemp', { file });
+                      }}
+                      okText="确认"
+                      cancelText="取消"
+                    >
+                      <X
+                        size={14}
+                        style={{ cursor: 'pointer', marginLeft: '8px', color: '#999' }}
+                        onClick={e => e.stopPropagation()}
+                      />
+                    </Popconfirm>
+                  </div>
+
+                  {/* 文件类型和大小 - 浅灰色小字 */}
+                  <div
+                    className="text-xs"
+                    style={{
+                      color: '#999',
+                      fontSize: '12px',
+                    }}
+                  >
+                    {fileTypeDisplay} {formatSize(fileSize)}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+
+    return (
+      <div className="flex items-center">
+        <Popover
+          content={fileListContent}
+          trigger="click"
+          placement="bottomRight"
+          overlayClassName="file-list-popover"
+          open={fileListPopoverOpen}
+          onOpenChange={setFileListPopoverOpen}
+        >
+          <Tooltip
+            title={<div style={{ width: '108px', fontSize: '12px' }}>查看临时知识库文档</div>}
+            placement="top"
+            color="#5F5E6B"
+          >
+            <div className="flex items-center cursor-pointer hover:opacity-80 transition-opacity">
+              <div
+                className="linshiBtn"
+                style={{
+                  width: '119px',
+                  height: '32px',
+                  border: '1px solid #E5E6EB',
+                  borderRadius: '8px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}
+              >
+                <FileText size={16} style={{ color: '#1D2129' }} />
+                <div style={{ color: '#1D2129', fontSize: '12px', margin: '0 4px' }}>
+                  临时知识库
+                </div>
+                <div
+                  style={{
+                    width: '18px',
+                    height: '18px',
+                    borderRadius: '100%',
+                    backgroundColor: '#DBEAFE',
+                    fontSize: '10px',
+                    color: '#4E6EF2',
+                    fontWeight: 500,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}
+                >
+                  {fileCount}
+                </div>
+              </div>
+
+              {/* <Badge count={fileCount} size="small" offset={[-4, 4]}>
+            <FileText
+              size={20}
+              className="text-gray-600"
+              style={{ color: styles?.theme?.colors?.text || '#666' }}
+            />
+          </Badge> */}
+            </div>
+          </Tooltip>
+        </Popover>
+        <div style={{ borderRight: '1px solid #DDE0E5', height: '16px', margin: '0 8px' }}></div>
+        <Tooltip
+          title={
+            <div style={{ width: '204px', fontSize: '12px' }}>
+              <div>开启：回答仅基于临时知识库检索内容 </div>
+              <div>关闭：回答基于企业知识库检索内容 </div>
+            </div>
+          }
+          placement="top"
+          color="#5F5E6B"
+        >
+          <Switch
+            checkedChildren="开"
+            unCheckedChildren="关"
+            checked={checked}
+            onChange={(checked: boolean) => {
+              setChecked(checked);
+              eventsEmit('TempKnowledgeBase', checked);
+            }}
+          />
+        </Tooltip>
+      </div>
+    );
+  }, [fileManagerData.uploadedFiles, styles, eventsEmit, fileListPopoverOpen]);
+
+  const preUploadedFilesRef = useRef(fileManagerData.uploadedFiles || []);
+
+  useEffect(() => {
+    if (!fileManagerData?.uploadedFiles?.length) return;
+    const preFiles = JSON.stringify(preUploadedFilesRef.current || []);
+    const curFiles = JSON.stringify(fileManagerData.uploadedFiles || []);
+    if (preFiles === curFiles) return;
+    preUploadedFilesRef.current = fileManagerData.uploadedFiles || [];
+    setChecked(true);
+
+    eventsEmit('TempKnowledgeBase', true);
+  }, [fileManagerData.uploadedFiles]);
+
+  return {
+    FileDisplayTools,
+    setFileListPopoverOpen,
+  };
+}

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

@@ -0,0 +1,169 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import axios from 'axios';
+import { message } from 'antd';
+import { normalizeFileItem, 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,
+  onError,
+  activeSessionId,
+}: UseFileManagerOptions) {
+  const [fileStatuses, setFileStatuses] = useState<any[]>([]);
+  const [fileManagerData, setFileManagerData] = useState<{ uploadedFiles: any[] }>(() => {
+    return { uploadedFiles: [] };
+  });
+  const stoppedRef = useRef(false);
+  const getTempFileList = async (activeSessionId?: string) => {
+    if (!activeSessionId) return null;
+    try {
+      const res = await axios.get(
+        `${url}/index/knowledgeBase/file/getFilesBysessionId?sessionId=${activeSessionId}`,
+        { headers: { Authorization: token } }
+      );
+      console.log('[DEBUG] 获取临时文件列表 res:', res?.data?.data);
+
+      setFileManagerData({ uploadedFiles: res?.data?.data || [] });
+    } catch (error) {
+      console.error('获取临时文件列表失败:', error);
+      throw error;
+    }
+  };
+  /**
+   * 轮询文件解析状态
+   * @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);
+            // 使用 fileParseStatus 判断文件解析状态：1:正常 2:解析中 3:解析成功 4:解析失败
+            // 所有文件解析成功（fileParseStatus === 3）或解析失败（fileParseStatus === 4）时停止轮询
+            const allDone = statuses.every((file: any) => {
+              const parseStatus = file.fileParseStatus ?? file.status; // 兼容旧数据，优先使用 fileParseStatus
+              return parseStatus === 3 || parseStatus === 4; // 3:解析成功 4:解析失败
+            });
+            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('文件已从临时知识库移除');
+          getTempFileList(activeSessionId);
+          // 用后端返回的新data数组（新文件列表）更新本地uploadedFiles
+        } else {
+          console.log('[DEBUG] removeFilefromTempUpload 回调 false，res:', res);
+          message.error('文件移除失败');
+        }
+      });
+    },
+    [url, token, CSRFToken, activeSessionId]
+  );
+
+  /**
+   * 重置停止标志（用于开始新的上传流程）
+   */
+  const resetStopFlag = useCallback(() => {
+    stoppedRef.current = false;
+  }, []);
+
+  /**
+   * 设置停止标志（用于停止当前上传/解析流程）
+   */
+  const setStopFlag = useCallback(() => {
+    stoppedRef.current = true;
+  }, []);
+
+  return {
+    fileManagerData,
+    fileStatuses,
+    setFileManagerData,
+    setFileStatuses,
+    pollFileStatus,
+    handleRemoveFromTemp,
+    resetStopFlag,
+    setStopFlag,
+    stoppedRef,
+    getTempFileList,
+  };
+}