Chat ElementsPreview
UI-only chat building blocks for composing AI interfaces without Cubitt owning your runtime data.
Overview
Chat Elements are smaller composable pieces for AI chat interfaces. They are visual components only: consumers own messages, transport, persistence, tool state, and stream orchestration.
Use them when you want Cubitt styling and composition pieces without adopting a larger chat runtime contract.
Open full chat example
Usage
import {
Conversation,
Message,
PromptInput,
} from "@tilt-legal/cubitt-components/chat-elements";Setup
MessageResponse uses Streamdown for markdown rendering. Consumer apps need streamdown installed and should include Streamdown in Tailwind's source scan, with the path adjusted for their app:
@source "../node_modules/streamdown/dist/*.js";PromptInput owns its own transient composer state. No Chat Elements provider needs to be installed globally.
Components
Conversation
Scroll container, content layout, empty state, and scroll-to-bottom affordance.
Message
User and assistant message shells, markdown responses, attachments, and actions.
Prompt Input
Text editor form, submit state, action menu, attachment display, and speech composition.
Shimmer
Lightweight animated text for streaming or thinking states.
Task
Collapsible task/progress rows for agent work.
Sources
Collapsible source lists for response-level references.
Inline Citation
Inline cited text with preview-card and carousel source details.
Speech Input
Standalone voice capture button for dictation flows.
Boundary
These components intentionally do not prescribe a message schema beyond small UI-facing prop types. Use your own chat hooks, AI SDK transport, backend routes, and persistence model, then pass the relevant values into the visual elements.
API Reference
Shared Types
These UI-facing types are exported from @tilt-legal/cubitt-components/chat-elements and are shared across the chat element pages.
UIMessage
Minimal message shape used by message, conversation, and prompt examples.
| Field | Type | Description |
|---|---|---|
id | string | Unique message id. |
role | "system" | "user" | "assistant" | Message role. |
metadata | unknown | Optional consumer-owned metadata. |
parts | unknown[] | Consumer-owned message parts. |
FileUIPart
File part shape used when prompt attachments are submitted to consumers.
| Field | Type | Description |
|---|---|---|
type | "file" | File part discriminator. |
mediaType | string | File MIME type. |
filename | string | Optional filename. |
url | string | File URL or data URL. |
providerMetadata | unknown | Optional provider-specific metadata. |
name | string | Optional display name inherited from file UI data. |
size | number | Optional file size in bytes. |
sizeLabel | string | Optional formatted size label. |
description | string | Optional display description. |
badge | React.ReactNode | Optional display badge. |
icon | React.ReactNode | Optional display icon. |
thumbnailUrl | string | Optional thumbnail URL. |
state | "default" | "loading" | "uploading" | "error" | Optional display state. |
progress | number | Optional upload/loading progress. |
disabled | boolean | Optional disabled state. |
source | unknown | Optional consumer source payload. |
ChatFileUIPart is an alias of FileUIPart.
ChatAttachmentFile
Attachment file shape used by prompt and message attachment UI.
| Field | Type | Description |
|---|---|---|
id | string | Unique attachment id. |
| file fields | FileUIPart fields | File display and URL data. |
ChatAttachmentFileData is the same shape with id optional, for attachment display cases where the consumer does not need a stable id.
SourceDocumentUIPart
Source-document shape accepted by attachment and referenced-source APIs.
| Field | Type | Description |
|---|---|---|
type | "source-document" | Source document discriminator. |
mediaType | string | Optional MIME type. |
title | string | Optional source title. |
filename | string | Optional source filename. |
url | string | Optional source URL. |
providerMetadata | unknown | Optional provider-specific metadata. |
ChatStatus
Runtime status values accepted by prompt controls.
| Value | Description |
|---|---|
"processing" | The runtime has accepted the prompt and is preparing a response. |
"streaming" | The runtime is streaming a response. |