@bbki.ng/bb-msg-history 0.12.0 → 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

@@ -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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/bb-msg-history",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "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;