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

package/dist/component.d.ts

@@ -41,6 +41,13 @@ export declare class BBMsgHistory extends HTMLElement {
      * el.appendMessage({ author: 'bob', text: 'How are you?' });
      */
     appendMessage(message: Message): this;
+    /**
+     * Scroll to the bottom of the message history.
+     *
+     * @example
+     * el.scrollToBottom();  // Scroll with smooth animation
+     */
+    scrollToBottom(): this;
     private _appendSingleMessage;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/component.js

@@ -76,6 +76,26 @@ export class BBMsgHistory extends HTMLElement {
         this._setupMutationObserver();
         return this;
     }
+    /**
+     * Scroll to the bottom of the message history.
+     *
+     * @example
+     * el.scrollToBottom();  // Scroll with smooth animation
+     */
+    scrollToBottom() {
+        if (this.hasAttribute('infinite')) {
+            return this;
+        }
+        const container = this.shadowRoot?.querySelector('.history');
+        if (!container) {
+            return this;
+        }
+        container.scrollTo({
+            top: container.scrollHeight,
+            behavior: 'smooth',
+        });
+        return this;
+    }
     _appendSingleMessage(message) {
         const container = this.shadowRoot.querySelector('.history');
         // If empty state or no container, do full render first
@@ -129,11 +149,13 @@ export class BBMsgHistory extends HTMLElement {
                 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,
@@ -283,12 +305,9 @@ 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) {
+            if (container && !isInfinite) {
                 // Mark as programmatic scroll to prevent triggering user scroll detection
                 this._isProgrammaticScroll = true;
                 container.scrollTop = container.scrollHeight;
@@ -347,8 +366,11 @@ export class BBMsgHistory extends HTMLElement {
             const shouldShow = !isAtBottom && hasOverflow && this._userHasScrolledManually && isScrollingUp;
             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,

package/package.json

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

package/src/component.ts

@@ -92,6 +92,30 @@ export class BBMsgHistory extends HTMLElement {
     return this;
   }
 
+  /**
+   * Scroll to the bottom of the message history.
+   *
+   * @example
+   * el.scrollToBottom();  // Scroll with smooth animation
+   */
+  scrollToBottom(): this {
+    if (this.hasAttribute('infinite')) {
+      return this;
+    }
+
+    const container = this.shadowRoot?.querySelector('.history') as HTMLElement | null;
+    if (!container) {
+      return this;
+    }
+
+    container.scrollTo({
+      top: container.scrollHeight,
+      behavior: 'smooth',
+    });
+
+    return this;
+  }
+
   private _appendSingleMessage(message: Message): void {
     const container = this.shadowRoot!.querySelector('.history') as HTMLElement;
 
@@ -166,12 +190,14 @@ export class BBMsgHistory extends HTMLElement {
       }, 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,
@@ -356,20 +382,17 @@ 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) {
+      if (container && !isInfinite) {
         // Mark as programmatic scroll to prevent triggering user scroll detection
         this._isProgrammaticScroll = true;
         container.scrollTop = container.scrollHeight;
         requestAnimationFrame(() => {
           this._isProgrammaticScroll = false;
         });
-        this._setupScrollTracking(container, scrollButton!, { skipInitialCheck: true });
+        this._setupScrollTracking(container, scrollButton, { skipInitialCheck: true });
       }
 
       if (scrollButton && !isInfinite) {
@@ -408,7 +431,7 @@ export class BBMsgHistory extends HTMLElement {
 
   private _setupScrollTracking(
     container: HTMLElement,
-    button: HTMLButtonElement,
+    button: HTMLButtonElement | null,
     options?: { skipInitialCheck?: boolean }
   ): void {
     const checkScrollPosition = () => {
@@ -433,9 +456,12 @@ export class BBMsgHistory extends HTMLElement {
 
       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,