## Overview [#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.

<a className="not-prose inline-flex h-9 items-center justify-center rounded-full bg-fg-1 px-4 font-medium text-background text-sm transition-colors hover:bg-fg-1/90" href="/examples/chat">
  Open full chat example
</a>

## Usage [#usage]

```tsx
import {
  Conversation,
  Message,
  PromptInput,
} from "@tilt-legal/cubitt-components/chat-elements";
```

## Setup [#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:

```css
@source "../node_modules/streamdown/dist/*.js";
```

`PromptInput` owns its own transient composer state. No Chat Elements provider needs to be installed globally.

## Components [#components]

<Cards>
  <Card title="Conversation" href="./conversation">
    Scroll container, content layout, empty state, and scroll-to-bottom
    affordance.
  </Card>

  <Card title="Message" href="./message">
    User and assistant message shells, markdown responses, attachments, and
    actions.
  </Card>

  <Card title="Prompt Input" href="./prompt-input">
    Text editor form, submit state, action menu, attachment display, and speech
    composition.
  </Card>

  <Card title="Shimmer" href="./shimmer">
    Lightweight animated text for streaming or thinking states.
  </Card>

  <Card title="Task" href="./task">
    Collapsible task/progress rows for agent work.
  </Card>

  <Card title="Sources" href="./sources">
    Collapsible source lists for response-level references.
  </Card>

  <Card title="Inline Citation" href="./inline-citation">
    Inline cited text with preview-card and carousel source details.
  </Card>

  <Card title="Speech Input" href="./speech-input">
    Standalone voice capture button for dictation flows.
  </Card>
</Cards>

## Boundary [#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.