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

package/dist/component.d.ts

@@ -43,6 +43,10 @@ export declare class BBMsgHistory extends HTMLElement {
     disconnectedCallback(): void;
     private _setupMutationObserver;
     private render;
+    private _renderFullStructure;
+    private _updateContent;
+    private _updateLoadingOverlay;
+    private _setupAfterRender;
     private _renderEmpty;
     private _setupScrollTracking;
 }

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'];
+        return ['theme', 'loading', 'hide-scroll-bar'];
     }
     constructor() {
         super();
@@ -16,7 +16,7 @@ export class BBMsgHistory extends HTMLElement {
         this.attachShadow({ mode: 'open' });
     }
     attributeChangedCallback(name) {
-        if (name === 'theme' || name === 'loading') {
+        if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar') {
             this.render();
         }
     }
@@ -204,6 +204,19 @@ export class BBMsgHistory extends HTMLElement {
         })
             .join('');
         this._lastAuthor = lastAuthor;
+        // Check if we need to create or update the structure
+        const historyContainer = this.shadowRoot.querySelector('.history');
+        const needsFullSetup = !historyContainer;
+        if (needsFullSetup) {
+            // First render - create full structure
+            this._renderFullStructure(messagesHtml);
+        }
+        else {
+            // Update only - preserve DOM structure, just update content
+            this._updateContent(historyContainer, messagesHtml);
+        }
+    }
+    _renderFullStructure(messagesHtml) {
         const loadingOverlay = this.hasAttribute('loading')
             ? `<div class="loading-overlay" role="status" aria-label="Loading messages">
           <div class="loading-spinner"></div>
@@ -217,6 +230,39 @@ export class BBMsgHistory extends HTMLElement {
       ${buildScrollButtonHtml()}
       ${loadingOverlay}
     `;
+        this._setupAfterRender();
+    }
+    _updateContent(historyContainer, messagesHtml) {
+        // Preserve scroll position before update
+        const scrollContainer = historyContainer;
+        const wasAtBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight < 50;
+        // Update messages content only
+        historyContainer.innerHTML = messagesHtml;
+        // Update loading overlay
+        this._updateLoadingOverlay();
+        // Restore scroll position or scroll to bottom if we were there
+        if (wasAtBottom) {
+            scrollContainer.scrollTop = scrollContainer.scrollHeight;
+        }
+        // Re-setup tooltips for new content
+        setupTooltips(this.shadowRoot);
+    }
+    _updateLoadingOverlay() {
+        const existingOverlay = this.shadowRoot.querySelector('.loading-overlay');
+        const shouldShow = this.hasAttribute('loading');
+        if (shouldShow && !existingOverlay) {
+            const overlay = document.createElement('div');
+            overlay.className = 'loading-overlay';
+            overlay.setAttribute('role', 'status');
+            overlay.setAttribute('aria-label', 'Loading messages');
+            overlay.innerHTML = '<div class="loading-spinner"></div>';
+            this.shadowRoot.appendChild(overlay);
+        }
+        else if (!shouldShow && existingOverlay) {
+            existingOverlay.remove();
+        }
+    }
+    _setupAfterRender() {
         requestAnimationFrame(() => {
             const container = this.shadowRoot.querySelector('.history');
             const scrollButton = this.shadowRoot.querySelector('.scroll-to-bottom');

package/dist/const/authors.js

@@ -22,6 +22,12 @@ export const AUTHOR_CONFIG = {
         textColor: THEME.gray[900],
         side: 'left',
     },
+    'GitHub': {
+        avatar: '<div style="width: 60%; height: 60%; margin: auto"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" viewBox="0 0 16 16" width="16" style="color: currentcolor;"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.46252C4.40875 1.46252 1.5 4.37029 1.5 7.96032C1.5 10.8356 3.36062 13.2642 5.94438 14.1251C6.26937 14.182 6.39125 13.987 6.39125 13.8165C6.39125 13.6621 6.38313 13.1504 6.38313 12.6063C4.75 12.9068 4.3275 12.2083 4.1975 11.8428C4.12437 11.6559 3.8075 11.0793 3.53125 10.9249C3.30375 10.8031 2.97875 10.5026 3.52312 10.4945C4.035 10.4863 4.40062 10.9656 4.5225 11.1605C5.1075 12.1433 6.04188 11.8671 6.41563 11.6966C6.4725 11.2742 6.64313 10.9899 6.83 10.8275C5.38375 10.665 3.8725 10.1046 3.8725 7.61919C3.8725 6.91255 4.12438 6.32775 4.53875 5.87291C4.47375 5.71046 4.24625 5.04444 4.60375 4.15099C4.60375 4.15099 5.14812 3.98042 6.39125 4.81701C6.91125 4.67081 7.46375 4.59771 8.01625 4.59771C8.56875 4.59771 9.12125 4.67081 9.64125 4.81701C10.8844 3.9723 11.4288 4.15099 11.4288 4.15099C11.7863 5.04444 11.5588 5.71046 11.4938 5.87291C11.9081 6.32775 12.16 6.90443 12.16 7.61919C12.16 10.1127 10.6406 10.665 9.19438 10.8275C9.43 11.0305 9.63313 11.4204 9.63313 12.0296C9.63313 12.8987 9.625 13.5972 9.625 13.8165C9.625 13.987 9.74687 14.1901 10.0719 14.1251C11.3622 13.6896 12.4835 12.8606 13.2779 11.7547C14.0722 10.6488 14.4997 9.32178 14.5 7.96032C14.5 4.37029 11.5913 1.46252 8 1.46252Z" fill="currentColor"></path></svg></div>',
+        side: 'left',
+        bubbleColor: '#ecf4ec',
+        textColor: THEME.gray[900],
+    },
 };
 /**
  * Authors that should use first-character avatar instead of SVG

package/dist/const/styles.js

@@ -50,6 +50,16 @@ export const MAIN_STYLES = `
     background: ${THEME.gray[500]};
   }
 
+  /* Hide scrollbar styles */
+  :host([hide-scroll-bar]) .history {
+    scrollbar-width: none;  /* Firefox */
+    -ms-overflow-style: none;  /* IE/Edge */
+  }
+
+  :host([hide-scroll-bar]) .history::-webkit-scrollbar {
+    display: none;  /* Chrome, Safari, Opera */
+  }
+
   /* Scroll to bottom button */
   .scroll-to-bottom {
     position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/bb-msg-history",
-  "version": "0.8.0",
+  "version": "0.9.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'];
+    return ['theme', 'loading', 'hide-scroll-bar'];
   }
 
   constructor() {
@@ -23,7 +23,7 @@ export class BBMsgHistory extends HTMLElement {
   }
 
   attributeChangedCallback(name: string) {
-    if (name === 'theme' || name === 'loading') {
+    if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar') {
       this.render();
     }
   }
@@ -260,6 +260,20 @@ export class BBMsgHistory extends HTMLElement {
 
     this._lastAuthor = lastAuthor;
 
+    // Check if we need to create or update the structure
+    const historyContainer = this.shadowRoot!.querySelector('.history') as HTMLElement;
+    const needsFullSetup = !historyContainer;
+
+    if (needsFullSetup) {
+      // First render - create full structure
+      this._renderFullStructure(messagesHtml);
+    } else {
+      // Update only - preserve DOM structure, just update content
+      this._updateContent(historyContainer, messagesHtml);
+    }
+  }
+
+  private _renderFullStructure(messagesHtml: string): void {
     const loadingOverlay = this.hasAttribute('loading')
       ? `<div class="loading-overlay" role="status" aria-label="Loading messages">
           <div class="loading-spinner"></div>
@@ -275,6 +289,47 @@ export class BBMsgHistory extends HTMLElement {
       ${loadingOverlay}
     `;
 
+    this._setupAfterRender();
+  }
+
+  private _updateContent(historyContainer: HTMLElement, messagesHtml: string): void {
+    // Preserve scroll position before update
+    const scrollContainer = historyContainer;
+    const wasAtBottom =
+      scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight < 50;
+
+    // Update messages content only
+    historyContainer.innerHTML = messagesHtml;
+
+    // Update loading overlay
+    this._updateLoadingOverlay();
+
+    // Restore scroll position or scroll to bottom if we were there
+    if (wasAtBottom) {
+      scrollContainer.scrollTop = scrollContainer.scrollHeight;
+    }
+
+    // Re-setup tooltips for new content
+    setupTooltips(this.shadowRoot!);
+  }
+
+  private _updateLoadingOverlay(): void {
+    const existingOverlay = this.shadowRoot!.querySelector('.loading-overlay');
+    const shouldShow = this.hasAttribute('loading');
+
+    if (shouldShow && !existingOverlay) {
+      const overlay = document.createElement('div');
+      overlay.className = 'loading-overlay';
+      overlay.setAttribute('role', 'status');
+      overlay.setAttribute('aria-label', 'Loading messages');
+      overlay.innerHTML = '<div class="loading-spinner"></div>';
+      this.shadowRoot!.appendChild(overlay);
+    } else if (!shouldShow && existingOverlay) {
+      existingOverlay.remove();
+    }
+  }
+
+  private _setupAfterRender(): void {
     requestAnimationFrame(() => {
       const container = this.shadowRoot!.querySelector('.history') as HTMLElement;
       const scrollButton = this.shadowRoot!.querySelector('.scroll-to-bottom') as HTMLButtonElement;

package/src/const/authors.ts

@@ -24,6 +24,12 @@ export const AUTHOR_CONFIG: Record<string, Omit<AuthorConfig, 'isCustomAvatar'>>
     textColor: THEME.gray[900],
     side: 'left',
   },
+  'GitHub': {
+    avatar: '<div style="width: 60%; height: 60%; margin: auto"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" viewBox="0 0 16 16" width="16" style="color: currentcolor;"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.46252C4.40875 1.46252 1.5 4.37029 1.5 7.96032C1.5 10.8356 3.36062 13.2642 5.94438 14.1251C6.26937 14.182 6.39125 13.987 6.39125 13.8165C6.39125 13.6621 6.38313 13.1504 6.38313 12.6063C4.75 12.9068 4.3275 12.2083 4.1975 11.8428C4.12437 11.6559 3.8075 11.0793 3.53125 10.9249C3.30375 10.8031 2.97875 10.5026 3.52312 10.4945C4.035 10.4863 4.40062 10.9656 4.5225 11.1605C5.1075 12.1433 6.04188 11.8671 6.41563 11.6966C6.4725 11.2742 6.64313 10.9899 6.83 10.8275C5.38375 10.665 3.8725 10.1046 3.8725 7.61919C3.8725 6.91255 4.12438 6.32775 4.53875 5.87291C4.47375 5.71046 4.24625 5.04444 4.60375 4.15099C4.60375 4.15099 5.14812 3.98042 6.39125 4.81701C6.91125 4.67081 7.46375 4.59771 8.01625 4.59771C8.56875 4.59771 9.12125 4.67081 9.64125 4.81701C10.8844 3.9723 11.4288 4.15099 11.4288 4.15099C11.7863 5.04444 11.5588 5.71046 11.4938 5.87291C11.9081 6.32775 12.16 6.90443 12.16 7.61919C12.16 10.1127 10.6406 10.665 9.19438 10.8275C9.43 11.0305 9.63313 11.4204 9.63313 12.0296C9.63313 12.8987 9.625 13.5972 9.625 13.8165C9.625 13.987 9.74687 14.1901 10.0719 14.1251C11.3622 13.6896 12.4835 12.8606 13.2779 11.7547C14.0722 10.6488 14.4997 9.32178 14.5 7.96032C14.5 4.37029 11.5913 1.46252 8 1.46252Z" fill="currentColor"></path></svg></div>',
+    side: 'left',
+    bubbleColor: '#ecf4ec',
+    textColor: THEME.gray[900],
+  },
 };
 
 /**

package/src/const/styles.ts

@@ -51,6 +51,16 @@ export const MAIN_STYLES = `
     background: ${THEME.gray[500]};
   }
 
+  /* Hide scrollbar styles */
+  :host([hide-scroll-bar]) .history {
+    scrollbar-width: none;  /* Firefox */
+    -ms-overflow-style: none;  /* IE/Edge */
+  }
+
+  :host([hide-scroll-bar]) .history::-webkit-scrollbar {
+    display: none;  /* Chrome, Safari, Opera */
+  }
+
   /* Scroll to bottom button */
   .scroll-to-bottom {
     position: absolute;