restyle

static/css/main.css

@@ -161,13 +161,30 @@ body {
     flex: 1;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    overflow-y: auto;
     background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
+    scroll-behavior: smooth;
+}
+
+.chat-main::-webkit-scrollbar {
+    width: 6px;
+}
+
+.chat-main::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.chat-main::-webkit-scrollbar-thumb {
+    background: var(--text-light);
+    border-radius: 3px;
+}
+
+.chat-main::-webkit-scrollbar-thumb:hover {
+    background: var(--text-secondary);
 }
 
 /* ===== Welcome Section ===== */
 .welcome-section {
-    flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -175,6 +192,7 @@ body {
     padding: 40px 20px;
     text-align: center;
     animation: fadeIn 0.8s ease-out;
+    flex-shrink: 0;
 }
 
 @keyframes fadeIn {
@@ -264,30 +282,11 @@ body {
 
 /* ===== Messages Container ===== */
 .messages-container {
-    flex: 1;
     display: flex;
     flex-direction: column;
     gap: 16px;
     padding: 24px;
-    overflow-y: auto;
+    flex-shrink: 0;
-    scroll-behavior: smooth;
-}
-
-.messages-container::-webkit-scrollbar {
-    width: 6px;
-}
-
-.messages-container::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.messages-container::-webkit-scrollbar-thumb {
-    background: var(--text-light);
-    border-radius: 3px;
-}
-
-.messages-container::-webkit-scrollbar-thumb:hover {
-    background: var(--text-secondary);
 }
 
 /* ===== Message Styles ===== */
@@ -344,6 +343,38 @@ body {
     text-decoration: underline;
 }
 
+/* ===== Message Content Lists ===== */
+.message ul,
+.message ol {
+    margin: 8px 0;
+    padding-left: 20px;
+}
+
+.message ul {
+    list-style-type: disc;
+}
+
+.message ol {
+    list-style-type: decimal;
+}
+
+.message li {
+    margin: 4px 0;
+    line-height: 1.6;
+}
+
+.message li::marker {
+    color: var(--primary-color);
+}
+
+/* Nested lists */
+.message ul ul,
+.message ol ol,
+.message ul ol,
+.message ol ul {
+    margin: 4px 0;
+}
+
 /* ===== Footer ===== */
 .chat-footer {
     background: white;
@@ -380,6 +411,7 @@ body {
     outline: none;
     min-height: 50px;
     max-height: 150px;
+    field-sizing: content;
     transition: box-shadow var(--transition-fast);
 }
 
@@ -391,6 +423,12 @@ body {
     box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
 }
 
+.message-input:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background: #f3f4f6;
+}
+
 .send-button {
     width: 50px;
     height: 50px;
@@ -470,6 +508,10 @@ body {
         padding: 16px 20px;
     }
 
+    .chat-main {
+        padding: 0;
+    }
+
     .messages-container {
         padding: 16px;
         gap: 12px;

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);