Update web/src/App.tsx

web/src/App.tsx

@@ -1,12 +1,14 @@
+// web/src/App.tsx
 import React, { useState, useEffect } from 'react';
 import { Header } from './components/Header';
 import { LeftSidebar } from './components/LeftSidebar';
 import { ChatArea } from './components/ChatArea';
 import { RightPanel } from './components/RightPanel';
 import { FloatingActionButtons } from './components/FloatingActionButtons';
-import { X, ChevronLeft, ChevronRight } from 'lucide-react';
+import { X } 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 {
@@ -14,14 +16,13 @@ export interface Message {
   role: 'user' | 'assistant';
   content: string;
   timestamp: Date;
-  references?: string[]; // rendered strings for UI
-  sender?: GroupMember; // for group chat
+  references?: string[];
+  sender?: GroupMember;
 }
 
 export interface User {
   name: string;
-  email: string;
-  userId: string; // used by backend session
+  email: string; // we also use as user_id
 }
 
 export interface GroupMember {
@@ -34,7 +35,6 @@ 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 {
@@ -45,6 +45,8 @@ export interface UploadedFile {
 export type LearningMode = 'concept' | 'socratic' | 'exam' | 'assignment' | 'summary';
 export type Language = 'auto' | 'en' | 'zh';
 
+type ResultType = 'export' | 'quiz' | 'summary' | null;
+
 function App() {
   const [isDarkMode, setIsDarkMode] = useState(() => {
     const saved = localStorage.getItem('theme');
@@ -58,17 +60,16 @@ function App() {
       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.",
+        "Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. Upload your course materials and ask me anything.",
       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 [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+  const [memoryProgress, setMemoryProgress] = useState(40);
 
   const [leftSidebarOpen, setLeftSidebarOpen] = useState(false);
   const [rightPanelOpen, setRightPanelOpen] = useState(false);
@@ -77,11 +78,8 @@ function App() {
   const [spaceType, setSpaceType] = useState<SpaceType>('individual');
 
   const [exportResult, setExportResult] = useState('');
-  const [resultType, setResultType] = useState<'export' | 'quiz' | 'summary' | null>(null);
+  const [resultType, setResultType] = useState<ResultType>(null);
 
-  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' },
@@ -94,97 +92,75 @@ function App() {
     localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
   }, [isDarkMode]);
 
-  // ---------- 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';
+  // -----------------------------
+  // API helpers
+  // -----------------------------
+  const apiPost = async <T,>(path: string, body: any): Promise<T> => {
+    const res = await fetch(path, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+    if (!res.ok) {
+      const text = await res.text().catch(() => '');
+      throw new Error(`${path} failed: ${res.status} ${text}`);
     }
+    return res.json();
   };
 
-  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 apiGet = async <T,>(path: string): Promise<T> => {
+    const res = await fetch(path, { method: 'GET' });
+    if (!res.ok) {
+      const text = await res.text().catch(() => '');
+      throw new Error(`${path} failed: ${res.status} ${text}`);
+    }
+    return res.json();
   };
 
-  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
-    }
+  const fileTypeToDocType = (t: FileType): string => {
+    // backend normalizes too, but keep consistent
+    if (t === 'syllabus') return 'Syllabus';
+    if (t === 'lecture-slides') return 'Lecture Slides';
+    if (t === 'literature-review') return 'Literature Review / Paper';
+    return 'Other';
   };
 
-  // ---------- API actions ----------
-  const handleLogin = async (payload: { name: string; email: string }) => {
-    const name = payload.name.trim();
-    const email = payload.email.trim();
+  // -----------------------------
+  // Auth
+  // -----------------------------
+  const handleLogin = async (u: User) => {
+    // use email as user_id
+    const user_id = u.email.trim();
+    const name = u.name.trim();
 
-    // Use email as stable userId (simple MVP)
-    const userId = email;
+    if (!user_id || !name) {
+      toast.error('Missing name/email');
+      return;
+    }
 
     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);
+      await apiPost<{ ok: boolean }>('/api/login', { user_id, name });
+      setUser({ name, email: user_id });
+      toast.success(`Welcome, ${name}`);
+      // sync memoryline
+      const ml = await apiGet<{ progress_pct: number }>('/api/memoryline?user_id=' + encodeURIComponent(user_id));
+      setMemoryProgress(Math.round((ml.progress_pct || 0) * 100));
     } catch (e: any) {
-      toast.error(`Login error: ${e?.message ?? 'unknown'}`);
+      toast.error(e.message || 'Login failed');
     }
   };
 
   const handleLogout = () => {
     setUser(null);
-    toast.success('Logged out successfully');
+    toast.success('Logged out');
   };
 
+  // -----------------------------
+  // Chat
+  // -----------------------------
   const handleSendMessage = async (content: string) => {
     if (!content.trim() || !user) return;
 
-    // In group mode, add sender info (UI)
     const sender: GroupMember | undefined =
       spaceType === 'group' ? { id: user.email, name: user.name, email: user.email } : undefined;
 
@@ -198,204 +174,165 @@ function App() {
 
     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)
-        }),
+      const resp = await apiPost<{
+        reply: string;
+        session_status_md: string;
+        refs: { source_file?: string; section?: string }[];
+        latency_ms?: number;
+      }>('/api/chat', {
+        user_id: user.email,
+        message: content,
+        learning_mode: learningMode,
+        language_preference: language === 'auto' ? 'Auto' : language === 'en' ? 'English' : 'Chinese',
+        doc_type: '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 refs = (resp.refs || []).map((r) => {
+        const a = r.source_file || 'source';
+        const b = r.section || 'section';
+        return `${a} — ${b}`;
+      });
 
       const assistantMessage: Message = {
         id: (Date.now() + 1).toString(),
         role: 'assistant',
-        content: reply || '(No response)',
+        content: resp.reply || '(empty 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);
+      toast.error(e.message || 'Chat failed');
+      const assistantMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: 'Sorry — the server returned an error. Please retry.',
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
     }
   };
 
-  const handleFileUpload = async (files: File[]) => {
-    if (!user) {
-      toast.info('Please log in first');
-      return;
-    }
-
-    // UI list (keep for display)
+  // -----------------------------
+  // Upload
+  // -----------------------------
+  const handleFileUpload = (files: File[]) => {
     const newFiles: UploadedFile[] = files.map((file) => ({
       file,
-      type: 'other' as FileType,
+      type: 'other',
     }));
     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));
   };
 
-  const handleFileTypeChange = async (index: number, type: FileType) => {
-    setUploadedFiles((prev) =>
-      prev.map((file, i) => (i === index ? { ...file, type } : file))
-    );
+  const handleFileTypeChange = (index: number, type: FileType) => {
+    setUploadedFiles((prev) => prev.map((f, i) => (i === index ? { ...f, type } : f)));
+  };
 
-    // 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;
+  // Your FileUploadArea likely triggers an "Upload" confirm button.
+  // If not, you can call this after user confirms in the modal.
+  const uploadSingle = async (f: UploadedFile) => {
+    if (!user) throw new Error('Not logged in');
 
+    const form = new FormData();
+    form.append('user_id', user.email);
+    form.append('doc_type', fileTypeToDocType(f.type));
+    form.append('file', f.file);
+
+    const res = await fetch('/api/upload', { method: 'POST', body: form });
+    if (!res.ok) {
+      const text = await res.text().catch(() => '');
+      throw new Error(`/api/upload failed: ${res.status} ${text}`);
+    }
+    return res.json() as Promise<{ ok: boolean; added_chunks: number; status_md: string }>;
+  };
+
+  // If your UI already has an "Upload" button in the modal,
+  // wire it to this function via FileUploadArea; otherwise keep as-is.
+  const handleUploadAllPending = async () => {
+    if (!user) {
+      toast.error('Please log in first');
+      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;
+      for (const f of uploadedFiles) {
+        // naive: upload all; you can also only upload newly added ones
+        const out = await uploadSingle(f);
+        toast.success(`${f.file.name} uploaded (+${out.added_chunks} chunks)`);
       }
-
-      const data = await res.json();
-      toast.success(`Updated type: ${target.file.name} → ${mapFileTypeToDocType(type)} (+${data?.added_chunks ?? 0})`);
-      fetchMemoryLine(user);
+      const ml = await apiGet<{ progress_pct: number }>('/api/memoryline?user_id=' + encodeURIComponent(user.email));
+      setMemoryProgress(Math.round((ml.progress_pct || 0) * 100));
     } catch (e: any) {
-      toast.error(`Re-upload error: ${e?.message ?? 'unknown'}`);
+      toast.error(e.message || 'Upload failed');
     }
   };
 
+  // -----------------------------
+  // Export / Summary / Quiz
+  // -----------------------------
   const handleClearConversation = () => {
     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.",
+          "Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. Upload your course materials and ask me anything.",
         timestamp: new Date(),
       },
     ]);
-    toast.success('Conversation cleared');
   };
 
   const handleExport = async () => {
-    if (!user) return toast.info('Please log in first');
-
+    if (!user) return toast.error('Please log in');
     try {
-      const res = await fetch('/api/export', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ user_id: user.userId, learning_mode: learningMode }),
+      const out = await apiPost<{ markdown: string }>('/api/export', {
+        user_id: user.email,
+        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 ?? '');
+      setExportResult(out.markdown || '');
       setResultType('export');
-      toast.success('Conversation exported!');
+      toast.success('Export generated');
     } catch (e: any) {
-      toast.error(`Export error: ${e?.message ?? 'unknown'}`);
+      toast.error(e.message || 'Export failed');
     }
   };
 
   const handleSummary = async () => {
-    if (!user) return toast.info('Please log in first');
-
+    if (!user) return toast.error('Please log in');
     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),
-        }),
+      const out = await apiPost<{ markdown: string }>('/api/summary', {
+        user_id: user.email,
+        learning_mode: learningMode,
+        language_preference: language === 'auto' ? 'Auto' : language === 'en' ? 'English' : 'Chinese',
       });
-      if (!res.ok) {
-        const txt = await res.text();
-        toast.error(`Summary failed: ${txt}`);
-        return;
-      }
-      const data = await res.json();
-      setExportResult(data?.markdown ?? '');
+      setExportResult(out.markdown || '');
       setResultType('summary');
-      toast.success('Summary generated!');
+      toast.success('Summary generated');
     } catch (e: any) {
-      toast.error(`Summary error: ${e?.message ?? 'unknown'}`);
+      toast.error(e.message || 'Summary failed');
     }
   };
 
