

<Preview name="MessageDefaultExample" />

## Overview [#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 [#usage]

```tsx
import {
  Attachment,
  AttachmentPreview,
  Attachments,
  Message,
  MessageAction,
  MessageActions,
  MessageContent,
  MessageResponse,
  MessageToolbar,
} from "@tilt-legal/cubitt-components/chat-elements";
```

## Examples [#examples]

### Default [#default]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="MessageDefaultExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <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>
    ```
  </Tab>
</Tabs>

### Markdown [#markdown]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="MessageMarkdownExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    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>;
    ```
  </Tab>
</Tabs>

### Attachments [#attachments]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="MessageAttachmentsExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <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>
    ```
  </Tab>
</Tabs>
