A scrollable AI chat conversation container that auto-sticks to the bottom, with content, empty state, and a scroll-to-bottom button.
"use client";
import {
Conversation,
ConversationContent,
ConversationScrollButton,
} from "@/components/ui/conversation";
const messages = [
{ role: "user", text: "Hi! Can you help me plan a trip to Japan?" },
{
role: "assistant",
text: "Absolutely! When are you planning to go, and how long will you stay?",
},
{ role: "user", text: "Two weeks in April, mostly Tokyo and Kyoto." },
{
role: "assistant",
text: "Great choice — April is cherry blossom season. I'd suggest 5 days in Tokyo, a day trip to Hakone, then 4 days in Kyoto with time for the temples and Arashiyama.",
},
{ role: "user", text: "Sounds perfect. What about getting around?" },
{
role: "assistant",
text: "A 14-day Japan Rail Pass covers the shinkansen between cities. Within each city, grab an IC card like Suica for trains and buses.",
},
];
export default function ConversationDemo() {
return (
<div className="mx-auto flex h-[420px] w-full max-w-md flex-col rounded-lg border bg-background">
<Conversation className="h-full">
<ConversationContent>
{messages.map((message, index) => (
<div
key={index}
className={
message.role === "user"
? "ml-auto max-w-[80%] rounded-2xl bg-primary px-4 py-2 text-sm text-primary-foreground"
: "mr-auto max-w-[80%] rounded-2xl bg-muted px-4 py-2 text-sm text-foreground"
}
>
{message.text}
</div>
))}
</ConversationContent>
<ConversationScrollButton />
</Conversation>
</div>
);
}