|
|
console.log('✅ script.js chargé');
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
const btn = document.getElementById('sendBtn');
|
|
|
const input = document.getElementById('question');
|
|
|
const chat = document.getElementById('chat');
|
|
|
const intentLbl = document.getElementById('intent');
|
|
|
const matchedLbl = document.getElementById('matched');
|
|
|
const confFill = document.getElementById('conf-fill');
|
|
|
const stars = document.querySelectorAll('.star');
|
|
|
const surveyLink = document.getElementById('survey-link');
|
|
|
|
|
|
let isLoading = false;
|
|
|
|
|
|
async function sendQuestion(q) {
|
|
|
const question = q.trim();
|
|
|
if (!question || isLoading) return;
|
|
|
|
|
|
chat.innerHTML += `<div class="user-msg"><b>Vous :</b> ${question}</div>`;
|
|
|
input.value = '';
|
|
|
input.focus();
|
|
|
|
|
|
stars.forEach(s => { s.textContent = "☆"; s.style.pointerEvents = 'auto'; });
|
|
|
|
|
|
const loaderDiv = document.createElement('div');
|
|
|
loaderDiv.className = 'bot-msg';
|
|
|
loaderDiv.innerHTML = '<i>💭 Bot réfléchit…</i>';
|
|
|
chat.appendChild(loaderDiv);
|
|
|
chat.scrollTop = chat.scrollHeight;
|
|
|
|
|
|
isLoading = true;
|
|
|
|
|
|
try {
|
|
|
const res = await fetch('/ask', {
|
|
|
method: 'POST',
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
body: JSON.stringify({ question })
|
|
|
});
|
|
|
|
|
|
const data = await res.json();
|
|
|
loaderDiv.remove();
|
|
|
|
|
|
chat.innerHTML += `<div class="bot-msg"><b>Bot :</b> ${data.response}</div>`;
|
|
|
|
|
|
if (data.recs && data.recs.length > 0) {
|
|
|
const suggDiv = document.createElement('div');
|
|
|
suggDiv.className = 'recs';
|
|
|
|
|
|
data.recs.forEach(r => {
|
|
|
const a = document.createElement('a');
|
|
|
a.textContent = r;
|
|
|
suggDiv.appendChild(a);
|
|
|
});
|
|
|
|
|
|
chat.appendChild(suggDiv);
|
|
|
}
|
|
|
|
|
|
intentLbl.textContent = data.intent;
|
|
|
matchedLbl.textContent = data.matched;
|
|
|
confFill.style.width = data.confidence + "%";
|
|
|
confFill.textContent = data.confidence + "%";
|
|
|
|
|
|
confFill.style.background =
|
|
|
data.confidence < 40 ? "#E53935" :
|
|
|
data.confidence < 80 ? "#FB8C00" : "#43A047";
|
|
|
|
|
|
} catch (err) {
|
|
|
loaderDiv.remove();
|
|
|
chat.innerHTML += '<div class="bot-msg"><b>Erreur :</b> Impossible de contacter le serveur.</div>';
|
|
|
console.error(err);
|
|
|
}
|
|
|
|
|
|
chat.scrollTop = chat.scrollHeight;
|
|
|
isLoading = false;
|
|
|
}
|
|
|
|
|
|
btn.addEventListener('click', () => sendQuestion(input.value));
|
|
|
input.addEventListener('keypress', e => { if (e.key === 'Enter') sendQuestion(input.value); });
|
|
|
|
|
|
|
|
|
stars.forEach(s => {
|
|
|
s.addEventListener('click', () => {
|
|
|
const val = parseInt(s.dataset.value);
|
|
|
stars.forEach((st, i) => {
|
|
|
st.textContent = i < val ? "★" : "☆";
|
|
|
st.style.pointerEvents = 'none';
|
|
|
});
|
|
|
|
|
|
chat.innerHTML += `<div><i>⭐ Merci pour votre évaluation : ${val} / 5</i></div>`;
|
|
|
surveyLink.style.display = 'block';
|
|
|
});
|
|
|
});
|
|
|
|
|
|
chat.addEventListener('click', (e) => {
|
|
|
if (e.target.tagName === 'A' && e.target.parentElement.classList.contains('recs')) {
|
|
|
sendQuestion(e.target.textContent);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|