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

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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,309 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,100 @@
+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} />;
+  }
+}