An animated iOS-style messenger chat that plays a conversation: typing in the composer, sending, file uploads with progress bar, typing indicator and read receipts. Pass your own contact, avatar and messages; themed with shadcn CSS variables for light and dark mode, plays when scrolled into view, can loop and respects reduced motion.
"use client";
import { WhatsAppChat, type ChatMessage } from "@/components/ui/whatsapp-chat";
// Keep the array outside the component (or memoize it) – a new array restarts the playback.
const messages: ChatMessage[] = [
{ from: "me", time: "10:02", text: "Hi Emma! Quick question about the new landing page 👋" },
{ from: "them", time: "10:03", text: "Hey! Sure, what's up?" },
{ from: "me", time: "10:04", text: "Here's the brief with all the sections we discussed." },
{
from: "me",
time: "10:04",
file: { name: "Landing_Page_Brief.pdf", meta: "6 pages · PDF · 2.4 MB" },
},
{
from: "them",
time: "10:06",
text: "Got it, thanks! Looks great. I'll send you the first draft by Friday.",
},
{ from: "me", time: "10:06", text: "Perfect, talk soon 🙌" },
];
function DemoOne() {
return (
<div className="flex min-h-[44rem] w-full items-center justify-center bg-background p-6">
<WhatsAppChat
contact={{
name: "Emma Walsh",
avatar:
"https://cdn.21st.dev/assets/mirror/61/6185acb0a3b13e1a809a4bc7f2d50d29759674f24dfb552e4035484f3bea91a1.jpg",
}}
messages={messages}
autoPlay="mount"
loop
/>
</div>
);
}
export default DemoOne;
