/* AI-Jhostter — chatbot impulsado por Google Gemini.
───────────────────────────────────────────────────────────────────────────
El chat llama al backend Express (server.js) en /api/chat.
El backend usa GEMINI_API_KEY (variable de entorno) para llamar a Gemini,
alimentado con el CV completo de Jhostter (PDF + datos del perfil).
La API key NUNCA se expone en el navegador.
─────────────────────────────────────────────────────────────────────────── */
const CHAT_API_CONFIG = {
// Endpoint del backend Express. Relativo al dominio donde se sirva.
url: "/api/chat",
// false = siempre usa el backend Gemini (no demo)
preferPreviewApi: false
};
const { useState, useRef, useEffect } = React;
function buildSystemPrompt(lang) {
const C = window.CONTENT;
const exp = C.experience.map((e) => `- ${e.role[lang]} @ ${e.company} (${e.period[lang]}): ${e.points[lang].join(" ")}`).join("\n");
const skills = C.skills.map((s) => `${s.group[lang]}: ${s.items.join(", ")}`).join("\n");
const projs = C.projects.map((p) => `* ${p.name} — ${p.summary[lang]} Stack: ${p.stack.join(", ")}. ${p.highlights[lang].join(" ")}`).join("\n");
const edu = C.education.map((e) => `- ${e.degree[lang]} @ ${e.school} (${e.period})`).join("\n");
const persona = lang === "es" ?
`Eres "AI-Jhostter", el gemelo de IA de Jhostter Antonio Valdez Ortiz, en su portafolio profesional. Hablas en PRIMERA PERSONA como si fueras Jhostter. Eres cercano, profesional y seguro, con un toque técnico. Responde SIEMPRE en español. Sé conciso (2-4 frases máximo, usa viñetas solo si ayuda). Si te preguntan algo que no está en mi información, dilo con honestidad y redirige a contactarme por WhatsApp o LinkedIn. Nunca inventes datos.` :
`You are "AI-Jhostter", the AI twin of Jhostter Antonio Valdez Ortiz, embedded in his professional portfolio. Speak in the FIRST PERSON as if you were Jhostter. You are warm, professional, and confident, with a technical edge. ALWAYS reply in English. Be concise (2-4 sentences max, bullets only if helpful). If asked something not in my info, say so honestly and redirect to contacting me on WhatsApp or LinkedIn. Never make up data.`;
return `${persona}
=== MI PERFIL / MY PROFILE ===
Nombre: Jhostter Antonio Valdez Ortiz
Roles: QA Automation Engineer, SDET, DevOps Technical Lead, AI Agent Engineer
Ubicación: Santo Domingo, República Dominicana. Disponible para remoto internacional.
Resumen: ${window.I18N[lang].about.body}
=== EXPERIENCIA / EXPERIENCE ===
${exp}
=== SKILLS ===
${skills}
=== PROYECTOS / PROJECTS ===
${projs}
=== EDUCACIÓN / EDUCATION ===
${edu}
=== CONTACTO ===
LinkedIn: ${C.contact.linkedin}
Teléfono: ${C.contact.phone}
WhatsApp: +1 ${C.contact.whatsapp}`;
}
function fmtMsg(text) {
const esc = String(text)
.replace(/&/g, "&").replace(//g, ">");
return esc
.replace(/\*\*(.+?)\*\*/g, "$1")
.replace(/\*(.+?)\*/g, "$1")
.replace(/\n/g, " ");
}
function AIChat({ lang, t }) {
const H = t.hero;
const [messages, setMessages] = useState([{ role: "bot", text: H.chatIntro }]);
const [input, setInput] = useState("");
const [busy, setBusy] = useState(false);
const [showSugg, setShowSugg] = useState(true);
const bodyRef = useRef(null);
const introRef = useRef(H.chatIntro);
// Reset intro when language changes (only if conversation is fresh)
useEffect(() => {
setMessages((m) => {
if (m.length === 1 && m[0].role === "bot") return [{ role: "bot", text: H.chatIntro }];
return m;
});
}, [lang]);
useEffect(() => {
if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
}, [messages, busy]);
// Llama al backend Gemini (server.js /api/chat).
// Envía el idioma e historial completo; el backend construye el system prompt con el CV.
async function callBackend(systemPrompt, history) {
const res = await fetch(CHAT_API_CONFIG.url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
lang,
messages: history
.filter((m) => m.role === "user" || m.role === "bot")
.map((m) => ({ role: m.role === "user" ? "user" : "assistant", content: m.text }))
})
});
if (!res.ok) throw new Error("backend-" + res.status);
const data = await res.json();
return data.reply || data.text || data.content || "";
}
async function send(text) {
const q = (text ?? input).trim();
if (!q || busy) return;
setShowSugg(false);
setInput("");
const history = [...messages, { role: "user", text: q }];
setMessages(history);
setBusy(true);
try {
const systemPrompt = buildSystemPrompt(lang);
const usePreviewApi = CHAT_API_CONFIG.preferPreviewApi && window.claude && window.claude.complete;
let reply;
if (usePreviewApi) {
// Demo dentro del entorno de previsualización
const convo = history.
filter((m) => m.role === "user" || m.role === "bot").
map((m) => `${m.role === "user" ? "Usuario" : "AI-Jhostter"}: ${m.text}`).
join("\n");
const prompt = `${systemPrompt}\n\n=== CONVERSACIÓN ===\n${convo}\nAI-Jhostter:`;
reply = await window.claude.complete(prompt);
} else {
// Producción: backend propio que protege la API key
reply = await callBackend(systemPrompt, history);
}
setMessages((m) => [...m, { role: "bot", text: (reply || "").trim() || H.chatError }]);
} catch (e) {
setMessages((m) => [...m, { role: "bot", text: H.chatError }]);
} finally {
setBusy(false);
}
}
return (