Spaces:
Sleeping
Sleeping
| import { useEffect, useRef } from 'react' | |
| import MessageBubble from './MessageBubble.jsx' | |
| import ThinkingIndicator from './ThinkingIndicator.jsx' | |
| export default function MessageList({ messages, isThinking, statusText, onImageClick }) { | |
| const bottomRef = useRef(null) | |
| useEffect(() => { | |
| bottomRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' }) | |
| }, [messages, isThinking, statusText]) | |
| return ( | |
| <section className="message-list"> | |
| {messages.map((message) => ( | |
| <MessageBubble | |
| key={message.id} | |
| message={message} | |
| onImageClick={onImageClick} | |
| /> | |
| ))} | |
| {isThinking && ( | |
| <ThinkingIndicator statusText={statusText} /> | |
| )} | |
| <div ref={bottomRef} /> | |
| </section> | |
| ) | |
| } | |