Update web/src/App.tsx

web/src/App.tsx

@@ -21,8 +21,8 @@ export interface Message {
   content: string;
   timestamp: Date;
   references?: string[];
-  sender?: GroupMember; // For group chat
-  showNextButton?: boolean; // For quiz mode
+  sender?: GroupMember;
+  showNextButton?: boolean;
   questionData?: {
     type: "multiple-choice" | "fill-in-blank" | "open-ended";
     question: string;
@@ -51,14 +51,8 @@ export type SpaceType = "individual" | "group";
 export interface CourseInfo {
   id: string;
   name: string;
-  instructor: {
-    name: string;
-    email: string;
-  };
-  teachingAssistant: {
-    name: string;
-    email: string;
-  };
+  instructor: { name: string; email: string };
+  teachingAssistant: { name: string; email: string };
 }
 
 export interface Workspace {
@@ -70,7 +64,7 @@ export interface Workspace {
   category?: "course" | "personal";
   courseName?: string;
   courseInfo?: CourseInfo;
-  isEditable?: boolean; // For personal interest workspaces
+  isEditable?: boolean;
 }
 
 export type FileType = "syllabus" | "lecture-slides" | "literature-review" | "other";
@@ -124,10 +118,8 @@ function App() {
 
   const [user, setUser] = useState<User | null>(null);
 
-  // Global current course selection (My Space only)
   const [currentCourseId, setCurrentCourseId] = useState<string>(() => localStorage.getItem("myspace_selected_course") || "course1");
 
-  // Available courses with instructor/TA info
   const availableCourses: CourseInfo[] = [
     {
       id: "course1",
@@ -155,7 +147,6 @@ function App() {
     },
   ];
 
-  // Separate messages for each chat mode
   const [askMessages, setAskMessages] = useState<Message[]>([
     {
       id: "1",
@@ -192,7 +183,6 @@ function App() {
 
   const prevChatModeRef = useRef<ChatMode>(chatMode);
 
-  // Ensure welcome message exists when switching modes or when messages are empty
   useEffect(() => {
     let currentMessages: Message[];
     let setCurrentMessages: (messages: Message[]) => void;
@@ -267,21 +257,14 @@ function App() {
   const [showProfileEditor, setShowProfileEditor] = useState(false);
   const [showOnboarding, setShowOnboarding] = useState(false);
 
-  // Review banner state
-  const [showReviewBanner, setShowReviewBanner] = useState(() => {
-    return true; // force show for testing (as you had)
-  });
-
+  const [showReviewBanner, setShowReviewBanner] = useState(() => true);
   const [showClearDialog, setShowClearDialog] = useState(false);
 
-  // Saved conversations/summaries
   const [savedItems, setSavedItems] = useState<SavedItem[]>([]);
   const [recentlySavedId, setRecentlySavedId] = useState<string | null>(null);
 
-  // Saved chats
   const [savedChats, setSavedChats] = useState<SavedChat[]>([]);
 
-  // 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" },
@@ -289,27 +272,19 @@ function App() {
     { id: "3", name: "Emma Williams", email: "emma.w@university.edu" },
   ]);
 
-  // Workspaces
   const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
   const [currentWorkspaceId, setCurrentWorkspaceId] = useState<string>("individual");
 
-  // Avoid double upload for same file
   const uploadedFingerprintsRef = useRef<Set<string>>(new Set());
 
-  // Initialize workspaces when user logs in
   useEffect(() => {
     if (user) {
       const userAvatar = `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`;
       const course1Info = availableCourses.find((c) => c.id === "course1");
-      const course2Info = availableCourses.find((c) => c.name === "AI Ethics"); // may be undefined
+      const course2Info = availableCourses.find((c) => c.name === "AI Ethics");
 
       setWorkspaces([
-        {
-          id: "individual",
-          name: "My Space",
-          type: "individual",
-          avatar: userAvatar,
-        },
+        { id: "individual", name: "My Space", type: "individual", avatar: userAvatar },
         {
           id: "group-1",
           name: "CS 101 Study Group",
@@ -334,16 +309,13 @@ function App() {
     }
   }, [user, groupMembers, availableCourses]);
 
-  // Get current workspace
   const currentWorkspace = workspaces.find((w) => w.id === currentWorkspaceId) || workspaces[0];
   const spaceType: SpaceType = currentWorkspace?.type || "individual";
 
-  // Keep current course in sync with workspace type
   useEffect(() => {
     if (!currentWorkspace) return;
 
     if (currentWorkspace.type === "group" && currentWorkspace.category === "course") {
-      // ✅ FIX: keep courseId as id (not name)
       const cid = currentWorkspace.courseInfo?.id;
       if (cid) setCurrentCourseId(cid);
       return;
@@ -355,7 +327,6 @@ function App() {
     }
   }, [currentWorkspaceId, currentWorkspace]);
 
-  // Persist selection for My Space
   useEffect(() => {
     if (currentWorkspace?.type === "individual") {
       localStorage.setItem("myspace_selected_course", currentCourseId);
@@ -367,7 +338,15 @@ function App() {
     localStorage.setItem("theme", isDarkMode ? "dark" : "light");
   }, [isDarkMode]);
 
-  // Pull memoryline progress (optional, but makes the UI real)
+  // ✅ 额外保险：锁 body 滚动（避免某些情况下仍出现页面滚动条）
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+
   useEffect(() => {
     if (!user) return;
 
@@ -377,7 +356,7 @@ function App() {
         const pct = Math.round((r.progress_pct ?? 0) * 100);
         setMemoryProgress(pct);
       } catch {
-        // silent; do not block UI
+        // silent
       }
     })();
   }, [user]);
@@ -421,9 +400,6 @@ function App() {
     return questions[randomIndex];
   };
 
-  // Pick doc_type for chat:
-  // - if any uploaded files: use the most recent file's selected type
-  // - else: default to Syllabus
   const getCurrentDocTypeForChat = (): string => {
     if (uploadedFiles.length > 0) {
       const last = uploadedFiles[uploadedFiles.length - 1];
@@ -450,15 +426,10 @@ function App() {
       sender,
     };
 
-    if (chatMode === "ask") {
-      setAskMessages((prev) => [...prev, userMessage]);
-    } else if (chatMode === "review") {
-      setReviewMessages((prev) => [...prev, userMessage]);
-    } else {
-      setQuizMessages((prev) => [...prev, userMessage]);
-    }
+    if (chatMode === "ask") setAskMessages((prev) => [...prev, userMessage]);
+    else if (chatMode === "review") setReviewMessages((prev) => [...prev, userMessage]);
+    else setQuizMessages((prev) => [...prev, userMessage]);
 
-    // Quiz mode stays mock for now (your current behavior)
     if (chatMode === "quiz") {
       if (quizState.waitingForAnswer) {
         const isCorrect = Math.random() > 0.3;
@@ -488,7 +459,6 @@ function App() {
       return;
     }
 
-    // Ask / Review: real backend call
     setIsTyping(true);
     try {
       const docType = getCurrentDocTypeForChat();
@@ -522,14 +492,10 @@ function App() {
       setIsTyping(false);
 
       setTimeout(() => {
-        if (chatMode === "ask") {
-          setAskMessages((prev) => [...prev, assistantMessage]);
-        } else if (chatMode === "review") {
-          setReviewMessages((prev) => [...prev, assistantMessage]);
-        }
+        if (chatMode === "ask") setAskMessages((prev) => [...prev, assistantMessage]);
+        else if (chatMode === "review") setReviewMessages((prev) => [...prev, assistantMessage]);
       }, 50);
 
-      // refresh memory progress (best-effort)
       try {
         const ml = await apiMemoryline(user.email);
         setMemoryProgress(Math.round((ml.progress_pct ?? 0) * 100));
@@ -588,15 +554,10 @@ function App() {
     }, 2000);
   };
 
-  const handleStartQuiz = () => {
-    handleNextQuestion();
-  };
+  const handleStartQuiz = () => handleNextQuestion();
 
   const handleFileUpload = (files: File[]) => {
-    const newFiles: UploadedFile[] = files.map((file) => ({
-      file,
-      type: "other" as FileType, // default; user will confirm type in ChatArea dialog
-    }));
+    const newFiles: UploadedFile[] = files.map((file) => ({ file, type: "other" as FileType }));
     setUploadedFiles((prev) => [...prev, ...newFiles]);
   };
 
@@ -605,10 +566,8 @@ function App() {
   };
 
   const handleFileTypeChange = async (index: number, type: FileType) => {
-    // update FE state first
     setUploadedFiles((prev) => prev.map((file, i) => (i === index ? { ...file, type } : file)));
 
-    // upload to backend once (best effort)
     if (!user) return;
 
     const target = uploadedFiles[index];
@@ -632,7 +591,6 @@ function App() {
     }
   };
 
-  // Helper function to check if current chat is already saved
   const isCurrentChatSaved = (): SavedChat | null => {
     if (messages.length <= 1) return null;
 
@@ -679,17 +637,11 @@ function App() {
   const handleLoadChat = (savedChat: SavedChat) => {
     setChatMode(savedChat.chatMode);
 
-    if (savedChat.chatMode === "ask") {
-      setAskMessages(savedChat.messages);
-    } else if (savedChat.chatMode === "review") {
-      setReviewMessages(savedChat.messages);
-    } else {
+    if (savedChat.chatMode === "ask") setAskMessages(savedChat.messages);
+    else if (savedChat.chatMode === "review") setReviewMessages(savedChat.messages);
+    else {
       setQuizMessages(savedChat.messages);
-      setQuizState({
-        currentQuestion: 0,
-        waitingForAnswer: false,
-        showNextButton: false,
-      });
+      setQuizState({ currentQuestion: 0, waitingForAnswer: false, showNextButton: false });
     }
 
     toast.success("Chat loaded!");
@@ -706,9 +658,7 @@ function App() {
   };
 
   const handleClearConversation = (shouldSave: boolean = false) => {
-    if (shouldSave) {
-      handleSaveChat();
-    }
+    if (shouldSave) handleSaveChat();
 
     const initialMessages: Record<ChatMode, Message[]> = {
       ask: [
@@ -738,17 +688,11 @@ function App() {
       ],
     };
 
-    if (chatMode === "ask") {
-      setAskMessages(initialMessages.ask);
-    } else if (chatMode === "review") {
-      setReviewMessages(initialMessages.review);
-    } else {
+    if (chatMode === "ask") setAskMessages(initialMessages.ask);
+    else if (chatMode === "review") setReviewMessages(initialMessages.review);
+    else {
       setQuizMessages(initialMessages.quiz);
-      setQuizState({
-        currentQuestion: 0,
-        waitingForAnswer: false,
-        showNextButton: false,
-      });
+      setQuizState({ currentQuestion: 0, waitingForAnswer: false, showNextButton: false });
     }
   };
 
@@ -770,12 +714,7 @@ function App() {
             "👋 Hi! I'm Clare, your AI teaching assistant. 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(),
         },
-        {
-          id: Date.now().toString(),
-          role: "assistant",
-          content,
-          timestamp: new Date(),
-        },
+        { id: Date.now().toString(), role: "assistant", content, timestamp: new Date() },
       ];
 
       const title = type === "export" ? "Exported Conversation" : "Micro-Quiz";
@@ -815,10 +754,7 @@ function App() {
     setRecentlySavedId(newItem.id);
     setLeftPanelVisible(true);
 
-    setTimeout(() => {
-      setRecentlySavedId(null);
-    }, 2000);
-
+    setTimeout(() => setRecentlySavedId(null), 2000);
     toast.success("Saved for later!");
   };
 
@@ -827,7 +763,6 @@ function App() {
     toast.success("Removed from saved items");
   };
 
-  // Create a new group workspace
   const handleCreateWorkspace = (payload: { name: string; category: "course" | "personal"; courseId?: string; invites: string[] }) => {
     const id = `group-${Date.now()}`;
     const avatar = `https://api.dicebear.com/7.x/shapes/svg?seed=${encodeURIComponent(payload.name)}`;
@@ -907,48 +842,46 @@ function App() {
     setShowOnboarding(false);
   };
 
-  const handleOnboardingSkip = () => {
-    setShowOnboarding(false);
-  };
-
-  if (!user) {
-    return <LoginScreen onLogin={handleLogin} />;
-  }
+  const handleOnboardingSkip = () => setShowOnboarding(false);
 
-  if (showOnboarding && user) {
-    return <Onboarding user={user} onComplete={handleOnboardingComplete} onSkip={handleOnboardingSkip} />;
-  }
+  if (!user) return <LoginScreen onLogin={handleLogin} />;
+  if (showOnboarding && user) return <Onboarding user={user} onComplete={handleOnboardingComplete} onSkip={handleOnboardingSkip} />;
 
   return (
-    <div className="min-h-screen bg-background flex flex-col">
+    <div className="h-screen overflow-hidden bg-background flex flex-col">
       <Toaster />
 
-      <Header
-        user={user}
-        onMenuClick={() => setLeftSidebarOpen(!leftSidebarOpen)}
-        onUserClick={() => {}}
-        isDarkMode={isDarkMode}
-        onToggleDarkMode={() => setIsDarkMode(!isDarkMode)}
-        language={language}
-        onLanguageChange={setLanguage}
-        workspaces={workspaces}
-        currentWorkspace={currentWorkspace}
-        onWorkspaceChange={setCurrentWorkspaceId}
-        onCreateWorkspace={handleCreateWorkspace}
-        onLogout={() => setUser(null)}
-        availableCourses={availableCourses}
-        onUserUpdate={setUser}
-      />
+      {/* Header fixed */}
+      <div className="flex-shrink-0">
+        <Header
+          user={user}
+          onMenuClick={() => setLeftSidebarOpen(!leftSidebarOpen)}
+          onUserClick={() => {}}
+          isDarkMode={isDarkMode}
+          onToggleDarkMode={() => setIsDarkMode(!isDarkMode)}
+          language={language}
+          onLanguageChange={setLanguage}
+          workspaces={workspaces}
+          currentWorkspace={currentWorkspace}
+          onWorkspaceChange={setCurrentWorkspaceId}
+          onCreateWorkspace={handleCreateWorkspace}
+          onLogout={() => setUser(null)}
+          availableCourses={availableCourses}
+          onUserUpdate={setUser}
+        />
+      </div>
 
       {showProfileEditor && user && <ProfileEditor user={user} onSave={setUser} onClose={() => setShowProfileEditor(false)} />}
 
+      {/* Review banner fixed */}
       {showReviewBanner && (
-        <div className="w-full bg-background border-b border-border flex-shrink-0 relative z-50">
+        <div className="flex-shrink-0 w-full bg-background border-b border-border relative z-50">
           <ReviewBanner onReview={handleReviewClick} onDismiss={handleDismissReviewBanner} />
         </div>
       )}
 
-      <div className="flex-1 flex overflow-hidden h-[calc(100vh-4rem)] relative" style={{ overscrollBehavior: "none" }}>
+      {/* Main area: NO page scroll, only inner panes scroll */}
+      <div className="flex-1 min-h-0 flex overflow-hidden relative" style={{ overscrollBehavior: "none" }}>
         {!leftPanelVisible && (
           <Button
             variant="secondary"
@@ -964,11 +897,9 @@ function App() {
 
         {leftSidebarOpen && <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setLeftSidebarOpen(false)} />}
 
+        {/* Desktop left panel */}
         {leftPanelVisible ? (
-          <aside
-            className="hidden lg:flex w-80 bg-card border-r border-border flex-col h-full min-h-0 relative"
-            style={{ borderRight: "1px solid var(--border)", height: "calc(100vh - 4rem)" }}
-          >
+          <aside className="hidden lg:flex w-80 bg-card border-r border-border flex-col min-h-0 overflow-hidden relative">
             <Button
               variant="secondary"
               size="icon"
@@ -980,58 +911,7 @@ function App() {
               <ChevronLeft className="h-3 w-3" />
             </Button>
 
-            {/* ✅ KEY: isolate scroll container for LeftSidebar */}
-            <div className="flex-1 min-h-0 overflow-y-auto">
-              <LeftSidebar
-                learningMode={learningMode}
-                language={language}
-                onLearningModeChange={setLearningMode}
-                onLanguageChange={setLanguage}
-                spaceType={spaceType}
-                groupMembers={groupMembers}
-                user={user}
-                onLogin={setUser}
-                onLogout={() => setUser(null)}
-                isLoggedIn={!!user}
-                onEditProfile={() => setShowProfileEditor(true)}
-                savedItems={savedItems}
-                recentlySavedId={recentlySavedId}
-                onUnsave={handleUnsave}
-                onSave={handleSave}
-                savedChats={savedChats}
-                onLoadChat={handleLoadChat}
-                onDeleteSavedChat={handleDeleteSavedChat}
-                onRenameSavedChat={handleRenameSavedChat}
-                currentWorkspaceId={currentWorkspaceId}
-                workspaces={workspaces}
-                selectedCourse={currentCourseId}
-                availableCourses={availableCourses}
-              />
-            </div>
-          </aside>
-        ) : null}
-
-        <aside
-          className={`
-            fixed lg:hidden inset-y-0 left-0 z-50
-            w-80 bg-card border-r border-border
-            transform transition-transform duration-300 ease-in-out
-            ${leftSidebarOpen ? "translate-x-0" : "-translate-x-full"}
-            flex flex-col
-            mt-16
-            h-[calc(100vh-4rem)]
-            min-h-0
-          `}
-        >
-          <div className="p-4 border-b border-border flex justify-between items-center">
-            <h3>Settings & Guide</h3>
-            <Button variant="ghost" size="icon" onClick={() => setLeftSidebarOpen(false)}>
-              <X className="h-5 w-5" />
-            </Button>
-          </div>
-
-          {/* ✅ KEY: isolate scroll container for mobile LeftSidebar */}
-          <div className="flex-1 min-h-0 overflow-y-auto">
+            {/* IMPORTANT: do NOT wrap LeftSidebar with another overflow container */}
             <LeftSidebar
               learningMode={learningMode}
               language={language}
@@ -1051,15 +931,64 @@ function App() {
               savedChats={savedChats}
               onLoadChat={handleLoadChat}
               onDeleteSavedChat={handleDeleteSavedChat}
+              onRenameSavedChat={handleRenameSavedChat}
               currentWorkspaceId={currentWorkspaceId}
               workspaces={workspaces}
               selectedCourse={currentCourseId}
               availableCourses={availableCourses}
             />
+          </aside>
+        ) : null}
+
+        {/* Mobile left drawer */}
+        <aside
+          className={`
+            fixed lg:hidden inset-y-0 left-0 z-50
+            w-80 bg-card border-r border-border
+            transform transition-transform duration-300 ease-in-out
+            ${leftSidebarOpen ? "translate-x-0" : "-translate-x-full"}
+            flex flex-col
+            mt-16
+            h-[calc(100vh-4rem)]
+            min-h-0
+            overflow-hidden
+          `}
+        >
+          <div className="p-4 border-b border-border flex justify-between items-center flex-shrink-0">
+            <h3>Settings & Guide</h3>
+            <Button variant="ghost" size="icon" onClick={() => setLeftSidebarOpen(false)}>
+              <X className="h-5 w-5" />
+            </Button>
           </div>
+
+          <LeftSidebar
+            learningMode={learningMode}
+            language={language}
+            onLearningModeChange={setLearningMode}
+            onLanguageChange={setLanguage}
+            spaceType={spaceType}
+            groupMembers={groupMembers}
+            user={user}
+            onLogin={setUser}
+            onLogout={() => setUser(null)}
+            isLoggedIn={!!user}
+            onEditProfile={() => setShowProfileEditor(true)}
+            savedItems={savedItems}
+            recentlySavedId={recentlySavedId}
+            onUnsave={handleUnsave}
+            onSave={handleSave}
+            savedChats={savedChats}
+            onLoadChat={handleLoadChat}
+            onDeleteSavedChat={handleDeleteSavedChat}
+            currentWorkspaceId={currentWorkspaceId}
+            workspaces={workspaces}
+            selectedCourse={currentCourseId}
+            availableCourses={availableCourses}
+          />
         </aside>
 
-        <main className="flex-1 flex flex-col min-w-0 min-h-0 h-full">
+        {/* Chat column: overflow hidden, ChatArea handles its own inner scroll */}
+        <main className="flex-1 min-w-0 min-h-0 flex flex-col overflow-hidden">
           <ChatArea
             messages={messages}
             onSendMessage={handleSendMessage}