Update web/src/App.tsx

web/src/App.tsx

@@ -1,67 +1,150 @@
+// web/src/App.tsx
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
+import { Toaster } from "./components/ui/sonner";
+import { Button } from "./components/ui/button";
+
+import { Header } from "./components/Header";
+import { ChatArea } from "./components/ChatArea";
+import { LoginScreen } from "./components/LoginScreen";
+import { ProfileEditor } from "./components/ProfileEditor";
+import { ReviewBanner } from "./components/ReviewBanner";
+import { Onboarding } from "./components/Onboarding";
+
 import { LeftSidebar } from "./components/sidebar/LeftSidebar";
 
+import { X, ChevronLeft, ChevronRight } from "lucide-react";
+
 // backend API bindings
 import { apiChat, apiUpload, apiMemoryline, apiQuizStart } from "./lib/api";
 
-// NEW: review-star logic
-import {
-  type ReviewStarState,
-  type ReviewEventType,
+// =====================
+// Types (keep compatible)
+// =====================
+
+export type LearningMode = "general" | "concept" | "socratic" | "exam" | "assignment" | "summary";
+export type Language = "auto" | "en" | "zh";
+export type ChatMode = "ask" | "review" | "quiz";
+
+export type SpaceType = "individual" | "group";
+
+export type FileType = "syllabus" | "lecture-slides" | "paper" | "other";
+
+export type MessageAttachmentKind = "pdf" | "doc" | "ppt" | "image" | "file";
+
+export interface MessageAttachment {
   name: string;
   kind: MessageAttachmentKind;
   size: number;
-  // 这两个只是展示用，不影响后端
-  fileType?: FileType; // syllabus / lecture-slides / ...
+  fileType?: FileType;
+}
+
+export interface GroupMember {
+  id: string;
+  name: string;
+  email: string;
+  avatar?: string;
+  isAI?: boolean;
+}
+
+export interface CourseInfo {
+  id: string;
+  name: string;
+  instructor?: { name: string; email: string };
+  teachingAssistant?: { name: string; email: string };
+}
+
+export interface Workspace {
+  id: string;
+  name: string;
+  type: SpaceType;
+  avatar?: string;
+  members?: GroupMember[];
+  // optional course binding
+  category?: "course" | "personal";
+  courseName?: string;
+  courseInfo?: CourseInfo;
+  isEditable?: boolean;
+}
+
+export interface SavedItem {
+  id: string;
+  title: string;
+  content: string;
+  type: "export" | "quiz" | "summary";
+  timestamp: Date;
+  isSaved: boolean;
+  format: "pdf" | "text";
+  workspaceId?: string;
+}
+
+export interface SavedChat {
+  id: string;
+  title: string;
+  messages: Message[];
+  chatMode: ChatMode;
+  timestamp: Date;
 }
 
 export interface Message {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  timestamp: Date;
+
+  // ✅ IMPORTANT: chat references for RAG citations
   references?: string[];
+
+  // group mode sender
   sender?: GroupMember;
+
+  // quiz UI helpers
   showNextButton?: boolean;
 
-  // ✅ NEW: show files “with” the user message (metadata only)
+  // files attached with a user message
   attachments?: MessageAttachment[];
 
   questionData?: {
     type: "multiple-choice" | "fill-in-blank" | "open-ended";
     question: string;
+  };
+}
+
+export interface UploadedFile {
+  file: File;
+  type: FileType;
 }
 
 export interface User {
-  // required identity
   name: string;
   email: string;
 
-  // profile fields
   studentId?: string;
   department?: string;
   yearLevel?: string;
   major?: string;
-  bio?: string; // may be generated by Clare, then user can edit in ProfileEditor
+  bio?: string;
 
-  // learning preferences
-  learningStyle?: string; // "visual" | "auditory" | ...
-  learningPace?: string; // "slow" | "moderate" | "fast"
+  learningStyle?: string;
+  learningPace?: string;
 
-  // avatar
   avatarUrl?: string;
 
-  // control flags
   onboardingCompleted?: boolean;
 }
 
-  | "exam"
-  | "assignment"
-  | "summary";
-
-export type Language = "auto" | "en" | "zh";
-export type ChatMode = "ask" | "review" | "quiz";
+// =====================
+// Helpers
+// =====================
 
+const DOC_TYPE_MAP: Record<FileType, string> = {
+  syllabus: "Syllabus",
+  "lecture-slides": "Lecture Slides / PPT",
+  paper: "Literature Review / Paper",
   other: "Other Course Document",
 };
 
-// ✅ NEW: UI courseId -> backend course_id（你后端 logs 显示的是 course_ist345）
+// ✅ NEW: UI courseId -> backend course_id
 const BACKEND_COURSE_ID_MAP: Record<string, string> = {
   course1: "course_ist345",
   course2: "course_ist345",
@@ -69,38 +152,96 @@ const BACKEND_COURSE_ID_MAP: Record<string, string> = {
   course4: "course_ist345",
 };
 
-function mapLanguagePref(lang: Language): string {
+function mapLanguagePref(_lang: Language): string {
+  // 你当前后端 detect_language 会再处理；这里统一给 Auto
   return "Auto";
 }
 
-// ✅ localStorage helpers for saved chats
 function savedChatsStorageKey(email: string) {
   return `saved_chats::${email}`;
 }
-    .filter(Boolean) as SavedChat[];
-}
 
-// ✅ localStorage helpers for user profile
 function profileStorageKey(email: string) {
   return `user_profile::${email}`;
 }
 
+function parseSavedChats(raw: string | null): SavedChat[] {
+  if (!raw) return [];
+  try {
+    const arr = JSON.parse(raw) as any[];
+    if (!Array.isArray(arr)) return [];
+    return arr
+      .map((x) => ({
+        ...x,
+        timestamp: x?.timestamp ? new Date(x.timestamp) : new Date(),
+        messages: Array.isArray(x?.messages)
+          ? x.messages.map((m: any) => ({ ...m, timestamp: m?.timestamp ? new Date(m.timestamp) : new Date() }))
+          : [],
+      }))
+      .filter(Boolean) as SavedChat[];
+  } catch {
+    return [];
+  }
+}
+
+function normalizeRefsToStrings(raw: any): string[] {
+  const arr = Array.isArray(raw) ? raw : [];
+  return arr
+    .map((x) => {
+      if (typeof x === "string") {
+        const s = x.trim();
+        return s ? s : null;
+      }
+      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[];
+}
+
+// =====================
+// App
+// =====================
+
+export default function App() {
+  // -------------------------
+  // Auth / Profile
+  // -------------------------
   const [user, setUser] = useState<User | null>(null);
+  const [showProfileEditor, setShowProfileEditor] = useState(false);
+
+  const hydrateUserFromStorage = (u: User): User => {
+    try {
+      const raw = localStorage.getItem(profileStorageKey(u.email));
+      if (!raw) return u;
+      const prev = JSON.parse(raw) as Partial<User>;
+      return {
+        ...u,
+        ...prev,
+        onboardingCompleted: prev.onboardingCompleted ?? u.onboardingCompleted,
+      };
+    } catch {
+      return u;
+    }
+  };
 
-  // ✅ 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,
+        onboardingCompleted: next.onboardingCompleted ?? prev.onboardingCompleted,
       };
     });
   };
 
-  // ✅ persist user profile whenever it changes (per-email)
+  // persist profile per email
   useEffect(() => {
     if (!user?.email) return;
     try {
@@ -111,7 +252,53 @@ function profileStorageKey(email: string) {
   }, [user]);
 
   // -------------------------
-  // ✅ Course selection (stable)
+  // Onboarding
+  // -------------------------
+  const [showOnboarding, setShowOnboarding] = useState(false);
+
+  useEffect(() => {
+    if (!user) return;
+    setShowOnboarding(!user.onboardingCompleted);
+  }, [user]);
+
+  const handleOnboardingComplete = (updatedUser: User) => {
+    handleUserSave({ ...updatedUser, onboardingCompleted: true });
+    setShowOnboarding(false);
+  };
+
+  const handleOnboardingSkip = () => {
+    setShowOnboarding(false);
+  };
+
+  const handleLogin = (newUser: User) => {
+    const hydrated = hydrateUserFromStorage(newUser);
+    setUser(hydrated);
+  };
+
+  // -------------------------
+  // Workspaces (minimal but compatible)
+  // -------------------------
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [currentWorkspaceId, setCurrentWorkspaceId] = useState<string>("individual");
+
+  useEffect(() => {
+    if (!user) return;
+
+    const userAvatar = `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`;
+    const mySpace: Workspace = { id: "individual", name: "My Space", type: "individual", avatar: userAvatar };
+
+    setWorkspaces([mySpace]);
+    setCurrentWorkspaceId("individual");
+  }, [user?.email]);
+
+  const currentWorkspace = useMemo(() => {
+    return workspaces.find((w) => w.id === currentWorkspaceId) || workspaces[0];
+  }, [workspaces, currentWorkspaceId]);
+
+  const spaceType: SpaceType = currentWorkspace?.type || "individual";
+
+  // -------------------------
+  // Courses
   // -------------------------
   const MYSPACE_COURSE_KEY = "myspace_selected_course";
 
@@ -119,7 +306,6 @@ function profileStorageKey(email: string) {
     return localStorage.getItem(MYSPACE_COURSE_KEY) || "course1";
   });
 
-  // ✅ NEW: computed backend course id
   const backendCourseId = useMemo(() => {
     return BACKEND_COURSE_ID_MAP[currentCourseId] || "course_ist345";
   }, [currentCourseId]);
@@ -128,90 +314,18 @@ function profileStorageKey(email: string) {
     {
       id: "course1",
       name: "Introduction to AI",
-      instructor: {
-        name: "Dr. Sarah Johnson",
-        email: "sarah.johnson@university.edu",
-      },
-      teachingAssistant: {
-        name: "Michael Chen",
-        email: "michael.chen@university.edu",
-      },
+      instructor: { name: "Dr. Sarah Johnson", email: "sarah.johnson@university.edu" },
+      teachingAssistant: { name: "Michael Chen", email: "michael.chen@university.edu" },
     },
     {
       id: "course2",
       name: "Machine Learning",
       instructor: { name: "Prof. David Lee", email: "david.lee@university.edu" },
-      teachingAssistant: {
-        name: "Emily Zhang",
-        email: "emily.zhang@university.edu",
-      },
+      teachingAssistant: { name: "Emily Zhang", email: "emily.zhang@university.edu" },
     },
-    {
-      id: "course3",
-
-    const hasUserMessages = currentMessages.some((msg) => msg.role === "user");
-    const expectedWelcomeId =
-      chatMode === "ask" ? "1" : chatMode === "review" ? "review-1" : "quiz-1";
-
-
-
-
-    const hasWelcomeMessage = currentMessages.some(
-      (msg) => msg.id === expectedWelcomeId && msg.role === "assistant"
-    );
-
-  const [savedChats, setSavedChats] = useState<SavedChat[]>([]);
-
-  // ✅ load saved chats after login
-  useEffect(() => {
-    if (!user?.email) return;
-    try {
-    }
-  }, [user?.email]);
-
-  // ✅ persist saved chats whenever changed
-  useEffect(() => {
-    if (!user?.email) return;
-    try {
-        savedChatsStorageKey(user.email),
-        JSON.stringify(savedChats)
-      );
-    } catch {
-      // ignore
-    }
-  }, [savedChats, user?.email]);
-
-  const [groupMembers] = useState<GroupMember[]>([
-  const [currentWorkspaceId, setCurrentWorkspaceId] =
-    useState<string>("individual");
-
-  // ✅ used to prevent duplicate upload per file fingerprint
-  const uploadedFingerprintsRef = useRef<Set<string>>(new Set());
-
-  useEffect(() => {
-        user.email
-      )}`;
-      const course1Info = availableCourses.find((c) => c.id === "course1");
-      const course2Info = availableCourses.find((c) => c.name === "AI Ethics"); // may be undefined, that's OK
-
-      setWorkspaces([
-        { id: "individual", name: "My Space", type: "individual", avatar: userAvatar },
-
-  const spaceType: SpaceType = currentWorkspace?.type || "individual";
-
-  // =========================
-  // ✅ Scheme 1: "My Space" uses Group-like sidebar view model
-  // =========================
-  const mySpaceCourseInfo = useMemo(() => {
-    return availableCourses.find((c) => c.id === currentCourseId);
-  }, [availableCourses, currentCourseId]);
-    return groupMembers;
-  }, [currentWorkspaceId, mySpaceUserMember, clareMember, groupMembers]);
-
-  // =========================
-  // ✅ Stable course switching logic
-  // =========================
-  const didHydrateMySpaceRef = useRef(false);
+    { id: "course3", name: "NLP Systems" },
+    { id: "course4", name: "AI Engineering" },
+  ];
 
   const handleCourseChange = (nextCourseId: string) => {
     setCurrentCourseId(nextCourseId);
@@ -222,36 +336,106 @@ function profileStorageKey(email: string) {
     }
   };
 
-  useEffect(() => {
-    if (!currentWorkspace) return;
+  // -------------------------
+  // Sidebar state
+  // -------------------------
+  const [leftPanelVisible, setLeftPanelVisible] = useState<boolean>(true);
+  const [leftSidebarOpen, setLeftSidebarOpen] = useState<boolean>(false);
+
+  // -------------------------
+  // Modes / UI state
+  // -------------------------
+  const [learningMode, setLearningMode] = useState<LearningMode>("concept");
+  const [language, setLanguage] = useState<Language>("auto");
+  const [chatMode, setChatMode] = useState<ChatMode>("ask");
 
-    if (currentWorkspace.type === "group" && currentWorkspace.category === "course") {
+  const [showReviewBanner, setShowReviewBanner] = useState<boolean>(false);
 
+  // -------------------------
+  // Messages
+  // -------------------------
+  const initialMessages: Record<ChatMode, Message[]> = useMemo(
+    () => ({
+      ask: [
+        {
+          id: "1",
+          role: "assistant",
+          content:
+            "👋 Hi! I'm Clare, your AI teaching assistant. I'm here to help you learn through personalized tutoring. Feel free to ask me anything about the course materials, or upload your documents to get started!",
+          timestamp: new Date(),
+        },
+      ],
+      review: [
+        {
+          id: "review-1",
+          role: "assistant",
+          content: "📚 Welcome to Review mode! I'll help you review and consolidate your learning. Let's go through what you've learned!",
+          timestamp: new Date(),
+        },
+      ],
+      quiz: [
+        {
+          id: "quiz-1",
+          role: "assistant",
+          content: "🎯 Welcome to Quiz mode! I'll test your understanding with personalized questions based on your learning history. Ready to start?",
+          timestamp: new Date(),
+        },
+      ],
+    }),
+    []
+  );
 
+  const [askMessages, setAskMessages] = useState<Message[]>(initialMessages.ask);
+  const [reviewMessages, setReviewMessages] = useState<Message[]>(initialMessages.review);
+  const [quizMessages, setQuizMessages] = useState<Message[]>(initialMessages.quiz);
 
-      const cid = currentWorkspace.courseInfo?.id;
-      if (cid && cid !== currentCourseId) setCurrentCourseId(cid);
-      didHydrateMySpaceRef.current = false;
-        didHydrateMySpaceRef.current = true;
+  const messages = chatMode === "ask" ? askMessages : chatMode === "review" ? reviewMessages : quizMessages;
 
-        const saved = localStorage.getItem(MYSPACE_COURSE_KEY);
-        const valid = saved && availableCourses.some((c) => c.id === saved) ? saved : undefined;
+  // quiz state kept minimal for ChatArea compatibility
+  const [quizState, setQuizState] = useState<{ currentQuestion: number; waitingForAnswer: boolean; showNextButton: boolean }>({
+    currentQuestion: 0,
+    waitingForAnswer: false,
+    showNextButton: false,
+  });
 
+  const [isTyping, setIsTyping] = useState(false);
+  const [showClearDialog, setShowClearDialog] = useState(false);
 
+  // -------------------------
+  // Saved chats/items
+  // -------------------------
+  const [savedChats, setSavedChats] = useState<SavedChat[]>([]);
+  const [savedItems, setSavedItems] = useState<SavedItem[]>([]);
+  const [recentlySavedId, setRecentlySavedId] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (!user?.email) return;
+    try {
+      const raw = localStorage.getItem(savedChatsStorageKey(user.email));
+      setSavedChats(parseSavedChats(raw));
+    } catch {
+      setSavedChats([]);
+    }
+  }, [user?.email]);
 
-        const next = valid || currentCourseId || "course1";
-        if (next !== currentCourseId) setCurrentCourseId(next);
-    if (currentWorkspace?.type !== "individual") return;
+  useEffect(() => {
+    if (!user?.email) return;
     try {
-      const prev = localStorage.getItem(MYSPACE_COURSE_KEY);
-      if (prev !== currentCourseId) localStorage.setItem(MYSPACE_COURSE_KEY, currentCourseId);
+      localStorage.setItem(savedChatsStorageKey(user.email), JSON.stringify(savedChats));
     } catch {
       // ignore
     }
-  }, [currentCourseId, currentWorkspace?.type]);
+  }, [savedChats, user?.email]);
+
+  // -------------------------
+  // Memoryline
+  // -------------------------
+  const [memoryProgress, setMemoryProgress] = useState<number>(0);
 
   useEffect(() => {
+    if (!user) return;
+    (async () => {
+      try {
         const r = await apiMemoryline(user.email);
         const pct = Math.round((r.progress_pct ?? 0) * 100);
         setMemoryProgress(pct);
@@ -259,108 +443,115 @@ function profileStorageKey(email: string) {
         // silent
       }
     })();
-  }, [user]);
-
-  // =========================
-  // ✅ Review Star (按天) state
-  // =========================
-  const reviewStarKey = useMemo(() => {
-    if (!user) return "";
-    return `review_star::${user.email}::${currentWorkspaceId}`;
-  }, [user, currentWorkspaceId]);
+  }, [user?.email]);
 
-  const [reviewStarState, setReviewStarState] = useState<ReviewStarState | null>(null);
+  // -------------------------
+  // Group members (for sender display)
+  // -------------------------
+  const clareMember: GroupMember = useMemo(
+    () => ({ id: "clare", name: "Clare", email: "clare@ai", isAI: true }),
+    []
+  );
+
+  const mySpaceUserMember: GroupMember | null = useMemo(() => {
+    if (!user) return null;
+    return {
+      id: user.email,
+      name: user.name,
+      email: user.email,
+      avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`,
+    };
+  }, [user?.email, user?.name]);
 
+  const groupMembers: GroupMember[] = useMemo(() => {
+    const base: GroupMember[] = [];
+    if (mySpaceUserMember) base.push(mySpaceUserMember);
+    base.push(clareMember);
+    return base;
+  }, [mySpaceUserMember, clareMember]);
 
-  useEffect(() => {
-    if (!user || !reviewStarKey) return;
-  const reviewStarOpacity = starOpacity(reviewStarState);
-  const reviewEnergyPct = energyPct(reviewStarState);
+  // -------------------------
+  // Uploads
+  // -------------------------
+  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+  const uploadedFingerprintsRef = useRef<Set<string>>(new Set());
 
-  // ✅ FIX: default doc_type should NOT be Syllabus
   const getCurrentDocTypeForChat = (): string => {
     if (uploadedFiles.length > 0) {
       const last = uploadedFiles[uploadedFiles.length - 1];
       return DOC_TYPE_MAP[last.type] || "Other Course Document";
     }
     return "All"; // ✅ IMPORTANT
+  };
 
+  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 }));
+    setUploadedFiles((prev) => [...prev, ...newFiles]);
 
+    if (!user) return;
 
+    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,
+          doc_type: getCurrentDocTypeForChat(),
+          file: f,
+          // @ts-expect-error api.ts accepts course_id in your updated version
+          course_id: backendCourseId,
+        });
+        toast.success(`Uploaded: ${f.name}`);
+      } catch (e: any) {
+        toast.error(e?.message || `Upload failed: ${f.name}`);
+      }
+    }
   };
 
