MessagePreview
Message shells, response rendering, markdown, attachments, and actions.
Overview
Message provides layout and visual treatment for user and assistant messages. It does not own message records, streaming state, or persistence.
Use MessageResponse for assistant-authored markdown. It wraps Streamdown, so normal markdown rendering works through the component without importing Streamdown at the call site.
Usage
import {
Attachment,
AttachmentPreview,
Attachments,
Message,
MessageAction,
MessageActions,
MessageContent,
MessageResponse,
MessageToolbar,
} from "@tilt-legal/cubitt-components/chat-elements";Examples
Default
<Message from="assistant">
<MessageContent>
<MessageResponse>
The draft gives the tenant an early termination right after year three.
</MessageResponse>
</MessageContent>
<MessageToolbar>
<MessageActions>
<MessageAction tooltip="Copy response">...</MessageAction>
<MessageAction tooltip="Regenerate response">...</MessageAction>
</MessageActions>
</MessageToolbar>
</Message>Markdown
const content = [
"## Lease review summary",
"",
"The **maintenance recovery clause** is the main blocker.",
"",
"| Issue | Risk | Next step |",
"| --- | --- | --- |",
"| Recovery cap | High | Ask for an annual cap. |",
].join("\n");
<Message from="assistant">
<MessageContent>
<MessageResponse>{content}</MessageResponse>
</MessageContent>
</Message>;Attachments
<Message from="user">
<Attachments variant="grid">
{files.map((file) => (
<Attachment data={file} key={file.url}>
<AttachmentPreview />
</Attachment>
))}
</Attachments>
<MessageContent>Use these files when checking the clause.</MessageContent>
</Message>