Feature: ResizableTextArea in widget and dashboard (#969)

* Create ResizableTextArea component
* Rubocop fixes and spec fixes

Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/widget/components/ChatInputWrap.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="chat-message--input">
-    <chat-input-area
+    <resizable-text-area
       v-model="userInput"
       :placeholder="$t('CHAT_PLACEHOLDER')"
+      class="form-input user-message-input"
+      @focus="onFocus"
+      @blur="onBlur"
     />
     <div class="button-wrap">
       <chat-attachment-button
@@ -34,7 +37,7 @@ import emojione from 'emojione';
 import { mixin as clickaway } from 'vue-clickaway';
 import ChatSendButton from 'widget/components/ChatSendButton.vue';
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
-import ChatInputArea from 'widget/components/ChatInputArea.vue';
+import ResizableTextArea from 'shared/components/ResizableTextArea';
 import EmojiInput from 'dashboard/components/widgets/emoji/EmojiInput';
 
 export default {
@@ -42,8 +45,8 @@ export default {
   components: {
     ChatAttachmentButton,
     ChatSendButton,
-    ChatInputArea,
     EmojiInput,
+    ResizableTextArea,
   },
   mixins: [clickaway],
   props: {
@@ -109,6 +112,16 @@ export default {
         `${this.userInput}${emoji.shortname} `
       );
     },
+
+    onBlur() {
+      this.toggleTyping('off');
+    },
+    onFocus() {
+      this.toggleTyping('on');
+    },
+    toggleTyping(typingStatus) {
+      this.$store.dispatch('conversation/toggleUserTyping', { typingStatus });
+    },
   },
 };
 </script>
@@ -140,4 +153,13 @@ export default {
   display: flex;
   align-items: center;
 }
+
+.user-message-input {
+  border: 0;
+  height: $space-large;
+  min-height: $space-large;
+  max-height: 2.4 * $space-mega;
+  resize: none;
+  padding-top: $space-small;
+}
 </style>