@bbki.ng/bb-msg-history 0.13.1 → 0.14.1

package/dist/component.d.ts

@@ -5,12 +5,11 @@ export declare class BBMsgHistory extends HTMLElement {
     private _lastAuthor;
     private _lastGroupTimestamp;
     private _scrollButtonVisible;
-    private _userHasScrolledManually;
-    private _isProgrammaticScroll;
-    private _lastScrollTop;
+    private _scrollListeners;
+    private _debounceTimer?;
     static get observedAttributes(): string[];
     constructor();
-    attributeChangedCallback(name: string): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /**
      * Configure an author's avatar, side, and colors.
      * Call before or after rendering — the component re-renders automatically.
@@ -48,9 +47,21 @@ export declare class BBMsgHistory extends HTMLElement {
      * el.scrollToBottom();  // Scroll with smooth animation
      */
     scrollToBottom(): this;
+    /**
+     * Check if two messages can be grouped (same author, no timestamp conflict)
+     */
+    private _canGroupMessages;
     private _appendSingleMessage;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Track an event listener for cleanup on disconnect
+     */
+    private _addTrackedListener;
+    /**
+     * Remove all tracked event listeners
+     */
+    private _cleanupListeners;
     private _setupMutationObserver;
     private render;
     private _renderFullStructure;

package/dist/component.js

@@ -13,12 +13,17 @@ export class BBMsgHistory extends HTMLElement {
         this._userAuthors = new Map();
         this._lastAuthor = '';
         this._scrollButtonVisible = false;
-        this._userHasScrolledManually = false;
-        this._isProgrammaticScroll = false;
-        this._lastScrollTop = 0;
+        this._scrollListeners = [];
         this.attachShadow({ mode: 'open' });
+        // Create MutationObserver once - will be connected in connectedCallback
+        this._mutationObserver = new MutationObserver(() => {
+            clearTimeout(this._debounceTimer);
+            this._debounceTimer = setTimeout(() => this.render(), 50);
+        });
     }
-    attributeChangedCallback(name) {
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
         if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar' || name === 'infinite' || name === 'hide-scroll-button') {
             this.render();
         }
@@ -64,16 +69,21 @@ export class BBMsgHistory extends HTMLElement {
      * el.appendMessage({ author: 'bob', text: 'How are you?' });
      */
     appendMessage(message) {
+        // Temporarily disconnect observer BEFORE updating textContent to prevent double render
+        this._mutationObserver?.disconnect();
+        clearTimeout(this._debounceTimer);
         // Update textContent
         const currentText = this.textContent || '';
         const separator = currentText && !currentText.endsWith('\n') ? '\n' : '';
         this.textContent = currentText + separator + `${message.author}: ${message.text}`;
-        // Temporarily disconnect observer to prevent recursive render
-        this._mutationObserver?.disconnect();
         // Append single message without re-rendering entire list
         this._appendSingleMessage(message);
         // Reconnect observer
-        this._setupMutationObserver();
+        this._mutationObserver?.observe(this, {
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
         return this;
     }
     /**
@@ -96,6 +106,20 @@ export class BBMsgHistory extends HTMLElement {
         });
         return this;
     }
+    /**
+     * Check if two messages can be grouped (same author, no timestamp conflict)
+     */
+    _canGroupMessages(prev, curr) {
+        if (!prev)
+            return false;
+        if (prev.author !== curr.author)
+            return false;
+        // Different timestamps = break group
+        if (prev.timestamp && curr.timestamp && prev.timestamp !== curr.timestamp) {
+            return false;
+        }
+        return true;
+    }
     _appendSingleMessage(message) {
         const container = this.shadowRoot.querySelector('.history');
         // If empty state or no container, do full render first
@@ -107,14 +131,16 @@ export class BBMsgHistory extends HTMLElement {
         const text = message.text;
         const timestamp = message.timestamp;
         const config = resolveAuthorConfig(author, this._userAuthors);
-        // Check if this can group with the last message
-        // Same author AND (no timestamp conflict)
-        const canGroupWithLast = author === this._lastAuthor &&
-            (!this._lastGroupTimestamp || !timestamp || this._lastGroupTimestamp === timestamp);
+        // Build previous message object for grouping check
+        const prevMessage = this._lastAuthor
+            ? { author: this._lastAuthor, text: '', timestamp: this._lastGroupTimestamp }
+            : null;
+        // Use unified grouping logic
+        const canGroupWithLast = this._canGroupMessages(prevMessage, message);
         const isFirstFromAuthor = !canGroupWithLast;
         this._lastAuthor = author;
         const isSubsequent = !isFirstFromAuthor;
-        // Update group timestamp tracking
+        // Update group timestamp tracking (consistent with render())
         if (isFirstFromAuthor) {
             // Start new group
             this._lastGroupTimestamp = timestamp;
@@ -138,16 +164,10 @@ 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
             if (this._scrollButtonVisible) {
                 this._scrollButtonVisible = false;
@@ -170,14 +190,28 @@ export class BBMsgHistory extends HTMLElement {
     }
     disconnectedCallback() {
         this._mutationObserver?.disconnect();
+        clearTimeout(this._debounceTimer);
+        this._cleanupListeners();
     }
-    _setupMutationObserver() {
-        let debounceTimer;
-        this._mutationObserver = new MutationObserver(() => {
-            clearTimeout(debounceTimer);
-            debounceTimer = setTimeout(() => this.render(), 50);
+    /**
+     * Track an event listener for cleanup on disconnect
+     */
+    _addTrackedListener(el, type, fn) {
+        el.addEventListener(type, fn);
+        this._scrollListeners.push({ el, type, fn });
+    }
+    /**
+     * Remove all tracked event listeners
+     */
+    _cleanupListeners() {
+        this._scrollListeners.forEach(({ el, type, fn }) => {
+            el.removeEventListener(type, fn);
         });
-        this._mutationObserver.observe(this, {
+        this._scrollListeners = [];
+    }
+    _setupMutationObserver() {
+        // Observer was already created in constructor, just need to connect it
+        this._mutationObserver?.observe(this, {
             childList: true,
             characterData: true,
             subtree: true,
@@ -191,20 +225,10 @@ export class BBMsgHistory extends HTMLElement {
             this._renderEmpty();
             return;
         }
-        // Helper: Check if two messages can be grouped (same author, no timestamp conflict)
-        const canGroup = (prev, curr) => {
-            if (prev.author !== curr.author)
-                return false;
-            // Different timestamps = break group
-            if (prev.timestamp && curr.timestamp && prev.timestamp !== curr.timestamp) {
-                return false;
-            }
-            return true;
-        };
         // First pass: determine which messages are last in their group
         const lastInGroupFlags = messages.map((msg, i) => {
             const next = messages[i + 1];
-            return !next || !canGroup(msg, next);
+            return !next || !this._canGroupMessages(msg, next);
         });
         // Second pass: collect the timestamp for each group
         // Use the first non-empty timestamp in the group
@@ -212,7 +236,7 @@ export class BBMsgHistory extends HTMLElement {
         let currentGroupTimestamp;
         messages.forEach((msg, i) => {
             // Start of a new group
-            if (i === 0 || !canGroup(messages[i - 1], msg)) {
+            if (i === 0 || !this._canGroupMessages(messages[i - 1], msg)) {
                 currentGroupTimestamp = msg.timestamp;
             }
             else if (!currentGroupTimestamp && msg.timestamp) {
@@ -232,7 +256,7 @@ export class BBMsgHistory extends HTMLElement {
             const { author, text } = msg;
             const config = resolveAuthorConfig(author, this._userAuthors);
             // Determine if this is a new author group (can't group with previous)
-            const isFirstFromAuthor = i === 0 || !canGroup(messages[i - 1], msg);
+            const isFirstFromAuthor = i === 0 || !this._canGroupMessages(messages[i - 1], msg);
             lastAuthor = author;
             const isSubsequent = !isFirstFromAuthor;
             // Get timestamp if this is the last in group
@@ -256,6 +280,11 @@ export class BBMsgHistory extends HTMLElement {
         }
     }
     _renderFullStructure(messagesHtml) {
+        // Check if we should preserve scroll position before re-rendering
+        const existingContainer = this.shadowRoot.querySelector('.history');
+        const wasAtBottom = existingContainer
+            ? existingContainer.scrollHeight - existingContainer.scrollTop - existingContainer.clientHeight < 50
+            : true; // Default to true for initial render
         const loadingOverlay = this.hasAttribute('loading')
             ? `<div class="loading-overlay" role="status" aria-label="Loading messages">
           <div class="loading-spinner"></div>
@@ -270,7 +299,7 @@ export class BBMsgHistory extends HTMLElement {
       ${hideScrollButton ? '' : buildScrollButtonHtml()}
       ${loadingOverlay}
     `;
-        this._setupAfterRender();
+        this._setupAfterRender(wasAtBottom);
     }
     _updateContent(historyContainer, messagesHtml) {
         // Preserve scroll position before update
@@ -302,18 +331,15 @@ export class BBMsgHistory extends HTMLElement {
             existingOverlay.remove();
         }
     }
-    _setupAfterRender() {
+    _setupAfterRender(shouldScrollToBottom = true) {
         requestAnimationFrame(() => {
             const container = this.shadowRoot.querySelector('.history');
             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;
-                requestAnimationFrame(() => {
-                    this._isProgrammaticScroll = false;
-                });
+                if (shouldScrollToBottom) {
+                    container.scrollTop = container.scrollHeight;
+                }
                 this._setupScrollTracking(container, scrollButton, { skipInitialCheck: true });
             }
             if (scrollButton && !isInfinite) {
@@ -349,21 +375,11 @@ 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;
                 // Only toggle button visibility if button exists
@@ -378,15 +394,13 @@ export class BBMsgHistory extends HTMLElement {
                 }));
             }
         };
-        // 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 });
+        this._addTrackedListener(container, 'scroll', checkScrollPosition);
         // Also check on resize
-        window.addEventListener('resize', checkScrollPosition, { passive: true });
+        this._addTrackedListener(window, 'resize', checkScrollPosition);
     }
 }

package/package.json

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

package/src/component.ts

@@ -12,9 +12,8 @@ export class BBMsgHistory extends HTMLElement {
   private _lastAuthor = '';
   private _lastGroupTimestamp: string | undefined;
   private _scrollButtonVisible = false;
-  private _userHasScrolledManually = false;
-  private _isProgrammaticScroll = false;
-  private _lastScrollTop = 0;
+  private _scrollListeners: Array<{ el: EventTarget; type: string; fn: EventListener }> = [];
+  private _debounceTimer?: ReturnType<typeof setTimeout>;
 
   static get observedAttributes() {
     return ['theme', 'loading', 'hide-scroll-bar', 'infinite', 'hide-scroll-button'];
@@ -23,9 +22,15 @@ export class BBMsgHistory extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
+    // Create MutationObserver once - will be connected in connectedCallback
+    this._mutationObserver = new MutationObserver(() => {
+      clearTimeout(this._debounceTimer);
+      this._debounceTimer = setTimeout(() => this.render(), 50);
+    });
   }
 
-  attributeChangedCallback(name: string) {
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+    if (oldValue === newValue) return;
     if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar' || name === 'infinite' || name === 'hide-scroll-button') {
       this.render();
     }
@@ -75,19 +80,24 @@ export class BBMsgHistory extends HTMLElement {
    * el.appendMessage({ author: 'bob', text: 'How are you?' });
    */
   appendMessage(message: Message): this {
+    // Temporarily disconnect observer BEFORE updating textContent to prevent double render
+    this._mutationObserver?.disconnect();
+    clearTimeout(this._debounceTimer);
+
     // Update textContent
     const currentText = this.textContent || '';
     const separator = currentText && !currentText.endsWith('\n') ? '\n' : '';
     this.textContent = currentText + separator + `${message.author}: ${message.text}`;
 
-    // Temporarily disconnect observer to prevent recursive render
-    this._mutationObserver?.disconnect();
-
     // Append single message without re-rendering entire list
     this._appendSingleMessage(message);
 
     // Reconnect observer
-    this._setupMutationObserver();
+    this._mutationObserver?.observe(this, {
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
 
     return this;
   }
@@ -116,6 +126,19 @@ export class BBMsgHistory extends HTMLElement {
     return this;
   }
 
+  /**
+   * Check if two messages can be grouped (same author, no timestamp conflict)
+   */
+  private _canGroupMessages(prev: Message | null, curr: Message): boolean {
+    if (!prev) return false;
+    if (prev.author !== curr.author) return false;
+    // Different timestamps = break group
+    if (prev.timestamp && curr.timestamp && prev.timestamp !== curr.timestamp) {
+      return false;
+    }
+    return true;
+  }
+
   private _appendSingleMessage(message: Message): void {
     const container = this.shadowRoot!.querySelector('.history') as HTMLElement;
 
@@ -130,18 +153,19 @@ export class BBMsgHistory extends HTMLElement {
     const timestamp = message.timestamp;
     const config = resolveAuthorConfig(author, this._userAuthors);
 
-    // Check if this can group with the last message
-    // Same author AND (no timestamp conflict)
-    const canGroupWithLast =
-      author === this._lastAuthor &&
-      (!this._lastGroupTimestamp || !timestamp || this._lastGroupTimestamp === timestamp);
+    // Build previous message object for grouping check
+    const prevMessage: Message | null = this._lastAuthor
+      ? { author: this._lastAuthor, text: '', timestamp: this._lastGroupTimestamp }
+      : null;
 
+    // Use unified grouping logic
+    const canGroupWithLast = this._canGroupMessages(prevMessage, message);
     const isFirstFromAuthor = !canGroupWithLast;
     this._lastAuthor = author;
 
     const isSubsequent = !isFirstFromAuthor;
 
-    // Update group timestamp tracking
+    // Update group timestamp tracking (consistent with render())
     if (isFirstFromAuthor) {
       // Start new group
       this._lastGroupTimestamp = timestamp;
@@ -176,19 +200,11 @@ 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
       if (this._scrollButtonVisible) {
         this._scrollButtonVisible = false;
@@ -216,15 +232,31 @@ export class BBMsgHistory extends HTMLElement {
 
   disconnectedCallback() {
     this._mutationObserver?.disconnect();
+    clearTimeout(this._debounceTimer);
+    this._cleanupListeners();
   }
 
-  private _setupMutationObserver() {
-    let debounceTimer: ReturnType<typeof setTimeout>;
-    this._mutationObserver = new MutationObserver(() => {
-      clearTimeout(debounceTimer);
-      debounceTimer = setTimeout(() => this.render(), 50);
+  /**
+   * Track an event listener for cleanup on disconnect
+   */
+  private _addTrackedListener(el: EventTarget, type: string, fn: EventListener): void {
+    el.addEventListener(type, fn);
+    this._scrollListeners.push({ el, type, fn });
+  }
+
+  /**
+   * Remove all tracked event listeners
+   */
+  private _cleanupListeners(): void {
+    this._scrollListeners.forEach(({ el, type, fn }) => {
+      el.removeEventListener(type, fn);
     });
-    this._mutationObserver.observe(this, {
+    this._scrollListeners = [];
+  }
+
+  private _setupMutationObserver() {
+    // Observer was already created in constructor, just need to connect it
+    this._mutationObserver?.observe(this, {
       childList: true,
       characterData: true,
       subtree: true,
@@ -241,20 +273,10 @@ export class BBMsgHistory extends HTMLElement {
       return;
     }
 
-    // Helper: Check if two messages can be grouped (same author, no timestamp conflict)
-    const canGroup = (prev: Message, curr: Message): boolean => {
-      if (prev.author !== curr.author) return false;
-      // Different timestamps = break group
-      if (prev.timestamp && curr.timestamp && prev.timestamp !== curr.timestamp) {
-        return false;
-      }
-      return true;
-    };
-
     // First pass: determine which messages are last in their group
     const lastInGroupFlags: boolean[] = messages.map((msg, i) => {
       const next = messages[i + 1];
-      return !next || !canGroup(msg, next);
+      return !next || !this._canGroupMessages(msg, next);
     });
 
     // Second pass: collect the timestamp for each group
@@ -264,7 +286,7 @@ export class BBMsgHistory extends HTMLElement {
 
     messages.forEach((msg, i) => {
       // Start of a new group
-      if (i === 0 || !canGroup(messages[i - 1], msg)) {
+      if (i === 0 || !this._canGroupMessages(messages[i - 1], msg)) {
         currentGroupTimestamp = msg.timestamp;
       } else if (!currentGroupTimestamp && msg.timestamp) {
         // If no timestamp yet and current msg has one, use it
@@ -286,7 +308,7 @@ export class BBMsgHistory extends HTMLElement {
         const config = resolveAuthorConfig(author, this._userAuthors);
 
         // Determine if this is a new author group (can't group with previous)
-        const isFirstFromAuthor = i === 0 || !canGroup(messages[i - 1], msg);
+        const isFirstFromAuthor = i === 0 || !this._canGroupMessages(messages[i - 1], msg);
         lastAuthor = author;
         const isSubsequent = !isFirstFromAuthor;
 
@@ -322,6 +344,12 @@ export class BBMsgHistory extends HTMLElement {
   }
 
   private _renderFullStructure(messagesHtml: string): void {
+    // Check if we should preserve scroll position before re-rendering
+    const existingContainer = this.shadowRoot!.querySelector('.history') as HTMLElement | null;
+    const wasAtBottom = existingContainer
+      ? existingContainer.scrollHeight - existingContainer.scrollTop - existingContainer.clientHeight < 50
+      : true; // Default to true for initial render
+
     const loadingOverlay = this.hasAttribute('loading')
       ? `<div class="loading-overlay" role="status" aria-label="Loading messages">
           <div class="loading-spinner"></div>
@@ -339,7 +367,7 @@ export class BBMsgHistory extends HTMLElement {
       ${loadingOverlay}
     `;
 
-    this._setupAfterRender();
+    this._setupAfterRender(wasAtBottom);
   }
 
   private _updateContent(historyContainer: HTMLElement, messagesHtml: string): void {
@@ -379,19 +407,16 @@ export class BBMsgHistory extends HTMLElement {
     }
   }
 
-  private _setupAfterRender(): void {
+  private _setupAfterRender(shouldScrollToBottom = true): void {
     requestAnimationFrame(() => {
       const container = this.shadowRoot!.querySelector('.history') as HTMLElement;
       const scrollButton = this.shadowRoot!.querySelector('.scroll-to-bottom') as HTMLButtonElement | null;
       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;
-        requestAnimationFrame(() => {
-          this._isProgrammaticScroll = false;
-        });
+        if (shouldScrollToBottom) {
+          container.scrollTop = container.scrollHeight;
+        }
         this._setupScrollTracking(container, scrollButton, { skipInitialCheck: true });
       }
 
@@ -435,24 +460,12 @@ export class BBMsgHistory extends HTMLElement {
     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;
@@ -472,18 +485,15 @@ export class BBMsgHistory extends HTMLElement {
       }
     };
 
-    // 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 });
+    this._addTrackedListener(container, 'scroll', checkScrollPosition);
 
     // Also check on resize
-    window.addEventListener('resize', checkScrollPosition, { passive: true });
+    this._addTrackedListener(window, 'resize', checkScrollPosition);
   }
 }