Conversation
The AI Elements conversation surface on the kit's scroll engine.
Overview
Conversation wraps a message thread and follows the live edge while new
content streams in, showing a scroll-to-latest button when you scroll away. It
is the AI Elements API expressed over the kit's
MessageScroller — one scroll
engine, two shapes. On top of the mapping it adds an empty state for the
first-run frame and a download control that saves the transcript as
Markdown (via the exported messagesToMarkdown util).
$ npx morpha-ui add conversationEmpty state
Before the first message, fill the frame with ConversationEmptyState:
$ npx morpha-ui add conversationUsage with the AI SDK
Map useChat messages into the content column:
const { messages } = useChat();
<Conversation className="h-[600px]">
<ConversationContent>
{messages.length === 0 ? (
<ConversationEmptyState title="Start a conversation" />
) : (
messages.map((message) => (
<Message
align={message.role === "user" ? "end" : "start"}
key={message.id}
>
{/* …parts → Bubble / Response… */}
</Message>
))
)}
</ConversationContent>
<ConversationDownload messages={messages} />
<ConversationScrollButton />
</Conversation>Per-item scroll anchoring and visibility tracking stay a MessageScroller
feature — compose it directly with MessageScrollerItem when a thread needs
them.
Installation
Distributed via the Morpha CLI: npx morpha-ui add conversation. The AI
Elements API over the kit's
Message Scroller; depends on ai
for the UIMessage type.
npx morpha-ui add conversationAPI Reference
Prop
Type
ConversationEmptyState
Prop
Type
ConversationDownload
Prop
Type