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

implemented the chat send message func

Browse Source
This commit is contained in:
Sadrinho27 2025-11-12 10:59:41 +01:00
parent 7c09b346ec
commit 9857a3766d
1 changed files with 54 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
components/4nk/FolderChat.tsx
View File

@ -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>