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

package/src/modules/chatCompare/components/Sender/FileUpload.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import { X } from 'lucide-react';
-import { Icon } from '@mxmweb/zui';
-import { getFileTypeIcon } from './fileIcon';
-
-interface FilePreview {
-  file: File;
-  preview?: string;
-  type: 'image' | 'document';
-}
-
-interface FileUploadProps {
-  uploadedFiles: FilePreview[];
-  onUpload?: (files: FileList) => void;
-  onRemoveFile?: (index: number) => void;
-  styles?: any; // 支持自定义图标配置
-}
-
-export default function FileUpload({
-  uploadedFiles,
-  onUpload,
-  onRemoveFile,
-  styles,
-}: FileUploadProps) {
-  const fileInputRef = React.useRef<HTMLInputElement>(null);
-
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files.length > 0) {
-      onUpload?.(e.target.files);
-    }
-  };
-
-  return (
-    <>
-      {uploadedFiles && uploadedFiles.length > 0 && (
-        <div className="mb-2 flex flex-wrap gap-2">
-          {uploadedFiles.map((file, index) => (
-            <div
-              key={index}
-              className="relative group bg-white/80 backdrop-blur-sm rounded-lg p-2 flex items-center gap-2 border border-gray-200/50 shadow-sm"
-            >
-              {file.type === 'image' ? (
-                <>
-                  <div className="w-8 h-8 rounded overflow-hidden">
-                    <img src={file.preview} alt="" className="w-full h-full object-cover" />
-                  </div>
-                  <span className="absolute top-2 left-2 w-4 h-4 text-white drop-shadow">
-                    <Icon type="rag/pic" size={14} />
-                  </span>
-                </>
-              ) : (
-                <>
-                  {(() => {
-                    const ext = (file.file?.name || '').split('.').pop() || 'file';
-                    const icon = getFileTypeIcon(ext, styles);
-                    return icon;
-                  })()}
-                </>
-              )}
-              <span className="text-xs text-gray-700 max-w-[120px] truncate">{file.file.name}</span>
-              <button
-                onClick={() => onRemoveFile?.(index)}
-                className="absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-gray-500/90 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-gray-600"
-              >
-                <X className="w-3 h-3" />
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-      <input
-        ref={fileInputRef}
-        type="file"
-        multiple
-        className="hidden"
-        id="file-upload"
-        onChange={handleFileSelect}
-      />
-      <label
-        htmlFor="file-upload"
-        className="relative w-7 h-7 flex items-center justify-center rounded-lg cursor-pointer group"
-      >
-        <div className="absolute inset-0 bg-black/[0.02] rounded-lg group-hover:bg-black/[0.04] transition-colors duration-200"></div>
-        {/* 注意：文件夹图标暂时使用 rag/folder，因为 Files/ 系列中没有对应的文件夹图标 */}
-        <Icon type="rag/folder" size={17} />
-      </label>
-    </>
-  );
-}

package/src/modules/chatCompare/components/Sender/FilesDisplay.tsx

@@ -1,309 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Loader2, CheckCircle2, AlertCircle, ChevronLeft, ChevronRight } from 'lucide-react';
-import anime from 'animejs';
-import FileCardCommon from './FileCardCommon';
-import { getFileTypeIcon } from './fileIcon';
-
-interface FilePreview {
-  file: File;
-  preview?: string;
-  type: 'image' | 'document';
-  status?: 'pending' | 'uploading' | 'parsing' | 'done' | 'error' | 'finished';
-  name?: string; // name 和 uid 可能是从 fileUploadStatus 传来的
-  uid?: string;
-  styles?: any;
-}
-
-// 图片预览图标组件，支持错误回退
-const ImagePreviewIcon: React.FC<{
-  src: string;
-  alt: string;
-  fallback: React.ReactNode;
-  onError?: () => void;
-}> = ({ src, alt, fallback, onError }) => {
-  const [hasError, setHasError] = useState(false);
-
-  if (hasError) {
-    // 如果预览图加载失败，显示回退图标
-    return (
-      <div
-        style={{
-          width: 24,
-          height: 24,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        {fallback}
-      </div>
-    );
-  }
-
-  return (
-    <img
-      src={src}
-      alt={alt}
-      style={{
-        width: 24,
-        height: 24,
-        objectFit: 'cover',
-        borderRadius: '4px',
-      }}
-      onError={() => {
-        setHasError(true);
-        onError?.();
-      }}
-    />
-  );
-};
-
-export default function FilesDisplay({
-  uploadedFiles,
-  onRemoveFile,
-  eventsEmit,
-  styles,
-}: {
-  uploadedFiles: FilePreview[];
-  onRemoveFile: (idx: number) => void;
-  eventsEmit?: (eventName: string) => void;
-  styles?: any;
-}) {
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
-  const [canScrollRight, setCanScrollRight] = useState(false);
-
-  // 检查滚动状态
-  const checkScrollability = () => {
-    const container = scrollContainerRef.current;
-    if (!container) return;
-
-    const { scrollLeft, scrollWidth, clientWidth } = container;
-    setCanScrollLeft(scrollLeft > 0);
-    setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1);
-  };
-
-  // 监听滚动事件和文件列表变化
-  useEffect(() => {
-    const container = scrollContainerRef.current;
-    if (!container) return;
-
-    // 延迟检查，确保 DOM 已更新
-    const timeoutId = setTimeout(() => {
-      checkScrollability();
-    }, 0);
-
-    container.addEventListener('scroll', checkScrollability);
-
-    // 监听窗口大小变化
-    const resizeObserver = new ResizeObserver(() => {
-      checkScrollability();
-    });
-    resizeObserver.observe(container);
-
-    return () => {
-      clearTimeout(timeoutId);
-      container.removeEventListener('scroll', checkScrollability);
-      resizeObserver.disconnect();
-    };
-  }, [uploadedFiles]);
-
-  // 滚动函数
-  const scroll = (direction: 'left' | 'right') => {
-    const container = scrollContainerRef.current;
-    if (!container) return;
-
-    const scrollAmount = 200; // 每次滚动200px
-    const currentScroll = container.scrollLeft;
-    const newScroll =
-      direction === 'left' ? currentScroll - scrollAmount : currentScroll + scrollAmount;
-
-    container.scrollTo({
-      left: newScroll,
-      behavior: 'smooth',
-    });
-  };
-
-  // 顶层 useEffect，调试所有文件的 status
-  useEffect(() => {
-    uploadedFiles.forEach((fileObj, idx) => {
-      if (!fileObj) return;
-      console.log('FilesDisplay currentStatus', fileObj.status);
-    });
-  }, [uploadedFiles]);
-
-  useEffect(() => {
-    // 检查是否所有文件都完成了它们的生命周期，准备离场
-    const allFinished =
-      uploadedFiles.length > 0 && uploadedFiles.every(f => f.status === 'finished');
-    if (allFinished) {
-      anime({
-        targets: '.file-display-card', // 使用class选择器来选中所有卡片
-        opacity: 0,
-        scale: 0.8,
-        delay: anime.stagger(100), // 每个卡片依次延迟100ms播放动画
-        duration: 400,
-        easing: 'easeOutExpo',
-        complete: () => {
-          // 所有动画完成后，通知上层组件可以清空state了
-          eventsEmit?.('files:finished_animation_complete');
-        },
-      });
-    }
-  }, [uploadedFiles, eventsEmit]);
-
-  const borderColor = styles?.theme?.colors?.border || '#dee2e6';
-  const disabledColor = styles?.theme?.colors?.disabled || '#808080';
-
-  return (
-    <div className="flex items-center w-full gap-2">
-      {/* 左侧滚动按钮 */}
-      {canScrollLeft ? (
-        <button
-          onClick={() => scroll('left')}
-          className="shrink-0 w-7 h-7 rounded-full bg-white shadow-sm border flex items-center justify-center hover:bg-gray-50 hover:shadow-md transition-all cursor-pointer"
-          style={{
-            borderColor: borderColor,
-            borderWidth: '1px',
-          }}
-          aria-label="向左滚动"
-        >
-          <ChevronLeft size={16} style={{ color: disabledColor }} />
-        </button>
-      ) : (
-        <div className="shrink-0 w-0" />
-      )}
-
-      {/* 文件列表容器 */}
-      <div
-        ref={scrollContainerRef}
-        className="flex-1 flex overflow-x-auto gap-3 pb-[0.5px] files-display-scroll"
-        style={{
-          scrollbarWidth: 'none', // Firefox - 完全隐藏
-          scrollbarColor: 'transparent transparent', // Firefox
-        }}
-      >
-        {uploadedFiles.filter(Boolean).map((fileObj, idx) => {
-          if (!fileObj || !fileObj.file) return null;
-          // 优先使用 fileObj.name，其次是 fileObj.file.name
-          const fileName = fileObj.name || fileObj.file.name;
-          const fileSize = fileObj.file?.size;
-          let { type, status } = fileObj;
-
-          // 如果是finished状态，UI上表现为done状态
-          if (status === 'finished') {
-            status = 'done';
-          }
-
-          // 生成唯一的 key：使用文件名 + 大小 + 索引 + 时间戳（如果有 uid 则使用 uid）
-          const uniqueKey =
-            fileObj.uid ||
-            `${fileName}-${fileSize}-${idx}-${fileObj.file.lastModified || Date.now()}`;
-
-          // 文件大小格式化
-          const formatSize = (size: number) => {
-            if (!size) return '';
-            if (size < 1024) return `${size}B`;
-            if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)}KB`;
-            return `${(size / 1024 / 1024).toFixed(1)}MB`;
-          };
-
-          // 状态映射
-          const statusMap: {
-            [key: string]: { text: string; icon: React.ReactNode; color: string };
-          } = {
-            pending: { text: '待发送', icon: null, color: 'text-gray-400' },
-            uploading: {
-              text: '上传中',
-              icon: <Loader2 className="w-3 h-3 animate-spin" />,
-              color: 'text-blue-500',
-            },
-            parsing: {
-              text: '解析中',
-              icon: <Loader2 className="w-3 h-3 animate-spin" />,
-              color: 'text-blue-500',
-            },
-            done: {
-              text: '已就绪',
-              icon: <CheckCircle2 className="w-3 h-3" />,
-              color: 'text-green-500',
-            },
-            error: {
-              text: '失败',
-              icon: <AlertCircle className="w-3 h-3" />,
-              color: 'text-red-500',
-            },
-          };
-          const currentStatus = statusMap[status || 'pending'] || {
-            text: '未知',
-            icon: null,
-            color: 'text-gray-400',
-          };
-
-          // 获取文件扩展名（转换为小写）
-          const fileType = fileName.split('.').pop()?.toLowerCase() || '';
-
-          // 获取文件类型图标（优先使用扩展名判断，而不是 type 字段）
-          // 如果 fileType 为空，使用 'unknow' 作为默认类型
-          const defaultIcon = getFileTypeIcon(fileType || 'unknow', styles);
-
-          // 只有当文件扩展名明确是图片类型，且有预览图时，才显示预览图
-          // 这样可以避免非图片文件被错误识别为图片类型
-          const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico'];
-          const isImageFile = imageExtensions.includes(fileType);
-          const isImage = isImageFile && type === 'image' && fileObj.preview;
-
-          const icon = isImage ? (
-            <ImagePreviewIcon src={fileObj.preview!} alt={fileName} fallback={defaultIcon} />
-          ) : (
-            defaultIcon
-          );
-
-          return (
-            <FileCardCommon
-              key={uniqueKey}
-              cardId={`file-card-${idx}`}
-              fileName={fileName}
-              fileSize={fileSize}
-              icon={icon}
-              statusText={currentStatus.text || '未知'}
-              statusColor={currentStatus.color || 'text-gray-400'}
-              statusIcon={currentStatus.icon || null}
-              showRemove={status !== 'parsing' && status !== 'uploading'}
-              onRemoveWithAnim={id => {
-                anime({
-                  targets: `#${id}`,
-                  opacity: 0,
-                  scale: 0.8,
-                  duration: 300,
-                  easing: 'easeOutExpo',
-                  complete: () => {
-                    onRemoveFile?.(idx);
-                  },
-                });
-              }}
-              themeColors={styles?.theme?.colors}
-            />
-          );
-        })}
-      </div>
-
-      {/* 右侧滚动按钮 */}
-      {canScrollRight ? (
-        <button
-          onClick={() => scroll('right')}
-          className="shrink-0 w-7 h-7 rounded-full bg-white shadow-sm border flex items-center justify-center hover:bg-gray-50 hover:shadow-md transition-all cursor-pointer"
-          style={{
-            borderColor: borderColor,
-            borderWidth: '1px',
-          }}
-          aria-label="向右滚动"
-        >
-          <ChevronRight size={16} style={{ color: disabledColor }} />
-        </button>
-      ) : (
-        <div className="shrink-0 w-0" />
-      )}
-    </div>
-  );
-}

