/* eslint-disable */ /* global React */ // ============================================================ // JB Chatbot — chatbot.jsx // À ajouter dans index.html avant : // // À ajouter dans pipeline-app.jsx juste avant le return : // // Remplacer WORKER_URL par l'URL de ton Cloudflare Worker // ============================================================ const WORKER_URL = "https://jb-chatbot-proxy.jb-allombert.workers.dev"; const { useState, useRef, useEffect, useCallback } = React; // ── Suggestions rapides ────────────────────────────────────── const SUGGESTIONS = [ "Tu cherches quoi ?", "Ton stack technique ?", "Parle-moi du projet Japon", "Tes certifications ?", "Ton niveau en SQL ?", "Ton parcours avant la data ?", ]; // ── Chargement du system prompt depuis jb_knowledge.json ──── async function buildSystemPrompt() { const res = await fetch("./data/jb_knowledge.json"); const k = await res.json(); const ci = k.chatbot_instructions; return `${ci.persona} ${ci.language} RÈGLES ABSOLUES : - ${ci.honesty} - ${ci.privacy} - ${ci.scope} - Hors-sujet : ${ci.off_topic} TA SITUATION ACTUELLE : ${k.situation_actuelle} TON RÉSUMÉ : ${k.summary} TES COMPÉTENCES : ${k.skills.languages.map(s => `${s.name} (${s.level}/100) — ${s.details}`).join(" | ")} ${k.skills.platforms.map(s => `${s.name} — ${s.details}`).join(" | ")} Concepts : ${k.skills.concepts.join(", ")} TES CERTIFICATIONS : Obtenues : ${k.certifications.obtained.map(c => `${c.name} (${c.date})`).join(", ")} En cours : ${k.certifications.in_progress.map(c => `${c.name} prévu ${c.planned}`).join(", ")} TES PROJETS : ${k.projects.map(p => `[${p.name}] ${(p.tech_stack||[]).join(", ")} — ${p.description}`).join("\n")} TON EXPÉRIENCE : ${k.experience.map(e => `[${e.period}] ${e.title} chez ${e.company} — ${e.description}`).join("\n")} TA FORMATION : ${k.education.map(e => `${e.title} (${e.period}) — ${e.details}`).join("\n")} CE QUE TU CHERCHES : ${k.job_search.target}. Dispo : ${k.job_search.availability}. ${k.job_search.strengths.join(" | ")} FAQ : ${k.faq.map(f => `Q: ${f.q} → ${f.a}`).join("\n")} MESSAGE CLÉ : ${ci.key_message}`; } // ── SVG Personnage stickman ────────────────────────────────── function JBCharacter({ isOpen }) { return ( ); } // ── Composant principal ────────────────────────────────────── function ChatBot() { const [open, setOpen] = useState(false); const [messages, setMessages] = useState([ { role: "model", parts: [{ text: "Salut 👾 Je suis JB — pose-moi ce que tu veux sur mon parcours ou mes projets." }], }, ]); const [input, setInput] = useState(""); const [loading, setLoading] = useState(false); const [systemPrompt, setSystemPrompt] = useState(null); const [error, setError] = useState(null); const [suggestionsShown, setSuggestionsShown] = useState(true); const [bubbleVisible, setBubbleVisible] = useState(false); const bottomRef = useRef(null); const inputRef = useRef(null); useEffect(() => { buildSystemPrompt().then(setSystemPrompt).catch(() => setError("Erreur de chargement du contexte.")); // Affiche la bulle après 1 aller-retour (1s delay + 3s walk = 4s) const t = setTimeout(() => setBubbleVisible(true), 4000); return () => clearTimeout(t); }, []); useEffect(() => { bottomRef.current?.scrollIntoView({ behavior: "smooth" }); }, [messages, loading]); useEffect(() => { if (open) setTimeout(() => inputRef.current?.focus(), 150); }, [open]); const sendMessage = useCallback(async (text) => { const userText = (text || input).trim(); if (!userText || loading || !systemPrompt) return; setSuggestionsShown(false); setInput(""); setError(null); const userMsg = { role: "user", parts: [{ text: userText }] }; const updated = [...messages, userMsg]; setMessages(updated); setLoading(true); const geminiMessages = [ { role: "user", parts: [{ text: systemPrompt }] }, { role: "model", parts: [{ text: "Compris. Je suis JB, prêt à répondre." }] }, ...updated, ]; try { const res = await fetch(WORKER_URL, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: geminiMessages }), }); const data = await res.json(); if (data.error) { setError(data.error); setLoading(false); return; } setMessages(prev => [...prev, { role: "model", parts: [{ text: data.reply }] }]); } catch { setError("Erreur réseau. Vérifie ta connexion."); } finally { setLoading(false); } }, [input, loading, systemPrompt, messages]); function handleKey(e) { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendMessage(); } } return ( <> {/* ── STYLES ── */} {/* ── Bulle d'intro ── */} {bubbleVisible && !open && (

JB.exe Salut — je suis JB.
Une question ? 👾

)} {/* ── Personnage ── */}

{ setOpen(o => !o); setBubbleVisible(false); }} title={open ? "Fermer le chat" : "Discuter avec JB"} >

{/* ── Fenêtre de chat ── */} {open && (

e.stopPropagation()}> {/* Header */}

JB · Data Engineer online

{/* Messages */}

{messages.map((msg, i) => (

{msg.role === "model" && JB}

{msg.parts[0].text}

))} {loading && (

)} {error &&

{error}

} {suggestionsShown && messages.length === 1 && (

{SUGGESTIONS.map((s, i) => ( ))}

)}

{/* Input */}

setInput(e.target.value)} onKeyDown={handleKey} placeholder="Pose ta question..." disabled={loading || !systemPrompt} maxLength={400} />

)} ); }