restyle

static/js/main.js

@@ -4,19 +4,38 @@
     `ws${isSecure ? "s" : ""}://${location.host}/ws`,
   );
   const input = $("#message");
+  const button = $("#button");
   const messages = $("#messages");
+  const chatMain = $(".chat-main");
   var lastMessage;
 
+  // Function to scroll to bottom of chat
+  const scrollToBottom = () => {
+    chatMain.scrollTop(chatMain[0].scrollHeight);
+  };
+
   $("#button").on("click", () => {
     const message = input.val();
 
     if (message) {
+      // Disable input and button while waiting for response
+      input.prop("disabled", true);
+      button.prop("disabled", true);
+
       ws.send(message);
       lastMessage = $('<div class="message received"><p>Loading...</p></div>');
       messages.append(`<div class="message sent"><p>${message}</p></div>`);
       messages.append(lastMessage);
 
       input.val("");
+      scrollToBottom();
+    }
+  });
+
+  input.on("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      $("#button").click();
     }
   });
 
@@ -29,8 +48,14 @@
 
     if (content.textContent === "<<END>>") {
       lastMessage.html(marked.parse(lastMessage.text()));
+      // Re-enable input and button when response is complete
+      input.prop("disabled", false);
+      button.prop("disabled", false);
+      input.focus();
+      scrollToBottom();
     } else {
       lastMessage.append(content);
+      scrollToBottom();
     }
   };
 })(jQuery);