Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -12,7 +12,7 @@ import {
   Share2,
   Upload,
   X,
-  Trash2, 
+  Trash2,
   File,
   FileText,
   Presentation,
@@ -37,8 +37,20 @@ import type {
 } from "../App";
 import { toast } from "sonner";
 import { jsPDF } from "jspdf";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
 import { Checkbox } from "./ui/checkbox";
 import {
   AlertDialog,
@@ -50,7 +62,13 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "./ui/alert-dialog";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
 import { SmartReview } from "./SmartReview";
 import clareAvatar from "../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png";
 
@@ -66,7 +84,6 @@ interface ChatAreaProps {
   onFileUpload: (files: File[]) => void;
   onRemoveFile: (index: number) => void;
 
-
   onFileTypeChange: (index: number, type: FileType) => void;
   memoryProgress: number;
   isLoggedIn: boolean;
@@ -91,7 +108,12 @@ interface ChatAreaProps {
   savedChats: SavedChat[];
   workspaces: Workspace[];
   currentWorkspaceId: string;
-  onSaveFile?: (content: string, type: "export" | "summary", format?: "pdf" | "text", workspaceId?: string) => void;
+  onSaveFile?: (
+    content: string,
+    type: "export" | "summary",
+    format?: "pdf" | "text",
+    workspaceId?: string
+  ) => void;
   leftPanelVisible?: boolean;
   currentCourseId?: string;
   onCourseChange?: (courseId: string) => void;
@@ -99,6 +121,10 @@ interface ChatAreaProps {
   showReviewBanner?: boolean;
 
   onReviewActivity?: (event: ReviewEventType) => void;
+
+  // ✅ NEW: pass through for feedback submission
+  currentUserId?: string; // backend user_id
+  docType?: string;       // backend doc_type (optional)
 }
 
 interface PendingFile {
@@ -139,6 +165,10 @@ export function ChatArea({
   availableCourses = [],
   showReviewBanner = false,
   onReviewActivity,
+
+  // ✅ NEW
+  currentUserId,
+  docType,
 }: ChatAreaProps) {
   const [input, setInput] = useState("");
   const [showScrollButton, setShowScrollButton] = useState(false);
@@ -151,13 +181,19 @@ export function ChatArea({
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [fileToDelete, setFileToDelete] = useState<number | null>(null);
 
-  const [selectedFile, setSelectedFile] = useState<{ file: File; index: number } | null>(null);
+  const [selectedFile, setSelectedFile] = useState<{
+    file: File;
+    index: number;
+  } | null>(null);
   const [showFileViewer, setShowFileViewer] = useState(false);
 
   const [showDownloadDialog, setShowDownloadDialog] = useState(false);
   const [downloadPreview, setDownloadPreview] = useState("");
   const [downloadTab, setDownloadTab] = useState<"chat" | "summary">("chat");
-  const [downloadOptions, setDownloadOptions] = useState({ chat: true, summary: false });
+  const [downloadOptions, setDownloadOptions] = useState({
+    chat: true,
+    summary: false,
+  });
 
   const [showShareDialog, setShowShareDialog] = useState(false);
   const [shareLink, setShareLink] = useState("");
@@ -223,7 +259,8 @@ export function ChatArea({
     if (messages.length > previousMessagesLength.current) {
       const el = scrollContainerRef.current;
       if (el) {
-        const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 240;
+        const nearBottom =
+          el.scrollHeight - el.scrollTop - el.clientHeight < 240;
         if (nearBottom) scrollToBottom("smooth");
       }
     }
@@ -297,7 +334,12 @@ export function ChatArea({
 
   const buildPreviewContent = () => {
     if (!messages.length) return "";
-    return messages.map((msg) => `${msg.role === "user" ? "You" : "Clare"}: ${msg.content}`).join("\n\n");
+    return messages
+      .map(
+        (msg) =>
+          `${msg.role === "user" ? "You" : "Clare"}: ${msg.content}`
+      )
+      .join("\n\n");
   };
 
   const buildSummaryContent = () => {
@@ -314,7 +356,9 @@ export function ChatArea({
     summary += `Key Points:\n`;
     userMessages.slice(0, 3).forEach((msg, idx) => {
       const preview = msg.content.substring(0, 80);
-      summary += `${idx + 1}. ${preview}${msg.content.length > 80 ? "..." : ""}\n`;
+      summary += `${idx + 1}. ${preview}${
+        msg.content.length > 80 ? "..." : ""
+      }\n`;
     });
 
     return summary;
@@ -352,7 +396,11 @@ export function ChatArea({
         return;
       }
 
-      const pdf = new jsPDF({ orientation: "portrait", unit: "mm", format: "a4" });
+      const pdf = new jsPDF({
+        orientation: "portrait",
+        unit: "mm",
+        format: "a4",
+      });
 
       pdf.setFontSize(14);
       pdf.text("Chat Export", 10, 10);
@@ -393,7 +441,11 @@ export function ChatArea({
 
       return chat.messages.every((savedMsg, idx) => {
         const currentMsg = messages[idx];
-        return savedMsg.id === currentMsg.id && savedMsg.role === currentMsg.role && savedMsg.content === currentMsg.content;
+        return (
+          savedMsg.id === currentMsg.id &&
+          savedMsg.role === currentMsg.role &&
+          savedMsg.content === currentMsg.content
+        );
       });
     });
   };
@@ -481,13 +533,24 @@ export function ChatArea({
 
     const validFiles = files.filter((file) => {
       const ext = file.name.toLowerCase();
-      return [".pdf", ".docx", ".pptx", ".jpg", ".jpeg", ".png", ".gif", ".webp", ".doc", ".ppt"].some((allowed) =>
-        ext.endsWith(allowed)
-      );
+      return [
+        ".pdf",
+        ".docx",
+        ".pptx",
+        ".jpg",
+        ".jpeg",
+        ".png",
+        ".gif",
+        ".webp",
+        ".doc",
+        ".ppt",
+      ].some((allowed) => ext.endsWith(allowed));
     });
 
     if (validFiles.length > 0) {
-      setPendingFiles(validFiles.map((file) => ({ file, type: "other" as FileType })));
+      setPendingFiles(
+        validFiles.map((file) => ({ file, type: "other" as FileType }))
+      );
       setShowTypeDialog(true);
     } else {
       toast.error("Please upload .pdf, .docx, .pptx, or image files");
@@ -499,13 +562,24 @@ export function ChatArea({
     if (files.length > 0) {
       const validFiles = files.filter((file) => {
         const ext = file.name.toLowerCase();
-        return [".pdf", ".docx", ".pptx", ".jpg", ".jpeg", ".png", ".gif", ".webp", ".doc", ".ppt"].some((allowed) =>
-          ext.endsWith(allowed)
-        );
+        return [
+          ".pdf",
+          ".docx",
+          ".pptx",
+          ".jpg",
+          ".jpeg",
+          ".png",
+          ".gif",
+          ".webp",
+          ".doc",
+          ".ppt",
+        ].some((allowed) => ext.endsWith(allowed));
       });
 
       if (validFiles.length > 0) {
-        setPendingFiles(validFiles.map((file) => ({ file, type: "other" as FileType })));
+        setPendingFiles(
+          validFiles.map((file) => ({ file, type: "other" as FileType }))
+        );
         setShowTypeDialog(true);
       } else {
         toast.error("Please upload .pdf, .docx, .pptx, or image files");
@@ -536,7 +610,9 @@ export function ChatArea({
   };
 
   const handlePendingFileTypeChange = (index: number, type: FileType) => {
-    setPendingFiles((prev) => prev.map((pf, i) => (i === index ? { ...pf, type } : pf)));
+    setPendingFiles((prev) =>
+      prev.map((pf, i) => (i === index ? { ...pf, type } : pf))
+    );
   };
 
   // File helpers
@@ -545,18 +621,9 @@ export function ChatArea({
     if (ext.endsWith(".pdf")) return FileText;
     if (ext.endsWith(".docx") || ext.endsWith(".doc")) return File;
     if (ext.endsWith(".pptx") || ext.endsWith(".ppt")) return Presentation;
-    if ([".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e))) return ImageIcon;
-    return File;
-  };
-
-  const getFileTypeInfo = (filename: string) => {
-    const ext = filename.toLowerCase();
-    if (ext.endsWith(".pdf")) return { bgColor: "bg-red-500", type: "PDF" };
-    if (ext.endsWith(".docx") || ext.endsWith(".doc")) return { bgColor: "bg-blue-500", type: "Document" };
-    if (ext.endsWith(".pptx") || ext.endsWith(".ppt")) return { bgColor: "bg-orange-500", type: "Presentation" };
     if ([".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e)))
-      return { bgColor: "bg-green-500", type: "Image" };
-    return { bgColor: "bg-gray-500", type: "File" };
+      return ImageIcon;
+    return File;
   };
 
   const formatFileSize = (bytes: number) => {
@@ -564,14 +631,8 @@ export function ChatArea({
     if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   };
-  
-  const fileKey = (f: File) => `${f.name}::${f.size}::${f.lastModified}`;
-
-  const removeUploadedByFile = (file: File) => {
-    const idx = uploadedFiles.findIndex((u) => fileKey(u.file) === fileKey(file));
-    if (idx >= 0) onRemoveFile(idx);
-  };
 
+  const fileKey = (f: File) => `${f.name}::${f.size}::${f.lastModified}`;
 
   // ✅ useObjectUrlCache: for image thumbnails (uploaded + pending)
   const allThumbFiles = React.useMemo(() => {
@@ -591,7 +652,7 @@ export function ChatArea({
   }) => {
     const ext = file.name.toLowerCase();
     const isImage = [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e));
-  
+
     const label = ext.endsWith(".pdf")
       ? "PDF"
       : ext.endsWith(".pptx") || ext.endsWith(".ppt")
@@ -601,29 +662,22 @@ export function ChatArea({
       : isImage
       ? "Image"
       : "File";
-  
+
     const thumbUrl = isImage ? getOrCreate(file) : null;
-  
+
     const handleRemove = () => {
-      if (source === "uploaded") {
-        // 关键：仍然走 index 删除（或按 file 找 index）
-        onRemoveFile(index);
-        // 如果你更想稳一点（不依赖 index），用下面这一行替代上面那行：
-        // removeUploadedByFile(file);
-      } else {
-        setPendingFiles((prev) => prev.filter((p) => fileKey(p.file) !== fileKey(file)));
-      }
+      if (source === "uploaded") onRemoveFile(index);
+      else setPendingFiles((prev) => prev.filter((p) => fileKey(p.file) !== fileKey(file)));
     };
-  
+
     return (
       <div className="flex items-center gap-2 rounded-xl border border-border bg-card px-3 py-2 shadow-sm w-[320px] max-w-full">
-        {/* 叉叉：只 stopPropagation，不要一堆 stopImmediatePropagation，避免某些浏览器/事件链出问题 */}
         <button
           type="button"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            onRemoveFile?.(index); // ✅ 用 index 删（前后端状态都会删掉）
+            handleRemove();
           }}
           className="ml-2 inline-flex h-7 w-7 items-center justify-center rounded-md border border-border bg-card hover:bg-muted"
           title="Remove"
@@ -631,16 +685,13 @@ export function ChatArea({
           <Trash2 className="h-4 w-4" />
         </button>
 
-  
-        {/* 文本区 */}
         <div className="min-w-0 flex-1">
           <div className="text-sm font-medium truncate" title={file.name}>
             {file.name}
           </div>
           <div className="text-xs text-muted-foreground">{label}</div>
         </div>
-  
-        {/* ✅ 缩略图：更小更干净 */}
+
         {isImage ? (
           <div className="relative h-10 w-10 flex-shrink-0 rounded-lg overflow-hidden border border-border bg-muted">
             {thumbUrl ? (
@@ -661,73 +712,6 @@ export function ChatArea({
     );
   };
 
-  const FileViewerContent = ({ file }: { file: File }) => {
-    const [content, setContent] = useState<string>("");
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    useEffect(() => {
-      const loadFile = async () => {
-        try {
-          setLoading(true);
-          setError(null);
-
-          const ext = file.name.toLowerCase();
-
-          if ([".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e))) {
-            // Use objectURL for viewer as well
-            setContent(getOrCreate(file));
-            setLoading(false);
-            return;
-          }
-
-          if (ext.endsWith(".pdf")) {
-            setContent("PDF files cannot be previewed directly. Please download the file to view it.");
-            setLoading(false);
-            return;
-          }
-
-          const reader = new FileReader();
-          reader.onload = (e) => {
-            setContent(String(e.target?.result ?? ""));
-            setLoading(false);
-          };
-          reader.onerror = () => {
-            setError("Failed to load file");
-            setLoading(false);
-          };
-          reader.readAsText(file);
-        } catch {
-          setError("Failed to load file");
-          setLoading(false);
-        }
-      };
-
-      loadFile();
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [file]);
-
-    if (loading) return <div className="text-center py-8">Loading...</div>;
-    if (error) return <div className="text-center py-8 text-destructive">{error}</div>;
-
-    const ext = file.name.toLowerCase();
-    const isImage = [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e));
-
-    if (isImage) {
-      return (
-        <div className="flex justify-center">
-          <img src={content} alt={file.name} className="max-w-full h-auto rounded-lg" />
-        </div>
-      );
-    }
-
-    return (
-      <div className="whitespace-pre-wrap text-sm font-mono p-4 bg-muted rounded-lg max-h-[60vh] overflow-y-auto">
-        {content}
-      </div>
-    );
-  };
-
   const bottomPad = Math.max(24, composerHeight + 24);
 
   return (
@@ -737,7 +721,12 @@ export function ChatArea({
         className={`flex-shrink-0 flex items-center justify-between px-4 bg-card z-20 ${
           showTopBorder ? "border-b border-border" : ""
         }`}
-        style={{ height: "4.5rem", margin: 0, padding: "1rem 1rem", boxSizing: "border-box" }}
+        style={{
+          height: "4.5rem",
+          margin: 0,
+          padding: "1rem 1rem",
+          boxSizing: "border-box",
+        }}
       >
         {/* Course Selector - Left */}
         <div className="flex-shrink-0">
@@ -755,7 +744,10 @@ export function ChatArea({
             }
 
             return (
-              <Select value={currentCourseId || "course1"} onValueChange={(val) => onCourseChange && onCourseChange(val)}>
+              <Select
+                value={currentCourseId || "course1"}
+                onValueChange={(val) => onCourseChange && onCourseChange(val)}
+              >
                 <SelectTrigger className="w-[200px] h-9 font-semibold">
                   <SelectValue placeholder="Select course" />
                 </SelectTrigger>
@@ -773,7 +765,12 @@ export function ChatArea({
 
         {/* Tabs - Center */}
         <div className="absolute left-1/2 -translate-x-1/2 flex-shrink-0">
-          <Tabs value={chatMode} onValueChange={(value) => onChatModeChange(value as ChatMode)} className="w-auto" orientation="horizontal">
+          <Tabs
+            value={chatMode}
+            onValueChange={(value) => onChatModeChange(value as ChatMode)}
+            className="w-auto"
+            orientation="horizontal"
+          >
             <TabsList className="inline-flex h-8 items-center justify-center rounded-xl bg-muted p-1 text-muted-foreground">
               <TabsTrigger value="ask" className="w-[140px] px-3 text-sm">
                 Ask
@@ -805,10 +802,16 @@ export function ChatArea({
             size="icon"
             onClick={handleSaveClick}
             disabled={!isLoggedIn}
-            className={`h-8 w-8 rounded-md hover:bg-muted/50 ${isCurrentChatSaved() ? "text-primary" : ""}`}
+            className={`h-8 w-8 rounded-md hover:bg-muted/50 ${
+              isCurrentChatSaved() ? "text-primary" : ""
+            }`}
             title={isCurrentChatSaved() ? "Unsave" : "Save"}
           >
-            <Bookmark className={`h-4 w-4 ${isCurrentChatSaved() ? "fill-primary text-primary" : ""}`} />
+            <Bookmark
+              className={`h-4 w-4 ${
+                isCurrentChatSaved() ? "fill-primary text-primary" : ""
+              }`}
+            />
           </Button>
 
           <Button
@@ -859,20 +862,40 @@ export function ChatArea({
                 <Message
                   message={message}
                   showSenderInfo={spaceType === "group"}
-                  isFirstGreeting={(message.id === "1" || message.id === "review-1" || message.id === "quiz-1") && message.role === "assistant"}
+                  isFirstGreeting={
+                    (message.id === "1" ||
+                      message.id === "review-1" ||
+                      message.id === "quiz-1") &&
+                    message.role === "assistant"
+                  }
                   showNextButton={message.showNextButton && !isAppTyping}
                   onNextQuestion={onNextQuestion}
                   chatMode={chatMode}
+
+                  // ✅ NEW: required for feedback submission
+                  currentUserId={currentUserId}
+                  learningMode={learningMode}
+                  docType={docType}
                 />
 
-                {chatMode === "review" && message.id === "review-1" && message.role === "assistant" && (
-                  <div className="flex gap-2 justify-start px-4">
-                    <div className="w-10 h-10 flex-shrink-0" />
-                    <div className="w-full" style={{ maxWidth: "min(770px, calc(100% - 2rem))" }}>
-                      <SmartReview onReviewTopic={handleReviewTopic} onReviewAll={handleReviewAll} />
+                {chatMode === "review" &&
+                  message.id === "review-1" &&
+                  message.role === "assistant" && (
+                    <div className="flex gap-2 justify-start px-4">
+                      <div className="w-10 h-10 flex-shrink-0" />
+                      <div
+                        className="w-full"
+                        style={{
+                          maxWidth: "min(770px, calc(100% - 2rem))",
+                        }}
+                      >
+                        <SmartReview
+                          onReviewTopic={handleReviewTopic}
+                          onReviewAll={handleReviewAll}
+                        />
+                      </div>
                     </div>
-                  </div>
-                )}
+                  )}
 
                 {chatMode === "quiz" &&
                   message.id === "quiz-1" &&
@@ -881,7 +904,10 @@ export function ChatArea({
                   !quizState.waitingForAnswer &&
                   !isAppTyping && (
                     <div className="flex justify-center py-4">
-                      <Button onClick={onStartQuiz} className="bg-red-500 hover:bg-red-600 text-white">
+                      <Button
+                        onClick={onStartQuiz}
+                        className="bg-red-500 hover:bg-red-600 text-white"
+                      >
                         Start Quiz
                       </Button>
                     </div>
@@ -892,13 +918,26 @@ export function ChatArea({
             {isAppTyping && (
               <div className="flex gap-2 justify-start px-4">
                 <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" />
+                  <img
+                    src={clareAvatar}
+                    alt="Clare"
+                    className="w-full h-full object-cover"
+                  />
                 </div>
                 <div className="bg-muted rounded-2xl px-4 py-3">
                   <div className="flex gap-1">
-                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: "0ms" }} />
-                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: "150ms" }} />
-                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: "300ms" }} />
+                    <div
+                      className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce"
+                      style={{ animationDelay: "0ms" }}
+                    />
+                    <div
+                      className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce"
+                      style={{ animationDelay: "150ms" }}
+                    />
+                    <div
+                      className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce"
+                      style={{ animationDelay: "300ms" }}
+                    />
                   </div>
                 </div>
               </div>
@@ -909,7 +948,10 @@ export function ChatArea({
 
       {/* Scroll-to-bottom button */}
       {showScrollButton && (
-        <div className="absolute z-30 left-0 right-0 flex justify-center pointer-events-none" style={{ bottom: composerHeight + 16 }}>
+        <div
+          className="absolute z-30 left-0 right-0 flex justify-center pointer-events-none"
+          style={{ bottom: composerHeight + 16 }}
+        >
           <Button
             variant="secondary"
             size="icon"
@@ -923,7 +965,10 @@ export function ChatArea({
       )}
 
       {/* Composer */}
-      <div ref={composerRef} className="flex-shrink-0 bg-background/95 backdrop-blur-sm z-20 border-t border-border">
+      <div
+        ref={composerRef}
+        className="flex-shrink-0 bg-background/95 backdrop-blur-sm z-20 border-t border-border"
+      >
         <div className="max-w-4xl mx-auto px-4 py-4">
           {/*  Uploaded Files Preview (chip UI) */}
           {(uploadedFiles.length > 0 || pendingFiles.length > 0) && (
@@ -931,13 +976,18 @@ export function ChatArea({
               {/* uploaded */}
               {uploadedFiles.map((uf, i) => {
                 const key = `${uf.file.name}::${uf.file.size}::${uf.file.lastModified}`;
-              
+
                 const ext = uf.file.name.toLowerCase();
-                const isImage = [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e));
+                const isImage = [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) =>
+                  ext.endsWith(e)
+                );
                 const thumbUrl = isImage ? getOrCreate(uf.file) : null;
-              
+
                 return (
-                  <div key={key} className="flex items-center justify-between gap-2 rounded-md border px-3 py-2">
+                  <div
+                    key={key}
+                    className="flex items-center justify-between gap-2 rounded-md border px-3 py-2"
+                  >
                     {/* ✅ Thumbnail (only for images) */}
                     {isImage ? (
                       <div className="h-10 w-10 flex-shrink-0 rounded-lg overflow-hidden border border-border bg-muted">
@@ -955,13 +1005,16 @@ export function ChatArea({
                         )}
                       </div>
                     ) : null}
-              
+
                     <div className="min-w-0 flex-1">
-                      <div className="truncate text-sm font-medium">{uf.file.name}</div>
-                      <div className="text-xs text-muted-foreground">{uf.type}</div>
+                      <div className="truncate text-sm font-medium">
+                        {uf.file.name}
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {uf.type}
+                      </div>
                     </div>
-              
-                    {/* ✅ 原样保留删除逻辑 */}
+
                     <Button
                       variant="ghost"
                       size="icon"
@@ -974,9 +1027,14 @@ export function ChatArea({
                 );
               })}
 
-              {/* pending (type dialog 之前也能显示的话) */}
+              {/* pending */}
               {pendingFiles.map((p, idx) => (
-                <FileChip key={`p-${p.file.name}-${p.file.size}-${p.file.lastModified}`} file={p.file} index={idx} source="pending" />
+                <FileChip
+                  key={`p-${p.file.name}-${p.file.size}-${p.file.lastModified}`}
+                  file={p.file}
+                  index={idx}
+                  source="pending"
+                />
               ))}
             </div>
           )}
@@ -1002,51 +1060,91 @@ export function ChatArea({
                         type="button"
                       >
                         <span>{modeLabels[learningMode]}</span>
-                        <svg className="h-3 w-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                        <svg
+                          className="h-3 w-3 opacity-50"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M19 9l-7 7-7-7"
+                          />
                         </svg>
                       </Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="start" className="w-56">
-                      <DropdownMenuItem onClick={() => onLearningModeChange("general")} className={learningMode === "general" ? "bg-accent" : ""}>
+                      <DropdownMenuItem
+                        onClick={() => onLearningModeChange("general")}
+                        className={learningMode === "general" ? "bg-accent" : ""}
+                      >
                         <div className="flex flex-col">
                           <span className="font-medium">General</span>
-                          <span className="text-xs text-muted-foreground">Answer various questions (context required)</span>
+                          <span className="text-xs text-muted-foreground">
+                            Answer various questions (context required)
+                          </span>
                         </div>
                       </DropdownMenuItem>
 
-                      <DropdownMenuItem onClick={() => onLearningModeChange("concept")} className={learningMode === "concept" ? "bg-accent" : ""}>
+                      <DropdownMenuItem
+                        onClick={() => onLearningModeChange("concept")}
+                        className={learningMode === "concept" ? "bg-accent" : ""}
+                      >
                         <div className="flex flex-col">
                           <span className="font-medium">Concept Explainer</span>
-                          <span className="text-xs text-muted-foreground">Get detailed explanations of concepts</span>
+                          <span className="text-xs text-muted-foreground">
+                            Get detailed explanations of concepts
+                          </span>
                         </div>
                       </DropdownMenuItem>
 
-                      <DropdownMenuItem onClick={() => onLearningModeChange("socratic")} className={learningMode === "socratic" ? "bg-accent" : ""}>
+                      <DropdownMenuItem
+                        onClick={() => onLearningModeChange("socratic")}
+                        className={learningMode === "socratic" ? "bg-accent" : ""}
+                      >
                         <div className="flex flex-col">
                           <span className="font-medium">Socratic Tutor</span>
-                          <span className="text-xs text-muted-foreground">Learn through guided questions</span>
+                          <span className="text-xs text-muted-foreground">
+                            Learn through guided questions
+                          </span>
                         </div>
                       </DropdownMenuItem>
 
-                      <DropdownMenuItem onClick={() => onLearningModeChange("exam")} className={learningMode === "exam" ? "bg-accent" : ""}>
+                      <DropdownMenuItem
+                        onClick={() => onLearningModeChange("exam")}
+                        className={learningMode === "exam" ? "bg-accent" : ""}
+                      >
                         <div className="flex flex-col">
                           <span className="font-medium">Exam Prep</span>
-                          <span className="text-xs text-muted-foreground">Practice with quiz questions</span>
+                          <span className="text-xs text-muted-foreground">
+                            Practice with quiz questions
+                          </span>
                         </div>
                       </DropdownMenuItem>
 
-                      <DropdownMenuItem onClick={() => onLearningModeChange("assignment")} className={learningMode === "assignment" ? "bg-accent" : ""}>
+                      <DropdownMenuItem
+                        onClick={() => onLearningModeChange("assignment")}
+                        className={learningMode === "assignment" ? "bg-accent" : ""}
+                      >
                         <div className="flex flex-col">
                           <span className="font-medium">Assignment Helper</span>
-                          <span className="text-xs text-muted-foreground">Get help with assignments</span>
+                          <span className="text-xs text-muted-foreground">
+                            Get help with assignments
+                          </span>
                         </div>
                       </DropdownMenuItem>
 
-                      <DropdownMenuItem onClick={() => onLearningModeChange("summary")} className={learningMode === "summary" ? "bg-accent" : ""}>
+                      <DropdownMenuItem
+                        onClick={() => onLearningModeChange("summary")}
+                        className={learningMode === "summary" ? "bg-accent" : ""}
+                      >
                         <div className="flex flex-col">
                           <span className="font-medium">Quick Summary</span>
-                          <span className="text-xs text-muted-foreground">Get concise summaries</span>
+                          <span className="text-xs text-muted-foreground">
+                            Get concise summaries
+                          </span>
                         </div>
                       </DropdownMenuItem>
                     </DropdownMenuContent>
@@ -1057,7 +1155,10 @@ export function ChatArea({
                   type="button"
                   size="icon"
                   variant="ghost"
-                  disabled={!isLoggedIn || (chatMode === "quiz" && !quizState.waitingForAnswer)}
+                  disabled={
+                    !isLoggedIn ||
+                    (chatMode === "quiz" && !quizState.waitingForAnswer)
+                  }
                   className="h-8 w-8 hover:bg-muted/50"
                   onClick={() => fileInputRef.current?.click()}
                   title="Upload files"
@@ -1085,14 +1186,22 @@ export function ChatArea({
                     ? "Ask me anything! Please provide context about your question..."
                     : "Ask Clare anything about the course or drag files here..."
                 }
-                disabled={!isLoggedIn || (chatMode === "quiz" && !quizState.waitingForAnswer)}
+                disabled={
+                  !isLoggedIn ||
+                  (chatMode === "quiz" && !quizState.waitingForAnswer)
+                }
                 className={`min-h-[80px] pl-4 pr-20 resize-none bg-background border-2 ${
                   isDragging ? "border-primary border-dashed" : "border-border"
                 }`}
               />
 
               <div className="absolute bottom-2 right-2 flex gap-1">
-                <Button type="submit" size="icon" disabled={!input.trim() || !isLoggedIn} className="h-8 w-8 rounded-full">
+                <Button
+                  type="submit"
+                  size="icon"
+                  disabled={!input.trim() || !isLoggedIn}
+                  className="h-8 w-8 rounded-full"
+                >
                   <Send className="h-4 w-4" />
                 </Button>
               </div>