Update web/src/App.tsx

web/src/App.tsx

@@ -4,10 +4,9 @@ import { LeftSidebar } from './components/LeftSidebar';
 import { ChatArea } from './components/ChatArea';
 import { RightPanel } from './components/RightPanel';
 import { FloatingActionButtons } from './components/FloatingActionButtons';
-import { Menu, X, User } from 'lucide-react';
+import { X, ChevronLeft, ChevronRight } from 'lucide-react';
 import { Button } from './components/ui/button';
 import { Toaster } from './components/ui/sonner';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { toast } from 'sonner';
 
 export interface Message {
@@ -15,13 +14,14 @@ export interface Message {
   role: 'user' | 'assistant';
   content: string;
   timestamp: Date;
-  references?: string[];
-  sender?: GroupMember; // For group chat
+  references?: string[]; // rendered strings for UI
+  sender?: GroupMember; // for group chat
 }
 
 export interface User {
   name: string;
   email: string;
+  userId: string; // used by backend session
 }
 
 export interface GroupMember {
@@ -34,6 +34,7 @@ export interface GroupMember {
 
 export type SpaceType = 'individual' | 'group';
 
+// UI file types -> backend doc_type mapping in upload
 export type FileType = 'syllabus' | 'lecture-slides' | 'literature-review' | 'other';
 
 export interface UploadedFile {
@@ -49,27 +50,38 @@ function App() {
     const saved = localStorage.getItem('theme');
     return saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches);
   });
+
   const [user, setUser] = useState<User | null>(null);
+
   const [messages, setMessages] = useState<Message[]>([
     {
       id: '1',
       role: 'assistant',
-      content: "👋 Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. 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!",
+      content:
+        "Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. Ask me anything about the course, or upload documents to get started.",
       timestamp: new Date(),
-    }
+    },
   ]);
+
   const [learningMode, setLearningMode] = useState<LearningMode>('concept');
   const [language, setLanguage] = useState<Language>('auto');
   const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+
+  // MemoryLine expects 0-100-ish number; your backend returns progress_pct 0..1
   const [memoryProgress, setMemoryProgress] = useState(36);
+
   const [leftSidebarOpen, setLeftSidebarOpen] = useState(false);
   const [rightPanelOpen, setRightPanelOpen] = useState(false);
   const [rightPanelVisible, setRightPanelVisible] = useState(true);
+
   const [spaceType, setSpaceType] = useState<SpaceType>('individual');
+
   const [exportResult, setExportResult] = useState('');
   const [resultType, setResultType] = useState<'export' | 'quiz' | 'summary' | null>(null);
-  
-  // Mock group members
+
+  const [isTyping, setIsTyping] = useState(false);
+
+  // Mock group members (UI only)
   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' },
@@ -82,13 +94,99 @@ function App() {
     localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
   }, [isDarkMode]);
 