package/src/modules/chatCompare/components/Sender/VoiceInput.tsx

@@ -1,80 +0,0 @@
-import { useEffect } from 'react';
-import { Mic } from 'lucide-react';
-import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
-
-interface VoiceInputProps {
-  onResult: (text: string) => void;
-  onError?: (error: string) => void;
-}
-
-export default function VoiceInput({ onResult, onError }: VoiceInputProps) {
-  const {
-    transcript,
-    listening,
-    resetTranscript,
-    browserSupportsSpeechRecognition,
-    isMicrophoneAvailable,
-  } = useSpeechRecognition();
-
-  useEffect(() => {
-    console.log(transcript, 'transcript');
-    if (transcript) {
-      onResult(transcript);
-    }
-  }, [transcript, onResult]);
-
-  useEffect(() => {
-    if (!browserSupportsSpeechRecognition) {
-      onError && onError('您的浏览器不支持语音识别功能');
-    } else if (!isMicrophoneAvailable) {
-      onError && onError('无法访问麦克风，请检查权限设置');
-    }
-  }, [browserSupportsSpeechRecognition, isMicrophoneAvailable, onError]);
-
-  const toggleRecording = () => {
-    if (!browserSupportsSpeechRecognition) {
-      console.log(SpeechRecognition, '您的浏览器不支持语音识别功能');
-      onError && onError('您的浏览器不支持语音识别功能');
-      return;
-    }
-    if (!isMicrophoneAvailable) {
-      console.log(SpeechRecognition, '无法访问麦克风，请检查权限设置');
-      onError && onError('无法访问麦克风，请检查权限设置');
-      return;
-    }
-    if (listening) {
-      console.log(SpeechRecognition, '停止录音');
-      SpeechRecognition.stopListening();
-    } else {
-      console.log(SpeechRecognition, '开始录音');
-      resetTranscript();
-      SpeechRecognition.startListening({ continuous: true, language: 'zh-CN' });
-    }
-  };
-
-  return (
-    <div
-      className={`relative w-7 h-7 flex items-center justify-center rounded-lg cursor-pointer group ${listening ? 'bg-blue-50' : ''}`}
-      onClick={toggleRecording}
-      title={listening ? '点击停止录音' : '点击开始录音'}
-    >
-      <div
-        className={`absolute inset-0 rounded-lg transition-colors duration-200 ${
-          listening ? 'bg-blue-100' : 'bg-black/[0.02] group-hover:bg-black/[0.04]'
-        }`}
-      ></div>
-      {!listening ? (
-        <Mic className="w-[17px] h-[17px] text-gray-600/85" />
-      ) : (
-        <span className="relative w-[17px] h-[17px] flex items-center justify-center">
-          <span className="absolute inset-0 flex items-center justify-center">
-            <span className="group-hover:hidden w-[17px] h-[17px] rounded-full bg-red-500 animate-pulse"></span>
-            <span className="hidden group-hover:flex items-center justify-center">
-              <span className="w-[13px] h-[13px] bg-red-500 rounded-[3px]"></span>
-            </span>
-          </span>
-        </span>
-      )}
-    </div>
-  );
-}