-  // You的后端目前没提供 /api/quiz，这里先保持“前端生成文案”占位；
-  // 下一步如果你要真实 quiz，我们加 /api/quiz endpoint 即可。
-  const handleQuiz = async () => {
+  const handleQuiz = () => {
+    // No backend endpoint yet; keep mock for now
     const quiz = `# Micro-Quiz (MVP)
-We can wire this to a real /api/quiz endpoint next.
 
-Try asking Clare in Exam Prep mode to generate quiz questions from your uploaded docs.`;
+1) What is one core principle of Responsible AI?
+2) Give one example of fairness risk.
+3) Explain transparency in one sentence.
+`;
     setExportResult(quiz);
     setResultType('quiz');
-    toast.success('Quiz generated!');
+    toast.success('Quiz generated (mock)');
   };
 
   return (
@@ -410,12 +347,10 @@ Try asking Clare in Exam Prep mode to generate quiz questions from your uploaded
       />
 
       <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)} />
         )}
 
-        {/* Left Sidebar */}
         <aside
           className={`
             fixed lg:static inset-y-0 left-0 z-50
@@ -433,7 +368,6 @@ Try asking Clare in Exam Prep mode to generate quiz questions from your uploaded
               <X className="h-5 w-5" />
             </Button>
           </div>
