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(null); const listRef = useRef(null); useEffect(() => { const content = listRef?.current; if (!content || content.scrollHeight > content.clientHeight) return; bottomRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'end' }); }, [messages]); return ( <>
{messages.map(msg => (
))}
) }