/* global React */ // AtelierChat — bilingual (EN/AR) Nazarban consultation chat. // Talks to /api/chat and /api/collect-email; falls back to a local reply offline. const NZ_MARK = ( ); const I = { flow: , bot: , doc: , chart: , send: , arrow: , doc2: , x: , check: , mail: , phone: , }; const PROMPT_ICONS = [I.flow, I.bot, I.doc, I.chart]; // --- bilingual strings --- const T = { en: { consultant: 'AI Consultant', online: 'Online', getProposal: 'Get a proposal', welcomeEyebrow: 'Consultation', welcomeH2: <>Let us scope your intelligent solution., welcomeP: "Describe a process, a constraint, or an ambition. We translate it into a secure, working system — quietly, and well.", prompts: ['Automate a manual workflow', 'Build a custom AI assistant', 'Process documents at scale', 'Forecast demand from our data'], inputPh: "Describe a process you'd like to automate…", propH3: 'Get your free AI proposal', propSub: "We'll review what you've described and send a tailored, no-obligation proposal—scope, timeline, and a path to a 14-day pilot—within 24 hours.", emailPh: 'your@email.com', send: 'Send it', sending: 'Sending…', sendError: "Something went wrong and your request didn't go through — please try again.", propFine: 'A summary of this chat is included', noChatH3: 'Chat with us first', noChatSub: 'Tell us about your project so we can tailor your proposal — even a sentence helps.', startChatting: 'Start chatting', sentH3: 'Proposal on its way.', sentSub: (e) => <>Thank you—we'll be in touch at {e} within 24 hours with a tailored proposal. You can keep the conversation going in the meantime., backToChat: 'Back to chat', farewell: "Thank you — we'll be in touch shortly with next steps.", fallback: "Noted. The fastest way to know if this is worth it is a scoped proof-of-concept against your own data. Tell me the process, the volume, and what 'good' looks like — and I'll map the path to a working pilot.", }, ar: { consultant: 'مستشار الذكاء الاصطناعي', online: 'متصل', getProposal: 'اطلب عرضًا', welcomeEyebrow: 'استشارة', welcomeH2: <>لنرسم ملامح الحل الذكي المناسب لك., welcomeP: 'صِف لنا عمليةً أو قيدًا أو طموحًا، ونحوّله إلى نظامٍ آمنٍ يعمل فعليًا — بهدوءٍ وإتقان.', prompts: ['أتمتة سير عمل يدوي', 'بناء مساعد ذكاء اصطناعي مخصّص', 'معالجة المستندات على نطاق واسع', 'التنبّؤ بالطلب من بياناتك'], inputPh: 'صِف عمليةً ترغب في أتمتتها…', propH3: 'احصل على عرض الذكاء الاصطناعي المجاني', propSub: 'سنراجع ما وصفته ونرسل إليك عرضًا مخصّصًا دون أي التزام — النطاق والجدول الزمني ومسار إطلاق تجريبي خلال 14 يومًا — في غضون 24 ساعة.', emailPh: 'بريدك الإلكتروني', send: 'أرسله', sending: 'جارٍ الإرسال…', sendError: 'حدث خطأ ولم يتم إرسال طلبك — يرجى المحاولة مرة أخرى.', propFine: 'سيُرفَق ملخّص هذه المحادثة', noChatH3: 'تحدّث معنا أولًا', noChatSub: 'أخبرنا عن مشروعك حتى نتمكن من تخصيص عرضك — حتى جملة واحدة تكفي.', startChatting: 'ابدأ المحادثة', sentH3: 'العرض في طريقه إليك.', sentSub: (e) => <>شكرًا لك — سنتواصل معك على {e} خلال 24 ساعة بعرضٍ مخصّص. يمكنك متابعة المحادثة في هذه الأثناء., backToChat: 'العودة إلى المحادثة', farewell: 'شكرًا لك — سنتواصل معك قريبًا بالخطوات التالية.', fallback: 'تمام. أسرع طريقة لمعرفة الجدوى هي إثباتٌ عمليٌّ محدّد على بياناتك. صِف لنا العملية والحجم وما يعنيه «النجاح» بالنسبة لك، وسنرسم مسار الوصول إلى نموذج تجريبي يعمل.', }, }; function useLang() { const [lang, setLang] = React.useState(window.NZ_LANG ? window.NZ_LANG.get() : 'en'); React.useEffect(() => { const h = (e) => setLang(e.detail.lang); document.addEventListener('languagechange', h); return () => document.removeEventListener('languagechange', h); }, []); return lang; } function ProposalPopup({ onClose, getConversation, hasConversation }) { const lang = useLang(); const t = T[lang]; const [email, setEmail] = React.useState(''); const [sent, setSent] = React.useState(false); const [busy, setBusy] = React.useState(false); const [failed, setFailed] = React.useState(false); const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()); const submit = async (e) => { e.preventDefault(); if (!valid || busy) return; setBusy(true); setFailed(false); try { const res = await fetch('/api/collect-email', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email.trim(), source: 'popup', conversationHistory: (getConversation && getConversation()) || [], language: lang, }), }); if (!res.ok) throw new Error('collect-email failed: ' + res.status); setSent(true); } catch (err) { console.error('Failed to save email:', err); setFailed(true); } setBusy(false); }; return (
{ if (e.target === e.currentTarget) onClose(); }}>
{!hasConversation ? (
{I.doc2}

{t.noChatH3}

{t.noChatSub}

) : !sent ? ( {I.doc2}

{t.propH3}

{t.propSub}

setEmail(e.target.value)} autoFocus />
{failed &&

{t.sendError}

}

{t.propFine}

 ) : (
{I.check}

{t.sentH3}

{t.sentSub(email.trim())}

)}
); } function AtelierChat() { const lang = useLang(); const t = T[lang]; const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(''); const [typing, setTyping] = React.useState(false); const [flew, setFlew] = React.useState(false); const [showProp, setShowProp] = React.useState(false); const [nudged, setNudged] = React.useState(false); const scrollRef = React.useRef(null); const timers = React.useRef([]); const convo = React.useRef([]); const stageRef = React.useRef('initial'); const emailRef = React.useRef(undefined); const langRef = React.useRef(lang); langRef.current = lang; React.useEffect(() => () => timers.current.forEach(clearTimeout), []); React.useEffect(() => { const q = new URLSearchParams(window.location.search).get('q'); if (q) setInput(decodeURIComponent(q)); }, []); const userCount = messages.filter((m) => m.who === 'user').length; React.useEffect(() => { if (!nudged && userCount >= 2 && !typing) { const id = setTimeout(() => { setShowProp(true); setNudged(true); }, 900); timers.current.push(id); return () => clearTimeout(id); } }, [userCount, typing, nudged]); React.useEffect(() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [messages, typing]); const now = () => { const d = new Date(); return d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0'); }; const sendText = (raw) => { const text = (raw || '').trim(); if (!text || typing) return; setFlew(true); timers.current.push(setTimeout(() => setFlew(false), 420)); setMessages((m) => [...m, { who: 'user', text, time: now() }]); setInput(''); setTyping(true); convo.current.push({ role: 'user', content: text }); const pushBot = (reply) => { setTyping(false); setMessages((m) => [...m, { who: 'bot', text: reply, time: now() }]); convo.current.push({ role: 'assistant', content: reply }); }; fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: text, conversationHistory: convo.current, conversationStage: stageRef.current, userEmail: emailRef.current, language: langRef.current, }), }) .then((r) => r.json()) .then((data) => { if (data && data.success && data.message) { if (data.conversationStage) stageRef.current = data.conversationStage; if (data.userEmail) emailRef.current = data.userEmail; pushBot(data.message); if (data.conversationComplete) { timers.current.push(setTimeout(() => { setMessages((m) => [...m, { who: 'bot', text: T[langRef.current].farewell, time: now() }]); }, 1400)); } } else { pushBot((data && data.message) || T[langRef.current].fallback); } }) .catch((err) => { console.error('Chat error:', err); timers.current.push(setTimeout(() => pushBot(T[langRef.current].fallback), 600)); }); }; const onSubmit = (e) => { e.preventDefault(); sendText(input); }; const started = messages.length > 0 || typing; return (
{NZ_MARK}
NAZARBAN
{t.consultant}
{t.online}
{!started && (
{NZ_MARK} {t.welcomeEyebrow}

{t.welcomeH2}

{t.welcomeP}

{t.prompts.map((label, idx) => ( ))}
)} {messages.map((m, i) => (
{m.who === 'bot' ? NZ_MARK : 'YOU'}
{m.text}
))} {typing && (
{NZ_MARK}
)}
{showProp && setShowProp(false)} getConversation={() => convo.current} hasConversation={started} />}
setInput(e.target.value)} />
{I.mail} info@nazarbanai.com {I.phone} WhatsApp
); } window.AtelierChat = AtelierChat;