Update web/src/App.tsx

web/src/App.tsx

@@ -7,9 +7,10 @@ import { RightPanel } from './components/RightPanel';
 import { FloatingActionButtons } from './components/FloatingActionButtons';
 import { LoginScreen } from './components/LoginScreen';
 import { ProfileEditor } from './components/ProfileEditor';
-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';
 
 import {
@@ -30,7 +31,7 @@ export interface Message {
   content: string;
   timestamp: Date;
   references?: string[];
-  sender?: GroupMember;
+  sender?: GroupMember; // For group chat
 }
 
 export interface User {
@@ -82,6 +83,8 @@ function App() {
   const [learningMode, setLearningMode] = useState<LearningMode>('concept');
   const [language, setLanguage] = useState<Language>('auto');
   const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+
+  // You can later wire this to /api/memoryline
   const [memoryProgress] = useState(36);
 
   const [leftSidebarOpen, setLeftSidebarOpen] = useState(false);
@@ -95,6 +98,7 @@ function App() {
   const [exportResult, setExportResult] = useState('');
   const [resultType, setResultType] = useState<'export' | 'quiz' | 'summary' | null>(null);
 
+  // Mock group members (still fine; AI responder uses backend now)
   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' },
@@ -109,7 +113,12 @@ function App() {
     if (user) {
       const userAvatar = `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`;
       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',
@@ -142,7 +151,9 @@ function App() {
     if (!content.trim() || !user) return;
 
     const sender: GroupMember | undefined =
-      spaceType === 'group' ? { id: user.email, name: user.name, email: user.email } : undefined;
+      spaceType === 'group'
+        ? { id: user.email, name: user.name, email: user.email }
+        : undefined;
 
     const userMessage: Message = {
       id: crypto.randomUUID(),
@@ -158,16 +169,14 @@ function App() {
     if (!shouldAIRespond) return;
 
     const assistantId = crypto.randomUUID();
-    setMessages((prev) => [
-      ...prev,
-      {
-        id: assistantId,
-        role: 'assistant',
-        content: 'Thinking...',
-        timestamp: new Date(),
-        sender: spaceType === 'group' ? groupMembers.find((m) => m.isAI) : undefined,
-      },
-    ]);
+    const assistantPlaceholder: Message = {
+      id: assistantId,
+      role: 'assistant',
+      content: 'Thinking...',
+      timestamp: new Date(),
+      sender: spaceType === 'group' ? groupMembers.find((m) => m.isAI) : undefined,
+    };
+    setMessages((prev) => [...prev, assistantPlaceholder]);
 
     try {
       const data = await apiChat({
@@ -186,14 +195,20 @@ function App() {
       setMessages((prev) =>
         prev.map((m) =>
           m.id === assistantId
-            ? { ...m, content: data.reply || '', references: references.length ? references : undefined }
+            ? {
+                ...m,
+                content: data.reply || '',
+                references: references.length ? references : undefined,
+              }
             : m
         )
       );
     } catch (err: any) {
       setMessages((prev) =>
         prev.map((m) =>
-          m.id === assistantId ? { ...m, content: `Sorry — request failed.\n${err?.message ?? String(err)}` } : m
+          m.id === assistantId
+            ? { ...m, content: `Sorry — request failed.\n${err?.message ?? String(err)}` }
+            : m
         )
       );
     }
@@ -202,7 +217,11 @@ function App() {
   const handleFileUpload = async (files: File[]) => {
     if (!user) return;
 
-    const newFiles: UploadedFile[] = files.map((file) => ({ file, type: 'other' }));
+    const newFiles: UploadedFile[] = files.map((file) => ({
+      file,
+      type: 'other',
+    }));
+
     setUploadedFiles((prev) => [...prev, ...newFiles]);
 
     for (const f of files) {
@@ -227,7 +246,11 @@ function App() {
     if (!target) return;
 
     try {
-      const r = await apiUpload({ user: asApiUser(user), file: target.file, fileType: type });
+      const r = await apiUpload({
+        user: asApiUser(user),
+        file: target.file,
+        fileType: type,
+      });
       toast.success(r.status_md || `Updated type: ${target.file.name}`);
     } catch (e: any) {
       toast.error(e?.message ?? `Failed to update type: ${target.file.name}`);
@@ -287,9 +310,8 @@ function App() {
   }
 
   return (
-    <div className="h-dvh bg-background flex flex-col overflow-hidden">
+    <div className="min-h-screen bg-background flex flex-col">
       <Toaster />
-
       <Header
         user={user}
         onMenuClick={() => setLeftSidebarOpen(!leftSidebarOpen)}
@@ -307,199 +329,200 @@ function App() {
         <ProfileEditor user={user} onSave={setUser} onClose={() => setShowProfileEditor(false)} />
       )}
 
-      {/* ✅ 关键：这里必须 min-h-0，才能把可用高度传下去 */}
-      <div className="flex-1 min-h-0 overflow-hidden">
-        {/* ✅ 三栏用 grid：中间列 minmax(0,1fr) 最稳 */}
-        <div className="h-full min-h-0 overflow-hidden grid grid-cols-1 lg:grid-cols-[20rem_minmax(0,1fr)_20rem]">
-          {/* Left overlay (mobile) */}
-          {leftSidebarOpen && (
-            <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setLeftSidebarOpen(false)} />
-          )}
-
-          {/* Left (desktop) */}
-          {leftPanelVisible ? (
-            <aside className="hidden lg:flex bg-card border-r border-border min-h-0 overflow-hidden relative">
-              <Button
-                variant="secondary"
-                size="icon"
-                onClick={() => setLeftPanelVisible(false)}
-                className="absolute top-4 z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
-                style={{ right: '-10px' }}
-                title="Close panel"
-              >
-                <ChevronLeft className="h-3 w-3" />
-              </Button>
-
-              <div className="flex-1 min-h-0 overflow-hidden">
-                <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)}
-                />
-              </div>
-            </aside>
-          ) : (
+      <div
+        className="flex-1 flex overflow-hidden"
+        onWheel={(e) => e.stopPropagation()}
+        style={{ overscrollBehavior: 'none' }}
+      >
+        {/* Mobile Sidebar Toggle - Left */}
+        {leftSidebarOpen && (
+          <div
+            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+            onClick={() => setLeftSidebarOpen(false)}
+          />
+        )}
+
+        {/* Left Sidebar */}
+        {leftPanelVisible ? (
+          <aside className="hidden lg:flex w-80 bg-card border-r border-border flex-col h-full min-h-0 relative">
             <Button
               variant="secondary"
               size="icon"
-              onClick={() => setLeftPanelVisible(true)}
-              className="hidden lg:flex fixed top-20 left-0 z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
-              title="Open panel"
+              onClick={() => setLeftPanelVisible(false)}
+              className="absolute top-4 z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
+              style={{ right: '-10px' }}
+              title="Close panel"
             >
-              <ChevronRight className="h-3 w-3" />
+              <ChevronLeft className="h-3 w-3" />
             </Button>
-          )}
-
-          {/* Left (mobile) */}
-          <aside
-            className={`
-              fixed lg:hidden top-16 bottom-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 min-h-0 overflow-hidden
-            `}
-          >
-            <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>
-            <div className="flex-1 min-h-0 overflow-hidden">
-              <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)}
-              />
-            </div>
-          </aside>
-
-          {/* ✅ Center：必须 min-h-0 + overflow-hidden（不滚），滚动交给 ChatArea */}
-          <main className="min-w-0 min-h-0 overflow-hidden flex">
-            <ChatArea
-              user={asApiUser(user)}
-              messages={messages}
-              onSendMessage={handleSendMessage}
-              uploadedFiles={uploadedFiles}
-              onFileUpload={handleFileUpload}
-              onRemoveFile={handleRemoveFile}
-              onFileTypeChange={handleFileTypeChange}
-              memoryProgress={memoryProgress}
-              isLoggedIn={!!user}
+            <LeftSidebar
               learningMode={learningMode}
-              onClearConversation={handleClearConversation}
+              language={language}
               onLearningModeChange={setLearningMode}
+              onLanguageChange={setLanguage}
               spaceType={spaceType}
+              groupMembers={groupMembers}
+              user={user}
+              onLogin={setUser}
+              onLogout={() => setUser(null)}
+              isLoggedIn={!!user}
+              onEditProfile={() => setShowProfileEditor(true)}
             />
-          </main>
-
-          {/* Right overlay (mobile) */}
-          {rightPanelOpen && (
-            <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setRightPanelOpen(false)} />
-          )}
-
-          {/* Right (desktop) */}
-          {rightPanelVisible ? (
-            <aside className="hidden lg:flex bg-card border-l border-border min-h-0 overflow-hidden relative">
-              <Button
-                variant="secondary"
-                size="icon"
-                onClick={() => setRightPanelVisible(false)}
-                className="absolute top-4 z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
-                style={{ left: '-10px' }}
-                title="Close panel"
-              >
-                <ChevronRight className="h-3 w-3" />
-              </Button>
-
-              <div className="flex-1 min-h-0 overflow-hidden">
-                <RightPanel
-                  user={user}
-                  onLogin={setUser}
-                  onLogout={() => setUser(null)}
-                  isLoggedIn={!!user}
-                  onClose={() => setRightPanelVisible(false)}
-                  exportResult={exportResult}
-                  setExportResult={setExportResult}
-                  resultType={resultType}
-                  setResultType={setResultType}
-                  onExport={handleExport}
-                  onSummary={handleSummary}
-                />
-              </div>
-            </aside>
-          ) : (
+          </aside>
+        ) : (
+          <Button
+            variant="secondary"
+            size="icon"
+            onClick={() => setLeftPanelVisible(true)}
+            className="hidden lg:flex fixed top-20 left-0 z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
+            title="Open panel"
+          >
+            <ChevronRight className="h-3 w-3" />
+          </Button>
+        )}
+
+        {/* Left Sidebar - Mobile */}
+        <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>
+          <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)}
+          />
+        </aside>
+
+        {/* Main Chat Area */}
+        <main className="flex-1 flex flex-col min-w-0 min-h-0 h-full">
+          <ChatArea
+            // ✅ NEW: pass ApiUser down so Message can submit feedback
+            user={asApiUser(user)}
+            messages={messages}
+            onSendMessage={handleSendMessage}
+            uploadedFiles={uploadedFiles}
+            onFileUpload={handleFileUpload}
+            onRemoveFile={handleRemoveFile}
+            onFileTypeChange={handleFileTypeChange}
+            memoryProgress={memoryProgress}
+            isLoggedIn={!!user}
+            learningMode={learningMode}
+            onClearConversation={handleClearConversation}
+            onLearningModeChange={setLearningMode}
+            spaceType={spaceType}
+          />
+        </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="hidden lg:flex w-80 bg-card border-l border-border flex-col min-h-0 relative" style={{ height: 'calc(100vh - 4rem)' }}>
             <Button
               variant="secondary"
               size="icon"
-              onClick={() => setRightPanelVisible(true)}
-              className="hidden lg:flex fixed top-20 right-0 z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
-              title="Open panel"
+              onClick={() => setRightPanelVisible(false)}
+              className="absolute top-4 z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
+              style={{ left: '-10px' }}
+              title="Close panel"
             >
-              <ChevronLeft className="h-3 w-3" />
+              <ChevronRight className="h-3 w-3" />
             </Button>
-          )}
-
-          {/* Right (mobile) */}
-          <aside
-            className={`
-              fixed lg:hidden top-16 bottom-0 right-0 z-50
-              w-80 bg-card border-l border-border
-              transform transition-transform duration-300 ease-in-out
-              ${rightPanelOpen ? 'translate-x-0' : 'translate-x-full'}
-              flex flex-col min-h-0 overflow-hidden
-            `}
-          >
-            <div className="p-4 border-b border-border flex justify-between items-center">
-              <h3>Account & Actions</h3>
-              <Button variant="ghost" size="icon" onClick={() => setRightPanelOpen(false)}>
-                <X className="h-5 w-5" />
-              </Button>
-            </div>
-            <div className="flex-1 min-h-0 overflow-hidden">
-              <RightPanel
-                user={user}
-                onLogin={setUser}
-                onLogout={() => setUser(null)}
-                isLoggedIn={!!user}
-                onClose={() => setRightPanelVisible(false)}
-                exportResult={exportResult}
-                setExportResult={setExportResult}
-                resultType={resultType}
-                setResultType={setResultType}
-                onExport={handleExport}
-                onSummary={handleSummary}
-              />
-            </div>
-          </aside>
-
-          {!rightPanelVisible && (
-            <FloatingActionButtons
+            <RightPanel
               user={user}
+              onLogin={setUser}
+              onLogout={() => setUser(null)}
               isLoggedIn={!!user}
-              onOpenPanel={() => setRightPanelVisible(true)}
+              onClose={() => setRightPanelVisible(false)}
+              exportResult={exportResult}
+              setExportResult={setExportResult}
+              resultType={resultType}
+              setResultType={setResultType}
               onExport={handleExport}
               onSummary={handleSummary}
             />
-          )}
-        </div>
+          </aside>
+        ) : (
+          <Button
+            variant="secondary"
+            size="icon"
+            onClick={() => setRightPanelVisible(true)}
+            className="hidden lg:flex fixed top-20 right-0 z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
+            title="Open panel"
+          >
+            <ChevronLeft className="h-3 w-3" />
+          </Button>
+        )}
+
+        {/* Right Panel - Mobile */}
+        <aside
+          className={`
+            fixed lg:hidden inset-y-0 right-0 z-50
+            w-80 bg-card border-l border-border
+            transform transition-transform duration-300 ease-in-out
+            ${rightPanelOpen ? '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>Account & Actions</h3>
+            <Button variant="ghost" size="icon" onClick={() => setRightPanelOpen(false)}>
+              <X className="h-5 w-5" />
+            </Button>
+          </div>
+          <RightPanel
+            user={user}
+            onLogin={setUser}
+            onLogout={() => setUser(null)}
+            isLoggedIn={!!user}
+            onClose={() => setRightPanelVisible(false)}
+            exportResult={exportResult}
+            setExportResult={setExportResult}
+            resultType={resultType}
+            setResultType={setResultType}
+            onExport={handleExport}
+            onSummary={handleSummary}
+          />
+        </aside>
+
+        {/* Floating Action Buttons - Desktop only, when panel is closed */}
+        {!rightPanelVisible && (
+          <FloatingActionButtons
+            user={user}
+            isLoggedIn={!!user}
+            onOpenPanel={() => setRightPanelVisible(true)}
+            onExport={handleExport}
+            onSummary={handleSummary}
+          />
+        )}
       </div>
     </div>
   );