/* Cubi — mascota + chatbot de m3-cargo. Exporta: window.CubiArt → { cube, box, container, chip } (SVG strings, parametrizables por expresión/pose) window.Cubi → widget de chat flotante La mascota deriva del isotipo m³ (cubo isométrico: tapa lima, cara blanca, lado cobalto). */ (function (g) { const { useState, useRef, useEffect } = React; /* ---------------- Paleta ---------------- */ const C = { lime: "#84CC16", lime3: "#BEF264", lime7: "#4D7C0F", blue: "#1D4ED8", blue4: "#6090FA", blue5: "#3B6DF5", navy: "#0A1A2F", navy8: "#0F2440", white: "#FFFFFF", ink: "#0A1A2F", kraft: "#D8A965", kraft2: "#C2904E", kraftHi: "#E7C796", }; /* ---------------- Cara (ojos + boca), eje frontal ---------------- */ function face(cx, cy, expr, ink) { ink = ink || C.navy; const dot = (x, y, r) => ``; const ex = 6.2; // separación ojos let eyes, mouth; switch (expr) { case "wink": eyes = dot(cx - ex, cy, 2.7) + ``; mouth = ``; break; case "excited": eyes = dot(cx - ex, cy - 0.5, 3.1) + dot(cx + ex, cy - 0.5, 3.1); mouth = ``; break; case "thinking": eyes = dot(cx - ex, cy - 1.2, 2.6) + dot(cx + ex, cy - 1.2, 2.6); mouth = ``; break; case "surprised": eyes = dot(cx - ex, cy, 2.9) + dot(cx + ex, cy, 2.9); mouth = ``; break; case "sleeping": eyes = `` + ``; mouth = `` + `z`; break; default: // happy eyes = dot(cx - ex, cy, 2.9) + dot(cx + ex, cy, 2.9); mouth = ``; } return eyes + mouth; } /* ---------------- Cuerpo A: Cubo isométrico (on-brand, = isotipo) ---------------- */ function cube(size, expr, opts) { expr = expr || "happy"; opts = opts || {}; const arm = opts.wave ? `` : ""; return ``; } /* ---------------- Cuerpo B: Caja de cartón (cálido / juguetón) ---------------- */ function box(size, expr, opts) { expr = expr || "happy"; opts = opts || {}; return ``; } /* ---------------- Cuerpo C: Mini-contenedor (logístico) ---------------- */ function container(size, expr) { expr = expr || "happy"; let lines = ""; for (let i = 0; i < 6; i++) lines += ``; return ``; } /* =================================================================== CONTENEDOR CUBI — personaje principal (estilo carácter, on-brand) Contenedor azul con cara, brazos, piernas y zapatillas. =================================================================== */ const SHADE = (hex, p) => { const n = parseInt(hex.slice(1), 16); let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255; const f = p < 0 ? 0 : 255, t = Math.abs(p) / 100; r = Math.round((f - r) * t + r); g = Math.round((f - g) * t + g); b = Math.round((f - b) * t + b); return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); }; let UID = 0; const CUBI_BLUE = "#5BA6E6"; // azul claro oficial const CC = { bl: CUBI_BLUE, bld: SHADE(CUBI_BLUE, -32), bls: SHADE(CUBI_BLUE, -16), hi: SHADE(CUBI_BLUE, 30), ink: "#0D1B33", shoe: "#F4F7FB", red: "#E53935", tong: "#C62828", lime: "var(--lime-400)" }; // Normaliza expresiones del widget al set del personaje function exprMap(e) { return { happy: "feliz", wave: "feliz", excited: "orgulloso", thinking: "enfocado", wink: "amigable", surprised: "feliz", sleeping: "dormido", feliz: "feliz", enfocado: "enfocado", orgulloso: "orgulloso", amigable: "amigable" }[e] || "feliz"; } // Cara rica (ojos grandes + cejas + boca roja) function face2(cx, cy, expr) { const ink = CC.ink; const eye = (ex) => ``; const closed = (ex) => ``; const wink = (ex) => ``; const sleep = (ex) => ``; const browL = (a) => ``; const browR = (a) => ``; const open = ``; const smirk = ``; switch (expr) { case "enfocado": return browL(-7) + browR(-7) + eye(cx - 15) + eye(cx + 15) + smirk; case "orgulloso": return closed(cx - 15) + closed(cx + 15) + open; case "amigable": return browL(0) + browR(0) + eye(cx - 15) + wink(cx + 15) + open; case "dormido": return sleep(cx - 15) + sleep(cx + 15) + `z`; default: return browL(0) + browR(0) + eye(cx - 15) + eye(cx + 15) + open; } } // Accesorios sobre la "cabeza" del contenedor function accessory(kind) { switch (kind) { case "safari": return ` `; case "hardhat": return ` `; case "captain": return ``; default: return ""; } } // Cuerpo + cara (sin extremidades) — reutilizado por personaje y avatar. Acabado: sombra suave. function bodyFace(expr, acc) { let corr = ""; for (let x = 56; x <= 144; x += 11) corr += ``; const cast = [[48, 48], [142, 48], [48, 140], [142, 140]].map(([x, y]) => ``).join(""); const id = "cbg" + (UID++); const defs = ``; const overlay = ``; return `${defs} ${corr}${cast}${overlay} ${face2(100, 84, expr)} m³cargo ${accessory(acc)}`; } function hand(x, y) { return ``; } function limbs(pose) { const leg = (x) => ``; const shoe = (x) => ``; const legs = leg(84) + leg(116) + shoe(84) + shoe(116); let arms; if (pose === "hips") arms = `${hand(58, 130)}${hand(142, 130)}`; else if (pose === "proud") arms = `${hand(44, 152)}${hand(156, 152)}`; else arms = `${hand(40, 144)}${hand(180, 50)}`; return { legs, arms }; } function containerChar(size, opts) { opts = opts || {}; const expr = exprMap(opts.expr || "feliz"); const pose = opts.pose || ({ enfocado: "hips", orgulloso: "proud" }[expr] || "wave"); const { legs, arms } = limbs(pose); return ``; } // Sólo cuerpo+cara (para FAB / avatares de chat) function containerHead(size, expr) { return ``; } g.CubiArt = { cube, box, face, face2, containerChar, containerHead, container: containerChar, palette: C }; /* ===================================================================== Chat widget ===================================================================== */ // Avatar pequeño (contenedor Cubi) para FAB + burbujas function Avatar({ size = 34, expr = "happy" }) { return ; } /* --------- Guiones de conversación (sin backend) --------- */ const KB = { public: { greeting: { expr: "wave", text: "¡Hola! Soy Cubi 📦 Te ayudo a importar desde China sin enredos. ¿Qué necesitas?", chips: ["¿Cuánto cuesta?", "¿Cómo funciona?", "¿Cuánto demora?", "Hablar con un ejecutivo"] }, intents: [ { k: ["cuanto cuesta", "precio", "cotiz", "valor", "tarifa"], expr: "excited", text: "Tu precio total (flete + Ad valorem + IVA) se calcula al instante, sin registrarte. Ingresa volumen y producto en el cotizador y verás el total en segundos.", chips: ["Ir al cotizador", "¿Qué es el Ad valorem?", "¿Hay carga mínima?"] }, { k: ["ir al cotiz", "cotizador"], expr: "happy", action: { href: "#cotizador", label: "Abrir cotizador" }, text: "Te dejo el cotizador acá abajo 👇 Mueve el volumen y mira el total cambiar en vivo." }, { k: ["como funciona", "proceso", "pasos", "como es"], expr: "thinking", text: "Cuatro pasos, cero llamadas:\n1️⃣ Cotizas online\n2️⃣ Confirmas y te damos etiquetas en chino\n3️⃣ Tu proveedor envía a nuestra bodega en China (te avisamos con foto)\n4️⃣ Consolidamos y te lo entregamos en tu puerta.", chips: ["¿Cuánto demora?", "¿Cuánto cuesta?"] }, { k: ["demora", "tiempo", "cuanto tarda", "dias", "llega"], expr: "happy", text: "Un LCL China→Chile demora típicamente 30–40 días puerta a puerta, según puerto de origen y consolidación. Te mostramos cada estado en tiempo real.", chips: ["¿Cómo funciona?", "Hablar con un ejecutivo"] }, { k: ["carga minima", "minimo", "1 m3", "poco"], expr: "thinking", text: "La carga mínima es 1 m³. Si tu carga es menor, se cobra como 1 m³ igual — el cotizador lo ajusta solo.", chips: ["Ir al cotizador"] }, { k: ["ad valorem", "arancel", "impuesto", "iva", "tlc"], expr: "thinking", text: "Sobre el CIF (FOB ×1,17) se aplica Ad valorem (10%, o 6% si tu producto tiene TLC China–Chile) y luego IVA 19%. Todo queda desglosado en la cotización, sin letra chica.", chips: ["¿Qué es el TLC?", "Ir al cotizador"] }, { k: ["tlc", "tratado"], expr: "happy", text: "El TLC Chile–China rebaja el Ad valorem del 10% al 6% para la mayoría de productos. En el cotizador hay un switch para activarlo.", chips: ["Ir al cotizador"] }, { k: ["puedo importar", "que importar", "restriccion", "sag", "isp", "prohibido", "alimentos", "cosmetic"], expr: "thinking", text: "Casi todo. Algunas categorías requieren permiso: alimentos (SAG) y cosméticos/medicamentos (ISP). No te bloqueamos: te avisamos qué trámite necesitas.", chips: ["¿Cómo funciona?", "Hablar con un ejecutivo"] }, { k: ["rastrear", "tracking", "donde esta", "seguir", "codigo"], expr: "happy", action: { href: "https://portal.m3cargo.cl", label: "Ingresar al portal" }, text: "Puedes seguir tu carga en tiempo real desde tu portal de cliente. Si aún no tienes acceso, escríbenos y te ayudamos." }, { k: ["ejecutivo", "humano", "persona", "whatsapp", "hablar", "contacto"], expr: "happy", action: { href: "https://wa.me/56936716236", label: "Escribir por WhatsApp" }, text: "¡Claro! Un ejecutivo te atiende por WhatsApp. También puedo seguir respondiendo por acá 😄" }, { k: ["ingresar", "login", "portal", "cuenta"], expr: "happy", action: { href: "https://portal.m3cargo.cl", label: "Ir al portal" }, text: "Si ya eres cliente, entra al portal para ver tus envíos, documentos y facturas." }, { k: ["gracias", "genial", "perfecto", "ok", "buena"], expr: "excited", text: "¡Para eso estoy! 📦 Si te animas, cotizar toma 10 segundos.", chips: ["Ir al cotizador"] }, ], fallback: { expr: "thinking", text: "Mmm, no estoy seguro de eso, pero puedo ayudarte con precios, tiempos, el proceso o restricciones. ¿Por dónde partimos?", chips: ["¿Cuánto cuesta?", "¿Cómo funciona?", "Hablar con un ejecutivo"] }, }, portal: { greeting: { expr: "wave", text: "¡Hola, Carolina! Soy Cubi 📦 Tu asistente en el portal. ¿Qué reviso por ti?", chips: ["Estado de mis envíos", "¿Tengo algo por pagar?", "Documentos pendientes", "Agendar despacho"] }, intents: [ { k: ["estado", "mis envios", "donde esta", "envio", "carga", "seguir"], expr: "happy", text: "Tienes envíos activos en curso. El SHP-2418 está EN ADUANA y podría requerir tu atención por un aforo. Ábrelo en «Mis envíos» para ver la línea de tiempo y la evidencia.", chips: ["¿Qué es un aforo?", "Documentos pendientes"] }, { k: ["pagar", "factura", "por pagar", "deuda", "cobro", "facturacion"], expr: "thinking", text: "En Facturación verás lo que está por pagar y los impuestos adelantados. Cada factura tiene su botón [Pagar]. ¿Quieres que te lleve allí?", chips: ["Ir a Facturación", "Documentos pendientes"] }, { k: ["documento", "papeles", "factura comercial", "subir", "pendiente"], expr: "thinking", text: "Hay documentos pendientes o rechazados en tu cuenta. En «Documentos» puedes verlos por envío y subir los que falten para no frenar la liberación en aduana.", chips: ["Estado de mis envíos", "¿Qué es un aforo?"] }, { k: ["despacho", "agendar", "entrega", "camion", "horario", "slot"], expr: "excited", text: "Para coordinar la entrega, entra a «Despacho» y elige un slot de camión en la grilla de la semana. Te confirmo el resumen al tiro.", chips: ["Estado de mis envíos"] }, { k: ["aforo", "aduana", "revision", "sna"], expr: "thinking", text: "Un aforo es una revisión de Aduana (documental o físico). No siempre implica costo extra; te avisamos apenas hay novedad y qué necesitamos de ti. Tu SHP-2418 está en ese estado.", chips: ["Documentos pendientes"] }, { k: ["puntos", "recompensa", "beneficio", "referir", "premio"], expr: "excited", text: "Acumulas puntos por cada m³ importado y por referir clientes. Revisa tu nivel y canjes en «Recompensas».", chips: ["Estado de mis envíos"] }, { k: ["ejecutivo", "humano", "persona", "whatsapp", "ayuda", "hablar"], expr: "happy", action: { href: "https://wa.me/56936716236", label: "Escribir por WhatsApp" }, text: "Te conecto con tu ejecutivo por WhatsApp. Igual sigo aquí para lo que necesites 😄" }, { k: ["gracias", "genial", "perfecto", "ok", "listo"], expr: "excited", text: "¡Cuando quieras, Carolina! 📦 Reviso lo que necesites del portal." }, ], fallback: { expr: "thinking", text: "No tengo eso a mano, pero puedo ayudarte con tus envíos, pagos, documentos o despacho. ¿Qué reviso?", chips: ["Estado de mis envíos", "¿Tengo algo por pagar?", "Documentos pendientes"] }, }, }; function norm(s) { return s.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""); } function matchIntent(ctx, text) { const t = norm(text); const kb = KB[ctx] || KB.public; for (const it of kb.intents) if (it.k.some(k => t.includes(norm(k)))) return it; return kb.fallback; } function Cubi({ context = "public" }) { const kb = KB[context] || KB.public; const LS = "cubi_chat_" + context; const [open, setOpen] = useState(false); const [typing, setTyping] = useState(false); const [input, setInput] = useState(""); const [msgs, setMsgs] = useState(() => { try { const s = JSON.parse(localStorage.getItem(LS)); if (s && s.length) return s; } catch (e) {} return [{ from: "bot", text: kb.greeting.text, expr: kb.greeting.expr, chips: kb.greeting.chips }]; }); const [chips, setChips] = useState(() => kb.greeting.chips); const scrollRef = useRef(null); useEffect(() => { try { localStorage.setItem(LS, JSON.stringify(msgs.slice(-30))); } catch (e) {} }, [msgs]); useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [msgs, typing, open]); function pushBot(intent) { setTyping(true); setChips([]); setTimeout(() => { setTyping(false); setMsgs(m => [...m, { from: "bot", text: intent.text, expr: intent.expr || "happy", action: intent.action }]); setChips(intent.chips || []); }, 520 + Math.min(intent.text.length * 8, 700)); } function send(raw) { const text = (raw == null ? input : raw).trim(); if (!text) return; setMsgs(m => [...m, { from: "me", text }]); setInput(""); pushBot(matchIntent(context, text)); } const headExpr = typing ? "thinking" : "happy"; return (

{/* Ventana */} {open && ( )} {/* Botón flotante */}

); } /* Visibilidad del chat: ver shared/preview-gate.js (CUBI_ENABLED, ?cubi=on/off) */ const cubiOn = !!g.CUBI_ON; // definido en shared/preview-gate.js g.Cubi = function CubiGate(props) { return cubiOn ? React.createElement(Cubi, props) : null; }; })(window);