Update chat.js

chat.js

@@ -1,25 +1,62 @@
-casync function query(data) {
-  const response = await fetch(
-    "https://api-inference.huggingface.co/models/eastwind/tinymix-8x1b-chat",
-    {
-      headers: {
-        'Authorization': 'Bearer ' + process.env.HUGGINGFACE_API_KEY
-      },
-      method: "POST",
-      body: JSON.stringify(data),
+// chat.js
+
+document.addEventListener("DOMContentLoaded", function() {
+    // Elemente aus dem DOM erfassen
+    const messageInput = document.getElementById("message-input");
+    const sendMessageButton = document.getElementById("send-message");
+    const conversationHistory = document.getElementById("conversation-history");
+    const newConversationButton = document.getElementById("new-conversation");
+    const clearConversationsButton = document.getElementById("clear-conversations");
+
+    // Funktion zum Senden einer Nachricht
+    function sendMessage() {
+        const userMessage = messageInput.value;
+        if (!userMessage) return;
+
+        // Fügt die Benutzernachricht dem Chatverlauf hinzu
+        addToConversationHistory("You", userMessage);
+
+        // API-Anfrage, um die Antwort des Chatbots zu erhalten
+        getBotResponse(userMessage).then(botMessage => {
+            addToConversationHistory("Bot", botMessage);
+        });
+
+        // Eingabefeld leeren
+        messageInput.value = "";
+    }
+
+    // Funktion zum Hinzufügen von Nachrichten zum Chatverlauf
+    function addToConversationHistory(sender, message) {
+        const messageElement = document.createElement("p");
+        messageElement.textContent = `${sender}: ${message}`;
+        conversationHistory.appendChild(messageElement);
     }
-  );
-  const result = await response.json();
-  return result;
-}
-
-// Beispiel einer Funktion, die aufgerufen wird, wenn der Benutzer eine Nachricht sendet
-async function sendMessage(message) {
-  try {
-    const response = await query({ "inputs": message });
-    console.log(JSON.stringify(response));
-    // Hier könnten Sie die Antwort in Ihrem Chat-Interface anzeigen
-  } catch (error) {
-    console.error('Error during the API request:', error);
-  }
-}
+
+    // Funktion, um die Antwort des Chatbots zu erhalten (Platzhalter)
+    async function getBotResponse(message) {
+        // Hier würde normalerweise eine Anfrage an den Server oder das Modell gesendet
+        // Für dieses Beispiel wird eine einfache Echo-Antwort zurückgegeben
+        await new Promise(resolve => setTimeout(resolve, 1000)); // Simuliert eine Netzwerkanfrage
+        return `Echo: ${message}`;
+    }
+
+    // Event-Listener für den Senden-Button
+    sendMessageButton.addEventListener("click", sendMessage);
+
+    // Event-Listener für das Drücken der Eingabetaste im Nachrichtenfeld
+    messageInput.addEventListener("keypress", function(event) {
+        if (event.key === "Enter") {
+            sendMessage();
+        }
+    });
+
+    // Event-Listener für den Button "Neue Unterhaltung"
+    newConversationButton.addEventListener("click", function() {
+        conversationHistory.innerHTML = "";
+    });
+
+    // Event-Listener für den Button "Unterhaltungen löschen"
+    clearConversationsButton.addEventListener("click", function() {
+        conversationHistory.innerHTML = "";
+    });
+});