// demo.jsx — interactive "Try it yourself" demo: auto-populated setup → customer view + business view
// Requires React, ios-frame.jsx, chat-ui.jsx loaded first.
const Demo = (() => {
const { useState, useEffect, useRef } = React;
// ── Example (gym) content — fictional ─────────────────────
const GYM = {
name: "Iron Peak Fitness",
website: "https://ironpeakfitness.com",
context:
"Iron Peak Fitness is a full-service gym in Austin, TX. We're open Mon-Fri 5am-10pm, Sat-Sun 8am-6pm. We offer group classes (HIIT, yoga, spin, strength), personal training ($85/session), and drop-in visits ($20/day). Membership starts at $49/month. We have free parking, showers, and a smoothie bar. Our team of certified trainers is available for consultations by appointment.",
zip: "78701",
number: "(XXX) 555-0123",
};
const FILES = [
{ name: "iron-peak-faq.pdf", size: "184 KB" },
{ name: "class-schedule.docx", size: "92 KB" },
];
// ── Customer-view Q&A ─────────────────────────────────────
const QUESTIONS = [
{
q: "What are your hours?",
a: "We're open Mon-Fri 5am-10pm and Sat-Sun 8am-6pm. Come by anytime!",
typingMs: 1300,
},
{
q: "How much is a day pass?",
a: "Drop-in visits are just $20/day. No reservation needed - walk right in!",
typingMs: 1200,
},
{
q: "Do you offer personal training?",
a: "Absolutely! Personal training is $85/session with one of our certified trainers. Want me to grab you a consultation slot?",
typingMs: 1900,
},
{
q: "What classes do you have?",
a: "We offer HIIT, yoga, spin, and strength classes throughout the week. I can send you the full schedule if you'd like!",
typingMs: 1600,
},
];
// ── Business-view mock data ───────────────────────────────
const CONVOS = [
{
initials: "MD", name: "Marcus D.", snippet: "do you do corporate memberships?", time: "1m",
phone: "(512) 555-0184", unread: true,
thread: [
{ from: "them", text: "hi! do you do corporate memberships? id like to set something up for my office" },
{ from: "me", text: "We do! Want to schedule a time for someone on our membership team to give you a call?" },
{ from: "them", text: "anything before 5pm works" },
{ from: "me", text: "Perfect - someone will give you a ring shortly. Talk soon!" },
],
},
{
initials: "SM", name: "Sarah M.", snippet: "is there parking at the gym?", time: "2m",
phone: "(512) 555-4821",
thread: [
{ from: "them", text: "is there parking at the gym?" },
{ from: "me", text: "Yes! We have a free parking lot right next to the building - plenty of spots even during peak hours. \uD83D\uDE97" },
{ from: "them", text: "great, im thinking of joining. how much is membership" },
{ from: "me", text: "Membership starts at $49/month, no contracts required. Want me to tell you about what's included?" },
{ from: "them", text: "all good, ill just stop by this week to check it out" },
{ from: "me", text: "Sounds great - see you soon!" },
],
},
{
initials: "JK", name: "James K.", snippet: "do you have locker rooms", time: "14m",
phone: "(512) 555-3387",
thread: [
{ from: "them", text: "do you have locker rooms" },
{ from: "me", text: "We do - full locker rooms with showers, plus towels at the front desk. Just bring a lock or rent one for $1." },
{ from: "them", text: "perfect thanks" },
],
},
{
initials: "PL", name: "Priya L.", snippet: "can i pause my membership?", time: "1h",
phone: "(512) 555-9054",
thread: [
{ from: "them", text: "can i pause my membership?" },
{ from: "me", text: "Yes, you can pause for up to 3 months once per year at no charge. Want me to set that up for you?" },
{ from: "them", text: "yes please, starting next month" },
{ from: "me", text: "Done - your membership will pause starting July 1 and resume automatically. You'll get a text confirmation shortly." },
{ from: "them", text: "awesome, thank you!!" },
],
},
{
initials: "TB", name: "Tom B.", snippet: "whats the cancellation policy", time: "3h",
phone: "(512) 555-7712",
thread: [
{ from: "them", text: "whats the cancellation policy" },
{ from: "me", text: "No contracts here - you can cancel anytime from your account or by texting us. No fees, no questions." },
],
},
{
initials: "AR", name: "Alyssa R.", snippet: "do u offer student discounts", time: "1d",
phone: "(512) 555-2240",
thread: [
{ from: "them", text: "do u offer student discounts" },
{ from: "me", text: "We do - students get 20% off any membership with a valid ID. That brings the base plan to $39/month." },
{ from: "them", text: "sweet, what do i need to bring?" },
{ from: "me", text: "Just a valid student ID and you're all set!" },
],
},
];
const CheckIcon = () => (
);
const FileGlyph = () => (
);
const PhoneGlyph = ({ size = 18 }) => (
);
// ── Phase 1: auto-populating setup form ───────────────────
function SetupForm({ onLaunch }) {
const [name, setName] = useState("");
const [website, setWebsite] = useState("");
const [context, setContext] = useState("");
const [zip, setZip] = useState("");
const [fileCount, setFileCount] = useState(0);
const [ready, setReady] = useState(false);
const [promptStage, setPromptStage] = useState(-1);
// `pleases` retired — the escalating "please please please" badges
// on the Try button read as needy / try-hard. Variable kept declared
// as a no-op so the schedule below doesn't crash if anything still
// references it.
const pleases = 0;
const started = useRef(false);
const timers = useRef([]);
const cardRef = useRef(null);
useEffect(() => () => timers.current.forEach(clearTimeout), []);
useEffect(() => {
const el = cardRef.current;
if (!el) return;
const check = () => {
if (started.current) return;
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
const visible = Math.min(r.bottom, vh) - Math.max(r.top, 0);
if (visible > 0 && visible / Math.min(r.height, vh) >= 0.35) {
started.current = true;
window.removeEventListener("scroll", check);
window.removeEventListener("resize", check);
runSequence();
}
};
window.addEventListener("scroll", check, { passive: true });
window.addEventListener("resize", check);
check();
return () => {
window.removeEventListener("scroll", check);
window.removeEventListener("resize", check);
};
}, []);
function at(ms, fn) { timers.current.push(setTimeout(fn, ms)); }
function typeText(text, startMs, perChar, setter) {
for (let i = 1; i <= text.length; i++) {
at(startMs + i * perChar, () => setter(text.slice(0, i)));
}
return startMs + text.length * perChar;
}
function runSequence() {
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduced) {
setName(GYM.name); setWebsite(GYM.website); setContext(GYM.context);
setZip(GYM.zip); setFileCount(FILES.length); setReady(true);
setPromptStage(2);
return;
}
typeText(GYM.name, 0, 44, setName); // ~0.84s
typeText(GYM.website, 960, 30, setWebsite); // ~0.9s
FILES.forEach((_, i) => at(1900 + i * 300, () => setFileCount(i + 1)));
at(2640, () => setContext(GYM.context)); // pasted at once
typeText(GYM.zip, 2840, 120, setZip); // ~0.6s
at(3900, () => setReady(true));
const isMobile = window.matchMedia && window.matchMedia("(max-width: 768px)").matches;
if (isMobile) {
// Mobile: only the "Yes, here" prompt, for 3s, and never returns.
at(9900, () => setPromptStage(1)); // "Yes, here"
at(12900, () => setPromptStage(3)); // hide forever
} else {
// 6s after button is clickable, then 2s between each prompt:
at(9900, () => setPromptStage(0)); // "Click here"
at(11900, () => setPromptStage(1)); // "Yes, here"
at(13900, () => setPromptStage(2)); // "you know you want to"
at(15900, () => setPromptStage(3)); // hide prompts forever
// "please please please" badges retired. Schedule kept empty to
// preserve timing of the surrounding hide-prompts step (stage 3).
}
}
const fieldCls = (v) => "form-field" + (v ? " filled" : "");
const [titlePulse, setTitlePulse] = useState(0);
const pulseClick = () => setTitlePulse((n) => n + 1);
return (
An example of how easy the setup is...
{FILES.slice(0, fileCount).map((f) => (
{f.name}{f.size}
))}
{fileCount === 0 && FAQs, menus, policies, or any docs}
{ready && (
{promptStage === 0 && (
Click here
)}
{promptStage === 1 && (
Yes, here
)}
{promptStage === 2 && (
you know you want to
)}
)}
);
}
// ── Phase 2: customer view ────────────────────────────────
function CustomerView({ business }) {
const [messages, setMessages] = useState([]);
const [typing, setTyping] = useState(false);
const [busy, setBusy] = useState(false);
const [asked, setAsked] = useState([]);
const [compose, setCompose] = useState("");
const [nudge, setNudge] = useState(false);
const threadRef = useRef(null);
const timers = useRef([]);
useEffect(() => () => timers.current.forEach(clearTimeout), []);
useEffect(() => {
const el = threadRef.current;
if (el) el.scrollTop = el.scrollHeight;
}, [messages, typing]);
const ask = (item, idx) => {
if (busy || asked.includes(idx)) return;
setBusy(true);
setAsked((a) => [...a, idx]);
// type the message into the compose bar quickly (<1s), then send
const text = item.q;
const perChar = Math.min(28, Math.floor(620 / text.length));
for (let i = 1; i <= text.length; i++) {
timers.current.push(setTimeout(() => setCompose(text.slice(0, i)), i * perChar));
}
const sendAt = text.length * perChar + 180;
timers.current.push(setTimeout(() => {
setCompose("");
setMessages((m) => [...m, { from: "me", text }]);
}, sendAt));
timers.current.push(setTimeout(() => setTyping(true), sendAt + 450));
timers.current.push(setTimeout(() => {
setTyping(false);
setMessages((m) => [...m, { from: "them", text: item.a }]);
setBusy(false);
}, sendAt + 450 + item.typingMs));
};
// Clicking the (display-only) compose input before starting nudges the
// start-hint bubble so the visitor knows to tap a question instead.
const bumpNudge = () => {
if (messages.length || typing) return;
setNudge(false);
requestAnimationFrame(() => setNudge(true));
timers.current.push(setTimeout(() => setNudge(false), 720));
};
const composeBar = (
These are example questions - a real customer can ask anything, in any wording. Every reply comes from the business details provided in real time. Want to try the agent on your own business? Click here.