No messages empty state with chat bubbles illustration

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
</script>

<template>
  <div class="flex items-center justify-center p-4">
    <Empty class="py-12">
      <EmptyHeader>
        <EmptyMedia>
          <svg width="180" height="120" viewBox="0 0 180 120" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <rect x="20" y="20" width="80" height="44" rx="12" class="fill-muted dark:fill-muted/60 stroke-border" stroke-width="1.5" />
            <path d="M36 64 L32 76 L48 64" class="fill-muted dark:fill-muted/60 stroke-border" stroke-width="1.5" stroke-linejoin="round" />
            <rect x="32" y="32" width="48" height="4" rx="2" class="fill-muted-foreground/20" />
            <rect x="32" y="42" width="36" height="4" rx="2" class="fill-muted-foreground/15" />
            <circle cx="32" cy="52" r="3" class="fill-muted-foreground/12" />

            <rect x="80" y="50" width="80" height="40" rx="12" class="fill-primary/10 dark:fill-primary/15 stroke-primary/30" stroke-width="1.5" />
            <path d="M144 90 L148 100 L132 90" class="fill-primary/10 dark:fill-primary/15 stroke-primary/30" stroke-width="1.5" stroke-linejoin="round" />
            <rect x="92" y="62" width="52" height="4" rx="2" class="fill-primary/20" />
            <rect x="92" y="72" width="32" height="4" rx="2" class="fill-primary/15" />

            <circle cx="14" cy="46" r="2" class="fill-muted-foreground/10" />
            <circle cx="168" cy="66" r="2" class="fill-primary/15" />
            <circle cx="110" cy="16" r="2.5" class="fill-muted-foreground/10" />
          </svg>
        </EmptyMedia>
        <EmptyTitle>No messages yet</EmptyTitle>
        <EmptyDescription>
          Start a conversation with your team. Messages will appear here.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Send a message</Button>
      </EmptyContent>
    </Empty>
  </div>
</template>