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

package/dist/src/utils/html.js

@@ -0,0 +1,33 @@
+/**
+ * HTML utility functions
+ */
+/**
+ * Escape HTML special characters to prevent XSS
+ */
+export function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+/**
+ * Wrap plain text/emoji avatar in a styled container
+ * If HTML tags are present, return as-is
+ */
+export function wrapAvatarHtml(html) {
+    // If it looks like a single emoji or short text (no HTML tags), wrap in a styled div
+    if (!html.includes('<')) {
+        return `<div style="
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      line-height: 1;
+    ">${html}</div>`;
+    }
+    return html;
+}

package/dist/src/utils/message-builder.d.ts

@@ -0,0 +1,13 @@
+import type { AuthorConfig } from '../types/index.js';
+/**
+ * Build avatar HTML string
+ */
+export declare function buildAvatarHtml(author: string, config: AuthorConfig, showAvatar: boolean): string;
+/**
+ * Build a single message row HTML string
+ */
+export declare function buildMessageRowHtml(author: string, text: string, config: AuthorConfig, isSubsequent: boolean): string;
+/**
+ * Setup tooltip for a single avatar wrapper element
+ */
+export declare function setupTooltipForElement(wrapper: Element): void;

package/dist/src/utils/message-builder.js

@@ -0,0 +1,60 @@
+import { THEME } from '../const/theme.js';
+import { escapeHtml } from './html.js';
+/**
+ * Build avatar HTML string
+ */
+export function buildAvatarHtml(author, config, showAvatar) {
+    return `
+    <div class="avatar-wrapper ${showAvatar ? '' : 'avatar-wrapper--hidden'}" 
+         data-author="${escapeHtml(author)}">
+      <div class="avatar">${config.avatar}</div>
+      <div class="avatar-tooltip">${escapeHtml(author)}</div>
+    </div>
+  `;
+}
+/**
+ * Build a single message row HTML string
+ */
+export function buildMessageRowHtml(author, text, config, isSubsequent) {
+    const showAvatar = !isSubsequent;
+    const side = config.side;
+    const avatarHtml = buildAvatarHtml(author, config, showAvatar);
+    // Build inline style only for custom colors (not defaults)
+    const isDefaultBubbleColor = config.bubbleColor === THEME.gray[50];
+    const isDefaultTextColor = config.textColor === THEME.gray[900];
+    const inlineStyles = [];
+    if (!isDefaultBubbleColor) {
+        inlineStyles.push(`background-color: ${config.bubbleColor}`);
+    }
+    if (!isDefaultTextColor) {
+        inlineStyles.push(`color: ${config.textColor}`);
+    }
+    const styleAttr = inlineStyles.length > 0 ? ` style="${inlineStyles.join('; ')}"` : '';
+    return `
+    <div class="msg-row msg-row--${side} ${isSubsequent ? 'msg-row--subsequent' : 'msg-row--new-author'}">
+      ${side === 'left' ? avatarHtml : ''}
+
+      <div class="msg-content">
+        <div class="msg-bubble msg-bubble--${side}"${styleAttr}>
+          ${escapeHtml(text)}
+        </div>
+      </div>
+
+      ${side === 'right' ? avatarHtml : ''}
+    </div>
+  `;
+}
+/**
+ * Setup tooltip for a single avatar wrapper element
+ */
+export function setupTooltipForElement(wrapper) {
+    wrapper.addEventListener('mouseenter', () => {
+        const tooltip = wrapper.querySelector('.avatar-tooltip');
+        if (!tooltip)
+            return;
+        const rect = wrapper.getBoundingClientRect();
+        const tooltipRect = tooltip.getBoundingClientRect();
+        tooltip.style.left = `${rect.left + rect.width / 2 - tooltipRect.width / 2}px`;
+        tooltip.style.top = `${rect.top - tooltipRect.height - 8}px`;
+    });
+}

package/dist/src/utils/message-parser.d.ts

