Optimize the editor and enhance the user experience.

components/MsgEditor.vue

@@ -1,17 +1,29 @@
 <template>
-  <v-textarea
+  <div
-      v-model="message"
+      class="flex-grow-1 d-flex align-center justify-space-between"
-      :label="$t('writeAMessage')"
+  >
-      :placeholder="hint"
+    <v-textarea
-      rows="1"
+        v-model="message"
-      :auto-grow="autoGrow"
+        :label="$t('writeAMessage')"
-      :disabled="disabled"
+        :placeholder="hint"
-      :loading="loading"
+        :rows="rows"
-      :hide-details="true"
+        max-rows="8"
-      append-inner-icon="send"
+        :auto-grow="autoGrow"
-      @keyup.enter.exact="enterOnly"
+        :disabled="disabled"
-      @click:appendInner="clickSendBtn"
+        :loading="loading"
-  ></v-textarea>
+        :hide-details="true"
+        clearable
+        variant="outlined"
+        @keydown.enter.exact="enterOnly"
+    ></v-textarea>
+    <v-btn
+        :disabled="loading"
+        icon="send"
+        title="Send"
+        class="ml-3"
+        @click="clickSendBtn"
+    ></v-btn>
+  </div>
 </template>
 
 <script>
@@ -39,7 +51,7 @@ export default {
     message(val) {
       const lines = val.split(/\r\n|\r|\n/).length;
       if (lines > 8) {
-        this.rows = lines;
+        this.rows = 8;
         this.autoGrow = false;
       } else {
         this.rows = 1;
@@ -65,7 +77,8 @@ export default {
     clickSendBtn () {
       this.send()
     },
-    enterOnly () {
+    enterOnly (event) {
+      event.preventDefault();
       if (!isMobile()) {
         this.send()
       }