ai_pipeline_web/src/components/Custom/ChatList/index.tsx

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>
</>
)
}