Spaces:
Runtime error
Runtime error
File size: 1,724 Bytes
8086ffb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import ChatContainerStyles from './ChatContainerStyles';
import { Message } from '../../../models/Message';
import UserMessageItem from '../../common/Messages/UserMessageItem/UserMessageItem';
import SearchMessageItem from '../../common/Messages/SearchMessageItem/SearchMessageItem';
import ChatGPTMessageItem from '../../common/Messages/ChatGPTMessageItem/ChatGPTMessageItem';
import { useEffect, useRef } from 'react';
interface ChatContainerProps {
messages: Message[];
onSendToChatGPT: () => void;
isLoading?: boolean;
}
const ChatContainer = ({
messages,
onSendToChatGPT,
isLoading = false
}: ChatContainerProps) => {
const styles = ChatContainerStyles();
const messagesEndRef = useRef<HTMLDivElement>(null);
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages]);
const renderMessageItem = (message: Message, index: number) => {
switch (message.role) {
case 'system':
return (
<SearchMessageItem
key={`${message.id}-${index}`}
message={message}
onSendToChatGPT={onSendToChatGPT}
isLoading={isLoading}
/>
);
case 'assistant':
return (
<ChatGPTMessageItem
key={`${message.id}-${index}`}
message={message}
isLoading={isLoading}
/>
);
default:
return (
<UserMessageItem key={`${message.id}-${index}`} message={message} />
);
}
};
return (
<div className={styles.container}>
{messages.map((message, index) => renderMessageItem(message, index))}
<div ref={messagesEndRef} />
</div>
);
};
export default ChatContainer;
|