@gientech/modual 2.0.4 → 2.0.5

package/src/utils/gientechCommon/components/Messages/ReferenceCard.tsx

@@ -0,0 +1,359 @@
+import React, { useEffect, useMemo } from 'react';
+import { FileSpreadsheet, FileText, FileCode, File, Eye, FolderUp } from 'lucide-react';
+import { getFileTypeIcon } from '../FileManager';
+import { AiChatStyles } from '../../configs/stylesConfig';
+import { dealMinioUrl, TempBaseUrl } from '../../../../utils';
+import { message } from 'antd';
+
+interface ReferenceCardProps {
+  file_type?: string;
+  file_name?: string;
+  url?: string;
+  parse_url?: string;
+  retrieve_tags?: any[];
+  clip_from?: string;
+  eventsEmit?: (eventName: string, payload?: any) => void;
+  styles: any;
+  onlyDownloadTypes?: string[];
+  type?: 'file' | 'image' | 'collection';
+  collectionItems?: Array<Partial<ReferenceCardProps>>;
+  [key: string]: any;
+}
+
+const ReferenceCard: React.FC<ReferenceCardProps> = (props) => {
+  const {
+    file_type,
+    file_name,
+    url,
+    parse_url,
+    retrieve_tags,
+    file_id,
+    parsed_file_type,
+    onlyDownloadTypes,
+    references,
+    eventsEmit,
+    styles,
+    isUploadFile,
+    type,
+    collectionItems,
+    pdfPages = 0,
+    fileManagerData
+  } = props;
+
+
+  // 新增：集合类型渲染
+  if (type === 'collection' && Array.isArray(collectionItems)) {
+    // 计算宫格item尺寸：父容器与普通item一致（w-24 h-24），gap为1px
+    const gridGap = 1; // px
+    const parentSize = 94; // 24*4=96px
+    const itemSize = `calc(90% - ${gridGap / 2}px)`;
+    // 最多展示4个，超出4个第4格显示省略号
+    const previewItems = collectionItems.slice(0, 4);
+    const showEllipsis = collectionItems.length > 4;
+    // hover 盖层内容
+    const overlayText = `打开合集`;
+    const handleClick = () => {
+      if(fileManagerData && file_type === 'pdf' && !props.pdfPages){
+        const cur = (fileManagerData?.uploadedFiles||[]).find((item: any) => (item?.name||item?.file?.name) === file_name);
+        if(!cur?.pdfPages){
+          message.warning('该PDF文件未解析完成，请稍后再试');
+          return
+        }
+        eventsEmit?.('reference_file:click', {...props, pdfPages: cur?.pdfPages || 0});
+      }else {
+        eventsEmit?.('reference_file:click', props);
+      }
+    };
+    return (
+      <div
+        className="user-file relative group flex flex-col items-center justify-center cursor-pointer backdrop-blur-sm rounded-lg border p-2 text-sm transition-all bg-white shadow"
+        style={{ width: parentSize, height: parentSize, minWidth: parentSize, minHeight: parentSize, borderColor: styles?.theme?.colors?.border }}
+        onClick={handleClick}
+      >
+        <div className="grid grid-cols-2 items-center justify-center grid-rows-2 gap-1 w-full h-full"
+          style={{ width: '100%', height: '100%', gap: gridGap }}
+        >
+          {previewItems.map((item, idx) => {
+            if (showEllipsis && idx === 3) {
+              return (
+                <div key="ellipsis" className="flex items-center justify-center bg-gray-100 rounded" style={{ width: itemSize, height: itemSize }}>
+                  <span className="text-xl text-gray-300 font-bold scale-75">...</span>
+                </div>
+              );
+            }
+            const isImage =
+              item.file_type === 'image' ||
+              item.file_type === 'jpg' ||
+              item.file_type === 'jpeg' ||
+              item.file_type === 'png' ||
+              item.file_type === 'gif' ||
+              item.file_type === 'bmp' ||
+              item.file_type === 'webp';
+            if (isImage) {
+              return (
+                <div
+                  key={item.file_name || idx}
+                  className="relative flex items-center justify-center bg-white rounded-lg border overflow-hidden"
+                  style={{ width: itemSize, height: itemSize, borderColor: styles?.theme?.colors?.border }}
+                >
+                  <div className="flex items-center justify-center w-full h-full scale-75">
+                    <img
+                      src={String(item.url || item.file_path || '')}
+                      alt={item.file_name || ''}
+                      className="object-contain max-w-full max-h-full"
+                    />
+                  </div>
+                </div>
+              );
+            }
+            const icon = getFileTypeIcon(String(item.file_type || ''), styles);
+            return (
+              <div
+                key={item.file_name || idx}
+                className="user-file flex flex-col items-center justify-center rounded-lg border bg-gray-50 p-1 text-sm"
+                title={item.file_name}
+                style={{ width: itemSize, height: itemSize, borderColor: styles?.theme?.colors?.border }}
+              >
+                <div className="flex items-center justify-center w-full h-full scale-75">
+                  {icon}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        {/* 整体hover盖层 */}
+        <div className="absolute inset-0 bg-transparent group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center rounded-lg pointer-events-none">
+          <div className="flex flex-col items-center text-xs justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity">
+            <FolderUp size={20} className="mb-1 text-white" />
+            <span className="text-white text-center" style={{ fontSize: 12 }}>{overlayText}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // const icon = fileTypeIcons[file_type?.toLowerCase()] || fileTypeIcons.default;
+
+  // 文档引用点击
+  const handleReferenceClick = () => {
+    console.log(parse_url,'parse_url',url,'url')
+    if(fileManagerData && file_type === 'pdf' && !pdfPages){
+      const cur = (fileManagerData?.uploadedFiles||[]).find((item: any) => (item?.name||item?.file?.name) === (file_name||'').replace(/\s+/g, ''));
+      if(!cur?.pdfPages){
+        message.warning('该PDF文件未解析完成，请稍后再试');
+        return
+      }
+      eventsEmit?.('reference_file:click', {
+        file: file_name,
+        file_type,
+        url,
+        parse_url,
+        retrieve_tags,
+        file_id,
+        parsed_file_type,
+        references,
+        type: fileType,
+        isUploadFile: isUploadFile,
+        pdfPages:cur.pdfPages || 0,
+      });
+    }else {
+      eventsEmit?.('reference_file:click', {
+        file: file_name,
+        file_type,
+        url,
+        parse_url,
+        retrieve_tags,
+        file_id,
+        parsed_file_type,
+        references,
+        type: fileType,
+        isUploadFile: isUploadFile,
+        pdfPages
+      });
+    }
+
+  };
+  const fileType = useMemo(() => {
+    return (file_name || '').split('.').pop() || '';
+  }, [file_name]);
+  //console.log('fileType123123123123123123',fileType)
+  const icon = getFileTypeIcon(fileType, styles);
+  // 召回标签点击
+  // const handleRetriveTagClick = (tag: any) => {
+  //   eventsEmit?.('retrive_tag:click', { file: file_name, tag });
+  // };
+
+  const downloadFile = async () => {
+    if (url) {
+      const _url: any = dealMinioUrl(url.indexOf('http') > -1 ? url : `${TempBaseUrl}/${url}`);
+      const fileExt = fileType.toLowerCase();
+      if (fileExt === 'json') {
+        try {
+          const response = await fetch(_url);
+          if (!response.ok) throw new Error('下载失败');
+          const blob = await response.blob();
+          const link = document.createElement('a');
+          link.href = URL.createObjectURL(blob);
+          link.download = file_name || '';
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          setTimeout(() => URL.revokeObjectURL(link.href), 1000);
+        } catch (e) {
+          alert('文件下载失败');
+        }
+        return;
+      }
+      const link = document.createElement('a');
+      link.href = _url;
+      link.download = file_name || '';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  };
+
+  // 只支持下载的文件类型
+  //const onlyDownloadTypes = onlyDownloadTypes ||  ['xlsx', 'csv', 'xls', 'ppt', 'pptx', 'pub', 'json', 'doc', 'docx'];
+  if (onlyDownloadTypes && onlyDownloadTypes.includes(fileType.toLowerCase())) {
+    return (
+      <div
+        key={file_name}
+        className="user-file relative group w-24 h-24 flex flex-col items-center justify-center cursor-pointer backdrop-blur-sm rounded-lg border p-2 text-sm transition-all"
+        title={file_name}
+        onClick={downloadFile}
+        style={{ borderColor: styles?.theme?.colors?.border }}
+      >
+        {icon}
+        <span
+          className="file-name font-medium truncate text-center px-2 pt-1"
+          style={{ fontSize: 10, maxWidth: '5.5rem' }}
+        >
+          {file_name}
+        </span>
+        <div className="absolute text-center inset-0 cursor-pointer bg-transparent group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center rounded-lg">
+          <div className="flex flex-col items-center text-xs justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity">
+            <FolderUp className="text-white opacity-0 group-hover:opacity-100 transition-opacity mx-auto" />
+            <div className="text-white text-center" style={{ fontSize: 10 }}>
+              下载文件
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // 判断是否为图片类型：同时检查 file_type 和 fileType（从文件名提取）
+  const isImageType =
+    file_type === 'image' ||
+    file_type === 'jpg' ||
+    file_type === 'jpeg' ||
+    file_type === 'png' ||
+    file_type === 'gif' ||
+    file_type === 'bmp' ||
+    file_type === 'webp' ||
+    fileType === 'image' ||
+    fileType === 'jpg' ||
+    fileType === 'jpeg' ||
+    fileType === 'png' ||
+    fileType === 'gif' ||
+    fileType === 'bmp' ||
+    fileType === 'webp';
+
+  if (isImageType) {
+    return (
+      <div
+        key={file_name}
+        className="relative group w-24 h-24 cursor-pointer flex items-center justify-center"
+        onClick={() => handleReferenceClick()}
+      >
+        {url ? (
+          <img
+            src={String(
+              url && (url.indexOf('http://') > -1 || url.indexOf('https://') > -1)
+                ? url
+                : dealMinioUrl(`${TempBaseUrl}/${url}`) || ''
+            )}
+            alt={file_name || ''}
+            className="w-full h-full object-cover rounded-md border"
+            style={{ borderColor: styles?.theme?.colors?.border }}
+            onError={(e) => {
+              // 如果图片加载失败，尝试使用原始 URL
+              const target = e.target as HTMLImageElement;
+              if (target.src !== url) {
+                target.src = url;
+              }
+            }}
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center">
+            <span className="animate-spin rounded-full border-2 border-gray-300 border-t-blue-500 w-8 h-8 inline-block"></span>
+          </div>
+        )}
+        <div className="absolute inset-0 bg-transparent group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center rounded-md">
+          <div className="flex flex-col items-center text-xs justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity">
+            <Eye className="text-white opacity-0 group-hover:opacity-100 transition-opacity mx-auto" />
+            <div className="text-white text-center">查看图片</div>
+          </div>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div
+        key={file_name}
+        className="user-file relative group w-24 h-24 flex flex-col items-center justify-center cursor-pointer backdrop-blur-sm rounded-lg border p-2 text-sm transition-all"
+        title={file_name}
+        onClick={handleReferenceClick}
+        style={{ borderColor: styles?.theme?.colors?.border }}
+      >
+        {icon}
+        <span
+          className="file-name font-medium truncate text-center px-2 pt-1"
+          style={{ fontSize: 10, maxWidth: '5.5rem' }}
+        >
+          {file_name}
+        </span>
+        <div className="absolute text-center inset-0 cursor-pointer bg-transparent group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center rounded-lg">
+          <div className="flex flex-col items-center text-xs justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity">
+            <FolderUp className="text-white opacity-0 group-hover:opacity-100 transition-opacity mx-auto" />
+            <div className="text-white text-center" style={{ fontSize: 10 }}>
+              打开文件
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  //return (
+  // <div
+  //   className="flex items-center bg-white rounded-lg shadow-sm border border-gray-100 px-3 py-2 mb-2 min-w-[220px] max-w-[340px] hover:shadow-md hover:border-blue-200 transition cursor-pointer group"
+  //   style={{ gap: 12 }}
+  //   onClick={handleReferenceClick}
+  // >
+  //   <div className="flex-shrink-0">{icon}</div>
+  //   <div className="flex-1 min-w-0">
+  //     <div
+  //       className="font-medium text-[13px] text-gray-900 truncate group-hover:text-blue-600"
+  //       title={file_name}
+  //     >
+  //       {file_name}
+  //     </div>
+  //   </div>
+  //   {/* {parse_url && (
+  //     <a
+  //       href={parse_url}
+  //       target="_blank"
+  //       rel="noopener noreferrer"
+  //       className="ml-3 px-2 py-0.5 text-xs rounded border border-blue-100 bg-blue-50 text-blue-600 hover:bg-blue-100 hover:border-blue-300 transition"
+  //       onClick={e => { e.stopPropagation(); handleReferenceClick(); }}
+  //     >
+  //       下载
+  //     </a>
+  //   )} */}
+  // </div>
+
+  //);
+};
+
+export default ReferenceCard;

package/src/utils/gientechCommon/components/Messages/RetriveItem.tsx

@@ -0,0 +1,245 @@
+import React, { useState } from 'react';
+import { ArrowDownToLine, ArrowUpToLine, Download, Eye, MessageSquare } from 'lucide-react';
+import { getFileTypeIcon } from '../FileManager';
+import { Tooltip } from 'antd';
+
+// 定义召回文件类型
+interface Tag {
+  id: string;
+  index: string;
+  image_urls: string[];
+  fromtype: string;
+}
+
+interface RetriveFile {
+  file_id: string;
+  file_name: string;
+  file_type: string;
+  score: number;
+  tags: Tag[];
+  parsedFilePath?: string;
+}
+
+interface RetriveItemProps {
+  is_download?: string;
+  from?: string;
+  files: RetriveFile[];
+  onQa?: (file: RetriveFile) => void;
+  onPreview?: (file: RetriveFile) => void;
+  onDownload?: (file: RetriveFile) => void;
+  styles?: any;
+  onTagClick?: (tag: Tag, file: RetriveFile) => void;
+  eventsEmit?: (eventName: string, payload?: any) => void;
+}
+
+// const mockFiles: RetriveFile[] = [
+//   {
+//     file_id: '1',
+//     file_name: '测试文档1.pdf',
+//     file_type: 'pdf',
+//     score: 0.98,
+//     tags: [
+//       { id: 't1', name: '标签A' },
+//       { id: 't2', name: '标签B' },
+//     ],
+//   },
+//   {
+//     file_id: '2',
+//     file_name: '说明文档.docx',
+//     file_type: 'docx',
+//     score: 0.87,
+//     tags: [
+//       { id: 't3', name: '标签C' },
+//     ],
+//   },
+//   {
+//     file_id: '3',
+//     file_name: '图片示例.png',
+//     file_type: 'png',
+//     score: 0.92,
+//     tags: [
+//       { id: 't4', name: '图片标签' },
+//     ],
+//   },
+// ];
+
+const getThemeColor = (styles: any, key: string, fallback: string) =>
+  styles?.theme?.colors?.[key] || fallback;
+
+const RetriveItem: React.FC<RetriveItemProps> = ({
+  files,
+  onQa,
+  onPreview,
+  onDownload,
+  styles,
+  onTagClick,
+  eventsEmit,
+  from,
+  is_download,
+}) => {
+  // 主题色
+  const borderColor = getThemeColor(styles, 'border', '#F2F3F5');
+  const bgHover = getThemeColor(styles, 'background', '#F5F6FA');
+  const textColor = getThemeColor(styles, 'text', '#1F2329');
+  const disabledText = getThemeColor(styles, 'disabledText', '#8F959E');
+
+  const btnHover = getThemeColor(styles, 'btnHover', '#E5E6EB');
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="w-full">
+      <ul className="divide-y divide-gray-50 flex flex-col gap-2">
+        {(open ? files : files.slice(0, 2)).map((file: RetriveFile, idx: number) => {
+          return (
+            <li
+              key={file.parsedFilePath || file.file_id + '-' + idx}
+              className="flex items-center px-3 py-2 group transition"
+              style={{
+                minHeight: 32,
+                border: 'none',
+                borderRadius: 6,
+                cursor: 'default',
+                background: undefined,
+              }}
+              onMouseEnter={e => (e.currentTarget.style.background = bgHover)}
+              onMouseLeave={e => (e.currentTarget.style.background = '')}
+            >
+              {/* 文件icon+文件名 */}
+              <div className="flex items-center min-w-0 flex-1">
+                {getFileTypeIcon(file.file_type, styles)}
+                <Tooltip title={file.file_name}>
+                  <span
+                    className="font-medium text-sm ml-2 truncate max-w-[300px]"
+                    title={file.file_name}
+                    style={{ color: textColor }}
+                  >
+                    {file.file_name}
+                  </span>
+                </Tooltip>
+              </div>
+              {/* 分数+标签 */}
+              <div className="flex items-center gap-x-1 min-w-[120px] ml-4">
+                {(() => {
+                  // tags去重并排序
+                  const seen = new Set();
+                  const uniqueSortedTags = (file.tags || [])
+                    .filter(tag => {
+                      if (seen.has(tag.id)) return false;
+                      //  console.log(tag,'tag')
+                      seen.add(tag.id);
+                      return true;
+                    })
+                    .sort((a, b) => Number(a.index) - Number(b.index));
+                  return uniqueSortedTags.map(tag => (
+                    <span
+                      className="cursor-pointer"
+                      key={tag.id}
+                      style={{
+                        display: 'inline-block',
+                        background: '#e6f7ff',
+                        color: '#1890ff',
+                        border: '1px solid rgba(114,187,255,0.3)',
+                        borderRadius: 6,
+                        padding: '1px 6px',
+                        margin: '0 2px',
+                        fontWeight: 600,
+                        fontSize: 12,
+                        lineHeight: '17px',
+                        verticalAlign: 'middle',
+                      }}
+                      onClick={e => {
+                        e.stopPropagation();
+                        onTagClick?.({ ...tag, fromtype: '0' }, file);
+                      }}
+                      onMouseEnter={e => (e.currentTarget.style.background = '#bae7ff')}
+                      onMouseLeave={e => (e.currentTarget.style.background = '#e6f7ff')}
+                    >
+                      {tag.index}
+                    </span>
+                  ));
+                })()}
+                <span
+                  className="text-xs px-5 border-r border-solid border-gray-300  ml-2"
+                  style={{ color: disabledText }}
+                >
+                  分数: {Number(file.score).toFixed(2)}
+                </span>
+              </div>
+              {/* 操作按钮组 */}
+              <div className="flex pl-5 items-center gap-1 ml-auto">
+                {from !== 'headless' && (
+                  <Tooltip title="单文档问答" placement="top">
+                    <button
+                      onClick={() => {
+                        onQa?.(file);
+                        eventsEmit?.('referenceFile_question', { data: file, is_download });
+                      }}
+                      className="flex cursor-pointer items-center justify-center w-8 h-8 rounded transition group"
+                      style={{ outline: 'none', border: 'none', background: 'none' }}
+                      onMouseEnter={e => (e.currentTarget.style.background = btnHover)}
+                      onMouseLeave={e => (e.currentTarget.style.background = 'none')}
+                    >
+                      <MessageSquare className="w-4 h-4" style={{ color: disabledText }} />
+                    </button>
+                  </Tooltip>
+                )}
+
+                <Tooltip title="预览" placement="top">
+                  <button
+                    onClick={() => {
+                      onPreview?.(file);
+                      eventsEmit?.('referenceFile_view', { data: file });
+                    }}
+                    className="flex cursor-pointer items-center justify-center w-8 h-8 rounded transition group"
+                    style={{ outline: 'none', border: 'none', background: 'none' }}
+                    onMouseEnter={e => (e.currentTarget.style.background = btnHover)}
+                    onMouseLeave={e => (e.currentTarget.style.background = 'none')}
+                  >
+                    <Eye className="w-4 h-4" style={{ color: disabledText }} />
+                  </button>
+                </Tooltip>
+                {from !== 'headless' && (
+                  <Tooltip title={is_download ? '下载' : '无权限下载'} placement="top">
+                    <button
+                      onClick={() => {
+                        onDownload?.(file);
+                        eventsEmit?.('referenceFile_download', { data: file });
+                      }}
+                      disabled={!is_download}
+                      className="flex items-center justify-center w-8 h-8 rounded transition group"
+                      style={{
+                        outline: 'none',
+                        border: 'none',
+                        background: 'none',
+                        cursor: is_download ? 'pointer' : 'not-allowed',
+                      }}
+                      onMouseEnter={e => (e.currentTarget.style.background = btnHover)}
+                      onMouseLeave={e => (e.currentTarget.style.background = 'none')}
+                    >
+                      <Download className="w-4 h-4" style={{ color: disabledText }} />
+                    </button>
+                  </Tooltip>
+                )}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+      {files?.length > 2 && (
+        <div
+          className="w-full flex justify-center mt-[8px]"
+          onClick={() => {
+            setOpen(!open);
+          }}
+        >
+          {open ? (
+            <ArrowUpToLine className="cursor-pointer w-[16px] text-[#555]" />
+          ) : (
+            <ArrowDownToLine className="cursor-pointer w-[16px] text-[#555]" />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RetriveItem;