-
           <LeftSidebar
             learningMode={learningMode}
             language={language}
@@ -445,7 +379,6 @@ Try asking Clare in Exam Prep mode to generate quiz questions from your uploaded
           />
         </aside>
 
-        {/* Main Chat Area */}
         <main className="flex-1 flex flex-col min-w-0">
           <ChatArea
             messages={messages}
@@ -460,16 +393,20 @@ Try asking Clare in Exam Prep mode to generate quiz questions from your uploaded
             onClearConversation={handleClearConversation}
             onLearningModeChange={setLearningMode}
             spaceType={spaceType}
-            isTyping={isTyping}
           />
+
+          {/* Optional: if you want a manual "Upload All" button for MVP */}
+          {/* <div className="p-3 border-t">
+            <Button onClick={handleUploadAllPending} disabled={!user || uploadedFiles.length === 0}>
+              Upload all pending files
+            </Button>
+          </div> */}
         </main>
 
-        {/* Mobile Sidebar Toggle - Right */}
         {rightPanelOpen && (
           <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setRightPanelOpen(false)} />
         )}
 
-        {/* Right Panel */}
         {rightPanelVisible && (
           <aside
             className={`
@@ -488,7 +425,6 @@ Try asking Clare in Exam Prep mode to generate quiz questions from your uploaded
                 <X className="h-5 w-5" />
               </Button>
             </div>
-
             <RightPanel
               user={user}
               onLogin={handleLogin}
@@ -499,11 +435,13 @@ Try asking Clare in Exam Prep mode to generate quiz questions from your uploaded
               setExportResult={setExportResult}
               resultType={resultType}
               setResultType={setResultType}
+              onExport={handleExport}
+              onQuiz={handleQuiz}
+              onSummary={handleSummary}
             />
           </aside>
         )}
 
-        {/* Toggle Right Panel Button - Desktop only */}
         <Button
           variant="outline"
           size="icon"
@@ -516,7 +454,6 @@ Try asking Clare in Exam Prep mode to generate quiz questions from your uploaded
           {rightPanelVisible ? <ChevronRight className="h-3 w-3" /> : <ChevronLeft className="h-3 w-3" />}
         </Button>
 
-        {/* Floating Action Buttons - Desktop only, when panel is closed */}
         {!rightPanelVisible && (
           <FloatingActionButtons
             user={user}