Add Chat for each Folder

app/dashboard/folders/page.tsx

@@ -14,6 +14,8 @@ import {
   SortAsc,
   SortDesc,
   X,
+  MessageSquare,
+  List,
 } from "lucide-react"
 import { FolderData, FolderCreated, FolderPrivateFields, setDefaultFolderRoles } from "@/lib/4nk/models/FolderData"
 import MessageBus from "@/lib/4nk/MessageBus"
@@ -22,6 +24,7 @@ import UserStore from "@/lib/4nk/UserStore"
 import FolderModal from "@/components/4nk/FolderModal"
 import AuthModal from "@/components/4nk/AuthModal"
 import Iframe from "@/components/4nk/Iframe"
+import FolderChat from "@/components/4nk/FolderChat"
 
 type FolderType = 'contrat' | 'projet' | 'rapport' | 'finance' | 'rh' | 'marketing' | 'autre';
 
@@ -32,6 +35,7 @@ export default function FoldersPage() {
   const [currentPath, setCurrentPath] = useState<string[]>(["Racine"])
   const [folderType, setFolderType] = useState<FolderType | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState<"folders" | "chat">("folders");
 
   // 4NK Integration states
   const [isConnected, setIsConnected] = useState(false)
@@ -356,6 +360,7 @@ export default function FoldersPage() {
             </div>
             
             <div className="flex items-center space-x-2">
+              {activeTab === "folders" && (
                 <Button
                   onClick={() => handleOpenModal("autre")}
                   disabled={!isConnected}
@@ -364,10 +369,36 @@ export default function FoldersPage() {
                   <FolderPlus className="h-4 w-4" />
                   <span>Nouveau dossier</span>
                 </Button>
+              )}
             </div>
           </div>
 
-          {/* Search and filters */}
+          {/* Tabs */}
+          <div className="flex items-center space-x-4 mb-4">
+            <div className="flex bg-gray-700 rounded-lg p-1">
+              <Button
+                variant={activeTab === "folders" ? "default" : "ghost"}
+                size="sm"
+                onClick={() => setActiveTab("folders")}
+                className="flex items-center space-x-2"
+              >
+                <List className="h-4 w-4" />
+                <span>Dossiers</span>
+              </Button>
+              <Button
+                variant={activeTab === "chat" ? "default" : "ghost"}
+                size="sm"
+                onClick={() => setActiveTab("chat")}
+                className="flex items-center space-x-2"
+              >
+                <MessageSquare className="h-4 w-4" />
+                <span>Chat</span>
+              </Button>
+            </div>
+          </div>
+
+          {/* Search and filters - only show for folders tab */}
+          {activeTab === "folders" && (
             <div className="flex items-center space-x-4">
               <div className="flex-1 relative">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
@@ -389,10 +420,13 @@ export default function FoldersPage() {
                 </Button>
               </div>
             </div>
+          )}
         </div>
 
         {/* Content */}
-        <div className="flex-1 p-6 bg-gray-900">
+        <div className="flex-1 bg-gray-900">
+          {activeTab === "folders" ? (
+            <div className="p-6">
               {loadingFolders ? (
                 <div className="flex items-center justify-center h-64">
                   <div className="text-center">
@@ -455,6 +489,15 @@ export default function FoldersPage() {
                 </div>
               )}
             </div>
+          ) : (
+            <FolderChat
+              heightClass="h-full"
+              folderProcesses={folderProcesses}
+              myFolderProcesses={myFolderProcesses}
+              folderPrivateData={folderPrivateData}
+            />
+          )}
+        </div>
       </div>
 
       {/* Modals */}