AI Elements

Conversation

The scrolling log of a chat. Sticks to the bottom as messages stream in, with a button to jump back down.

packages/design-system/components/ai-elements/conversation.tsx

Examples

How long does a brand sprint take?

A brand sprint runs two weeks: a kickoff, two rounds of concepts, and a handover with the files and a short guide.

And a website after that?

Usually four to six weeks, depending on how many pages and how much motion.

Messages, sticking to the bottom

No messages yet

Ask about a project, a price or a timeline.

Empty state

Anatomy

01Log, role="log"
02Content, gap-8 p-4
03Messages
04Scroll-to-bottom button

Usage

import {
  Conversation, ConversationContent, ConversationScrollButton,
} from "@repo/design-system/components/ai-elements/conversation";

<Conversation className="h-full">
  <ConversationContent>
    {messages.map((message) => (
      <Message from={message.role} key={message.id}>...</Message>
    ))}
  </ConversationContent>
  <ConversationScrollButton />
</Conversation>

Props

Prop	Type	Default	Description
initial / resize	"smooth" \| "instant"	"smooth"	use-stick-to-bottom's scroll behaviour on mount and as content grows.
ConversationEmptyState title / description / icon	string / string / ReactNode	"No messages yet"	What shows before the first message. Children replace all three.
ConversationDownload messages	UIMessage[]	none	A button that saves the chat as Markdown.
className	string	none	Merged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Give it a height, or a flex parent with min-h-0.

Don't