@bbki.ng/bb-msg-history 0.10.0 → 0.11.1

package/README.md

@@ -130,6 +130,29 @@ You can also use the HTML attribute:
 </bb-msg-history>
 ```
 
+### `infinite` Attribute
+
+Remove the height constraint and disable scrolling on the component. The container expands to fit all messages.
+
+Use this when:
+- The parent container handles scrolling
+- You want to display an entire conversation without height limits
+- You need the component to be part of a larger scrollable area
+
+```html
+<bb-msg-history infinite>
+  alice: First message
+  bob: Second message
+  alice: Third message
+  <!-- Container keeps expanding to fit all messages -->
+</bb-msg-history>
+```
+
+In infinite mode:
+- No `max-height` constraint is applied
+- No scrollbar appears on the component
+- The scroll-to-bottom button is hidden (not needed)
+
 ## Customization
 
 ### CSS Custom Properties
@@ -175,6 +198,7 @@ define('my-chat-history');
 - `prefers-reduced-motion` support
 - Reactive: automatically re-renders when content changes
 - Customizable max-height via `--bb-max-height` CSS custom property
+- **`infinite` attribute** — remove height constraints for parent-controlled scrolling
 - Graceful degradation to `<pre>` when Custom Elements are unsupported
 
 ## Examples

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'];
+        return ['theme', 'loading', 'hide-scroll-bar', 'infinite'];
     }
     constructor() {
         super();
@@ -16,7 +16,7 @@ export class BBMsgHistory extends HTMLElement {
         this.attachShadow({ mode: 'open' });
     }
     attributeChangedCallback(name) {
-        if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar') {
+        if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar' || name === 'infinite') {
             this.render();
         }
     }
@@ -113,16 +113,18 @@ export class BBMsgHistory extends HTMLElement {
         if (newWrapper) {
             setupTooltipForElement(newWrapper);
         }
-        // Smooth scroll to bottom
-        container.scrollTo({
-            top: container.scrollHeight,
-            behavior: 'smooth',
-        });
-        // Hide scroll button since we're scrolling to bottom
-        const scrollButton = this.shadowRoot.querySelector('.scroll-to-bottom');
-        if (scrollButton && this._scrollButtonVisible) {
-            this._scrollButtonVisible = false;
-            scrollButton.classList.remove('visible');
+        // Smooth scroll to bottom (skip in infinite mode)
+        if (!this.hasAttribute('infinite')) {
+            container.scrollTo({
+                top: container.scrollHeight,
+                behavior: 'smooth',
+            });
+            // Hide scroll button since we're scrolling to bottom
+            const scrollButton = this.shadowRoot.querySelector('.scroll-to-bottom');
+            if (scrollButton && this._scrollButtonVisible) {
+                this._scrollButtonVisible = false;
+                scrollButton.classList.remove('visible');
+            }
         }
     }
     connectedCallback() {
@@ -266,11 +268,12 @@ export class BBMsgHistory extends HTMLElement {
         requestAnimationFrame(() => {
             const container = this.shadowRoot.querySelector('.history');
             const scrollButton = this.shadowRoot.querySelector('.scroll-to-bottom');
-            if (container) {
+            const isInfinite = this.hasAttribute('infinite');
+            if (container && !isInfinite) {
                 container.scrollTop = container.scrollHeight;
-                this._setupScrollTracking(container, scrollButton);
+                this._setupScrollTracking(container, scrollButton, { skipInitialCheck: true });
             }
-            if (scrollButton) {
+            if (scrollButton && !isInfinite) {
                 scrollButton.addEventListener('click', () => {
                     container?.scrollTo({
                         top: container.scrollHeight,
@@ -301,7 +304,7 @@ export class BBMsgHistory extends HTMLElement {
       `;
         }
     }
