Update web/src/App.tsx

web/src/App.tsx

@@ -6,7 +6,7 @@ import { LoginScreen } from './components/LoginScreen';
 import { ProfileEditor } from './components/ProfileEditor';
 import { ReviewBanner } from './components/ReviewBanner';
 import { Onboarding } from './components/Onboarding';
-import { Menu, X, User, ChevronLeft, ChevronRight } from 'lucide-react';
+import { X, ChevronLeft, ChevronRight } from 'lucide-react';
 import { Button } from './components/ui/button';
 import { Toaster } from './components/ui/sonner';
 import { toast } from 'sonner';
@@ -99,12 +99,25 @@ export interface SavedChat {
   timestamp: Date;
 }
 
+type BackendRef = {
+  source_file?: string;
+  section?: string;
+};
+
+type ChatApiResponse = {
+  reply: string;
+  session_status_md?: string;
+  refs?: BackendRef[];
+  latency_ms?: number;
+};
+
 function App() {
   const [isDarkMode, setIsDarkMode] = useState(() => {
     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');
 
@@ -135,7 +148,7 @@ function App() {
       teachingAssistant: { name: 'James Brown', email: 'james.brown@university.edu' }
     },
   ];
-  
+
   // Separate messages for each chat mode
   const [askMessages, setAskMessages] = useState<Message[]>([
     {
@@ -161,23 +174,23 @@ function App() {
       timestamp: new Date(),
     }
   ]);
-  
+
   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;
-  
+
   // 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') {
       currentMessages = askMessages;
       setCurrentMessages = setAskMessages;
@@ -188,12 +201,12 @@ function App() {
       currentMessages = quizMessages;
       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 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[]> = {
@@ -216,12 +229,13 @@ function App() {
           timestamp: new Date(),
         }],
       };
-      
+
       setCurrentMessages(initialMessages[chatMode]);
     }
-    
+
     prevChatModeRef.current = chatMode;
   }, [chatMode, askMessages.length, reviewMessages.length, quizMessages.length]); // Only depend on lengths to avoid infinite loops
