A scrollable chat message list container that auto-scrolls to the newest message and shows a scroll-to-bottom button when the user scrolls up.
import { AiMessages } from "@/components/ui/ai-messages";
function MessageBubble({
role,
children,
}: {
role: "user" | "assistant";
children: React.ReactNode;
}) {
return (
<div
className={
role === "user"
? "ml-auto max-w-[80%] rounded-lg bg-primary px-4 py-2 text-primary-foreground"
: "mr-auto max-w-[80%] rounded-lg bg-muted px-4 py-2 text-foreground"
}
>
{children}
</div>
);
}
export default function AiMessagesDemo() {
return (
<div className="h-[500px] w-full max-w-2xl border">
<AiMessages>
<MessageBubble role="user">
Hey, can you explain what useEffect does?
</MessageBubble>
<MessageBubble role="assistant">
Sure! useEffect lets you run side effects in a React component, like
fetching data or subscribing to events, after the component renders.
</MessageBubble>
<MessageBubble role="user">Does it run on every render?</MessageBubble>
<MessageBubble role="assistant">
By default yes, but you can control that with a dependency array —
pass an empty array to run it only once, or specific values to run it
when they change.
</MessageBubble>
<MessageBubble role="user">Got it, thanks!</MessageBubble>
<MessageBubble role="assistant">
You're welcome! Happy coding 🎉
</MessageBubble>
</AiMessages>
</div>
);
}