From 207a93bdad0965fa246b3e73be191a5969c022c1 Mon Sep 17 00:00:00 2001
From: tanchekwei <weiwei1@live.com.my>
Date: Thu, 8 Feb 2024 07:20:48 +0800
Subject: [PATCH] Add scroll helper, auto scroll for thread

---
 src/App.vue                              |  3 +++
 src/components/Messages/ChatMessages.vue | 27 ++----------------------
 src/components/Messages/ChatThread.vue   |  3 +++
 src/helpers/scroll-helper.js             | 19 +++++++++++++++++
 4 files changed, 27 insertions(+), 25 deletions(-)
 create mode 100644 src/helpers/scroll-helper.js

diff --git a/src/App.vue b/src/App.vue
index b747a54178..4fc29709b3 100644
--- a/src/App.vue
+++ b/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(
diff --git a/src/components/Messages/ChatMessages.vue b/src/components/Messages/ChatMessages.vue
index 5e904db92a..2a1338bac7 100644
--- a/src/components/Messages/ChatMessages.vue
+++ b/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>
 
diff --git a/src/components/Messages/ChatThread.vue b/src/components/Messages/ChatThread.vue
index 3ec73456e3..2660a35478 100644
--- a/src/components/Messages/ChatThread.vue
+++ b/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;
   }),
diff --git a/src/helpers/scroll-helper.js b/src/helpers/scroll-helper.js
new file mode 100644
index 0000000000..1c83ebd8d7
--- /dev/null
+++ b/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;