app/dashboard/page.tsx

@@ -388,7 +388,7 @@ export default function DashboardPage() {
 
       {/* Messages intégrés */}
       <div className="mt-6">
-        <Chat heightClass="h-[600px]" processes={processes} myProcesses={myProcesses} />
+        <Chat heightClass="h-[600px]" />
       </div>
 
       {/* Nouveaux indicateurs de stockage */}

components/4nk/Chat.tsx

@@ -28,55 +28,20 @@ import {
   Zap,
 } from "lucide-react"
 import { useSearchParams } from "next/navigation"
-import { PairingProcess } from "@/lib/4nk/models/PairingProcess"
 
 interface ChatProps {
   heightClass?: string
-  processes?: any
-  myProcesses?: string[]
 }
 
-export default function Chat({ heightClass = "h-[calc(100vh-8rem)]", processes, myProcesses }: ChatProps) {
+export default function Chat({ heightClass = "h-[calc(100vh-8rem)]" }: ChatProps) {
-  const [selectedConversation, setSelectedConversation] = useState("")
+  const [selectedConversation, setSelectedConversation] = useState("global")
   const [newMessage, setNewMessage] = useState("")
-  const [pairingProcesses, setPairingProcesses] = useState<PairingProcess[]>([])
-  const [isLoading, setIsLoading] = useState(true)
-  const [searchQuery, setSearchQuery] = useState("")
 
   const searchParams = useSearchParams()
   const userId = searchParams.get("user")
   const messageType = searchParams.get("message")
   const groupType = searchParams.get("type")
 
-  // Filter pairing processes when processes prop changes
-  useEffect(() => {
-    if (processes && Object.keys(processes).length > 0) {
-      setIsLoading(true)
-      
-      // Filter pairing processes (those with memberPublicName in publicData)
-      const pairingList: PairingProcess[] = []
-      Object.entries(processes).forEach(([processId, process]) => {
-        // Get the latest state
-        const latestState = process.states?.[process.states.length - 2] // -2 because last state is usually empty
-        
-        // Check if memberPublicName field exists (even if empty) - indicates pairing process
-        if (latestState?.public_data?.hasOwnProperty('memberPublicName')) {
-          const memberPublicName = latestState.public_data.memberPublicName || `Pairing ${processId.slice(0, 8)}`
-          pairingList.push({
-            id: processId,
-            memberPublicName: memberPublicName
-          })
-        }
-      })
-      
-      setPairingProcesses(pairingList)
-      setIsLoading(false)
-    } else {
-      setIsLoading(true)
-      setPairingProcesses([])
-    }
-  }, [processes, myProcesses])
-
   useEffect(() => {
     if (messageType === "new") {
       if (userId) {
@@ -86,6 +51,7 @@ export default function Chat({ heightClass = "h-[calc(100vh-8rem)]", processes,
           setSelectedConversation(userId)
           setNewMessage(`${data.subject ? `[${data.subject}] ` : ""}${data.content}`)
           sessionStorage.removeItem("newMessage")
+          showNotification("info", `Conversation ouverte avec ${data.userName}`)
         }
       } else if (groupType === "group") {
         const groupData = sessionStorage.getItem("newGroupMessage")
@@ -94,56 +60,227 @@ export default function Chat({ heightClass = "h-[calc(100vh-8rem)]", processes,
           setSelectedConversation("group-new")
           setNewMessage(`${data.subject ? `[${data.subject}] ` : ""}${data.content}`)
           sessionStorage.removeItem("newGroupMessage")
+          showNotification("info", `Conversation de groupe créée avec ${data.users.length} utilisateur(s)`)
         }
       }
     }
   }, [userId, messageType, groupType])
 
-  // Create conversations array with pairing processes only
+  const showNotification = (type: "success" | "error" | "info", message: string) => {
+    console.log(`${type.toUpperCase()}: ${message}`)
+  }
+
   const conversations = [
-    ...pairingProcesses.map(process => {
+    {
-      // Generate avatar from memberPublicName or processId
+      id: "global",
-      let avatar = "P" // Default for Pairing
+      name: "My Work",
-      if (process.memberPublicName && typeof process.memberPublicName === 'string' && process.memberPublicName.trim().length > 0) {
+      type: "group",
-        // Use memberPublicName if not empty
+      avatar: "MW",
-        avatar = process.memberPublicName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
+      lastMessage: "Bienvenue sur le chat de l’espace My Work",
-      } else {
+      lastMessageTime: "Maintenant",
-        // Use first 2 chars of processId if memberPublicName is empty
+      unreadCount: 0,
-        avatar = process.id.slice(0, 2).toUpperCase()
+      isOnline: false,
-      }
+      isTyping: false,
-      
+      members: 0,
-      // Safe display name
+    },
-      const displayName = typeof process.memberPublicName === 'string' && process.memberPublicName.trim().length > 0
+    {
-        ? process.memberPublicName
+      id: "1",
-        : `Membre ${process.id.slice(0, 8)}`
+      name: "Marie Dubois",
-      
+      type: "direct",
-      return {
+      avatar: "MD",
-        id: process.id,
+      lastMessage: "Parfait, merci pour la validation !",
-        name: displayName,
+      lastMessageTime: "14:32",
-        avatar: avatar,
+      unreadCount: 0,
-        lastMessage: "",
+      isOnline: true,
-        lastMessageTime: "",
+      isTyping: false,
-        unreadCount: 0,
+    },
-        isOnline: true,
+    {
-        isTyping: false,
+      id: "2",
-        pairingId: process.id
+      name: "Équipe Juridique",
-      }
+      type: "group",
-    })
+      avatar: "EJ",
+      lastMessage: "IA DocV: Analyse terminée pour Contrat_Client_ABC.pdf",
+      lastMessageTime: "13:45",
+      unreadCount: 1,
+      isOnline: false,
+      isTyping: false,
+      members: 5,
+    },
+    {
+      id: "3",
+      name: "Sophie Laurent",
+      type: "direct",
+      avatar: "SL",
+      lastMessage: "Pouvez-vous m'envoyer le rapport ?",
+      lastMessageTime: "12:20",
+      unreadCount: 1,
+      isOnline: false,
+      isTyping: false,
+    },
+    {
+      id: "4",
+      name: "Direction",
+      type: "group",
+      avatar: "DIR",
+      lastMessage: "Réunion reportée à demain 10h",
+      lastMessageTime: "11:15",
+      unreadCount: 0,
+      isOnline: false,
+      isTyping: false,
+      members: 3,
+    },
+    {
+      id: "5",
+      name: "Thomas Rousseau",
+      type: "direct",
+      avatar: "TR",
+      lastMessage: "Merci pour l'info !",
+      lastMessageTime: "Hier",
+      unreadCount: 0,
+      isOnline: true,
+      isTyping: true,
+    },
   ]
 
-  const messages: any[] = []
+  const messages = [
+    {
+      id: "1",
+      senderId: "marie",
+      senderName: "Marie Dubois",
+      content: "Bonjour ! J'ai besoin de votre avis sur le nouveau contrat client.",
+      timestamp: "14:20",
+      type: "text",
+      status: "read",
+    },
+    {
+      id: "2",
+      senderId: "me",
+      senderName: "Moi",
+      content: "Bien sûr, pouvez-vous me l'envoyer ?",
+      timestamp: "14:22",
+      type: "text",
+      status: "read",
+    },
+    {
+      id: "3",
+      senderId: "marie",
+      senderName: "Marie Dubois",
+      content: "",
+      timestamp: "14:25",
+      type: "file",
+      fileName: "Contrat_Client_ABC.pdf",
+      fileSize: "2.3 MB",
+      status: "read",
+    },
+    {
+      id: "4",
+      senderId: "me",
+      senderName: "Moi",
+      content:
+        "J'ai relu le contrat, tout me semble correct. Les clauses de confidentialité sont bien définies.",
+      timestamp: "14:30",
+      type: "text",
+      status: "read",
+    },
+    {
+      id: "5",
+      senderId: "marie",
+      senderName: "Marie Dubois",
+      content: "Parfait, merci pour la validation !",
+      timestamp: "14:32",
+      type: "text",
+      status: "delivered",
+    },
+    {
+      id: "6",
+      senderId: "ai",
+      senderName: "IA DocV",
+      content: `📄 **Analyse IA du document "Contrat_Client_ABC.pdf"**
 
-  // Filter conversations based on search query
+**Type de document :** PDF (2.3 MB)
-  const filteredConversations = conversations.filter(conversation => {
+**Statut :** ✅ Validé
-    if (!searchQuery.trim()) return true
+**Dernière modification :** Il y a 2 heures
 
-    // Search by ID (process ID)
+**📊 Analyse du contenu :**
-    const matchesId = conversation.id.toLowerCase().includes(searchQuery.toLowerCase())
+• Document juridique détecté avec haute précision
-    // Search by name
+• 3 tag(s) identifié(s) : contrat, client, juridique
-    const matchesName = conversation.name.toLowerCase().includes(searchQuery.toLowerCase())
+• Résumé automatique disponible
+• 47 pages analysées
+• 12 clauses contractuelles détectées
 
-    return matchesId || matchesName
+**🎯 Métriques de qualité :**
-  })
+• Lisibilité : 92%
+• Conformité juridique : 100%
+• Sécurité documentaire : Maximale
+• Complétude des informations : 95%
+
+**🔍 Points clés identifiés :**
+• Durée du contrat : 12 mois
+• Montant total : 150 000€ HT
+• Clauses de confidentialité : ✅ Présentes et conformes
+• Propriété intellectuelle : ✅ Bien définie
+• Conditions de résiliation : ✅ Équilibrées
+
+**🛡️ Analyse de conformité RGPD :**
+• Données personnelles : ⚠️ Détectées (coordonnées client)
+• Durée de conservation : Conforme (7 ans)
+• Droit à l'oubli : Applicable après expiration
+• Consentement : ✅ Explicite
+
+**⚡ Recommandations :**
+• ✅ Document prêt pour signature
+• 📋 Archivage permanent recommandé
+• 🔄 Révision suggérée dans 11 mois
+• 📧 Notification client automatique activée
+
+**📈 Score global : 94/100**
+
+*Analyse générée automatiquement par l'IA DocV - Fiabilité : 98%*`,
+      timestamp: "14:35",
+      type: "ai_analysis",
+      status: "delivered",
+      analysisType: "document",
+      documentName: "Contrat_Client_ABC.pdf",
+      confidence: 98,
+      processingTime: "2.3s",
+    },
+    {
+      id: "7",
+      senderId: "ai",
+      senderName: "IA DocV",
+      content: `🔍 **Analyse comparative - Dossier Contrats**
+
+**📊 Analyse de 8 documents similaires :**
+• Contrats clients : 5 documents
+• Avenants : 2 documents
+• Conditions générales : 1 document
+
+**📈 Tendances identifiées :**
+• Montant moyen des contrats : +15% vs trimestre précédent
+• Durée moyenne : 14 mois (stable)
+• Taux de renouvellement : 87% (↗️ +5%)
+
+**⚠️ Points d'attention :**
+• 2 contrats expirent dans les 30 jours
+• 1 clause de révision tarifaire à activer
+• Mise à jour RGPD requise sur 3 documents
+
+**🎯 Actions recommandées :**
+1. Planifier renouvellement contrats Q1 2024
+2. Standardiser les clauses de confidentialité
+3. Créer un modèle basé sur ce contrat (performance optimale)
+
+*Analyse prédictive activée - Prochaine révision : 15 février 2024*`,
+      timestamp: "14:37",
+      type: "ai_analysis",
+      status: "delivered",
+      analysisType: "comparative",
+      confidence: 95,
+      processingTime: "4.1s",
+    },
+  ]
+
+  const filteredConversations = conversations
 
   const currentConversation = conversations.find((conv) => conv.id === selectedConversation)
 
@@ -154,114 +291,241 @@ export default function Chat({ heightClass = "h-[calc(100vh-8rem)]", processes,
     }
   }
 
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case "sent":
+        return <Clock className="h-3 w-3 text-gray-400" />
+      case "delivered":
+        return <CheckCheck className="h-3 w-3 text-gray-400" />
+      case "read":
+        return <CheckCheck className="h-3 w-3 text-blue-500" />
+      default:
+        return null
+    }
+  }
+
+  const getAnalysisIcon = (analysisType: string) => {
+    switch (analysisType) {
+      case "document":
+        return <FileText className="h-4 w-4" />
+      case "comparative":
+        return <BarChart3 className="h-4 w-4" />
+      case "security":
+        return <Shield className="h-4 w-4" />
+      case "performance":
+        return <TrendingUp className="h-4 w-4" />
+      default:
+        return <Brain className="h-4 w-4" />
+    }
+  }
+
+  const renderAIMessage = (message: any) => {
+    return (
+      <div className="flex justify-start">
+        <div className="max-w-4xl">
+          <div className="flex items-center space-x-2 mb-2">
+            <div className="w-8 h-8 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center">
+              <Brain className="h-4 w-4 text-white" />
+            </div>
+            <div className="flex items-center space-x-2">
+              <span className="text-sm font-medium text-gray-900 dark:text-gray-100">IA DocV</span>
+              <Badge className="bg-gradient-to-r from-purple-100 to-blue-100 dark:from-purple-800 dark:to-blue-800 text-purple-700 dark:text-purple-200 border-purple-200 dark:border-purple-700 text-xs">
+                {getAnalysisIcon(message.analysisType)}
+                <span className="ml-1">
+                  {message.analysisType === "document"
+                    ? "Analyse Document"
+                    : message.analysisType === "comparative"
+                      ? "Analyse Comparative"
+                      : "Analyse IA"}
+                </span>
+              </Badge>
+              {message.confidence && (
+                <Badge className="bg-green-100 dark:bg-green-800 text-green-700 dark:text-green-200 border-green-200 dark:border-green-700 text-xs">
+                  <CheckCircle className="h-3 w-3 mr-1" />
+                  {message.confidence}% fiable
+                </Badge>
+              )}
+            </div>
+          </div>
+
+          <div className="bg-gradient-to-r from-purple-50 to-blue-50 dark:from-purple-900 dark:to-blue-900 border border-purple-200 dark:border-purple-700 rounded-lg p-4 shadow-sm">
+            <div className="prose prose-sm max-w-none">
+              <div className="whitespace-pre-line text-gray-800 dark:text-gray-100 leading-relaxed">{message.content}</div>
+            </div>
+            <div className="flex items-center justify-between mt-4 pt-3 border-t border-purple-200 dark:border-purple-700">
+              <div className="flex items-center space-x-4 text-xs text-gray-600 dark:text-gray-400">
+                <div className="flex items-center space-x-1">
+                  <Zap className="h-3 w-3" />
+                  <span>Traité en {message.processingTime}</span>
+                </div>
+                {message.documentName && (
+                  <div className="flex items-center space-x-1">
+                    <FileText className="h-3 w-3" />
+                    <span>{message.documentName}</span>
+                  </div>
+                )}
+              </div>
+              <div className="flex items-center space-x-2">
+                <span className="text-xs text-purple-600 dark:text-purple-400">{message.timestamp}</span>
+                <div>{getStatusIcon(message.status)}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className={`${heightClass} flex`}>
       <div className="w-80 border-r bg-white dark:bg-gray-800 flex flex-col">
         <div className="p-4 border-b border-gray-200 dark:border-gray-700">
-          <div className="mb-4">
+          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Messages</h2>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Messages</h2>
-            <div className="relative">
+            <Button size="sm">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+              <Plus className="h-4 w-4" />
-              <Input
+            </Button>
-                placeholder="Rechercher par ID ou nom..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-10 bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600"
-              />
-            </div>
           </div>
         </div>
 
-      <div className="flex-1 overflow-y-auto">
+        <div className="flex-1 overflow-y-auto">
-        {isLoading ? (
+          {filteredConversations.map((conversation) => (
-          <div className="flex items-center justify-center p-8">
-            <div className="text-gray-500 dark:text-gray-400">Chargement des processus de pairing...</div>
-          </div>
-        ) : filteredConversations.length > 0 ? (
-          filteredConversations.map((conversation) => (
             <div
               key={conversation.id}
               onClick={() => setSelectedConversation(conversation.id)}
-              className={`p-4 border-b cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 ${
+              className={`p-4 border-b cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 ${selectedConversation === conversation.id
-                selectedConversation === conversation.id
+                ? "bg-blue-50 dark:bg-blue-900 border-r-2 border-blue-500 dark:border-blue-400"
-                  ? "bg-blue-50 dark:bg-blue-900 border-r-2 border-blue-500 dark:border-blue-400"
+                : ""
-                  : ""
+                }`}
-              }`}
             >
               <div className="flex items-start space-x-3">
                 <div className="relative">
                   <div className="w-12 h-12 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center">
-                    <span className="text-blue-600 dark:text-blue-400 font-medium">{conversation.avatar}</span>
+                    {conversation.type === "group" ? (
+                      <Users className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+                    ) : (
+                      <span className="text-blue-600 dark:text-blue-400 font-medium">{conversation.avatar}</span>
+                    )}
                   </div>
-                  {conversation.isOnline && (
+                  {conversation.isOnline && conversation.type === "direct" && (
                     <Circle className="absolute -bottom-1 -right-1 h-4 w-4 text-green-500 fill-current" />
                   )}
                 </div>
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center justify-between">
                     <h3 className="font-medium text-gray-900 dark:text-gray-100 truncate">{conversation.name}</h3>
+                    <span className="text-xs text-gray-500 dark:text-gray-400">{conversation.lastMessageTime}</span>
                   </div>
-                  {'pairingId' in conversation && (
+                  <div className="flex items-center justify-between mt-1">
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 font-mono">
+                    <p className="text-sm text-gray-600 dark:text-gray-300 truncate">
-                      ID: {conversation.pairingId.slice(0, 8)}...{conversation.pairingId.slice(-4)}
+                      {conversation.isTyping ? (
+                        <span className="text-blue-600 dark:text-blue-400 italic">En train d'écrire...</span>
+                      ) : (
+                        <span
+                          className={conversation.lastMessage.includes("IA DocV:") ? "text-purple-600 dark:text-purple-400 font-medium" : ""}
+                        >
+                          {conversation.lastMessage}
+                        </span>
+                      )}
                     </p>
-                  )}
+                    {conversation.unreadCount > 0 && (
-                </div>
+                      <Badge
-              </div>
+                        className={`text-white text-xs px-2 py-1 rounded-full ${conversation.lastMessage.includes("IA DocV:")
-            </div>
+                          ? "bg-purple-600 dark:bg-purple-400"
-          ))
+                          : "bg-blue-600 dark:bg-blue-400"
-        ) : (
+                          }`}
-          <div className="flex items-center justify-center p-8">
+                      >
-            <div className="text-center">
+                        {conversation.unreadCount}
-              <Search className="h-8 w-8 mx-auto text-gray-400 dark:text-gray-500 mb-2" />
+                      </Badge>
-              <p className="text-gray-500 dark:text-gray-400">Aucun membre trouvé</p>
+                    )}
-              <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
-                Essayez de rechercher par ID ou nom
-              </p>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-
-    <div className="flex-1 flex flex-col">
-      {currentConversation ? (
-        <>
-          <div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center space-x-3">
-                <div className="relative">
-                  <div className="w-10 h-10 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center">
-                    <span className="text-blue-600 dark:text-blue-400 font-medium">{currentConversation.avatar}</span>
                   </div>
-                  {currentConversation.isOnline && (
+                  {conversation.type === "group" && (
-                    <Circle className="absolute -bottom-1 -right-1 h-3 w-3 text-green-500 fill-current" />
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{conversation.members} membres</p>
                   )}
                 </div>
-                <div>
+              </div>
-                  <h3 className="font-medium text-gray-900 dark:text-gray-100">{currentConversation.name}</h3>
+            </div>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">
+          ))}
-                    {currentConversation.isOnline ? "En ligne" : "Hors ligne"}
+        </div>
-                  </p>
+      </div>
+
+      <div className="flex-1 flex flex-col">
+        {currentConversation ? (
+          <>
+            <div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <div className="relative">
+                    <div className="w-10 h-10 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center">
+                      {currentConversation.type === "group" ? (
+                        <Users className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+                      ) : (
+                        <span className="text-blue-600 dark:text-blue-400 font-medium">{currentConversation.avatar}</span>
+                      )}
+                    </div>
+                    {currentConversation.isOnline && currentConversation.type === "direct" && (
+                      <Circle className="absolute -bottom-1 -right-1 h-3 w-3 text-green-500 fill-current" />
+                    )}
+                  </div>
+                  <div>
+                    <h3 className="font-medium text-gray-900 dark:text-gray-100">{currentConversation.name}</h3>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      {currentConversation.type === "group"
+                        ? `${currentConversation.members} membres`
+                        : currentConversation.isOnline
+                          ? "En ligne"
+                          : "Hors ligne"}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Button variant="outline" size="sm">
+                    <MoreHorizontal className="h-4 w-4 text-gray-900 dark:text-gray-100" />
+                  </Button>
                 </div>
               </div>
-              <div className="flex items-center space-x-2">
-                <Button variant="outline" size="sm">
-                  <MoreHorizontal className="h-4 w-4 text-gray-900 dark:text-gray-100" />
-                </Button>
-              </div>
             </div>
-          </div>
 
-          <div className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-900">
+            <div className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-900">
-            <div className="flex items-center justify-center h-full">
+              {messages.map((message) => (
-              <div className="text-center">
+                <div key={message.id}>
-                <MessageSquare className="h-12 w-12 mx-auto text-gray-400 dark:text-gray-500 mb-4" />
+                  {message.type === "ai_analysis" ? (
-                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Aucun message</h3>
+                    renderAIMessage(message)
-                <p className="text-gray-600 dark:text-gray-400">Commencez une conversation en envoyant un message</p>
+                  ) : (
-              </div>
+                    <div className={`flex ${message.senderId === "me" ? "justify-end" : "justify-start"}`}>
+                      <div
+                        className={`max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${message.senderId === "me"
+                          ? "bg-blue-600 text-white"
+                          : "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm"
+                          }`}
+                      >
+                        {message.type === "text" ? (
+                          <p className="text-sm">{message.content}</p>
+                        ) : message.type === "file" ? (
+                          <div className="flex items-center space-x-3 p-2">
+                            <File className="h-8 w-8 text-gray-400 dark:text-gray-500" />
+                            <div className="flex-1">
+                              <p className="text-sm font-medium">{message.fileName}</p>
+                              <p className="text-xs text-gray-500 dark:text-gray-400">{message.fileSize}</p>
+                            </div>
+                            <Button variant="outline" size="sm">
+                              <Download className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        ) : null}
+                        <div
+                          className={`flex items-center justify-between mt-1 ${message.senderId === "me" ? "text-blue-100" : "text-gray-500 dark:text-gray-400"
+                            }`}
+                        >
+                          <span className="text-xs">{message.timestamp}</span>
+                          {message.senderId === "me" && <div className="ml-2">{getStatusIcon(message.status)}</div>}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
             </div>
-          </div>
 
             <div className="p-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
               <div className="flex items-end space-x-2">

lib/4nk/models/PairingProcess.ts

@@ -1,13 +0,0 @@
-export interface PairingProcess {
-  id: string;
-  memberPublicName: string;
-}
-
-export function isPairingProcess(data: any): data is PairingProcess {
-  if (typeof data !== 'object' || data === null) return false;
-  
-  return (
-    typeof data.id === 'string' &&
-    typeof data.memberPublicName === 'string'
-  );
-}