34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { ChatMessage } from '../store/chatStore';
|
||
|
|
import { useAuthStore } from '@/features/auth/store/authStore';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
interface ChatMessageProps {
|
||
|
|
message: ChatMessage;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ChatMessageComponent: React.FC<ChatMessageProps> = ({ message }) => {
|
||
|
|
const { user } = useAuthStore();
|
||
|
|
const isMe = user?.id === parseInt(message.sender_id);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"flex items-start gap-3 p-2 rounded-lg max-w-[80%] my-1",
|
||
|
|
isMe ? "ml-auto bg-blue-500 text-white" : "mr-auto bg-gray-200 text-gray-800"
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="font-semibold text-sm">
|
||
|
|
{isMe ? "Moi" : message.sender_username || `Utilisateur ${message.sender_id}`}
|
||
|
|
</span>
|
||
|
|
<span className="text-xs opacity-75">
|
||
|
|
{new Date(message.created_at).toLocaleTimeString()}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-sm">{message.content}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|