# Message

One turn of a conversation, from the user or the assistant.

> Every page: https://constella.aayush.cv/llms.txt

```tsx
<Message from="user">
  <MessageContent>What is Constella?</MessageContent>
</Message>
<Message from="assistant">
  <MessageContent>{answer}</MessageContent>
  <MessageActions>
    <CopyButton value={answer} />
  </MessageActions>
</Message>
```

## Installation

```bash
npx shadcn@latest add @constella/message
```

## Usage

```tsx
import {
  Message,
  MessageActions,
  MessageContent,
} from "@/components/ai/message";
```

A user's message sits at the end, in a bubble; an answer reads as the page. Put the answer's actions in `MessageActions`, like a [Copy Button](https://constella.aayush.cv/docs/components/copy-button/index.md).

## Composition

```
Message
├── MessageContent
└── MessageActions
```

## API Reference

| Part      | Adds                              |
| --------- | --------------------------------- |
| `Message` | `from`: `"user"` or `"assistant"` |

Every part takes `sx`, applied last, and renders a `div`.