+
   const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
   const [memoryProgress, setMemoryProgress] = useState(36);
   const [quizState, setQuizState] = useState<{
@@ -239,6 +253,7 @@ function App() {
   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
@@ -248,14 +263,14 @@ function App() {
   });
   const [resultType, setResultType] = useState<'export' | 'quiz' | 'summary' | null>(null);
   const [showClearDialog, setShowClearDialog] = useState(false);
-  
+
   // Saved conversations/summaries
   const [savedItems, setSavedItems] = useState<SavedItem[]>([]);
   const [recentlySavedId, setRecentlySavedId] = useState<string | null>(null);
-  
+
   // Saved chats
   const [savedChats, setSavedChats] = useState<SavedChat[]>([]);
-  
+
   // Mock group members
   const [groupMembers] = useState<GroupMember[]>([
     { id: 'clare', name: 'Clare AI', email: 'clare@ai.assistant', isAI: true },
@@ -268,13 +283,90 @@ function App() {
   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'];
+  }
+
+  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();
+  }
+
   // 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');
-      
+
       setWorkspaces([
         {
           id: 'individual',
@@ -363,12 +455,12 @@ function App() {
         explanation: "Transparency is crucial because it helps users understand AI decision-making processes, enables debugging, and ensures accountability."
       }
     ];
-    
+
     const randomIndex = Math.floor(Math.random() * questions.length);
     return questions[randomIndex];
   };
 
-  const handleSendMessage = (content: string) => {
+  const handleSendMessage = async (content: string) => {
     if (!content.trim() || !user) return;
 
     // Attach sender info for all user messages
@@ -396,20 +488,22 @@ function App() {
       setQuizMessages(prev => [...prev, userMessage]);
     }
 
-    // Handle Quiz mode differently
+    // -----------------------------
+    // Quiz mode: keep existing local simulation
+    // -----------------------------
     if (chatMode === 'quiz') {
       if (quizState.waitingForAnswer) {
         // User is answering a question
         const isCorrect = Math.random() > 0.3; // Simulate answer checking
-        
+
         setIsTyping(true);
         setTimeout(() => {
-          const feedback = isCorrect 
+          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',
@@ -421,7 +515,7 @@ function App() {
 
           // Close typing indicator first
           setIsTyping(false);
-          
+
           // Wait a bit to ensure typing indicator disappears before adding message
           setTimeout(() => {
             setQuizMessages(prev => [...prev, assistantMessage]);
@@ -432,70 +526,65 @@ function App() {
       return;
     }
 
-    // Handle Ask and Review modes
-    // Respond in all workspaces to keep conversations continuous
+    // -----------------------------
+    // Ask + Review: call backend /api/chat
+    // -----------------------------
     const shouldAIRespond = true;
+    if (!shouldAIRespond) return;
+
+    setIsTyping(true);
+
+    try {
+      const docType = toBackendDocTypeFromUploaded(uploadedFiles);
+
+      const resp = await callChatApi({
+        user_id: user.email,
+        message: content,
+        learning_mode: toBackendLearningMode(learningMode),
+        language_preference: toBackendLanguagePreference(language),
+        doc_type: docType,
+      });
 
-    if (shouldAIRespond) {
-      setIsTyping(true);
+      const assistantMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: (resp.reply || '').trim() || '(No response)',
+        timestamp: new Date(),
+        references: formatRefs(resp.refs),
+        sender: spaceType === 'group' ? groupMembers.find(m => m.isAI) : undefined,
+      };
+
+      setIsTyping(false);
+
+      // Ensure typing indicator disappears before adding message
       setTimeout(() => {
-        let response = '';
-        
         if (chatMode === 'ask') {
-          const responses: Record<LearningMode, string> = {
-            general: "I'd be happy to help! To provide you with the most accurate and relevant answer, could you please provide some context about what you're asking? For example, what subject or topic is this related to?",
-            concept: "Great question! Let me break this concept down for you. In Responsible AI, this relates to ensuring our AI systems are fair, transparent, and accountable. Would you like me to explain any specific aspect in more detail?",
-            socratic: "That's an interesting point! Let me ask you this: What do you think are the key ethical considerations when deploying AI systems? Take a moment to think about it.",
-            exam: "Let me test your understanding with a quick question: Which of the following is NOT a principle of Responsible AI? A) Fairness B) Transparency C) Profit Maximization D) Accountability",
-            assignment: "I can help you with that assignment! Let's break it down into manageable steps. First, what specific aspect are you working on?",
-            summary: "Here's a quick summary: Responsible AI focuses on developing and deploying AI systems that are ethical, fair, transparent, and accountable to society.",
-          };
-          response = responses[learningMode];
+          setAskMessages(prev => [...prev, assistantMessage]);
         } else if (chatMode === 'review') {
-          // Check if this is a review request by checking window storage
-          const reviewData = (window as any).__lastReviewData;
-          if (reviewData) {
-            if (reviewData.startsWith('REVIEW_TOPIC:')) {
-              // Parse review topic data
-              const data = reviewData.replace('REVIEW_TOPIC:', '').split('|');
-              const [title, previousQuestion, memoryRetention, schedule, status, weight, lastReviewed] = data;
-              
-              response = `Let's review **${title}** together!\n\n**Your Previous Question:**\n"${previousQuestion}"\n\n**Review Details:**\n- **Memory Retention:** ${memoryRetention}%\n- **Schedule:** ${schedule}\n- **Status:** ${status.toUpperCase()}\n- **Weight:** ${weight}%\n- **Last Reviewed:** ${lastReviewed}\n\nLet's go through this topic step by step. What would you like to focus on first?`;
-              // Clear the stored data
-              delete (window as any).__lastReviewData;
-            } else if (reviewData === 'REVIEW_ALL') {
-              response = `I'll help you review all the topics that need your attention. Based on your learning history, here are the topics we should focus on:\n\n1. **Main Concept of Lab 3** (Urgent - Memory Retention: 25%)\n2. **Effective Prompt Engineering** (Review - Memory Retention: 60%)\n3. **Objective LLM Evaluation** (Stable - Memory Retention: 90%)\n\nLet's start with the most urgent ones first. Which topic would you like to begin with?`;
-              // Clear the stored data
-              delete (window as any).__lastReviewData;
-            } else {
-              response = "Let's review what you've learned! Based on your previous conversations, here are the key concepts we covered: [Review content would go here]";
-            }
-          } else {
-            response = "Let's review what you've learned! Based on your previous conversations, here are the key concepts we covered: [Review content would go here]";
-          }
+          setReviewMessages(prev => [...prev, assistantMessage]);
         }
+      }, 50);
+    } catch (err: any) {
+      console.error(err);
+      setIsTyping(false);
 
-        const assistantMessage: Message = {
-          id: (Date.now() + 1).toString(),
-          role: 'assistant',
-          content: response,
-          timestamp: new Date(),
-          references: chatMode === 'ask' ? ['Module 10, Section 2.3', 'Lecture Notes - Week 5'] : undefined,
-          sender: spaceType === 'group' ? groupMembers.find(m => m.isAI) : undefined,
-        };
-
-        // Close typing indicator first
-        setIsTyping(false);
-        
-        // Wait a bit to ensure typing indicator disappears before adding message
-        setTimeout(() => {
-          if (chatMode === 'ask') {
-            setAskMessages(prev => [...prev, assistantMessage]);
-          } else if (chatMode === 'review') {
-            setReviewMessages(prev => [...prev, assistantMessage]);
-          }
-        }, 50);
-      }, 2000);
+      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.",
+        timestamp: new Date(),
+        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]);
+        }
+      }, 50);
+
+      toast.error('Chat failed. Check the API server logs.');
     }
   };
 
@@ -503,11 +592,11 @@ function App() {
     setIsTyping(true);
     const question = generateQuizQuestion();
     let questionText = question.question;
-    
+
     if (question.type === 'multiple-choice') {
-      questionText += '\n\n' + question.options.join('\n');
+      questionText += '\n\n' + question.options!.join('\n');
     }
-    
+
     setTimeout(() => {
       const assistantMessage: Message = {
         id: Date.now().toString(),
@@ -520,15 +609,15 @@ function App() {
 
       // 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, 
+        setQuizState(prev => ({
+          ...prev,
           currentQuestion: prev.currentQuestion + 1,
           waitingForAnswer: true,
-          showNextButton: false 
+          showNextButton: false
         }));
       }, 50);
     }, 2000);
@@ -551,7 +640,7 @@ function App() {
   };
 
   const handleFileTypeChange = (index: number, type: FileType) => {
-    setUploadedFiles(prev => prev.map((file, i) => 
+    setUploadedFiles(prev => prev.map((file, i) =>
       i === index ? { ...file, type } : file
     ));
   };
@@ -559,12 +648,12 @@ function App() {
   // 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];
@@ -582,7 +671,7 @@ function App() {
       toast.info('No conversation to save');
       return;
     }
-    
+
     // Check if already saved
     const existingChat = isCurrentChatSaved();
     if (existingChat) {
@@ -591,7 +680,7 @@ function App() {
       toast.success('Chat unsaved');
       return;
     }
-    
+
     // Save: add new chat
     const title = `Chat - ${chatMode === 'ask' ? 'Ask' : chatMode === 'review' ? 'Review' : 'Quiz'} - ${new Date().toLocaleDateString()}`;
     const newChat: SavedChat = {
@@ -601,7 +690,7 @@ function App() {
       chatMode,
       timestamp: new Date(),
     };
-    
+
     setSavedChats(prev => [newChat, ...prev]);
     setLeftPanelVisible(true);
     toast.success('Chat saved!');
@@ -610,7 +699,7 @@ function App() {
   const handleLoadChat = (savedChat: SavedChat) => {
     // Set the chat mode first
     setChatMode(savedChat.chatMode);
-    
+
     // Then set the messages for that mode
     if (savedChat.chatMode === 'ask') {
       setAskMessages(savedChat.messages);
@@ -625,7 +714,7 @@ function App() {
         showNextButton: false,
       });
     }
-    
+
     toast.success('Chat loaded!');
   };
 
@@ -635,7 +724,7 @@ function App() {
   };
 
   const handleRenameSavedChat = (id: string, newTitle: string) => {
-    setSavedChats(prev => prev.map(chat => 
+    setSavedChats(prev => prev.map(chat =>
       chat.id === id ? { ...chat, title: newTitle } : chat
     ));
     toast.success('Chat renamed');
@@ -645,7 +734,7 @@ function App() {
     if (shouldSave) {
       handleSaveChat();
     }
-    
+
     const initialMessages: Record<ChatMode, Message[]> = {
       ask: [{
         id: '1',
@@ -666,7 +755,7 @@ function App() {
         timestamp: new Date(),
       }],
     };
-    
+
     // Clear only the current mode's conversation
     if (chatMode === 'ask') {
       setAskMessages(initialMessages.ask);
@@ -696,7 +785,7 @@ This conversation covered key concepts in Module 10 – Responsible AI, includin
 3. Best practices for ethical AI development
 
 Exported successfully! ✓`;
-    
+
     setExportResult(result);
     setResultType('export');
     toast.success('Conversation exported!');
@@ -717,7 +806,7 @@ d) Cost reduction
 **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!');
@@ -743,7 +832,7 @@ Generate quiz based on your conversation!`;
 
 ## Progress Update
 You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
-    
+
     setExportResult(summary);
     setResultType('summary');
     toast.success('Summary generated!');
@@ -757,7 +846,7 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
     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') {
@@ -777,7 +866,7 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
           timestamp: new Date(),
         }
       ];
-      
+
       const title = type === 'export' ? 'Exported Conversation' : 'Micro-Quiz';
       const newChat: SavedChat = {
         id: Date.now().toString(),
@@ -786,13 +875,13 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
         chatMode: 'ask',
         timestamp: new Date(),
       };
-      
+
       setSavedChats(prev => [newChat, ...prev]);
       setLeftPanelVisible(true);
       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);
@@ -801,7 +890,7 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
       handleUnsave(existingItem.id);
       return;
     }
-    
+
     // Save: add new item
     const title = type === 'export' ? 'Exported Conversation' : type === 'quiz' ? 'Micro-Quiz' : 'Summarization';
     const newItem: SavedItem = {
@@ -814,16 +903,16 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
       format,
       workspaceId: workspaceId || currentWorkspaceId,
     };
-    
+
     setSavedItems(prev => [newItem, ...prev]);
     setRecentlySavedId(newItem.id);
     setLeftPanelVisible(true); // Open left panel
-    
+
     // Clear the highlight after animation
     setTimeout(() => {
       setRecentlySavedId(null);
     }, 2000);
-    
+
     toast.success('Saved for later!');
   };
 
@@ -841,7 +930,7 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
   }) => {
     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,
@@ -849,7 +938,7 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
       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 => ({
@@ -860,7 +949,7 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
     ];
 
     let newWorkspace: Workspace;
-    
+
     if (payload.category === 'course') {
       const courseInfo = availableCourses.find(c => c.id === payload.courseId);
       newWorkspace = {
@@ -888,12 +977,12 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
 
     setWorkspaces(prev => [...prev, newWorkspace]);
     setCurrentWorkspaceId(id);
-    
+
     // Set current course if it's a course workspace
     if (payload.category === 'course' && payload.courseId) {
       setCurrentCourseId(payload.courseId);
     }
-    
+
     toast.success('New group workspace created');
   };
 
@@ -916,7 +1005,7 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
     // For testing: always show onboarding (comment out localStorage check)
     // const onboardingCompleted = localStorage.getItem(`onboarding_completed_${newUser.email}`);
     // if (!onboardingCompleted) {
-      setShowOnboarding(true);
+    setShowOnboarding(true);
     // }
   };
 
@@ -946,8 +1035,8 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
   if (showOnboarding && user) {
     return (
       <>
-        <Onboarding 
-          user={user} 
+        <Onboarding
+          user={user}
           onComplete={handleOnboardingComplete}
           onSkip={handleOnboardingSkip}
         />
@@ -958,7 +1047,7 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
   return (
     <div className="min-h-screen bg-background flex flex-col">
       <Toaster />
-      <Header 
+      <Header
         user={user}
         onMenuClick={() => setLeftSidebarOpen(!leftSidebarOpen)}
         onUserClick={() => {}}
@@ -992,7 +1081,7 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
         </div>
       )}
 
-      <div 
+      <div
         className="flex-1 flex overflow-hidden h-[calc(100vh-4rem)] relative"
         style={{ overscrollBehavior: 'none' }}
       >
@@ -1011,7 +1100,7 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
         )}
         {/* Mobile Sidebar Toggle - Left */}
         {leftSidebarOpen && (
-          <div 
+          <div
             className="fixed inset-0 bg-black/50 z-40 lg:hidden"
             onClick={() => setLeftSidebarOpen(false)}
           />
@@ -1019,7 +1108,7 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
 
         {/* Left Sidebar */}
         {leftPanelVisible ? (
-          <aside 
+          <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)' }}
           >
@@ -1063,7 +1152,7 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
         ) : null}
 
         {/* Left Sidebar - Mobile */}
-        <aside 
+        <aside
           className={`
             fixed lg:hidden inset-y-0 left-0 z-50
             w-80 bg-card border-r border-border
@@ -1156,4 +1245,4 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
   );
 }
 
-export default App;
+export default App;