ChatThread.tsx•953 B
import React, { useEffect, useRef } from 'react';
import type { Message } from '../types';
import MessageBubble from './MessageBubble';
import TypingIndicator from './TypingIndicator';
import './ChatThread.css';
interface ChatThreadProps {
messages: Message[];
isProcessing: boolean;
}
const ChatThread: React.FC<ChatThreadProps> = ({ messages, isProcessing }) => {
const messagesEndRef = useRef<HTMLDivElement>(null);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
};
useEffect(() => {
scrollToBottom();
}, [messages, isProcessing]);
return (
<div className="chat-thread">
<div className="messages-container">
{messages.map((message) => (
<MessageBubble key={message.id} message={message} />
))}
{isProcessing && <TypingIndicator />}
<div ref={messagesEndRef} />
</div>
</div>
);
};
export default ChatThread;