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

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

@@ -6,7 +6,7 @@ import { buildMessageRowHtml, setupTooltipForElement } from './utils/message-bui
 import { buildScrollButtonHtml } from './utils/scroll-button.js';
 export class BBMsgHistory extends HTMLElement {
     static get observedAttributes() {
-        return ['theme', 'loading', 'hide-scroll-bar', 'infinite'];
+        return ['theme', 'loading', 'hide-scroll-bar', 'infinite', 'hide-scroll-button'];
     }
     constructor() {
         super();
@@ -19,7 +19,7 @@ export class BBMsgHistory extends HTMLElement {
         this.attachShadow({ mode: 'open' });
     }
     attributeChangedCallback(name) {
-        if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar' || name === 'infinite') {
+        if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar' || name === 'infinite' || name === 'hide-scroll-button') {
             this.render();
         }
     }
@@ -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
@@ -133,6 +153,12 @@ export class BBMsgHistory extends HTMLElement {
             if (scrollButton && this._scrollButtonVisible) {
                 this._scrollButtonVisible = false;
                 scrollButton.classList.remove('visible');
+                // Dispatch hide event
+                this.dispatchEvent(new CustomEvent('bb-scrollbuttonhide', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { visible: false }
+                }));
             }
         }
     }
@@ -233,12 +259,13 @@ export class BBMsgHistory extends HTMLElement {
           <div class="loading-spinner"></div>
         </div>`
             : '';
+        const hideScrollButton = this.hasAttribute('hide-scroll-button');
         this.shadowRoot.innerHTML = `
       <style>${MAIN_STYLES}${LOADING_STYLES}</style>
       <div class="history" role="log" aria-live="polite" aria-label="Message history">
         ${messagesHtml}
       </div>
-      ${buildScrollButtonHtml()}
+      ${hideScrollButton ? '' : buildScrollButtonHtml()}
       ${loadingOverlay}
     `;
         this._setupAfterRender();
@@ -276,9 +303,12 @@ export class BBMsgHistory extends HTMLElement {
     _setupAfterRender() {
         requestAnimationFrame(() => {
             const container = this.shadowRoot.querySelector('.history');
-            const scrollButton = this.shadowRoot.querySelector('.scroll-to-bottom');
+            const hideScrollButton = this.hasAttribute('hide-scroll-button');
+            const scrollButton = hideScrollButton
+                ? null
+                : this.shadowRoot.querySelector('.scroll-to-bottom');
             const isInfinite = this.hasAttribute('infinite');
-            if (container && !isInfinite) {
+            if (container && !isInfinite && !hideScrollButton) {
                 // Mark as programmatic scroll to prevent triggering user scroll detection
                 this._isProgrammaticScroll = true;
                 container.scrollTop = container.scrollHeight;
@@ -338,6 +368,12 @@ export class BBMsgHistory extends HTMLElement {
             if (shouldShow !== this._scrollButtonVisible) {
                 this._scrollButtonVisible = shouldShow;
                 button.classList.toggle('visible', shouldShow);
+                // Dispatch custom event
+                this.dispatchEvent(new CustomEvent(shouldShow ? 'bb-scrollbuttonshow' : 'bb-scrollbuttonhide', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { visible: shouldShow }
+                }));
             }
         };
         // Initialize last scroll position

package/dist/const/styles.js

@@ -71,6 +71,11 @@ export const MAIN_STYLES = `
     display: none;
   }
 
+  /* Hide scroll button when explicitly disabled */
+  :host([hide-scroll-button]) .scroll-to-bottom {
+    display: none;
+  }
+
   /* Scroll to bottom button */
   .scroll-to-bottom {
     position: absolute;

package/package.json

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

package/src/component.ts

@@ -17,7 +17,7 @@ export class BBMsgHistory extends HTMLElement {
   private _lastScrollTop = 0;
 
   static get observedAttributes() {
-    return ['theme', 'loading', 'hide-scroll-bar', 'infinite'];
+    return ['theme', 'loading', 'hide-scroll-bar', 'infinite', 'hide-scroll-button'];
   }
 
   constructor() {
@@ -26,7 +26,7 @@ export class BBMsgHistory extends HTMLElement {
   }
 
   attributeChangedCallback(name: string) {
-    if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar' || name === 'infinite') {
+    if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar' || name === 'infinite' || name === 'hide-scroll-button') {
       this.render();
     }
   }
@@ -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;
 
@@ -170,6 +194,15 @@ export class BBMsgHistory extends HTMLElement {
       if (scrollButton && this._scrollButtonVisible) {
         this._scrollButtonVisible = false;
         scrollButton.classList.remove('visible');
+
+        // Dispatch hide event
+        this.dispatchEvent(
+          new CustomEvent('bb-scrollbuttonhide', {
+            bubbles: true,
+            composed: true,
+            detail: { visible: false }
+          })
+        );
       }
     }
   }
@@ -293,12 +326,14 @@ export class BBMsgHistory extends HTMLElement {
         </div>`
       : '';
 
+    const hideScrollButton = this.hasAttribute('hide-scroll-button');
+
     this.shadowRoot!.innerHTML = `
       <style>${MAIN_STYLES}${LOADING_STYLES}</style>
       <div class="history" role="log" aria-live="polite" aria-label="Message history">
         ${messagesHtml}
       </div>
-      ${buildScrollButtonHtml()}
+      ${hideScrollButton ? '' : buildScrollButtonHtml()}
       ${loadingOverlay}
     `;
 
@@ -345,17 +380,20 @@ export class BBMsgHistory extends HTMLElement {
   private _setupAfterRender(): void {
     requestAnimationFrame(() => {
       const container = this.shadowRoot!.querySelector('.history') as HTMLElement;
-      const scrollButton = this.shadowRoot!.querySelector('.scroll-to-bottom') as HTMLButtonElement;
+      const hideScrollButton = this.hasAttribute('hide-scroll-button');
+      const scrollButton = hideScrollButton
+        ? null
+        : (this.shadowRoot!.querySelector('.scroll-to-bottom') as HTMLButtonElement);
       const isInfinite = this.hasAttribute('infinite');
 
-      if (container && !isInfinite) {
+      if (container && !isInfinite && !hideScrollButton) {
         // 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) {
@@ -420,6 +458,15 @@ export class BBMsgHistory extends HTMLElement {
       if (shouldShow !== this._scrollButtonVisible) {
         this._scrollButtonVisible = shouldShow;
         button.classList.toggle('visible', shouldShow);
+
+        // Dispatch custom event
+        this.dispatchEvent(
+          new CustomEvent(shouldShow ? 'bb-scrollbuttonshow' : 'bb-scrollbuttonhide', {
+            bubbles: true,
+            composed: true,
+            detail: { visible: shouldShow }
+          })
+        );
       }
     };
 

package/src/const/styles.ts

@@ -72,6 +72,11 @@ export const MAIN_STYLES = `
     display: none;
   }
 
+  /* Hide scroll button when explicitly disabled */
+  :host([hide-scroll-button]) .scroll-to-bottom {
+    display: none;
+  }
+
   /* Scroll to bottom button */
   .scroll-to-bottom {
     position: absolute;