package/src/modules/chatCompare/components/Sender/contexts/BadgeContext.tsx

@@ -1,36 +0,0 @@
-import React, { createContext, useContext, useState } from 'react';
-
-interface BadgeContextType {
-  badgeCounts: Record<string, number>;
-  updateBadgeCount: (name: string, count: number) => void;
-}
-
-const BadgeContext = createContext<BadgeContextType>({
-  badgeCounts: {},
-  updateBadgeCount: () => {},
-});
-
-export const BadgeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [badgeCounts, setBadgeCounts] = useState<Record<string, number>>({});
-
-  const updateBadgeCount = (name: string, count: number) => {
-    setBadgeCounts(prev => ({
-      ...prev,
-      [name]: count,
-    }));
-  };
-
-  return (
-    <BadgeContext.Provider value={{ badgeCounts, updateBadgeCount }}>
-      {children}
-    </BadgeContext.Provider>
-  );
-};
-
-export const useBadge = () => {
-  const context = useContext(BadgeContext);
-  if (!context) {
-    throw new Error('useBadge must be used within a BadgeProvider');
-  }
-  return context;
-};

package/src/modules/chatCompare/components/Sender/fileIcon.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import { Icon } from '@mxmweb/zui';
-
-/**
- * 文件类型图标获取函数
- * 优先使用用户传入的 styles.theme.icons，如果没有配置则使用 zui-icon 的默认图标
- * 支持两种形式的自定义图标：
- * 1. React 组件形式：<Icon type="rag/pdf" size={18} />
- * 2. 图片路径形式：字符串 URL
- * 默认图标使用 rag/xxx 格式的图标系统
- * @param type 文件类型（如 'pdf', 'docx', 'jpg' 等）
- * @param styles 样式配置对象，可包含 theme.icons 自定义图标
- * @returns React.ReactNode 图标组件
- */
-export function getFileTypeIcon(type: string, styles?: any): React.ReactNode {
-  const icons = styles?.theme?.icons || {};
-
-  /**
-   * 获取图标辅助函数
-   * 优先使用用户配置的图标，支持 React 组件和图片路径两种形式
-   */
-  const getIcon = (iconKey: string, defaultIconType: string, fallbackKeys?: string[]): React.ReactNode => {
-    // 尝试从配置中获取图标（支持多个可能的键名）
-    const iconKeys = [iconKey, ...(fallbackKeys || [])];
-    for (const key of iconKeys) {
-      const customIcon = icons[key];
-      if (customIcon) {
-        // 如果是 React 元素（组件），直接返回
-        if (React.isValidElement(customIcon)) {
-          return customIcon;
-        }
-        // 如果是字符串（图片路径），返回 img 标签
-        if (typeof customIcon === 'string') {
-          return <img src={customIcon} alt={key} style={{ width: 20, height: 20 }} />;
-        }
-      }
-    }
-    // 如果没有配置，使用默认图标
-    return <Icon type={defaultIconType} size={18} />;
-  };
-
-  switch (type.toLowerCase()) {
-    case 'docx':
-    case 'doc':
-      return getIcon('docx', 'rag/word', ['doc']);
-    case 'image':
-    case 'jpg':
-    case 'jpeg':
-    case 'png':
-    case 'gif':
-    case 'bmp':
-    case 'webp':
-    case 'svg':
-    case 'ico':
-      return getIcon('image', 'rag/pic', ['png', 'jpg', 'jpeg']);
-    case 'pptx':
-    case 'ppt':
-      return getIcon('pptx', 'rag/ppt', ['ppt']);
-    case 'sheets':
-    case 'excel':
-    case 'xls':
-    case 'xlsx':
-    case 'xlsm':
-    case 'xlsb':
-    case 'xltx':
-    case 'xltm':
-    case 'xlt':
-    case 'xlam':
-      if (type.toLowerCase() === 'csv') {
-        return getIcon('csv', 'rag/csv', ['sheets', 'excel']);
-      }
-      return getIcon('sheets', 'rag/excel', ['excel', 'xls', 'xlsx']);
-    case 'pdf':
-      return getIcon('pdf', 'rag/pdf');
-    case 'txt':
-      return getIcon('txt', 'rag/txt');
-    case 'md':
-      return getIcon('md', 'rag/txt', ['txt']);
-    case 'json':
-      return getIcon('json', 'rag/json');
-    case 'html':
-    case 'htm':
-    case 'url':
-      return getIcon('html', 'rag/url', ['htm', 'url']);
-    case 'zip':
-    case 'rar':
-    case '7z':
-      return getIcon('archive', 'rag/zip', ['zip', 'rar']);
-    case 'odt':
-    case 'ods':
-    case 'odp':
-    case 'odf':
-      return getIcon('odt', 'rag/odf');
-    case 'xml':
-      return getIcon('xml', 'rag/file');
-    default:
-      // 默认使用 zui-icon 的未知文件类型图标
-      return <Icon type='rag/file' size={18} />;
-  }
-}