Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -1,372 +1,397 @@
-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;
+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
 }
 
-interface PendingFile {
-  file: File;
-  type: FileType;
-}
+// 反馈标签选项
+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);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-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;
-}
 
-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（更稳：不用 state，避免时序问题）=====
-  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]);
-
-  // 维护 cache：只保留当前需要的 image url；移除的立即 revoke
-  useEffect(() => {
-    const need = new Set<string>();
-    for (const f of allFiles) {
-      if (!isImageFile(f)) continue;
-      need.add(fingerprint(f));
-    }
 
-    // revoke removed
-    for (const [key, url] of urlCacheRef.current.entries()) {
-      if (!need.has(key)) {
-        try {
-          URL.revokeObjectURL(url);
-        } catch {
-          // ignore
-        }
-        urlCacheRef.current.delete(key);
-      }
-    }
 
-    // create missing
-    for (const f of allFiles) {
-      if (!isImageFile(f)) continue;
-      const key = fingerprint(f);
-      if (!urlCacheRef.current.has(key)) {
-        urlCacheRef.current.set(key, URL.createObjectURL(f));
-      }
-    }
-  }, [allFiles]);
-
-  // unmount：全部 revoke
-  useEffect(() => {
-    return () => {
-      for (const url of urlCacheRef.current.values()) {
-        try {
-          URL.revokeObjectURL(url);
-        } catch {
-          // ignore
-        }
-      }
-      urlCacheRef.current.clear();
-    };
-  }, []);
 
-  const getPreviewUrl = (file: File) => {
-    const key = fingerprint(file);
-    return urlCacheRef.current.get(key);
-  };
 
-  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 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 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);
+  const handleFeedbackClick = (type: 'helpful' | 'not-helpful') => {
+    if (feedback === type) {
+      // 如果点击的是已选中的反馈，则关闭反馈区域
+      setFeedback(null);
+      setShowFeedbackArea(false);
+      setFeedbackType(null);
+      setFeedbackText('');
+      setSelectedTags([]);
+    } else {
+      // 立即设置反馈状态（按钮会立即显示颜色）
+      setFeedback(type);
+      // 打开反馈区域
+      setFeedbackType(type);
+      setShowFeedbackArea(true);
     }
-    e.target.value = "";
   };
 
-  const handleConfirmUpload = () => {
-    onFileUpload(pendingFiles.map((pf) => pf.file));
-
-    const startIndex = uploadedFiles.length;
-    pendingFiles.forEach((pf, idx) => {
-      setTimeout(() => {
-        onFileTypeChange(startIndex + idx, pf.type);
-      }, 0);
-    });
+  const handleFeedbackClose = () => {
+    setShowFeedbackArea(false);
+    setFeedbackType(null);
+    setFeedbackText('');
+    setSelectedTags([]);
+    // 注意：不重置 feedback，保持点赞/点踩的状态
 
-    setPendingFiles([]);
-    setShowTypeDialog(false);
   };
 
-  const handleCancelUpload = () => {
-    setPendingFiles([]);
-    setShowTypeDialog(false);
+  const handleTagToggle = (tag: string) => {
+    setSelectedTags(prev => 
+      prev.includes(tag) 
+        ? prev.filter(t => t !== tag)
+        : [...prev, tag]
+    );
+
   };
 
-  const handlePendingFileTypeChange = (index: number, type: FileType) => {
-    setPendingFiles((prev) => prev.map((pf, i) => (i === index ? { ...pf, type } : pf)));
+  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 renderLeading = (file: File) => {
-    if (isImageFile(file)) {
-      const src = getPreviewUrl(file);
-      return (
-        <div className="h-12 w-12 rounded-md overflow-hidden bg-background border border-border flex-shrink-0">
-          {src ? (
+  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={src}
-              alt={file.name}
-              className="h-full w-full object-cover"
-              draggable={false}
+              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 className="h-full w-full flex items-center justify-center text-muted-foreground">
-              <ImageIcon className="h-5 w-5" />
-            </div>
           )}
         </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" />
+        </div>
+      ) : null}
 
-    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 
+        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>
         )}
-      </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>
-
-        <input
-          ref={fileInputRef}
-          type="file"
-          multiple
-          accept={ACCEPT_ATTR}
-          onChange={handleFileSelect}
-          className="hidden"
-          disabled={disabled}
-        />
-      </div>
 
-      {/* 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)}
-
-                  <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>
-
-                  <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
+          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>
-      )}
 
-      {/* 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>
-                );
-              })}
+
+
+
+
+
+
+        {/* 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>
+        )}
+
+        {/* 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>
+        )}
+
+        {/* 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>
+        )}
+
+        {/* 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>
+              ))}
             </div>
 
-            <DialogFooter>
-              <Button variant="outline" onClick={handleCancelUpload}>
+            {/* 文本输入框 */}
+            <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}
+              >
                 Cancel
               </Button>
-              <Button onClick={handleConfirmUpload}>Upload</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
+              <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>
       )}
-    </Card>
+    </div>
   );
 }