Update web/src/App.tsx

web/src/App.tsx

@@ -15,12 +15,13 @@ export interface Message {
   content: string;
   timestamp: Date;
   references?: string[];
-  sender?: GroupMember; // For group chat
+  sender?: GroupMember;
 }
 
 export interface User {
   name: string;
-  email: string;
+  email: string;     // login 输入
+  user_id: string;   // 实际传后端的 user_id（这里等同 email/ID）
 }
 
 export interface GroupMember {
@@ -32,7 +33,6 @@ export interface GroupMember {
 }
 
 export type SpaceType = 'individual' | 'group';
-
 export type FileType = 'syllabus' | 'lecture-slides' | 'literature-review' | 'other';
 
 export interface UploadedFile {
@@ -58,6 +58,11 @@ type UploadApiResp = {
   status_md: string;
 };
 
+type LoginApiResp = {
+  ok: boolean;
+  user: { name: string; user_id: string };
+};
+
 function mapFileTypeToDocType(t: FileType): string {
   switch (t) {
     case 'syllabus':
@@ -106,7 +111,7 @@ function App() {
       id: '1',
       role: 'assistant',
       content:
-        "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.",
+        "Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. Please log in on the right, upload materials (optional), and ask me anything.",
       timestamp: new Date(),
     },
   ]);
@@ -138,16 +143,11 @@ function App() {
     localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
   }, [isDarkMode]);
 
-  const userId = useMemo(() => {
-    // 登录时：email 作为 user_id；不登录也可跑通：0405
-    return (user?.email || '0405').trim();
-  }, [user]);
+  // ✅ 彻底去掉 hardcode：未登录 userId 为空
+  const userId = useMemo(() => (user?.user_id || '').trim(), [user]);
 
-  const isLoggedIn = useMemo(() => {
-    // 你如果希望“必须登录才能聊天/上传”，这里改回 !!user
-    // 目前为了便于调试后端，允许未登录也走通（user_id=0405）
-    return true;
-  }, []);
+  // ✅ 未登录不可聊天/上传/feedback
+  const isLoggedIn = useMemo(() => !!user && !!userId, [user, userId]);
 
   const currentDocTypeForChat = useMemo(() => {
     const hasSyllabus = uploadedFiles.some((f) => f.type === 'syllabus' && f.uploaded);
@@ -159,14 +159,56 @@ function App() {
     return 'Other';
   }, [uploadedFiles]);
 
+  // ✅ 登录必须打后端 /api/login，确保 server session 有 name
+  const handleLogin = async (name: string, emailOrId: string) => {
+    const nameTrim = name.trim();
+    const idTrim = emailOrId.trim();
+
+    if (!nameTrim || !idTrim) {
+      toast.error('Please fill in both name and Email/ID');
+      return;
+    }
+
+    try {
+      const resp = await apiPostJson<LoginApiResp>('/api/login', {
+        name: nameTrim,
+        user_id: idTrim,
+      });
+
+      if (!resp?.ok) throw new Error('Login failed (ok=false)');
+
+      // 后端回来的 user_id 为准（保持一致）
+      setUser({
+        name: resp.user.name,
+        email: idTrim,
+        user_id: resp.user.user_id,
+      });
+
+      toast.success('Logged in');
+    } catch (e: any) {
+      console.error(e);
+      toast.error(`Login failed: ${e?.message || 'unknown error'}`);
+    }
+  };
+
+  const handleLogout = () => {
+    setUser(null);
+    toast.message('Logged out');
+  };
+
   const handleSendMessage = async (content: string) => {
     if (!content.trim()) return;
 
+    if (!isLoggedIn) {
+      toast.error('Please log in first');
+      return;
+    }
+
     const shouldAIRespond = spaceType === 'individual' || content.toLowerCase().includes('@clare');
 
     const sender: GroupMember | undefined =
       spaceType === 'group' && user
-        ? { id: user.email, name: user.name, email: user.email }
+        ? { id: user.user_id, name: user.name, email: user.email }
         : undefined;
 
     const userMessage: Message = {
@@ -220,6 +262,10 @@ function App() {
 
   // ✅ 选文件：只入库，不上传
   const handleFileUpload = (files: File[]) => {
+    if (!isLoggedIn) {
+      toast.error('Please log in first');
+      return;
+    }
     const newFiles: UploadedFile[] = files.map((file) => ({
       file,
       type: 'other',
@@ -237,8 +283,13 @@ function App() {
     setUploadedFiles((prev) => prev.map((f, i) => (i === index ? { ...f, type } : f)));
   };
 
-  // ✅ 上传单个文件（关键：读取“最新的 type”，写入 doc_type）
+  // ✅ 上传单个文件
   const handleUploadSingle = async (index: number) => {
+    if (!isLoggedIn) {
+      toast.error('Please log in first');
+      return;
+    }
+
     const target = uploadedFiles[index];
     if (!target) return;
 
@@ -264,8 +315,12 @@ function App() {
     }
   };
 
-  // ✅ 上传所有未上传
   const handleUploadAllPending = async () => {
+    if (!isLoggedIn) {
+      toast.error('Please log in first');
+      return;
+    }
+
     const pendingIdx = uploadedFiles
       .map((f, i) => ({ f, i }))
       .filter((x) => !x.f.uploaded)
@@ -277,7 +332,6 @@ function App() {
     }
 
     for (const idx of pendingIdx) {
-      // 顺序上传便于 debug
       // eslint-disable-next-line no-await-in-loop
       await handleUploadSingle(idx);
     }
@@ -289,13 +343,17 @@ function App() {
         id: '1',
         role: 'assistant',
         content:
-          "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.",
+          "Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. Please log in on the right, upload materials (optional), and ask me anything.",
         timestamp: new Date(),
       },
     ]);
   };
 
   const handleExport = async () => {
+    if (!isLoggedIn) {
+      toast.error('Please log in first');
+      return;
+    }
     try {
       const r = await apiPostJson<{ markdown: string }>('/api/export', {
         user_id: userId,
@@ -310,6 +368,10 @@ function App() {
   };
 
   const handleSummary = async () => {
+    if (!isLoggedIn) {
+      toast.error('Please log in first');
+      return;
+    }
     try {
       const r = await apiPostJson<{ markdown: string }>('/api/summary', {
         user_id: userId,
@@ -339,6 +401,8 @@ D) Cost reduction
   };
 
   useEffect(() => {
+    if (!isLoggedIn) return;
+
     const run = async () => {
       try {
         const res = await fetch(`/api/memoryline?user_id=${encodeURIComponent(userId)}`);
@@ -351,7 +415,7 @@ D) Cost reduction
       }
     };
     run();
-  }, [userId]);
+  }, [isLoggedIn, userId]);
 
   return (
     <div className="min-h-screen bg-background flex flex-col">
@@ -366,7 +430,10 @@ D) Cost reduction
 
       <div className="flex-1 flex overflow-hidden">
         {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)}
+          />
         )}
 
         <aside
@@ -401,6 +468,7 @@ D) Cost reduction
         <main className="flex-1 flex flex-col min-w-0">
           <ChatArea
             userId={userId}
+            user={user} // ✅ 让 ChatArea/Message 能拿到 name/id 做 feedback
             messages={messages}
             onSendMessage={handleSendMessage}
             uploadedFiles={uploadedFiles}
@@ -412,6 +480,7 @@ D) Cost reduction
             memoryProgress={memoryProgress}
             isLoggedIn={isLoggedIn}
             learningMode={learningMode}
+            currentDocTypeForChat={currentDocTypeForChat} // ✅ 反馈也需要
             onClearConversation={handleClearConversation}
             onLearningModeChange={setLearningMode}
             spaceType={spaceType}
@@ -419,7 +488,10 @@ D) Cost reduction
         </main>
 
         {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)}
+          />
         )}
 
         {rightPanelVisible && (
@@ -443,9 +515,9 @@ D) Cost reduction
 
             <RightPanel
               user={user}
-              onLogin={setUser}
-              onLogout={() => setUser(null)}
-              isLoggedIn={!!user}
+              onLogin={handleLogin}
+              onLogout={handleLogout}
+              isLoggedIn={isLoggedIn}
               onClose={() => setRightPanelVisible(false)}
               exportResult={exportResult}
               setExportResult={setExportResult}
@@ -470,7 +542,7 @@ D) Cost reduction
         {!rightPanelVisible && (
           <FloatingActionButtons
             user={user}
-            isLoggedIn={!!user}
+            isLoggedIn={isLoggedIn}
             onOpenPanel={() => setRightPanelVisible(true)}
             onExport={handleExport}
             onQuiz={handleQuiz}