Message Bubble

Chat bubble with an avatar and timestamp. Role flips alignment and color.

AK
Hey, did you get a chance to look at the new onboarding flow?
09:42

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Chat1 } from "@/components/beste/piece/chat1";

<Chat1
  avatarSrc="https://images.unsplash.com/photo-1573140247632-f8fd74997d5c?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjI0fHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
  avatarAlt="Ayşe Kaya"
  fallback="AK"
  message="Hey, did you get a chance to look at the new onboarding flow?"
  timestamp="09:42"
  role="received"
/>