{"name":"message","title":"Message","description":"Displays a message in a conversation, with optional avatar, header, footer, and alignment.","installCommand":"bunx marko-ui add message -y","usageTags":"<Message>","importSnippet":"import Avatar from \"@/components/ui/avatar/avatar.marko\";\nimport Bubble from \"@/components/ui/bubble/bubble.marko\";\nimport BubbleContent from \"@/components/ui/bubble/bubble-content.marko\";\nimport Message from \"@/components/ui/message/message.marko\";\nimport MessageAvatar from \"@/components/ui/message/avatar.marko\";\nimport MessageContent from \"@/components/ui/message/content.marko\";","usageSnippet":"<Message>\n  <MessageAvatar>\n    <Avatar src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"CN\"/>\n  </MessageAvatar>\n  <MessageContent>\n    <Bubble>\n      <BubbleContent>How can I help you today?</BubbleContent>\n    </Bubble>\n  </MessageContent>\n</Message>","tags":["Message","MessageAvatar","MessageContent","MessageFooter","MessageGroup","MessageHeader"],"parts":[],"props":[{"name":"align","type":"'end' | 'start'","required":false}],"events":[],"keyboard":[],"accessibilityNotes":["`Message` is a presentational layout wrapper. Accessibility comes from the content you place inside it.","Action buttons in `MessageFooter` are usually icon-only, so give each one an `aria-label` (see the Actions example).","For in-progress messages, use [`Marker`](/docs/components/marker) with `role=\"status\"` so assistive tech announces the update as it appears (see the Demo example's typing indicator)."],"examples":[{"id":"message-demo","title":"Demo","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\nimport Bubble from \"@marko-ui/shadcn/ui/bubble/bubble.marko\";\nimport BubbleContent from \"@marko-ui/shadcn/ui/bubble/bubble-content.marko\";\nimport BubbleGroup from \"@marko-ui/shadcn/ui/bubble/bubble-group.marko\";\nimport BubbleReactions from \"@marko-ui/shadcn/ui/bubble/bubble-reactions.marko\";\nimport Marker from \"@marko-ui/shadcn/ui/marker/marker.marko\";\nimport MarkerContent from \"@marko-ui/shadcn/ui/marker/content.marko\";\nimport Message from \"@marko-ui/shadcn/ui/message/message.marko\";\nimport MessageAvatar from \"@marko-ui/shadcn/ui/message/avatar.marko\";\nimport MessageContent from \"@marko-ui/shadcn/ui/message/content.marko\";\nimport MessageFooter from \"@marko-ui/shadcn/ui/message/footer.marko\";\n\n<div class=\"flex w-full max-w-sm flex-col gap-6 py-12\">\n  <Message align=\"end\">\n    <MessageAvatar>\n      <Avatar src=\"https://github.com/shadcn.png\" alt=\"@me\" fallback=\"ME\"/>\n    </MessageAvatar>\n    <MessageContent>\n      <Bubble>\n        <BubbleContent>Deploying to prod real quick.</BubbleContent>\n      </Bubble>\n    </MessageContent>\n  </Message>\n  <Message>\n    <MessageAvatar>\n      <Avatar src=\"https://github.com/evilrabbit.png\" alt=\"@rabbit\" fallback=\"R\"/>\n    </MessageAvatar>\n    <MessageContent>\n      <Bubble variant=\"muted\">\n        <BubbleContent>It's 4:55 PM. On a Friday.</BubbleContent>\n      </Bubble>\n    </MessageContent>\n  </Message>\n  <Message align=\"end\">\n    <MessageAvatar>\n      <Avatar src=\"https://github.com/shadcn.png\" alt=\"@me\" fallback=\"ME\"/>\n    </MessageAvatar>\n    <MessageContent>\n      <Bubble>\n        <BubbleContent>It's a one-line change.</BubbleContent>\n      </Bubble>\n      <MessageFooter>Delivered</MessageFooter>\n    </MessageContent>\n  </Message>\n  <Message>\n    <MessageAvatar>\n      <Avatar src=\"https://github.com/evilrabbit.png\" alt=\"@rabbit\" fallback=\"R\"/>\n    </MessageAvatar>\n    <MessageContent>\n      <BubbleGroup>\n        <Bubble variant=\"muted\">\n          <BubbleContent>It's always a one-line change 😭.</BubbleContent>\n        </Bubble>\n        <Bubble variant=\"muted\">\n          <BubbleContent>Alright, let me take a look.</BubbleContent>\n          <BubbleReactions role=\"img\" aria-label=\"Reactions: thumbs up\">\n            <span>👍</span>\n          </BubbleReactions>\n        </Bubble>\n      </BubbleGroup>\n    </MessageContent>\n  </Message>\n  <Marker role=\"status\">\n    <MarkerContent class=\"shimmer\">\n      <span class=\"font-medium\">Oliver</span> is typing...\n    </MarkerContent>\n  </Marker>\n</div>","description":"A short exchange combining alignment, a footer status, a grouped reply with a reaction, and a typing `Marker`."},{"id":"message-avatar","title":"Avatar","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\nimport Bubble from \"@marko-ui/shadcn/ui/bubble/bubble.marko\";\nimport BubbleContent from \"@marko-ui/shadcn/ui/bubble/bubble-content.marko\";\nimport BubbleGroup from \"@marko-ui/shadcn/ui/bubble/bubble-group.marko\";\nimport Message from \"@marko-ui/shadcn/ui/message/message.marko\";\nimport MessageAvatar from \"@marko-ui/shadcn/ui/message/avatar.marko\";\nimport MessageContent from \"@marko-ui/shadcn/ui/message/content.marko\";\n\n<div class=\"flex w-full max-w-sm flex-col gap-6 py-12\">\n  <Message>\n    <MessageAvatar>\n      <Avatar src=\"https://github.com/leerob.png\" alt=\"@avatar\" fallback=\"R\"/>\n    </MessageAvatar>\n    <MessageContent>\n      <Bubble variant=\"muted\">\n        <BubbleContent>\n          The build failed during dependency installation.\n        </BubbleContent>\n      </Bubble>\n    </MessageContent>\n  </Message>\n  <Message align=\"end\">\n    <MessageAvatar>\n      <Avatar src=\"https://github.com/shadcn.png\" alt=\"@avatar\" fallback=\"R\"/>\n    </MessageAvatar>\n    <MessageContent>\n      <Bubble>\n        <BubbleContent>Can you share the exact error?</BubbleContent>\n      </Bubble>\n    </MessageContent>\n  </Message>\n  <Message>\n    <MessageAvatar>\n      <Avatar src=\"https://github.com/leerob.png\" alt=\"@avatar\" fallback=\"R\"/>\n    </MessageAvatar>\n    <MessageContent>\n      <BubbleGroup>\n        <Bubble variant=\"muted\">\n          <BubbleContent>Here's the error from the logs</BubbleContent>\n        </Bubble>\n        <Bubble variant=\"muted\">\n          <BubbleContent>\n            Something went wrong with the build. The libraries are not\n            installed correctly. Try running the build again.\n          </BubbleContent>\n        </Bubble>\n      </BubbleGroup>\n    </MessageContent>\n  </Message>\n</div>","description":"`MessageAvatar` renders next to the message; set `align=\"end\"` on `Message` to move the avatar to the end of the row."},{"id":"message-group","title":"Group","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\nimport Bubble from \"@marko-ui/shadcn/ui/bubble/bubble.marko\";\nimport BubbleContent from \"@marko-ui/shadcn/ui/bubble/bubble-content.marko\";\nimport Message from \"@marko-ui/shadcn/ui/message/message.marko\";\nimport MessageAvatar from \"@marko-ui/shadcn/ui/message/avatar.marko\";\nimport MessageContent from \"@marko-ui/shadcn/ui/message/content.marko\";\nimport MessageGroup from \"@marko-ui/shadcn/ui/message/group.marko\";\n\n<div class=\"flex w-full max-w-sm flex-col gap-6 py-12\">\n  <MessageGroup>\n    <Message>\n      <MessageAvatar/>\n      <MessageContent>\n        <Bubble variant=\"muted\">\n          <BubbleContent>I checked the registry addresses.</BubbleContent>\n        </Bubble>\n      </MessageContent>\n    </Message>\n    <Message>\n      <MessageAvatar>\n        <Avatar src=\"https://github.com/evilrabbit.png\" alt=\"@avatar\" fallback=\"CN\"/>\n      </MessageAvatar>\n      <MessageContent>\n        <Bubble variant=\"muted\">\n          <BubbleContent>\n            The component and example JSON now live under the UI registry.\n          </BubbleContent>\n        </Bubble>\n      </MessageContent>\n    </Message>\n  </MessageGroup>\n</div>","description":"`MessageGroup` stacks consecutive messages from the same sender. Render an empty `MessageAvatar` on the earlier messages to keep them aligned with the avatar on the last one."},{"id":"message-header-footer","title":"Header and Footer","source":"import Bubble from \"@marko-ui/shadcn/ui/bubble/bubble.marko\";\nimport BubbleContent from \"@marko-ui/shadcn/ui/bubble/bubble-content.marko\";\nimport Message from \"@marko-ui/shadcn/ui/message/message.marko\";\nimport MessageContent from \"@marko-ui/shadcn/ui/message/content.marko\";\nimport MessageFooter from \"@marko-ui/shadcn/ui/message/footer.marko\";\nimport MessageHeader from \"@marko-ui/shadcn/ui/message/header.marko\";\n\n<div class=\"flex w-full max-w-sm flex-col gap-8 py-12\">\n  <Message>\n    <MessageContent>\n      <MessageHeader>Olivia</MessageHeader>\n      <Bubble variant=\"muted\">\n        <BubbleContent>I already checked the logs.</BubbleContent>\n      </Bubble>\n    </MessageContent>\n  </Message>\n  <Message align=\"end\">\n    <MessageContent>\n      <Bubble>\n        <BubbleContent>\n          Send the report to the team. Ping @shadcn if you need help.\n        </BubbleContent>\n      </Bubble>\n      <MessageFooter>\n        <div>\n          Read <span class=\"font-normal\">Yesterday</span>\n        </div>\n      </MessageFooter>\n    </MessageContent>\n  </Message>\n</div>","description":"`MessageHeader` renders a sender name; `MessageFooter` renders metadata such as a delivery or read status."},{"id":"message-actions","title":"Actions","source":"import Bubble from \"@marko-ui/shadcn/ui/bubble/bubble.marko\";\nimport BubbleContent from \"@marko-ui/shadcn/ui/bubble/bubble-content.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\nimport Message from \"@marko-ui/shadcn/ui/message/message.marko\";\nimport MessageContent from \"@marko-ui/shadcn/ui/message/content.marko\";\nimport MessageFooter from \"@marko-ui/shadcn/ui/message/footer.marko\";\n\n<div class=\"flex w-full max-w-sm flex-col gap-8 py-12\">\n  <Message>\n    <MessageContent>\n      <Bubble variant=\"muted\">\n        <BubbleContent>\n          The install failure is coming from the workspace package.\n        </BubbleContent>\n      </Bubble>\n      <MessageFooter>\n        <Button type=\"button\" variant=\"ghost\" size=\"icon\" aria-label=\"Copy\" title=\"Copy\">\n          <Icon name=\"Copy\"/>\n        </Button>\n        <Button type=\"button\" variant=\"ghost\" size=\"icon\" aria-label=\"Like\" title=\"Like\">\n          <Icon name=\"ThumbsUpIcon\"/>\n        </Button>\n        <Button type=\"button\"\n          variant=\"ghost\"\n          size=\"icon\"\n          aria-label=\"Dislike\"\n          title=\"Dislike\"\n        >\n          <Icon name=\"ThumbsDownIcon\"/>\n        </Button>\n      </MessageFooter>\n    </MessageContent>\n  </Message>\n  <Message align=\"end\">\n    <MessageContent>\n      <Bubble>\n        <BubbleContent>Okay drop me a link. Taking a look...</BubbleContent>\n      </Bubble>\n      <MessageFooter class=\"gap-2\">\n        <span class=\"font-normal text-destructive\">Failed to send</span>\n        <Button type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-xs\"\n          title=\"Retry\"\n          aria-label=\"Retry\"\n        >\n          <Icon name=\"RefreshCcwIcon\"/>\n        </Button>\n      </MessageFooter>\n    </MessageContent>\n  </Message>\n</div>","description":"Place message-level actions in `MessageFooter`, such as copy, like, dislike, or retry buttons."},{"id":"message-attachment","title":"Attachment","source":"import Attachment from \"@marko-ui/shadcn/ui/attachment/attachment.marko\";\nimport AttachmentAction from \"@marko-ui/shadcn/ui/attachment/action.marko\";\nimport AttachmentActions from \"@marko-ui/shadcn/ui/attachment/actions.marko\";\nimport AttachmentContent from \"@marko-ui/shadcn/ui/attachment/content.marko\";\nimport AttachmentDescription from \"@marko-ui/shadcn/ui/attachment/description.marko\";\nimport AttachmentMedia from \"@marko-ui/shadcn/ui/attachment/media.marko\";\nimport AttachmentTitle from \"@marko-ui/shadcn/ui/attachment/title.marko\";\nimport Bubble from \"@marko-ui/shadcn/ui/bubble/bubble.marko\";\nimport BubbleContent from \"@marko-ui/shadcn/ui/bubble/bubble-content.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\nimport Message from \"@marko-ui/shadcn/ui/message/message.marko\";\nimport MessageContent from \"@marko-ui/shadcn/ui/message/content.marko\";\n\n<div class=\"flex w-full max-w-sm flex-col gap-8 py-12\">\n  <Message align=\"end\">\n    <MessageContent>\n      <Attachment orientation=\"vertical\">\n        <AttachmentMedia variant=\"image\">\n          <img\n            src=\"https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80\"\n            alt=\"Workspace\"\n          />\n        </AttachmentMedia>\n      </Attachment>\n      <Bubble>\n        <BubbleContent>\n          Here's the image. Can you add it to the PDF? Use it for the cover\n          page.\n        </BubbleContent>\n      </Bubble>\n    </MessageContent>\n  </Message>\n  <Message>\n    <MessageContent>\n      <Bubble variant=\"muted\">\n        <BubbleContent>\n          Done. Here's the PDF with the image added as the cover page.\n        </BubbleContent>\n      </Bubble>\n      <Attachment>\n        <AttachmentMedia>\n          <Icon name=\"FileTextIcon\"/>\n        </AttachmentMedia>\n        <AttachmentContent>\n          <AttachmentTitle>sales-dashboard.pdf</AttachmentTitle>\n          <AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>\n        </AttachmentContent>\n        <AttachmentActions>\n          <AttachmentAction\n            type=\"button\"\n            title=\"Download\"\n            aria-label=\"Download\"\n            size=\"icon-sm\"\n            variant=\"secondary\"\n          >\n            <Icon name=\"DownloadIcon\"/>\n          </AttachmentAction>\n        </AttachmentActions>\n      </Attachment>\n    </MessageContent>\n  </Message>\n  <Message align=\"end\">\n    <MessageContent>\n      <Bubble>\n        <BubbleContent>Thanks. Looks good.</BubbleContent>\n      </Bubble>\n    </MessageContent>\n  </Message>\n</div>","description":"Pair `Message` with [`Attachment`](/docs/components/attachment) to show images and files alongside a bubble."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","requires":["avatar","bubble"],"nativeAttributes":"div","subcomponents":[{"name":"avatar","props":[],"nativeAttributes":"div"},{"name":"content","props":[],"nativeAttributes":"div"},{"name":"footer","props":[],"nativeAttributes":"div"},{"name":"group","props":[],"nativeAttributes":"div"},{"name":"header","props":[],"nativeAttributes":"div"}],"composition":"`Message` owns the row layout: avatar, alignment, header, and footer. Render\nthe visible message surface inside it with\n[`Bubble`](/docs/components/bubble). For the scroll container around a whole\nconversation, use [`MessageScroller`](/docs/components/message-scroller).\n\n```text\nMessage\n├── MessageAvatar\n└── MessageContent\n    ├── MessageHeader\n    ├── Bubble\n    └── MessageFooter\n```\n\nUse `MessageGroup` to stack consecutive messages from the same sender:\n\n```text\nMessageGroup\n├── Message\n└── Message\n```"}