feat: preserve message text in the input field

src/components/AChat/AChatForm.vue

@@ -54,9 +54,20 @@ export default {
     showDivider: {
       type: Boolean,
       default: false
+    },
+    clearInputValueOnSend: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Message validator.
+     */
+    validator: {
+      type: Function,
+      required: true
     }
   },
-  emits: ['message', 'esc'],
+  emits: ['message', 'esc', 'error'],
   data: () => ({
     message: ''
   }),
@@ -118,8 +129,14 @@ export default {
   },
   methods: {
     submitMessage() {
-      this.$emit('message', this.message)
-      this.message = ''
+      const error = this.validator(this.message)
+      if (error === false) {
+        this.$emit('message', this.message)
+        this.message = ''
+      } else {
+        this.$emit('error', error)
+      }
+
       // Fix textarea height to 1 row after miltiline message send
       this.calculateInputHeight()
       this.focus()

src/components/Chat/Chat.vue

@@ -208,7 +208,9 @@
           :label="chatFormLabel"
           :message-text="$route.query.messageText"
           @message="onMessage"
+          @error="onMessageError"
           @esc="replyMessageId = -1"
+          :validator="messageValidator.bind(this)"
         >
           <template #prepend>
             <chat-menu
@@ -256,7 +258,7 @@ import { detect } from 'detect-browser'
 import Visibility from 'visibilityjs'
 import copyToClipboard from 'copy-to-clipboard'
 
-import { Cryptos } from '@/lib/constants'
+import { Cryptos, Fees } from '@/lib/constants'
 import EmojiPicker from '@/components/EmojiPicker.vue'
 
 import {
@@ -302,34 +304,36 @@ function getUserMeta(userId) {
   return user
 }
 
+const validationErrors = {
+  emptyMessage: 'EMPTY_MESSAGE',
+  notEnoughFunds: 'NON_ENOUGH_FUNDS',
+  notEnoughFundsNewAccount: 'NON_ENOUGH_FUNDS_NEW_ACCOUNT',
+  messageTooLong: 'MESSAGE_LENGTH_EXCEED'
+}
 /**
  * Validate message before sending.
  * @param {string} message
- * @returns {boolean}
+ * @returns {string | false} If `false` then validation passed without errors.
  */
 function validateMessage(message) {
   // Ensure that message contains at least one non-whitespace character
   if (!message.trim().length) {
-    return false
+    return validationErrors.emptyMessage
   }
 
-  if (this.$store.state.balance < 0.001) {
+  if (this.$store.state.balance < Fees.NOT_ADM_TRANSFER) {
     if (this.$store.getters.isAccountNew()) {
-      this.showFreeTokensDialog = true
+      return validationErrors.notEnoughFundsNewAccount
     } else {
-      this.$store.dispatch('snackbar/show', { message: this.$t('chats.no_money') })
+      return validationErrors.notEnoughFunds
     }
-    return false
   }
 
   if (message.length * 1.5 > 20000) {
-    this.$store.dispatch('snackbar/show', {
-      message: this.$t('chats.too_long')
-    })
-    return false
+    return validationErrors.messageTooLong
   }
 
-  return true
+  return false
 }
 
 export default {
@@ -476,11 +480,25 @@ export default {
     }
   },
   methods: {
+    messageValidator: validateMessage,
     onMessage(message) {
-      if (validateMessage.call(this, message)) {
-        this.sendMessage(message)
-        nextTick(() => this.$refs.chat.scrollToBottom())
-        this.replyMessageId = -1
+      this.sendMessage(message)
+      nextTick(() => this.$refs.chat.scrollToBottom())
+      this.replyMessageId = -1
+    },
+    onMessageError(error) {
+      switch (error) {
+        case validationErrors.notEnoughFundsNewAccount:
+          this.showFreeTokensDialog = true
+          return
+        case validationErrors.notEnoughFunds:
+          this.$store.dispatch('snackbar/show', { message: this.$t('chats.no_money') })
+          return
+        case validationErrors.messageTooLong:
+          this.$store.dispatch('snackbar/show', {
+            message: this.$t('chats.too_long')
+          })
+          return
       }
     },
     sendMessage(message) {