+  // -------------------------
+  // Chat send
+  // -------------------------
   const handleSendMessage = async (content: string) => {
-      ? content
-      : `📎 Sent ${fileNames.length} file(s)\n${fileNames.map((n) => `- ${n}`).join("\n")}`;
+    if (!user) return;
+
+    const trimmed = (content || "").trim();
+    const fileNames = uploadedFiles.map((f) => f.file.name);
+    const effectiveContent =
+      trimmed.length > 0 ? trimmed : fileNames.length ? `📎 Sent ${fileNames.length} file(s)\n${fileNames.map((n) => `- ${n}`).join("\n")}` : "";
+
+    if (!effectiveContent) return;
 
-    // ✅ snapshot attachments at send-time
     const attachmentsSnapshot: MessageAttachment[] = uploadedFiles.map((uf) => {
       const lower = uf.file.name.toLowerCase();
       const kind: MessageAttachmentKind =
-    else if (chatMode === "review") setReviewMessages((prev) => [...prev, userMessage]);
-    else setQuizMessages((prev) => [...prev, userMessage]);
-
-
-
-    if (chatMode === "quiz") {
-      setIsTyping(true);
-
-      try {
-        const docType = getCurrentDocTypeForChat();
+        lower.endsWith(".pdf") ? "pdf" : lower.endsWith(".ppt") || lower.endsWith(".pptx") ? "ppt" : lower.endsWith(".doc") || lower.endsWith(".docx") ? "doc" : lower.match(/\.(png|jpg|jpeg|webp)$/) ? "image" : "file";
+      return {
+        name: uf.file.name,
+        kind,
+        size: uf.file.size,
+        fileType: uf.type,
+      };
+    });
 
-        const r: any = await apiChat({
-          user_id: user.email,
-          message: effectiveContent,
-          learning_mode: "quiz",
-          language_preference: mapLanguagePref(language),
-          doc_type: docType,
-          course_id: backendCourseId, // ✅ NEW
-        } as any);
-
-        const normalizeRefs = (raw: any): string[] => {
-          const arr = Array.isArray(raw) ? raw : [];
-          return arr
-            .map((x) => {
-              if (typeof x === "string") {
-                const s = x.trim();
-                return s ? s : null;
-              }
-              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 refs = normalizeRefs((r as any).refs ?? (r as any).references);
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: "user",
+      content: effectiveContent,
+      timestamp: new Date(),
+      attachments: attachmentsSnapshot.length ? attachmentsSnapshot : undefined,
+      sender: spaceType === "group" ? mySpaceUserMember ?? undefined : undefined,
+    };
 
-          role: "assistant",
-          content: r.reply || "",
-          timestamp: new Date(),
-          references: refs, // ✅ allow []
-          sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
-          showNextButton: false,
-        };
-          role: "assistant",
-          content: "Sorry — quiz request failed. Please try again.",
-          timestamp: new Date(),
+    if (chatMode === "ask") setAskMessages((prev) => [...prev, userMessage]);
+    else if (chatMode === "review") setReviewMessages((prev) => [...prev, userMessage]);
+    else setQuizMessages((prev) => [...prev, userMessage]);
 
-          sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
-        };
+    setIsTyping(true);
 
     try {
       const docType = getCurrentDocTypeForChat();
@@ -368,30 +559,27 @@ function profileStorageKey(email: string) {
       const r: any = await apiChat({
         user_id: user.email,
         message: effectiveContent,
-        learning_mode: learningMode,
+        learning_mode: chatMode === "quiz" ? "quiz" : learningMode,
         language_preference: mapLanguagePref(language),
         doc_type: docType,
-        course_id: backendCourseId, // ✅ NEW
+        course_id: backendCourseId,
       } as any);
 
-      const refs = (r.refs || [])
-        .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 refs = normalizeRefsToStrings(r?.refs ?? r?.references);
 
       const assistantMessage: Message = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
-        content: r.reply || "",
+        content: r?.reply || "",
         timestamp: new Date(),
-        references: refs, // ✅ allow []
-        sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
+        references: refs,
+        sender: spaceType === "group" ? clareMember : undefined,
       };
 
+      if (chatMode === "ask") setAskMessages((prev) => [...prev, assistantMessage]);
+      else if (chatMode === "review") setReviewMessages((prev) => [...prev, assistantMessage]);
+      else setQuizMessages((prev) => [...prev, assistantMessage]);
+
       try {
         const ml = await apiMemoryline(user.email);
         setMemoryProgress(Math.round((ml.progress_pct ?? 0) * 100));
@@ -399,55 +587,30 @@ function profileStorageKey(email: string) {
         // ignore
       }
     } catch (e: any) {
-      setIsTyping(false);
       toast.error(e?.message || "Chat failed");
+      const failMessage: Message = {
+        id: (Date.now() + 1).toString(),
         role: "assistant",
         content: "Sorry — chat request failed. Please try again.",
         timestamp: new Date(),
-
-        sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
+        sender: spaceType === "group" ? clareMember : undefined,
       };
 
-    setQuizMessages((prev) => [...prev, userMessage]);
-    setIsTyping(true);
-
-
-
-    try {
-      const docType = getCurrentDocTypeForChat();
-      const r: any = await apiChat({
-        user_id: user.email,
-        message: prompt,
-        learning_mode: "quiz",
-        language_preference: mapLanguagePref(language),
-        doc_type: docType,
-        course_id: backendCourseId, // ✅ NEW
-      } as any);
-
-      const refs = (r.refs || [])
-        .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",
-        content: "Sorry — quiz request failed. Please try again.",
-        timestamp: new Date(),
-
-        sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
-      };
+      if (chatMode === "ask") setAskMessages((prev) => [...prev, failMessage]);
+      else if (chatMode === "review") setReviewMessages((prev) => [...prev, failMessage]);
+      else setQuizMessages((prev) => [...prev, failMessage]);
+    } finally {
+      setIsTyping(false);
+    }
+  };
 
+  // -------------------------
+  // Quiz start
+  // -------------------------
+  const handleStartQuiz = async () => {
     if (!user) return;
-
     setIsTyping(true);
 
-
-
     try {
       const docType = getCurrentDocTypeForChat();
 
@@ -456,46 +619,49 @@ function profileStorageKey(email: string) {
         language_preference: mapLanguagePref(language),
         doc_type: docType,
         learning_mode: "quiz",
-        course_id: backendCourseId, // ✅ NEW
+        course_id: backendCourseId,
       } as any);
 
-      const refs = (r.refs || [])
-        .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 refs = normalizeRefsToStrings(r?.refs ?? r?.references);
 
       const assistantMessage: Message = {
         id: Date.now().toString(),
         role: "assistant",
-        content: "Sorry — could not start the quiz. Please try again.",
+        content: r?.reply || "",
         timestamp: new Date(),
-
-        sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
+        references: refs,
+        sender: spaceType === "group" ? clareMember : undefined,
       };
 
-    }
-  };
-
-  // =========================
-  //  File Upload (FIXED)
-  // =========================
-
-  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 }));
-
-    setUploadedFiles((prev) => [...prev, ...newFiles]);
+      setChatMode("quiz");
+      setQuizMessages((prev) => {
+        // ensure welcome exists
+        const hasWelcome = prev.some((m) => m.id === "quiz-1" && m.role === "assistant");
+        const base = hasWelcome ? prev : [...initialMessages.quiz];
+        return [...base, assistantMessage];
+      });
 
