51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
|
import React, { useEffect, useRef } from 'react';
|
||
|
|
import { useChatStore, ChatMessage } from '../store/chatStore';
|
||
|
|
import { ChatMessageComponent } from './ChatMessage';
|
||
|
|
import { useChat } from '../hooks/useChat';
|
||
|
|
|
||
|
|
interface ChatRoomProps {
|
||
|
|
conversationId: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
|
||
|
|
const { messages, userId, currentConversationId } = useChatStore();
|
||
|
|
const { fetchHistory } = useChat();
|
||
|
|
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||
|
|
|
||
|
|
const currentMessages = messages[conversationId] || [];
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (conversationId && !messages[conversationId]) {
|
||
|
|
fetchHistory(conversationId);
|
||
|
|
}
|
||
|
|
}, [conversationId, messages, fetchHistory]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||
|
|
}, [currentMessages]);
|
||
|
|
|
||
|
|
if (!conversationId) {
|
||
|
|
return (
|
||
|
|
<div className="flex-1 flex items-center justify-center text-gray-500">
|
||
|
|
Sélectionnez une conversation pour commencer
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex-1 flex flex-col h-full bg-white">
|
||
|
|
<div className="flex-1 overflow-y-auto p-4">
|
||
|
|
{currentMessages.length === 0 ? (
|
||
|
|
<div className="flex items-center justify-center h-full text-gray-500">
|
||
|
|
Aucun message. Soyez le premier à envoyer un message !
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
currentMessages.map((msg) => (
|
||
|
|
<ChatMessageComponent key={msg.id} message={msg} />
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
<div ref={messagesEndRef} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|