chore: Replace copilot input with auto-expanding textarea (#12296)

app/javascript/dashboard/components-next/copilot/CopilotInput.vue

@@ -1,25 +1,49 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, nextTick, onMounted } from 'vue';
 
 const emit = defineEmits(['send']);
 const message = ref('');
+const textareaRef = ref(null);
+
+const adjustHeight = () => {
+  if (!textareaRef.value) return;
+
+  // Reset height to auto to get the correct scrollHeight
+  textareaRef.value.style.height = 'auto';
+  // Set the height to the scrollHeight
+  textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`;
+};
 
 const sendMessage = () => {
   if (message.value.trim()) {
     emit('send', message.value);
     message.value = '';
+    // Reset textarea height after sending
+    nextTick(() => {
+      adjustHeight();
+    });
   }
 };
+
+const handleInput = () => {
+  nextTick(adjustHeight);
+};
+
+onMounted(() => {
+  nextTick(adjustHeight);
+});
 </script>
 
 <template>
   <form class="relative" @submit.prevent="sendMessage">
-    <input
+    <textarea
+      ref="textareaRef"
       v-model="message"
-      type="text"
       :placeholder="$t('CAPTAIN.COPILOT.SEND_MESSAGE')"
-      class="w-full reset-base bg-n-alpha-3 ltr:pl-4 ltr:pr-12 rtl:pl-12 rtl:pr-4 py-3 text-n-slate-11 text-sm border border-n-weak rounded-lg focus:outline-none focus:ring-1 focus:ring-n-blue-11 focus:border-n-blue-11"
+      class="w-full reset-base bg-n-alpha-3 ltr:pl-4 ltr:pr-12 rtl:pl-12 rtl:pr-4 py-3 text-sm border border-n-weak rounded-lg focus:outline-0 focus:outline-none focus:ring-2 focus:ring-n-blue-11 focus:border-n-blue-11 resize-none overflow-hidden max-h-[200px] mb-0 text-n-slate-12"
-      @keyup.enter="sendMessage"
+      rows="1"
+      @input="handleInput"
+      @keydown.enter.exact.prevent="sendMessage"
     />
     <button
       class="absolute ltr:right-1 rtl:left-1 top-1/2 -translate-y-1/2 h-9 w-10 flex items-center justify-center text-n-slate-11 hover:text-n-blue-11"

app/javascript/dashboard/components/copilot/CopilotContainer.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
+import { useAlert } from 'dashboard/composables';
 import { useStore } from 'dashboard/composables/store';
 import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
 import { useMapGetter } from 'dashboard/composables/store';
@@ -100,20 +101,24 @@ const handleReset = () => {
 };
 
 const sendMessage = async message => {
-  if (selectedCopilotThreadId.value) {
+  try {
-    await store.dispatch('copilotMessages/create', {
+    if (selectedCopilotThreadId.value) {
-      assistant_id: activeAssistant.value.id,
+      await store.dispatch('copilotMessages/create', {
-      conversation_id: currentChat.value?.id,
+        assistant_id: activeAssistant.value.id,
-      threadId: selectedCopilotThreadId.value,
+        conversation_id: currentChat.value?.id,
-      message,
+        threadId: selectedCopilotThreadId.value,
-    });
+        message,
-  } else {
+      });
-    const response = await store.dispatch('copilotThreads/create', {
+    } else {
-      assistant_id: activeAssistant.value.id,
+      const response = await store.dispatch('copilotThreads/create', {
-      conversation_id: currentChat.value?.id,
+        assistant_id: activeAssistant.value.id,
-      message,
+        conversation_id: currentChat.value?.id,
-    });
+        message,
-    selectedCopilotThreadId.value = response.id;
+      });
+      selectedCopilotThreadId.value = response.id;
+    }
+  } catch (error) {
+    useAlert(error.message);
   }
 };