Update web/src/App.tsx

web/src/App.tsx

@@ -121,7 +121,7 @@ function mapLanguagePref(lang: Language): string {
   return "Auto";
 }
 
-// ✅ NEW: localStorage helpers for saved chats
+// ✅ localStorage helpers for saved chats
 function savedChatsStorageKey(email: string) {
   return `saved_chats::${email}`;
 }
@@ -314,7 +314,7 @@ function App() {
 
   const [savedChats, setSavedChats] = useState<SavedChat[]>([]);
 
-  // ✅ NEW: load saved chats after login
+  // ✅ load saved chats after login
   useEffect(() => {
     if (!user?.email) return;
     try {
@@ -330,7 +330,7 @@ function App() {
     }
   }, [user?.email]);
 
-  // ✅ NEW: persist saved chats whenever changed
+  // ✅ persist saved chats whenever changed
   useEffect(() => {
     if (!user?.email) return;
     try {
@@ -350,6 +350,7 @@ function App() {
   const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
   const [currentWorkspaceId, setCurrentWorkspaceId] = useState<string>("individual");
 
+  // ✅ used to prevent duplicate upload per file fingerprint
   const uploadedFingerprintsRef = useRef<Set<string>>(new Set());
 
   useEffect(() => {
@@ -449,20 +450,15 @@ function App() {
   // =========================
   // ✅ Stable course switching logic
   // =========================
-
-  // Track whether we have hydrated My Space course selection for the current "visit"
   const didHydrateMySpaceRef = useRef(false);
 
-  // Wrapper: only allow manual course change in My Space (individual)
   const handleCourseChange = (nextCourseId: string) => {
     if (!nextCourseId) return;
 
-    // If we are inside a group course workspace, course is bound to workspace; ignore manual changes to avoid flicker
     if (currentWorkspace.type === "group" && currentWorkspace.category === "course") {
       return;
     }
 
-    // In My Space (individual): update state immediately and persist
     setCurrentCourseId(nextCourseId);
     try {
       localStorage.setItem(MYSPACE_COURSE_KEY, nextCourseId);
@@ -471,27 +467,22 @@ function App() {
     }
   };
 
-  // Sync courseId from group-workspace (authoritative)
-  // AND hydrate My Space from localStorage only once per entry (no loops)
   useEffect(() => {
     if (!currentWorkspace) return;
 
-    // Group course workspace: force to workspace course id
     if (currentWorkspace.type === "group" && currentWorkspace.category === "course") {
       const cid = currentWorkspace.courseInfo?.id;
       if (cid && cid !== currentCourseId) setCurrentCourseId(cid);
-      didHydrateMySpaceRef.current = false; // reset for next time we go back to My Space
+      didHydrateMySpaceRef.current = false;
       return;
     }
 
-    // My Space: hydrate only once when entering My Space
     if (currentWorkspace.type === "individual") {
       if (!didHydrateMySpaceRef.current) {
         didHydrateMySpaceRef.current = true;
 
         const saved = localStorage.getItem(MYSPACE_COURSE_KEY);
-        const valid =
-          saved && availableCourses.some((c) => c.id === saved) ? saved : undefined;
+        const valid = saved && availableCourses.some((c) => c.id === saved) ? saved : undefined;
 
         const next = valid || currentCourseId || "course1";
         if (next !== currentCourseId) setCurrentCourseId(next);
@@ -502,13 +493,11 @@ function App() {
     currentWorkspace?.type,
     currentWorkspace?.category,
     currentWorkspace?.courseInfo?.id,
-    // include availableCourses so validation works
     availableCourses,
     currentCourseId,
     currentWorkspace,
   ]);
 
-  // Persist My Space course selection whenever it changes (defensive, keeps FE consistent)
   useEffect(() => {
     if (currentWorkspace?.type !== "individual") return;
     try {
@@ -524,7 +513,6 @@ function App() {
     localStorage.setItem("theme", isDarkMode ? "dark" : "light");
   }, [isDarkMode]);
 
-  // ✅ lock outer page scroll
   useEffect(() => {
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -645,14 +633,12 @@ function App() {
     else if (chatMode === "review") setReviewMessages((prev) => [...prev, userMessage]);
     else setQuizMessages((prev) => [...prev, userMessage]);
 
-
     if (chatMode === "quiz") {
-      // Quiz mode: always route to backend (grading + next question handled server-side)
       setIsTyping(true);
-    
+
       try {
         const docType = getCurrentDocTypeForChat();
-    
+
         const r = await apiChat({
           user_id: user.email,
           message: content,
@@ -660,7 +646,7 @@ function App() {
           language_preference: mapLanguagePref(language),
           doc_type: docType,
         });
-    
+
         const refs = (r.refs || [])
           .map((x) => {
             const a = x?.source_file ? String(x.source_file) : "";
@@ -669,7 +655,7 @@ function App() {
             return s || null;
           })
           .filter(Boolean) as string[];
-    
+
         const assistantMessage: Message = {
           id: (Date.now() + 1).toString(),
           role: "assistant",
@@ -677,21 +663,19 @@ function App() {
           timestamp: new Date(),
           references: refs.length ? refs : undefined,
           sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
-          // Quiz flow is driven by backend, so don't force a local "Next" unless you want it
           showNextButton: false,
         };
 
         setIsTyping(false);
-    
+
         setTimeout(() => {
           setQuizMessages((prev) => [...prev, assistantMessage]);
-          // In quiz, backend typically asks the next prompt; keep waitingForAnswer true
           setQuizState((prev) => ({ ...prev, waitingForAnswer: true, showNextButton: false }));
         }, 50);
       } catch (e: any) {
         setIsTyping(false);
         toast.error(e?.message || "Quiz failed");
-    
+
         const assistantMessage: Message = {
           id: (Date.now() + 1).toString(),
           role: "assistant",
@@ -699,16 +683,15 @@ function App() {
           timestamp: new Date(),
           sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
         };
-    
+
         setTimeout(() => {
           setQuizMessages((prev) => [...prev, assistantMessage]);
         }, 50);
       }
-    
+
       return;
     }
 
-
     setIsTyping(true);
     try {
       const docType = getCurrentDocTypeForChat();
@@ -773,7 +756,7 @@ function App() {
 
   const handleNextQuestion = async () => {
     if (!user) return;
-  
+
     const prompt = "Please give me another question of the same quiz style.";
     const sender: GroupMember = {
       id: user.email,
@@ -781,8 +764,7 @@ function App() {
       email: user.email,
       avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`,
     };
-  
-    // record the "next" action as a user turn (keeps server history consistent)
+
     const userMessage: Message = {
       id: Date.now().toString(),
       role: "user",
@@ -790,10 +772,10 @@ function App() {
       timestamp: new Date(),
       sender,
     };
-  
+
     setQuizMessages((prev) => [...prev, userMessage]);
     setIsTyping(true);
-  
+
     try {
       const docType = getCurrentDocTypeForChat();
       const r = await apiChat({
@@ -803,7 +785,7 @@ function App() {
         language_preference: mapLanguagePref(language),
         doc_type: docType,
       });
-  
+
       const refs = (r.refs || [])
         .map((x) => {
           const a = x?.source_file ? String(x.source_file) : "";
@@ -812,7 +794,7 @@ function App() {
           return s || null;
         })
         .filter(Boolean) as string[];
-  
+
       const assistantMessage: Message = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
@@ -822,9 +804,9 @@ function App() {
         sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
         showNextButton: false,
       };
-  
+
       setIsTyping(false);
-  
+
       setTimeout(() => {
         setQuizMessages((prev) => [...prev, assistantMessage]);
         setQuizState((prev) => ({
@@ -837,7 +819,7 @@ function App() {
     } catch (e: any) {
       setIsTyping(false);
       toast.error(e?.message || "Quiz failed");
-  
+
       const assistantMessage: Message = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
@@ -845,25 +827,25 @@ function App() {
         timestamp: new Date(),
         sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
       };
-  
+
       setTimeout(() => setQuizMessages((prev) => [...prev, assistantMessage]), 50);
     }
   };
 
   const handleStartQuiz = async () => {
     if (!user) return;
-  
+
     setIsTyping(true);
     try {
       const docType = getCurrentDocTypeForChat();
-  
+
       const r = await apiQuizStart({
         user_id: user.email,
         language_preference: mapLanguagePref(language),
         doc_type: docType,
         learning_mode: "quiz",
       });
-  
+
       const refs = (r.refs || [])
         .map((x) => {
           const a = x?.source_file ? String(x.source_file) : "";
@@ -872,7 +854,7 @@ function App() {
           return s || null;
         })
         .filter(Boolean) as string[];
-  
+
       const assistantMessage: Message = {
         id: Date.now().toString(),
         role: "assistant",
@@ -882,18 +864,17 @@ function App() {
         sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
         showNextButton: false,
       };
-  
+
       setIsTyping(false);
-  
+
       setTimeout(() => {
         setQuizMessages((prev) => [...prev, assistantMessage]);
-        // backend will ask: "choose 1 or 2" first; user should answer next
         setQuizState({ currentQuestion: 0, waitingForAnswer: true, showNextButton: false });
       }, 50);
     } catch (e: any) {
       setIsTyping(false);
       toast.error(e?.message || "Start quiz failed");
-  
+
       const assistantMessage: Message = {
         id: Date.now().toString(),
         role: "assistant",
@@ -901,42 +882,51 @@ function App() {
         timestamp: new Date(),
         sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
       };
-  
+
       setTimeout(() => setQuizMessages((prev) => [...prev, assistantMessage]), 50);
     }
   };
 
-
   // =========================
-  // File Upload (FIXED)
+  // ✅ File Upload (FIXED)
   // =========================
   const handleFileUpload = (files: File[]) => {
     const newFiles: UploadedFile[] = files.map((file) => ({ file, type: "other" as FileType }));
     setUploadedFiles((prev) => [...prev, ...newFiles]);
   };
-  
-  // FIX: ChatArea expects index-based removal
+
+  // ✅ FIX 1: index-based removal + clear fingerprint so same file can be re-added
   const handleRemoveFile = (index: number) => {
     setUploadedFiles((prev) => {
       if (index < 0 || index >= prev.length) return prev;
-  
+
       const removed = prev[index]?.file;
       const next = prev.filter((_, i) => i !== index);
-  
-      // 同步清理 fingerprints：否则同一个文件删除后可能无法再次触发 upload/type change
+
       if (removed) {
         const fp = `${removed.name}::${removed.size}::${removed.lastModified}`;
         uploadedFingerprintsRef.current.delete(fp);
       }
-  
+
       return next;
     });
   };
 
+  // ✅ FIX 2: NO await inside setState updater (prevents Vite/esbuild error)
+  const handleFileTypeChange = async (index: number, type: FileType) => {
+    if (!user) return;
 
-    if (!targetFile) return;
+    const target = uploadedFiles[index]?.file;
+    if (!target) return;
+
+    // update UI first (sync)
+    setUploadedFiles((prev) => {
+      if (index < 0 || index >= prev.length) return prev;
+      return prev.map((f, i) => (i === index ? { ...f, type } : f));
+    });
 
-    const fp = `${targetFile.name}::${targetFile.size}::${targetFile.lastModified}`;
+    // de-dupe upload per file fingerprint
+    const fp = `${target.name}::${target.size}::${target.lastModified}`;
     if (uploadedFingerprintsRef.current.has(fp)) return;
     uploadedFingerprintsRef.current.add(fp);
 
@@ -944,10 +934,12 @@ function App() {
       await apiUpload({
         user_id: user.email,
         doc_type: DOC_TYPE_MAP[type] || "Other Course Document",
-        file: targetFile,
+        file: target,
       });
       toast.success("File uploaded to backend");
     } catch (e: any) {
+      // allow retry
+      uploadedFingerprintsRef.current.delete(fp);
       toast.error(e?.message || "Upload failed");
     }
   };
@@ -962,7 +954,11 @@ function App() {
 
         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
+          );
         });
       }) || null
     );