Update web/src/App.tsx

web/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { Header } from './components/Header';
 import { LeftSidebar } from './components/LeftSidebar';
 import { ChatArea } from './components/ChatArea';
@@ -15,13 +15,12 @@ export interface Message {
   content: string;
   timestamp: Date;
   references?: string[];
-  sender?: GroupMember;
+  sender?: GroupMember; // For group chat
 }
 
 export interface User {
   name: string;
   email: string;
-  user_id: string; // IMPORTANT: server session key
 }
 
 export interface GroupMember {
@@ -46,35 +45,19 @@ export interface UploadedFile {
 export type LearningMode = 'concept' | 'socratic' | 'exam' | 'assignment' | 'summary';
 export type Language = 'auto' | 'en' | 'zh';
 
-// ----------------------------
-// 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();
-}
+type ChatApiResp = {
+  reply: string;
+  session_status_md?: string;
+  refs?: Array<{ source_file?: string; section?: string }>;
+  latency_ms?: number;
+};
 
-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();
-}
+type UploadApiResp = {
+  ok: boolean;
+  added_chunks: number;
+  status_md: string;
+};
 
-// FE FileType -> BE doc_type mapping
 function mapFileTypeToDocType(t: FileType): string {
   switch (t) {
     case 'syllabus':
@@ -88,6 +71,28 @@ function mapFileTypeToDocType(t: FileType): string {
   }
 }
 
+async function apiPostJson<T>(path: string, payload: any): Promise<T> {
+  const res = await fetch(path, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) {
+    const txt = await res.text().catch(() => '');
+    throw new Error(`HTTP ${res.status}: ${txt || res.statusText}`);
+  }
+  return (await res.json()) as T;
+}
+
+async function apiPostForm<T>(path: string, form: FormData): Promise<T> {
+  const res = await fetch(path, { method: 'POST', body: form });
+  if (!res.ok) {
+    const txt = await res.text().catch(() => '');
+    throw new Error(`HTTP ${res.status}: ${txt || res.statusText}`);
+  }
+  return (await res.json()) as T;
+}
+
 function App() {
   const [isDarkMode, setIsDarkMode] = useState(() => {
     const saved = localStorage.getItem('theme');
@@ -101,15 +106,16 @@ function App() {
       id: '1',
       role: 'assistant',
       content:
-        "Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. Upload your syllabus/notes and ask me anything.",
+        "Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. Upload your materials (e.g., syllabus/lecture slides) 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(36);
+  const [memoryProgress, setMemoryProgress] = useState(40);
 
   const [leftSidebarOpen, setLeftSidebarOpen] = useState(false);
   const [rightPanelOpen, setRightPanelOpen] = useState(false);
@@ -120,6 +126,7 @@ function App() {
   const [exportResult, setExportResult] = useState('');
   const [resultType, setResultType] = useState<'export' | 'quiz' | 'summary' | null>(null);
 
+  // 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' },
@@ -132,130 +139,35 @@ function App() {
     localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
   }, [isDarkMode]);
 
-  // ----------------------------
-  // 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 }
-      );
-
-      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'}`);
-    }
-  };
+  const userId = useMemo(() => {
+    // 兼容你现在 RightPanel 的 User 结构：email 作为 user_id
+    // 没登录也能测试：兜底 0405
+    return (user?.email || '0405').trim();
+  }, [user]);
+
+  const currentDocTypeForChat = useMemo(() => {
+    // 给 /api/chat 传一个“更合理”的 doc_type（不影响 upload）
+    const hasSyllabus = uploadedFiles.some(f => f.type === 'syllabus' && f.uploaded);
+    if (hasSyllabus) return 'Syllabus';
+    const hasSlides = uploadedFiles.some(f => f.type === 'lecture-slides' && f.uploaded);
+    if (hasSlides) return 'Lecture Slides';
+    const hasLit = uploadedFiles.some(f => f.type === 'literature-review' && f.uploaded);
+    if (hasLit) return 'Literature Review / Paper';
+    return 'Other';
+  }, [uploadedFiles]);
 
-  const handleLogout = () => {
-    setUser(null);
-    toast.success('Logged out successfully');
-  };
-
-  // ----------------------------
-  // 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;
-  };
-
-  // 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 {
-      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) {
-      console.error(e);
-      toast.error(`Re-upload failed: ${e?.message || 'unknown error'}`);
-    }
-  };
-
-  const handleRemoveFile = (index: number) => {
-    setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
-  };
-
-  // ----------------------------
-  // Chat: call backend /api/chat
-  // ----------------------------
   const handleSendMessage = async (content: string) => {
-    if (!content.trim() || !user) return;
+    if (!content.trim()) return;
+
+    // Group mode: only respond if @clare mentioned
+    const shouldAIRespond =
+      spaceType === 'individual' || content.toLowerCase().includes('@clare');
 
+    // Sender info in group mode
     const sender: GroupMember | undefined =
-      spaceType === 'group' ? { id: user.email, name: user.name, email: user.email } : undefined;
+      spaceType === 'group' && user
+        ? { id: user.email, name: user.name, email: user.email }
+        : undefined;
 
     const userMessage: Message = {
       id: Date.now().toString(),
@@ -264,28 +176,21 @@ function App() {
       timestamp: new Date(),
       sender,
     };
+    setMessages(prev => [...prev, userMessage]);
 
-    setMessages((prev) => [...prev, userMessage]);
-
-    const shouldAIRespond = spaceType === 'individual' || content.toLowerCase().includes('@clare');
     if (!shouldAIRespond) return;
 
     try {
-      const resp = await apiPostJson<{
-        reply: string;
-        session_status_md: string;
-        refs: { source_file?: string; section?: string }[];
-        latency_ms?: number;
-      }>('/api/chat', {
-        user_id: user.user_id,
+      const resp = await apiPostJson<ChatApiResp>('/api/chat', {
+        user_id: userId,
         message: content,
         learning_mode: learningMode,
-        language_preference: language === 'auto' ? 'Auto' : language === 'en' ? 'English' : 'Chinese',
-        doc_type: 'Syllabus',
+        language_preference: language === 'auto' ? 'Auto' : language,
+        doc_type: currentDocTypeForChat,
       });
 
       const refs = (resp.refs || [])
-        .map((r) => [r.source_file, r.section].filter(Boolean).join(' — '))
+        .map(r => [r.source_file, r.section].filter(Boolean).join(' / '))
         .filter(Boolean);
 
       const assistantMessage: Message = {
@@ -294,13 +199,91 @@ function App() {
         content: resp.reply || '(empty reply)',
         timestamp: new Date(),
         references: refs.length ? refs : undefined,
-        sender: spaceType === 'group' ? groupMembers.find((m) => m.isAI) : undefined,
+        sender: spaceType === 'group' ? groupMembers.find(m => m.isAI) : undefined,
       };
 
-      setMessages((prev) => [...prev, assistantMessage]);
+      setMessages(prev => [...prev, assistantMessage]);
     } catch (e: any) {
       console.error(e);
       toast.error(`Chat failed: ${e?.message || 'unknown error'}`);
+      const assistantMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: `Sorry — chat request failed. ${e?.message || ''}`,
+        timestamp: new Date(),
+      };
+      setMessages(prev => [...prev, assistantMessage]);
+    }
+  };
+
+  // ✅ 关键：选中文件时“只入库，不上传”
+  const handleFileUpload = (files: File[]) => {
+    const newFiles: UploadedFile[] = files.map(file => ({
+      file,
+      type: 'other',
+      uploaded: false,
+    }));
+    setUploadedFiles(prev => [...prev, ...newFiles]);
+    toast.message('Files added. Select a File Type, then click Upload.');
+  };
+
+  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))
+    );
+  };
+
+  // ✅ 真正上传：只在用户点 Upload/Upload All 时触发
+  const handleUploadSingle = async (index: number) => {
+    const target = uploadedFiles[index];
+    if (!target) return;
+
+    try {
+      const form = new FormData();
+      form.append('user_id', userId);
+      form.append('doc_type', mapFileTypeToDocType(target.type)); // Network 里会看到这里
+      form.append('file', target.file);
+
+      const r = await apiPostForm<UploadApiResp>('/api/upload', form);
+
+      if (!r.ok) {
+        throw new Error('Upload response ok=false');
+      }
+
+      setUploadedFiles(prev =>
+        prev.map((x, i) =>
+          i === index
+            ? { ...x, uploaded: true, uploadedChunks: r.added_chunks }
+            : x
+        )
+      );
+
+      toast.success(`Uploaded: ${target.file.name} (+${r.added_chunks} chunks)`);
+    } catch (e: any) {
+      console.error(e);
+      toast.error(`Upload failed: ${e?.message || 'unknown error'}`);
+    }
+  };
+
+  const handleUploadAllPending = async () => {
+    const pendingIdx = uploadedFiles
+      .map((f, i) => ({ f, i }))
+      .filter(x => !x.f.uploaded)
+      .map(x => x.i);
+
+    if (!pendingIdx.length) {
+      toast.message('No pending files to upload.');
+      return;
+    }
+
+    for (const idx of pendingIdx) {
+      // 顺序上传，便于定位问题
+      // eslint-disable-next-line no-await-in-loop
+      await handleUploadSingle(idx);
     }
   };
 
