104Get started
HextaUI

Message: Assistant

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

What does a concentric radius mean?
Assistant
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.
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>
  )
}

Add this example

This adds the example as components/examples/message/assistant.tsx, together with the Message component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/message-assistant.json

To add only the component, follow the Message installation.

Props in this example

The Message props this example sets, from the API reference.

Message

PropTypeDefault
alignSide of the conversation. Bubbles inherit it.
"start" | "end""start"

Every prop is in the Message API reference.

More Message examples

See them all, with keyboard support and accessibility notes, on the Message page.

Related components