// Pretty Rare Boutique — Chat widget // Warm, on-brand assistant. Responds to common questions about treatments, booking, location. const RESPONSES = { greeting: { text: "Hello. Welcome to Pretty Rare Boutique. How can I help you today?", quick: ["Treatments & pricing", "How to book", "Our location & hours", "What to expect"], }, treatments: { text: "We offer cosmetic treatments, skin treatments, lymphatic drainage, IV infusions, and ritual appointments. All begin with a complimentary 20-minute consultation — no obligation to proceed the same day.", quick: ["Cosmetic treatments", "Skin treatments", "Lymphatic drainage", "Book a consultation"], }, lymph: { text: "Brazilian lymphatic drainage massage is 45 minutes, from $180. A gentle, sculpting treatment that supports circulation, reduces fluid retention, and leaves you feeling light.", quick: ["Book a consultation", "Treatments & pricing", "How to book"], }, cosmetic: { text: "Our cosmetic treatments include wrinkle treatment (from $390), lip consult + treatment (from $690), and volumising consult + treatment (from $790). Every treatment is shaped around enhancement, not transformation.", quick: ["Book a consultation", "What to expect", "How to book"], }, skin: { text: "Skin treatments include Rejuran (from $590) and collagen stimulator treatment (from $890). Both include a complimentary review at two to four weeks.", quick: ["Book a consultation", "Cosmetic treatments", "IV infusions"], }, iv: { text: "Our Restorative IV infusion starts from $280 and takes around 40 minutes. It's a gentle, wellness-led treatment designed to restore energy and support overall wellbeing.", quick: ["Book a consultation", "How to book", "What to expect"], }, booking: { text: "Booking is by appointment only. You can book online at prettyrareboutique.gettimely.com or text us on 0450 466 052.", quick: ["Book now", "Our location & hours", "What to expect"], }, location: { text: "We're at Shop 3 / 21-25 Palm Beach Avenue, Palm Beach, Gold Coast. Open Wednesday to Saturday, 9:00 to 19:30.", quick: ["How to book", "Treatments & pricing", "What to expect"], }, experience: { text: "You arrive to a quiet, private suite. We listen before anything else. Silk robes, complimentary tea, and no rush. Every treatment includes a complimentary follow-up at two to four weeks.", quick: ["Treatments & pricing", "How to book", "Our location & hours"], }, bookNow: { text: "I'll take you to our booking page now. You can choose your treatment, date, and time there.", quick: [], action: "openBook", }, fallback: { text: "Thank you for your question. For anything specific, our team is happy to help at hello@prettyrareboutique.com — or you're welcome to book a complimentary consultation and we can answer everything in person.", quick: ["Treatments & pricing", "How to book", "Our location & hours"], }, }; const KEY_MAP = { "treatments & pricing": "treatments", "cosmetic treatments": "cosmetic", "skin treatments": "skin", "iv infusions": "iv", "lymphatic drainage": "lymph", "how to book": "booking", "our location & hours": "location", "what to expect": "experience", "book a consultation": "bookNow", "book now": "bookNow", }; function matchResponse(text) { const lower = text.toLowerCase().trim(); if (KEY_MAP[lower]) return KEY_MAP[lower]; if (lower.includes("price") || lower.includes("cost") || lower.includes("how much")) return "treatments"; if (lower.includes("lip") || lower.includes("wrinkle") || lower.includes("filler") || lower.includes("cosmetic")) return "cosmetic"; if (lower.includes("skin") || lower.includes("rejuran") || lower.includes("collagen")) return "skin"; if (lower.includes("iv") || lower.includes("infusion") || lower.includes("drip")) return "iv"; if (lower.includes("lymph") || lower.includes("drainage") || lower.includes("massage")) return "lymph"; if (lower.includes("book") || lower.includes("appointment") || lower.includes("schedule")) return "booking"; if (lower.includes("location") || lower.includes("address") || lower.includes("where") || lower.includes("hour") || lower.includes("open")) return "location"; if (lower.includes("expect") || lower.includes("experience") || lower.includes("feel") || lower.includes("what happen")) return "experience"; return "fallback"; } function SiteChat({ onBook }) { const [open, setOpen] = React.useState(false); const [messages, setMessages] = React.useState([ { from: "bot", text: RESPONSES.greeting.text, quick: RESPONSES.greeting.quick }, ]); const [input, setInput] = React.useState(""); const [typing, setTyping] = React.useState(false); const bottomRef = React.useRef(null); const inputRef = React.useRef(null); const mobile = useMobile(); React.useEffect(() => { if (open) { setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: "smooth" }), 60); setTimeout(() => inputRef.current?.focus(), 120); } }, [open, messages]); function sendMessage(text) { if (!text.trim()) return; const userMsg = { from: "user", text }; setMessages((m) => [...m, userMsg]); setInput(""); setTyping(true); const key = matchResponse(text); const resp = RESPONSES[key]; setTimeout(() => { setTyping(false); if (resp.action === "openBook") { setMessages((m) => [...m, { from: "bot", text: resp.text, quick: [] }]); window.open('https://prettyrareboutique.gettimely.com', '_blank'); setOpen(false); } else { setMessages((m) => [...m, { from: "bot", text: resp.text, quick: resp.quick || [] }]); } }, 820); } const panelStyle = { position: "fixed", bottom: mobile ? 0 : 96, right: mobile ? 0 : 28, left: mobile ? 0 : "auto", width: mobile ? "100%" : 360, height: mobile ? "85vh" : 520, background: "var(--bg)", borderRadius: mobile ? "24px 24px 0 0" : 20, boxShadow: "var(--shadow-lg)", border: "1px solid var(--border)", display: "flex", flexDirection: "column", overflow: "hidden", zIndex: 110, opacity: open ? 1 : 0, transform: open ? "translateY(0)" : "translateY(16px)", pointerEvents: open ? "auto" : "none", transition: "opacity 280ms var(--ease-soft), transform 280ms var(--ease-soft)", }; return ( <> {/* Chat panel */}
{/* Header */}
Pretty Rare
We usually reply instantly
{/* Messages */}
{messages.map((msg, i) => (
{msg.text}
{/* Quick replies */} {msg.quick && msg.quick.length > 0 && i === messages.length - 1 && (
{msg.quick.map((q) => ( ))}
)}
))} {/* Typing indicator */} {typing && (
{[0, 1, 2].map((d) => ( ))}
)}
{/* Input */}
setInput(e.target.value)} onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && sendMessage(input)} placeholder="Send a message..." style={{ flex: 1, fontFamily: "var(--font-sans)", fontSize: 14, padding: "11px 16px", borderRadius: 999, border: "1px solid var(--border)", background: "var(--surface)", color: "var(--fg)", outline: "none", }} />
{/* Toggle button */} ); } window.SiteChat = SiteChat;