From 5036be71e66cc613cc46ca5d58bb7d9a642eff82 Mon Sep 17 00:00:00 2001
From: Lion Arar <lion@targointernet.com>
Date: Fri, 26 Sep 2025 10:37:22 -0400
Subject: [PATCH] style: changed the conversation-box to use q-form to enable
 the submit function, as well as made the input field autogrow for readability

---
 src/modules/chatbot/components/conversation-box.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/modules/chatbot/components/conversation-box.vue b/src/modules/chatbot/components/conversation-box.vue
index 400aa50..d64332d 100644
--- a/src/modules/chatbot/components/conversation-box.vue
+++ b/src/modules/chatbot/components/conversation-box.vue
@@ -35,12 +35,13 @@ const sendMessage = async () => {
       <div class="chat-body">
         <DialogueContent :messages="messages"></DialogueContent>
       </div>
-      <div class="row chat-footer">
-        <q-input v-model="text" label="Enter a Message" class="col" />
-        <q-btn @click="sendMessage" :ripple="{ center: true }" color="primary" glossy label="Send"
-          style="width:60px; height:45px; margin-top: 8px; font-size: 14px;" class="col-2">
+      <q-form @submit="sendMessage" class="row chat-footer">
+        <q-input type="textarea" style="margin-right: 5px;" autogrow v-model="text" label="Enter a Message"
+          class="col" />
+        <q-btn type="submit" :ripple="{ center: true }" color="primary" glossy label="Send"
+          style="align-self: flex-end; width:60px; height:45px; margin-top: 8px; font-size: 14px;" class="col-2">
         </q-btn>
-      </div>
+      </q-form>
     </div>
   </transition>
 </template>