changed the chat window so it scrolls properly and added a thinking tag

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "timerkeeper-web",
+  "version": "1.0.0",
+  "description": "A web application for Timerkeeper",
+  "main": "index.html",
+  "scripts": {
+    "dev": "http-server ."
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "http-server": "^0.14.0"
+  }
+}

script.js

@@ -12,6 +12,9 @@ function sendMessage() {
     // Clear the input field
     userInput.value = '';
 
+    // Add a "Thinking..." message
+    displayMessage("Thinking...", 'bot', true);
+
     // Send the message to n8n via a webhook
 fetch('https://your-n8n-instance.com/webhook/your-webhook-id', {
     method: 'POST',
@@ -22,6 +25,13 @@ fetch('https://your-n8n-instance.com/webhook/your-webhook-id', {
 })
 .then(response => response.json())
 .then(data => {
+    // Remove the "Thinking..." message
+    const chatMessages = document.getElementById('chat-messages');
+    const thinkingMessage = chatMessages.lastElementChild;
+    if (thinkingMessage && thinkingMessage.textContent === 'Thinking...') {
+        chatMessages.removeChild(thinkingMessage);
+    }
+
     // Display the n8n's response from the 'text' field
     displayMessage(data.text, 'bot');
 })
@@ -44,7 +54,7 @@ window.onload = function() {
     });
 };
 
-function displayMessage(message, sender) {
+function displayMessage(message, sender, isThinking) {
     const chatMessages = document.getElementById('chat-messages');
     const messageElement = document.createElement('div');
     messageElement.classList.add(sender === 'user' ? 'user-message' : 'bot-message');
@@ -65,4 +75,10 @@ function displayMessage(message, sender) {
     messageElement.appendChild(textElement);
 
     chatMessages.appendChild(messageElement);
+    scrollToBottom();
+}
+
+function scrollToBottom() {
+    const chatMessages = document.getElementById('chat-messages');
+    chatMessages.scrollTop = chatMessages.scrollHeight;
 }