From bf0dcc3e801b761cbd12434bd3d5eaf8e5857e36 Mon Sep 17 00:00:00 2001
From: padre <remepadre@googlemail.com>
Date: Tue, 10 Jun 2025 09:24:19 +0100
Subject: [PATCH] changed the chat window so it scrolls properly and added a
 thinking tag

---
 package.json | 13 +++++++++++++
 script.js    | 18 +++++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 package.json

diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d0a9506
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/script.js b/script.js
index e021cea..e7a7558 100644
--- a/script.js
+++ b/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;
 }