Resize the chat input field for long inputs

Author: chriscarrollsmith

static/styles.css

@@ -375,6 +375,7 @@ pre {
 
 .inputForm {
   display: flex;
+  align-items: flex-end;
   width: 100%;
   padding: 10px;
   padding-bottom: 40px;
@@ -389,6 +390,11 @@ pre {
   border: 2px solid transparent;
   font-size: 1em;
   background-color: #efefef;
+  resize: none; /* Prevent manual resize */
+  overflow-y: hidden; /* Hide scrollbar */
+  min-height: calc(1em + 32px + 4px); /* font-size + padding + border */
+  height: auto; /* Allow it to grow */
+  line-height: 1.5; /* Adjust for better multi-line readability */
 }
 
 .input:focus {
@@ -403,6 +409,7 @@ pre {
   color: white;
   border: none;
   font-size: 1em;
+  height: calc(1em + 32px + 4px); /* font-size + padding + border */
   border-radius: 60px; /* Removed duplicate border-radius property */
 }
 

templates/index.html

@@ -25,15 +25,16 @@
           </div>
           <form id="chatForm" class="inputForm clearfix"
                 hx-on::after-request="this.reset()">
-            <input
-              type="text"
+            <textarea
               class="input"
               name="userInput"
               placeholder="Enter your question"
               id="userInput"
               autocomplete="off"
+              rows="1" {# Start with one row, will expand with CSS #}
+              oninput="this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px';"
               required
-            />
+            ></textarea>
             <button
               type="submit"
               class="button"