File size: 3,638 Bytes
1f63096
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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);
        }
    });
});