fix: make scroll to bottom buttom ignore spacer and appear when we are scrolled above spacer

Author: yaroslav8765

custom/CustomAutoScrollContainer.vue

@@ -89,15 +89,16 @@ onUnmounted(() => {
   observer?.disconnect()
 })
 
-function isNearBottom(): boolean {
+function isNearBottom(customThreshold?: number): boolean {
   const container = containerRef.value?.scrollEl
   if (!container) return true
   
   const { scrollTop, scrollHeight, clientHeight } = container
   scrollParams.value.scrollTop = scrollTop
   scrollParams.value.scrollHeight = scrollHeight
   scrollParams.value.clientHeight = clientHeight
-  return scrollHeight - scrollTop - clientHeight <= props.threshold
+  const threshold = customThreshold ?? props.threshold
+  return scrollHeight - scrollTop - clientHeight <= threshold
 }
 
 function scrollToBottom(force = false): void {
@@ -119,7 +120,7 @@ function hasScrollbar(): boolean {
 }
 
 
-function handleScroll(detectScrollDown = true): void {
+function handleScroll(detectScrollDown = true, customThreshold?: number): void {
   const container = containerRef.value.scrollEl
   if (!container) return
   
@@ -130,7 +131,7 @@ function handleScroll(detectScrollDown = true): void {
     lastScrollHeight = scrollHeight
     return
   }
-  if (isNearBottom()) {
+  if (isNearBottom(customThreshold)) {
     isUserScrolledUp.value = false
   } else {
     const isScrollingUp = scrollTop < lastScrollTop

custom/conversation_area/ConversationArea.vue

@@ -14,7 +14,7 @@
       :enabled="!showScrollToBottomButton" 
       class="relative h-full flex flex-col overflow-y-auto translate-x-[-50%] left-1/2"
       ref="scrollContainer"
-      :threshold="10"
+      :threshold="THRESHOLD_TO_SHOW_BUTTON"
       behavior="smooth"
       :wrapperStyle = "{ 
         height: '100%',
@@ -111,6 +111,7 @@ const showBottomSpacer = ref(false);
 const spacerHeight = ref(0);
 const MASK_HEIGHT = 20;
 const EMPTY_MESSAGE_HEIGHT = 18;
+const THRESHOLD_TO_SHOW_BUTTON = 10;
 let messageResizeObserver: ResizeObserver | null = null;
 let observedLastUserMessageElement: HTMLElement | null = null;
 let observedLastAgentMessageElement: HTMLElement | null = null;
@@ -275,7 +276,7 @@ async function handleSendMessage() {
 
 function recalculateScroll() {
   if (scrollContainer.value) {
-    scrollContainer.value.handleScroll(false);
+    scrollContainer.value.handleScroll(false,spacerHeight.value + THRESHOLD_TO_SHOW_BUTTON);
     const isScrolledUp = scrollContainer.value.isUserScrolledUp();
     showScrollToBottomButton.value = !!isScrolledUp;
   }