✨ Typing indicator is here, thanks @senky

 #10

Author: mattmezza

demo/src/TestArea.vue

@@ -34,11 +34,12 @@ export default {
     }
   },
   methods: {
-    _handleSubmit () {
+    _handleSubmit() {
       this.onMessage(this.$refs.textArea.value)
       this.$refs.textArea.value = ''
+      this.onTyping('')
     },
-    _handleTyping () {
+    _handleTyping() {
       this.onTyping(this.$refs.textArea.value)
     }
   }
@@ -60,7 +61,7 @@ export default {
   color: #516996;
   font-weight: 600;
   font-size: 28px;
- }
+}
 
 .demo-test-area--title-sub {
   color: #4e8cff;
@@ -81,9 +82,8 @@ export default {
   color: #516996;
 }
 
-
 .demo-test-area--button {
-  font-family: Avenir Next, Helvetica Neue, Helvetica,sans-serif;
+  font-family: Avenir Next, Helvetica Neue, Helvetica, sans-serif;
   font-weight: 400;
   margin-top: 20px;
   user-select: none;

dist/index.js

@@ -27,31 +27,31 @@ export default {
     UserInput
   },
   props: {
-    'showEmoji': {
+    showEmoji: {
       type: Boolean,
       default: false
     },
-    'showFile': {
+    showFile: {
       type: Boolean,
       default: false
     },
-    'agentProfile': {
+    agentProfile: {
       type: Object,
       required: true
     },
-    'onUserInputSubmit': {
+    onUserInputSubmit: {
       type: Function,
       required: true
     },
-    'onClose': {
+    onClose: {
       type: Function,
       required: true
     },
-    'messageList': {
+    messageList: {
       type: Array,
       default: () => []
     },
-    'isOpen': {
+    isOpen: {
       type: Boolean,
       default: () => false
     },
@@ -64,25 +64,17 @@ export default {
       default: () => false
     }
   },
-  data () {
-    return {
-
-    }
+  data() {
+    return {}
   },
   computed: {
-    messages () {
+    messages() {
       let messages = this.messageList
-      if (this.showTypingIndicator) {
-        messages.push({
-          author: 'them',
-          type: 'typing'
-        })
-      }
+
       return messages
     }
   },
-  methods: {
-  }
+  methods: {}
 }
 </script>
 <style scoped>
@@ -101,7 +93,7 @@ export default {
   justify-content: space-between;
   transition: 0.3s ease-in-out;
   border-radius: 10px;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 .sc-chat-window.closed {

dist/ssr.index.js

@@ -1,7 +1,7 @@
 <template>
   <div class="sc-message-list" ref="scrollList">
     <Message v-for="(message, idx) in messages" :message="message" :chatImageUrl="chatImageUrl" :key="idx" />
-    <Message v-if="showTypingIndicator" :message="{author: 'them', type: 'typing'}" :chatImageUrl="chatImageUrl" :key="idx" />
+    <Message v-show="showTypingIndicator" :message="{author: 'them', type: 'typing'}" :chatImageUrl="chatImageUrl" :key="idx" />
   </div>
 </template>
 <script>