chat.js

const userInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-message');
const chatBox = document.getElementById('conversation-history');
const status = document.getElementById('status');

// Funktion, um eine Abfrage an die Hugging Face API zu senden
async function queryHuggingFace(data) {
    const response = await fetch(
        "https://api-inference.huggingface.co/models/mistralai/Mixtral-8x7B-v0.1",
        {
            headers: { Authorization: "Bearer IhrHuggingFaceAPIToken" },
            method: "POST",
            body: JSON.stringify(data),
        }
    );
    const result = await response.json();
    return result;
}

// Event-Listener für den Senden-Button
sendButton.addEventListener('click', () => {
    const message = userInput.value.trim();
    if (!message) return;

    displayMessage('Du: ' + message, 'user');
    userInput.value = '';

    status.textContent = 'Der Bot antwortet...';
    queryHuggingFace({"inputs": message})
        .then(response => {
            displayMessage('Bot: ' + response.generated_text, 'bot');
            status.textContent = '';
        })
        .catch(error => {
            displayMessage('Fehler beim Generieren der Antwort: ' + error, 'error');
            status.textContent = '';
        });
});

// Nachricht im Chat anzeigen
function displayMessage(message, sender) {
    const messageElement = document.createElement('div');
    messageElement.className = 'message ' + sender;
    messageElement.textContent = message;
    chatBox.appendChild(messageElement);
    chatBox.scrollTop = chatBox.scrollHeight; // Scroll to the bottom
}

// Enter-Taste als Alternative zum Senden
userInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        sendButton.click();
    }
});