feat(chat): auto-expanding textarea

Author: vkarpov15

frontend/src/chat/chat.html

@@ -59,11 +59,15 @@
     <!-- Input Area -->
     <div class="border-t p-4">
       <form @submit.prevent="sendMessage" :disabled="sendingMessage" class="flex gap-2">
-        <input
+        <textarea
           v-model="newMessage"
           placeholder="Ask something..."
-          class="flex-1 border rounded px-4 py-2"
-        />
+          class="flex-1 border rounded px-4 py-2 resize-none overflow-y-auto"
+          rows="1"
+          ref="messageInput"
+          @input="adjustTextareaHeight"
+          @keydown.enter.exact.prevent="handleEnter"
+        ></textarea>
         <button class="bg-blue-600 text-white px-4 py-2 rounded disabled:bg-gray-600" :disabled="sendingMessage">
           <svg v-if="sendingMessage" style="height: 1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <g>

frontend/src/chat/chat.js

@@ -44,6 +44,11 @@ module.exports = app => app.component('chat', {
         this.chatMessages.push(chatMessages[1]);
 
         this.newMessage = '';
+        this.$nextTick(() => {
+          if (this.$refs.messageInput) {
+            this.$refs.messageInput.style.height = 'auto';
+          }
+        });
 
         this.$nextTick(() => {
           if (this.$refs.messagesContainer) {
@@ -54,6 +59,18 @@ module.exports = app => app.component('chat', {
         this.sendingMessage = false;
       }
     },
+    handleEnter(ev) {
+      if (!ev.shiftKey) {
+        this.sendMessage();
+      }
+    },
+    adjustTextareaHeight(ev) {
+      const textarea = ev.target;
+      textarea.style.height = 'auto';
+      const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight, 10);
+      const maxHeight = lineHeight * 5;
+      textarea.style.height = Math.min(textarea.scrollHeight, maxHeight) + 'px';
+    },
     selectThread(threadId) {
       this.$router.push('/chat/' + threadId);
     },