Update web/src/App.tsx

web/src/App.tsx

@@ -1,7 +1,6 @@
 // web/src/App.tsx
 import React, { useState, useEffect, useRef, useMemo } from "react";
 import { Header } from "./components/Header";
-// import { LeftSidebar } from "./components/LeftSidebar";
 import { ChatArea } from "./components/ChatArea";
 import { LoginScreen } from "./components/LoginScreen";
 import { ProfileEditor } from "./components/ProfileEditor";
@@ -45,9 +44,26 @@ export interface Message {
 }
 
 export interface User {
+  // required identity
   name: string;
   email: string;
-  bio?: string;
+
+  // profile fields
+  studentId?: string;
+  department?: string;
+  yearLevel?: string;
+  major?: string;
+  bio?: string; // may be generated by Clare, then user can edit in ProfileEditor
+
+  // learning preferences
+  learningStyle?: string; // "visual" | "auditory" | ...
+  learningPace?: string; // "slow" | "moderate" | "fast"
+
+  // avatar
+  avatarUrl?: string;
+
+  // control flags
+  onboardingCompleted?: boolean;
 }
 
 export interface GroupMember {
@@ -149,6 +165,22 @@ function hydrateSavedChats(raw: any): SavedChat[] {
     .filter(Boolean) as SavedChat[];
 }
 
+// ✅ localStorage helpers for user profile
+function profileStorageKey(email: string) {
+  return `user_profile::${email}`;
+}
+
+function hydrateUserFromStorage(base: User): User {
+  try {
+    const raw = localStorage.getItem(profileStorageKey(base.email));
+    if (!raw) return base;
+    const saved = JSON.parse(raw) as Partial<User>;
+    return { ...base, ...saved };
+  } catch {
+    return base;
+  }
+}
+
 function App() {
   const [isDarkMode, setIsDarkMode] = useState(() => {
     const saved = localStorage.getItem("theme");
@@ -157,6 +189,32 @@ function App() {
 
   const [user, setUser] = useState<User | null>(null);
 
+  // ✅ unified user update helpers
+  const updateUser = (patch: Partial<User>) => {
+    setUser((prev) => (prev ? { ...prev, ...patch } : prev));
+  };
+
+  const handleUserSave = (next: User) => {
+    setUser((prev) => {
+      if (!prev) return next;
+      return {
+        ...prev,
+        ...next,
+        onboardingCompleted: next.onboardingCompleted ?? prev.onboardingCompleted,
+      };
+    });
+  };
+
+  // ✅ persist user profile whenever it changes (per-email)
+  useEffect(() => {
+    if (!user?.email) return;
+    try {
+      localStorage.setItem(profileStorageKey(user.email), JSON.stringify(user));
+    } catch {
+      // ignore
+    }
+  }, [user]);
+
   // -------------------------
   // ✅ Course selection (stable)
   // -------------------------
@@ -563,47 +621,6 @@ function App() {
   const reviewStarOpacity = starOpacity(reviewStarState);
   const reviewEnergyPct = energyPct(reviewStarState);
 
-  const generateQuizQuestion = () => {
-    const questions: Array<{
-      type: "multiple-choice" | "fill-in-blank" | "open-ended";
-      question: string;
-      options?: string[];
-      correctAnswer: string;
-      explanation: string;
-      sampleAnswer?: string;
-    }> = [
-      {
-        type: "multiple-choice",
-        question: "Which of the following is NOT a principle of Responsible AI?",
-        options: ["A) Fairness", "B) Transparency", "C) Profit Maximization", "D) Accountability"],
-        correctAnswer: "C",
-        explanation:
-          "Profit Maximization is not a principle of Responsible AI. The key principles are Fairness, Transparency, and Accountability.",
-      },
-      {
-        type: "fill-in-blank",
-        question:
-          "Algorithmic fairness ensures that AI systems do not discriminate against individuals based on their _____.",
-        correctAnswer: "protected characteristics",
-        explanation:
-          "Protected characteristics include attributes like race, gender, age, religion, etc. AI systems should not discriminate based on these.",
-      },
-      {
-        type: "open-ended",
-        question: "Explain why transparency is important in AI systems.",
-        correctAnswer:
-          "Transparency allows users to understand how AI systems make decisions, which builds trust and enables accountability.",
-        sampleAnswer:
-          "Transparency allows users to understand how AI systems make decisions, which builds trust and enables accountability.",
-        explanation:
-          "Transparency is crucial because it helps users understand AI decision-making processes, enables debugging, and ensures accountability.",
-      },
-    ];
-
-    const randomIndex = Math.floor(Math.random() * questions.length);
-    return questions[randomIndex];
-  };
-
   const getCurrentDocTypeForChat = (): string => {
     if (uploadedFiles.length > 0) {
       const last = uploadedFiles[uploadedFiles.length - 1];
@@ -612,36 +629,32 @@ function App() {
     return "Syllabus";
   };
 
-
   const handleSendMessage = async (content: string) => {
     if (!user) return;
-  
+
     const hasText = !!content.trim();
     const hasFiles = uploadedFiles.length > 0;
-  
-    // ✅ 允许“只发文件不发文字”
+
     if (!hasText && !hasFiles) return;
-  
-    // ✅ 如果用户没写字，但上传了文件：构造一条后端可用的 message
+
     const fileNames = hasFiles ? uploadedFiles.map((f) => f.file.name) : [];
     const fileLine = fileNames.length ? `Uploaded files: ${fileNames.join(", ")}` : "";
-  
+
     const effectiveContent = hasText
       ? content
       : `I've uploaded file(s). Please read them and help me based on their content.\n${fileLine}`.trim();
-  
+
     const sender: GroupMember = {
       id: user.email,
       name: user.name,
       email: user.email,
       avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`,
     };
-  
-    // ✅ 用户消息在 UI 里也要可见（否则会出现空白气泡）
+
     const userVisibleContent = hasText
       ? content
       : `📎 Sent ${fileNames.length} file(s)\n${fileNames.map((n) => `- ${n}`).join("\n")}`;
-  
+
     const userMessage: Message = {
       id: Date.now().toString(),
       role: "user",
@@ -649,17 +662,17 @@ function App() {
       timestamp: new Date(),
       sender,
     };
-  
+
     if (chatMode === "ask") setAskMessages((prev) => [...prev, userMessage]);
     else if (chatMode === "review") setReviewMessages((prev) => [...prev, userMessage]);
     else setQuizMessages((prev) => [...prev, userMessage]);
-  
+
     if (chatMode === "quiz") {
       setIsTyping(true);
-  
+
       try {
         const docType = getCurrentDocTypeForChat();
-  
+
         const r = await apiChat({
           user_id: user.email,
           message: effectiveContent,
@@ -672,13 +685,10 @@ function App() {
           const arr = Array.isArray(raw) ? raw : [];
           return arr
             .map((x) => {
-              //  Case A: backend already returns "file — pX#Y" strings
               if (typeof x === "string") {
                 const s = x.trim();
                 return s ? s : null;
               }
-        
-              //  Case B: backend returns { source_file, section }
               const a = x?.source_file ? String(x.source_file) : "";
               const b = x?.section ? String(x.section) : "";
               const s = `${a}${a && b ? " — " : ""}${b}`.trim();
@@ -686,12 +696,9 @@ function App() {
             })
             .filter(Boolean) as string[];
         };
-        
-        //  support r.refs OR r.references (either name)
-        const refs = normalizeRefs((r as any).refs ?? (r as any).references);
 
+        const refs = normalizeRefs((r as any).refs ?? (r as any).references);
 
-  
         const assistantMessage: Message = {
           id: (Date.now() + 1).toString(),
           role: "assistant",
@@ -701,9 +708,9 @@ function App() {
           sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
           showNextButton: false,
         };
-  
+
         setIsTyping(false);
-  
+
         setTimeout(() => {
           setQuizMessages((prev) => [...prev, assistantMessage]);
           setQuizState((prev) => ({ ...prev, waitingForAnswer: true, showNextButton: false }));
@@ -711,7 +718,7 @@ function App() {
       } catch (e: any) {
         setIsTyping(false);
         toast.error(e?.message || "Quiz failed");
-  
+
         const assistantMessage: Message = {
           id: (Date.now() + 1).toString(),
           role: "assistant",
@@ -719,19 +726,19 @@ 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();
-  
+
       const r = await apiChat({
         user_id: user.email,
         message: effectiveContent,
@@ -739,16 +746,16 @@ function App() {
         language_preference: mapLanguagePref(language),
         doc_type: docType,
       });
-  
+
       const refs = (r.refs || [])
-        .map((x) => {
+        .map((x: any) => {
           const a = x?.source_file ? String(x.source_file) : "";
           const b = x?.section ? String(x.section) : "";
           const s = `${a}${a && b ? " — " : ""}${b}`.trim();
           return s || null;
         })
         .filter(Boolean) as string[];
-  
+
       const assistantMessage: Message = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
@@ -757,14 +764,14 @@ function App() {
         references: refs.length ? refs : undefined,
         sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
       };
-  
+
       setIsTyping(false);
-  
+
       setTimeout(() => {
         if (chatMode === "ask") setAskMessages((prev) => [...prev, assistantMessage]);
         else if (chatMode === "review") setReviewMessages((prev) => [...prev, assistantMessage]);
       }, 50);
-  
+
       try {
         const ml = await apiMemoryline(user.email);
         setMemoryProgress(Math.round((ml.progress_pct ?? 0) * 100));
@@ -774,7 +781,7 @@ function App() {
     } catch (e: any) {
       setIsTyping(false);
       toast.error(e?.message || "Chat failed");
-  
+
       const assistantMessage: Message = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
@@ -782,7 +789,7 @@ function App() {
         timestamp: new Date(),
         sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
       };
-  
+
       setTimeout(() => {
         if (chatMode === "ask") setAskMessages((prev) => [...prev, assistantMessage]);
         if (chatMode === "review") setReviewMessages((prev) => [...prev, assistantMessage]);
@@ -823,7 +830,7 @@ function App() {
       });
 
       const refs = (r.refs || [])
-        .map((x) => {
+        .map((x: any) => {
           const a = x?.source_file ? String(x.source_file) : "";
           const b = x?.section ? String(x.section) : "";
           const s = `${a}${a && b ? " — " : ""}${b}`.trim();
@@ -883,7 +890,7 @@ function App() {
       });
 
       const refs = (r.refs || [])
-        .map((x) => {
+        .map((x: any) => {
           const a = x?.source_file ? String(x.source_file) : "";
           const b = x?.section ? String(x.section) : "";
           const s = `${a}${a && b ? " — " : ""}${b}`.trim();
@@ -926,26 +933,22 @@ function App() {
   // =========================
   //  File Upload (FIXED)
   // =========================
-  // 1) Upload: accept File[] OR FileList OR null
 
   const handleFileUpload = async (input: File[] | FileList | null | undefined) => {
     const files = Array.isArray(input) ? input : input ? Array.from(input) : [];
     if (!files.length) return;
-  
+
     const newFiles: UploadedFile[] = files.map((file) => ({ file, type: "other" as FileType }));
-  
-    // update UI immediately
+
     setUploadedFiles((prev) => [...prev, ...newFiles]);
-  
-    // if not logged in (shouldn't happen), skip backend upload
+
     if (!user) return;
-  
-    // upload to backend right away (default as "Other Course Document")
+
     for (const f of files) {
       const fp = `${f.name}::${f.size}::${f.lastModified}`;
       if (uploadedFingerprintsRef.current.has(fp)) continue;
       uploadedFingerprintsRef.current.add(fp);
-  
+
       try {
         await apiUpload({
           user_id: user.email,
@@ -955,19 +958,17 @@ function App() {
         toast.success(`File uploaded: ${f.name}`);
       } catch (e: any) {
         toast.error(e?.message || `Upload failed: ${f.name}`);
-        // allow retry if failed
         uploadedFingerprintsRef.current.delete(fp);
       }
     }
   };
-  
-  // 2) Remove: accept index OR File OR UploadedFile (use any to avoid prop signature mismatch crash)
+
   const handleRemoveFile = (arg: any) => {
     setUploadedFiles((prev) => {
       if (!prev.length) return prev;
-  
+
       let idx = -1;
-  
+
       if (typeof arg === "number") {
         idx = arg;
       } else {
@@ -977,46 +978,41 @@ function App() {
             : arg instanceof File
             ? (arg as File)
             : null;
-  
+
         if (file) {
           idx = prev.findIndex(
             (x) =>
-              x.file.name === file.name &&
-              x.file.size === file.size &&
-              x.file.lastModified === file.lastModified
+              x.file.name === file.name && x.file.size === file.size && x.file.lastModified === file.lastModified
           );
         }
       }
-  
+
       if (idx < 0 || idx >= prev.length) return prev;
-  
+
       const removed = prev[idx]?.file;
       const next = prev.filter((_, i) => i !== idx);
-  
+
       if (removed) {
         const fp = `${removed.name}::${removed.size}::${removed.lastModified}`;
         uploadedFingerprintsRef.current.delete(fp);
       }
-  
+
       return next;
     });
   };
-  
-  // 3) Type Change: must be async, and must NOT leave "await" outside
+
   const handleFileTypeChange = async (index: number, type: FileType) => {
     if (!user) return;
-  
+
     const target = uploadedFiles[index]?.file;
     if (!target) return;
-  
-    // update UI state immediately
+
     setUploadedFiles((prev) => prev.map((f, i) => (i === index ? { ...f, type } : f)));
-  
-    // dedupe upload per file fingerprint
+
     const fp = `${target.name}::${target.size}::${target.lastModified}`;
     if (uploadedFingerprintsRef.current.has(fp)) return;
     uploadedFingerprintsRef.current.add(fp);
-  
+
     try {
       await apiUpload({
         user_id: user.email,
@@ -1026,7 +1022,6 @@ function App() {
       toast.success("File uploaded to backend");
     } catch (e: any) {
       toast.error(e?.message || "Upload failed");
-      // allow retry if failed
       uploadedFingerprintsRef.current.delete(fp);
     }
   };
@@ -1041,11 +1036,7 @@ 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
     );
@@ -1074,9 +1065,7 @@ function App() {
       return;
     }
 
-    const title = `Chat - ${
-      chatMode === "ask" ? "Ask" : chatMode === "review" ? "Review" : "Quiz"
-    } - ${new Date().toLocaleDateString()}`;
+    const title = `Chat - ${chatMode === "ask" ? "Ask" : chatMode === "review" ? "Review" : "Quiz"} - ${new Date().toLocaleDateString()}`;
 
     const newChat: SavedChat = {
       id: Date.now().toString(),
@@ -1281,19 +1270,25 @@ function App() {
     localStorage.setItem("reviewBannerDismissed", "true");
   };
 
+  // ✅ login: hydrate profile and only show onboarding if not completed
   const handleLogin = (newUser: User) => {
-    setUser(newUser);
-    setShowOnboarding(true);
+    const hydrated = hydrateUserFromStorage(newUser);
+    setUser(hydrated);
+    setShowOnboarding(!hydrated.onboardingCompleted);
   };
 
   const handleOnboardingComplete = (updatedUser: User) => {
-    setUser(updatedUser);
+    handleUserSave({ ...updatedUser, onboardingCompleted: true });
     setShowOnboarding(false);
   };
 
-  const handleOnboardingSkip = () => setShowOnboarding(false);
+  const handleOnboardingSkip = () => {
+    updateUser({ onboardingCompleted: true });
+    setShowOnboarding(false);
+  };
 
   if (!user) return <LoginScreen onLogin={handleLogin} />;
+
   if (showOnboarding && user)
     return <Onboarding user={user} onComplete={handleOnboardingComplete} onSkip={handleOnboardingSkip} />;
 
@@ -1317,7 +1312,7 @@ function App() {
             onCreateWorkspace={handleCreateWorkspace}
             onLogout={() => setUser(null)}
             availableCourses={availableCourses}
-            onUserUpdate={setUser}
+            onUserUpdate={handleUserSave}
             reviewStarOpacity={reviewStarOpacity}
             reviewEnergyPct={reviewEnergyPct}
             onStarClick={() => {
@@ -1329,7 +1324,7 @@ function App() {
         </div>
 
         {showProfileEditor && user && (
-          <ProfileEditor user={user} onSave={setUser} onClose={() => setShowProfileEditor(false)} />
+          <ProfileEditor user={user} onSave={handleUserSave} onClose={() => setShowProfileEditor(false)} />
         )}
 
         {showReviewBanner && (
@@ -1486,10 +1481,9 @@ function App() {
                 showReviewBanner={showReviewBanner}
                 onReviewActivity={handleReviewActivity}
                 currentUserId={user?.email}
-                docType={"Syllabus"} 
-                onProfileBioUpdate={(bio) => {
-                  setUser((prev) => (prev ? { ...prev, bio } : prev));
-                }}
+                docType={"Syllabus"}
+                // ✅ bio is still allowed to be updated by chat/Clare
+                onProfileBioUpdate={(bio) => updateUser({ bio })}
               />
             </div>
           </main>