File size: 3,638 Bytes
ccaff3f
 
 
 
 
 
 
 
 
 
cb26b7f
ccaff3f
 
 
 
 
 
 
 
 
 
 
cb26b7f
ccaff3f
 
 
 
 
 
 
 
 
 
 
cb26b7f
 
 
ccaff3f
 
cb26b7f
ccaff3f
 
 
 
cb26b7f
ccaff3f
 
 
cb26b7f
ccaff3f
 
cb26b7f
ccaff3f
 
 
 
 
 
 
 
 
 
cb26b7f
 
 
ccaff3f
cb26b7f
ccaff3f
 
 
 
 
 
 
 
 
 
cb26b7f
ccaff3f
cb26b7f
ccaff3f
 
 
cb26b7f
 
 
 
 
ccaff3f
cb26b7f
ccaff3f
 
 
 
cb26b7f
ccaff3f
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
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); });

    // Étoiles de satisfaction + affichage questionnaire
    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);
        }
    });
});