| import { useEffect, useRef } from "react"; |
| import { MessageBubble, type Message } from "./MessageBubble"; |
|
|
| export function ChatThread({ |
| messages, |
| onCitation, |
| renderExtra, |
| empty, |
| }: { |
| messages: Message[]; |
| onCitation?: (message: Message, index: number) => void; |
| renderExtra?: (message: Message) => React.ReactNode; |
| empty?: React.ReactNode; |
| }) { |
| const endRef = useRef<HTMLDivElement>(null); |
|
|
| useEffect(() => { |
| endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" }); |
| }, [messages]); |
|
|
| if (messages.length === 0 && empty) { |
| return <div className="flex flex-1 items-center justify-center p-6">{empty}</div>; |
| } |
|
|
| return ( |
| <div className="flex-1 space-y-5 overflow-y-auto px-1 py-4"> |
| {messages.map((m) => ( |
| <MessageBubble key={m.id} message={m} onCitation={(idx) => onCitation?.(m, idx)}> |
| {renderExtra?.(m)} |
| </MessageBubble> |
| ))} |
| <div ref={endRef} /> |
| </div> |
| ); |
| } |
|
|
