"use client"; import { useEffect, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { MessageCircle, X, Send } from "lucide-react"; import { cn } from "@/lib/utils"; interface CannedMessage { from: "bot" | "user"; text: string; } const SCRIPT: CannedMessage[] = [ { from: "bot", text: "Hey there! How can we help you today?" }, { from: "user", text: "Does Lumenite support Tailwind v4?" }, { from: "bot", text: "Yes, every component ships with v4 tokens out of the box." }, ]; function TypingDots() { return ( {[0, 1, 2].map((i) => ( ))} ); } export function ChatBubble({ className }: { className?: string }) { const [open, setOpen] = useState(false); const [visible, setVisible] = useState([]); const [typing, setTyping] = useState(false); useEffect(() => { if (!open) return; setVisible([]); let cancelled = false; async function play() { for (const msg of SCRIPT) { if (cancelled) return; if (msg.from === "bot") { setTyping(true); await new Promise((r) => setTimeout(r, 700)); if (cancelled) return; setTyping(false); } else { await new Promise((r) => setTimeout(r, 500)); } if (cancelled) return; setVisible((prev) => [...prev, msg]); } } play(); return () => { cancelled = true; }; }, [open]); return (

{open && (

Lumenite Support

{visible.map((msg, i) => ( {msg.text} ))} {typing && (

)}

)} setOpen((v) => !v)} whileTap={{ scale: 0.92 }} whileHover={{ scale: 1.05 }} className="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-brand to-glow text-white shadow-[0_10px_30px_rgba(124,108,255,0.4)]" > {open ? : }

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

); }

Chat Bubble