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; 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-neutral-100 p-6">
<WhatsAppChat
contact={{
name: "Emma Walsh",
avatar:
"https://cdn.21st.dev/assets/mirror/61/6185acb0a3b13e1a809a4bc7f2d50d29759674f24dfb552e4035484f3bea91a1.jpg",
}}
messages={messages}
autoPlay="mount"
loop
/>
</div>
);
};
// Same component, other content: no avatar (initials), German labels, incoming file
const germanMessages: ChatMessage[] = [
{ from: "them", time: "14:20", text: "Hallo! Hier ist die Rechnung für März." },
{
from: "them",
time: "14:20",
file: { name: "Rechnung_2026-03.pdf", meta: "1 Seite · PDF · 180 KB" },
},
{ from: "me", time: "14:22", text: "Danke, ist angekommen! Überweise ich heute noch." },
];
function DemoTwo() {
return (
<div className="flex min-h-[44rem] w-full items-center justify-center bg-neutral-100 p-6">
<WhatsAppChat
contact={{ name: "Studio Nord" }}
messages={germanMessages}
labels={{ online: "online", typing: "schreibt …", today: "Heute" }}
autoPlay="mount"
loop
/>
</div>
);
};
export default DemoTwo;
