33 lines
986 B
TypeScript
33 lines
986 B
TypeScript
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>
|
|
|
|
</>
|
|
)
|
|
} |