implemented the chat send message func

components/4nk/FolderChat.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Textarea } from "@/components/ui/textarea"
@@ -12,40 +12,36 @@ import {
   Folder,
   MessageSquare
 } from "lucide-react"
-import type { EnrichedFolderData } from "@/lib/contexts/FourNKContext";
 import MessageBus from "@/lib/4nk/MessageBus"
 import { iframeUrl } from "@/app/page"
+import { FolderChatData } from "@/lib/4nk/models/FolderData"
+import { use4NK, EnrichedFolderData } from "@/lib/contexts/FourNKContext"
 
 // Interface pour les props (accepte null)
 interface FolderChatProps {
   folder: EnrichedFolderData | null;
 }
 
-// Message fictif pour la maquette
-interface MockMessage {
-  id: number;
-  sender: 'me' | 'other';
-  name: string;
-  avatar: string;
-  text: string;
-  time: string;
-  type: 'owner' | 'general'; // Pour filtrer
-}
-
 export default function FolderChat({ folder }: FolderChatProps) {
   const [newMessage, setNewMessage] = useState("")
   const [activeTab, setActiveTab] = useState<'owner' | 'general'>('owner');
+  const [ownerMessages, setOwnerMessages] = useState<FolderChatData[]>([]);
+  const [generalMessages, setGeneralMessages] = useState<FolderChatData[]>([]);
 
-  // Données fictives
-  const mockMessages: MockMessage[] = [
-    { id: 1, sender: 'other', name: 'Membre A4B2 (Owner)', avatar: 'A4', text: "Validation Owner OK.", time: "14:30", type: 'owner' },
-    { id: 2, sender: 'me', name: 'Vous', avatar: 'MO', text: "Parfait, merci.", time: "14:32", type: 'owner' },
-    { id: 3, sender: 'other', name: 'Membre C8F1', avatar: 'C8', text: "Le client a une question sur ce dossier.", time: "14:33", type: 'general' },
-    { id: 4, sender: 'me', name: 'Vous', avatar: 'MO', text: "Je regarde ça.", time: "14:34", type: 'general' },
-  ];
+  const {
+    isConnected,
+    userPairingId,
+    folders,
+    members,
+  } = use4NK();
+
+  useEffect(() => {
+    setOwnerMessages(folder?.messages_owner || []);
+    setGeneralMessages(folder?.messages || []);
+  }, [folder]);
 
   // Filtre les messages basé sur l'onglet actif
-  const filteredMessages = mockMessages.filter(msg => msg.type === activeTab);
+  const filteredMessages = activeTab === 'owner' ? ownerMessages : generalMessages;
 
   const handleProcessUpdate = async (processId: string, key: string, value: any) => {
     try {
@@ -75,7 +71,7 @@ export default function FolderChat({ folder }: FolderChatProps) {
       await messageBus.validateState(processId, newStateId);
 
       // Refresh the processes data
-      // const updatedProcesses = await messageBus.getProcesses();
+      await messageBus.getProcesses();
 
       console.log('Process updated successfully');
     } catch (error) {
@@ -85,12 +81,30 @@ export default function FolderChat({ folder }: FolderChatProps) {
   };
 
   const handleSendMessage = () => {
-    if (newMessage.trim()) {
-      console.log(`Envoi message [${activeTab}] à:`, folder?.folderNumber, "Msg:", newMessage)
-      // TODO: Implémenter la logique d'envoi de message
-      if(!folder) return;
+    if (newMessage.trim() && folder) {
+      console.log(`Envoi message [${activeTab}] dans le dossier:`, folder?.name, "Msg:", newMessage)
       const key = activeTab === 'owner' ? 'messages_owner' : 'messages'
-      handleProcessUpdate(folder.processId, key, newMessage)
+
+      // Créez l'objet du nouveau message
+      const newMessageData: FolderChatData = {
+        timestamp: Date.now(),
+        sender: (userPairingId ? userPairingId : ''),
+        receiver: '',
+        fromRole: 'owner',
+        toRole: 'owner',
+        message: newMessage,
+      }
+
+      if (activeTab === 'owner') {
+        setOwnerMessages(prevMessages => [...prevMessages, newMessageData]);
+      } else {
+        setGeneralMessages(prevMessages => [...prevMessages, newMessageData]);
+      }
+
+      // Envoi de la mise à jour au MessageBus (en arrière-plan)
+      handleProcessUpdate(folder.processId, key, newMessageData)
+
+      // Vider l'input
       setNewMessage("")
     }
   }
@@ -156,18 +170,16 @@ export default function FolderChat({ folder }: FolderChatProps) {
         </Button>
       </div>
 
-      {/* --- LISTE DES MEMBRES (SUPPRIMÉE) --- */}
-
       {/* Zone des messages */}
       <div className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-900">
-        {filteredMessages.length > 0 ? filteredMessages.map((msg) => (
+        {filteredMessages.length > 0 ? filteredMessages.map((msg, i) => (
           <div
-            key={msg.id}
-            className={`flex items-start gap-3 ${msg.sender === 'me' ? 'justify-end' : ''}`}
+            key={i}
+            className={`flex items-start gap-3 ${msg.sender === userPairingId ? 'justify-end' : ''}`}
           >
-            {msg.sender === 'other' && (
+            {msg.sender != userPairingId && (
               <div className="w-8 h-8 bg-blue-800 rounded-full flex items-center justify-center flex-shrink-0">
-                <span className="text-xs text-blue-300 font-medium">{msg.avatar}</span>
+                <span className="text-xs text-blue-300 font-medium">{msg.sender.slice(0, 2)}</span>
               </div>
             )}
             <div>
@@ -177,13 +189,16 @@ export default function FolderChat({ folder }: FolderChatProps) {
                   : 'bg-gray-700 text-gray-100 rounded-bl-none'
                   }`}
               >
-                {msg.sender === 'other' && (
-                  <p className="text-xs font-medium text-blue-300 mb-1">{msg.name}</p>
+                {msg.sender != userPairingId && (
+                  <p className="text-xs font-medium text-blue-300 mb-1">KAAK</p>
                 )}
-                <p>{msg.text}</p>
+                <p>{msg.message}</p>
               </div>
-              <p className={`text-xs text-gray-500 mt-1 ${msg.sender === 'me' ? 'text-right' : ''}`}>
-                {msg.time}
+              <p className={`text-xs text-gray-500 mt-1 ${msg.sender === userPairingId ? 'text-right' : ''}`}>
+                {new Date(Number(msg.timestamp)).toLocaleTimeString('fr-FR', {
+                  hour: '2-digit',
+                  minute: '2-digit'
+                })}
               </p>
             </div>
           </div>