/* ========================================================= Customers — the Customer Context Engine's front door. This page answers the framework's first questions in product form: WHERE does enterprise data go in (CSV import: loyalty, POS, CRM exports — any columns), WHO is this customer, WHAT do we already know (imported facts + facts learned on calls, with provenance), and WHAT will Mikaka use on the next conversation (the exact context brief). Backend: /outbound/contacts (list/search), /outbound/contacts/import (bulk upsert, metadata merges), /outbound/contacts/{id}/profile (facts + brief + calls). ========================================================= */ const CUST_PHONE_HEADERS = ["phone", "phone number", "mobile", "mobile number", "msisdn", "phone_e164", "telephone", "tel", "number", "contact"]; const CUST_NAME_HEADERS = ["name", "full name", "full_name", "customer", "customer name", "client", "contact name"]; const CUST_COMPANY_HEADERS = ["company", "organisation", "organization", "business"]; const custNormalizePhone = (raw) => { const cleaned = String(raw || "").replace(/[^\d+]/g, ""); const digits = cleaned.replace(/\D/g, ""); if (digits.length < 7) return null; if (cleaned.startsWith("+")) return cleaned; if (digits.startsWith("0") && digits.length === 10) return `+254${digits.slice(1)}`; if (digits.startsWith("254")) return `+${digits}`; return `+${digits}`; }; const custParseCsvRows = (text) => { // Minimal CSV: handles quoted cells with commas and doubled quotes. const rows = []; let row = [], cell = "", inQuotes = false; const src = String(text || ""); for (let i = 0; i < src.length; i++) { const ch = src[i]; if (inQuotes) { if (ch === '"' && src[i + 1] === '"') { cell += '"'; i++; } else if (ch === '"') inQuotes = false; else cell += ch; } else if (ch === '"') inQuotes = true; else if (ch === ",") { row.push(cell); cell = ""; } else if (ch === "\n" || ch === "\r") { if (ch === "\r" && src[i + 1] === "\n") i++; row.push(cell); cell = ""; if (row.some((c) => String(c).trim())) rows.push(row); row = []; } else cell += ch; } row.push(cell); if (row.some((c) => String(c).trim())) rows.push(row); return rows; }; // Any labelled column beyond phone/name/email/company rides along as a // customer fact (loyalty_tier, average_basket, last_visit, ...) — that IS the // enterprise data the context engine personalizes conversations with. const custProfilesFromCsv = (text) => { const rows = custParseCsvRows(text); if (!rows.length) return { profiles: [], columns: [] }; const headers = rows[0].map((h) => String(h || "").trim().toLowerCase()); const hasHeader = headers.some((h) => CUST_PHONE_HEADERS.includes(h) || CUST_NAME_HEADERS.includes(h) || h === "email"); const dataRows = hasHeader ? rows.slice(1) : rows; const findIdx = (names) => headers.findIndex((h) => names.includes(h)); const phoneIdx = hasHeader ? findIdx(CUST_PHONE_HEADERS) : 1; const nameIdx = hasHeader ? findIdx(CUST_NAME_HEADERS) : 0; const emailIdx = hasHeader ? headers.indexOf("email") : -1; const companyIdx = hasHeader ? findIdx(CUST_COMPANY_HEADERS) : -1; const knownIdx = new Set([phoneIdx, nameIdx, emailIdx, companyIdx].filter((i) => i >= 0)); const factColumns = hasHeader ? headers.map((h, i) => (!h || knownIdx.has(i) ? null : h.replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, ""))).filter(Boolean) : []; const profiles = dataRows .map((row, idx) => { const phone = custNormalizePhone(String((phoneIdx >= 0 ? row[phoneIdx] : "") || row[1] || row[0] || "").trim()); if (!phone) return null; const fullName = String((nameIdx >= 0 ? row[nameIdx] : row[0]) || "").trim(); const [firstName, ...rest] = fullName.split(/\s+/).filter(Boolean); const facts = { source: "customer_import" }; if (hasHeader) { headers.forEach((h, i) => { if (!h || knownIdx.has(i)) return; const key = h.replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, ""); const val = String(row[i] || "").trim(); if (key && val) facts[key] = val; }); } return { external_ref: `import-${idx + 1}`, first_name: firstName || null, last_name: rest.join(" ") || null, full_name: fullName || null, phone_e164: phone, email: emailIdx >= 0 ? String(row[emailIdx] || "").trim() || null : null, company: companyIdx >= 0 ? String(row[companyIdx] || "").trim() || null : null, timezone: "Africa/Nairobi", metadata: facts, }; }) .filter(Boolean); return { profiles, columns: factColumns }; }; const CUST_INTERNAL_KEYS = new Set(["source", "is_repeat", "prior_summary", "prior_reason", "reason", "last_called_ago"]); const custFactEntries = (obj) => Object.entries(obj || {}).filter(([k]) => k && !k.startsWith("_") && !CUST_INTERNAL_KEYS.has(k)); const CustFactGrid = ({ entries, empty }) => ( entries.length ? (
{entries.map(([k, v]) => { const value = v && typeof v === "object" && "value" in v ? v.value : v; const when = v && typeof v === "object" && v.at ? new Date(v.at).toLocaleDateString() : null; return (
{String(k).replace(/_/g, " ")}
{String(value)}
{when ?
learned on a call · {when}
: null}
); })}
) :
{empty}
); const CustProfileDrawer = ({ contactId, onClose, onGo }) => { const [profile, setProfile] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { let live = true; setLoading(true); setProfile(null); api.outbound.getCustomerProfile(contactId) .then((p) => { if (live) setProfile(p); }) .catch(() => {}) .finally(() => { if (live) setLoading(false); }); return () => { live = false; }; }, [contactId]); const contact = profile?.contact || {}; const imported = custFactEntries(contact.metadata); const learned = custFactEntries(contact.enrichments); const brief = profile?.next_call_brief || {}; const briefFacts = Object.entries(brief.known_facts || {}); return (
{contact.full_name || contact.phone_e164 || "Customer"}
{contact.phone_e164}{contact.company ? ` · ${contact.company}` : ""}{contact.email ? ` · ${contact.email}` : ""}
{loading ?
Loading profile…
: (
What you told us — imported data
What conversations taught us
Next-call brief — what Mikaka will use
{briefFacts.length ? ( <>
On the next conversation (inbound or campaign), the agent receives these facts with a hard rule: personalize with one or two of them, and never ask the customer for anything listed.
{briefFacts.map(([k, v]) => ( {k.replace(/_/g, " ")}: {String(v)} ))}
) : (
No usable facts yet — import data or let a first conversation happen.
)}
Analysed conversations{profile?.campaign_answers ? ` · ${profile.campaign_answers} campaign answer${profile.campaign_answers === 1 ? "" : "s"}` : ""}
{(profile?.analysed_calls || []).length ? (
{(profile.analysed_calls || []).map((cl) => (
{cl.created_at ? new Date(cl.created_at).toLocaleDateString() : ""} · {cl.direction || "call"} · {String(cl.intent_category || "").replace(/_/g, " ")} → {String(cl.outcome || "").replace(/_/g, " ")}
{(cl.needs_identified || []).length ? (
Needs: {(cl.needs_identified || []).join(", ")}
) : null}
))}
) :
No analysed conversations with this customer yet.
}
)}
); }; const TenantCustomers = ({ onGo }) => { const toast = useToast(); const [contacts, setContacts] = useState([]); const [search, setSearch] = useState(""); const [loading, setLoading] = useState(true); const [stats, setStats] = useState(null); const [pending, setPending] = useState(null); // parsed CSV awaiting confirm const [importing, setImporting] = useState(false); const [openContact, setOpenContact] = useState(null); const fileRef = useRef(null); const loadContacts = (q) => { setLoading(true); api.outbound.listContacts({ search: q || undefined, page_size: 200 }) .then((rows) => setContacts(Array.isArray(rows) ? rows : [])) .catch(() => setContacts([])) .finally(() => setLoading(false)); }; useEffect(() => { loadContacts(""); }, []); useEffect(() => { const t = setTimeout(() => loadContacts(search), 350); return () => clearTimeout(t); }, [search]); useEffect(() => { api.intelligence.pillars({ days: 30 }).then((p) => setStats(p?.customer || null)).catch(() => {}); }, []); const onFile = (e) => { const file = e.target.files && e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => { const { profiles, columns } = custProfilesFromCsv(String(reader.result || "")); if (!profiles.length) { toast({ title: "Nothing to import", body: "No rows with a usable phone number were found in that file.", kind: "danger" }); } else { setPending({ profiles, columns, name: file.name }); } if (fileRef.current) fileRef.current.value = ""; }; reader.readAsText(file); }; const runImport = async () => { if (!pending || importing) return; setImporting(true); try { let imported = 0, failed = 0; for (let i = 0; i < pending.profiles.length; i += 200) { const res = await api.outbound.importCustomerProfiles(pending.profiles.slice(i, i + 200)); imported += Number(res?.imported || 0); failed += Number(res?.failed || 0); } toast({ title: "Customer data imported", body: `${imported.toLocaleString()} profiles updated${failed ? `, ${failed} rows skipped` : ""}. Every conversation with them is now context-aware.` }); setPending(null); loadContacts(search); } catch (e) { toast({ title: "Import failed", body: (e && e.message) || "Please try again.", kind: "danger" }); } finally { setImporting(false); } }; const factCount = (c) => custFactEntries(c.metadata).length; const learnedCount = (c) => custFactEntries(c.enrichments).length; return (

Customers

The context engine. Bring your enterprise data — loyalty, POS, CRM exports — and every conversation starts already knowing the customer: no redundant questions, and everything they say flows back into their profile.

{stats ? (
{[ ["Profiles", stats.total_contacts, "customers known"], ["New (30d)", stats.new_contacts, "recently added"], ["Enriched by calls", stats.enriched_profiles, "conversations taught us something"], ["Dormant 60d+", stats.dormant_contacts, "win-back candidates"], ].map(([label, value, sub]) => (
{label}
{Number(value || 0).toLocaleString()}
{sub}
))}
) : null} {pending ? (
{pending.name}: {pending.profiles.length.toLocaleString()} customer profiles ready
{pending.columns.length ? <>Fact columns detected: {pending.columns.slice(0, 8).map((c) => c.replace(/_/g, " ")).join(", ")}{pending.columns.length > 8 ? "…" : ""} — these become facts the agent personalizes with. : "Only phone/name columns detected — add columns like loyalty_tier or average_basket for richer context."} {" "}Re-imports merge: existing facts are kept, new columns win per-field.
) : null}
Customer profiles
setSearch(e.target.value)}/>
{loading ?
Loading…
: !contacts.length ? (
No customer profiles yet. Import a CSV with a phone column — any other columns (loyalty tier, average basket, last visit, favourite brands…) ride along as facts, and from that moment every call with those customers is personalized and every conversation enriches their profile.
) : (
{contacts.map((c) => ( setOpenContact(c.id)}> ))}
Customer Phone Imported facts Learned on calls Last contacted
{c.full_name || "—"}{c.company ? · {c.company} : null} {c.phone_e164} {factCount(c) ? `${factCount(c)} facts` : none} {learnedCount(c) ? {learnedCount(c)} facts : not yet} {c.last_contacted_at ? new Date(c.last_contacted_at).toLocaleDateString() : "never"}
)}
How the loop works: imported data personalizes the next conversation → the conversation is analysed automatically → durable facts return to the profile → the Intelligence page turns it all into pillars and recommendations. Nothing here needs manual processing.
{openContact ? setOpenContact(null)} onGo={onGo}/> : null}
); };