fixed #14 automatic scroll to bottom

@senky I added another config prop `alwaysScrollToBottom` when set to
true it alwasy scrolls to bottom, when set to false (or unset) it
scrolls to bottom only when reading the last sent/received message.

Author: Matteo Merola

demo/src/App.vue

@@ -12,7 +12,8 @@
       :showEmoji="true"
       :showFile="true"
       :showTypingIndicator="showTypingIndicator"
-      :colors="colors" />
+      :colors="colors"
+      :alwaysScrollToBottom="alwaysScrollToBottom" />
       <p class="text-center toggle">
         <a v-if="!isChatOpen" :style="{color: linkColor}" href="#" @click.prevent="openChat()">Open the chat window</a>
         <a v-else :style="{color: linkColor}" href="#" @click.prevent="closeChat()">Close the chat window</a>
@@ -52,7 +53,8 @@ export default {
       showTypingIndicator: false,
       colors: null,
       availableColors,
-      chosenColor: null
+      chosenColor: null,
+      alwaysScrollToBottom: false
     }
   },
   created() {

dist/index.js

@@ -12,6 +12,7 @@
       :chatImageUrl="agentProfile.imageUrl"
       :showTypingIndicator="showTypingIndicator"
       :colors="colors"
+      :alwaysScrollToBottom="alwaysScrollToBottom"
     />
     <UserInput
       :showEmoji="showEmoji"
@@ -73,6 +74,10 @@ export default {
     colors: {
       type: Object,
       required: true
+    },
+    alwaysScrollToBottom: {
+      type: Boolean,
+      required: true
     }
   },
   data() {

dist/ssr.index.js

@@ -18,6 +18,7 @@
       :placeholder="placeholder"
       :showTypingIndicator="showTypingIndicator"
       :colors="colors"
+      :alwaysScrollToBottom="alwaysScrollToBottom"
     />
   </div>
 </template>
@@ -112,6 +113,10 @@ export default {
           }
         }
       }
+    },
+    alwaysScrollToBottom: {
+      type: Boolean,
+      default: () => false
     }
   },
   data () {

src/ChatWindow.vue

@@ -28,18 +28,26 @@ export default {
     colors: {
       type: Object,
       required: true
+    },
+    alwaysScrollToBottom: {
+      type: Boolean,
+      required: true
     }
   },
   methods: {
     _scrollDown () {
       this.$refs.scrollList.scrollTop = this.$refs.scrollList.scrollHeight
+    },
+    shouldScrollToBottom() {
+      return this.alwaysScrollToBottom || (this.$refs.scrollList.scrollTop > this.$refs.scrollList.scrollHeight - 300)
     }
   },
   mounted () {
     this._scrollDown()
   },
   updated () {
-    this.$nextTick(this._scrollDown())
+    if (this.shouldScrollToBottom())
+      this.$nextTick(this._scrollDown())
   }
 }
 </script>