-  const handleSendMessage = (content: string) => {
+  // ---------- helpers ----------
+  const mapLanguageToBackend = (lang: Language) => {
+    if (lang === 'en') return 'English';
+    if (lang === 'zh') return 'Chinese';
+    return 'Auto';
+  };
+
+  const mapFileTypeToDocType = (t: FileType) => {
+    switch (t) {
+      case 'syllabus':
+        return 'Syllabus';
+      case 'lecture-slides':
+        return 'Lecture Slides';
+      case 'literature-review':
+        return 'Literature Review / Paper';
+      default:
+        return 'Other';
+    }
+  };
+
+  const normalizeRefs = (refs: any): string[] => {
+    if (!Array.isArray(refs)) return [];
+    return refs
+      .map((r) => {
+        const sf = r?.source_file ?? r?.sourceFile ?? '';
+        const sec = r?.section ?? '';
+        const s = [sf, sec].filter(Boolean).join(' · ');
+        return s || '';
+      })
+      .filter(Boolean);
+  };
+
+  const fetchMemoryLine = async (u: User) => {
+    try {
+      const res = await fetch(`/api/memoryline?user_id=${encodeURIComponent(u.userId)}`);
+      if (!res.ok) return;
+      const data = await res.json();
+      const pct = typeof data?.progress_pct === 'number' ? Math.round(data.progress_pct * 100) : null;
+      if (pct !== null) setMemoryProgress(pct);
+    } catch {
+      // ignore
+    }
+  };
+
+  // ---------- API actions ----------
+  const handleLogin = async (payload: { name: string; email: string }) => {
+    const name = payload.name.trim();
+    const email = payload.email.trim();
+
+    // Use email as stable userId (simple MVP)
+    const userId = email;
+
+    try {
+      const res = await fetch('/api/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, user_id: userId }),
+      });
+
+      if (!res.ok) {
+        const txt = await res.text();
+        toast.error(`Login failed: ${txt}`);
+        return;
+      }
+
+      const data = await res.json();
+      if (!data?.ok) {
+        toast.error('Login failed');
+        return;
+      }
+
+      const u: User = { name, email, userId };
+      setUser(u);
+      toast.success(`Welcome, ${name}!`);
+
+      // pull memoryline once after login
+      fetchMemoryLine(u);
+    } catch (e: any) {
+      toast.error(`Login error: ${e?.message ?? 'unknown'}`);
+    }
+  };
+
+  const handleLogout = () => {
+    setUser(null);
+    toast.success('Logged out successfully');
+  };
+
+  const handleSendMessage = async (content: string) => {
     if (!content.trim() || !user) return;
 
-    // In group mode, add sender info
-    const sender: GroupMember | undefined = spaceType === 'group' 
-      ? { id: user.email, name: user.name, email: user.email }
-      : undefined;
+    // In group mode, add sender info (UI)
+    const sender: GroupMember | undefined =
+      spaceType === 'group' ? { id: user.email, name: user.name, email: user.email } : undefined;
 
     const userMessage: Message = {
       id: Date.now().toString(),
@@ -98,135 +196,212 @@ function App() {
       sender,
     };
 
-    setMessages(prev => [...prev, userMessage]);
-
-    // In group mode, only respond if @Clare or @clare is mentioned
-    const shouldAIRespond = spaceType === 'individual' || 
-      content.toLowerCase().includes('@clare');
-
-    if (shouldAIRespond) {
-      // Simulate AI response
-      setTimeout(() => {
-        const responses: Record<LearningMode, string> = {
-          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.",
-        };
-
-        const assistantMessage: Message = {
-          id: (Date.now() + 1).toString(),
-          role: 'assistant',
-          content: responses[learningMode],
-          timestamp: new Date(),
-          references: ['Module 10, Section 2.3', 'Lecture Notes - Week 5'],
-          sender: spaceType === 'group' ? groupMembers.find(m => m.isAI) : undefined,
-        };
-
-        setMessages(prev => [...prev, assistantMessage]);
-      }, 1000);
+    setMessages((prev) => [...prev, userMessage]);
+
+    // In group mode, only respond if @Clare is mentioned
+    const shouldAIRespond = spaceType === 'individual' || content.toLowerCase().includes('@clare');
+    if (!shouldAIRespond) return;
+
+    // Optional: strip @clare mention from text to reduce noise
+    const cleaned = spaceType === 'group' ? content.replace(/@clare/gi, '').trim() : content;
+
+    setIsTyping(true);
+    try {
+      const res = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          user_id: user.userId,
+          message: cleaned,
+          learning_mode: learningMode,
+          language_preference: mapLanguageToBackend(language),
+          doc_type: 'Syllabus', // for now (backend uses uploaded doc_type for parsing; chat can stay Syllabus)
+        }),
+      });
+
+      if (!res.ok) {
+        const txt = await res.text();
+        toast.error(`Chat failed: ${txt}`);
+        return;
+      }
+
+      const data = await res.json();
+      const reply = data?.reply ?? '';
+      const refs = normalizeRefs(data?.refs);
+
+      const assistantMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: reply || '(No response)',
+        timestamp: new Date(),
+        references: refs,
+        sender: spaceType === 'group' ? groupMembers.find((m) => m.isAI) : undefined,
+      };
+
+      setMessages((prev) => [...prev, assistantMessage]);
+
+      // Refresh memoryline after each AI response (cheap + keeps UI alive)
+      fetchMemoryLine(user);
+    } catch (e: any) {
+      toast.error(`Chat error: ${e?.message ?? 'unknown'}`);
+    } finally {
+      setIsTyping(false);
     }
   };
 
