{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-empty-17","type":"registry:block","title":"No messages empty state with chat bubbles illustration","description":"No messages empty state with chat bubbles illustration","dependencies":[],"registryDependencies":["button","empty"],"files":[{"path":"c-empty-17.tsx","type":"registry:block","content":"import { Button } from \"@/components/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\"\n\nfunction ChatIllustration() {\n  return (\n    <svg\n      width=\"180\"\n      height=\"120\"\n      viewBox=\"0 0 180 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      {/* Left bubble */}\n      <rect\n        x=\"20\"\n        y=\"20\"\n        width=\"80\"\n        height=\"44\"\n        rx=\"12\"\n        className=\"fill-muted dark:fill-muted/60 stroke-border\"\n        strokeWidth=\"1.5\"\n      />\n      {/* Left bubble tail */}\n      <path\n        d=\"M36 64 L32 76 L48 64\"\n        className=\"fill-muted dark:fill-muted/60 stroke-border\"\n        strokeWidth=\"1.5\"\n        strokeLinejoin=\"round\"\n      />\n      {/* Left bubble text lines */}\n      <rect\n        x=\"32\"\n        y=\"32\"\n        width=\"48\"\n        height=\"4\"\n        rx=\"2\"\n        className=\"fill-muted-foreground/20\"\n      />\n      <rect\n        x=\"32\"\n        y=\"42\"\n        width=\"36\"\n        height=\"4\"\n        rx=\"2\"\n        className=\"fill-muted-foreground/15\"\n      />\n      {/* Left bubble avatar dot */}\n      <circle cx=\"32\" cy=\"52\" r=\"3\" className=\"fill-muted-foreground/12\" />\n\n      {/* Right bubble */}\n      <rect\n        x=\"80\"\n        y=\"50\"\n        width=\"80\"\n        height=\"40\"\n        rx=\"12\"\n        className=\"fill-primary/10 dark:fill-primary/15 stroke-primary/30\"\n        strokeWidth=\"1.5\"\n      />\n      {/* Right bubble tail */}\n      <path\n        d=\"M144 90 L148 100 L132 90\"\n        className=\"fill-primary/10 dark:fill-primary/15 stroke-primary/30\"\n        strokeWidth=\"1.5\"\n        strokeLinejoin=\"round\"\n      />\n      {/* Right bubble text lines */}\n      <rect\n        x=\"92\"\n        y=\"62\"\n        width=\"52\"\n        height=\"4\"\n        rx=\"2\"\n        className=\"fill-primary/20\"\n      />\n      <rect\n        x=\"92\"\n        y=\"72\"\n        width=\"32\"\n        height=\"4\"\n        rx=\"2\"\n        className=\"fill-primary/15\"\n      />\n\n      {/* Decorative dots */}\n      <circle cx=\"14\" cy=\"46\" r=\"2\" className=\"fill-muted-foreground/10\" />\n      <circle cx=\"168\" cy=\"66\" r=\"2\" className=\"fill-primary/15\" />\n      <circle cx=\"110\" cy=\"16\" r=\"2.5\" className=\"fill-muted-foreground/10\" />\n    </svg>\n  )\n}\n\nexport function Pattern() {\n  return (\n    <div className=\"flex items-center justify-center p-4\">\n      <Empty className=\"py-12\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <ChatIllustration />\n          </EmptyMedia>\n          <EmptyTitle>No messages yet</EmptyTitle>\n          <EmptyDescription>\n            Start a conversation with your team. Messages will appear here.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Send a message</Button>\n        </EmptyContent>\n      </Empty>\n    </div>\n  )\n}","target":"components/examples/c-empty-17.tsx"}],"meta":{"order":17}}