// Floating Andes AI chat widget.
// Actúa como asesor inmobiliario editorial local: conoce la ciudad que el
// usuario está mirando (cuando aplica), sugiere propiedades reales del
// inventario y deriva a WhatsApp cuando detecta intención.
const ACE_WHATSAPP_URL = 'https://wa.me/34910555092?text=' +
encodeURIComponent('Hola Andes Capital Estates, vengo del chat de la web y me gustaría seguir la conversación con un asesor.');
// Captura el contexto de la página actual para enviarlo al backend.
// El backend lo usa para que el AI hable como local de la ciudad concreta
// y conozca el inventario visible.
function getPageContext() {
const hash = window.location.hash || '';
const cityMatch = hash.match(/^#ciudad\/([\w-]+)/);
const properties = window.PROPERTIES || [];
const regions = window.REGIONS || [];
const cityLandings = window.CITY_LANDINGS || {};
if (cityMatch) {
const cityId = cityMatch[1];
const data = cityLandings[cityId];
const region = regions.find(r => r.id === cityId);
const macro = data?.macro || region?.tipo || null;
// Propiedades de la macro región activa (la ciudad puede no tener stock propio).
const matches = properties
.filter(p => p.region === (data?.region || region?.nombre) || p.macro === macro)
.slice(0, 10);
return {
pageType: 'city',
cityId,
cityName: data?.nombre || region?.capital || cityId,
regionName: data?.region || region?.nombre || '',
macro,
heroLede: data?.hero_lede || '',
stats: data?.stats || [],
properties: matches,
};
}
if (hash === '#agregar-propiedad') {
return { pageType: 'addProperty', properties: [] };
}
if (hash === '#internacional') {
return { pageType: 'international', properties: [] };
}
return {
pageType: 'home',
properties: properties.slice(0, 10),
};
}
// Parsea la respuesta del AI extrayendo [ficha:id] y [whatsapp] de la texto plano.
function parseAssistantMessage(raw) {
const result = { text: raw, fichas: [], whatsapp: false };
if (!raw) return result;
const properties = window.PROPERTIES || [];
// [ficha:p-cu-1] → tarjeta
const fichaRe = /\[ficha:([\w-]+)\]/g;
result.text = raw.replace(fichaRe, (_, id) => {
const p = properties.find(x => x.id === id);
if (p && !result.fichas.find(f => f.id === id)) result.fichas.push(p);
return ''; // se elimina del texto; la tarjeta se renderiza aparte
});
// [whatsapp] → botón
if (/\[whatsapp\]/i.test(result.text)) {
result.whatsapp = true;
result.text = result.text.replace(/\[whatsapp\]/gi, '');
}
result.text = result.text.replace(/\n{3,}/g, '\n\n').trim();
return result;
}
function AndesAI() {
const [open, setOpen] = React.useState(false);
const [msgs, setMsgs] = React.useState([
{
role: 'ai',
text: 'Hola, soy Andes AI. Conozco las 25 regiones del Perú al detalle y puedo ayudarte a decidir dónde encajaría mejor tu próxima vida o tu próxima inversión. Si ya estás mirando una ciudad concreta, dímelo y entramos en barrio. ¿Por dónde empezamos?',
fichas: [],
},
]);
const [input, setInput] = React.useState('');
const [typing, setTyping] = React.useState(false);
const scrollRef = React.useRef(null);
React.useEffect(() => {
if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}, [msgs, typing]);
// Sugerencias iniciales: cambian según la página activa.
const chips = React.useMemo(() => {
const ctx = getPageContext();
if (ctx.pageType === 'city') {
return [
`Cuéntame de ${ctx.cityName} como si vivieras allí`,
'¿Qué barrio me recomendarías?',
'¿Cómo está la rentabilidad por aquí?',
'Muéstrame opciones reales del inventario',
];
}
if (ctx.pageType === 'addProperty') {
return [
'¿Cómo funciona la verificación?',
'¿Qué comisión cobran?',
'¿En qué plazo me contactan?',
'¿Qué propiedades buscan?',
];
}
return [
'Busco vida cerca del mar',
'Me interesa Cusco para invertir',
'¿Qué barrio de Lima me recomiendas?',
'¿Qué trámites necesito siendo español?',
];
}, [msgs.length === 1]);
// Fallback offline si la API falla.
function fallbackReply(userText) {
const t = userText.toLowerCase();
if (t.includes('mar') || t.includes('playa') || t.includes('costa')) {
return 'Si te llama el mar, Miraflores y Barranco en Lima son dos mundos pegados al Pacífico: uno urbano y gastronómico, otro bohemio y de bares de pisco. ¿Te imaginas más en una vida de calles tranquilas o de movimiento constante?';
}
if (t.includes('cusco')) {
return 'Cusco es lento, alto y muy vivo. El barrio de San Blas concentra casi todo lo interesante: callejuelas empedradas, talleres, mercados y rentabilidades por encima del 9% en alquiler vacacional. ¿Buscas vivir allí o ponerlo a rentar?';
}
return 'En este momento no puedo conectarme bien con mi base. Si me cuentas qué ciudad o qué tipo de vida buscas, te oriento por aquí o te paso con un asesor humano.';
}
async function callAndesAI(history) {
const messages = history.map(m => ({
role: m.role === 'ai' ? 'assistant' : 'user',
content: m.text,
}));
const context = getPageContext();
const r = await fetch('/api/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ messages, context }),
});
if (!r.ok) throw new Error('chat-' + r.status);
const data = await r.json();
if (!data.reply) throw new Error('empty-reply');
return data.reply;
}
async function send(text) {
if (!text.trim() || typing) return;
const userMsg = { role: 'user', text };
const nextHistory = [...msgs, userMsg];
setMsgs(nextHistory);
setInput('');
setTyping(true);
try {
const raw = await callAndesAI(nextHistory);
const parsed = parseAssistantMessage(raw);
setMsgs(m => [...m, { role: 'ai', text: parsed.text, fichas: parsed.fichas, whatsapp: parsed.whatsapp }]);
} catch (e) {
console.warn('[Andes AI] fallback:', e.message);
setMsgs(m => [...m, { role: 'ai', text: fallbackReply(text), fichas: [] }]);
} finally {
setTyping(false);
}
}
return (
<>
{/* FAB */}
{/* Panel */}
Andes AI
ASESOR EN LÍNEA
{msgs.map((m, i) => (
))}
{typing && (
)}
{msgs.length <= 1 && (
{chips.map(c => (
))}
)}
setInput(e.target.value)}
onKeyDown={e => e.key === 'Enter' && send(input)}
placeholder="Pregúntale a tu asesor local…"
style={chatStyles.input}
disabled={typing}
/>
);
}
// ─── Subcomponentes ─────────────────────────────────────────────────────
function MessageBubble({ m }) {
if (m.role === 'user') {
return (