Update web/src/App.tsx

web/src/App.tsx

@@ -1,3 +1,4 @@
+// web/src/App.tsx
 import React, { useState, useEffect, useMemo } from 'react';
 import { Header } from './components/Header';
 import { LeftSidebar } from './components/LeftSidebar';
@@ -20,8 +21,8 @@ export interface Message {
 
 export interface User {
   name: string;
-  email: string;     // login 输入
-  user_id: string;   // 实际传后端的 user_id（这里等同 email/ID）
+  email: string; // login 输入（原始输入）
+  user_id: string; // 实际传后端的 user_id（这里等同 email/ID）
 }
 
 export interface GroupMember {
@@ -101,7 +102,9 @@ async function apiPostForm<T>(path: string, form: FormData): Promise<T> {
 function App() {
   const [isDarkMode, setIsDarkMode] = useState(() => {
     const saved = localStorage.getItem('theme');
-    return saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    return (
+      saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    );
   });
 
   const [user, setUser] = useState<User | null>(null);
@@ -204,7 +207,8 @@ function App() {
       return;
     }
 
-    const shouldAIRespond = spaceType === 'individual' || content.toLowerCase().includes('@clare');
+    const shouldAIRespond =
+      spaceType === 'individual' || content.toLowerCase().includes('@clare');
 
     const sender: GroupMember | undefined =
       spaceType === 'group' && user
@@ -303,9 +307,7 @@ function App() {
       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
-        )
+        prev.map((x, i) => (i === index ? { ...x, uploaded: true, uploadedChunks: r.added_chunks } : x))
       );
 
       toast.success(`Uploaded: ${target.file.name} (+${r.added_chunks} chunks)`);
@@ -430,10 +432,7 @@ 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
@@ -464,10 +463,15 @@ D) Cost reduction
             groupMembers={groupMembers}
           />
         </aside>
-        <main className={`
+
+        {/* ✅ 右侧 Panel 展开时，为 Chat 留出空间（避免被遮住导致 FAB 只能在收起时可见） */}
+        <main
+          className={`
             flex-1 flex flex-col min-w-0
             transition-all
-            ${rightPanelVisible ? 'pr-[320px]' : ''}`} >
+            ${rightPanelVisible ? 'pr-[320px]' : ''}
+          `}
+        >
           <ChatArea
             userId={userId}
             docType={currentDocTypeForChat}
@@ -489,10 +493,7 @@ 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 && (
@@ -513,6 +514,7 @@ D) Cost reduction
                 <X className="h-5 w-5" />
               </Button>
             </div>
+
             <RightPanel
               user={user}
               onLogin={handleLogin}
@@ -542,6 +544,7 @@ D) Cost reduction
           {rightPanelVisible ? <ChevronRight className="h-3 w-3" /> : <ChevronLeft className="h-3 w-3" />}
         </Button>
 
+        {/* ✅ 右侧 Panel 收起时才显示 FloatingActionButtons（你当前逻辑保持不变） */}
         {!rightPanelVisible && (
           <FloatingActionButtons
             user={user}
@@ -558,4 +561,3 @@ D) Cost reduction
 }
 
 export default App;
-