Add scroll helper, auto scroll for thread

Author: tanchekwei

src/App.vue

@@ -164,6 +164,7 @@ import Chats from "@/store/chats";
 import { initializeQueues, startQueuesProcessing } from "@/store/queue";
 import { useObservable } from "@vueuse/rxjs";
 import { liveQuery } from "dexie";
+import { onScroll } from "./helpers/scroll-helper";
 
 // Components
 import ChatDrawer from "@/components/ChatDrawer/ChatDrawer.vue";
@@ -269,6 +270,8 @@ onMounted(() => {
 
   initializeQueues(store);
   startQueuesProcessing();
+
+  window.addEventListener("scroll", onScroll);
 });
 
 watch(

src/components/Messages/ChatMessages.vue

@@ -29,10 +29,11 @@
 <script setup>
 import Messages from "@/store/messages";
 import { liveQuery } from "dexie";
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { useStore } from "vuex";
 import ChatPrompt from "./ChatPrompt.vue";
 import ChatResponse from "./ChatResponse.vue";
+import { autoScrollToBottom, scrollToBottom } from "@/helpers/scroll-helper";
 
 const store = useStore();
 
@@ -46,7 +47,6 @@ const props = defineProps({
   },
 });
 
-const autoScroll = ref(true);
 const loading = ref(false);
 const gridTemplateColumns = computed(() => `repeat(${props.columns}, 1fr)`);
 const currentChatMessages = ref([]);
@@ -86,19 +86,6 @@ let createChatMessageLiveQuery = (index) => {
   });
 };
 
-const scrollToBottom = ({ immediately = false }) => {
-  window.scrollTo({
-    top: document.documentElement.scrollHeight,
-    behavior: immediately ? "instant" : "smooth",
-  });
-};
-
-const autoScrollToBottom = () => {
-  if (autoScroll.value) {
-    scrollToBottom({ immediately: true });
-  }
-};
-
 const currentChatIndex = computed(() => store.state.currentChatIndex);
 let currentMessageSub;
 let scrollToBottomFirst;
@@ -125,20 +112,10 @@ watch(
   { immediate: true },
 );
 
-const onScroll = () => {
-  const scrollPosition = window.pageYOffset + window.innerHeight;
-  autoScroll.value =
-    scrollPosition >= document.documentElement.scrollHeight - 40;
-};
-
 onMounted(async () => {
   await Messages.table
     .filter((message) => message.done !== true)
     .modify({ done: true });
-  window.addEventListener("scroll", onScroll);
-});
-onUnmounted(() => {
-  window.removeEventListener("scroll", onScroll);
 });
 </script>
 

src/components/Messages/ChatThread.vue

@@ -23,6 +23,8 @@ import ChatResponse from "@/components/Messages/ChatResponse.vue";
 import Threads from "@/store/threads";
 import { useObservable } from "@vueuse/rxjs";
 import { liveQuery } from "dexie";
+import { nextTick } from "vue";
+import { autoScrollToBottom } from "@/helpers/scroll-helper";
 
 const props = defineProps({
   chat: {
@@ -73,6 +75,7 @@ const currentChatMessages = useObservable(
     }
 
     currentChatMessages.value = groupedMessage;
+    nextTick(() => autoScrollToBottom());
     console.log("groupedMessage threads: ", groupedMessage);
     return groupedMessage;
   }),

src/helpers/scroll-helper.js

@@ -0,0 +1,19 @@
+export const scrollToBottom = ({ immediately = false }) => {
+  window.scrollTo({
+    top: document.documentElement.scrollHeight,
+    behavior: immediately ? "instant" : "smooth",
+  });
+};
+
+export const autoScrollToBottom = () => {
+  if (autoScroll) {
+    scrollToBottom({ immediately: true });
+  }
+};
+
+export const onScroll = () => {
+  const scrollPosition = window.pageYOffset + window.innerHeight;
+  autoScroll = scrollPosition >= document.documentElement.scrollHeight - 40;
+};
+
+export let autoScroll = false;