Update web/src/App.tsx

web/src/App.tsx

@@ -1,26 +1,30 @@
-import React, { useState, useEffect, useRef } 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';
-import { ReviewBanner } from './components/ReviewBanner';
-import { Onboarding } from './components/Onboarding';
-import { X, ChevronLeft, ChevronRight } from 'lucide-react';
-import { Button } from './components/ui/button';
-import { Toaster } from './components/ui/sonner';
-import { toast } from 'sonner';
+// web/src/App.tsx
+import React, { useState, useEffect, useRef } 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";
+import { ReviewBanner } from "./components/ReviewBanner";
+import { Onboarding } from "./components/Onboarding";
+import { X, ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "./components/ui/button";
+import { Toaster } from "./components/ui/sonner";
+import { toast } from "sonner";
+
+// ✅ NEW: backend API bindings
+import { apiChat, apiUpload, apiMemoryline } from "./lib/api";
 
 export interface Message {
   id: string;
-  role: 'user' | 'assistant';
+  role: "user" | "assistant";
   content: string;
   timestamp: Date;
   references?: string[];
   sender?: GroupMember; // For group chat
   showNextButton?: boolean; // For quiz mode
   questionData?: {
-    type: 'multiple-choice' | 'fill-in-blank' | 'open-ended';
+    type: "multiple-choice" | "fill-in-blank" | "open-ended";
     question: string;
     options?: string[];
     correctAnswer: string;
@@ -42,7 +46,7 @@ export interface GroupMember {
   isAI?: boolean;
 }
 
-export type SpaceType = 'individual' | 'group';
+export type SpaceType = "individual" | "group";
 
 export interface CourseInfo {
   id: string;
@@ -63,31 +67,31 @@ export interface Workspace {
   type: SpaceType;
   avatar: string;
   members?: GroupMember[];
-  category?: 'course' | 'personal';
+  category?: "course" | "personal";
   courseName?: string;
   courseInfo?: CourseInfo;
   isEditable?: boolean; // For personal interest workspaces
 }
 
-export type FileType = 'syllabus' | 'lecture-slides' | 'literature-review' | 'other';
+export type FileType = "syllabus" | "lecture-slides" | "literature-review" | "other";
 
 export interface UploadedFile {
   file: File;
   type: FileType;
 }
 
-export type LearningMode = 'general' | 'concept' | 'socratic' | 'exam' | 'assignment' | 'summary';
-export type Language = 'auto' | 'en' | 'zh';
-export type ChatMode = 'ask' | 'review' | 'quiz';
+export type LearningMode = "general" | "concept" | "socratic" | "exam" | "assignment" | "summary";
+export type Language = "auto" | "en" | "zh";
+export type ChatMode = "ask" | "review" | "quiz";
 
 export interface SavedItem {
   id: string;
   title: string;
   content: string;
-  type: 'export' | 'quiz' | 'summary';
+  type: "export" | "quiz" | "summary";
   timestamp: Date;
   isSaved: boolean;
-  format?: 'pdf' | 'text';
+  format?: "pdf" | "text";
   workspaceId: string;
 }
 
@@ -99,102 +103,104 @@ export interface SavedChat {
   timestamp: Date;
 }
 
-type BackendRef = {
-  source_file?: string;
-  section?: string;
+const DOC_TYPE_MAP: Record<FileType, string> = {
+  syllabus: "Syllabus",
+  "lecture-slides": "Lecture Slides / PPT",
+  "literature-review": "Literature Review / Paper",
+  other: "Other Course Document",
 };
 
-type ChatApiResponse = {
-  reply: string;
-  session_status_md?: string;
-  refs?: BackendRef[];
-  latency_ms?: number;
-};
+function mapLanguagePref(lang: Language): string {
+  if (lang === "zh") return "中文";
+  if (lang === "en") return "English";
+  return "Auto";
+}
 
 function App() {
   const [isDarkMode, setIsDarkMode] = useState(() => {
-    const saved = localStorage.getItem('theme');
-    return saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    const saved = localStorage.getItem("theme");
+    return saved === "dark" || (!saved && window.matchMedia("(prefers-color-scheme: dark)").matches);
   });
+
   const [user, setUser] = useState<User | null>(null);
 
-  // Global current course selection
-  const [currentCourseId, setCurrentCourseId] = useState<string>(() => localStorage.getItem('myspace_selected_course') || 'course1');
+  // Global current course selection (My Space only)
+  const [currentCourseId, setCurrentCourseId] = useState<string>(() => localStorage.getItem("myspace_selected_course") || "course1");
 
   // Available courses with instructor/TA info
   const availableCourses: CourseInfo[] = [
     {
-      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' }
+      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" },
     },
     {
-      id: 'course2',
-      name: 'Machine Learning',
-      instructor: { name: 'Prof. David Lee', email: 'david.lee@university.edu' },
-      teachingAssistant: { name: 'Emily Zhang', email: 'emily.zhang@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" },
     },
     {
-      id: 'course3',
-      name: 'Data Structures',
-      instructor: { name: 'Dr. Robert Smith', email: 'robert.smith@university.edu' },
-      teachingAssistant: { name: 'Lisa Wang', email: 'lisa.wang@university.edu' }
+      id: "course3",
+      name: "Data Structures",
+      instructor: { name: "Dr. Robert Smith", email: "robert.smith@university.edu" },
+      teachingAssistant: { name: "Lisa Wang", email: "lisa.wang@university.edu" },
     },
     {
-      id: 'course4',
-      name: 'Web Development',
-      instructor: { name: 'Prof. Maria Garcia', email: 'maria.garcia@university.edu' },
-      teachingAssistant: { name: 'James Brown', email: 'james.brown@university.edu' }
+      id: "course4",
+      name: "Web Development",
+      instructor: { name: "Prof. Maria Garcia", email: "maria.garcia@university.edu" },
+      teachingAssistant: { name: "James Brown", email: "james.brown@university.edu" },
     },
   ];
 
   // Separate messages for each chat mode
   const [askMessages, setAskMessages] = useState<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!",
+      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(),
-    }
+    },
   ]);
+
   const [reviewMessages, setReviewMessages] = useState<Message[]>([
     {
-      id: 'review-1',
-      role: 'assistant',
+      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(),
-    }
+    },
   ]);
+
   const [quizMessages, setQuizMessages] = useState<Message[]>([
     {
-      id: 'quiz-1',
-      role: 'assistant',
+      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 [learningMode, setLearningMode] = useState<LearningMode>('concept');
-  const [language, setLanguage] = useState<Language>('auto');
-  const [chatMode, setChatMode] = useState<ChatMode>('ask');
+  const [learningMode, setLearningMode] = useState<LearningMode>("concept");
+  const [language, setLanguage] = useState<Language>("auto");
+  const [chatMode, setChatMode] = useState<ChatMode>("ask");
 
-  // Get current messages based on chat mode
-  const messages = chatMode === 'ask' ? askMessages : chatMode === 'review' ? reviewMessages : quizMessages;
+  const messages = chatMode === "ask" ? askMessages : chatMode === "review" ? reviewMessages : quizMessages;
 
-  // Track previous chat mode to detect mode changes
   const prevChatModeRef = useRef<ChatMode>(chatMode);
 
   // Ensure welcome message exists when switching modes or when messages are empty
   useEffect(() => {
-    // Check the actual state arrays, not the computed messages
     let currentMessages: Message[];
     let setCurrentMessages: (messages: Message[]) => void;
 
-    if (chatMode === 'ask') {
+    if (chatMode === "ask") {
       currentMessages = askMessages;
       setCurrentMessages = setAskMessages;
-    } else if (chatMode === 'review') {
+    } else if (chatMode === "review") {
       currentMessages = reviewMessages;
       setCurrentMessages = setReviewMessages;
     } else {
@@ -202,42 +208,49 @@ function App() {
       setCurrentMessages = setQuizMessages;
     }
 
-    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 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 modeChanged = prevChatModeRef.current !== chatMode;
 
-    // If mode changed or messages are empty or missing welcome message, restore welcome message
     if ((modeChanged || currentMessages.length === 0 || !hasWelcomeMessage) && !hasUserMessages) {
       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(),
-        }],
+        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(),
+          },
+        ],
       };
 
       setCurrentMessages(initialMessages[chatMode]);
     }
 
     prevChatModeRef.current = chatMode;
-  }, [chatMode, askMessages.length, reviewMessages.length, quizMessages.length]); // Only depend on lengths to avoid infinite loops
+  }, [chatMode, askMessages.length, reviewMessages.length, quizMessages.length]);
 
   const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
   const [memoryProgress, setMemoryProgress] = useState(36);
