Update static/script.js

static/script.js

@@ -1,8 +1,58 @@
+// This will handle sending the message and displaying the response in the Gradio chatbot
 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);
+    const input = document.getElementById("user-input").value;
+    const chatbox = document.getElementById("chatbot");
+
+    if (input.trim() === "") {
+        return; // Ignore if no input is provided
     }
+
+    // Add the user's message to the chatbox
+    chatbox.innerHTML += `
+        <div class="user-message">
+            <p>${input}</p>
+        </div>
+    `;
+    
+    // Clear the input box
+    document.getElementById("user-input").value = "";
+
+    // Scroll to the bottom of the chat for new message
+    chatbox.scrollTop = chatbox.scrollHeight;
+
+    // Send the input to Gradio and get the bot response
+    fetch('/process_message', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ message: input })
+    })
+    .then(response => response.json())
+    .then(data => {
+        // Add the bot's response to the chatbox
+        chatbox.innerHTML += `
+            <div class="bot-message">
+                <p>${data.response}</p>
+            </div>
+        `;
+        
+        // Scroll to the bottom again after the bot's response
+        chatbox.scrollTop = chatbox.scrollHeight;
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        chatbox.innerHTML += `
+            <div class="bot-message">
+                <p>Sorry, something went wrong.</p>
+            </div>
+        `;
+    });
 }
+
+// Add an event listener for the Enter key to send messages
+document.getElementById("user-input").addEventListener("keypress", function(e) {
+    if (e.key === "Enter") {
+        sendMessage();
+    }
+});