Update web/src/App.tsx

web/src/App.tsx

@@ -1,14 +1,12 @@
-// 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 } 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 {
@@ -22,7 +20,8 @@ export interface Message {
 
 export interface User {
   name: string;
-  email: string; // we also use as user_id
+  email: string;
+  user_id: string; // IMPORTANT: server session key
 }
 
 export interface GroupMember {
@@ -40,12 +39,54 @@ export type FileType = 'syllabus' | 'lecture-slides' | 'literature-review' | 'ot
 export interface UploadedFile {
   file: File;
   type: FileType;
+  uploaded?: boolean;
+  uploadedChunks?: number;
 }
 
 export type LearningMode = 'concept' | 'socratic' | 'exam' | 'assignment' | 'summary';
 export type Language = 'auto' | 'en' | 'zh';
 
-type ResultType = 'export' | 'quiz' | 'summary' | null;
+// ----------------------------
+// API helpers (same-origin)
+// ----------------------------
+async function apiPostJson<T>(path: string, body: unknown): Promise<T> {
+  const res = await fetch(path, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) {
+    const txt = await res.text();
+    throw new Error(`POST ${path} failed: ${res.status} ${txt}`);
+  }
+  return res.json();
+}
+
+async function apiPostForm<T>(path: string, formData: FormData): Promise<T> {
+  const res = await fetch(path, {
+    method: 'POST',
+    body: formData,
+  });
+  if (!res.ok) {
+    const txt = await res.text();
+    throw new Error(`POST ${path} failed: ${res.status} ${txt}`);
+  }
+  return res.json();
+}
+
+// FE FileType -> BE doc_type mapping
+function mapFileTypeToDocType(t: FileType): string {
+  switch (t) {
+    case 'syllabus':
+      return 'Syllabus';
+    case 'lecture-slides':
+      return 'Lecture Slides';
+    case 'literature-review':
+      return 'Literature Review / Paper';
+    default:
+      return 'Other';
+  }
+}
 
 function App() {
   const [isDarkMode, setIsDarkMode] = useState(() => {
@@ -60,16 +101,15 @@ function App() {
       id: '1',
       role: 'assistant',
       content:
-        "Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. Upload your course materials and ask me anything.",
+        "Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. Upload your syllabus/notes and ask me anything.",
       timestamp: new Date(),
     },
   ]);
 
   const [learningMode, setLearningMode] = useState<LearningMode>('concept');
   const [language, setLanguage] = useState<Language>('auto');
-
   const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
-  const [memoryProgress, setMemoryProgress] = useState(40);
+  const [memoryProgress, setMemoryProgress] = useState(36);
 
   const [leftSidebarOpen, setLeftSidebarOpen] = useState(false);
   const [rightPanelOpen, setRightPanelOpen] = useState(false);
@@ -78,7 +118,7 @@ function App() {
   const [spaceType, setSpaceType] = useState<SpaceType>('individual');
 
   const [exportResult, setExportResult] = useState('');
-  const [resultType, setResultType] = useState<ResultType>(null);
+  const [resultType, setResultType] = useState<'export' | 'quiz' | 'summary' | null>(null);
 
   const [groupMembers] = useState<GroupMember[]>([
     { id: 'clare', name: 'Clare AI', email: 'clare@ai.assistant', isAI: true },
@@ -92,72 +132,125 @@ function App() {
     localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
   }, [isDarkMode]);
 
-  // -----------------------------
-  // 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();
-  };
+  // ----------------------------
+  // Login: call backend /api/login
+  // ----------------------------
+  const handleLogin = async (name: string, email: string) => {
+    // Use email as stable user_id for MVP
+    const user_id = email.trim().toLowerCase();
+
+    try {
+      const resp = await apiPostJson<{ ok: boolean; user: { name: string; user_id: string } }>(
+        '/api/login',
+        { name, user_id }
+      );
 
-  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}`);
+      if (!resp.ok) throw new Error('login failed');
+
+      setUser({ name: resp.user.name, email, user_id: resp.user.user_id });
+      toast.success(`Welcome, ${resp.user.name}!`);
+    } catch (e: any) {
+      console.error(e);
+      toast.error(`Login failed: ${e?.message || 'unknown error'}`);
     }
-    return res.json();
   };
 
-  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';
+  const handleLogout = () => {
+    setUser(null);
+    toast.success('Logged out successfully');
   };
 
-  // -----------------------------
-  // Auth
-  // -----------------------------
-  const handleLogin = async (u: User) => {
-    // use email as user_id
-    const user_id = u.email.trim();
-    const name = u.name.trim();
+  // ----------------------------
+  // Upload: call backend /api/upload
+  // ----------------------------
+  const uploadOneFile = async (f: UploadedFile) => {
+    if (!user) throw new Error('not logged in');
+
+    const form = new FormData();
+    form.append('user_id', user.user_id);
+    form.append('doc_type', mapFileTypeToDocType(f.type));
+    form.append('file', f.file);
+
+    const resp = await apiPostForm<{ ok: boolean; added_chunks: number; status_md: string }>(
+      '/api/upload',
+      form
+    );
+
+    return resp;
+  };
 
-    if (!user_id || !name) {
-      toast.error('Missing name/email');
+  // When FileUploadArea fires onFileUpload(files), we add them + immediately upload them (type default other).
+  // If you want strict "must choose type before upload", then your FileUploadArea should call onFileTypeChange first.
+  const handleFileUpload = async (files: File[]) => {
+    if (!user) {
+      toast.error('Please log in first');
       return;
     }
 
+    const newFiles: UploadedFile[] = files.map((file) => ({
+      file,
+      type: 'other',
+      uploaded: false,
+    }));
+
+    // Optimistic add
+    setUploadedFiles((prev) => [...prev, ...newFiles]);
+
+    // Upload sequentially to reduce memory spikes
+    for (const uf of newFiles) {
+      try {
+        toast.message(`Uploading: ${uf.file.name}`);
+        const r = await uploadOneFile(uf);
+
+        setUploadedFiles((prev) =>
+          prev.map((x) =>
+            x.file === uf.file
+              ? { ...x, uploaded: true, uploadedChunks: r.added_chunks }
+              : x
+          )
+        );
+        toast.success(`Uploaded ${uf.file.name} (+${r.added_chunks} chunks)`);
+      } catch (e: any) {
+        console.error(e);
+        toast.error(`Upload failed: ${uf.file.name} — ${e?.message || 'unknown error'}`);
+      }
+    }
+  };
+
+  // If user changes file type AFTER selecting, re-upload with correct doc_type (important for syllabus)
+  const handleFileTypeChange = async (index: number, type: FileType) => {
+    setUploadedFiles((prev) =>
+      prev.map((file, i) => (i === index ? { ...file, type } : file))
+    );
+
+    if (!user) return;
+
+    // Re-upload this file with the new type (this is what fixes: "doc_type=Other" bug)
+    const target = uploadedFiles[index];
+    if (!target) return;
+
     try {
-      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));
+      toast.message(`Re-uploading as ${type}: ${target.file.name}`);
+      const r = await uploadOneFile({ ...target, type });
+      setUploadedFiles((prev) =>
+        prev.map((x, i) =>
+          i === index ? { ...x, uploaded: true, uploadedChunks: r.added_chunks } : x
+        )
+      );
+      toast.success(`Updated type and uploaded (+${r.added_chunks} chunks)`);
     } catch (e: any) {
-      toast.error(e.message || 'Login failed');
+      console.error(e);
+      toast.error(`Re-upload failed: ${e?.message || 'unknown error'}`);
     }
   };
 
-  const handleLogout = () => {
-    setUser(null);
-    toast.success('Logged out');
+  const handleRemoveFile = (index: number) => {
+    setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
   };
 
-  // -----------------------------
-  // Chat
-  // -----------------------------
+  // ----------------------------
+  // Chat: call backend /api/chat
+  // ----------------------------
   const handleSendMessage = async (content: string) => {
     if (!content.trim() || !user) return;
 
@@ -178,161 +271,77 @@ function App() {
     if (!shouldAIRespond) return;
 
     try {
-      const resp = await apiPost<{
+      const resp = await apiPostJson<{
         reply: string;
         session_status_md: string;
         refs: { source_file?: string; section?: string }[];
         latency_ms?: number;
       }>('/api/chat', {
-        user_id: user.email,
+        user_id: user.user_id,
         message: content,
         learning_mode: learningMode,
         language_preference: language === 'auto' ? 'Auto' : language === 'en' ? 'English' : 'Chinese',
         doc_type: 'Syllabus',
       });
 
-      const refs = (resp.refs || []).map((r) => {
-        const a = r.source_file || 'source';
-        const b = r.section || 'section';
-        return `${a} — ${b}`;
-      });
+      const refs = (resp.refs || [])
+        .map((r) => [r.source_file, r.section].filter(Boolean).join(' — '))
+        .filter(Boolean);
 
       const assistantMessage: Message = {
         id: (Date.now() + 1).toString(),
         role: 'assistant',
-        content: resp.reply || '(empty response)',
+        content: resp.reply || '(empty reply)',
         timestamp: new Date(),
-        references: refs,
+        references: refs.length ? refs : undefined,
         sender: spaceType === 'group' ? groupMembers.find((m) => m.isAI) : undefined,
       };
 
       setMessages((prev) => [...prev, assistantMessage]);
     } catch (e: any) {
-      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]);
-    }
-  };
-
-  // -----------------------------
-  // Upload
-  // -----------------------------
-  const handleFileUpload = (files: File[]) => {
-    const newFiles: UploadedFile[] = files.map((file) => ({
-      file,
-      type: 'other',
-    }));
-    setUploadedFiles((prev) => [...prev, ...newFiles]);
-  };
-
-  const handleRemoveFile = (index: number) => {
-    setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
-  };
-
-  const handleFileTypeChange = (index: number, type: FileType) => {
-    setUploadedFiles((prev) => prev.map((f, i) => (i === index ? { ...f, type } : f)));
-  };
-
-  // 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 {
-      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 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(e.message || 'Upload failed');
+      console.error(e);
+      toast.error(`Chat failed: ${e?.message || 'unknown error'}`);
     }
   };
 
-  // -----------------------------
-  // Export / Summary / Quiz
-  // -----------------------------
   const handleClearConversation = () => {
     setMessages([
       {
         id: '1',
         role: 'assistant',
         content:
-          "Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. Upload your course materials and ask me anything.",
+          "Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. Upload your syllabus/notes and ask me anything.",
         timestamp: new Date(),
       },
     ]);
   };
 
-  const handleExport = async () => {
-    if (!user) return toast.error('Please log in');
-    try {
-      const out = await apiPost<{ markdown: string }>('/api/export', {
-        user_id: user.email,
-        learning_mode: learningMode,
-      });
-      setExportResult(out.markdown || '');
-      setResultType('export');
-      toast.success('Export generated');
-    } catch (e: any) {
-      toast.error(e.message || 'Export failed');
-    }
-  };
+  // Your existing mock export/quiz/summary can stay. (Optional: wire them to /api/export /api/summary later.)
+  const handleExport = () => {
+    const result = `# Conversation Export
+Date: ${new Date().toLocaleDateString()}
+Student: ${user?.name || ''}
 
-  const handleSummary = async () => {
-    if (!user) return toast.error('Please log in');
-    try {
-      const out = await apiPost<{ markdown: string }>('/api/summary', {
-        user_id: user.email,
-        learning_mode: learningMode,
-        language_preference: language === 'auto' ? 'Auto' : language === 'en' ? 'English' : 'Chinese',
-      });
-      setExportResult(out.markdown || '');
-      setResultType('summary');
-      toast.success('Summary generated');
-    } catch (e: any) {
-      toast.error(e.message || 'Summary failed');
-    }
+(Placeholder export; wire to /api/export if needed.)`;
+    setExportResult(result);
+    setResultType('export');
+    toast.success('Conversation exported!');
   };
 
   const handleQuiz = () => {
-    // No backend endpoint yet; keep mock for now
-    const quiz = `# Micro-Quiz (MVP)
-
-1) What is one core principle of Responsible AI?
-2) Give one example of fairness risk.
-3) Explain transparency in one sentence.
-`;
+    const quiz = `# Micro-Quiz (Placeholder)
+(You can wire to backend later.)`;
     setExportResult(quiz);
     setResultType('quiz');
-    toast.success('Quiz generated (mock)');
+    toast.success('Quiz generated!');
+  };
+
+  const handleSummary = () => {
+    const summary = `# Summary (Placeholder)
+(You can wire to backend /api/summary later.)`;
+    setExportResult(summary);
+    setResultType('summary');
+    toast.success('Summary generated!');
   };
 
   return (
@@ -394,13 +403,6 @@ function App() {
             onLearningModeChange={setLearningMode}
             spaceType={spaceType}
           />
-
-          {/* 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>
 
         {rightPanelOpen && (
@@ -420,11 +422,12 @@ function App() {
             `}
           >
             <div className="lg:hidden p-4 border-b border-border flex justify-between items-center">
-              <h3>Account & Actions</h3>
+              <h3>Account</h3>
               <Button variant="ghost" size="icon" onClick={() => setRightPanelOpen(false)}>
                 <X className="h-5 w-5" />
               </Button>
             </div>
+
             <RightPanel
               user={user}
               onLogin={handleLogin}
@@ -435,9 +438,6 @@ function App() {
               setExportResult={setExportResult}
               resultType={resultType}
               setResultType={setResultType}
-              onExport={handleExport}
-              onQuiz={handleQuiz}
-              onSummary={handleSummary}
             />
           </aside>
         )}