@@ -0,0 +1,6 @@
+import type { Message } from '../types/index.js';
+/**
+ * Parse text content into message array
+ * Format: `author: text` (one message per line)
+ */
+export declare function parseMessages(textContent: string | null): Message[];

package/dist/src/utils/message-parser.js

@@ -0,0 +1,22 @@
+/**
+ * Parse text content into message array
+ * Format: `author: text` (one message per line)
+ */
+export function parseMessages(textContent) {
+    const raw = textContent || '';
+    const messages = [];
+    for (const line of raw.split('\n')) {
+        const trimmed = line.trim();
+        if (!trimmed)
+            continue;
+        const colonIdx = trimmed.indexOf(':');
+        if (colonIdx <= 0)
+            continue;
+        const author = trimmed.slice(0, colonIdx).trim();
+        const text = trimmed.slice(colonIdx + 1).trim();
+        if (author && text) {
+            messages.push({ author, text });
+        }
+    }
+    return messages;
+}

package/dist/src/utils/registration.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Define the custom element
+ */
+export declare function define(BBMsgHistoryClass: CustomElementConstructor, tagName?: string): void;
+/**
+ * Initialize with fallback for unsupported browsers
+ */
+export declare function initBBMsgHistory(BBMsgHistoryClass: CustomElementConstructor): void;

package/dist/src/utils/registration.js

@@ -0,0 +1,28 @@
+import { FALLBACK_STYLES } from '../const/styles.js';
+/**
+ * Define the custom element
+ */
+export function define(BBMsgHistoryClass, tagName = 'bb-msg-history') {
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, tagName === 'bb-msg-history' ? BBMsgHistoryClass : class extends BBMsgHistoryClass {
+        });
+    }
+}
+/**
+ * Initialize with fallback for unsupported browsers
+ */
+export function initBBMsgHistory(BBMsgHistoryClass) {
+    try {
+        define(BBMsgHistoryClass);
+    }
+    catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn('BBMsgHistory registration failed, falling back to plain text:', error);
+        document.querySelectorAll('bb-msg-history').forEach(el => {
+            const pre = document.createElement('pre');
+            pre.style.cssText = FALLBACK_STYLES;
+            pre.textContent = el.textContent || '';
+            el.replaceWith(pre);
+        });
+    }
+}

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

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

package/dist/src/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/dist/src/utils/tooltip.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Setup dynamic tooltip positioning
+ * Tooltips are positioned fixed to avoid overflow clipping from parent containers
+ */
+export declare function setupTooltips(shadowRoot: ShadowRoot): void;

package/dist/src/utils/tooltip.js

@@ -0,0 +1,17 @@
+/**
+ * Setup dynamic tooltip positioning
+ * Tooltips are positioned fixed to avoid overflow clipping from parent containers
+ */
+export function setupTooltips(shadowRoot) {
+    shadowRoot.querySelectorAll('.avatar-wrapper').forEach(wrapper => {
+        wrapper.addEventListener('mouseenter', () => {
+            const tooltip = wrapper.querySelector('.avatar-tooltip');
+            if (!tooltip)
+                return;
+            const rect = wrapper.getBoundingClientRect();
+            const tooltipRect = tooltip.getBoundingClientRect();
+            tooltip.style.left = `${rect.left + rect.width / 2 - tooltipRect.width / 2}px`;
+            tooltip.style.top = `${rect.top - tooltipRect.height - 8}px`;
+        });
+    });
+}

