# Message: Assistant

> A `ghost` bubble spans the full width for long answers, and an icon in `<MessageAvatar />` becomes a round tile.

Example: https://hextaui.com/docs/message/examples/assistant
Component docs: https://hextaui.com/docs/message.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/message-assistant.json
```

This adds `components/examples/message/assistant.tsx` with the Message component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/message/assistant.tsx"
import { IconSparkles } from "@tabler/icons-react"

import { Bubble, BubbleContent } from "@/components/ui/bubble"
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageGroup,
  MessageHeader,
} from "@/components/ui/message"

export function MessageAssistant() {
  return (
    <MessageGroup className="w-full max-w-md">
      <Message align="end">
        <MessageContent>
          <Bubble variant="secondary">
            <BubbleContent>What does a concentric radius mean?</BubbleContent>
          </Bubble>
        </MessageContent>
      </Message>
      <Message>
        <MessageAvatar>
          <IconSparkles />
        </MessageAvatar>
        <MessageContent>
          <MessageHeader>Assistant</MessageHeader>
          <Bubble variant="ghost">
            <BubbleContent>
              An inner corner whose radius is the outer radius minus the gap
              between the two edges. Nested shapes then curve together instead
              of fighting each other at the corners.
            </BubbleContent>
          </Bubble>
        </MessageContent>
      </Message>
    </MessageGroup>
  )
}
```

## Props in this example

### Message

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `"start" \| "end"` | `"start"` | Side of the conversation. Bubbles inherit it. |

## More Message examples

- [Alignment](https://hextaui.com/docs/message/examples/alignment.md)
- [Header and footer](https://hextaui.com/docs/message/examples/header-footer.md)
- [Long content](https://hextaui.com/docs/message/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/message/examples/rtl.md)