Add auto-growing textarea for chat input

- Textarea now automatically expands as user types multiline messages
- Resets to minimum height after message is sent
- CSS: Set min-height (60px) and max-height (400px) with auto overflow
- Removed fixed rows attribute to allow dynamic height
- Disabled manual resize to prevent user confusion
- Provides better UX for composing longer messages

static/css/style.css

@@ -123,6 +123,11 @@ html, body {
     background-color: var(--bg-secondary);
     color: var(--text-primary);
     transition: background-color 0.3s ease, border-color 0.3s ease;
+    min-height: 60px;
+    max-height: 400px;
+    overflow-y: auto;
+    resize: none;
+    box-sizing: border-box;
 }
 
 /* Styling for the message body wrapper that contains header and content */

templates/chat.html

@@ -9,7 +9,7 @@
         <div id="chat"></div>
         <!-- Form for sending messages -->
         <form id="message-form">
-            <textarea id="message" rows="4" placeholder="Type your message..."></textarea>
+            <textarea id="message" placeholder="Type your message..."></textarea>
         </form>
     </div>
 
@@ -409,7 +409,8 @@ socket.on("active_users", (data) => {
 
 // Function to handle sending the message
 function sendMessage() {
-    const message = document.getElementById("message").value;
+    const messageTextarea = document.getElementById("message");
+    const message = messageTextarea.value;
     const model = document.getElementById("model-select").value;
     let messageToSend = message.trim();
 
@@ -420,7 +421,9 @@ function sendMessage() {
             "model": model,  // Pass model as a separate attribute
             "room_name": room_name
         });
-        document.getElementById("message").value = "";
+        messageTextarea.value = "";
+        // Reset textarea height after sending
+        messageTextarea.style.height = 'auto';
     }
 }
 
@@ -443,6 +446,14 @@ document.getElementById("message").addEventListener("keydown", function(e) {
     }
 });
 
+// Auto-grow textarea as user types
+document.getElementById("message").addEventListener("input", function() {
+    // Reset height to auto to get the correct scrollHeight
+    this.style.height = 'auto';
+    // Set height to scrollHeight to fit content
+    this.style.height = this.scrollHeight + 'px';
+});
+
 // Socket event for updating the room title
 socket.on("update_room_title", (data) => {
     document.title = data.title; // Update the window's title