+
   const [quizState, setQuizState] = useState<{
     currentQuestion: number;
     waitingForAnswer: boolean;
@@ -247,21 +260,18 @@ function App() {
     waitingForAnswer: false,
     showNextButton: false,
   });
+
   const [isTyping, setIsTyping] = useState(false);
   const [leftSidebarOpen, setLeftSidebarOpen] = useState(false);
   const [leftPanelVisible, setLeftPanelVisible] = useState(true);
   const [showProfileEditor, setShowProfileEditor] = useState(false);
   const [showOnboarding, setShowOnboarding] = useState(false);
-  const [exportResult, setExportResult] = useState('');
 
   // Review banner state
   const [showReviewBanner, setShowReviewBanner] = useState(() => {
-    // Temporarily force show for testing - remove this after confirming it works
-    // const dismissed = localStorage.getItem('reviewBannerDismissed');
-    // return !dismissed || dismissed === 'false';
-    return true; // Force show for testing
+    return true; // force show for testing (as you had)
   });
-  const [resultType, setResultType] = useState<'export' | 'quiz' | 'summary' | null>(null);
+
   const [showClearDialog, setShowClearDialog] = useState(false);
 
   // Saved conversations/summaries
@@ -273,125 +283,51 @@ function App() {
 
   // Mock group members
   const [groupMembers] = useState<GroupMember[]>([
-    { id: 'clare', name: 'Clare AI', email: 'clare@ai.assistant', isAI: true },
-    { id: '1', name: 'Sarah Johnson', email: 'sarah.j@university.edu' },
-    { id: '2', name: 'Michael Chen', email: 'michael.c@university.edu' },
-    { id: '3', name: 'Emma Williams', email: 'emma.w@university.edu' },
+    { id: "clare", name: "Clare AI", email: "clare@ai.assistant", isAI: true },
+    { id: "1", name: "Sarah Johnson", email: "sarah.j@university.edu" },
+    { id: "2", name: "Michael Chen", email: "michael.c@university.edu" },
+    { id: "3", name: "Emma Williams", email: "emma.w@university.edu" },
   ]);
 
-  // Workspaces - individual workspace uses user's avatar, group workspaces use group avatars
+  // Workspaces
   const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
-  const [currentWorkspaceId, setCurrentWorkspaceId] = useState<string>('individual');
-
-  // -----------------------------
-  // Backend mapping helpers
-  // -----------------------------
-  function toBackendLearningMode(mode: LearningMode): string {
-    switch (mode) {
-      case 'concept': return 'Concept Explainer';
-      case 'socratic': return 'Socratic Tutor';
-      case 'exam': return 'Exam Prep';
-      case 'assignment': return 'Assignment Helper';
-      case 'summary': return 'Quick Summary';
-      case 'general':
-      default: return 'General';
-    }
-  }
-
-  function toBackendLanguagePreference(lang: Language): string {
-    switch (lang) {
-      case 'en': return 'English';
-      case 'zh': return '中文';
-      case 'auto':
-      default: return 'Auto';
-    }
-  }
-
-  function toBackendDocTypeFromUploaded(files: UploadedFile[]): string {
-    // Prefer non-syllabus doc type if present; else Syllabus if exists; else Other
-    const hasSyllabus = files.some(f => f.type === 'syllabus');
-    const firstNonSyllabus = files.find(f => f.type !== 'syllabus');
-
-    const map: Record<FileType, string> = {
-      'syllabus': 'Syllabus',
-      'lecture-slides': 'Lecture Slides / PPT',
-      'literature-review': 'Literature Review / Paper',
-      'other': 'Other Course Document',
-    };
-
-    if (firstNonSyllabus) return map[firstNonSyllabus.type];
-    if (hasSyllabus) return map['syllabus'];
-    return map['other'];
-  }
+  const [currentWorkspaceId, setCurrentWorkspaceId] = useState<string>("individual");
 
-  function formatRefs(refs?: BackendRef[]): string[] | undefined {
-    if (!refs || refs.length === 0) return undefined;
-    const lines = refs
-      .map(r => {
-        const a = (r.source_file || '').trim();
-        const b = (r.section || '').trim();
-        if (a && b) return `${a} — ${b}`;
-        if (a) return a;
-        if (b) return b;
-        return '';
-      })
-      .filter(Boolean);
-    return lines.length ? lines : undefined;
-  }
-
-  async function callChatApi(payload: {
-    user_id: string;
-    message: string;
-    learning_mode: string;
-    language_preference: string;
-    doc_type: string;
-  }): Promise<ChatApiResponse> {
-    const res = await fetch('/api/chat', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(payload),
-    });
-
-    if (!res.ok) {
-      const text = await res.text().catch(() => '');
-      throw new Error(`Chat API failed: ${res.status} ${res.statusText}${text ? ` - ${text}` : ''}`);
-    }
-
-    return res.json();
-  }
+  // Avoid double upload for same file
+  const uploadedFingerprintsRef = useRef<Set<string>>(new Set());
 
   // Initialize workspaces when user logs in
   useEffect(() => {
     if (user) {
       const userAvatar = `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`;
-      const course1Info = availableCourses.find(c => c.id === 'course1');
-      const course2Info = availableCourses.find(c => c.name === 'AI Ethics');
+      const course1Info = availableCourses.find((c) => c.id === "course1");
+      const course2Info = availableCourses.find((c) => c.name === "AI Ethics"); // may be undefined
 
       setWorkspaces([
         {
-          id: 'individual',
-          name: 'My Space',
-          type: 'individual',
+          id: "individual",
+          name: "My Space",
+          type: "individual",
           avatar: userAvatar,
         },
         {
-          id: 'group-1',
-          name: 'CS 101 Study Group',
-          type: 'group',
-          avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=cs101group',
+          id: "group-1",
+          name: "CS 101 Study Group",
+          type: "group",
+          avatar: "https://api.dicebear.com/7.x/shapes/svg?seed=cs101group",
           members: groupMembers,
-          category: 'course',
-          courseName: course1Info?.name || 'CS 101',
+          category: "course",
+          courseName: course1Info?.name || "CS 101",
           courseInfo: course1Info,
         },
         {
-          id: 'group-2',
-          name: 'AI Ethics Team',
-          type: 'group',
-          avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=aiethicsteam',
+          id: "group-2",
+          name: "AI Ethics Team",
+          type: "group",
+          avatar: "https://api.dicebear.com/7.x/shapes/svg?seed=aiethicsteam",
           members: groupMembers,
-          category: 'course',
-          courseName: course2Info?.name || 'AI Ethics',
+          category: "course",
+          courseName: course2Info?.name || "AI Ethics",
           courseInfo: course2Info,
         },
       ]);
@@ -399,35 +335,56 @@ function App() {
   }, [user, groupMembers, availableCourses]);
 
   // Get current workspace
-  const currentWorkspace = workspaces.find(w => w.id === currentWorkspaceId) || workspaces[0];
-  const spaceType: SpaceType = currentWorkspace?.type || 'individual';
+  const currentWorkspace = workspaces.find((w) => w.id === currentWorkspaceId) || workspaces[0];
+  const spaceType: SpaceType = currentWorkspace?.type || "individual";
 
   // Keep current course in sync with workspace type
   useEffect(() => {
     if (!currentWorkspace) return;
-    if (currentWorkspace.type === 'group' && currentWorkspace.category === 'course' && currentWorkspace.courseName) {
-      setCurrentCourseId(currentWorkspace.courseName);
-    } else if (currentWorkspace.type === 'individual') {
-      const saved = localStorage.getItem('myspace_selected_course');
+
+    if (currentWorkspace.type === "group" && currentWorkspace.category === "course") {
+      // ✅ FIX: keep courseId as id (not name)
+      const cid = currentWorkspace.courseInfo?.id;
+      if (cid) setCurrentCourseId(cid);
+      return;
+    }
+
+    if (currentWorkspace.type === "individual") {
+      const saved = localStorage.getItem("myspace_selected_course");
       if (saved) setCurrentCourseId(saved);
     }
   }, [currentWorkspaceId, currentWorkspace]);
 
   // Persist selection for My Space
   useEffect(() => {
-    if (currentWorkspace?.type === 'individual') {
-      localStorage.setItem('myspace_selected_course', currentCourseId);
+    if (currentWorkspace?.type === "individual") {
+      localStorage.setItem("myspace_selected_course", currentCourseId);
     }
   }, [currentCourseId, currentWorkspace]);
 
   useEffect(() => {
-    document.documentElement.classList.toggle('dark', isDarkMode);
-    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+    document.documentElement.classList.toggle("dark", isDarkMode);
+    localStorage.setItem("theme", isDarkMode ? "dark" : "light");
   }, [isDarkMode]);
 
+  // Pull memoryline progress (optional, but makes the UI real)
+  useEffect(() => {
+    if (!user) return;
+
+    (async () => {
+      try {
+        const r = await apiMemoryline(user.email);
+        const pct = Math.round((r.progress_pct ?? 0) * 100);
+        setMemoryProgress(pct);
+      } catch {
+        // silent; do not block UI
+      }
+    })();
+  }, [user]);
+
   const generateQuizQuestion = () => {
     const questions: Array<{
-      type: 'multiple-choice' | 'fill-in-blank' | 'open-ended';
+      type: "multiple-choice" | "fill-in-blank" | "open-ended";
       question: string;
       options?: string[];
       correctAnswer: string;
@@ -435,35 +392,49 @@ function App() {
       sampleAnswer?: string;
     }> = [
       {
-        type: 'multiple-choice',
+        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."
+        explanation: "Profit Maximization is not a principle of Responsible AI. The key principles are Fairness, Transparency, and Accountability.",
       },
       {
-        type: 'fill-in-blank',
+        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."
+        explanation:
+          "Protected characteristics include attributes like race, gender, age, religion, etc. AI systems should not discriminate based on these.",
       },
       {
-        type: 'open-ended',
+        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."
-      }
+        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];
   };
 
+  // Pick doc_type for chat:
+  // - if any uploaded files: use the most recent file's selected type
+  // - else: default to Syllabus
+  const getCurrentDocTypeForChat = (): string => {
+    if (uploadedFiles.length > 0) {
+      const last = uploadedFiles[uploadedFiles.length - 1];
+      return DOC_TYPE_MAP[last.type] || "Syllabus";
+    }
+    return "Syllabus";
+  };
+
   const handleSendMessage = async (content: string) => {
     if (!content.trim() || !user) return;
 
-    // Attach sender info for all user messages
     const sender: GroupMember = {
       id: user.email,
       name: user.name,
@@ -473,118 +444,114 @@ function App() {
 
     const userMessage: Message = {
       id: Date.now().toString(),
-      role: 'user',
+      role: "user",
       content,
       timestamp: new Date(),
       sender,
     };
 
-    // Add user message to the appropriate mode's message list
-    if (chatMode === 'ask') {
-      setAskMessages(prev => [...prev, userMessage]);
-    } else if (chatMode === 'review') {
-      setReviewMessages(prev => [...prev, userMessage]);
+    if (chatMode === "ask") {
+      setAskMessages((prev) => [...prev, userMessage]);
+    } else if (chatMode === "review") {
+      setReviewMessages((prev) => [...prev, userMessage]);
     } else {
-      setQuizMessages(prev => [...prev, userMessage]);
+      setQuizMessages((prev) => [...prev, userMessage]);
     }
 
-    // -----------------------------
-    // Quiz mode: keep existing local simulation
-    // -----------------------------
-    if (chatMode === 'quiz') {
+    // Quiz mode stays mock for now (your current behavior)
+    if (chatMode === "quiz") {
       if (quizState.waitingForAnswer) {
-        // User is answering a question
-        const isCorrect = Math.random() > 0.3; // Simulate answer checking
-
+        const isCorrect = Math.random() > 0.3;
         setIsTyping(true);
-        setTimeout(() => {
-          const feedback = isCorrect
-            ? "✅ Correct! Great job!"
-            : "❌ Not quite right, but good effort!";
 
-          const explanation = "Here's the explanation: The correct answer demonstrates understanding of the key concepts. Let me break it down for you...";
+        setTimeout(() => {
+          const feedback = isCorrect ? "✅ Correct! Great job!" : "❌ Not quite right, but good effort!";
+          const explanation =
+            "Here's the explanation: The correct answer demonstrates understanding of the key concepts. Let me break it down for you...";
 
           const assistantMessage: Message = {
             id: (Date.now() + 1).toString(),
-            role: 'assistant',
+            role: "assistant",
             content: `${feedback}\n\n${explanation}`,
             timestamp: new Date(),
-            sender: spaceType === 'group' ? groupMembers.find(m => m.isAI) : undefined,
+            sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
             showNextButton: true,
           };
 
-          // Close typing indicator first
           setIsTyping(false);
-
-          // Wait a bit to ensure typing indicator disappears before adding message
           setTimeout(() => {
-            setQuizMessages(prev => [...prev, assistantMessage]);
-            setQuizState(prev => ({ ...prev, waitingForAnswer: false, showNextButton: true }));
+            setQuizMessages((prev) => [...prev, assistantMessage]);
+            setQuizState((prev) => ({ ...prev, waitingForAnswer: false, showNextButton: true }));
           }, 50);
         }, 2000);
       }
       return;
     }
 
-    // -----------------------------
-    // Ask + Review: call backend /api/chat
-    // -----------------------------
-    const shouldAIRespond = true;
-    if (!shouldAIRespond) return;
-
+    // Ask / Review: real backend call
     setIsTyping(true);
-
     try {
-      const docType = toBackendDocTypeFromUploaded(uploadedFiles);
+      const docType = getCurrentDocTypeForChat();
 
-      const resp = await callChatApi({
+      const r = await apiChat({
         user_id: user.email,
         message: content,
-        learning_mode: toBackendLearningMode(learningMode),
-        language_preference: toBackendLanguagePreference(language),
+        learning_mode: learningMode,
+        language_preference: mapLanguagePref(language),
         doc_type: docType,
       });
 
+      const refs = (r.refs || [])
+        .map((x) => {
+          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: (resp.reply || '').trim() || '(No response)',
+        role: "assistant",
+        content: r.reply || "",
         timestamp: new Date(),
-        references: formatRefs(resp.refs),
-        sender: spaceType === 'group' ? groupMembers.find(m => m.isAI) : undefined,
+        references: refs.length ? refs : undefined,
+        sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
       };
 
       setIsTyping(false);
 
-      // Ensure typing indicator disappears before adding message
       setTimeout(() => {
-        if (chatMode === 'ask') {
-          setAskMessages(prev => [...prev, assistantMessage]);
-        } else if (chatMode === 'review') {
-          setReviewMessages(prev => [...prev, assistantMessage]);
+        if (chatMode === "ask") {
+          setAskMessages((prev) => [...prev, assistantMessage]);
+        } else if (chatMode === "review") {
+          setReviewMessages((prev) => [...prev, assistantMessage]);
         }
       }, 50);
-    } catch (err: any) {
-      console.error(err);
+
+      // refresh memory progress (best-effort)
+      try {
+        const ml = await apiMemoryline(user.email);
+        setMemoryProgress(Math.round((ml.progress_pct ?? 0) * 100));
+      } catch {
+        // ignore
+      }
+    } catch (e: any) {
       setIsTyping(false);
+      toast.error(e?.message || "Chat failed");
 
       const assistantMessage: Message = {
         id: (Date.now() + 1).toString(),
-        role: 'assistant',
-        content: "Sorry — I couldn't reach the chat server right now. Please try again in a moment.",
+        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" ? groupMembers.find((m) => m.isAI) : undefined,
       };
 
       setTimeout(() => {
-        if (chatMode === 'ask') {
-          setAskMessages(prev => [...prev, assistantMessage]);
-        } else if (chatMode === 'review') {
-          setReviewMessages(prev => [...prev, assistantMessage]);
-        }
+        if (chatMode === "ask") setAskMessages((prev) => [...prev, assistantMessage]);
+        if (chatMode === "review") setReviewMessages((prev) => [...prev, assistantMessage]);
       }, 50);
-
-      toast.error('Chat failed. Check the API server logs.');
     }
   };
 
@@ -593,31 +560,29 @@ function App() {
     const question = generateQuizQuestion();
     let questionText = question.question;
 
-    if (question.type === 'multiple-choice') {
-      questionText += '\n\n' + question.options!.join('\n');
+    if (question.type === "multiple-choice") {
+      questionText += "\n\n" + (question.options || []).join("\n");
     }
 
     setTimeout(() => {
       const assistantMessage: Message = {
         id: Date.now().toString(),
-        role: 'assistant',
+        role: "assistant",
         content: questionText,
         timestamp: new Date(),
-        sender: spaceType === 'group' ? groupMembers.find(m => m.isAI) : undefined,
+        sender: spaceType === "group" ? groupMembers.find((m) => m.isAI) : undefined,
         questionData: question,
       };
 
-      // Close typing indicator first
       setIsTyping(false);
 
-      // Wait a bit to ensure typing indicator disappears before adding message
       setTimeout(() => {
-        setQuizMessages(prev => [...prev, assistantMessage]);
-        setQuizState(prev => ({
+        setQuizMessages((prev) => [...prev, assistantMessage]);
+        setQuizState((prev) => ({
           ...prev,
           currentQuestion: prev.currentQuestion + 1,
           waitingForAnswer: true,
-          showNextButton: false
+          showNextButton: false,
         }));
       }, 50);
     }, 2000);
@@ -628,61 +593,78 @@ function App() {
   };
 
   const handleFileUpload = (files: File[]) => {
-    const newFiles: UploadedFile[] = files.map(file => ({
+    const newFiles: UploadedFile[] = files.map((file) => ({
       file,
-      type: 'other' as FileType, // Default type
+      type: "other" as FileType, // default; user will confirm type in ChatArea dialog
     }));
-    setUploadedFiles(prev => [...prev, ...newFiles]);
+    setUploadedFiles((prev) => [...prev, ...newFiles]);
   };
 
   const handleRemoveFile = (index: number) => {
-    setUploadedFiles(prev => prev.filter((_, i) => i !== index));
+    setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
   };
 
-  const handleFileTypeChange = (index: number, type: FileType) => {
-    setUploadedFiles(prev => prev.map((file, i) =>
-      i === index ? { ...file, type } : file
-    ));
+  const handleFileTypeChange = async (index: number, type: FileType) => {
+    // update FE state first
+    setUploadedFiles((prev) =>
+      prev.map((file, i) => (i === index ? { ...file, type } : file))
+    );
+
+    // upload to backend once (best effort)
+    if (!user) return;
+
+    const target = uploadedFiles[index];
+    const file = target?.file;
+    if (!file) return;
+
+    const fp = `${file.name}::${file.size}::${file.lastModified}`;
+    if (uploadedFingerprintsRef.current.has(fp)) return;
+
+    uploadedFingerprintsRef.current.add(fp);
+
+    try {
+      await apiUpload({
+        user_id: user.email,
+        doc_type: DOC_TYPE_MAP[type] || "Other Course Document",
+        file,
+      });
+      toast.success("File uploaded to backend");
+    } catch (e: any) {
+      toast.error(e?.message || "Upload failed");
+    }
   };
 
   // Helper function to check if current chat is already saved
   const isCurrentChatSaved = (): SavedChat | null => {
     if (messages.length <= 1) return null;
 
-    // Find a saved chat that matches the current messages and chatMode
-    return savedChats.find(chat => {
-      if (chat.chatMode !== chatMode) return false;
-      if (chat.messages.length !== messages.length) return false;
-
-      // Check if all messages match
-      return chat.messages.every((savedMsg, index) => {
-        const currentMsg = messages[index];
-        return (
-          savedMsg.id === currentMsg.id &&
-          savedMsg.role === currentMsg.role &&
-          savedMsg.content === currentMsg.content
-        );
-      });
-    }) || null;
+    return (
+      savedChats.find((chat) => {
+        if (chat.chatMode !== chatMode) return false;
+        if (chat.messages.length !== messages.length) return false;
+
+        return chat.messages.every((savedMsg, idx) => {
+          const currentMsg = messages[idx];
+          return savedMsg.id === currentMsg.id && savedMsg.role === currentMsg.role && savedMsg.content === currentMsg.content;
+        });
+      }) || null
+    );
   };
 
   const handleSaveChat = () => {
     if (messages.length <= 1) {
-      toast.info('No conversation to save');
+      toast.info("No conversation to save");
       return;
     }
 
-    // Check if already saved
     const existingChat = isCurrentChatSaved();
     if (existingChat) {
-      // Unsave: remove from saved chats
       handleDeleteSavedChat(existingChat.id);
-      toast.success('Chat unsaved');
+      toast.success("Chat unsaved");
       return;
     }
 
-    // Save: add new chat
-    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(),
       title,
@@ -691,23 +673,20 @@ function App() {
       timestamp: new Date(),
     };
 
-    setSavedChats(prev => [newChat, ...prev]);
+    setSavedChats((prev) => [newChat, ...prev]);
     setLeftPanelVisible(true);
-    toast.success('Chat saved!');
+    toast.success("Chat saved!");
   };
 
   const handleLoadChat = (savedChat: SavedChat) => {
-    // Set the chat mode first
     setChatMode(savedChat.chatMode);
 
-    // Then set the messages for that mode
-    if (savedChat.chatMode === 'ask') {
+    if (savedChat.chatMode === "ask") {
       setAskMessages(savedChat.messages);
-    } else if (savedChat.chatMode === 'review') {
+    } else if (savedChat.chatMode === "review") {
       setReviewMessages(savedChat.messages);
     } else {
       setQuizMessages(savedChat.messages);
-      // Reset quiz state
       setQuizState({
         currentQuestion: 0,
         waitingForAnswer: false,
@@ -715,19 +694,17 @@ function App() {
       });
     }
 
-    toast.success('Chat loaded!');
+    toast.success("Chat loaded!");
   };
 
   const handleDeleteSavedChat = (id: string) => {
-    setSavedChats(prev => prev.filter(chat => chat.id !== id));
-    toast.success('Chat deleted');
+    setSavedChats((prev) => prev.filter((chat) => chat.id !== id));
+    toast.success("Chat deleted");
   };
 
   const handleRenameSavedChat = (id: string, newTitle: string) => {
-    setSavedChats(prev => prev.map(chat =>
-      chat.id === id ? { ...chat, title: newTitle } : chat
-    ));
-    toast.success('Chat renamed');
+    setSavedChats((prev) => prev.map((chat) => (chat.id === id ? { ...chat, title: newTitle } : chat)));
+    toast.success("Chat renamed");
   };
 
   const handleClearConversation = (shouldSave: boolean = false) => {
@@ -736,30 +713,36 @@ function App() {
     }
 
     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(),
-      }],
+      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(),
+        },
+      ],
     };
 
-    // Clear only the current mode's conversation
-    if (chatMode === 'ask') {
+    if (chatMode === "ask") {
       setAskMessages(initialMessages.ask);
-    } else if (chatMode === 'review') {
+    } else if (chatMode === "review") {
       setReviewMessages(initialMessages.review);
     } else {
       setQuizMessages(initialMessages.quiz);
@@ -771,128 +754,54 @@ function App() {
     }
   };
 
-  const handleExport = () => {
-    const result = `# Conversation Export
-Date: ${new Date().toLocaleDateString()}
-Student: ${user?.name}
-
-## Summary
-This conversation covered key concepts in Module 10 – Responsible AI, including ethical considerations, fairness, transparency, and accountability in AI systems.
-
-## Key Takeaways
-1. Understanding the principles of Responsible AI
-2. Real-world applications and implications
-3. Best practices for ethical AI development
-
-Exported successfully! ✓`;
-
-    setExportResult(result);
-    setResultType('export');
-    toast.success('Conversation exported!');
-  };
-
-  const handleQuiz = () => {
-    const quiz = `# Micro-Quiz: Responsible AI
-
-**Question 1:** Which of the following is a key principle of Responsible AI?
-a) Profit maximization
-b) Transparency
-c) Rapid deployment
-d) Cost reduction
-
-**Question 2:** What is algorithmic fairness?
-(Short answer expected)
-
-**Question 3:** True or False: AI systems should always prioritize accuracy over fairness.
-
-Generate quiz based on your conversation!`;
-
-    setExportResult(quiz);
-    setResultType('quiz');
-    toast.success('Quiz generated!');
-  };
-
-  const handleSummary = () => {
-    const summary = `# Learning Summary
-
-## Today's Session
-**Duration:** 25 minutes
-**Topics Covered:** 3
-**Messages Exchanged:** 12
-
-## Key Concepts Discussed
-• Principles of Responsible AI
-• Ethical considerations in AI development
-• Fairness and transparency in algorithms
-
-## Recommended Next Steps
-1. Review Module 10, Section 2.3
-2. Complete practice quiz on algorithmic fairness
-3. Read additional resources on AI ethics
-
-## Progress Update
-You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
-
-    setExportResult(summary);
-    setResultType('summary');
-    toast.success('Summary generated!');
-  };
-
   const handleSave = (
     content: string,
-    type: 'export' | 'quiz' | 'summary',
+    type: "export" | "quiz" | "summary",
     saveAsChat: boolean = false,
-    format: 'pdf' | 'text' = 'text',
+    format: "pdf" | "text" = "text",
     workspaceId?: string
   ) => {
     if (!content.trim()) return;
 
-    // Summary should always be saved as file, not chat
-    // If saving as chat (from RightPanel export/quiz only, not summary)
-    if (saveAsChat && type !== 'summary') {
-      // Convert the export result to a chat format
-      // Create messages from the export content
+    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!",
+          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(),
         },
         {
           id: Date.now().toString(),
-          role: 'assistant',
+          role: "assistant",
           content,
           timestamp: new Date(),
-        }
+        },
       ];
 
-      const title = type === 'export' ? 'Exported Conversation' : 'Micro-Quiz';
+      const title = type === "export" ? "Exported Conversation" : "Micro-Quiz";
       const newChat: SavedChat = {
         id: Date.now().toString(),
         title: `${title} - ${new Date().toLocaleDateString()}`,
         messages: chatMessages,
-        chatMode: 'ask',
+        chatMode: "ask",
         timestamp: new Date(),
       };
 
-      setSavedChats(prev => [newChat, ...prev]);
+      setSavedChats((prev) => [newChat, ...prev]);
       setLeftPanelVisible(true);
-      toast.success('Chat saved!');
+      toast.success("Chat saved!");
       return;
     }
 
-    // Otherwise, save as file (existing behavior)
-    // Check if already saved
-    const existingItem = savedItems.find(item => item.content === content && item.type === type);
+    const existingItem = savedItems.find((item) => item.content === content && item.type === type);
     if (existingItem) {
-      // Unsave: remove from saved items
       handleUnsave(existingItem.id);
       return;
     }
 
-    // Save: add new item
-    const title = type === 'export' ? 'Exported Conversation' : type === 'quiz' ? 'Micro-Quiz' : 'Summarization';
+    const title = type === "export" ? "Exported Conversation" : type === "quiz" ? "Micro-Quiz" : "Summarization";
     const newItem: SavedItem = {
       id: Date.now().toString(),
       title: `${title} - ${new Date().toLocaleDateString()}`,
@@ -904,149 +813,118 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
       workspaceId: workspaceId || currentWorkspaceId,
     };
 
-    setSavedItems(prev => [newItem, ...prev]);
+    setSavedItems((prev) => [newItem, ...prev]);
     setRecentlySavedId(newItem.id);
-    setLeftPanelVisible(true); // Open left panel
+    setLeftPanelVisible(true);
 
-    // Clear the highlight after animation
     setTimeout(() => {
       setRecentlySavedId(null);
     }, 2000);
 
-    toast.success('Saved for later!');
+    toast.success("Saved for later!");
   };
 
   const handleUnsave = (id: string) => {
-    setSavedItems(prev => prev.filter(item => item.id !== id));
-    toast.success('Removed from saved items');
+    setSavedItems((prev) => prev.filter((item) => item.id !== id));
+    toast.success("Removed from saved items");
   };
 
   // Create a new group workspace
-  const handleCreateWorkspace = (payload: {
-    name: string;
-    category: 'course' | 'personal';
-    courseId?: string;
-    invites: string[];
-  }) => {
+  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)}`;
 
-    // Add creator as first member
-    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 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 => ({
+      ...payload.invites.map((email) => ({
         id: email,
-        name: email.split('@')[0] || email,
+        name: email.split("@")[0] || email,
         email,
-      }))
+      })),
     ];
 
     let newWorkspace: Workspace;
 
-    if (payload.category === 'course') {
-      const courseInfo = availableCourses.find(c => c.id === payload.courseId);
+    if (payload.category === "course") {
+      const courseInfo = availableCourses.find((c) => c.id === payload.courseId);
       newWorkspace = {
         id,
         name: payload.name,
-        type: 'group',
+        type: "group",
         avatar,
         members,
-        category: 'course',
-        courseName: courseInfo?.name || 'Untitled Course',
+        category: "course",
+        courseName: courseInfo?.name || "Untitled Course",
         courseInfo,
       };
     } else {
-      // Personal interest workspace
       newWorkspace = {
         id,
         name: payload.name,
-        type: 'group',
+        type: "group",
         avatar,
         members,
-        category: 'personal',
+        category: "personal",
         isEditable: true,
       };
     }
 
-    setWorkspaces(prev => [...prev, newWorkspace]);
+    setWorkspaces((prev) => [...prev, newWorkspace]);
     setCurrentWorkspaceId(id);
 
-    // Set current course if it's a course workspace
-    if (payload.category === 'course' && payload.courseId) {
+    if (payload.category === "course" && payload.courseId) {
       setCurrentCourseId(payload.courseId);
     }
 
-    toast.success('New group workspace created');
+    toast.success("New group workspace created");
   };
 
-  // Handle review click - switch to review mode
   const handleReviewClick = () => {
-    setChatMode('review');
+    setChatMode("review");
     setShowReviewBanner(false);
-    localStorage.setItem('reviewBannerDismissed', 'true');
+    localStorage.setItem("reviewBannerDismissed", "true");
   };
 
-  // Handle dismiss review banner
   const handleDismissReviewBanner = () => {
     setShowReviewBanner(false);
-    localStorage.setItem('reviewBannerDismissed', 'true');
+    localStorage.setItem("reviewBannerDismissed", "true");
   };
 
-  // Handle login - check if user needs onboarding
   const handleLogin = (newUser: User) => {
     setUser(newUser);
-    // For testing: always show onboarding (comment out localStorage check)
-    // const onboardingCompleted = localStorage.getItem(`onboarding_completed_${newUser.email}`);
-    // if (!onboardingCompleted) {
     setShowOnboarding(true);
-    // }
   };
 
-  // Handle onboarding completion
   const handleOnboardingComplete = (updatedUser: User) => {
     setUser(updatedUser);
     setShowOnboarding(false);
-    // For testing: don't save to localStorage (comment out)
-    // localStorage.setItem(`onboarding_completed_${updatedUser.email}`, 'true');
   };
 
-  // Handle onboarding skip
   const handleOnboardingSkip = () => {
-    // For testing: don't save to localStorage (comment out)
-    // if (user) {
-    //   localStorage.setItem(`onboarding_completed_${user.email}`, 'true');
-    // }
     setShowOnboarding(false);
   };
 
-  // Show login screen if user is not logged in
   if (!user) {
     return <LoginScreen onLogin={handleLogin} />;
   }
 
-  // Show onboarding if user just logged in and hasn't completed it
   if (showOnboarding && user) {
-    return (
-      <>
-        <Onboarding
-          user={user}
-          onComplete={handleOnboardingComplete}
-          onSkip={handleOnboardingSkip}
-        />
-      </>
-    );
+    return <Onboarding user={user} onComplete={handleOnboardingComplete} onSkip={handleOnboardingSkip} />;
   }
 
   return (
     <div className="min-h-screen bg-background flex flex-col">
       <Toaster />
+
       <Header
         user={user}
         onMenuClick={() => setLeftSidebarOpen(!leftSidebarOpen)}
@@ -1063,66 +941,49 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
         availableCourses={availableCourses}
         onUserUpdate={setUser}
       />
+
       {showProfileEditor && user && (
-        <ProfileEditor
-          user={user}
-          onSave={setUser}
-          onClose={() => setShowProfileEditor(false)}
-        />
+        <ProfileEditor user={user} onSave={setUser} onClose={() => setShowProfileEditor(false)} />
       )}
 
-      {/* Review Banner - Below Header */}
       {showReviewBanner && (
         <div className="w-full bg-background border-b border-border flex-shrink-0 relative z-50">
-          <ReviewBanner
-            onReview={handleReviewClick}
-            onDismiss={handleDismissReviewBanner}
-          />
+          <ReviewBanner onReview={handleReviewClick} onDismiss={handleDismissReviewBanner} />
         </div>
       )}
 
-      <div
-        className="flex-1 flex overflow-hidden h-[calc(100vh-4rem)] relative"
-        style={{ overscrollBehavior: 'none' }}
-      >
-        {/* Toggle Button - When panel is closed, at left edge, center axis aligned to left edge */}
+      <div className="flex-1 flex overflow-hidden h-[calc(100vh-4rem)] relative" style={{ overscrollBehavior: "none" }}>
         {!leftPanelVisible && (
           <Button
             variant="secondary"
             size="icon"
             onClick={() => setLeftPanelVisible(true)}
             className="hidden lg:flex absolute z-[100] h-8 w-5 shadow-lg rounded-full bg-card border border-border transition-all duration-200 ease-in-out hover:translate-x-[10px]"
-            style={{ left: '-5px', top: '1rem' }}
+            style={{ left: "-5px", top: "1rem" }}
             title="Open panel"
           >
             <ChevronRight className="h-3 w-3" />
           </Button>
         )}
-        {/* Mobile Sidebar Toggle - Left */}
-        {leftSidebarOpen && (
-          <div
-            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
-            onClick={() => setLeftSidebarOpen(false)}
-          />
-        )}
 
-        {/* Left Sidebar */}
+        {leftSidebarOpen && <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setLeftSidebarOpen(false)} />}
+
         {leftPanelVisible ? (
           <aside
             className="hidden lg:flex w-80 bg-card border-r border-border flex-col h-full min-h-0 relative"
-            style={{ borderRight: '1px solid var(--border)', height: 'calc(100vh - 4rem)' }}
+            style={{ borderRight: "1px solid var(--border)", height: "calc(100vh - 4rem)" }}
           >
-            {/* Toggle Button - Inside panel, right edge aligned to panel right edge */}
             <Button
               variant="secondary"
               size="icon"
               onClick={() => setLeftPanelVisible(false)}
               className="absolute z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
-              style={{ right: '-10px', top: '1rem' }}
+              style={{ right: "-10px", top: "1rem" }}
               title="Close panel"
             >
               <ChevronLeft className="h-3 w-3" />
             </Button>
+
             <LeftSidebar
               learningMode={learningMode}
               language={language}
@@ -1151,13 +1012,12 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
           </aside>
         ) : null}
 
-        {/* Left Sidebar - Mobile */}
         <aside
           className={`
             fixed lg:hidden inset-y-0 left-0 z-50
             w-80 bg-card border-r border-border
             transform transition-transform duration-300 ease-in-out
-            ${leftSidebarOpen ? 'translate-x-0' : '-translate-x-full'}
+            ${leftSidebarOpen ? "translate-x-0" : "-translate-x-full"}
             flex flex-col
             mt-16
             h-[calc(100vh-4rem)]
@@ -1166,14 +1026,11 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
         >
           <div className="p-4 border-b border-border flex justify-between items-center">
             <h3>Settings & Guide</h3>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={() => setLeftSidebarOpen(false)}
-            >
+            <Button variant="ghost" size="icon" onClick={() => setLeftSidebarOpen(false)}>
               <X className="h-5 w-5" />
             </Button>
           </div>
+
           <LeftSidebar
             learningMode={learningMode}
             language={language}
@@ -1200,7 +1057,6 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
           />
         </aside>
 
-        {/* Main Chat Area */}
         <main className="flex-1 flex flex-col min-w-0 min-h-0 h-full">
           <ChatArea
             messages={messages}
@@ -1231,7 +1087,7 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
             savedChats={savedChats}
             workspaces={workspaces}
             currentWorkspaceId={currentWorkspaceId}
-            onSaveFile={(content, type, _format, targetWorkspaceId) => handleSave(content, type, false, _format ?? 'text', targetWorkspaceId)}
+            onSaveFile={(content, type, _format, targetWorkspaceId) => handleSave(content, type, false, (_format ?? "text") as "pdf" | "text", targetWorkspaceId)}
             leftPanelVisible={leftPanelVisible}
             currentCourseId={currentCourseId}
             onCourseChange={setCurrentCourseId}
@@ -1239,7 +1095,6 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
             showReviewBanner={showReviewBanner}
           />
         </main>
-
       </div>
     </div>
   );