ConversationPreview
Scroll-aware chat conversation container with content, empty state, and scroll-to-bottom UI.
Overview
Conversation wraps the message feed area. It handles scroll positioning through use-stick-to-bottom, but it does not own messages or rendering.
Usage
import {
Conversation,
ConversationContent,
ConversationDownload,
ConversationEmptyState,
ConversationScrollButton,
Message,
MessageContent,
MessageResponse,
messagesToMarkdown,
} from "@tilt-legal/cubitt-components/chat-elements";Examples
Default
<Conversation className="h-80 rounded-xl border border-border-3">
<ConversationContent>
{messages.map((message) => (
<Message key={message.id} from={message.role}>
<MessageContent>
{message.role === "assistant" ? (
<MessageResponse>{message.text}</MessageResponse>
) : (
message.text
)}
</MessageContent>
</Message>
))}
</ConversationContent>
<ConversationScrollButton />
</Conversation>Download
<div className="rounded-xl border border-border-3">
<div className="flex items-center justify-between border-border-3 border-b px-4">
<p>Lease review conversation</p>
<ConversationDownload
className="static"
filename="conversation.md"
messages={messages}
/>
</div>
<Conversation className="h-80">
<ConversationContent>{messages.map(...)}</ConversationContent>
<ConversationScrollButton />
</Conversation>
</div>
const markdown = messagesToMarkdown(messages);Empty
<Conversation className="h-80 rounded-xl border border-border-3">
<ConversationContent className="h-full">
<ConversationEmptyState
title="No conversation yet"
description="Messages will appear here as the assistant responds."
/>
</ConversationContent>
</Conversation>