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.
mattmezza · Aug 4, 2018 · 4850692 · 4850692
1 parent 6add5f1
commit 4850692
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 5 deletions.
diff --git a/demo/src/App.vue b/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() {

diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/ssr.index.js b/dist/ssr.index.js
diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
@@ -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() {

diff --git a/src/Launcher.vue b/src/Launcher.vue
@@ -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 () {

diff --git a/src/MessageList.vue b/src/MessageList.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>