Usage
import {
Conversation,
ConversationContent,
ConversationEmptyState,
ConversationScrollButton,
} from "@/components/ui/conversation";
Basic Conversation
<Conversation>
<ConversationContent>
{messages.map((message) => (
<div key={message.id}>{message.content}</div>
))}
</ConversationContent>
<ConversationScrollButton />
</Conversation>
With Empty State
<Conversation>
<ConversationContent>
{messages.length === 0 ? (
<ConversationEmptyState
title="No messages yet"
description="Start a conversation to see messages here"
/>
) : (
messages.map((message) => <div key={message.id}>{message.content}</div>)
)}
</ConversationContent>
<ConversationScrollButton />
</Conversation>