-  const handleFileUpload = (files: File[]) => {
-    const newFiles: UploadedFile[] = files.map(file => ({
+  const handleFileUpload = async (files: File[]) => {
+    if (!user) {
+      toast.info('Please log in first');
+      return;
+    }
+
+    // UI list (keep for display)
+    const newFiles: UploadedFile[] = files.map((file) => ({
       file,
-      type: 'other' as FileType, // Default type
+      type: 'other' as FileType,
     }));
-    setUploadedFiles(prev => [...prev, ...newFiles]);
+    setUploadedFiles((prev) => [...prev, ...newFiles]);
+
+    // Upload each file immediately (default doc_type=Other; user can change type later, but MVP OK)
+    // If you want “type change triggers re-upload”, we can add next iteration.
+    for (const f of files) {
+      try {
+        const form = new FormData();
+        form.append('user_id', user.userId);
+        form.append('doc_type', 'Other');
+        form.append('file', f);
+
+        const res = await fetch('/api/upload', { method: 'POST', body: form });
+        if (!res.ok) {
+          const txt = await res.text();
+          toast.error(`Upload failed (${f.name}): ${txt}`);
+          continue;
+        }
+
+        const data = await res.json();
+        toast.success(`Uploaded: ${f.name} (+${data?.added_chunks ?? 0} chunks)`);
+        fetchMemoryLine(user);
+      } catch (e: any) {
+        toast.error(`Upload error (${f.name}): ${e?.message ?? 'unknown'}`);
+      }
+    }
   };
 
   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) => {
+    setUploadedFiles((prev) =>
+      prev.map((file, i) => (i === index ? { ...file, type } : file))
+    );
+
+    // MVP behavior: re-upload that file with the selected doc_type so backend can parse correctly.
+    // This avoids “I selected Syllabus but backend never saw it.”
+    if (!user) return;
+    const target = uploadedFiles[index];
+    if (!target?.file) return;
+
+    try {
+      const form = new FormData();
+      form.append('user_id', user.userId);
+      form.append('doc_type', mapFileTypeToDocType(type));
+      form.append('file', target.file);
+
+      const res = await fetch('/api/upload', { method: 'POST', body: form });
+      if (!res.ok) {
+        const txt = await res.text();
+        toast.error(`Re-upload failed: ${txt}`);
+        return;
+      }
+
+      const data = await res.json();
+      toast.success(`Updated type: ${target.file.name} → ${mapFileTypeToDocType(type)} (+${data?.added_chunks ?? 0})`);
+      fetchMemoryLine(user);
+    } catch (e: any) {
+      toast.error(`Re-upload error: ${e?.message ?? 'unknown'}`);
+    }
   };
 
   const handleClearConversation = () => {
-    setMessages([{
-      id: '1',
-      role: 'assistant',
-      content: "👋 Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. 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(),
-    }]);
+    setMessages([
+      {
+        id: '1',
+        role: 'assistant',
+        content:
+          "Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. Ask me anything about the course, or upload documents to get started.",
+        timestamp: new Date(),
+      },
+    ]);
+    toast.success('Conversation cleared');
   };
 
-  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 handleExport = async () => {
+    if (!user) return toast.info('Please log in first');
+
+    try {
+      const res = await fetch('/api/export', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ user_id: user.userId, learning_mode: learningMode }),
+      });
+      if (!res.ok) {
+        const txt = await res.text();
+        toast.error(`Export failed: ${txt}`);
+        return;
+      }
+      const data = await res.json();
+      setExportResult(data?.markdown ?? '');
+      setResultType('export');
+      toast.success('Conversation exported!');
+    } catch (e: any) {
+      toast.error(`Export error: ${e?.message ?? 'unknown'}`);
+    }
   };
 
-  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)
+  const handleSummary = async () => {
+    if (!user) return toast.info('Please log in first');
+
+    try {
+      const res = await fetch('/api/summary', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          user_id: user.userId,
+          learning_mode: learningMode,
+          language_preference: mapLanguageToBackend(language),
+        }),
+      });
+      if (!res.ok) {
+        const txt = await res.text();
+        toast.error(`Summary failed: ${txt}`);
+        return;
+      }
+      const data = await res.json();
+      setExportResult(data?.markdown ?? '');
+      setResultType('summary');
+      toast.success('Summary generated!');
+    } catch (e: any) {
+      toast.error(`Summary error: ${e?.message ?? 'unknown'}`);
+    }
+  };
 