@@ -310,39 +293,75 @@ function App() {
         id: '1',
         role: 'assistant',
         content:
-          "Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. Upload your syllabus/notes and ask me anything.",
+          "Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. Upload your materials (e.g., syllabus/lecture slides) and ask me anything.",
         timestamp: new Date(),
       },
     ]);
   };
 
-  // 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 || ''}
+  // 这些 action 你后端现在还没实现（/api/export /api/summary 你有）
+  // 这里先直接调后端，结果显示在 RightPanel
+  const handleExport = async () => {
+    try {
+      const r = await apiPostJson<{ markdown: string }>('/api/export', {
+        user_id: userId,
+        learning_mode: learningMode,
+      });
+      setExportResult(r.markdown || '');
+      setResultType('export');
+      toast.success('Conversation exported!');
+    } catch (e: any) {
+      toast.error(`Export failed: ${e?.message || 'unknown error'}`);
+    }
+  };
 
-(Placeholder export; wire to /api/export if needed.)`;
-    setExportResult(result);
-    setResultType('export');
-    toast.success('Conversation exported!');
+  const handleSummary = async () => {
+    try {
+      const r = await apiPostJson<{ markdown: string }>('/api/summary', {
+        user_id: userId,
+        learning_mode: learningMode,
+        language_preference: language === 'auto' ? 'Auto' : language,
+      });
+      setExportResult(r.markdown || '');
+      setResultType('summary');
+      toast.success('Summary generated!');
+    } catch (e: any) {
+      toast.error(`Summary failed: ${e?.message || 'unknown error'}`);
+    }
   };
 
+  // Quiz 你后端未必有接口，这里先保留 mock
   const handleQuiz = () => {
-    const quiz = `# Micro-Quiz (Placeholder)
-(You can wire to backend later.)`;
+    const quiz = `# Micro-Quiz: Responsible AI
+
+1) Which is a key principle of Responsible AI?
+A) Profit maximization
+B) Transparency
+C) Rapid deployment
+D) Cost reduction
+`;
     setExportResult(quiz);
     setResultType('quiz');
     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!');
-  };
+  // Memoryline：轻量拉一下（失败不影响）
+  useEffect(() => {
+    const run = async () => {
+      try {
+        const res = await fetch(`/api/memoryline?user_id=${encodeURIComponent(userId)}`);
+        if (!res.ok) return;
+        const j = await res.json();
+        const pct = typeof j?.progress_pct === 'number' ? j.progress_pct : null;
+        if (pct !== null) {
+          setMemoryProgress(Math.round(pct * 100));
+        }
+      } catch {
+        // ignore
+      }
+    };
+    run();
+  }, [userId]);
 
   return (
     <div className="min-h-screen bg-background flex flex-col">
@@ -356,10 +375,15 @@ Student: ${user?.name || ''}
       />
 
       <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
           className={`
             fixed lg:static inset-y-0 left-0 z-50
