From 30327e8d27d2a7d400d59621c19b76a038b313f8 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 16 Nov 2021 08:09:44 +0530
Subject: [PATCH] feat: scroll logs to the bottom on update

---
 .../components/realtime/Log.vue               | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/hoppscotch-app/components/realtime/Log.vue b/packages/hoppscotch-app/components/realtime/Log.vue
index ef1bf74d0..12ef953de 100644
--- a/packages/hoppscotch-app/components/realtime/Log.vue
+++ b/packages/hoppscotch-app/components/realtime/Log.vue
@@ -17,7 +17,7 @@
         {{ title }}
       </label>
     </div>
-    <div name="log" class="realtime-log">
+    <div ref="logsRef" name="log" class="realtime-log">
       <span v-if="log" class="space-y-2">
         <span
           v-for="(entry, index) in log"
@@ -32,15 +32,33 @@
 </template>
 
 <script setup lang="ts">
+import { nextTick, ref, watch } from "@nuxtjs/composition-api"
 import { getSourcePrefix as source } from "~/helpers/utils/string"
 
-defineProps({
+const props = defineProps({
   log: { type: Array, default: () => [] },
   title: {
     type: String,
     default: "",
   },
 })
+
+const logsRef = ref<any | null>(null)
+const BOTTOM_SCROLL_DIST_INNACURACY = 5
+
+watch(
+  () => props.log,
+  () => {
+    if (!logsRef.value) return
+    const distToBottom =
+      logsRef.value.scrollHeight -
+      logsRef.value.scrollTop -
+      logsRef.value.clientHeight
+    if (distToBottom < BOTTOM_SCROLL_DIST_INNACURACY) {
+      nextTick(() => (logsRef.value.scrollTop = logsRef.value.scrollHeight))
+    }
+  }
+)
 </script>
 
 <style scoped lang="scss">