4nk/docv
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a member search bar

Browse Source
This commit is contained in:
Omar Oughriss 2025-10-20 15:59:41 +02:00
parent f5112cea92
commit 48dc0afe1a
1 changed files with 71 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
components/4nk/Chat.tsx
View File

@ -41,6 +41,7 @@ export default function Chat({ heightClass = "h-[calc(100vh-8rem)]", processes,
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")
@ -132,6 +133,18 @@ export default function Chat({ heightClass = "h-[calc(100vh-8rem)]", processes,
const messages: any[] = []
// Filter conversations based on search query
const filteredConversations = conversations.filter(conversation => {
if (!searchQuery.trim()) return true
// Search by ID (process ID)
const matchesId = conversation.id.toLowerCase().includes(searchQuery.toLowerCase())
// Search by name
const matchesName = conversation.name.toLowerCase().includes(searchQuery.toLowerCase())
return matchesId || matchesName
})
const currentConversation = conversations.find((conv) => conv.id === selectedConversation)
const handleSendMessage = () => {
@ -141,100 +154,21 @@ 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="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Messages</h2>
<Button size="sm">
<Plus className="h-4 w-4" />
</Button>
<div className="mb-4">
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Messages</h2>
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
<Input
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>
@ -275,7 +209,18 @@ export default function Chat({ heightClass = "h-[calc(100vh-8rem)]", processes,
</div>
</div>
</div>
))}
))
) : (
<div className="flex items-center justify-center p-8">
<div className="text-center">
<Search className="h-8 w-8 mx-auto text-gray-400 dark:text-gray-500 mb-2" />
<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>