File size: 956 Bytes
44b44cb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 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>
);
}
|