@bbki.ng/bb-msg-history 0.11.0 → 0.11.2

package/dist/component.d.ts

@@ -5,6 +5,9 @@ export declare class BBMsgHistory extends HTMLElement {
     private _lastAuthor;
     private _lastGroupTimestamp;
     private _scrollButtonVisible;
+    private _userHasScrolledManually;
+    private _isProgrammaticScroll;
+    private _lastScrollTop;
     static get observedAttributes(): string[];
     constructor();
     attributeChangedCallback(name: string): void;

package/dist/component.js

@@ -13,6 +13,9 @@ export class BBMsgHistory extends HTMLElement {
         this._userAuthors = new Map();
         this._lastAuthor = '';
         this._scrollButtonVisible = false;
+        this._userHasScrolledManually = false;
+        this._isProgrammaticScroll = false;
+        this._lastScrollTop = 0;
         this.attachShadow({ mode: 'open' });
     }
     attributeChangedCallback(name) {
@@ -115,10 +118,16 @@ export class BBMsgHistory extends HTMLElement {
         }
         // Smooth scroll to bottom (skip in infinite mode)
         if (!this.hasAttribute('infinite')) {
+            // Mark this as a programmatic scroll so the scroll handler ignores it
+            this._isProgrammaticScroll = true;
             container.scrollTo({
                 top: container.scrollHeight,
                 behavior: 'smooth',
             });
+            // Reset the flag after smooth scroll animation completes (~300ms)
+            setTimeout(() => {
+                this._isProgrammaticScroll = false;
+            }, 300);
             // Hide scroll button since we're scrolling to bottom
             const scrollButton = this.shadowRoot.querySelector('.scroll-to-bottom');
             if (scrollButton && this._scrollButtonVisible) {
@@ -270,8 +279,13 @@ export class BBMsgHistory extends HTMLElement {
             const scrollButton = this.shadowRoot.querySelector('.scroll-to-bottom');
             const isInfinite = this.hasAttribute('infinite');
             if (container && !isInfinite) {
+                // Mark as programmatic scroll to prevent triggering user scroll detection
+                this._isProgrammaticScroll = true;
                 container.scrollTop = container.scrollHeight;
-                this._setupScrollTracking(container, scrollButton);
+                requestAnimationFrame(() => {
+                    this._isProgrammaticScroll = false;
+                });
+                this._setupScrollTracking(container, scrollButton, { skipInitialCheck: true });
             }
             if (scrollButton && !isInfinite) {
                 scrollButton.addEventListener('click', () => {
@@ -304,19 +318,34 @@ export class BBMsgHistory extends HTMLElement {
       `;
         }
     }
-    _setupScrollTracking(container, button) {
+    _setupScrollTracking(container, button, options) {
         const checkScrollPosition = () => {
+            // Ignore programmatic scrolls - they don't indicate user intent
+            if (this._isProgrammaticScroll)
+                return;
+            // Mark that user has manually scrolled
+            if (!this._userHasScrolledManually) {
+                this._userHasScrolledManually = true;
+            }
+            const currentScrollTop = container.scrollTop;
+            const isScrollingUp = currentScrollTop < this._lastScrollTop;
+            this._lastScrollTop = currentScrollTop;
             const threshold = 50; // pixels from bottom
             const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
             const hasOverflow = container.scrollHeight > container.clientHeight;
-            const shouldShow = !isAtBottom && hasOverflow;
+            // Only show button when: user has scrolled, is not at bottom, is scrolling up
+            const shouldShow = !isAtBottom && hasOverflow && this._userHasScrolledManually && isScrollingUp;
             if (shouldShow !== this._scrollButtonVisible) {
                 this._scrollButtonVisible = shouldShow;
                 button.classList.toggle('visible', shouldShow);
             }
         };
-        // Check initial state
-        checkScrollPosition();
+        // Initialize last scroll position
+        this._lastScrollTop = container.scrollTop;
+        // Check initial state unless skipped
+        if (!options?.skipInitialCheck) {
+            checkScrollPosition();
+        }
         // Listen for scroll events with passive listener for performance
         container.addEventListener('scroll', checkScrollPosition, { passive: true });
         // Also check on resize

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/bb-msg-history",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "A chat-style message history web component",
   "main": "dist/index.js",
   "type": "module",

package/src/component.ts

@@ -12,6 +12,9 @@ export class BBMsgHistory extends HTMLElement {
   private _lastAuthor = '';
   private _lastGroupTimestamp: string | undefined;
   private _scrollButtonVisible = false;
+  private _userHasScrolledManually = false;
+  private _isProgrammaticScroll = false;
+  private _lastScrollTop = 0;
 
   static get observedAttributes() {
     return ['theme', 'loading', 'hide-scroll-bar', 'infinite'];
@@ -149,11 +152,19 @@ export class BBMsgHistory extends HTMLElement {
 
     // Smooth scroll to bottom (skip in infinite mode)
     if (!this.hasAttribute('infinite')) {
+      // Mark this as a programmatic scroll so the scroll handler ignores it
+      this._isProgrammaticScroll = true;
+
       container.scrollTo({
         top: container.scrollHeight,
         behavior: 'smooth',
       });
 
+      // Reset the flag after smooth scroll animation completes (~300ms)
+      setTimeout(() => {
+        this._isProgrammaticScroll = false;
+      }, 300);
+
       // Hide scroll button since we're scrolling to bottom
       const scrollButton = this.shadowRoot!.querySelector('.scroll-to-bottom') as HTMLButtonElement;
       if (scrollButton && this._scrollButtonVisible) {
@@ -338,8 +349,13 @@ export class BBMsgHistory extends HTMLElement {
       const isInfinite = this.hasAttribute('infinite');
 
       if (container && !isInfinite) {
+        // Mark as programmatic scroll to prevent triggering user scroll detection
+        this._isProgrammaticScroll = true;
         container.scrollTop = container.scrollHeight;
-        this._setupScrollTracking(container, scrollButton);
+        requestAnimationFrame(() => {
+          this._isProgrammaticScroll = false;
+        });
+        this._setupScrollTracking(container, scrollButton, { skipInitialCheck: true });
       }
 
       if (scrollButton && !isInfinite) {
@@ -376,13 +392,30 @@ export class BBMsgHistory extends HTMLElement {
     }
   }
 
-  private _setupScrollTracking(container: HTMLElement, button: HTMLButtonElement): void {
+  private _setupScrollTracking(
+    container: HTMLElement,
+    button: HTMLButtonElement,
+    options?: { skipInitialCheck?: boolean }
+  ): void {
     const checkScrollPosition = () => {
+      // Ignore programmatic scrolls - they don't indicate user intent
+      if (this._isProgrammaticScroll) return;
+
+      // Mark that user has manually scrolled
+      if (!this._userHasScrolledManually) {
+        this._userHasScrolledManually = true;
+      }
+
+      const currentScrollTop = container.scrollTop;
+      const isScrollingUp = currentScrollTop < this._lastScrollTop;
+      this._lastScrollTop = currentScrollTop;
+
       const threshold = 50; // pixels from bottom
       const isAtBottom =
         container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
       const hasOverflow = container.scrollHeight > container.clientHeight;
-      const shouldShow = !isAtBottom && hasOverflow;
+      // Only show button when: user has scrolled, is not at bottom, is scrolling up
+      const shouldShow = !isAtBottom && hasOverflow && this._userHasScrolledManually && isScrollingUp;
 
       if (shouldShow !== this._scrollButtonVisible) {
         this._scrollButtonVisible = shouldShow;
@@ -390,8 +423,13 @@ export class BBMsgHistory extends HTMLElement {
       }
     };
 
-    // Check initial state
-    checkScrollPosition();
+    // Initialize last scroll position
+    this._lastScrollTop = container.scrollTop;
+
+    // Check initial state unless skipped
+    if (!options?.skipInitialCheck) {
+      checkScrollPosition();
+    }
 
     // Listen for scroll events with passive listener for performance
     container.addEventListener('scroll', checkScrollPosition, { passive: true });