# Message: Long content

> Bubbles wrap long links, and header and footer text can truncate without pushing the avatar.

Example: https://hextaui.com/docs/message/examples/long-content
Component docs: https://hextaui.com/docs/message.md

## Add this example

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

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

## Source

```tsx title="components/examples/message/long-content.tsx"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageHeader,
} from "@/components/ui/message"

export function MessageLongContent() {
  return (
    <div className="w-72 max-w-full">
      <Message>
        <MessageAvatar>
          <Avatar>
            <AvatarImage src="https://github.com/preetsuthar17.png" alt="" />
            <AvatarFallback>PS</AvatarFallback>
          </Avatar>
        </MessageAvatar>
        <MessageContent>
          <MessageHeader>
            <span className="truncate">
              Preet Suthar from the HextaUI design systems team
            </span>
          </MessageHeader>
          <Bubble variant="secondary">
            <BubbleContent>
              https://example.com/a/very/long/link/that/does/not/break/naturally/at/all
            </BubbleContent>
          </Bubble>
          <MessageFooter>
            <span className="truncate">
              Delivered to every device signed in to this workspace
            </span>
          </MessageFooter>
        </MessageContent>
      </Message>
    </div>
  )
}
```

## More Message examples

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