@bbki.ng/bb-msg-history 0.13.0 → 0.14.0

package/dist/component.d.ts

@@ -5,9 +5,6 @@ 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,9 +13,6 @@ 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) {
@@ -138,22 +135,18 @@ 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) {
+            if (this._scrollButtonVisible) {
                 this._scrollButtonVisible = false;
-                scrollButton.classList.remove('visible');
-                // Dispatch hide event
+                const scrollButton = this.shadowRoot.querySelector('.scroll-to-bottom');
+                if (scrollButton) {
+                    scrollButton.classList.remove('visible');
+                }
+                // Dispatch hide event (always, regardless of button visibility)
                 this.dispatchEvent(new CustomEvent('bb-scrollbuttonhide', {
                     bubbles: true,
                     composed: true,
@@ -303,18 +296,10 @@ export class BBMsgHistory extends HTMLElement {
     _setupAfterRender() {
         requestAnimationFrame(() => {
             const container = this.shadowRoot.querySelector('.history');
-            const hideScrollButton = this.hasAttribute('hide-scroll-button');
-            const scrollButton = hideScrollButton
-                ? null
-                : this.shadowRoot.querySelector('.scroll-to-bottom');
+            const scrollButton = this.shadowRoot.querySelector('.scroll-to-bottom');
             const isInfinite = this.hasAttribute('infinite');
-            if (container && !isInfinite && !hideScrollButton) {
-                // Mark as programmatic scroll to prevent triggering user scroll detection
-                this._isProgrammaticScroll = true;
+            if (container && !isInfinite) {
                 container.scrollTop = container.scrollHeight;
-                requestAnimationFrame(() => {
-                    this._isProgrammaticScroll = false;
-                });
                 this._setupScrollTracking(container, scrollButton, { skipInitialCheck: true });
             }
             if (scrollButton && !isInfinite) {
@@ -350,25 +335,18 @@ export class BBMsgHistory extends HTMLElement {
     }
     _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;
-            // Only show button when: user has scrolled, is not at bottom, is scrolling up
-            const shouldShow = !isAtBottom && hasOverflow && this._userHasScrolledManually && isScrollingUp;
+            // Show button when not at bottom and content has overflow
+            const shouldShow = !isAtBottom && hasOverflow;
             if (shouldShow !== this._scrollButtonVisible) {
                 this._scrollButtonVisible = shouldShow;
-                button.classList.toggle('visible', shouldShow);
-                // Dispatch custom event
+                // Only toggle button visibility if button exists
+                if (button) {
+                    button.classList.toggle('visible', shouldShow);
+                }
+                // Dispatch custom event (always, regardless of button visibility)
                 this.dispatchEvent(new CustomEvent(shouldShow ? 'bb-scrollbuttonshow' : 'bb-scrollbuttonhide', {
                     bubbles: true,
                     composed: true,
@@ -376,8 +354,6 @@ export class BBMsgHistory extends HTMLElement {
                 }));
             }
         };
-        // Initialize last scroll position
-        this._lastScrollTop = container.scrollTop;
         // Check initial state unless skipped
         if (!options?.skipInitialCheck) {
             checkScrollPosition();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/bb-msg-history",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "A chat-style message history web component",
   "main": "dist/index.js",
   "type": "module",
@@ -23,19 +23,6 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "start": "tsc -w",
-    "preview": "python3 -m http.server 8000",
-    "prepare": "tsc && cp dist/index.js dist/index.dev.js && terser dist/index.js --compress --mangle --source-map -o dist/index.js",
-    "build": "tsc && cp dist/index.js dist/index.dev.js && terser dist/index.js --compress --mangle --source-map -o dist/index.js",
-    "lint": "eslint src/**/*.ts",
-    "lint:fix": "eslint src/**/*.ts --fix",
-    "format": "prettier --write \"src/**/*.ts\"",
-    "format:check": "prettier --check \"src/**/*.ts\"",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "release": "release-it"
-  },
   "lint-staged": {
     "*.ts": [
       "eslint --fix",
@@ -60,5 +47,17 @@
     "terser": "^5.46.0",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "start": "tsc -w",
+    "preview": "python3 -m http.server 8000",
+    "build": "tsc && cp dist/index.js dist/index.dev.js && terser dist/index.js --compress --mangle --source-map -o dist/index.js",
+    "lint": "eslint src/**/*.ts",
+    "lint:fix": "eslint src/**/*.ts --fix",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "format:check": "prettier --check \"src/**/*.ts\"",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "release": "release-it"
   }
-}
+}

package/src/component.ts

@@ -12,9 +12,6 @@ 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', 'hide-scroll-button'];
@@ -176,26 +173,20 @@ 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) {
+      if (this._scrollButtonVisible) {
         this._scrollButtonVisible = false;
-        scrollButton.classList.remove('visible');
+        const scrollButton = this.shadowRoot!.querySelector('.scroll-to-bottom') as HTMLButtonElement | null;
+        if (scrollButton) {
+          scrollButton.classList.remove('visible');
+        }
 
-        // Dispatch hide event
+        // Dispatch hide event (always, regardless of button visibility)
         this.dispatchEvent(
           new CustomEvent('bb-scrollbuttonhide', {
             bubbles: true,
@@ -380,20 +371,12 @@ export class BBMsgHistory extends HTMLElement {
   private _setupAfterRender(): void {
     requestAnimationFrame(() => {
       const container = this.shadowRoot!.querySelector('.history') as HTMLElement;
-      const hideScrollButton = this.hasAttribute('hide-scroll-button');
-      const scrollButton = hideScrollButton
-        ? null
-        : (this.shadowRoot!.querySelector('.scroll-to-bottom') as HTMLButtonElement);
+      const scrollButton = this.shadowRoot!.querySelector('.scroll-to-bottom') as HTMLButtonElement | null;
       const isInfinite = this.hasAttribute('infinite');
 
-      if (container && !isInfinite && !hideScrollButton) {
-        // Mark as programmatic scroll to prevent triggering user scroll detection
-        this._isProgrammaticScroll = true;
+      if (container && !isInfinite) {
         container.scrollTop = container.scrollHeight;
-        requestAnimationFrame(() => {
-          this._isProgrammaticScroll = false;
-        });
-        this._setupScrollTracking(container, scrollButton!, { skipInitialCheck: true });
+        this._setupScrollTracking(container, scrollButton, { skipInitialCheck: true });
       }
 
       if (scrollButton && !isInfinite) {
@@ -432,34 +415,25 @@ export class BBMsgHistory extends HTMLElement {
 
   private _setupScrollTracking(
     container: HTMLElement,
-    button: HTMLButtonElement,
+    button: HTMLButtonElement | null,
     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;
-      // Only show button when: user has scrolled, is not at bottom, is scrolling up
-      const shouldShow = !isAtBottom && hasOverflow && this._userHasScrolledManually && isScrollingUp;
+      // Show button when not at bottom and content has overflow
+      const shouldShow = !isAtBottom && hasOverflow;
 
       if (shouldShow !== this._scrollButtonVisible) {
         this._scrollButtonVisible = shouldShow;
-        button.classList.toggle('visible', shouldShow);
+        // Only toggle button visibility if button exists
+        if (button) {
+          button.classList.toggle('visible', shouldShow);
+        }
 
-        // Dispatch custom event
+        // Dispatch custom event (always, regardless of button visibility)
         this.dispatchEvent(
           new CustomEvent(shouldShow ? 'bb-scrollbuttonshow' : 'bb-scrollbuttonhide', {
             bubbles: true,
@@ -470,9 +444,6 @@ export class BBMsgHistory extends HTMLElement {
       }
     };
 
-    // Initialize last scroll position
-    this._lastScrollTop = container.scrollTop;
-
     // Check initial state unless skipped
     if (!options?.skipInitialCheck) {
       checkScrollPosition();