Feature: Support an Emoji selector in the chat widget (#773)

* Adds emoji widget to web widget
* Style fixes for the send button
* Adds cursor to emoji widget action buttons

app/javascript/widget/components/ChatInputWrap.vue

@@ -1,20 +1,38 @@
 <template>
   <div class="chat-message--input">
-    <chat-attachment-button :on-attach="onSendAttachment" />
-    <ChatInputArea v-model="userInput" :placeholder="placeholder" />
-    <ChatSendButton
-      :on-click="handleButtonClick"
-      :disabled="!userInput.length"
-      :color="widgetColor"
-    />
+    <chat-input-area v-model="userInput" :placeholder="placeholder" />
+    <div class="button-wrap">
+      <chat-attachment-button
+        v-if="showAttachment"
+        :on-attach="onSendAttachment"
+      />
+      <emoji-input
+        v-if="showEmojiPicker"
+        v-on-clickaway="hideEmojiPicker"
+        :on-click="emojiOnClick"
+      />
+      <i
+        class="emoji-toggle icon ion-happy-outline"
+        :class="{ active: showEmojiPicker }"
+        @click="toggleEmojiPicker()"
+      />
+      <chat-send-button
+        v-if="showSendButton"
+        :on-click="handleButtonClick"
+        :color="widgetColor"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+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 EmojiInput from 'dashboard/components/widgets/emoji/EmojiInput';
 
 export default {
   name: 'ChatInputWrap',
@@ -22,8 +40,9 @@ export default {
     ChatAttachmentButton,
     ChatSendButton,
     ChatInputArea,
+    EmojiInput,
   },
-
+  mixins: [clickaway],
   props: {
     placeholder: {
       type: String,
@@ -42,6 +61,7 @@ export default {
   data() {
     return {
       userInput: '',
+      showEmojiPicker: false,
     };
   },
 
@@ -49,6 +69,12 @@ export default {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
     }),
+    showAttachment() {
+      return this.userInput.length === 0;
+    },
+    showSendButton() {
+      return this.userInput.length > 0;
+    },
   },
 
   destroyed() {
@@ -71,6 +97,19 @@ export default {
         this.handleButtonClick();
       }
     },
+    toggleEmojiPicker() {
+      this.showEmojiPicker = !this.showEmojiPicker;
+    },
+    hideEmojiPicker() {
+      if (this.showEmojiPicker) {
+        this.toggleEmojiPicker();
+      }
+    },
+    emojiOnClick(emoji) {
+      this.userInput = emojione.shortnameToUnicode(
+        `${this.userInput}${emoji.shortname} `
+      );
+    },
   },
 };
 </script>
@@ -82,4 +121,24 @@ export default {
   align-items: center;
   display: flex;
 }
+
+.emoji-toggle {
+  font-size: $font-size-large;
+  color: $color-gray;
+  padding-right: $space-smaller;
+  cursor: pointer;
+}
+
+.emoji-dialog {
+  right: $space-one;
+}
+
+.file-uploads {
+  margin-right: $space-small;
+}
+
+.button-wrap {
+  display: flex;
+  align-items: center;
+}
 </style>