Update static/script.js

static/script.js

@@ -1,8 +1,30 @@
-function sendMessage() {
-    const input = document.getElementById('user-input').value;
-    if (input) {
-        // Send message to Flask server (This would be integrated with Gradio's response mechanism)
-        // Placeholder for now
-        alert('Message sent: ' + input);
-    }
+let state = null;
+
+async function sendMessage() {
+    let inputText = document.getElementById("user-input").value;
+    document.getElementById("user-input").value = "";
+    let chatBox = document.getElementById("chat-box");
+
+    // Display the user's message
+    chatBox.innerHTML += `<div>User: ${inputText}</div>`;
+
+    // Send the message to the Gradio backend (via your Gradio app)
+    let response = await fetch("http://localhost:7860/api/predict/", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            data: [inputText, state],
+        }),
+    });
+
+    let result = await response.json();
+    let botMessage = result.data[0];
+
+    // Display the bot's response
+    chatBox.innerHTML += `<div>Bot: ${botMessage}</div>`;
+    chatBox.scrollTop = chatBox.scrollHeight;
+
+    state = result.data[1]; // Update the state for next round
 }