@mxmweb/aichat 1.1.8 → 1.2.0

package/src/components/Sender/FileUpload.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import { X, Image as ImageIcon, FileText } from 'lucide-react';
-
-interface FilePreview {
-  file: File;
-  preview?: string;
-  type: 'image' | 'document';
-}
-
-interface FileUploadProps {
-  uploadedFiles: FilePreview[];
-  onUpload?: (files: FileList) => void;
-  onRemoveFile?: (index: number) => void;
-}
-
-export default function FileUpload({ uploadedFiles, onUpload, onRemoveFile }: 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' ? (
-                <>
-                {file.type}
-                  <div className="w-8 h-8 rounded overflow-hidden">
-                    <img src={file.preview} alt="" className="w-full h-full object-cover" />
-                  </div>
-                  <ImageIcon className="absolute top-2 left-2 w-4 h-4 text-white drop-shadow" />
-                </>
-              ) : (
-                <>
-                  {file.type}
-                  <FileText className="w-5 h-5 text-gray-600/85" />
-                </>
-              )}
-              <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>
-        <svg className="w-[17px] h-[17px] text-gray-600/85" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M16.5 9.4V7A4.5 4.5 0 0 0 12 2.5h0A4.5 4.5 0 0 0 7.5 7v2.4M12 17v-5m0 0-2 2m2-2 2 2" strokeLinecap="round" strokeLinejoin="round"/><rect width="20" height="20" x="2" y="2" rx="5"/></svg>
-      </label>
-    </>
-  );
-}

package/src/components/Sender/FilesDisplay.tsx

@@ -1,103 +0,0 @@
-import { X, Image, FileText, Loader2, CheckCircle2, AlertCircle } from "lucide-react";
-import { useEffect } from "react";
-import anime from 'animejs';
-import { getFileTypeIcon } from "../../adopters/gientechCommon/components/FileManager";
-import FileCardCommon from '../common/FileCardCommon';
-
-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;
-}
-
-export default function FilesDisplay({ uploadedFiles, onRemoveFile, eventsEmit,styles }: { uploadedFiles: FilePreview[], onRemoveFile: (idx: number) => void, eventsEmit?: (eventName: string) => void,styles?: any }) {
-  useEffect(() => {
-    console.log('uploadedFiles,status', uploadedFiles);
-  }, [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]);
-
-  return (
-    <div className="flex overflow-x-auto gap-2 pb-2 px-1">
-      {uploadedFiles.map((fileObj, idx) => {
-        // 优先使用 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';
-        }
-
-        // 文件大小格式化
-        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'];
-        const fileType = fileName.split('.').pop() || '';
-        const icon = getFileTypeIcon(fileType, styles);
-        return (
-          <FileCardCommon
-            key={fileName + idx}
-            cardId={`file-card-${idx}`}
-            fileName={fileName}
-            fileSize={fileSize}
-            icon={icon}
-            statusText={currentStatus.text}
-            statusColor={currentStatus.color}
-            statusIcon={currentStatus.icon}
-            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>
-  )
-}

package/src/components/Sender/VoiceInput.tsx

@@ -1,81 +0,0 @@
-import React, { 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/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;
-};