import { useEffect, useRef } from 'react';
import { ChatItem } from './ChatItem';
import styles from  './index.less';
import { ChatMessage } from './types';

type ChatListProps = {
    messages: ChatMessage[],
}

export function ChatList({ messages }: ChatListProps) {
    const bottomRef = useRef<HTMLDivElement>(null);
    const listRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const content = listRef?.current;
        if (!content || content.scrollHeight > content.clientHeight) return;
        bottomRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
    }, [messages]);

    return (
        <>
            <div className={styles.chatList} ref={listRef}>
                {messages.map(msg => (
                    <div key={msg.id}>
                        <ChatItem message={msg} />
                        <div ref={msg.streaming ? bottomRef : null} />
                    </div>
                ))}
            </div>

        </>
    )
}