static/js/app.js

function sendMessage() {
    const userInput = document.getElementById('userInput');
    const chatlog = document.getElementById('chatlog');
    const messageText = userInput.value.trim();

    if (messageText === '') return;

    // Tambahkan pesan pengguna ke chatlog
    const userMessage = document.createElement('div');
    userMessage.className = 'chat-message user-message';
    userMessage.innerHTML = `
        <span class="message-sender">Anda:</span>
        <span class="message-text">${messageText}</span>
    `;
    chatlog.appendChild(userMessage);

    // Tambahkan indikator "sedang mengetik"
    const typingIndicator = document.createElement('div');
    typingIndicator.className = 'chat-message bot-message typing-indicator';
    typingIndicator.innerHTML = `
        <span class="message-sender">EyeBot:</span>
        <span class="message-text">Sedang mengetik...</span>
    `;
    chatlog.appendChild(typingIndicator);

    // Scroll ke bawah
    chatlog.scrollTop = chatlog.scrollHeight;

    // Kirim pesan ke server
    fetch('/predict', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ message: messageText })
    })
    .then(response => response.json())
    // .then(data => {
    //     // Hapus indikator "sedang mengetik"
    //     chatlog.removeChild(typingIndicator);

    //     // Tambahkan respons bot ke chatlog
    //     const botMessage = document.createElement('div');
    //     botMessage.className = 'chat-message bot-message';
    //     botMessage.innerHTML = `
    //         <span class="message-sender">EyeBot:</span>
    //         <span class="message-text">${data.answer}</span>
    //     `;
    //     chatlog.appendChild(botMessage);

    //     // Scroll ke bawah
    //     chatlog.scrollTop = chatlog.scrollHeight;
    // })
    .then(data => {
    // Hapus indikator "sedang mengetik"
    chatlog.removeChild(typingIndicator);

    // Tambahkan respons bot ke chatlog
    const botMessage = document.createElement('div');
    botMessage.className = 'chat-message bot-message';
    botMessage.innerHTML = `
        <span class="message-sender">EyeBot:</span>
        <span class="message-text">${data.answer}</span>
        <span class="predicted-tag">Predicted Tag: ${data.predicted_tag} (${data.probabilities[data.predicted_tag].toFixed(4)})</span>
        <button class="toggle-probs">Show Probabilities</button>
        <div class="probabilities" style="display: none;">
            Probabilities for each tag:<br>
            ${Object.entries(data.probabilities).map(([tag, prob]) => `Tag: ${tag}, Prob: ${prob.toFixed(4)}`).join('<br>')}
            <br>Max Prob: ${data.probabilities[data.predicted_tag].toFixed(4)}, Predicted Tag: ${data.predicted_tag}
        </div>
    `;
    chatlog.appendChild(botMessage);

    // Tambahkan event listener untuk tombol toggle
    const toggleButton = botMessage.querySelector('.toggle-probs');
    const probsDiv = botMessage.querySelector('.probabilities');
     toggleButton.addEventListener('click', () => {
        if (probsDiv.style.display === 'none') {
            probsDiv.style.display = 'block';
            toggleButton.textContent = 'Hide Probabilities';
        } else {
            probsDiv.style.display = 'none';
            toggleButton.textContent = 'Show Probabilities';
        }
    });

    // Scroll ke bawah
    chatlog.scrollTop = chatlog.scrollHeight;
})
    .catch(error => {
        console.error('Error:', error);
        // Hapus indikator "sedang mengetik"
        chatlog.removeChild(typingIndicator);

        const errorMessage = document.createElement('div');
        errorMessage.className = 'chat-message bot-message';
        errorMessage.innerHTML = `
            <span class="message-sender">EyeBot:</span>
            <span class="message-text">Maaf, terjadi kesalahan. Silakan coba lagi.</span>
        `;
        chatlog.appendChild(errorMessage);

        // Scroll ke bawah
        chatlog.scrollTop = chatlog.scrollHeight;
    });

    // Kosongkan input
    userInput.value = '';
}

function clearChat() {
    const chatlog = document.getElementById('chatlog');
    chatlog.innerHTML = `
        <div class="chat-message bot-message">
            <span class="message-sender">EyeBot:</span>
            <span class="message-text">Halo! Saya EyeBot, siap membantu Anda dengan informasi kesehatan mata. Apa yang bisa saya bantu?</span>
        </div>
    `;
}