608 lines
21 KiB
TypeScript
608 lines
21 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import {
|
|
MessageSquare,
|
|
Search,
|
|
Plus,
|
|
Send,
|
|
Paperclip,
|
|
Smile,
|
|
Phone,
|
|
Video,
|
|
MoreHorizontal,
|
|
Users,
|
|
Circle,
|
|
CheckCheck,
|
|
Clock,
|
|
File,
|
|
Download,
|
|
Brain,
|
|
Shield,
|
|
TrendingUp,
|
|
CheckCircle,
|
|
FileText,
|
|
BarChart3,
|
|
Zap,
|
|
} from "lucide-react"
|
|
import { useSearchParams } from "next/navigation"
|
|
|
|
export default function ChatPage() {
|
|
const [selectedConversation, setSelectedConversation] = useState("1")
|
|
const [newMessage, setNewMessage] = useState("")
|
|
const [searchTerm, setSearchTerm] = useState("")
|
|
|
|
const searchParams = useSearchParams()
|
|
const userId = searchParams.get("user")
|
|
const messageType = searchParams.get("message")
|
|
const groupType = searchParams.get("type")
|
|
|
|
useEffect(() => {
|
|
// Gérer les nouveaux messages depuis les autres pages
|
|
if (messageType === "new") {
|
|
if (userId) {
|
|
// Message individuel
|
|
const messageData = sessionStorage.getItem("newMessage")
|
|
if (messageData) {
|
|
const data = JSON.parse(messageData)
|
|
console.log("Nouveau message individuel:", data)
|
|
|
|
// Créer ou ouvrir la conversation avec cet utilisateur
|
|
setSelectedConversation(userId)
|
|
|
|
// Ajouter le message pré-rempli
|
|
setNewMessage(`${data.subject ? `[${data.subject}] ` : ""}${data.content}`)
|
|
|
|
// Nettoyer le sessionStorage
|
|
sessionStorage.removeItem("newMessage")
|
|
|
|
// Notification
|
|
showNotification("info", `Conversation ouverte avec ${data.userName}`)
|
|
}
|
|
} else if (groupType === "group") {
|
|
// Message de groupe
|
|
const groupData = sessionStorage.getItem("newGroupMessage")
|
|
if (groupData) {
|
|
const data = JSON.parse(groupData)
|
|
console.log("Nouveau message de groupe:", data)
|
|
|
|
// Créer une nouvelle conversation de groupe
|
|
const groupName = `Groupe (${data.users.length} membres)`
|
|
setSelectedConversation("group-new")
|
|
|
|
// Ajouter le message pré-rempli
|
|
setNewMessage(`${data.subject ? `[${data.subject}] ` : ""}${data.content}`)
|
|
|
|
// Nettoyer le sessionStorage
|
|
sessionStorage.removeItem("newGroupMessage")
|
|
|
|
// Notification
|
|
showNotification("info", `Conversation de groupe créée avec ${data.users.length} utilisateur(s)`)
|
|
}
|
|
}
|
|
}
|
|
}, [userId, messageType, groupType])
|
|
|
|
const showNotification = (type: "success" | "error" | "info", message: string) => {
|
|
// Implémenter la notification (peut utiliser toast ou état local)
|
|
console.log(`${type.toUpperCase()}: ${message}`)
|
|
}
|
|
|
|
const conversations = [
|
|
{
|
|
id: "1",
|
|
name: "Marie Dubois",
|
|
type: "direct",
|
|
avatar: "MD",
|
|
lastMessage: "Parfait, merci pour la validation !",
|
|
lastMessageTime: "14:32",
|
|
unreadCount: 0,
|
|
isOnline: true,
|
|
isTyping: false,
|
|
},
|
|
{
|
|
id: "2",
|
|
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 = [
|
|
{
|
|
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"**
|
|
|
|
**Type de document :** PDF (2.3 MB)
|
|
**Statut :** ✅ Validé
|
|
**Dernière modification :** Il y a 2 heures
|
|
|
|
**📊 Analyse du contenu :**
|
|
• Document juridique détecté avec haute précision
|
|
• 3 tag(s) identifié(s) : contrat, client, juridique
|
|
• Résumé automatique disponible
|
|
• 47 pages analysées
|
|
• 12 clauses contractuelles détectées
|
|
|
|
**🎯 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.filter((conv) =>
|
|
conv.name.toLowerCase().includes(searchTerm.toLowerCase()),
|
|
)
|
|
|
|
const currentConversation = conversations.find((conv) => conv.id === selectedConversation)
|
|
|
|
const handleSendMessage = () => {
|
|
if (newMessage.trim()) {
|
|
// Ici on ajouterait la logique pour envoyer le message
|
|
console.log("Sending message:", newMessage)
|
|
setNewMessage("")
|
|
}
|
|
}
|
|
|
|
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">
|
|
{/* AI Header */}
|
|
<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">IA DocV</span>
|
|
<Badge className="bg-gradient-to-r from-purple-100 to-blue-100 text-purple-700 border-purple-200 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 text-green-700 border-green-200 text-xs">
|
|
<CheckCircle className="h-3 w-3 mr-1" />
|
|
{message.confidence}% fiable
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* AI Message Content */}
|
|
<div className="bg-gradient-to-r from-purple-50 to-blue-50 border border-purple-200 rounded-lg p-4 shadow-sm">
|
|
<div className="prose prose-sm max-w-none">
|
|
<div className="whitespace-pre-line text-gray-800 leading-relaxed">{message.content}</div>
|
|
</div>
|
|
|
|
{/* AI Message Footer */}
|
|
<div className="flex items-center justify-between mt-4 pt-3 border-t border-purple-200">
|
|
<div className="flex items-center space-x-4 text-xs text-gray-600">
|
|
<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">{message.timestamp}</span>
|
|
<div>{getStatusIcon(message.status)}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="h-[calc(100vh-8rem)] flex">
|
|
{/* Sidebar - Conversations */}
|
|
<div className="w-80 border-r bg-white flex flex-col">
|
|
{/* Header */}
|
|
<div className="p-4 border-b">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-lg font-semibold">Messages</h2>
|
|
<Button size="sm">
|
|
<Plus className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
|
<Input
|
|
placeholder="Rechercher une conversation..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Conversations List */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
{filteredConversations.map((conversation) => (
|
|
<div
|
|
key={conversation.id}
|
|
onClick={() => setSelectedConversation(conversation.id)}
|
|
className={`p-4 border-b cursor-pointer hover:bg-gray-50 ${
|
|
selectedConversation === conversation.id ? "bg-blue-50 border-r-2 border-blue-500" : ""
|
|
}`}
|
|
>
|
|
<div className="flex items-start space-x-3">
|
|
<div className="relative">
|
|
<div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
|
|
{conversation.type === "group" ? (
|
|
<Users className="h-6 w-6 text-blue-600" />
|
|
) : (
|
|
<span className="text-blue-600 font-medium">{conversation.avatar}</span>
|
|
)}
|
|
</div>
|
|
{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 truncate">{conversation.name}</h3>
|
|
<span className="text-xs text-gray-500">{conversation.lastMessageTime}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between mt-1">
|
|
<p className="text-sm text-gray-600 truncate">
|
|
{conversation.isTyping ? (
|
|
<span className="text-blue-600 italic">En train d'écrire...</span>
|
|
) : (
|
|
<span
|
|
className={conversation.lastMessage.includes("IA DocV:") ? "text-purple-600 font-medium" : ""}
|
|
>
|
|
{conversation.lastMessage}
|
|
</span>
|
|
)}
|
|
</p>
|
|
{conversation.unreadCount > 0 && (
|
|
<Badge
|
|
className={`text-white text-xs px-2 py-1 rounded-full ${
|
|
conversation.lastMessage.includes("IA DocV:") ? "bg-purple-600" : "bg-blue-600"
|
|
}`}
|
|
>
|
|
{conversation.unreadCount}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
{conversation.type === "group" && (
|
|
<p className="text-xs text-gray-500 mt-1">{conversation.members} membres</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Chat Area */}
|
|
<div className="flex-1 flex flex-col">
|
|
{currentConversation ? (
|
|
<>
|
|
{/* Chat Header */}
|
|
<div className="p-4 border-b bg-white">
|
|
<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 rounded-full flex items-center justify-center">
|
|
{currentConversation.type === "group" ? (
|
|
<Users className="h-5 w-5 text-blue-600" />
|
|
) : (
|
|
<span className="text-blue-600 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">{currentConversation.name}</h3>
|
|
<p className="text-sm text-gray-500">
|
|
{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">
|
|
<Phone className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
<Video className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Messages */}
|
|
<div className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50">
|
|
{messages.map((message) => (
|
|
<div key={message.id}>
|
|
{message.type === "ai_analysis" ? (
|
|
renderAIMessage(message)
|
|
) : (
|
|
<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 text-gray-900 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" />
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium">{message.fileName}</p>
|
|
<p className="text-xs text-gray-500">{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"
|
|
}`}
|
|
>
|
|
<span className="text-xs">{message.timestamp}</span>
|
|
{message.senderId === "me" && <div className="ml-2">{getStatusIcon(message.status)}</div>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Message Input */}
|
|
<div className="p-4 border-t bg-white">
|
|
<div className="flex items-end space-x-2">
|
|
<Button variant="outline" size="sm">
|
|
<Paperclip className="h-4 w-4" />
|
|
</Button>
|
|
<div className="flex-1">
|
|
<Textarea
|
|
placeholder="Tapez votre message..."
|
|
value={newMessage}
|
|
onChange={(e) => setNewMessage(e.target.value)}
|
|
onKeyPress={(e) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault()
|
|
handleSendMessage()
|
|
}
|
|
}}
|
|
rows={1}
|
|
className="resize-none"
|
|
/>
|
|
</div>
|
|
<Button variant="outline" size="sm">
|
|
<Smile className="h-4 w-4" />
|
|
</Button>
|
|
<Button onClick={handleSendMessage} disabled={!newMessage.trim()}>
|
|
<Send className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex-1 flex items-center justify-center bg-gray-50">
|
|
<div className="text-center">
|
|
<MessageSquare className="h-12 w-12 mx-auto text-gray-400 mb-4" />
|
|
<h3 className="text-lg font-medium text-gray-900 mb-2">Sélectionnez une conversation</h3>
|
|
<p className="text-gray-600">Choisissez une conversation pour commencer à discuter</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|