// chat.jsx — VIA Vastgoed chatbot widget // Lichtgewicht, premium-rustig, leunt op de bestaande site-tokens (--bg, --ink, --accent, fonts). // Praat tegen een n8n webhook (zie WEBHOOK_URL). Sessie + berichten persisteren in localStorage. const { useState, useEffect, useRef, useCallback } = React; // ---------- Config ---------- const WEBHOOK_URL = "https://n8n.viavastgoed.com/webhook/ad3ade9c-a30d-4872-9eb0-5ddec3b6894a/chat"; const ADVISEUR = { name: "Tharik", role: "Vastgoedadviseur", photo: "team-tharik.jpg", }; const WELCOME_MESSAGE = "Hoi, ik help je graag op weg met je oriëntatie op Spaans vastgoed. Stel je vraag of plan direct een vrijblijvend gesprek met een van onze adviseurs."; const WHATSAPP_URL = "https://wa.me/31615151307?text=" + encodeURIComponent("Hoi Tharik, ik kom uit de chat op viavastgoed.com en heb een vraag over Spaans vastgoed."); const QUICK_REPLIES = [ { label: "Welke regio's adviseren jullie?", msg: "Welke regio's in Spanje adviseren jullie en waarom?" }, { label: "Hoeveel rendement is realistisch?", msg: "Wat is een realistisch rendement voor vastgoed in Spanje?" }, { label: "Wat zijn de stappen?", msg: "Hoe werkt de begeleiding van VIA Vastgoed in stappen?" }, { label: "Stuur Tharik een WhatsApp", href: WHATSAPP_URL, wa: true }, ]; const PLAN_URL = "https://viavastgoed.pipedrive.com/scheduler/drovBohD/via-vastgoed-adviesgesprek"; // ---------- Helpers ---------- function getSessionId() { let id = localStorage.getItem("via_chat_session"); if (!id) { id = "s_" + Date.now().toString(36) + "_" + Math.random().toString(36).slice(2, 9); localStorage.setItem("via_chat_session", id); } return id; } function loadMessages() { try { return JSON.parse(localStorage.getItem("via_chat_msgs") || "[]"); } catch { return []; } } function saveMessages(msgs) { localStorage.setItem("via_chat_msgs", JSON.stringify(msgs.slice(-50))); } function extractReply(data) { if (typeof data === "string") return data; if (!data) return ""; return ( data.output || data.Antwoord || data.reply || data.message || data.text || (Array.isArray(data.messages) && data.messages[data.messages.length - 1]?.content) || "" ); } // ---------- Styles ---------- const STYLES = ` .viachat-root, .viachat-root * { box-sizing: border-box; } .viachat-root { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 2147483600; font-family: var(--font-sans, Inter, system-ui, sans-serif); color: var(--ink, #14110d); } /* ---------- Trigger pill ---------- */ .viachat-trigger { display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px 9px 9px; background: var(--ink, #14110d); color: var(--bg, #f3eee5); border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 12px 32px rgba(20,17,13,.22), 0 2px 8px rgba(20,17,13,.12); position: relative; overflow: visible; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; font-family: inherit; } .viachat-trigger:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(20,17,13,.32), 0 4px 12px rgba(20,17,13,.16); } @keyframes viachatTriggerAttn { 0%, 100% { transform: translateY(0) rotate(0); } 10% { transform: translateY(-7px) rotate(-2.5deg); } 22% { transform: translateY(0) rotate(2deg); } 34% { transform: translateY(-4px) rotate(-1.5deg); } 46% { transform: translateY(0) rotate(1deg); } 58% { transform: translateY(-2px) rotate(0); } 70% { transform: translateY(0) rotate(0); } } @keyframes viachatTriggerRing { 0% { opacity: 0; transform: scale(0.92); } 15% { opacity: .55; } 100% { opacity: 0; transform: scale(1.45); } } .viachat-trigger--attn { animation: viachatTriggerAttn 1.6s cubic-bezier(.36,.07,.19,.97) .1s both; } .viachat-trigger--attn::before, .viachat-trigger--attn::after { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 2px solid var(--ink, #14110d); animation: viachatTriggerRing 1.8s ease-out both; pointer-events: none; } .viachat-trigger--attn::after { animation-delay: .5s; } @media (prefers-reduced-motion: reduce) { .viachat-trigger--attn, .viachat-trigger--attn::before, .viachat-trigger--attn::after { animation: none; } } .viachat-trigger-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ink, #14110d); flex-shrink: 0; position: relative; } .viachat-trigger-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; border-radius: 50%; } .viachat-trigger-pulse { position: absolute; bottom: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2.5px var(--ink, #14110d); } .viachat-trigger-label { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding-right: 4px; } .viachat-trigger-label-main { font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; } .viachat-trigger-label-sub { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: .55; } @media (max-width: 480px) { .viachat-trigger-label { display: none; } .viachat-trigger { padding: 9px; } } /* ---------- Panel ---------- */ .viachat-panel { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); width: min(420px, calc(100vw - 32px)); height: min(640px, calc(100vh - 56px)); background: var(--bg, #f3eee5); border: 1px solid var(--line-strong, rgba(20,17,13,.22)); border-radius: 14px; box-shadow: 0 32px 80px rgba(20,17,13,.22), 0 8px 24px rgba(20,17,13,.10); display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right; animation: viachatIn .45s cubic-bezier(.2,.8,.2,1); } @keyframes viachatIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- Header ---------- */ .viachat-header { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line, rgba(20,17,13,.12)); background: var(--bg, #f3eee5); flex-shrink: 0; } .viachat-header-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--bg-2, #ece5d6); flex-shrink: 0; position: relative; } .viachat-header-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; border-radius: 50%; } .viachat-header-pulse { position: absolute; bottom: 0; right: 0; width: 13px; height: 13px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2.5px var(--bg, #f3eee5); } .viachat-header-text { flex: 1; min-width: 0; } .viachat-header-name { font-family: var(--font-display, "Fraunces", serif); font-size: 19px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; color: var(--ink, #14110d); } .viachat-header-status { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #6b6358); margin-top: 4px; } .viachat-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line, rgba(20,17,13,.12)); background: transparent; color: var(--ink, #14110d); display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; flex-shrink: 0; } .viachat-close:hover { background: var(--ink, #14110d); border-color: var(--ink, #14110d); color: var(--bg, #f3eee5); } /* ---------- Body ---------- */ .viachat-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 20px 12px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; } .viachat-body::-webkit-scrollbar { width: 6px; } .viachat-body::-webkit-scrollbar-thumb { background: var(--line-strong, rgba(20,17,13,.22)); border-radius: 3px; } .viachat-welcome { padding: 4px 0 8px; } .viachat-welcome-title { font-family: var(--font-display, "Fraunces", serif); font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 400; color: var(--ink, #14110d); margin-bottom: 10px; } .viachat-welcome-title em { font-style: italic; color: var(--accent, #c8412c); } .viachat-welcome-text { font-size: 14px; line-height: 1.55; color: var(--ink-soft, #2a2520); } .viachat-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .viachat-suggestion { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; background: var(--paper, #faf6ee); border: 1px solid var(--line, rgba(20,17,13,.12)); border-radius: 10px; cursor: pointer; transition: all .25s cubic-bezier(.2,.8,.2,1); font-family: inherit; font-size: 13.5px; color: var(--ink, #14110d); text-align: left; line-height: 1.35; } .viachat-suggestion:hover { border-color: var(--ink, #14110d); transform: translateX(2px); } .viachat-suggestion-arrow { width: 14px; height: 14px; opacity: .4; transition: transform .25s, opacity .25s; flex-shrink: 0; } .viachat-suggestion:hover .viachat-suggestion-arrow { transform: translateX(3px); opacity: 1; color: var(--accent, #c8412c); } .viachat-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 14px 18px; background: var(--ink, #14110d); color: var(--bg, #f3eee5); border-radius: 10px; text-decoration: none; font-size: 13.5px; transition: background .35s; position: relative; overflow: hidden; } .viachat-plan::before { content: ""; position: absolute; inset: 0; background: var(--accent, #c8412c); transform: translateY(101%); transition: transform .45s cubic-bezier(.6,.05,.2,1); } .viachat-plan > * { position: relative; z-index: 1; } .viachat-plan:hover::before { transform: translateY(0); } .viachat-plan-label { display: flex; flex-direction: column; gap: 2px; } .viachat-plan-label-main { font-weight: 500; letter-spacing: -0.005em; } .viachat-plan-label-sub { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: .6; } .viachat-msg { display: flex; flex-direction: column; max-width: 86%; } .viachat-msg.user { align-self: flex-end; align-items: flex-end; } .viachat-msg.bot { align-self: flex-start; align-items: flex-start; } .viachat-msg-bubble { padding: 11px 15px; border-radius: 14px; font-size: 14px; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap; } .viachat-msg.user .viachat-msg-bubble { background: var(--ink, #14110d); color: var(--bg, #f3eee5); border-bottom-right-radius: 4px; } .viachat-msg.bot .viachat-msg-bubble { background: var(--paper, #faf6ee); color: var(--ink, #14110d); border: 1px solid var(--line, rgba(20,17,13,.12)); border-bottom-left-radius: 4px; } .viachat-typing { display: inline-flex; gap: 4px; padding: 14px 16px; } .viachat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted, #6b6358); animation: viachatTyping 1.3s infinite ease-in-out; } .viachat-typing span:nth-child(2) { animation-delay: .15s; } .viachat-typing span:nth-child(3) { animation-delay: .3s; } @keyframes viachatTyping { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } } .viachat-error { font-size: 12.5px; color: var(--accent-deep, #a8341f); padding: 8px 14px; background: rgba(200,65,44,.08); border: 1px solid rgba(200,65,44,.2); border-radius: 8px; } .viachat-footer { padding: 14px 16px 16px; border-top: 1px solid var(--line, rgba(20,17,13,.12)); background: var(--bg, #f3eee5); flex-shrink: 0; } .viachat-input-row { display: flex; align-items: flex-end; gap: 8px; background: var(--paper, #faf6ee); border: 1px solid var(--line, rgba(20,17,13,.12)); border-radius: 12px; padding: 6px 6px 6px 14px; transition: border-color .2s; } .viachat-input-row:focus-within { border-color: var(--ink, #14110d); } .viachat-input { flex: 1; min-height: 28px; max-height: 120px; padding: 10px 0; border: none; background: transparent; resize: none; outline: none; font-family: inherit; font-size: 14px; line-height: 1.45; color: var(--ink, #14110d); } .viachat-input::placeholder { color: var(--muted, #6b6358); } .viachat-send { width: 36px; height: 36px; border-radius: 8px; border: none; background: var(--ink, #14110d); color: var(--bg, #f3eee5); display: grid; place-items: center; cursor: pointer; transition: background .25s, transform .25s; flex-shrink: 0; } .viachat-send:hover:not(:disabled) { background: var(--accent, #c8412c); transform: translateX(1px); } .viachat-send:disabled { opacity: .35; cursor: default; } .viachat-disclaimer { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted, #6b6358); text-align: center; margin-top: 10px; opacity: .7; } .viachat-reset { background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; opacity: .8; } .viachat-reset:hover { opacity: 1; color: var(--accent, #c8412c); } `; // ---------- Icons ---------- const IconClose = () => ( ); const IconArrow = () => ( ); const IconWhatsApp = () => ( ); const IconSend = () => ( ); const IconExt = () => ( ); // ---------- Components ---------- function Bubble({ msg }) { return (
{msg.text}
); } function Typing() { return (
); } function Welcome({ onPick }) { return (

Vragen over Spanje?

{WELCOME_MESSAGE}

{QUICK_REPLIES.map((q, i) => ( q.href ? ( {q.label} {q.wa ? : } ) : ( ) ))}
Plan adviesgesprek 30 min · vrijblijvend
); } function Panel({ onClose }) { const [messages, setMessages] = useState(() => loadMessages()); const [input, setInput] = useState(""); const [busy, setBusy] = useState(false); const [error, setError] = useState(null); const sessionRef = useRef(getSessionId()); const bodyRef = useRef(null); const inputRef = useRef(null); useEffect(() => { if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight; }, [messages, busy]); useEffect(() => { saveMessages(messages); }, [messages]); const handleInput = (e) => { setInput(e.target.value); e.target.style.height = "auto"; e.target.style.height = Math.min(e.target.scrollHeight, 120) + "px"; }; const send = useCallback(async (text) => { const clean = (text || "").trim(); if (!clean || busy) return; setError(null); setBusy(true); setMessages((m) => [...m, { role: "user", text: clean, t: Date.now() }]); setInput(""); if (inputRef.current) inputRef.current.style.height = "auto"; try { const res = await fetch(WEBHOOK_URL, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: sessionRef.current, chatInput: clean }), }); if (!res.ok) throw new Error("HTTP " + res.status); const ct = res.headers.get("content-type") || ""; const data = ct.includes("application/json") ? await res.json() : await res.text(); const reply = extractReply(data) || "Bedankt voor je bericht. Een adviseur neemt zo snel mogelijk contact met je op."; setMessages((m) => [...m, { role: "bot", text: reply, t: Date.now() }]); } catch (err) { console.warn("[viachat] error", err); setError("Er ging iets mis. Mail naar info@viavastgoed.com of bel +31 85 303 52 81."); } finally { setBusy(false); } }, [busy]); const handleSubmit = (e) => { e.preventDefault(); send(input); }; const handleKey = (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(input); } }; const reset = () => { if (!confirm("Gesprek wissen en opnieuw beginnen?")) return; setMessages([]); localStorage.removeItem("via_chat_msgs"); localStorage.removeItem("via_chat_session"); sessionRef.current = getSessionId(); }; return (
{ADVISEUR.name}
{ADVISEUR.name} · VIA Vastgoed
{ADVISEUR.role}
{messages.length === 0 ? ( ) : ( <> {messages.map((m, i) => )} {busy && } {error &&
{error}
} )}