-    if (!user) return;
+      setQuizState({ currentQuestion: 0, waitingForAnswer: false, showNextButton: false });
+    } catch (e: any) {
+      toast.error(e?.message || "Could not start quiz");
+      setQuizMessages((prev) => [
+        ...prev,
+        {
+          id: Date.now().toString(),
+          role: "assistant",
+          content: "Sorry — could not start the quiz. Please try again.",
+          timestamp: new Date(),
+          sender: spaceType === "group" ? clareMember : undefined,
+        },
+      ]);
+    } finally {
+      setIsTyping(false);
     }
   };
 
+  // -------------------------
+  // Save / Load chats
+  // -------------------------
   const isCurrentChatSaved = (): SavedChat | null => {
     if (messages.length <= 1) return null;
 
@@ -506,11 +672,7 @@ function profileStorageKey(email: string) {
 
         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
     );
@@ -539,9 +701,7 @@ function profileStorageKey(email: string) {
       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(),
@@ -572,36 +732,6 @@ function profileStorageKey(email: string) {
   const handleClearConversation = (shouldSave: boolean = false) => {
     if (shouldSave) handleSaveChat();
 
-    const initialMessages: Record<ChatMode, Message[]> = {
-      ask: [
-        {
-          id: "1",
-          role: "assistant",
-          content:
-            "👋 Hi! I'm Clare, your AI teaching assistant. I'm here to help you learn through personalized tutoring. Feel free to ask me anything about the course materials, or upload your documents to get started!",
-          timestamp: new Date(),
-        },
-      ],
-      review: [
-        {
-          id: "review-1",
-          role: "assistant",
-          content:
-            "📚 Welcome to Review mode! I'll help you review and consolidate your learning. Let's go through what you've learned!",
-          timestamp: new Date(),
-        },
-      ],
-      quiz: [
-        {
-          id: "quiz-1",
-          role: "assistant",
-          content:
-            "🎯 Welcome to Quiz mode! I'll test your understanding with personalized questions based on your learning history. Ready to start?",
-          timestamp: new Date(),
-        },
-      ],
-    };
-
     if (chatMode === "ask") setAskMessages(initialMessages.ask);
     else if (chatMode === "review") setReviewMessages(initialMessages.review);
     else {
@@ -610,6 +740,9 @@ function profileStorageKey(email: string) {
     }
   };
 
+  // -------------------------
+  // Saved items (minimal)
+  // -------------------------
   const handleSave = (
     content: string,
     type: "export" | "quiz" | "summary",
@@ -621,13 +754,7 @@ function profileStorageKey(email: string) {
 
     if (saveAsChat && type !== "summary") {
       const chatMessages: Message[] = [
-        {
-          id: "1",
-          role: "assistant",
-          content:
-            "👋 Hi! I'm Clare, your AI teaching assistant. I'm here to help you learn through personalized tutoring. Feel free to ask me anything about the course materials, or upload your documents to get started!",
-          timestamp: new Date(),
-        },
+        initialMessages.ask[0],
         { id: Date.now().toString(), role: "assistant", content, timestamp: new Date() },
       ];
 
@@ -677,128 +804,48 @@ function profileStorageKey(email: string) {
     toast.success("Removed from saved items");
   };
 
-  const handleCreateWorkspace = (payload: { name: string; category: "course" | "personal"; courseId?: string; invites: string[] }) => {
-    const id = `group-${Date.now()}`;
-    const avatar = `https://api.dicebear.com/7.x/shapes/svg?seed=${encodeURIComponent(payload.name)}`;
-
-    const creatorMember: GroupMember = user
-      ? {
-          id: user.email,
-          name: user.name,
-          email: user.email,
-          avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`,
-        }
-      : { id: "unknown", name: "Unknown", email: "unknown@email.com" };
-
-    const members: GroupMember[] = [
-      creatorMember,
-      ...payload.invites.map((email) => ({
-        id: email,
-        name: email.split("@")[0] || email,
-        email,
-      })),
-    ];
-
-    let newWorkspace: Workspace;
-
-    if (payload.category === "course") {
-      const courseInfo = availableCourses.find((c) => c.id === payload.courseId);
-      newWorkspace = {
-        id,
-        name: payload.name,
-        type: "group",
-        avatar,
-        members,
-        category: "course",
-        courseName: courseInfo?.name || "Untitled Course",
-        courseInfo,
-      };
-    } else {
-      newWorkspace = {
-        id,
-        name: payload.name,
-        type: "group",
-        avatar,
-        members,
-        category: "personal",
-        isEditable: true,
-      };
-    }
-
-    setWorkspaces((prev) => [...prev, newWorkspace]);
-    setCurrentWorkspaceId(id);
-
-    if (payload.category === "course" && payload.courseId) {
-      setCurrentCourseId(payload.courseId);
-    }
-
-    toast.success("New group workspace created");
-  };
-
-  const handleReviewClick = () => {
-    setChatMode("review");
-    setShowReviewBanner(false);
-    localStorage.setItem("reviewBannerDismissed", "true");
-  };
-
-  const handleDismissReviewBanner = () => {
-    setShowReviewBanner(false);
-    localStorage.setItem("reviewBannerDismissed", "true");
-  };
-
-  // ✅ login: hydrate profile and only show onboarding if not completed
-  const handleLogin = (newUser: User) => {
-    const hydrated = hydrateUserFromStorage(newUser);
-    setUser(hydrated);
+  // -------------------------
+  // Render guards
+  // -------------------------
   if (!user) return <LoginScreen onLogin={handleLogin} />;
 
-  if (showOnboarding && user)
+  if (showOnboarding && user) {
     return <Onboarding user={user} onComplete={handleOnboardingComplete} onSkip={handleOnboardingSkip} />;
+  }
 
-
-
-
-
-
-
-
+  // -------------------------
+  // Layout (FIX left sidebar)
+  // -------------------------
   return (
     <div className="fixed inset-0 w-full bg-background overflow-hidden">
       <Toaster />
-            workspaces={workspaces}
-            currentWorkspace={currentWorkspace}
-            onWorkspaceChange={setCurrentWorkspaceId}
-            onCreateWorkspace={handleCreateWorkspace}
-            onLogout={() => setUser(null)}
-            availableCourses={availableCourses}
-            onUserUpdate={handleUserSave}
-        </div>
+
+      <div className="flex flex-col h-full min-h-0 min-w-0 overflow-hidden">
+        <Header
+          workspaces={workspaces}
+          currentWorkspace={currentWorkspace}
+          onWorkspaceChange={setCurrentWorkspaceId}
+          onCreateWorkspace={() => {}}
+          onLogout={() => setUser(null)}
+          availableCourses={availableCourses}
+          onUserUpdate={handleUserSave}
+        />
 
         {showProfileEditor && user && (
           <ProfileEditor user={user} onSave={handleUserSave} onClose={() => setShowProfileEditor(false)} />
-
-
-
-
         )}
 
         {showReviewBanner && (
           <div className="flex-shrink-0 w-full bg-background border-b border-border relative z-50">
-            <ReviewBanner onReview={handleReviewClick} onDismiss={handleDismissReviewBanner} />
-
-
-
-
-
-
-
-
-
-
+            <ReviewBanner
+              onReview={() => setChatMode("review")}
+              onDismiss={() => setShowReviewBanner(false)}
+            />
           </div>
         )}
 
         <div className="flex flex-1 min-h-0 min-w-0 overflow-hidden relative">
+          {/* Desktop: open button when closed */}
           {!leftPanelVisible && (
             <Button
               variant="secondary"
@@ -812,12 +859,14 @@ function profileStorageKey(email: string) {
             </Button>
           )}
 
+          {/* Mobile overlay */}
           {leftSidebarOpen && (
             <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setLeftSidebarOpen(false)} />
           )}
 
+          {/* Desktop sidebar */}
           {leftPanelVisible ? (
-            <aside className="hidden lg:flex w-80 h-full min-h-0 min-w-0 bg-card border-r border-border overflow-hidden relative flex-col">
+            <aside className="hidden lg:flex w-80 flex-shrink-0 h-full min-h-0 bg-card border-r border-border overflow-hidden relative flex-col">
               <Button
                 variant="secondary"
                 size="icon"
@@ -829,14 +878,14 @@ function profileStorageKey(email: string) {
                 <ChevronLeft className="h-3 w-3" />
               </Button>
 
-              <div className="flex-1 min-h-0 min-w-0 overflow-hidden">
+              <div className="flex-1 min-h-0 overflow-hidden">
                 <LeftSidebar
                   learningMode={learningMode}
                   language={language}
                   onLearningModeChange={setLearningMode}
                   onLanguageChange={setLanguage}
-                  spaceType={sidebarSpaceType}
-                  groupMembers={sidebarGroupMembers}
+                  spaceType={spaceType}
+                  groupMembers={groupMembers}
                   user={user}
                   onLogin={setUser}
                   onLogout={() => setUser(null)}
@@ -851,7 +900,7 @@ function profileStorageKey(email: string) {
                   onDeleteSavedChat={handleDeleteSavedChat}
                   onRenameSavedChat={handleRenameSavedChat}
                   currentWorkspaceId={currentWorkspaceId}
-                  workspaces={sidebarWorkspaces}
+                  workspaces={workspaces}
                   selectedCourse={currentCourseId}
                   availableCourses={availableCourses}
                 />
@@ -859,6 +908,7 @@ function profileStorageKey(email: string) {
             </aside>
           ) : null}
 
+          {/* Mobile sidebar */}
           <aside
             className={[
               "fixed lg:hidden z-50",
@@ -882,8 +932,8 @@ function profileStorageKey(email: string) {
                 language={language}
                 onLearningModeChange={setLearningMode}
                 onLanguageChange={setLanguage}
-                spaceType={sidebarSpaceType}
-                groupMembers={sidebarGroupMembers}
+                spaceType={spaceType}
+                groupMembers={groupMembers}
                 user={user}
                 onLogin={setUser}
                 onLogout={() => setUser(null)}
@@ -898,21 +948,22 @@ function profileStorageKey(email: string) {
                 onDeleteSavedChat={handleDeleteSavedChat}
                 onRenameSavedChat={handleRenameSavedChat}
                 currentWorkspaceId={currentWorkspaceId}
-                workspaces={sidebarWorkspaces}
+                workspaces={workspaces}
                 selectedCourse={currentCourseId}
                 availableCourses={availableCourses}
               />
             </div>
           </aside>
 
+          {/* Main */}
           <main className="flex flex-1 min-w-0 min-h-0 overflow-hidden flex-col">
             <div className="flex-1 min-h-0 min-w-0 overflow-hidden">
               <ChatArea
                 isLoggedIn={!!user}
                 learningMode={learningMode}
+                onLearningModeChange={setLearningMode}
                 onClearConversation={() => setShowClearDialog(true)}
                 onSaveChat={handleSaveChat}
-                onLearningModeChange={setLearningMode}
                 spaceType={spaceType}
                 chatMode={chatMode}
                 quizState={quizState}
@@ -933,10 +984,21 @@ function profileStorageKey(email: string) {
                 currentCourseId={currentCourseId}
                 onCourseChange={handleCourseChange}
                 showReviewBanner={showReviewBanner}
-                onReviewActivity={handleReviewActivity}
-                currentUserId={user?.email}
-                docType={getCurrentDocTypeForChat()} // ✅ changed from "Syllabus"
-                // ✅ bio is still allowed to be updated by chat/Clare
+                onReviewActivity={() => {}}
+                currentUserId={user.email}
+                docType={getCurrentDocTypeForChat()}
                 onProfileBioUpdate={(bio) => updateUser({ bio })}
+                // ---- below are typical ChatArea props in your project
+                messages={messages}
+                onSendMessage={handleSendMessage}
+                onUploadFiles={handleFileUpload}
+                onStartQuiz={handleStartQuiz}
+                memoryProgress={memoryProgress}
               />
-            </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}