-    _setupScrollTracking(container, button) {
+    _setupScrollTracking(container, button, options) {
         const checkScrollPosition = () => {
             const threshold = 50; // pixels from bottom
             const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
@@ -312,8 +315,10 @@ export class BBMsgHistory extends HTMLElement {
                 button.classList.toggle('visible', shouldShow);
             }
         };
-        // Check initial state
-        checkScrollPosition();
+        // Check initial state unless skipped
+        if (!options?.skipInitialCheck) {
+            checkScrollPosition();
+        }
         // Listen for scroll events with passive listener for performance
         container.addEventListener('scroll', checkScrollPosition, { passive: true });
         // Also check on resize

package/dist/const/styles.js

@@ -60,6 +60,17 @@ export const MAIN_STYLES = `
     display: none;  /* Chrome, Safari, Opera */
   }
 
+  /* Infinite mode - no max height, no scroll */
+  :host([infinite]) .history {
+    max-height: none;
+    overflow-y: visible;
+  }
+
+  /* Hide scroll button in infinite mode */
+  :host([infinite]) .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.10.0",
+  "version": "0.11.1",
   "description": "A chat-style message history web component",
   "main": "dist/index.js",
   "type": "module",

package/src/component.ts

@@ -14,7 +14,7 @@ export class BBMsgHistory extends HTMLElement {
   private _scrollButtonVisible = false;
 
   static get observedAttributes() {
-    return ['theme', 'loading', 'hide-scroll-bar'];
+    return ['theme', 'loading', 'hide-scroll-bar', 'infinite'];
   }
 
   constructor() {
@@ -23,7 +23,7 @@ export class BBMsgHistory extends HTMLElement {
   }
 
   attributeChangedCallback(name: string) {
-    if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar') {
+    if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar' || name === 'infinite') {
       this.render();
     }
   }
@@ -147,17 +147,19 @@ export class BBMsgHistory extends HTMLElement {
       setupTooltipForElement(newWrapper);
     }
 
-    // Smooth scroll to bottom
-    container.scrollTo({
-      top: container.scrollHeight,
-      behavior: 'smooth',
-    });
+    // Smooth scroll to bottom (skip in infinite mode)
+    if (!this.hasAttribute('infinite')) {
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: 'smooth',
+      });
 
-    // Hide scroll button since we're scrolling to bottom
-    const scrollButton = this.shadowRoot!.querySelector('.scroll-to-bottom') as HTMLButtonElement;
-    if (scrollButton && this._scrollButtonVisible) {
-      this._scrollButtonVisible = false;
-      scrollButton.classList.remove('visible');
+      // Hide scroll button since we're scrolling to bottom
+      const scrollButton = this.shadowRoot!.querySelector('.scroll-to-bottom') as HTMLButtonElement;
+      if (scrollButton && this._scrollButtonVisible) {
+        this._scrollButtonVisible = false;
+        scrollButton.classList.remove('visible');
+      }
     }
   }
 
@@ -333,13 +335,14 @@ export class BBMsgHistory extends HTMLElement {
     requestAnimationFrame(() => {
       const container = this.shadowRoot!.querySelector('.history') as HTMLElement;
       const scrollButton = this.shadowRoot!.querySelector('.scroll-to-bottom') as HTMLButtonElement;
+      const isInfinite = this.hasAttribute('infinite');
 
-      if (container) {
+      if (container && !isInfinite) {
         container.scrollTop = container.scrollHeight;
-        this._setupScrollTracking(container, scrollButton);
+        this._setupScrollTracking(container, scrollButton, { skipInitialCheck: true });
       }
 
-      if (scrollButton) {
+      if (scrollButton && !isInfinite) {
         scrollButton.addEventListener('click', () => {
           container?.scrollTo({
             top: container.scrollHeight,
@@ -373,7 +376,11 @@ export class BBMsgHistory extends HTMLElement {
     }
   }
 
-  private _setupScrollTracking(container: HTMLElement, button: HTMLButtonElement): void {
+  private _setupScrollTracking(
+    container: HTMLElement,
+    button: HTMLButtonElement,
+    options?: { skipInitialCheck?: boolean }
+  ): void {
     const checkScrollPosition = () => {
       const threshold = 50; // pixels from bottom
       const isAtBottom =
@@ -387,8 +394,10 @@ export class BBMsgHistory extends HTMLElement {
       }
     };
 
-    // Check initial state
-    checkScrollPosition();
+    // Check initial state unless skipped
+    if (!options?.skipInitialCheck) {
+      checkScrollPosition();
+    }
 
     // Listen for scroll events with passive listener for performance
     container.addEventListener('scroll', checkScrollPosition, { passive: true });

package/src/const/styles.ts

@@ -61,6 +61,17 @@ export const MAIN_STYLES = `
     display: none;  /* Chrome, Safari, Opera */
   }
 
+  /* Infinite mode - no max height, no scroll */
+  :host([infinite]) .history {
+    max-height: none;
+    overflow-y: visible;
+  }
+
+  /* Hide scroll button in infinite mode */
+  :host([infinite]) .scroll-to-bottom {
+    display: none;
+  }
+
   /* Scroll to bottom button */
   .scroll-to-bottom {
     position: absolute;