A scrollable chat message container that automatically sticks to the bottom as new messages arrive and shows a jump-to-bottom button when the user scrolls up.
"use client";
import {
Thread,
ThreadContent,
ThreadScrollToBottom,
} from "@/components/ui/thread";
export default function ThreadDemo() {
return (
<div className="w-full h-[500px] rounded-xl border border-border overflow-hidden bg-background">
<Thread>
<ThreadContent>
{Array.from({ length: 10 }).map((_, i) =>
i % 2 === 0 ? (
<div
key={i}
className="ml-auto max-w-[80%] rounded-full bg-muted px-4 py-2 text-sm text-foreground"
>
Message {i + 1}: This is a sample chat message used to
demonstrate the scrollable thread.
</div>
) : (
<div
key={i}
className="max-w-[80%] text-sm leading-relaxed text-foreground"
>
Message {i + 1}: This is a sample chat message used to
demonstrate the scrollable thread.
</div>
),
)}
</ThreadContent>
<ThreadScrollToBottom />
</Thread>
</div>
);
}