-**Question 3:** True or False: AI systems should always prioritize accuracy over fairness.
+  // You的后端目前没提供 /api/quiz，这里先保持“前端生成文案”占位；
+  // 下一步如果你要真实 quiz，我们加 /api/quiz endpoint 即可。
+  const handleQuiz = async () => {
+    const quiz = `# Micro-Quiz (MVP)
+We can wire this to a real /api/quiz endpoint next.
 
-Generate quiz based on your conversation!`;
-    
+Try asking Clare in Exam Prep mode to generate quiz questions from your uploaded docs.`;
     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!');
-  };
-
   return (
     <div className="min-h-screen bg-background flex flex-col">
       <Toaster />
-      <Header 
+      <Header
         user={user}
         onMenuClick={() => setLeftSidebarOpen(!leftSidebarOpen)}
         onUserClick={() => setRightPanelOpen(!rightPanelOpen)}
@@ -237,14 +412,11 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
       <div className="flex-1 flex overflow-hidden">
         {/* Mobile Sidebar Toggle - Left */}
         {leftSidebarOpen && (
-          <div 
-            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
-            onClick={() => setLeftSidebarOpen(false)}
-          />
+          <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setLeftSidebarOpen(false)} />
         )}
 
         {/* Left Sidebar */}
-        <aside 
+        <aside
           className={`
             fixed lg:static inset-y-0 left-0 z-50
             w-80 bg-card border-r border-border
@@ -257,14 +429,11 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
         >
           <div className="lg:hidden 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}
@@ -291,20 +460,18 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
             onClearConversation={handleClearConversation}
             onLearningModeChange={setLearningMode}
             spaceType={spaceType}
+            isTyping={isTyping}
           />
         </main>
 
         {/* Mobile Sidebar Toggle - Right */}
         {rightPanelOpen && (
-          <div 
-            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
-            onClick={() => setRightPanelOpen(false)}
-          />
+          <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setRightPanelOpen(false)} />
         )}
 
         {/* Right Panel */}
         {rightPanelVisible && (
-          <aside 
+          <aside
             className={`
               fixed lg:static inset-y-0 right-0 z-50
               w-80 bg-card border-l border-border
@@ -317,18 +484,15 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
           >
             <div className="lg:hidden p-4 border-b border-border flex justify-between items-center">
               <h3>Account & Actions</h3>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => setRightPanelOpen(false)}
-              >
+              <Button variant="ghost" size="icon" onClick={() => setRightPanelOpen(false)}>
                 <X className="h-5 w-5" />
               </Button>
             </div>
+
             <RightPanel
               user={user}
-              onLogin={setUser}
-              onLogout={() => setUser(null)}
+              onLogin={handleLogin}
+              onLogout={handleLogout}
               isLoggedIn={!!user}
               onClose={() => setRightPanelVisible(false)}
               exportResult={exportResult}
@@ -338,24 +502,18 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
             />
           </aside>
         )}
-        
+
         {/* Toggle Right Panel Button - Desktop only */}
         <Button
           variant="outline"
           size="icon"
           onClick={() => setRightPanelVisible(!rightPanelVisible)}
           className={`hidden lg:flex fixed top-20 z-[70] h-8 w-5 shadow-lg transition-all rounded-l-full rounded-r-none border-r-0 ${
-            rightPanelVisible 
-              ? 'right-[320px]' 
-              : 'right-0'
+            rightPanelVisible ? 'right-[320px]' : 'right-0'
           }`}
           title={rightPanelVisible ? 'Close panel' : 'Open panel'}
         >
-          {rightPanelVisible ? (
-            <ChevronRight className="h-3 w-3" />
-          ) : (
-            <ChevronLeft className="h-3 w-3" />
-          )}
+          {rightPanelVisible ? <ChevronRight className="h-3 w-3" /> : <ChevronLeft className="h-3 w-3" />}
         </Button>
 
         {/* Floating Action Buttons - Desktop only, when panel is closed */}
@@ -374,4 +532,4 @@ You've covered 65% of Module 10 content. Keep up the great work! 🎉`;
   );
 }
 
-export default App;
+export default App;