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

package/dist/component.d.ts

@@ -3,7 +3,10 @@ export declare class BBMsgHistory extends HTMLElement {
     private _mutationObserver?;
     private _userAuthors;
     private _lastAuthor;
+    private _scrollButtonVisible;
+    static get observedAttributes(): string[];
     constructor();
+    attributeChangedCallback(): void;
     /**
      * Configure an author's avatar, side, and colors.
      * Call before or after rendering — the component re-renders automatically.
@@ -32,4 +35,5 @@ export declare class BBMsgHistory extends HTMLElement {
     private _setupMutationObserver;
     private render;
     private _renderEmpty;
+    private _setupScrollTracking;
 }

package/dist/component.js

@@ -3,13 +3,21 @@ 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 {
+    static get observedAttributes() {
+        return ['theme'];
+    }
     constructor() {
         super();
         this._userAuthors = new Map();
         this._lastAuthor = '';
+        this._scrollButtonVisible = false;
         this.attachShadow({ mode: 'open' });
     }
+    attributeChangedCallback() {
+        this.render();
+    }
     /**
      * Configure an author's avatar, side, and colors.
      * Call before or after rendering — the component re-renders automatically.
@@ -77,8 +85,14 @@ export class BBMsgHistory extends HTMLElement {
         // Smooth scroll to bottom
         container.scrollTo({
             top: container.scrollHeight,
-            behavior: 'smooth'
+            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 +137,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 +163,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/authors.js

@@ -8,20 +8,20 @@ export const AUTHOR_CONFIG = {
         avatar: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 48 48" fill="none"><path d="M29.1152 21.3106C32.0605 21.3106 34.4481 18.9101 34.4481 15.9489V24.6457C34.4481 25.7585 33.5508 26.6607 32.444 26.6607H15.1207C14.0138 26.6607 13.1166 25.7585 13.1166 24.6457V15.9489C13.1166 18.9101 15.5042 21.3106 18.4494 21.3106C21.3947 21.3106 23.7823 18.9101 23.7823 15.9489C23.7823 18.9101 26.17 21.3106 29.1152 21.3106Z" fill="${THEME.gray[400]}"/><path d="M23.7823 15.9373L23.7823 15.9489C23.7823 15.9451 23.7823 15.9412 23.7823 15.9373Z" fill="${THEME.gray[400]}"/><path d="M23.1143 28.004C23.1205 30.9598 25.5057 33.3541 28.4472 33.3541C31.3886 33.3541 33.7738 30.9598 33.7801 28.004H23.1143Z" fill="${THEME.gray[400]}"/><path d="M13.7846 28.004C13.7846 28.0079 13.7846 28.0117 13.7846 28.0156C13.7908 30.9714 16.1761 33.3657 19.1175 33.3657C22.0589 33.3657 24.4442 30.9714 24.4504 28.0156H13.7846V28.004Z" fill="${THEME.gray[400]}"/><path d="M14.4527 15.9373C14.4527 16.6792 13.8545 17.2806 13.1166 17.2806C12.3786 17.2806 11.7805 16.6792 11.7805 15.9373C11.7805 15.1954 12.3786 14.594 13.1166 14.594C13.8545 14.594 14.4527 15.1954 14.4527 15.9373Z" fill="${THEME.gray[400]}"/><path d="M25.1184 15.2657C25.1184 16.0076 24.5202 16.609 23.7823 16.609C23.0444 16.609 22.4462 16.0076 22.4462 15.2657C22.4462 14.5238 23.0444 13.9224 23.7823 13.9224C24.5202 13.9224 25.1184 14.5238 25.1184 15.2657Z" fill="${THEME.gray[400]}"/><path d="M35.7842 15.9373C35.7842 16.6792 35.186 17.2806 34.4481 17.2806C33.7102 17.2806 33.112 16.6792 33.112 15.9373C33.112 15.1954 33.7102 14.594 34.4481 14.594C35.186 14.594 35.7842 15.1954 35.7842 15.9373Z" fill="${THEME.gray[400]}"/></svg>`,
         bubbleColor: THEME.gray[100],
         textColor: THEME.gray[900],
-        side: 'right'
+        side: 'right',
     },
-    'xwy': {
+    xwy: {
         avatar: `<svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.821 17.5305C10.709 18.17 9.68345 19.4423 9.22624 20.1359C9.11159 20.3099 9.21615 20.5428 9.42038 20.5839L12.67 21.2381C12.8291 21.2702 12.9328 21.4275 12.9084 21.5879C11.3004 32.1653 21.5275 36.7547 28.6638 33.0597C28.7443 33.018 28.8408 33.0139 28.9245 33.0487C32.8032 34.6598 35.967 34.5662 37.8217 34.3099C38.131 34.2671 38.1505 33.841 37.855 33.7401C29.1343 30.7633 26.0152 24.5245 25.5144 18.8022C25.3835 17.3066 23.8172 13.2016 19.2675 13.0058C15.7934 12.8563 13.6137 15.6103 13.0319 17.325C12.9986 17.4231 12.9201 17.5004 12.821 17.5305Z" fill="${THEME.yyPink[100]}"/><circle cx="17.6178" cy="18.2688" r="0.995689" fill="white"/></svg>`,
         bubbleColor: THEME.yyPink[50],
         textColor: THEME.gray[900],
-        side: 'left'
+        side: 'left',
     },
-    '小乌鸦': {
+    小乌鸦: {
         avatar: `<svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.821 17.5305C10.709 18.17 9.68345 19.4423 9.22624 20.1359C9.11159 20.3099 9.21615 20.5428 9.42038 20.5839L12.67 21.2381C12.8291 21.2702 12.9328 21.4275 12.9084 21.5879C11.3004 32.1653 21.5275 36.7547 28.6638 33.0597C28.7443 33.018 28.8408 33.0139 28.9245 33.0487C32.8032 34.6598 35.967 34.5662 37.8217 34.3099C38.131 34.2671 38.1505 33.841 37.855 33.7401C29.1343 30.7633 26.0152 24.5245 25.5144 18.8022C25.3835 17.3066 23.8172 13.2016 19.2675 13.0058C15.7934 12.8563 13.6137 15.6103 13.0319 17.325C12.9986 17.4231 12.9201 17.5004 12.821 17.5305Z" fill="${THEME.yyPink[100]}"/><circle cx="17.6178" cy="18.2688" r="0.995689" fill="white"/></svg>`,
         bubbleColor: THEME.yyPink[50],
         textColor: THEME.gray[900],
-        side: 'left'
-    }
+        side: 'left',
+    },
 };
 /**
  * Authors that should use first-character avatar instead of SVG

package/dist/const/styles.js

@@ -5,12 +5,15 @@ 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",
       "Noto Color Emoji";
     --bb-bg-color: ${THEME.gray[50]};
     --bb-max-height: 600px;
+    --bb-avatar-bg: #ffffff;
+    --bb-avatar-color: ${THEME.gray[600]};
   }
 
   .history {
@@ -47,6 +50,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;
@@ -167,6 +214,7 @@ export const MAIN_STYLES = `
   /* Right bubble */
   .msg-bubble--right {
     border-bottom-right-radius: 0.25rem;
+    color: ${THEME.gray[900]};
   }
 
   /* Empty state */
@@ -196,17 +244,84 @@ 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 styles - shared between media query and attribute */
+  :host([theme="dark"]) {
+    --bb-bg-color: ${THEME.gray[900]};
+    --bb-avatar-bg: ${THEME.slate[600]};
+    --bb-avatar-color: ${THEME.slate[200]};
+  }
+
+  :host([theme="dark"]) .history {
+    background-color: transparent;
+    scrollbar-color: ${THEME.gray[600]} transparent;
   }
 
-  /* Dark mode */
+  :host([theme="dark"]) .history::-webkit-scrollbar-thumb {
+    background: ${THEME.gray[600]};
+  }
+
+  :host([theme="dark"]) .history::-webkit-scrollbar-thumb:hover {
+    background: ${THEME.gray[500]};
+  }
+
+  :host([theme="dark"]) .msg-bubble {
+    color: ${THEME.slate[100]};
+  }
+
+  :host([theme="dark"]) .msg-bubble--right {
+    background-color: ${THEME.slate[700]};
+    color: ${THEME.slate[100]};
+  }
+
+  :host([theme="dark"]) .msg-bubble--left {
+    background-color: ${THEME.slate[800]};
+    border: 1px solid ${THEME.slate[700]};
+    color: ${THEME.slate[100]};
+  }
+
+  :host([theme="dark"]) .avatar-wrapper {
+    background: ${THEME.slate[600]};
+  }
+
+  :host([theme="dark"]) .empty-state {
+    color: ${THEME.gray[500]};
+  }
+
+  :host([theme="dark"]) .scroll-to-bottom {
+    background: ${THEME.slate[800]};
+    border: none;
+    color: ${THEME.slate[300]};
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+  }
+
+  :host([theme="dark"]) .scroll-to-bottom:hover {
+    color: ${THEME.slate[200]};
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  }
+
+  /* System dark mode preference */
   @media (prefers-color-scheme: dark) {
     :host {
       --bb-bg-color: ${THEME.gray[900]};
+      --bb-avatar-bg: ${THEME.slate[600]};
+      --bb-avatar-color: ${THEME.slate[200]};
     }
 
     .history {
       background-color: transparent;
-      /* Firefox scrollbar dark mode */
       scrollbar-color: ${THEME.gray[600]} transparent;
     }
 
@@ -219,21 +334,39 @@ export const MAIN_STYLES = `
     }
 
     .msg-bubble {
-      color: ${THEME.gray[100]};
+      color: ${THEME.slate[100]};
+    }
+
+    .msg-bubble--right {
+      background-color: ${THEME.slate[700]};
+      color: ${THEME.slate[100]};
     }
 
     .msg-bubble--left {
-      background-color: ${THEME.gray[700]};
-      color: ${THEME.gray[100]};
+      background-color: ${THEME.slate[800]};
+      border: 1px solid ${THEME.slate[700]};
+      color: ${THEME.slate[100]};
     }
 
     .avatar-wrapper {
-      background: ${THEME.gray[800]};
+      background: ${THEME.slate[600]};
     }
 
     .empty-state {
       color: ${THEME.gray[500]};
     }
+
+    .scroll-to-bottom {
+      background: ${THEME.slate[800]};
+      border: none;
+      color: ${THEME.slate[300]};
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+    }
+
+    .scroll-to-bottom:hover {
+      color: ${THEME.slate[200]};
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+    }
   }
 
   /* Reduced motion */
@@ -241,6 +374,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/const/theme.js

@@ -6,7 +6,7 @@ export const THEME = {
     gray: {
         50: '#f9fafb',
         100: '#f3f4f6',
-        200: '#e5e7eb',
+        200: '#f5f5f5',
         300: '#d1d5db',
         400: '#9ca3af',
         500: '#6b7280',
@@ -15,6 +15,18 @@ export const THEME = {
         800: '#1f2937',
         900: '#111827',
     },
+    slate: {
+        50: '#f8fafc',
+        100: '#f1f5f9',
+        200: '#e2e8f0',
+        300: '#cbd5e1',
+        400: '#94a3b8',
+        500: '#64748b',
+        600: '#475569',
+        700: '#334155',
+        800: '#1e293b',
+        900: '#0f172a',
+    },
     red: {
         50: '#fef2f2',
         100: '#fee2e2',
@@ -28,5 +40,5 @@ export const THEME = {
         50: '#fdf4f4',
         100: '#fbd1d2',
         150: '#f8babc',
-    }
+    },
 };

package/dist/index.dev.js

@@ -1,12 +1 @@
-import { BBMsgHistory } from './component.js';
-import { initBBMsgHistory } from './utils/registration.js';
-// Auto-initialize
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => initBBMsgHistory(BBMsgHistory));
-}
-else {
-    initBBMsgHistory(BBMsgHistory);
-}
-// Re-exports
-export { BBMsgHistory };
-export { define } from './utils/registration.js';
+import{BBMsgHistory}from"./component.js";import{initBBMsgHistory}from"./utils/registration.js";"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>initBBMsgHistory(BBMsgHistory)):initBBMsgHistory(BBMsgHistory);export{BBMsgHistory};export{define}from"./utils/registration.js";

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BBMsgHistory","initBBMsgHistory","document","readyState","addEventListener","define"],"sources":["dist/index.js"],"mappings":"OAAOA,iBAAiB,wBAAwBC,qBAAqB,0BAA0B,YAAYC,SAASC,WAAWD,SAASE,iBAAiB,mBAAmB,IAAIH,iBAAiBD,eAAeC,iBAAiBD,qBAAqBA,qBAAqBK,WAAW","ignoreList":[]}

package/dist/src/component.d.ts

@@ -0,0 +1,39 @@
+import type { AuthorOptions, Message } from './types/index.js';
+export declare class BBMsgHistory extends HTMLElement {
+    private _mutationObserver?;
+    private _userAuthors;
+    private _lastAuthor;
+    private _scrollButtonVisible;
+    static get observedAttributes(): string[];
+    constructor();
+    attributeChangedCallback(): void;
+    /**
+     * Configure an author's avatar, side, and colors.
+     * Call before or after rendering — the component re-renders automatically.
+     *
+     * @example
+     * el.setAuthor('alice', { avatar: '🐱', side: 'right', bubbleColor: '#e0f2fe' });
+     * el.setAuthor('bob', { avatar: '<img src="bob.png" />', side: 'left' });
+     */
+    setAuthor(name: string, options: AuthorOptions): this;
+    /**
+     * Remove a previously set author config.
+     */
+    removeAuthor(name: string): this;
+    /**
+     * Append a message to the history.
+     * Automatically scrolls to the new message with smooth animation.
+     *
+     * @example
+     * el.appendMessage({ author: 'alice', text: 'Hello!' });
+     * el.appendMessage({ author: 'bob', text: 'How are you?' });
+     */
+    appendMessage(message: Message): this;
+    private _appendSingleMessage;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _setupMutationObserver;
+    private render;
+    private _renderEmpty;
+    private _setupScrollTracking;
+}

package/dist/src/component.js

@@ -0,0 +1,184 @@
+import { MAIN_STYLES, EMPTY_STYLES } from './const/styles.js';
+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 {
+    static get observedAttributes() {
+        return ['theme'];
+    }
+    constructor() {
+        super();
+        this._userAuthors = new Map();
+        this._lastAuthor = '';
+        this._scrollButtonVisible = false;
+        this.attachShadow({ mode: 'open' });
+    }
+    attributeChangedCallback() {
+        this.render();
+    }
+    /**
+     * Configure an author's avatar, side, and colors.
+     * Call before or after rendering — the component re-renders automatically.
+     *
+     * @example
+     * el.setAuthor('alice', { avatar: '🐱', side: 'right', bubbleColor: '#e0f2fe' });
+     * el.setAuthor('bob', { avatar: '<img src="bob.png" />', side: 'left' });
+     */
+    setAuthor(name, options) {
+        this._userAuthors.set(name, options);
+        this.render();
+        return this;
+    }
+    /**
+     * Remove a previously set author config.
+     */
+    removeAuthor(name) {
+        this._userAuthors.delete(name);
+        this.render();
+        return this;
+    }
+    /**
+     * Append a message to the history.
+     * Automatically scrolls to the new message with smooth animation.
+     *
+     * @example
+     * el.appendMessage({ author: 'alice', text: 'Hello!' });
+     * el.appendMessage({ author: 'bob', text: 'How are you?' });
+     */
+    appendMessage(message) {
+        // Update textContent
+        const currentText = this.textContent || '';
+        const separator = currentText && !currentText.endsWith('\n') ? '\n' : '';
+        this.textContent = currentText + separator + `${message.author}: ${message.text}`;
+        // Temporarily disconnect observer to prevent recursive render
+        this._mutationObserver?.disconnect();
+        // Append single message without re-rendering entire list
+        this._appendSingleMessage(message);
+        // Reconnect observer
+        this._setupMutationObserver();
+        return this;
+    }
+    _appendSingleMessage(message) {
+        const container = this.shadowRoot.querySelector('.history');
+        // If empty state or no container, do full render first
+        if (!container) {
+            this.render();
+            return;
+        }
+        const author = message.author;
+        const text = message.text;
+        const config = resolveAuthorConfig(author, this._userAuthors);
+        const isFirstFromAuthor = author !== this._lastAuthor;
+        this._lastAuthor = author;
+        const isSubsequent = !isFirstFromAuthor;
+        // Use utility function to build message HTML
+        const msgHtml = buildMessageRowHtml(author, text, config, isSubsequent);
+        // Append to container
+        container.insertAdjacentHTML('beforeend', msgHtml);
+        // Setup tooltip for new element using utility function
+        const newWrapper = container.lastElementChild?.querySelector('.avatar-wrapper');
+        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');
+        }
+    }
+    connectedCallback() {
+        this.render();
+        this._setupMutationObserver();
+    }
+    disconnectedCallback() {
+        this._mutationObserver?.disconnect();
+    }
+    _setupMutationObserver() {
+        let debounceTimer;
+        this._mutationObserver = new MutationObserver(() => {
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(() => this.render(), 50);
+        });
+        this._mutationObserver.observe(this, {
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+    }
+    render() {
+        const messages = parseMessages(this.textContent);
+        if (messages.length === 0) {
+            this._lastAuthor = '';
+            this._renderEmpty();
+            return;
+        }
+        let lastAuthor = '';
+        const messagesHtml = messages
+            .map(({ author, text }) => {
+            const config = resolveAuthorConfig(author, this._userAuthors);
+            const isFirstFromAuthor = author !== lastAuthor;
+            lastAuthor = author;
+            const isSubsequent = !isFirstFromAuthor;
+            // Use utility function to build message HTML
+            return buildMessageRowHtml(author, text, config, isSubsequent);
+        })
+            .join('');
+        this._lastAuthor = lastAuthor;
+        this.shadowRoot.innerHTML = `
+      <style>${MAIN_STYLES}</style>
+      <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);
+        });
+    }
+    _renderEmpty() {
+        this.shadowRoot.innerHTML = `
+      <style>${EMPTY_STYLES}</style>
+      <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/src/const/authors.d.ts

@@ -0,0 +1,10 @@
+import type { AuthorConfig } from '../types/index.js';
+/**
+ * Built-in author configurations (secret presets)
+ * These are used for specific authors in personal projects
+ */
+export declare const AUTHOR_CONFIG: Record<string, Omit<AuthorConfig, 'isCustomAvatar'>>;
+/**
+ * Authors that should use first-character avatar instead of SVG
+ */
+export declare const FIRST_CHAR_AVATAR_AUTHORS: Set<string>;

package/dist/src/const/authors.js

@@ -0,0 +1,29 @@
+import { THEME } from './theme.js';
+/**
+ * Built-in author configurations (secret presets)
+ * These are used for specific authors in personal projects
+ */
+export const AUTHOR_CONFIG = {
+    'bbki.ng': {
+        avatar: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 48 48" fill="none"><path d="M29.1152 21.3106C32.0605 21.3106 34.4481 18.9101 34.4481 15.9489V24.6457C34.4481 25.7585 33.5508 26.6607 32.444 26.6607H15.1207C14.0138 26.6607 13.1166 25.7585 13.1166 24.6457V15.9489C13.1166 18.9101 15.5042 21.3106 18.4494 21.3106C21.3947 21.3106 23.7823 18.9101 23.7823 15.9489C23.7823 18.9101 26.17 21.3106 29.1152 21.3106Z" fill="${THEME.gray[400]}"/><path d="M23.7823 15.9373L23.7823 15.9489C23.7823 15.9451 23.7823 15.9412 23.7823 15.9373Z" fill="${THEME.gray[400]}"/><path d="M23.1143 28.004C23.1205 30.9598 25.5057 33.3541 28.4472 33.3541C31.3886 33.3541 33.7738 30.9598 33.7801 28.004H23.1143Z" fill="${THEME.gray[400]}"/><path d="M13.7846 28.004C13.7846 28.0079 13.7846 28.0117 13.7846 28.0156C13.7908 30.9714 16.1761 33.3657 19.1175 33.3657C22.0589 33.3657 24.4442 30.9714 24.4504 28.0156H13.7846V28.004Z" fill="${THEME.gray[400]}"/><path d="M14.4527 15.9373C14.4527 16.6792 13.8545 17.2806 13.1166 17.2806C12.3786 17.2806 11.7805 16.6792 11.7805 15.9373C11.7805 15.1954 12.3786 14.594 13.1166 14.594C13.8545 14.594 14.4527 15.1954 14.4527 15.9373Z" fill="${THEME.gray[400]}"/><path d="M25.1184 15.2657C25.1184 16.0076 24.5202 16.609 23.7823 16.609C23.0444 16.609 22.4462 16.0076 22.4462 15.2657C22.4462 14.5238 23.0444 13.9224 23.7823 13.9224C24.5202 13.9224 25.1184 14.5238 25.1184 15.2657Z" fill="${THEME.gray[400]}"/><path d="M35.7842 15.9373C35.7842 16.6792 35.186 17.2806 34.4481 17.2806C33.7102 17.2806 33.112 16.6792 33.112 15.9373C33.112 15.1954 33.7102 14.594 34.4481 14.594C35.186 14.594 35.7842 15.1954 35.7842 15.9373Z" fill="${THEME.gray[400]}"/></svg>`,
+        bubbleColor: THEME.gray[100],
+        textColor: THEME.gray[900],
+        side: 'right',
+    },
+    xwy: {
+        avatar: `<svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.821 17.5305C10.709 18.17 9.68345 19.4423 9.22624 20.1359C9.11159 20.3099 9.21615 20.5428 9.42038 20.5839L12.67 21.2381C12.8291 21.2702 12.9328 21.4275 12.9084 21.5879C11.3004 32.1653 21.5275 36.7547 28.6638 33.0597C28.7443 33.018 28.8408 33.0139 28.9245 33.0487C32.8032 34.6598 35.967 34.5662 37.8217 34.3099C38.131 34.2671 38.1505 33.841 37.855 33.7401C29.1343 30.7633 26.0152 24.5245 25.5144 18.8022C25.3835 17.3066 23.8172 13.2016 19.2675 13.0058C15.7934 12.8563 13.6137 15.6103 13.0319 17.325C12.9986 17.4231 12.9201 17.5004 12.821 17.5305Z" fill="${THEME.yyPink[100]}"/><circle cx="17.6178" cy="18.2688" r="0.995689" fill="white"/></svg>`,
+        bubbleColor: THEME.yyPink[50],
+        textColor: THEME.gray[900],
+        side: 'left',
+    },
+    小乌鸦: {
+        avatar: `<svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.821 17.5305C10.709 18.17 9.68345 19.4423 9.22624 20.1359C9.11159 20.3099 9.21615 20.5428 9.42038 20.5839L12.67 21.2381C12.8291 21.2702 12.9328 21.4275 12.9084 21.5879C11.3004 32.1653 21.5275 36.7547 28.6638 33.0597C28.7443 33.018 28.8408 33.0139 28.9245 33.0487C32.8032 34.6598 35.967 34.5662 37.8217 34.3099C38.131 34.2671 38.1505 33.841 37.855 33.7401C29.1343 30.7633 26.0152 24.5245 25.5144 18.8022C25.3835 17.3066 23.8172 13.2016 19.2675 13.0058C15.7934 12.8563 13.6137 15.6103 13.0319 17.325C12.9986 17.4231 12.9201 17.5004 12.821 17.5305Z" fill="${THEME.yyPink[100]}"/><circle cx="17.6178" cy="18.2688" r="0.995689" fill="white"/></svg>`,
+        bubbleColor: THEME.yyPink[50],
+        textColor: THEME.gray[900],
+        side: 'left',
+    },
+};
+/**
+ * Authors that should use first-character avatar instead of SVG
+ */
+export const FIRST_CHAR_AVATAR_AUTHORS = new Set(['小乌鸦']);