"use client"; import { useEffect, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Phone, Video, Plus, ArrowUp, CheckCheck } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE = [0.16, 1, 0.3, 1] as const; type Sender = "them" | "me"; interface Line { from: Sender; text: string; time: string; } interface Msg extends Line { id: number; } interface Person { name: string; initials: string; gradient: string; } const MAYA: Person = { name: "Maya Rivera", initials: "MR", gradient: "bg-gradient-to-br from-[#7c6cff] to-[#5b8cff]", }; const ME: Person = { name: "Jordan Lee", initials: "JL", gradient: "bg-gradient-to-br from-[#3f3f56] to-[#6b6b8c]", }; const THREAD: Line[] = [ { from: "them", text: "Morning! Did the onboarding flow make it in overnight?", time: "9:41 AM" }, { from: "me", text: "Merged it around six. Staging is looking clean.", time: "9:41 AM" }, { from: "them", text: "The new empty state feels so much friendlier now.", time: "9:42 AM" }, { from: "me", text: "Took three passes to land the copy. Worth it.", time: "9:43 AM" }, { from: "them", text: "Design is going to love this. Can we demo Thursday?", time: "9:44 AM" }, { from: "me", text: "Booked the room, I'll prep a short walkthrough.", time: "9:45 AM" }, { from: "them", text: "You're a lifesaver. Coffee is on me.", time: "9:46 AM" }, { from: "me", text: "Deal. See you at ten.", time: "9:47 AM" }, ]; const SEED_COUNT = 3; const MAX_VISIBLE = 5; function Avatar({ person, size = 28, className, }: { person: Person; size?: number; className?: string; }) { return (

{person.initials}

); } function TypingDots() { return ( {[0, 1, 2].map((i) => ( ))} ); } export function ChatThread({ className }: { className?: string }) { const [messages, setMessages] = useState([]); const [typing, setTyping] = useState(false); useEffect(() => { let cancelled = false; const timers: ReturnType[] = []; const wait = (ms: number) => new Promise((resolve) => { timers.push(setTimeout(resolve, ms)); }); let idc = 0; setMessages(THREAD.slice(0, SEED_COUNT).map((line) => ({ ...line, id: idc++ }))); let cursor = SEED_COUNT; async function run() { await wait(1700); while (!cancelled) { const line = THREAD[cursor % THREAD.length]; if (line.from === "them") { setTyping(true); await wait(1500); if (cancelled) return; setTyping(false); } else { await wait(900); if (cancelled) return; } const next: Msg = { ...line, id: idc++ }; setMessages((prev) => { const grown = [...prev, next]; return grown.length > MAX_VISIBLE ? grown.slice(grown.length - MAX_VISIBLE) : grown; }); cursor += 1; await wait(line.from === "them" ? 1900 : 1500); } } run(); return () => { cancelled = true; timers.forEach(clearTimeout); }; }, []); return (

{/* Header */}

{MAYA.name}

Active now

{/* Messages */}

{messages.map((m) => { const mine = m.from === "me"; return (

{m.text}

{m.time} {mine && }

); })} {typing && (

)}

{/* Composer */}

); } export default function Demo() { return (

); }

Chat Thread