@bbki.ng/bb-msg-history 0.3.0 → 0.4.0

package/dist/component.d.ts

@@ -3,6 +3,7 @@ export declare class BBMsgHistory extends HTMLElement {
     private _mutationObserver?;
     private _userAuthors;
     private _lastAuthor;
+    private _scrollButtonVisible;
     constructor();
     /**
      * Configure an author's avatar, side, and colors.
@@ -32,4 +33,5 @@ export declare class BBMsgHistory extends HTMLElement {
     private _setupMutationObserver;
     private render;
     private _renderEmpty;
+    private _setupScrollTracking;
 }

package/dist/component.js

@@ -3,11 +3,13 @@ import { parseMessages } from './utils/message-parser.js';
 import { resolveAuthorConfig } from './utils/author-resolver.js';
 import { setupTooltips } from './utils/tooltip.js';
 import { buildMessageRowHtml, setupTooltipForElement } from './utils/message-builder.js';
+import { buildScrollButtonHtml } from './utils/scroll-button.js';
 export class BBMsgHistory extends HTMLElement {
     constructor() {
         super();
         this._userAuthors = new Map();
         this._lastAuthor = '';
+        this._scrollButtonVisible = false;
         this.attachShadow({ mode: 'open' });
     }
     /**
@@ -79,6 +81,12 @@ export class BBMsgHistory extends HTMLElement {
             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() {
         this.render();
@@ -123,11 +131,22 @@ export class BBMsgHistory extends HTMLElement {
       <div class="history" role="log" aria-live="polite" aria-label="Message history">
         ${messagesHtml}
       </div>
+      ${buildScrollButtonHtml()}
     `;
         requestAnimationFrame(() => {
             const container = this.shadowRoot.querySelector('.history');
+            const scrollButton = this.shadowRoot.querySelector('.scroll-to-bottom');
             if (container) {
                 container.scrollTop = container.scrollHeight;
+                this._setupScrollTracking(container, scrollButton);
+            }
+            if (scrollButton) {
+                scrollButton.addEventListener('click', () => {
+                    container?.scrollTo({
+                        top: container.scrollHeight,
+                        behavior: 'smooth'
+                    });
+                });
             }
             setupTooltips(this.shadowRoot);
         });
@@ -138,4 +157,22 @@ export class BBMsgHistory extends HTMLElement {
       <div class="empty-state">No messages</div>
     `;
     }
+    _setupScrollTracking(container, button) {
+        const checkScrollPosition = () => {
+            const threshold = 50; // pixels from bottom
+            const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
+            const hasOverflow = container.scrollHeight > container.clientHeight;
+            const shouldShow = !isAtBottom && hasOverflow;
+            if (shouldShow !== this._scrollButtonVisible) {
+                this._scrollButtonVisible = shouldShow;
+                button.classList.toggle('visible', shouldShow);
+            }
+        };
+        // Check initial state
+        checkScrollPosition();
+        // Listen for scroll events with passive listener for performance
+        container.addEventListener('scroll', checkScrollPosition, { passive: true });
+        // Also check on resize
+        window.addEventListener('resize', checkScrollPosition, { passive: true });
+    }
 }

package/dist/const/styles.js

@@ -5,6 +5,7 @@ import { THEME } from './theme.js';
 export const MAIN_STYLES = `
   :host {
     display: block;
+    position: relative;
     font-family: "PT Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
       "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
       "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
@@ -47,6 +48,50 @@ export const MAIN_STYLES = `
     background: ${THEME.gray[500]};
   }
 
+  /* Scroll to bottom button */
+  .scroll-to-bottom {
+    position: absolute;
+    bottom: 16px;
+    left: 50%;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: transparent;
+    border: none;
+    color: ${THEME.gray[500]};
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    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;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+    z-index: 10;
+  }
+
+  .scroll-to-bottom.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+
+  .scroll-to-bottom:hover {
+    color: ${THEME.gray[700]};
+    transform: translateX(-50%) translateY(-2px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  }
+
+  .scroll-to-bottom:active {
+    transform: translateX(-50%) translateY(0) scale(0.95);
+  }
+
+  .scroll-to-bottom svg {
+    width: 20px;
+    height: 20px;
+  }
+
   /* Message row layout */
   .msg-row {
     display: flex;
@@ -196,6 +241,17 @@ export const MAIN_STYLES = `
       width: 1.5rem;
       height: 1.5rem;
     }
+
+    .scroll-to-bottom {
+      width: 32px;
+      height: 32px;
+      bottom: 12px;
+    }
+
+    .scroll-to-bottom svg {
+      width: 18px;
+      height: 18px;
+    }
   }
 
   /* Dark mode */
@@ -234,6 +290,18 @@ export const MAIN_STYLES = `
     .empty-state {
       color: ${THEME.gray[500]};
     }
+
+    .scroll-to-bottom {
+      background: transparent;
+      border: none;
+      color: ${THEME.gray[400]};
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+    }
+
+    .scroll-to-bottom:hover {
+      color: ${THEME.gray[300]};
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+    }
   }
 
   /* Reduced motion */
@@ -241,6 +309,23 @@ export const MAIN_STYLES = `
     .history {
       scroll-behavior: auto;
     }
+
+    .scroll-to-bottom {
+      transition: opacity 0.15s ease, visibility 0.15s ease;
+      transform: translateX(-50%);
+    }
+
+    .scroll-to-bottom.visible {
+      transform: translateX(-50%);
+    }
+
+    .scroll-to-bottom:hover {
+      transform: translateX(-50%);
+    }
+
+    .scroll-to-bottom:active {
+      transform: translateX(-50%);
+    }
   }
 `;
 /**

package/dist/utils/scroll-button.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Build scroll-to-bottom button HTML string
+ */
+export declare function buildScrollButtonHtml(): string;

package/dist/utils/scroll-button.js

@@ -0,0 +1,12 @@
+/**
+ * Build scroll-to-bottom button HTML string
+ */
+export function buildScrollButtonHtml() {
+    return `
+    <button class="scroll-to-bottom" aria-label="Scroll to bottom" title="Scroll to bottom">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    </button>
+  `;
+}

package/package.json

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

package/src/component.ts

@@ -4,11 +4,13 @@ import { parseMessages } from './utils/message-parser.js';
 import { resolveAuthorConfig } from './utils/author-resolver.js';
 import { setupTooltips } from './utils/tooltip.js';
 import { buildMessageRowHtml, setupTooltipForElement } from './utils/message-builder.js';
+import { buildScrollButtonHtml } from './utils/scroll-button.js';
 
 export class BBMsgHistory extends HTMLElement {
   private _mutationObserver?: MutationObserver;
   private _userAuthors = new Map<string, AuthorOptions>();
   private _lastAuthor = '';
+  private _scrollButtonVisible = false;
 
   constructor() {
     super();
@@ -98,6 +100,13 @@ export class BBMsgHistory extends HTMLElement {
       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');
+    }
   }
 
   connectedCallback() {
@@ -151,12 +160,25 @@ export class BBMsgHistory extends HTMLElement {
       <div class="history" role="log" aria-live="polite" aria-label="Message history">
         ${messagesHtml}
       </div>
+      ${buildScrollButtonHtml()}
     `;
 
     requestAnimationFrame(() => {
       const container = this.shadowRoot!.querySelector('.history') as HTMLElement;
+      const scrollButton = this.shadowRoot!.querySelector('.scroll-to-bottom') as HTMLButtonElement;
+
       if (container) {
         container.scrollTop = container.scrollHeight;
+        this._setupScrollTracking(container, scrollButton);
+      }
+
+      if (scrollButton) {
+        scrollButton.addEventListener('click', () => {
+          container?.scrollTo({
+            top: container.scrollHeight,
+            behavior: 'smooth'
+          });
+        });
       }
 
       setupTooltips(this.shadowRoot!);
@@ -169,4 +191,27 @@ export class BBMsgHistory extends HTMLElement {
       <div class="empty-state">No messages</div>
     `;
   }
+
+  private _setupScrollTracking(container: HTMLElement, button: HTMLButtonElement): void {
+    const checkScrollPosition = () => {
+      const threshold = 50; // pixels from bottom
+      const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
+      const hasOverflow = container.scrollHeight > container.clientHeight;
+      const shouldShow = !isAtBottom && hasOverflow;
+
+      if (shouldShow !== this._scrollButtonVisible) {
+        this._scrollButtonVisible = shouldShow;
+        button.classList.toggle('visible', shouldShow);
+      }
+    };
+
+    // Check initial state
+    checkScrollPosition();
+
+    // Listen for scroll events with passive listener for performance
+    container.addEventListener('scroll', checkScrollPosition, { passive: true });
+
+    // Also check on resize
+    window.addEventListener('resize', checkScrollPosition, { passive: true });
+  }
 }

package/src/const/styles.ts

@@ -6,6 +6,7 @@ import { THEME } from './theme.js';
 export const MAIN_STYLES = `
   :host {
     display: block;
+    position: relative;
     font-family: "PT Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
       "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
       "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
@@ -48,6 +49,50 @@ export const MAIN_STYLES = `
     background: ${THEME.gray[500]};
   }
 
+  /* Scroll to bottom button */
+  .scroll-to-bottom {
+    position: absolute;
+    bottom: 16px;
+    left: 50%;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: transparent;
+    border: none;
+    color: ${THEME.gray[500]};
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    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;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+    z-index: 10;
+  }
+
+  .scroll-to-bottom.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+
+  .scroll-to-bottom:hover {
+    color: ${THEME.gray[700]};
+    transform: translateX(-50%) translateY(-2px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  }
+
+  .scroll-to-bottom:active {
+    transform: translateX(-50%) translateY(0) scale(0.95);
+  }
+
+  .scroll-to-bottom svg {
+    width: 20px;
+    height: 20px;
+  }
+
   /* Message row layout */
   .msg-row {
     display: flex;
@@ -197,6 +242,17 @@ export const MAIN_STYLES = `
       width: 1.5rem;
       height: 1.5rem;
     }
+
+    .scroll-to-bottom {
+      width: 32px;
+      height: 32px;
+      bottom: 12px;
+    }
+
+    .scroll-to-bottom svg {
+      width: 18px;
+      height: 18px;
+    }
   }
 
   /* Dark mode */
@@ -235,6 +291,18 @@ export const MAIN_STYLES = `
     .empty-state {
       color: ${THEME.gray[500]};
     }
+
+    .scroll-to-bottom {
+      background: transparent;
+      border: none;
+      color: ${THEME.gray[400]};
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+    }
+
+    .scroll-to-bottom:hover {
+      color: ${THEME.gray[300]};
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+    }
   }
 
   /* Reduced motion */
@@ -242,6 +310,23 @@ export const MAIN_STYLES = `
     .history {
       scroll-behavior: auto;
     }
+
+    .scroll-to-bottom {
+      transition: opacity 0.15s ease, visibility 0.15s ease;
+      transform: translateX(-50%);
+    }
+
+    .scroll-to-bottom.visible {
+      transform: translateX(-50%);
+    }
+
+    .scroll-to-bottom:hover {
+      transform: translateX(-50%);
+    }
+
+    .scroll-to-bottom:active {
+      transform: translateX(-50%);
+    }
   }
 `;
 

package/src/utils/scroll-button.ts

@@ -0,0 +1,12 @@
+/**
+ * Build scroll-to-bottom button HTML string
+ */
+export function buildScrollButtonHtml(): string {
+  return `
+    <button class="scroll-to-bottom" aria-label="Scroll to bottom" title="Scroll to bottom">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    </button>
+  `;
+}