Now the message rendering are dynamic

components/4nk/FolderChat.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState, useEffect, useCallback } from "react"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Textarea } from "@/components/ui/textarea"
@@ -29,10 +29,9 @@ export default function FolderChat({ folder }: FolderChatProps) {
   const [generalMessages, setGeneralMessages] = useState<FolderChatData[]>([]);
 
   const {
-    isConnected,
     userPairingId,
-    folders,
-    members,
+    setFolderProcesses,
+    setFolderPrivateData,
   } = use4NK();
 
   useEffect(() => {
@@ -43,7 +42,8 @@ export default function FolderChat({ folder }: FolderChatProps) {
   // Filtre les messages basé sur l'onglet actif
   const filteredMessages = activeTab === 'owner' ? ownerMessages : generalMessages;
 
-  const handleProcessUpdate = async (processId: string, key: string, value: any) => {
+  const handleProcessUpdate = useCallback(async (processId: string, key: string, value: any) => {
+    // Note : 'value' est l'objet newMessageData que vous avez passé
     try {
       const messageBus = MessageBus.getInstance(iframeUrl);
       await messageBus.isReady();
@@ -52,40 +52,58 @@ export default function FolderChat({ folder }: FolderChatProps) {
         [key]: value
       };
 
-      // First update the process
+      // 1. Mettre à jour le process
       const updatedProcess = await messageBus.updateProcess(processId, updateData, [], null);
+      console.log("Process mis à jour :", updatedProcess);
+
       if (!updatedProcess) {
-        throw new Error('No updated process found');
+        throw new Error('updateProcess n\'a pas retourné de process mis à jour');
       }
 
+      // 2. Extraire le newStateId
       const newStateId = updatedProcess.diffs[0]?.state_id;
-
       if (!newStateId) {
         throw new Error('No new state id found');
       }
 
-      // Then notify about the update
+      // 3. Notifier et Valider
       await messageBus.notifyProcessUpdate(processId, newStateId);
-
-      // Finally validate the state
       await messageBus.validateState(processId, newStateId);
 
-      // Refresh the processes data
-      await messageBus.getProcesses();
+      // 4. Mettre à jour l'objet process dans le contexte
+      setFolderProcesses((prevProcesses: any) => ({
+        ...prevProcesses,
+        [processId]: updatedProcess.current_process
+      }));
 
-      console.log('Process updated successfully');
-    } catch (error) {
-      console.error('Error updating field:', error);
-      // You might want to show an error message to the user here
-    }
+      // 5. Mettre à jour le cache des données privées (CORRIGÉ)
+
+      // D'abord, convertir l'objet 'value' en Map, comme l'attend loadFoldersFrom4NK
+      const valueAsMap = new Map(Object.entries(value));
+
+      // Ensuite, créer l'objet conteneur structuré
+      const privateDataForCache = {
+        [key]: valueAsMap
       };
 
-  const handleSendMessage = () => {
+      // Enfin, stocker cet objet structuré dans le cache
+      setFolderPrivateData((prevData) => ({
+        ...prevData,
+        [newStateId]: privateDataForCache // <-- Utiliser l'objet formaté
+      }));
+
+      console.log('Process & cache de données privées mis à jour avec succès.');
+
+    } catch (error) {
+      console.error('Error updating field:', error);
+    }
+  }, [setFolderProcesses, setFolderPrivateData]);
+
+  const handleSendMessage = useCallback(() => {
     if (newMessage.trim() && folder) {
       console.log(`Envoi message [${activeTab}] dans le dossier:`, folder?.name, "Msg:", newMessage)
       const key = activeTab === 'owner' ? 'messages_owner' : 'messages'
 
-      // Créez l'objet du nouveau message
       const newMessageData: FolderChatData = {
         timestamp: Date.now(),
         sender: (userPairingId ? userPairingId : ''),
@@ -101,13 +119,22 @@ export default function FolderChat({ folder }: FolderChatProps) {
         setGeneralMessages(prevMessages => [...prevMessages, newMessageData]);
       }
 
-      // Envoi de la mise à jour au MessageBus (en arrière-plan)
+      // Appelle la fonction mémorisée
       handleProcessUpdate(folder.processId, key, newMessageData)
 
-      // Vider l'input
       setNewMessage("")
     }
-  }
+  }, [
+    // La fonction doit être recréée si une de ces valeurs change :
+    newMessage,
+    folder,
+    activeTab,
+    userPairingId,
+    handleProcessUpdate, // <-- Mettez la fonction mémorisée ici
+    setOwnerMessages,
+    setGeneralMessages,
+    setNewMessage
+  ]);
 
   // Si aucun dossier n'est sélectionné, afficher un placeholder
   if (!folder) {