package/dist/tests/html.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/html.test.js

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { escapeHtml, wrapAvatarHtml } from '../src/utils/html.js';
+describe('escapeHtml', () => {
+    it('should escape HTML special characters', () => {
+        expect(escapeHtml('<script>alert("xss")</script>')).toBe('&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;');
+    });
+    it('should handle empty string', () => {
+        expect(escapeHtml('')).toBe('');
+    });
+    it('should handle string without special characters', () => {
+        expect(escapeHtml('Hello World')).toBe('Hello World');
+    });
+    it('should escape single quotes', () => {
+        expect(escapeHtml("'test'")).toBe('&#39;test&#39;');
+    });
+    it('should escape ampersands', () => {
+        expect(escapeHtml('Tom & Jerry')).toBe('Tom &amp; Jerry');
+    });
+});
+describe('wrapAvatarHtml', () => {
+    it('should wrap plain text in styled container', () => {
+        const result = wrapAvatarHtml('😀');
+        expect(result).toContain('<div style=');
+        expect(result).toContain('😀');
+    });
+    it('should return HTML as-is when tags are present', () => {
+        const html = '<img src="avatar.png" />';
+        expect(wrapAvatarHtml(html)).toBe(html);
+    });
+    it('should wrap emoji in styled container', () => {
+        const result = wrapAvatarHtml('🎉');
+        expect(result).toContain('display: flex');
+        expect(result).toContain('🎉');
+    });
+});

package/dist/types/index.d.ts

@@ -28,6 +28,7 @@ export interface AuthorOptions {
 /** Theme color palette */
 export interface Theme {
     gray: Record<string, string>;
+    slate: Record<string, string>;
     red: Record<string, string>;
     yyPink: Record<string, string>;
 }

package/dist/utils/author-resolver.js

@@ -44,9 +44,13 @@ export function resolveAuthorConfig(author, userAuthors) {
         const config = AUTHOR_CONFIG[author];
         const firstChar = author.charAt(0);
         return {
-            ...(config || { bubbleColor: THEME.gray[50], textColor: THEME.gray[900], side: 'left' }),
+            ...(config || {
+                bubbleColor: THEME.gray[50],
+                textColor: THEME.gray[900],
+                side: 'left',
+            }),
             avatar: generateLetterAvatar(firstChar),
-            isCustomAvatar: false
+            isCustomAvatar: false,
         };
     }
     // 4. Built-in exact match
@@ -66,6 +70,6 @@ export function resolveAuthorConfig(author, userAuthors) {
         bubbleColor: THEME.gray[50],
         textColor: THEME.gray[900],
         side: 'left',
-        isCustomAvatar: false
+        isCustomAvatar: false,
     };
 }

package/dist/utils/avatar.js

