/* ============================================================ Wii Event Wireframe — Wii Agent (06) Live-feel AI chat demo: staggered bubbles, typing indicator, recommendation cards slide in. Replayable via prompt chips. ============================================================ */ const AGENT_SCRIPTS = { outdoor: { chip: "Outdoor · 100 guests", user: "I need a private outdoor event for 100 guests with lights, tables, a DJ corner, and elegant decoration.", intro: "Great — an elegant outdoor evening for 100. Based on your brief, here's a Premium Outdoor Setup:", bundleTitle: "Premium Outdoor Setup", bundle: ["Lounge furniture", "Cocktail tables ×12", "Ambient lighting rig", "DJ booth + sound system", "Floral decoration", "Delivery & installation"], stats: ["100 Guest Capacity", "Lighting + Sound", "Delivery & Installation"], budget: "$6,200 – $8,400", timeline: "1-day build · evening event", outro: "Want me to turn this into a quote, or adjust the style?", }, birthday: { chip: "Birthday · 80 guests", user: "I'm organizing a birthday party for 80 people at an outdoor villa. Elegant, with lighting, tables, chairs, a small DJ setup, and decoration.", intro: "Lovely — an elegant villa birthday for 80. Here's a setup that fits that mood:", bundleTitle: "Elegant Villa Birthday", bundle: ["80 chairs + 10 round tables", "Warm festoon + uplighting", "Compact DJ + speakers", "Balloon & floral styling", "Lounge corner", "Setup & teardown"], stats: ["80 Guest Capacity", "Ambient Lighting", "Rent + Install"], budget: "$3,900 – $5,300", timeline: "Half-day build · same-day teardown", outro: "I can add a photo booth or catering equipment — want me to?", }, }; function TypingDots() { return ( {[0, 1, 2].map((i) => ( ))} ); } function Bubble({ from, children, delay = 0 }) { const isUser = from === "user"; return (
{!isUser && ( )}
{children}
); } function WiiAgent() { const [scriptKey, setScriptKey] = useState("outdoor"); const [phase, setPhase] = useState(0); // 0 idle,1 user,2 typing,3 intro,4 cards,5 outro const startedRef = useRef(false); const timers = useRef([]); const scrollRef = useRef(null); const s = AGENT_SCRIPTS[scriptKey]; const clearTimers = () => { timers.current.forEach(clearTimeout); timers.current = []; }; const at = (ms, fn) => timers.current.push(setTimeout(fn, ms)); const play = (key) => { clearTimers(); if (key) setScriptKey(key); setPhase(0); at(250, () => setPhase(1)); // user msg at(1100, () => setPhase(2)); // typing at(2400, () => setPhase(3)); // intro at(3100, () => setPhase(4)); // cards at(4600, () => setPhase(5)); // outro }; // autoplay on first view const rootRef = useRef(null); useEffect(() => { const el = rootRef.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !startedRef.current) { startedRef.current = true; play(); } }); }, { threshold: 0.3 }); io.observe(el); return () => { io.disconnect(); clearTimers(); }; }, []); useLucide(); useEffect(() => { // keep latest message in view inside the chat panel const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [phase, scriptKey]); return (
{/* LEFT — pitch */} AI event planner

Plan your event
with Wii Agent.

Describe your event in a few words and let Wii Agent suggest the right equipment, services, layouts, and setup options — then turn it into a quote.

{[["message-square-text", "Describe it in plain language"], ["wand-sparkles", "Get a tailored equipment bundle"], ["receipt-text", "Budget range + quote, instantly"]].map(([ic, tx]) => ( {tx} ))}
{/* RIGHT — chat mock */}
{/* AI glow */}
{/* header */}
Wii Agent Online ◆ Demo · replace with live AI
{/* messages */}
{phase >= 1 && {s.user}} {phase === 2 && (
)} {phase >= 3 && {s.intro}} {phase >= 4 && (
{/* bundle card */}
{s.bundleTitle} Quote ready
{s.bundle.map((b) => ( {b} ))}
{/* stat chips */}
{s.stats.map((st) => ( {st} ))}
{/* budget + timeline */}
Est. budget
{s.budget}
Timeline
{s.timeline}
)} {phase >= 5 && {s.outro}}
{/* input + quick prompts */}
{Object.entries(AGENT_SCRIPTS).map(([k, v]) => ( ))}
Describe your event…
); } Object.assign(window, { WiiAgent });