Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -1,347 +1,362 @@
-import React, { useState } from 'react';
-import { Button } from './ui/button';
-import { 
-  Copy, 
-  ThumbsUp, 
-  ThumbsDown, 
-  ChevronDown, 
-  ChevronUp,
-  Check,
-  Bot,
-  X
-} from 'lucide-react';
-import { Badge } from './ui/badge';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
-import { Textarea } from './ui/textarea';
-import type { Message as MessageType } from '../App';
-import { toast } from 'sonner';
-import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
-
-interface MessageProps {
-  key?: React.Key;
-  message: MessageType;
-  showSenderInfo?: boolean; // For group chat mode
-  isFirstGreeting?: boolean; // Indicates if this is the first greeting message
-  showNextButton?: boolean; // For quiz mode
-  onNextQuestion?: () => void; // For quiz mode
-  chatMode?: 'ask' | 'review' | 'quiz'; // Current chat mode
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "./ui/button";
+import {
+  Upload,
+  File as FileIcon,
+  X,
+  FileText,
+  Presentation,
+  Image as ImageIcon,
+} from "lucide-react";
+import { Card } from "./ui/card";
+import { Badge } from "./ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import type { UploadedFile, FileType } from "../App";
+
+interface FileUploadAreaProps {
+  uploadedFiles: UploadedFile[];
+  onFileUpload: (files: File[]) => void;
+  onRemoveFile: (index: number) => void;
+  onFileTypeChange: (index: number, type: FileType) => void;
+  disabled?: boolean;
+}
+
+interface PendingFile {
+  file: File;
+  type: FileType;
+}
+
+const ACCEPT_EXTS = [".pdf", ".docx", ".pptx", ".png", ".jpg", ".jpeg", ".webp", ".gif"];
+const ACCEPT_ATTR = ".pdf,.docx,.pptx,.png,.jpg,.jpeg,.webp,.gif";
+
+function isImageFile(file: File) {
+  if (file.type?.startsWith("image/")) return true;
+  const n = file.name.toLowerCase();
+  return [".png", ".jpg", ".jpeg", ".webp", ".gif"].some((ext) => n.endsWith(ext));
+}
+
+function getFileIcon(filename: string) {
+  const lower = filename.toLowerCase();
+  if (lower.endsWith(".pdf")) return FileText;
+  if (lower.endsWith(".pptx")) return Presentation;
+  if (lower.endsWith(".docx")) return FileIcon;
+  if ([".png", ".jpg", ".jpeg", ".webp", ".gif"].some((ext) => lower.endsWith(ext)))
+    return ImageIcon;
+  return FileIcon;
 }
 
-// 反馈标签选项
-const FEEDBACK_TAGS = {
-  'not-helpful': [
-    'Code was incorrect',
-    "Shouldn't have used Memory",
-    "Don't like the personality",
-    "Don't like the style",
-    'Not factually correct',
-  ],
-  'helpful': [
-    'Accurate and helpful',
-    'Clear explanation',
-    'Good examples',
-    'Solved my problem',
-    'Well structured',
-  ],
-};
-
-export function Message({ 
-  message, 
-  showSenderInfo = false, 
-  isFirstGreeting = false,
-  showNextButton = false,
-  onNextQuestion,
-  chatMode = 'ask',
-}: MessageProps) {
-  const [feedback, setFeedback] = useState<'helpful' | 'not-helpful' | null>(null);
-  const [copied, setCopied] = useState(false);
-  const [referencesOpen, setReferencesOpen] = useState(false);
-  const [showFeedbackArea, setShowFeedbackArea] = useState(false);
-  const [feedbackType, setFeedbackType] = useState<'helpful' | 'not-helpful' | null>(null);
-  const [feedbackText, setFeedbackText] = useState('');
-  const [selectedTags, setSelectedTags] = useState<string[]>([]);
-  const [isHovered, setIsHovered] = useState(false);
-  const [nextButtonClicked, setNextButtonClicked] = useState(false);
-  
-  const isUser = message.role === 'user';
-  // For user messages: always show. For assistant messages: always show except first greeting (or review-1, quiz-1)
-  const isWelcomeMessage = isFirstGreeting || message.id === 'review-1' || message.id === 'quiz-1';
-  const shouldShowActions = isUser ? true : !isWelcomeMessage;
-
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(message.content);
-    setCopied(true);
-    toast.success('Message copied to clipboard');
-    setTimeout(() => setCopied(false), 2000);
+function formatFileSize(bytes: number) {
+  if (bytes < 1024) return bytes + " B";
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+}
+
+export function FileUploadArea({
+  uploadedFiles,
+  onFileUpload,
+  onRemoveFile,
+  onFileTypeChange,
+  disabled = false,
+}: FileUploadAreaProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);
+  const [showTypeDialog, setShowTypeDialog] = useState(false);
+
+  // ✅ objectURL cache（ref 不触发渲染，所以 URL 必须在 render 时按需创建）
+  const urlCacheRef = useRef<Map<string, string>>(new Map());
+
+  const fingerprint = (f: File) => `${f.name}::${f.size}::${f.lastModified}`;
+
+  const allFiles = useMemo(() => {
+    return [
+      ...uploadedFiles.map((u) => u.file),
+      ...pendingFiles.map((p) => p.file),
+    ];
+  }, [uploadedFiles, pendingFiles]);
+
+  // ✅ 当文件列表变化：revoke 掉不再需要的 url
+  useEffect(() => {
+    const need = new Set<string>();
+    for (const f of allFiles) {
+      if (!isImageFile(f)) continue;
+      need.add(fingerprint(f));
+    }
+
+    for (const [key, url] of urlCacheRef.current.entries()) {
+      if (!need.has(key)) {
+        try {
+          URL.revokeObjectURL(url);
+        } catch {
+          // ignore
+        }
+        urlCacheRef.current.delete(key);
+      }
+    }
+  }, [allFiles]);
+
+  // ✅ 卸载：全部 revoke
+  useEffect(() => {
+    return () => {
+      for (const url of urlCacheRef.current.values()) {
+        try {
+          URL.revokeObjectURL(url);
+        } catch {
+          // ignore
+        }
+      }
+      urlCacheRef.current.clear();
+    };
+  }, []);
+
+  // ✅ 关键：render 时同步 getOrCreate，这样第一次渲染就能拿到 src
+  const getOrCreatePreviewUrl = (file: File) => {
+    const key = fingerprint(file);
+    const existed = urlCacheRef.current.get(key);
+    if (existed) return existed;
+
+    const url = URL.createObjectURL(file);
+    urlCacheRef.current.set(key, url);
+    return url;
+  };
+
+  const filterSupportedFiles = (files: File[]) => {
+    return files.filter((file) => {
+      if (isImageFile(file)) return true;
+      const lower = file.name.toLowerCase();
+      return [".pdf", ".docx", ".pptx"].some((ext) => lower.endsWith(ext));
+    });
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    if (!disabled) setIsDragging(true);
   };
 
-  const handleFeedbackClick = (type: 'helpful' | 'not-helpful') => {
-    if (feedback === type) {
-      // 如果点击的是已选中的反馈，则关闭反馈区域
-      setFeedback(null);
-      setShowFeedbackArea(false);
-      setFeedbackType(null);
-      setFeedbackText('');
-      setSelectedTags([]);
-    } else {
-      // 立即设置反馈状态（按钮会立即显示颜色）
-      setFeedback(type);
-      // 打开反馈区域
-      setFeedbackType(type);
-      setShowFeedbackArea(true);
+  const handleDragLeave = () => setIsDragging(false);
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (disabled) return;
+
+    const files = filterSupportedFiles(Array.from(e.dataTransfer.files));
+    if (files.length > 0) {
+      setPendingFiles(files.map((file) => ({ file, type: "other" as FileType })));
+      setShowTypeDialog(true);
     }
   };
 
-  const handleFeedbackClose = () => {
-    setShowFeedbackArea(false);
-    setFeedbackType(null);
-    setFeedbackText('');
-    setSelectedTags([]);
-    // 注意：不重置 feedback，保持点赞/点踩的状态
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = filterSupportedFiles(Array.from(e.target.files || []));
+    if (files.length > 0) {
+      setPendingFiles(files.map((file) => ({ file, type: "other" as FileType })));
+      setShowTypeDialog(true);
+    }
+    e.target.value = "";
   };
 
-  const handleTagToggle = (tag: string) => {
-    setSelectedTags(prev => 
-      prev.includes(tag) 
-        ? prev.filter(t => t !== tag)
-        : [...prev, tag]
-    );
+  const handleConfirmUpload = () => {
+    onFileUpload(pendingFiles.map((pf) => pf.file));
+
+    const startIndex = uploadedFiles.length;
+    pendingFiles.forEach((pf, idx) => {
+      setTimeout(() => {
+        onFileTypeChange(startIndex + idx, pf.type);
+      }, 0);
+    });
+
+    setPendingFiles([]);
+    setShowTypeDialog(false);
   };
 
-  const handleFeedbackSubmit = () => {
-    // 这里可以发送反馈到后端
-    const feedbackData = {
-      type: feedbackType,
-      tags: selectedTags,
-      text: feedbackText,
-      messageId: message.id || message.content.substring(0, 50),
-    };
-    
-    console.log('Feedback submitted:', feedbackData);
-    toast.success('感谢您的反馈！');
-    handleFeedbackClose();
-    // 保持反馈状态（点赞/点踩）
+  const handleCancelUpload = () => {
+    setPendingFiles([]);
+    setShowTypeDialog(false);
   };
 
-  return (
-    <div className={`flex gap-2 ${isUser && !showSenderInfo ? 'justify-end' : 'justify-start'} px-4`}>
-      {/* Avatar */}
-      {showSenderInfo && message.sender ? (
-        <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
-          message.sender.isAI 
-            ? 'overflow-hidden bg-white' 
-            : 'overflow-hidden bg-white'
-        }`}>
-          {message.sender.isAI ? (
-            <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
-          ) : (
-            <img
-              src={
-                message.sender.avatar || 
-                `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(message.sender.email || message.sender.name)}`
-              }
-              alt={message.sender.name}
-              className="w-full h-full object-cover"
-            />
-          )}
-        </div>
-      ) : !isUser ? (
-        <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
-          <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
+  const handlePendingFileTypeChange = (index: number, type: FileType) => {
+    setPendingFiles((prev) => prev.map((pf, i) => (i === index ? { ...pf, type } : pf)));
+  };
+
+  const renderLeading = (file: File) => {
+    if (isImageFile(file)) {
+      const src = getOrCreatePreviewUrl(file);
+      return (
+        <div className="h-12 w-12 rounded-md overflow-hidden bg-background border border-border flex-shrink-0">
+          <img
+            src={src}
+            alt={file.name}
+            className="h-full w-full object-cover"
+            draggable={false}
+          />
         </div>
-      ) : null}
+      );
+    }
 
-      <div 
-        className={`group flex flex-col gap-2 ${isUser && !showSenderInfo ? 'items-end' : 'items-start'}`}
-        style={{ maxWidth: 'min(770px, calc(100% - 2rem))' }}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        {/* Sender name in group chat */}
-        {showSenderInfo && message.sender && (
-          <div className="flex items-center gap-2 px-1">
-            <span className="text-xs">{message.sender.name}</span>
-            {message.sender.isAI && (
-              <Badge variant="secondary" className="text-xs h-4 px-1">AI</Badge>
-            )}
-          </div>
+    const Icon = getFileIcon(file.name);
+    return <Icon className="h-5 w-5 text-muted-foreground flex-shrink-0" />;
+  };
+
+  return (
+    <Card className="p-4 space-y-3">
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm">Course Materials</h4>
+        {uploadedFiles.length > 0 && (
+          <Badge variant="secondary">{uploadedFiles.length} file(s)</Badge>
         )}
+      </div>
 
-        <div
-          className={`
-            rounded-2xl px-4 py-3
-            ${isUser && !showSenderInfo
-              ? 'bg-primary text-primary-foreground' 
-              : 'bg-muted'
-            }
-          `}
-        >
-          <p className="whitespace-pre-wrap text-base">{message.content}</p>
-        </div>
+      {/* Upload Area */}
+      <div
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={[
+          "border-2 border-dashed rounded-lg p-4 text-center transition-colors",
+          isDragging ? "border-primary bg-accent" : "border-border",
+          disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+        ].join(" ")}
+        onClick={() => !disabled && fileInputRef.current?.click()}
+      >
+        <Upload className="h-6 w-6 mx-auto mb-2 text-muted-foreground" />
+        <p className="text-sm text-muted-foreground mb-1">
+          {disabled ? "Please log in to upload" : "Drop files or click to upload"}
+        </p>
+        <p className="text-xs text-muted-foreground">{ACCEPT_EXTS.join(", ")}</p>
 
-        {/* Next Question Button for Quiz Mode */}
-        {!isUser && showNextButton && !nextButtonClicked && chatMode === 'quiz' && onNextQuestion && (
-          <div className="mt-2">
-            <Button
-              onClick={() => {
-                setNextButtonClicked(true);
-                onNextQuestion();
-              }}
-              className="bg-primary hover:bg-primary/90"
-            >
-              Next Question
-            </Button>
-          </div>
-        )}
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          accept={ACCEPT_ATTR}
+          onChange={handleFileSelect}
+          className="hidden"
+          disabled={disabled}
+        />
+      </div>
 
-        {/* References */}
-        {message.references && message.references.length > 0 && (
-          <Collapsible open={referencesOpen} onOpenChange={setReferencesOpen}>
-            <CollapsibleTrigger asChild>
-              <Button variant="ghost" size="sm" className="gap-1 h-7 text-xs">
-                {referencesOpen ? (
-                  <ChevronUp className="h-3 w-3" />
-                ) : (
-                  <ChevronDown className="h-3 w-3" />
-                )}
-                {message.references.length} {message.references.length === 1 ? 'reference' : 'references'}
-              </Button>
-            </CollapsibleTrigger>
-            <CollapsibleContent className="space-y-1 mt-1">
-              {message.references.map((ref, index) => (
-                <Badge key={index} variant="outline" className="text-xs">
-                  {ref}
-                </Badge>
-              ))}
-            </CollapsibleContent>
-          </Collapsible>
-        )}
+      {/* Uploaded Files List */}
+      {uploadedFiles.length > 0 && (
+        <div className="space-y-3 max-h-64 overflow-y-auto">
+          {uploadedFiles.map((uploadedFile, index) => {
+            const f = uploadedFile.file;
+            return (
+              <div key={index} className="p-3 bg-muted rounded-md space-y-2">
+                <div className="flex items-center gap-3 group">
+                  {renderLeading(f)}
 
-        {/* Message Actions */}
-        {shouldShowActions && (
-          <div className="flex items-center gap-1">
-            <Button
-              variant="ghost"
-              size="icon"
-              className={`h-7 w-7 rounded-md transition-all hover:bg-accent hover:scale-110 active:scale-95 ${
-                copied ? 'bg-green-100 text-green-600 dark:bg-green-900/20 dark:text-green-400' : ''
-              }`}
-              onClick={handleCopy}
-              title="Copy"
-            >
-              {copied ? (
-                <Check className="h-4 w-4" />
-              ) : (
-                <Copy className="h-4 w-4" />
-              )}
-            </Button>
-
-            {!isUser && (
-              <>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className={`h-7 w-7 rounded-md transition-all hover:bg-accent hover:scale-110 active:scale-95 ${
-                    feedback === 'helpful' ? 'bg-green-100 text-green-600 dark:bg-green-900/20 dark:text-green-400' : ''
-                  }`}
-                  onClick={() => handleFeedbackClick('helpful')}
-                  title="Helpful"
-                >
-                  <ThumbsUp className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className={`h-7 w-7 rounded-md transition-all hover:bg-accent hover:scale-110 active:scale-95 ${
-                    feedback === 'not-helpful' ? 'bg-red-100 text-red-600 dark:bg-red-900/20 dark:text-red-400' : ''
-                  }`}
-                  onClick={() => handleFeedbackClick('not-helpful')}
-                  title="Not helpful"
-                >
-                  <ThumbsDown className="h-4 w-4" />
-                </Button>
-              </>
-            )}
-          </div>
-        )}
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm truncate">{f.name}</p>
+                    <p className="text-xs text-muted-foreground">{formatFileSize(f.size)}</p>
+                  </div>
 
-        {/* Feedback Area - 展开在消息下方 */}
-        {!isUser && showFeedbackArea && feedbackType && (
-          <div className="w-full mt-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
-            <div className="flex items-start justify-between mb-4">
-              <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                Tell us more:
-              </h4>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-6 w-6 p-0"
-                onClick={handleFeedbackClose}
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            </div>
-            
-            {/* 标签按钮 */}
-            <div className="flex flex-wrap gap-2 mb-4">
-              {FEEDBACK_TAGS[feedbackType].map((tag) => (
-                <Button
-                  key={tag}
-                  variant={selectedTags.includes(tag) ? 'default' : 'outline'}
-                  size="sm"
-                  className="h-7 text-xs"
-                  onClick={() => handleTagToggle(tag)}
-                >
-                  {tag}
-                </Button>
-              ))}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onRemoveFile(index);
+                    }}
+                    title="Remove"
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
+
+                <div className="space-y-1">
+                  <label className="text-xs text-muted-foreground">File Type</label>
+                  <Select
+                    value={uploadedFile.type}
+                    onValueChange={(value) => onFileTypeChange(index, value as FileType)}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="syllabus">Syllabus</SelectItem>
+                      <SelectItem value="lecture-slides">Lecture Slides / PPT</SelectItem>
+                      <SelectItem value="literature-review">Literature Review / Paper</SelectItem>
+                      <SelectItem value="other">Other Course Document</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Type Selection Dialog */}
+      {showTypeDialog && (
+        <Dialog open={showTypeDialog} onOpenChange={setShowTypeDialog}>
+          <DialogContent className="sm:max-w-[425px]">
+            <DialogHeader>
+              <DialogTitle>Select File Types</DialogTitle>
+              <DialogDescription>
+                Please select the type for each file you are uploading.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-3 max-h-64 overflow-y-auto">
+              {pendingFiles.map((pendingFile, index) => {
+                const f = pendingFile.file;
+                return (
+                  <div key={index} className="p-3 bg-muted rounded-md space-y-2">
+                    <div className="flex items-center gap-3">
+                      {renderLeading(f)}
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm truncate">{f.name}</p>
+                        <p className="text-xs text-muted-foreground">{formatFileSize(f.size)}</p>
+                      </div>
+                    </div>
+
+                    <div className="space-y-1">
+                      <label className="text-xs text-muted-foreground">File Type</label>
+                      <Select
+                        value={pendingFile.type}
+                        onValueChange={(value) => handlePendingFileTypeChange(index, value as FileType)}
+                      >
+                        <SelectTrigger className="h-8 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="syllabus">Syllabus</SelectItem>
+                          <SelectItem value="lecture-slides">Lecture Slides / PPT</SelectItem>
+                          <SelectItem value="literature-review">Literature Review / Paper</SelectItem>
+                          <SelectItem value="other">Other Course Document</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                );
+              })}
             </div>
 
-            {/* 文本输入框 */}
-            <Textarea
-              className="min-h-[60px] mb-4 bg-gray-100/50 dark:bg-gray-700/50 border-gray-200 dark:border-gray-600"
-              value={feedbackText}
-              onChange={(e) => setFeedbackText(e.target.value)}
-              placeholder="Additional feedback (optional)..."
-            />
-
-            {/* 提交按钮 */}
-            <div className="flex justify-end gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleFeedbackClose}
-              >
+            <DialogFooter>
+              <Button variant="outline" onClick={handleCancelUpload}>
                 Cancel
               </Button>
-              <Button
-                size="sm"
-                onClick={handleFeedbackSubmit}
-                disabled={selectedTags.length === 0 && !feedbackText.trim()}
-              >
-                Submit
-              </Button>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {isUser && !showSenderInfo && (
-        <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
-          {message.sender ? (
-            <img
-              src={
-                message.sender.avatar || 
-                `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(message.sender.email || message.sender.name)}`
-              }
-              alt={message.sender.name}
-              className="w-full h-full object-cover"
-            />
-          ) : (
-            <span className="text-base">👤</span>
-          )}
-        </div>
+              <Button onClick={handleConfirmUpload}>Upload</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
       )}
-    </div>
+    </Card>
   );
-}
+}