@@ -4,14 +4,14 @@ import { THEME } from '../const/theme.js';
  */
 export function generateLetterAvatar(letter) {
     return `<div style="
-    width: 100%; 
-    height: 100%; 
-    display: flex; 
-    align-items: center; 
-    justify-content: center; 
-    background: #ffffff; 
-    color: ${THEME.gray[600]}; 
-    font-size: 14px; 
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bb-avatar-bg, #ffffff);
+    color: var(--bb-avatar-color, ${THEME.gray[600]});
+    font-size: 14px;
     font-weight: 600;
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
   ">${letter}</div>`;

package/dist/utils/message-builder.js

@@ -1,3 +1,4 @@
+import { THEME } from '../const/theme.js';
 import { escapeHtml } from './html.js';
 /**
  * Build avatar HTML string
@@ -18,17 +19,27 @@ export function buildMessageRowHtml(author, text, config, isSubsequent) {
     const showAvatar = !isSubsequent;
     const side = config.side;
     const avatarHtml = buildAvatarHtml(author, config, showAvatar);
+    // Build inline style only for custom colors (not defaults)
+    const isDefaultBubbleColor = config.bubbleColor === THEME.gray[50];
+    const isDefaultTextColor = config.textColor === THEME.gray[900];
+    const inlineStyles = [];
+    if (!isDefaultBubbleColor) {
+        inlineStyles.push(`background-color: ${config.bubbleColor}`);
+    }
+    if (!isDefaultTextColor) {
+        inlineStyles.push(`color: ${config.textColor}`);
+    }
+    const styleAttr = inlineStyles.length > 0 ? ` style="${inlineStyles.join('; ')}"` : '';
     return `
     <div class="msg-row msg-row--${side} ${isSubsequent ? 'msg-row--subsequent' : 'msg-row--new-author'}">
       ${side === 'left' ? avatarHtml : ''}
-      
+
       <div class="msg-content">
-        <div class="msg-bubble msg-bubble--${side}" 
-             style="background-color: ${config.bubbleColor}; color: ${config.textColor};">
+        <div class="msg-bubble msg-bubble--${side}"${styleAttr}>
           ${escapeHtml(text)}
         </div>
       </div>
-      
+
       ${side === 'right' ? avatarHtml : ''}
     </div>
   `;

package/dist/utils/registration.js

@@ -4,10 +4,8 @@ import { FALLBACK_STYLES } from '../const/styles.js';
  */
 export function define(BBMsgHistoryClass, tagName = 'bb-msg-history') {
     if (!customElements.get(tagName)) {
-        customElements.define(tagName, tagName === 'bb-msg-history'
-            ? BBMsgHistoryClass
-            : class extends BBMsgHistoryClass {
-            });
+        customElements.define(tagName, tagName === 'bb-msg-history' ? BBMsgHistoryClass : class extends BBMsgHistoryClass {
+        });
     }
 }
 /**
@@ -18,6 +16,7 @@ export function initBBMsgHistory(BBMsgHistoryClass) {
         define(BBMsgHistoryClass);
     }
     catch (error) {
+        // eslint-disable-next-line no-console
         console.warn('BBMsgHistory registration failed, falling back to plain text:', error);
         document.querySelectorAll('bb-msg-history').forEach(el => {
             const pre = document.createElement('pre');

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/dist/vitest.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/dist/vitest.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+export default defineConfig({
+    test: {
+        environment: 'happy-dom',
+        globals: true,
+        include: ['tests/**/*.test.ts'],
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/bb-msg-history",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "A chat-style message history web component",
   "main": "dist/index.js",
   "type": "module",
@@ -23,16 +23,41 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "start": "tsc -w",
-    "preview": "python3 -m http.server 8000",
-    "prepare": "tsc && cp dist/index.js dist/index.dev.js && terser dist/index.js --compress --mangle -o dist/index.js"
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@release-it/conventional-changelog": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.25.0",
+    "@typescript-eslint/parser": "^8.25.0",
+    "eslint": "^9.21.0",
+    "globals": "^16.0.0",
+    "happy-dom": "^17.1.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.4.3",
+    "prettier": "^3.5.2",
+    "release-it": "^18.0.0",
     "terser": "^5.46.0",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "start": "tsc -w",
+    "preview": "python3 -m http.server 8000",
+    "build": "tsc && cp dist/index.js dist/index.dev.js && terser dist/index.js --compress --mangle --source-map -o dist/index.js",
+    "lint": "eslint src/**/*.ts",
+    "lint:fix": "eslint src/**/*.ts --fix",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "format:check": "prettier --check \"src/**/*.ts\"",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "release": "release-it"
   }
-}
+}

package/src/component.ts

@@ -4,17 +4,27 @@ 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;
+
+  static get observedAttributes() {
+    return ['theme'];
+  }
 
   constructor() {
     super();
     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.
@@ -51,22 +61,22 @@ export class BBMsgHistory extends HTMLElement {
     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;
   }
 
   private _appendSingleMessage(message: Message): void {
     const container = this.shadowRoot!.querySelector('.history') as HTMLElement;
-    
+
     // If empty state or no container, do full render first
     if (!container) {
       this.render();
@@ -78,26 +88,33 @@ export class BBMsgHistory extends HTMLElement {
     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'
+      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() {
@@ -124,7 +141,7 @@ export class BBMsgHistory extends HTMLElement {
 
   private render() {
     const messages = parseMessages(this.textContent);
-    
+
     if (messages.length === 0) {
       this._lastAuthor = '';
       this._renderEmpty();
@@ -138,7 +155,7 @@ export class BBMsgHistory extends HTMLElement {
         const isFirstFromAuthor = author !== lastAuthor;
         lastAuthor = author;
         const isSubsequent = !isFirstFromAuthor;
-        
+
         // Use utility function to build message HTML
         return buildMessageRowHtml(author, text, config, isSubsequent);
       })
@@ -151,12 +168,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 +199,28 @@ 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 });
+  }
 }