@bbki.ng/bb-msg-history 0.9.0 → 0.11.0

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);
             }
-            if (scrollButton) {
+            if (scrollButton && !isInfinite) {
                 scrollButton.addEventListener('click', () => {
                     container?.scrollTo({
                         top: container.scrollHeight,

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;
@@ -68,7 +79,7 @@ export const MAIN_STYLES = `
     width: 36px;
     height: 36px;
     border-radius: 50%;
-    background: transparent;
+    background: #ffffff;
     border: none;
     color: ${THEME.gray[500]};
     cursor: pointer;
@@ -77,8 +88,8 @@ export const MAIN_STYLES = `
     justify-content: center;
     opacity: 0;
     visibility: hidden;
-    transform: translateX(-50%) translateY(10px) scale(0.9);
-    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
+    transform: translateX(-50%) translateY(10px) scale(0);
+    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
     z-index: 10;
   }
@@ -91,12 +102,12 @@ export const MAIN_STYLES = `
 
   .scroll-to-bottom:hover {
     color: ${THEME.gray[700]};
-    transform: translateX(-50%) translateY(-2px);
+    transform: translateX(-50%) translateY(-2px) scale(1.05);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
   }
 
   .scroll-to-bottom:active {
-    transform: translateX(-50%) translateY(0) scale(0.95);
+    transform: translateX(-50%) translateY(-1px) scale(0.95);
   }
 
   .scroll-to-bottom svg {
@@ -425,19 +436,19 @@ export const MAIN_STYLES = `
 
     .scroll-to-bottom {
       transition: opacity 0.15s ease, visibility 0.15s ease;
-      transform: translateX(-50%);
+      transform: translateX(-50%) translateY(10px) scale(0);
     }
 
     .scroll-to-bottom.visible {
-      transform: translateX(-50%);
+      transform: translateX(-50%) translateY(0) scale(1);
     }
 
     .scroll-to-bottom:hover {
-      transform: translateX(-50%);
+      transform: translateX(-50%) translateY(-2px) scale(1);
     }
 
     .scroll-to-bottom:active {
-      transform: translateX(-50%);
+      transform: translateX(-50%) translateY(0) scale(0.95);
     }
   }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/bb-msg-history",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "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);
       }
 
-      if (scrollButton) {
+      if (scrollButton && !isInfinite) {
         scrollButton.addEventListener('click', () => {
           container?.scrollTo({
             top: container.scrollHeight,

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;
@@ -69,7 +80,7 @@ export const MAIN_STYLES = `
     width: 36px;
     height: 36px;
     border-radius: 50%;
-    background: transparent;
+    background: #ffffff;
     border: none;
     color: ${THEME.gray[500]};
     cursor: pointer;
@@ -78,8 +89,8 @@ export const MAIN_STYLES = `
     justify-content: center;
     opacity: 0;
     visibility: hidden;
-    transform: translateX(-50%) translateY(10px) scale(0.9);
-    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
+    transform: translateX(-50%) translateY(10px) scale(0);
+    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
     z-index: 10;
   }
@@ -92,12 +103,12 @@ export const MAIN_STYLES = `
 
   .scroll-to-bottom:hover {
     color: ${THEME.gray[700]};
-    transform: translateX(-50%) translateY(-2px);
+    transform: translateX(-50%) translateY(-2px) scale(1.05);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
   }
 
   .scroll-to-bottom:active {
-    transform: translateX(-50%) translateY(0) scale(0.95);
+    transform: translateX(-50%) translateY(-1px) scale(0.95);
   }
 
   .scroll-to-bottom svg {
@@ -426,19 +437,19 @@ export const MAIN_STYLES = `
 
     .scroll-to-bottom {
       transition: opacity 0.15s ease, visibility 0.15s ease;
-      transform: translateX(-50%);
+      transform: translateX(-50%) translateY(10px) scale(0);
     }
 
     .scroll-to-bottom.visible {
-      transform: translateX(-50%);
+      transform: translateX(-50%) translateY(0) scale(1);
     }
 
     .scroll-to-bottom:hover {
-      transform: translateX(-50%);
+      transform: translateX(-50%) translateY(-2px) scale(1);
     }
 
     .scroll-to-bottom:active {
-      transform: translateX(-50%);
+      transform: translateX(-50%) translateY(0) scale(0.95);
     }
   }
 `;