// Arbre de conversation guidée const FLOW = { start: { agent: "Bonjour 👋 Je suis Léa, ton assistante Discover Studio. Comment puis-je t'aider aujourd'hui ?", choices: [ { label: "🌐 Je veux un site internet", next: "type_site" }, { label: "💼 Je cherche une solution IT", next: "solution_it" }, { label: "💰 Connaître les tarifs", next: "budget" }, { label: "❓ Autre question", next: "autre" }, ] }, type_site: { agent: "Super ! Quel type de site t'intéresse ?", choices: [ { label: "🏪 Site vitrine / présentation", next: "timeline" }, { label: "🛒 Boutique e-commerce", next: "timeline" }, { label: "📋 Application web sur mesure", next: "timeline" }, { label: "📝 Blog / Portfolio", next: "timeline" }, ] }, solution_it: { agent: "Parfait ! De quel type de solution as-tu besoin ?", choices: [ { label: "🔧 Maintenance & support", next: "timeline" }, { label: "☁️ Hébergement & déploiement", next: "timeline" }, { label: "🔐 Sécurité & audit", next: "timeline" }, { label: "📊 Tableau de bord / CRM", next: "timeline" }, ] }, timeline: { agent: "Excellent choix ! C'est pour quand ton projet ?", choices: [ { label: "⚡ Le plus vite possible", next: "budget" }, { label: "📅 Dans 1 à 3 mois", next: "budget" }, { label: "🗓️ Dans 3 à 6 mois", next: "budget" }, { label: "🔍 Je suis en exploration", next: "budget" }, ] }, budget: { agent: "Quel est ton budget approximatif ?", choices: [], awaitInput: true }, contact: { agent: "Merci pour ces infos ! 🎉 Un expert Discover Studio va te contacter sous 24h.\n\nservice@discover-studio.com\n📞 +49 17687564448\n\nÀ très bientôt !", choices: [], whatsapp: true }, autre: { agent: "Pas de souci ! Pose ta question ci-dessous 👇 Je te réponds dans les plus brefs délais 😊", choices: [] } }; const STEPS = ["start", "type_site|solution_it|budget|autre", "timeline", "budget", "contact"]; function nowTime() { return new Date().toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" }); } function ChatWidget() { const [open, setOpen] = React.useState(false); const [input, setInput] = React.useState(""); const [messages, setMessages] = React.useState([]); const [typing, setTyping] = React.useState(false); const [step, setStep] = React.useState(0); // 0-4 progress const [currentNode, setCurrentNode] = React.useState("start"); const bottomRef = React.useRef(null); const inputRef = React.useRef(null); const agentPhoto = "https://images.pexels.com/photos/8866777/pexels-photo-8866777.jpeg?auto=compress&cs=tinysrgb&w=120&h=120&fit=crop"; const pathRef = React.useRef(["start"]); const choicesRef = React.useRef([]); const freeTextsRef = React.useRef([]); const savedRef = React.useRef(false); async function saveChatSession(lastNode) { if (savedRef.current) return; savedRef.current = true; const sb = window.DiscoverSupabase && typeof window.DiscoverSupabase.getClient === "function" ? window.DiscoverSupabase.getClient() : null; if (!sb) return; try { await sb.from("chat_sessions").insert({ conversation_path: pathRef.current.join(" → "), choices_made: choicesRef.current.join(", ") || null, last_node: lastNode, free_text: freeTextsRef.current.join(" | ") || null, page_path: window.location.pathname }); } catch (_) { /* silent */ } } React.useEffect(() => { setMessages([{ from: "agent", text: FLOW.start.agent, choices: FLOW.start.choices, time: nowTime() }]); }, []); React.useEffect(() => { const t = setTimeout(() => setOpen(true), 15000); return () => clearTimeout(t); }, []); React.useEffect(() => { if (bottomRef.current) { bottomRef.current.scrollIntoView({ behavior: "smooth" }); } }, [messages, open, typing]); React.useEffect(() => { if (open && inputRef.current) inputRef.current.focus(); }, [open]); function agentReply(nextStep) { const node = FLOW[nextStep]; if (!node) return; setTyping(true); setTimeout(() => { setTyping(false); setCurrentNode(nextStep); setMessages(prev => [...prev, { from: "agent", text: node.agent, choices: node.choices, whatsapp: !!node.whatsapp, time: nowTime() }]); if (node.awaitInput && inputRef.current) inputRef.current.focus(); }, 850); } function handleChoice(choice) { choicesRef.current.push(choice.label); pathRef.current.push(choice.next); setStep(s => Math.min(s + 1, 4)); setMessages(prev => { const updated = prev.map((m, i) => i === prev.length - 1 ? { ...m, choices: [] } : m); return [...updated, { from: "user", text: choice.label, time: nowTime() }]; }); agentReply(choice.next); if (choice.next === "contact" || choice.next === "autre") { saveChatSession(choice.next); } } function send() { const txt = input.trim(); if (!txt) return; setInput(""); // Budget step: treat as budget answer → go to contact if (currentNode === "budget") { choicesRef.current.push("Budget: " + txt); pathRef.current.push("contact"); setStep(s => Math.min(s + 1, 4)); setMessages(prev => { const updated = prev.map((m, i) => i === prev.length - 1 ? { ...m, choices: [] } : m); return [...updated, { from: "user", text: txt, time: nowTime() }]; }); saveChatSession("contact"); agentReply("contact"); return; } // Default free-text reply freeTextsRef.current.push(txt); saveChatSession("free_text"); setMessages(prev => { const updated = prev.map((m, i) => i === prev.length - 1 ? { ...m, choices: [] } : m); return [...updated, { from: "user", text: txt, time: nowTime() }]; }); setTyping(true); setTimeout(() => { setTyping(false); setMessages(prev => [...prev, { from: "agent", text: "Merci pour ton message 🙏 Un membre de notre équipe te recontacte très vite !\n\n📧 info@discover.studio", choices: [], time: nowTime() }]); }, 900); } function handleKey(e) { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } } function restart() { savedRef.current = false; pathRef.current = ["start"]; choicesRef.current = []; freeTextsRef.current = []; setStep(0); setCurrentNode("start"); setMessages([{ from: "agent", text: FLOW.start.agent, choices: FLOW.start.choices, time: nowTime() }]); } const progressPct = Math.round((step / 4) * 100); return (
{!open && ( Contacter sur WhatsApp
setOpen(true)}> Besoin d'aide ?
)} {open && (
{/* Header */}
Léa
Léa
Support · Discover Studio
En ligne · répond en <1 min
{/* Progress bar */} {step > 0 && step < 4 && (
)} {/* Messages */}
{messages.map((m, i) => (
{m.from === "agent" && Léa}
{m.text}
{m.time}
{m.whatsapp && ( )} {m.choices && m.choices.length > 0 && (
{m.choices.map((c, j) => ( ))}
)}
))} {typing && (
Léa
)}
{/* Input */}
setInput(e.target.value)} onKeyDown={handleKey} />
{/* Footer */}
Propulsé par Discover Studio
)}
); } window.ChatWidget = ChatWidget;