{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-message-2","type":"registry:block","title":"Avatars on both sides","description":"Bottom-anchored avatars that flip with the row, plus a presence dot.","dependencies":[],"registryDependencies":["avatar","bubble","message"],"files":[{"path":"c-message-2.tsx","type":"registry:block","content":"import {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Bubble, BubbleContent } from \"@/components/ui/bubble\"\nimport {\n  Message,\n  MessageAvatar,\n  MessageContent,\n} from \"@/components/ui/message\"\n\n/*\n * Hoisted because each person speaks twice. Repeating a 90-character URL per\n * turn is how a thread ends up rendering two crops of one face.\n */\nconst MICHAEL_AVATAR =\n  \"https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?w=96&h=96&dpr=2&q=80\"\nconst SARAH_AVATAR =\n  \"https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80\"\n\n/*\n * MessageAvatar is self-end, so the third message runs long on purpose: a\n * wrapped turn is the only state in which the bottom anchoring is visible.\n */\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto flex w-full max-w-sm flex-col gap-6\">\n      <Message>\n        {/*\n          MessageAvatar is a circular clip the size of the portrait, so a badge\n          in its square corner loses half of itself. Badged rows opt out of it.\n        */}\n        <MessageAvatar className=\"overflow-visible\">\n          <Avatar>\n            <AvatarImage src={MICHAEL_AVATAR} alt=\"Michael Rodriguez\" />\n            <AvatarFallback>MR</AvatarFallback>\n            {/*\n              Presence would be colour-only without the label, so the dot keeps\n              its own sr-only text.\n            */}\n            <AvatarBadge className=\"bg-green-500\">\n              <span className=\"sr-only\">Online</span>\n            </AvatarBadge>\n          </Avatar>\n        </MessageAvatar>\n        <MessageContent>\n          <Bubble variant=\"muted\">\n            <BubbleContent>\n              eu-west checkout is timing out. It started around 14:05.\n            </BubbleContent>\n          </Bubble>\n        </MessageContent>\n      </Message>\n\n      <Message align=\"end\">\n        <MessageAvatar>\n          <Avatar>\n            <AvatarImage src={SARAH_AVATAR} alt=\"Sarah Chen\" />\n            <AvatarFallback>SC</AvatarFallback>\n          </Avatar>\n        </MessageAvatar>\n        <MessageContent>\n          <Bubble>\n            <BubbleContent>\n              Looking now. Is it every request or one route?\n            </BubbleContent>\n          </Bubble>\n        </MessageContent>\n      </Message>\n\n      <Message>\n        <MessageAvatar className=\"overflow-visible\">\n          <Avatar>\n            <AvatarImage src={MICHAEL_AVATAR} alt=\"Michael Rodriguez\" />\n            <AvatarFallback>MR</AvatarFallback>\n            <AvatarBadge className=\"bg-green-500\">\n              <span className=\"sr-only\">Online</span>\n            </AvatarBadge>\n          </Avatar>\n        </MessageAvatar>\n        <MessageContent>\n          <Bubble variant=\"muted\">\n            <BubbleContent>\n              Only POST /api/checkout/confirm. p95 went from 240ms to 3.1s and\n              the error rate is sitting at 4.2 percent. Every other route in the\n              region is flat.\n            </BubbleContent>\n          </Bubble>\n        </MessageContent>\n      </Message>\n\n      <Message align=\"end\">\n        <MessageAvatar>\n          <Avatar>\n            <AvatarImage src={SARAH_AVATAR} alt=\"Sarah Chen\" />\n            <AvatarFallback>SC</AvatarFallback>\n          </Avatar>\n        </MessageAvatar>\n        <MessageContent>\n          <Bubble>\n            <BubbleContent>\n              Pulling the traces for that window now.\n            </BubbleContent>\n          </Bubble>\n        </MessageContent>\n      </Message>\n    </div>\n  )\n}","target":"components/examples/c-message-2.tsx"}],"meta":{"order":2,"gridSize":2}}