@mxmweb/aichat 1.1.7 → 1.1.8

package/src/components/Sender/FileUpload.tsx

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

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

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

@@ -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;
+};