# Message Displays a message in a conversation, with optional avatar, header, footer, and alignment. ```twig
ME Deploying to prod real quick. R It's 4:55 PM. On a Friday. ME It's a one-line change. Delivered R It's always a one-line change ๐Ÿ˜ญ. Alright, let me take a look. ๐Ÿ‘ Oliver is typing...
``` ## Installation > [!NOTE] > Available since UX Toolkit 3.5. ```shell php bin/console ux:install message --kit shadcn ``` ## Usage ```twig CN Olivia How can I help you today? Delivered ``` `Message` owns the row layout โ€” avatar, alignment, header and footer. Render the visible message surface inside it with `Bubble`. ## Examples ### Avatar Use `Message:Avatar` to render an avatar next to the message. Set `align="end"` on the message to align the avatar to the end of the conversation. ```twig
R The build failed during dependency installation. CN Can you share the exact error? R Here's the error from the logs Something went wrong with the build. The libraries are not installed correctly. Try running the build again.
``` ### Group Use `Message:Group` to stack consecutive messages from the same sender. Render an empty `Message:Avatar` on the earlier messages to keep them aligned with the avatar on the last one. ```twig
I checked the registry addresses. CN The component and example JSON now live under the UI registry.
``` ### Header and Footer Use `Message:Header` for a sender name and `Message:Footer` for metadata such as a delivery or read status. ```twig
Olivia I already checked the logs. Send the report to the team. Ping @shadcn if you need help.
Read Yesterday
``` ### Actions Place message-level actions in `Message:Footer`, such as copy, retry, or feedback buttons. ```twig
The install failure is coming from the workspace package. Okay drop me a link. Taking a look... Failed to send
``` ### Attachment Render an `Attachment` inside `Message:Content` to send a file or an image alongside the message. ```twig
Workspace Here's the image. Can you add it to the PDF? Use it for the cover page. Done. Here's the PDF with the image added as the cover page. sales-dashboard.pdf PDF ยท 2.4 MB Thanks. Looks good.
``` ### Markdown Render assistant text through a `ghost` bubble, so the response is unframed and can span the full width of the conversation. ```twig
How do I render markdown in a message?

Here's how to render markdown in a message:

  1. Render assistant text through Markdown.
  2. Keep user messages as plain text.
  3. Use a ghost bubble so the response is unframed.
``` ### RTL To enable RTL support, set the `dir="rtl"` attribute on the root element. ```twig
{# Arabic #}
R ุฃูˆู„ูŠููŠุง ูุดู„ ุงู„ุจู†ุงุก ุฃุซู†ุงุก ุชุซุจูŠุช ุงู„ุงุนุชู…ุงุฏูŠุงุช. CN ู‡ู„ ูŠู…ูƒู†ูƒ ู…ุดุงุฑูƒุฉ ุฑุณุงู„ุฉ ุงู„ุฎุทุฃ ุจุงู„ุถุจุทุŸ ุชู… ุงู„ุชุณู„ูŠู…
{# Hebrew #}
R ืื•ืœื™ื‘ื™ื” ื”ื‘ื ื™ื™ื” ื ื›ืฉืœื” ื‘ืžื”ืœืš ื”ืชืงื ืช ื”ืชืœื•ื™ื•ืช. CN ืชื•ื›ืœ ืœืฉืชืฃ ืืช ื”ื•ื“ืขืช ื”ืฉื’ื™ืื” ื”ืžื“ื•ื™ืงืช? ื ืžืกืจ
``` ## Accessibility - `Message`, `Message:Group` and every other part of this recipe render plain `
`s and add no role, so a message is announced as ordinary content: who sent it must be clear from `Message:Header` or the surrounding text, not from the alignment or the bubble colour. - The `data-align` attribute is a styling hook only and carries no semantics. `align="end"` reverses the visual row order but not the DOM order, so the reading order stays avatar-then-message in both directions. - Action buttons in `Message:Footer` are usually icon-only, so give each one an `aria-label`, e.g. ``. - An empty `Message:Avatar` used as a spacer in a `Message:Group` holds no text and needs no label: it is announced as nothing, which is the intent. - For an in-progress message such as "Oliver is typing...", use a `Marker` with `role="status"` so assistive tech announces the update as it appears. - For a conversation that receives messages after load, put `role="log"` on the container that wraps the messages so new ones are announced as they arrive. That container belongs to the consumer, not to this recipe. ## API Reference ### `` | Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | `align` | `'start'\|'end'` | `'start'` | The alignment of the message in the conversation. | | Block | Description | |:------|:------------| | `content` | The message row, typically includes `Message:Avatar` and `Message:Content`. | ### `` | Block | Description | |:------|:------------| | `content` | The avatar of the message sender, typically an `Avatar` component. | ### `` | Block | Description | |:------|:------------| | `content` | The message content, typically includes `Message:Header`, a `Bubble` and `Message:Footer`. | ### `` | Block | Description | |:------|:------------| | `content` | The content displayed below the message, such as a delivery status or message actions. | ### `` | Block | Description | |:------|:------------| | `content` | The grouped messages, typically multiple `Message` components from the same sender. | ### `` | Block | Description | |:------|:------------| | `content` | The content displayed above the message, such as the sender name. |