<div class="chat-container">
    <div class="chat-header">
        <h1>Chat mit Mistral-Agent</h1>
    </div>
    <div class="chat-messages" id="chat-messages">
        <!-- Nachrichten werden hier angezeigt -->
    </div>
    <div class="chat-input">
        <input type="text" id="user-input" placeholder="Tippe eine Nachricht...">
        <button onclick="sendMessage()">Senden</button>
    </div>
</div>

<script>
function sendMessage() {
    const userInput = document.getElementById('user-input');
    const message = userInput.value.trim();
    if (message === '') return;

    // Benutzernachricht anzeigen
    displayMessage('Du', message);
    userInput.value = '';

    // Anfrage an die API deines Mistral-Agenten senden
    fetch('DEINE_API_URL', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ message: message }),
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Netzwerkantwort war nicht ok');
        }
        return response.json();
    })
    .then(data => {
        // Antwort des Agenten anzeigen
        displayMessage('Mistral-Agent', data.response);
    })
    .catch(error => {
        console.error('Fehler beim Senden der Nachricht:', error);
        displayMessage('Mistral-Agent', 'Entschuldigung, es gab einen Fehler beim Senden der Nachricht.');
    });
}

function displayMessage(sender, message) {
    const chatMessages = document.getElementById('chat-messages');
    const messageElement = document.createElement('div');
    messageElement.classList.add('message');
    messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
    chatMessages.appendChild(messageElement);
    chatMessages.scrollTop = chatMessages.scrollHeight;
}
</script>