new chatbot changes are made

chatbot.js

@@ -55,20 +55,21 @@ function displayBotMessage(message) {
   chat.scrollTop = chat.scrollHeight;
 }
 
+// Send the user message and get the bot response
 // Send the user message and get the bot response
 async function sendMessage() {
   let input = document.getElementById("chatbot-input").value;
   if (input) {
     displayUserMessage(input);
 
+    // Clear the input field immediately after displaying the user message
+    document.getElementById("chatbot-input").value = "";
+
     // Wait for the chatbot response
-    let output = await chatbot(input); // Ensure this line is awaited
+    let output = await chatbot(input);
 
-    setTimeout(function () {
-      displayBotMessage(output);
-    }, 1000);
-
-    document.getElementById("chatbot-input").value = "";
+    // Display the bot's response
+    displayBotMessage(output);
   }
 }
 
@@ -85,3 +86,5 @@ document
       sendMessage();
     }
   });
+
+

index.html

@@ -536,6 +536,23 @@ <h2>What type of transportation do you prefer for your travels?</h2>
         <input type="text" class="chatbot-input" id="chatbot-input" placeholder="Type your message here...." />
         <button class="chatbot-button" id="chatbot-button"><i class="fa-brands fa-telegram"></i></button>
     </div>
+    <script>
+        document.getElementById("chatbot-button").onclick = function() {
+            const inputField = document.getElementById("chatbot-input");
+            const message = inputField.value.trim();
+
+            if (message) {
+                const chatContainer = document.getElementById("chatbot-chat");
+                const userMessage = document.createElement("div");
+                userMessage.className = "user-message";  // Add styling class as needed
+                userMessage.textContent = message;
+                chatContainer.appendChild(userMessage);
+
+                // Clear the input field
+                inputField.value = "";
+            }
+        };
+    </script>
     <button onclick="moveToTop()" id="topBtn" title="Go to top"
         style="display:flex; position: fixed;  right: 30px; z-index: 100000;">
         <i class="fa fa-arrow-up" aria-hidden="true"></i>