Spaces:

hamza82
/

test

Sleeping

App Files Files Community

hamza82 commited on Mar 3, 2024

Commit

dd96953

verified ·

1 Parent(s): f431280

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +38 -29

static/index.html CHANGED Viewed

@@ -2,49 +2,57 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Chat Simulation</title>
     <script>
-        async function fetchAuthToken() {
-            try {
-                const response = await fetch('/custom-auth');
-                const data = await response.json();
-                document.getElementById('authToken').textContent = `Auth Token: ${data.token}`;
-            } catch (error) {
-                console.error('Error:', error);
-            }
-        }
         async function sendMessage() {
             const inputElement = document.getElementById('messageInput');
-            const message = inputElement.value;
-            if (!message.trim()) return; // Ignore empty messages
             // Display the user's message
             displayMessage(`You: ${message}`, 'user');
-            // Simulate sending the message and receiving a response
-            // Here, you'd replace this with a call to your actual message processing endpoint
-            // Since the provided code does not specify an endpoint for sending messages, this is a placeholder
-            const simulatedResponse = "This is a simulated response based on your message.";
-            displayMessage(`Server: ${simulatedResponse}`, 'server');
             // Clear the input field
             inputElement.value = '';
         }
-        function displayMessage(text, sender) {
-            const messagesContainer = document.getElementById('messages');
             const messageElement = document.createElement('p');
             messageElement.textContent = text;
-            messageElement.className = sender; // Apply different styling based on the sender
-            messagesContainer.appendChild(messageElement);
         }
-        // Event listener for the Enter key in the message input
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('messageInput').addEventListener('keydown', function(event) {
                 if (event.key === 'Enter') {
                     sendMessage();
                 }
             });
         });
@@ -52,18 +60,19 @@
     <style>
         .user { color: blue; }
         .server { color: green; }
     </style>
 </head>
-<body onload="fetchAuthToken()">
-    <h1>Simple Chat Simulation</h1>
-    <div id="authToken"></div>
-    <div id="messages" style="height: 200px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;"></div>
     <input type="text" id="messageInput" placeholder="Type your message here and press Enter">
 </body>
 </html>
 <!-- ################################################################################################## -->
 <!-- <!DOCTYPE html>
 <html lang="en">

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <title>Chat Interface</title>
     <script>
+        // Function to handle sending messages and receiving responses
         async function sendMessage() {
             const inputElement = document.getElementById('messageInput');
+            const messagesContainer = document.getElementById('messages');
+            const message = inputElement.value.trim();
+            // Prevent sending empty messages
+            if (!message) return;
             // Display the user's message
             displayMessage(`You: ${message}`, 'user');
+            // Assuming the same '/custom-auth' endpoint is used for messages
+            try {
+                const response = await fetch('/custom-auth', {
+                    method: 'POST', // Assuming you adjust your backend to accept POST for chat messages
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ message }),
+                });
+                const data = await response.json();
+                // Display the received response
+                displayMessage(`Server: ${data.response}`, 'server'); // Adjust 'data.response' based on your actual response structure
+            } catch (error) {
+                console.error('Error:', error);
+                displayMessage('Error sending message.', 'error');
+            }
             // Clear the input field
             inputElement.value = '';
         }
+        // Function to display messages
+        function displayMessage(text, className) {
             const messageElement = document.createElement('p');
             messageElement.textContent = text;
+            messageElement.className = className;
+            document.getElementById('messages').appendChild(messageElement);
         }
+        // Attach event listener to input field for the Enter key
+        document.addEventListener('DOMContentLoaded', () => {
+            const inputElement = document.getElementById('messageInput');
+            inputElement.addEventListener('keydown', (event) => {
                 if (event.key === 'Enter') {
                     sendMessage();
+                    event.preventDefault(); // Prevent the default action to stop form submission
                 }
             });
         });
     <style>
         .user { color: blue; }
         .server { color: green; }
+        .error { color: red; }
     </style>
 </head>
+<body>
+    <h1>Chat with Server</h1>
+    <div id="messages" style="height: 300px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;"></div>
     <input type="text" id="messageInput" placeholder="Type your message here and press Enter">
 </body>
 </html>
 <!-- ################################################################################################## -->
 <!-- <!DOCTYPE html>
 <html lang="en">