/* ============================================================ CELLIE — AE chat widget for GMR landings. Two behaviour modes (HUB spec): • Mode A — self-service (default on product landings): explain + "Start free trial" CTA → app SSO. No meeting. Can escalate to B. • Mode B — sales-led / suite (default on genmr.co, or "Bundle" trigger / in-chat suite intent): BANT (8 fields) → real calendar. Mode follows intent (single product → trial · suite → call). Themed per product via CSS (.cellie{--acc}). Knowledge/brain (Opus 4.8 + Notion/DB) wires in later; this is the deterministic skeleton. ============================================================ */ const {useState,useRef,useEffect}=React; /* ---- HubSpot integration (EU1) --------------------------------- Mode B: inline Meetings calendar + qualification push to a form. Fill HS_PORTAL + HS_FORM to enable the push (the embed works regardless). */ const HS_MEETING="https://meetings-eu1.hubspot.com/alberto-nasciuti/genmr-bundle"; const HS_PORTAL=""; // EU1 portal id const HS_FORM=""; // Forms API form GUID let __hsPushed=false; function pushToHubSpot(cap,extra){ if(!HS_PORTAL||!HS_FORM||__hsPushed||!cap||!cap.email) return; __hsPushed=true; extra=extra||{}; const strong=(STRONG_COMPANY.includes(cap.company)?1:0)+(STRONG_APPS.includes(cap.apps_wanted)?1:0)+(STRONG_TIME.includes(cap.timeline)?1:0)+((cap.usecase)?1:0); const fitLabel=strong>=3?"Strong fit":strong>=1?"Good fit":"Exploring"; const rows=[["Role",cap.role],["Company",cap.company],["Team",cap.team_size],["Goal",cap.usecase],["Apps",cap.apps_wanted],["Timeline",cap.timeline],["Region",cap.region],["Fit",fitLabel]]; const summary=rows.filter(r=>r[1]).map(r=>r[0]+": "+r[1]).join(" · "); const fields=[{name:"email",value:cap.email}]; const add=(n,v)=>{ if(v) fields.push({name:n,value:v}); }; add("cellie_source","Cellie"); add("cellie_mode",extra.mode||"bundle"); add("cellie_app",extra.app||""); add("cellie_session_id",extra.sid||""); add("cellie_role",cap.role); add("cellie_company",cap.company); add("cellie_team_size",cap.team_size); add("cellie_use_case",cap.usecase); add("cellie_apps_wanted",cap.apps_wanted); add("cellie_timeline",cap.timeline); add("cellie_region",cap.region); add("cellie_fit",fitLabel); add("cellie_qualification_summary",summary); try{ fetch("https://api-eu1.hsforms.com/submissions/v3/integration/submit/"+HS_PORTAL+"/"+HS_FORM,{ method:"POST",headers:{"Content-Type":"application/json"}, body:JSON.stringify({fields,context:{pageUri:location.href,pageName:document.title}}) }).catch(function(){}); }catch(e){} } /* Build the HubSpot booking URL with the qualification as cellie_* params, so it attaches to the contact the booking creates (no email asked in chat). The big HubSpot iframe embed was replaced by a single on-brand button → this URL. */ function buildBookUrl(p){ const q=Object.keys(p||{}).filter(function(k){return p[k];}).map(function(k){return encodeURIComponent(k)+"="+encodeURIComponent(p[k]);}).join("&"); return HS_MEETING+(q?("?"+q):""); } /* small inline icons */ const Sv={ chat:(), send:(), close:(), cal:(), check:(), spark:(), arrow:(), chevron:(), x:(), }; /* Cellie — smiley headset agent, ink via currentColor */ const CellieFace=({s=28})=>( ); /* Tiny inline markdown renderer for bot bubbles (**bold**, *italic*, `code`, - bullets, line breaks). Inline-safe so it stays valid inside the bubble span. */ function renderInline(s,kp){ const nodes=[]; const re=/(\*\*([^*]+)\*\*|\*([^*]+)\*|`([^`]+)`)/g; let m,last=0,k=0; while((m=re.exec(s))){ if(m.index>last) nodes.push(s.slice(last,m.index)); if(m[2]!=null) nodes.push({m[2]}); else if(m[3]!=null) nodes.push({m[3]}); else if(m[4]!=null) nodes.push({m[4]}); last=m.index+m[0].length; k++; } if(last{ if(idx>0) out.push(
); const b=ln.match(/^\s*[-*•]\s+(.*)/); if(b) out.push({"• "}{renderInline(b[1],"l"+idx)}); else out.push({renderInline(ln,"p"+idx)}); }); return out; } const NAMES={brynx:"Brynx",dtwin:"DTwin",marketear:"Marketear",influrep:"InfluRep",geoky:"Geoky",klenux:"Klenux",gmr:"GMR"}; /* one-line value prop (Mode A intro) */ const VALUE={ brynx:"A research agency, in an afternoon — board-ready research in hours, not weeks.", dtwin:"Your customers, on call — test ideas on thousands of digital twins before you spend.", marketear:"Turn the noise into decisions — agentic social listening that hands you a client-ready report.", influrep:"The right face, verified — discover and vet influencers on real data.", geoky:"Exist where people search — see how your brand shows up in ChatGPT, Gemini, Perplexity, Claude.", klenux:"Find the friction before your users do — test your site or app on digital twins before launch.", gmr:"Six AI-native products, one team of agents, one wallet — the whole agency, inside yours.", }; const USECASES={ brynx:["Competitive analysis","Consumer reaction","Strategy / GTM","Market sizing"], dtwin:["Concept testing","Survey at scale","Focus groups","What-if scenarios"], marketear:["Brand monitoring","Campaign tracking","Competitor watch","Reputation / crisis"], influrep:["Find creators","Vet an influencer","Audience check","Competitor benchmark"], geoky:["AI visibility audit","Share of voice","Get cited by AI","Competitor GEO"], klenux:["Test a signup flow","Find friction","Pre-launch UX check","Compare two designs"], gmr:["Market research","Consumer insight","Social intelligence","Influencer / GEO","UX research","The whole stack"], }; /* real app SSO URL for the free-trial CTA (Mode A) */ const APP_URL={ brynx:"https://app.brynx.ai/login", dtwin:"https://suite.dtwin.now", marketear:"https://app.marketear.co/login", influrep:"https://app.influrep.com/auth", geoky:"https://app.geoky.ai/login", klenux:"https://app.klenux.com/login", }; /* ---- Step machines ---- */ function buildSteps(product,mode){ const name=NAMES[product.id]||"GMR"; if(mode==="A"){ return [ {key:"a-start",bot:[`Hi — I'm Cellie, your AE at ${name}.`,VALUE[product.id]||VALUE.gmr,`You can try ${name} free right now — no card. Or ask me anything.`],card:"trialcta"}, ]; } // Mode B — suite / sales-led (BANT) const isHub=product.id==="gmr"; return [ {key:"b-start",bot:[ isHub ? `Hi — I'm Cellie. You're looking at the whole GMR suite: six products, one team of agents, one wallet.` : `Got it — sounds like you want the whole suite, not just ${name}.`, "Let me line up a call with our team. A few quick questions first." ],chips:["Sounds good"]}, {key:"role",bot:["What's your role at the company?"],chips:["Founder / C-level","Marketing","Insights / Research","Sales / RevOps","Other"],capture:"role"}, {key:"company",bot:["Agency, consulting firm, or in-house brand?"],chips:["Agency","Consulting / Advisory","Brand / in-house","Other"],capture:"company"}, {key:"size",bot:["How big is the team that'd use it?"],chips:["1–10","11–50","51–200","200+"],capture:"team_size"}, {key:"usecase",bot:["What are you hoping to achieve with the suite?"],input:"text",capture:"usecase"}, {key:"apps",bot:["All six products, or a few specific ones?"],chips:["All six","A few specific ones","Not sure yet"],capture:"apps_wanted"}, {key:"timeline",bot:["Any timeline in mind?"],chips:["This week","This month","This quarter","Just exploring"],capture:"timeline"}, {key:"region",bot:["Where's your team based?"],chips:["Italy","Europe","North America","Other"],capture:"region"}, {key:"book",bot:[],card:"slots"}, // no email step — captured at booking (calendar) / via SSO (trial) ]; } const BRIEF_ROWS=[["role","Role"],["company","Company"],["team_size","Team"],["usecase","Goal"],["apps_wanted","Apps"],["timeline","Timeline"],["region","Region"]]; const STRONG_COMPANY=["Agency","Consulting / Advisory"]; const STRONG_APPS=["All six","A few specific ones"]; const STRONG_TIME=["This week","This month","This quarter"]; function computeFit(cap){ const filled=BRIEF_ROWS.filter(([k])=>cap[k]).length; let score=0; if(STRONG_COMPANY.includes(cap.company)) score++; if(STRONG_APPS.includes(cap.apps_wanted)) score++; if(STRONG_TIME.includes(cap.timeline)) score++; if(cap.usecase) score++; let seg=0,label="Qualifying…"; if(filled>=1) seg=1; if(filled>=4) seg=2; if(filled>=6) seg=3; if(filled>=2) label = score>=3 ? "Strong fit" : score>=1 ? "Good fit" : "Exploring"; return {filled,seg,label}; } function CellieChat({product}){ const defaultMode = product.id==="gmr" ? "B" : "A"; const [open,setOpen]=useState(false); const [showNudge,setShowNudge]=useState(false); const [mode,setMode]=useState(defaultMode); const [msgs,setMsgs]=useState([]); const [step,setStep]=useState(-1); const [botDone,setBotDone]=useState(false); const [answered,setAnswered]=useState(false); const [cap,setCap]=useState({}); const [typing,setTyping]=useState(false); const [val,setVal]=useState(""); const [briefOpen,setBriefOpen]=useState(true); const [brain,setBrain]=useState(null); // null=unknown · true=Opus brain · false=scripted fallback const [sending,setSending]=useState(false); const [brainAction,setBrainAction]=useState(null); // 'book' | 'trial' | null (set by the brain) const bodyRef=useRef(null); const timers=useRef([]); const bootedRef=useRef(false); const stepsRef=useRef(buildSteps(product,defaultMode)); const startModeRef=useRef(defaultMode); const sid=useRef((window.crypto&&crypto.randomUUID)?crypto.randomUUID():"cel_"+Date.now().toString(36)+Math.random().toString(36).slice(2)).current; const clearTimers=()=>{timers.current.forEach(clearTimeout);timers.current=[];}; const T=(fn,ms)=>{const id=setTimeout(fn,ms);timers.current.push(id);return id;}; useEffect(()=>()=>clearTimers(),[]); // imperative open hooks: default (entry mode) + bundle (force Mode B) function openPanel(m){ startModeRef.current = m || defaultMode; setOpen(true); } useEffect(()=>{ const openDefault=()=>openPanel(); const openBundle=()=>openPanel("B"); const onEvt=(e)=>openPanel(e&&e.detail&&e.detail.mode); window.openCellie=openDefault; window.openCellieBundle=openBundle; window.addEventListener("cellie:open",onEvt); return ()=>{ window.removeEventListener("cellie:open",onEvt); if(window.openCellie===openDefault) delete window.openCellie; if(window.openCellieBundle===openBundle) delete window.openCellieBundle; }; },[]); // nudge teaser useEffect(()=>{ if(open){setShowNudge(false);return;} const id=setTimeout(()=>setShowNudge(true),1600); return ()=>clearTimeout(id); },[open]); // start convo on first open: probe the brain, else fall back to the scripted skeleton useEffect(()=>{ if(open && !bootedRef.current){ bootedRef.current=true; boot(); } },[open]); // autoscroll — follow the conversation to the bottom useEffect(()=>{ const el=bodyRef.current; if(el) el.scrollTop=el.scrollHeight; },[msgs,typing,botDone,step,brainAction]); function start(m){ stepsRef.current=buildSteps(product,m); setMode(m); setMsgs([]);setCap({});setAnswered(false);setBotDone(false);setStep(-1); T(()=>runStep(0),30); } // ---- Brain (Opus 4.8 via /api/cellie) — falls back to scripted skeleton ---- async function boot(){ let ok=false; try{ const r=await fetch("/api/cellie",{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({ping:true})}); const j=await r.json(); ok=!!(j&&j.configured); }catch(e){ ok=false; } setBrain(ok); if(ok) brainOpener(); else start(startModeRef.current); } function typeBot(lines){ let k=0; const tick=()=>{ if(k>=lines.length) return; setTyping(true); const line=lines[k]; const delay=Math.min(420+line.length*8,1250); T(()=>{ setTyping(false); setMsgs(m=>[...m,{from:"bot",text:line}]); k++; T(tick,300); },delay); }; tick(); } function brainOpener(){ const m=startModeRef.current; setMode(m); const name=NAMES[product.id]||"GMR"; const lines = m==="B" ? [ product.id==="gmr" ? "Hi — I'm Cellie. You're looking at the whole GMR suite: six products, one team of agents, one wallet." : `Hi — I'm Cellie. Sounds like you're after more than just ${name}.`, "Tell me about you and what you're trying to do — I'll line up the right call." ] : [ `Hi — I'm Cellie, your AE at ${name}.`, VALUE[product.id]||VALUE.gmr, "Ask me anything, or tell me what you're working on." ]; typeBot(lines); } function toApi(list){ const out=[]; for(const mm of list){ const role=mm.from==="user"?"user":"assistant"; if(out.length && out[out.length-1].role===role) out[out.length-1].content+="\n"+mm.text; else out.push({role,content:mm.text}); } while(out.length && out[0].role!=="user") out.shift(); return out; } function brainSend(text){ const userMsg={from:"user",text}; const history=[...msgs,userMsg]; setMsgs(m=>[...m,userMsg]); setVal(""); setSending(true); setTyping(true); fetch("/api/cellie",{method:"POST",headers:{"content-type":"application/json"}, body:JSON.stringify({product,mode,messages:toApi(history),captured:cap})}) .then(r=>r.json()) .then(j=>{ setTyping(false); setSending(false); if(j && j.reply) setMsgs(m=>[...m,{from:"bot",text:j.reply}]); if(j && j.captured && Object.keys(j.captured).length){ setCap(c=>({...c,...j.captured})); setBriefOpen(true); } if(j && j.action) setBrainAction(j.action); }) .catch(()=>{ setTyping(false); setSending(false); setMsgs(m=>[...m,{from:"bot",text:"Sorry — I had a hiccup. Mind trying again?"}]); }); } function runStep(i){ setStep(i);setBotDone(false);setAnswered(false); const s=stepsRef.current[i]; if(s && s.card==="slots") setBriefOpen(false); // give the calendar room const lines=(s&&s.bot)||[]; let k=0; const tick=()=>{ if(k>=lines.length){setBotDone(true);return;} setTyping(true); const line=lines[k]; const delay=Math.min(420+line.length*8,1250); T(()=>{ setTyping(false); setMsgs(m=>[...m,{from:"bot",text:line}]); k++; T(tick,300); },delay); }; tick(); } function answer(text){ const s=stepsRef.current[step]; setMsgs(m=>[...m,{from:"user",text}]); if(s.capture){setCap(c=>({...c,[s.capture]:text}));setBriefOpen(true);} setAnswered(true); T(()=>runStep(step+1),300); } // Mode A — soft reply that does NOT advance the machine (stays on trial CTA) function softReply(userText,botText){ setMsgs(m=>[...m,{from:"user",text:userText}]); setTyping(true); T(()=>{setTyping(false);setMsgs(m=>[...m,{from:"bot",text:botText}]);},650); } function mentionUseCase(chip){ const name=NAMES[product.id]||"GMR"; softReply(chip,`${chip} is one of the things ${name} handles. The fastest way to feel it is to try it yourself — free, no card. Want the whole suite instead? I can set up a call.`); } function startTrial(){ const url=APP_URL[product.id]; if(!url){ start("B"); return; } // gmr has no single-app trial → suite call const u=url+(url.indexOf("?")>=0?"&":"?")+"cellie_sid="+encodeURIComponent(sid); window.open(u,"_blank","noopener"); } function bookCall(){ const f=computeFit(cap); window.open(buildBookUrl({cellie_session_id:sid,cellie_app:product.id,cellie_role:cap.role,cellie_company:cap.company,cellie_team_size:cap.team_size,cellie_use_case:cap.usecase,cellie_apps_wanted:cap.apps_wanted,cellie_timeline:cap.timeline,cellie_region:cap.region,cellie_fit:f.label}),"_blank","noopener"); } function onSend(){ const t=val.trim(); if(!t) return; if(brain){ if(!sending) brainSend(t); return; } // brain: free conversation if(!botDone||answered) return; const s=stepsRef.current[step]; if(s && s.card==="trialcta"){ setVal(""); softReply(t,"Good question — I'll have the full answer in a moment. Meanwhile the quickest way to see is the free trial. Looking at the whole suite? I can line up a call."); return; } if(s && s.card){setVal("");return;} if(s && s.input==="email" && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(t)){ setMsgs(m=>[...m,{from:"user",text:t}]);setVal(""); T(()=>{setTyping(true);T(()=>{setTyping(false); setMsgs(m=>[...m,{from:"bot",text:"Hmm — that doesn't look like a work email. Mind trying again?"}]);},650);},220); return; } setVal("");answer(t); } const cur=step>=0?stepsRef.current[step]:null; const fit=computeFit(cap); const hasBrief=Object.keys(cap).filter(k=>k!=="email").length>0; const placeholder=cur&&cur.input==="email"?"name@company.com":(brain?"Ask me anything…":(mode==="A"?"Ask me anything…":"Type a message…")); return (

{!open && ( {showNudge && (

Hey — I'm Cellie. Want to see what we do? {e.stopPropagation();setShowNudge(false);}}>{Sv.x}

)} )} {open && ( )}

); }