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

sendButton.addEventListener('click', async () => {
  const message = userInput.value.trim();
  if (message) {
    displayMessage('Du: ' + message, 'user');
    userInput.value = '';

    try {
      const response = await fetch('http://localhost:7860/api/chat/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          "inputs": message,
        }),
      });
      const data = await response.json();

      displayMessage('Bot: ' + data, 'bot');
    } catch (error) {
      console.error('Fehler beim Senden der Nachricht:', error);
    }
  }
});

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
}