@@ -388,6 +412,7 @@ Student: ${user?.name || ''}
           />
         </aside>
 
+        {/* Main Chat Area */}
         <main className="flex-1 flex flex-col min-w-0">
           <ChatArea
             messages={messages}
@@ -396,8 +421,10 @@ Student: ${user?.name || ''}
             onFileUpload={handleFileUpload}
             onRemoveFile={handleRemoveFile}
             onFileTypeChange={handleFileTypeChange}
+            onUploadSingle={handleUploadSingle}
+            onUploadAllPending={handleUploadAllPending}
             memoryProgress={memoryProgress}
-            isLoggedIn={!!user}
+            isLoggedIn={true} // 允许你不登录也跑通后端（user_id=0405）
             learningMode={learningMode}
             onClearConversation={handleClearConversation}
             onLearningModeChange={setLearningMode}
@@ -405,10 +432,15 @@ Student: ${user?.name || ''}
           />
         </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
             className={`
@@ -422,7 +454,7 @@ Student: ${user?.name || ''}
             `}
           >
             <div className="lg:hidden p-4 border-b border-border flex justify-between items-center">
-              <h3>Account</h3>
+              <h3>Account & Actions</h3>
               <Button variant="ghost" size="icon" onClick={() => setRightPanelOpen(false)}>
                 <X className="h-5 w-5" />
               </Button>
@@ -430,8 +462,8 @@ Student: ${user?.name || ''}
 
             <RightPanel
               user={user}
-              onLogin={handleLogin}
-              onLogout={handleLogout}
+              onLogin={setUser}
+              onLogout={() => setUser(null)}
               isLoggedIn={!!user}
               onClose={() => setRightPanelVisible(false)}
               exportResult={exportResult}
@@ -442,6 +474,7 @@ Student: ${user?.name || ''}
           </aside>
         )}
 
+        {/* Toggle Right Panel Button - Desktop only */}
         <Button
           variant="outline"
           size="icon"
@@ -454,6 +487,7 @@ Student: ${user?.name || ''}
           {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}