@bbki.ng/bb-msg-history 1.0.0 → 2.0.0

package/dist/components/bb-scroll-button.js

@@ -0,0 +1,161 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { THEME } from '../const/theme.js';
+/**
+ * Scroll-to-bottom button component
+ * Emits bb-scroll-to-bottom event when clicked
+ */
+let BBScrollButton = class BBScrollButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.visible = false;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      position: absolute;
+      bottom: 16px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+    }
+
+    .scroll-btn {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background: #ffffff;
+      border: none;
+      color: ${unsafeCSS(THEME.gray[500])};
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(10px) scale(0);
+      transition:
+        opacity 0.2s ease,
+        transform 0.2s ease,
+        visibility 0.2s ease,
+        box-shadow 0.2s ease;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    .scroll-btn.visible {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0) scale(1);
+    }
+
+    .scroll-btn:hover {
+      color: ${unsafeCSS(THEME.gray[700])};
+      transform: translateY(-2px) scale(1.05);
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    }
+
+    .scroll-btn:active {
+      transform: translateY(-1px) scale(0.95);
+    }
+
+    .scroll-btn svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    @media (max-width: 480px) {
+      :host {
+        bottom: 12px;
+      }
+
+      .scroll-btn {
+        width: 32px;
+        height: 32px;
+      }
+
+      .scroll-btn svg {
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .scroll-btn {
+        transition:
+          opacity 0.15s ease,
+          visibility 0.15s ease;
+        transform: translateY(10px) scale(0);
+      }
+
+      .scroll-btn.visible {
+        transform: translateY(0) scale(1);
+      }
+
+      .scroll-btn:hover {
+        transform: translateY(-2px) scale(1);
+      }
+
+      .scroll-btn:active {
+        transform: translateY(0) scale(0.95);
+      }
+    }
+
+    /* Dark mode */
+    @media (prefers-color-scheme: dark) {
+      .scroll-btn {
+        background: ${unsafeCSS(THEME.slate[800])};
+        color: ${unsafeCSS(THEME.slate[300])};
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+      }
+
+      .scroll-btn:hover {
+        color: ${unsafeCSS(THEME.slate[200])};
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+      }
+    }
+  `; }
+    _handleClick() {
+        this.dispatchEvent(new CustomEvent('bb-scroll-to-bottom', {
+            bubbles: true,
+            composed: true,
+            detail: { behavior: 'smooth' },
+        }));
+    }
+    render() {
+        return html `
+      <button
+        class="scroll-btn ${this.visible ? 'visible' : ''}"
+        @click=${this._handleClick}
+        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>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], BBScrollButton.prototype, "visible", void 0);
+BBScrollButton = __decorate([
+    customElement('bb-scroll-button')
+], BBScrollButton);
+export { BBScrollButton };

package/dist/components/bb-timestamp.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+/**
+ * Timestamp component - displays message timestamp
+ */
+export declare class BBTimestamp extends LitElement {
+    static styles: import("lit").CSSResult;
+    value: string;
+    side: 'left' | 'right';
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bb-timestamp': BBTimestamp;
+    }
+}

package/dist/components/bb-timestamp.js

@@ -0,0 +1,59 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { THEME } from '../const/theme.js';
+/**
+ * Timestamp component - displays message timestamp
+ */
+let BBTimestamp = class BBTimestamp extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.side = 'left';
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+    }
+
+    .timestamp {
+      font-size: 11px;
+      color: ${unsafeCSS(THEME.gray[400])};
+      white-space: nowrap;
+      line-height: 1;
+      pointer-events: none;
+    }
+
+    :host([side='left']) .timestamp {
+      text-align: left;
+    }
+
+    :host([side='right']) .timestamp {
+      text-align: right;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .timestamp {
+        color: ${unsafeCSS(THEME.gray[500])};
+      }
+    }
+  `; }
+    render() {
+        return html `<div class="timestamp">${this.value}</div>`;
+    }
+};
+__decorate([
+    property()
+], BBTimestamp.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], BBTimestamp.prototype, "side", void 0);
+BBTimestamp = __decorate([
+    customElement('bb-timestamp')
+], BBTimestamp);
+export { BBTimestamp };

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+export { BBLetterAvatar } from './bb-letter-avatar.js';
+export { BBCustomAvatar } from './bb-custom-avatar.js';
+export { BBMessageBubble } from './bb-message-bubble.js';
+export { BBTimestamp } from './bb-timestamp.js';
+export { BBMessage } from './bb-message.js';
+export { BBScrollButton } from './bb-scroll-button.js';
+export { BBLoadingOverlay } from './bb-loading-overlay.js';

package/dist/components/index.js

@@ -0,0 +1,7 @@
+export { BBLetterAvatar } from './bb-letter-avatar.js';
+export { BBCustomAvatar } from './bb-custom-avatar.js';
+export { BBMessageBubble } from './bb-message-bubble.js';
+export { BBTimestamp } from './bb-timestamp.js';
+export { BBMessage } from './bb-message.js';
+export { BBScrollButton } from './bb-scroll-button.js';
+export { BBLoadingOverlay } from './bb-loading-overlay.js';

package/dist/const/styles.js

@@ -159,7 +159,6 @@ export const MAIN_STYLES = `
     background: #ffffff;
     border-radius: 50%;
     overflow: hidden;
-    cursor: help;
   }
 
   .avatar-wrapper--hidden {
@@ -182,38 +181,6 @@ export const MAIN_STYLES = `
     height: 100%;
   }
 
-  /* Hover tooltip */
-  .avatar-tooltip {
-    position: fixed;
-    padding: 0.25rem 0.5rem;
-    background: ${THEME.gray[800]};
-    color: ${THEME.gray[50]};
-    font-size: 0.75rem;
-    border-radius: 0.25rem;
-    white-space: nowrap;
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    z-index: 10;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-  }
-
-  .avatar-tooltip::after {
-    content: '';
-    position: absolute;
-    top: calc(100% - 1px);
-    left: 50%;
-    transform: translateX(-50%);
-    border: 4px solid transparent;
-    border-top-color: ${THEME.gray[800]};
-  }
-
-  .avatar-wrapper:hover .avatar-tooltip {
-    opacity: 1;
-    visibility: visible;
-  }
-
   /* Message content area */
   .msg-content {
     display: flex;

package/dist/contexts/author-context.d.ts

@@ -0,0 +1,8 @@
+import type { AuthorOptions } from '../types/index.js';
+/**
+ * Lit Context for author configuration sharing
+ * Allows sub-components to access author configs without prop drilling
+ */
+export declare const authorContext: {
+    __context__: Map<string, AuthorOptions>;
+};

package/dist/contexts/author-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '@lit/context';
+/**
+ * Lit Context for author configuration sharing
+ * Allows sub-components to access author configs without prop drilling
+ */
+export const authorContext = createContext('authors');

package/dist/controllers/scroll-controller.d.ts

@@ -0,0 +1,52 @@
+import type { ReactiveController } from 'lit';
+import type { LitElement } from 'lit';
+/**
+ * ScrollController - Reactive controller for scroll behavior
+ *
+ * Encapsulates scroll-related logic:
+ * - Scroll to bottom with smooth animation
+ * - Detect when user is near/at bottom of content
+ * - Control scroll button visibility based on scroll position
+ */
+export declare class ScrollController implements ReactiveController {
+    private host;
+    private _container?;
+    private _intersectionObserver?;
+    private _resizeObserver?;
+    private _isVisible;
+    private readonly BOTTOM_THRESHOLD;
+    constructor(host: LitElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    private _init;
+    private _cleanup;
+    private _initIntersectionObserver;
+    private _initResizeObserver;
+    /**
+     * Check current scroll position and update visibility state
+     */
+    checkPosition(): void;
+    /**
+     * Scroll the container to the bottom
+     * @param behavior - Scroll behavior: 'smooth' or 'auto'
+     */
+    scrollToBottom(behavior?: ScrollBehavior): void;
+    /**
+     * Check if the container is currently at or near the bottom
+     * @returns true if within threshold pixels of bottom
+     */
+    isAtBottom(): boolean;
+    /**
+     * Get the current button visibility state
+     */
+    get isVisible(): boolean;
+    /**
+     * Get the scrollable container element
+     */
+    get container(): HTMLElement | undefined;
+    /**
+     * Update the observed last message (call when messages change)
+     */
+    updateObservedMessage(): void;
+}

package/dist/controllers/scroll-controller.js

@@ -0,0 +1,138 @@
+/**
+ * ScrollController - Reactive controller for scroll behavior
+ *
+ * Encapsulates scroll-related logic:
+ * - Scroll to bottom with smooth animation
+ * - Detect when user is near/at bottom of content
+ * - Control scroll button visibility based on scroll position
+ */
+export class ScrollController {
+    constructor(host) {
+        this._isVisible = false;
+        // Threshold in pixels from bottom to consider "at bottom"
+        this.BOTTOM_THRESHOLD = 50;
+        this.host = host;
+        host.addController(this);
+    }
+    hostConnected() {
+        // Wait for render to complete before querying DOM
+        this.host.updateComplete.then(() => {
+            this._init();
+        });
+    }
+    hostDisconnected() {
+        this._cleanup();
+    }
+    hostUpdated() {
+        // Re-initialize if container becomes available
+        if (!this._container) {
+            this._init();
+        }
+    }
+    _init() {
+        const host = this.host;
+        this._container = host.renderRoot?.querySelector('.history-container');
+        if (this._container) {
+            this._initIntersectionObserver();
+            this._initResizeObserver();
+            this.checkPosition();
+        }
+    }
+    _cleanup() {
+        this._intersectionObserver?.disconnect();
+        this._resizeObserver?.disconnect();
+        this._container = undefined;
+    }
+    _initIntersectionObserver() {
+        if (!this._container)
+            return;
+        // Observe the last message to detect if we're at bottom
+        const lastMsg = this._container.lastElementChild;
+        if (!lastMsg)
+            return;
+        this._intersectionObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                const wasVisible = this._isVisible;
+                this._isVisible = !entry.isIntersecting;
+                if (wasVisible !== this._isVisible) {
+                    this.host.requestUpdate();
+                }
+            });
+        }, {
+            root: this._container,
+            threshold: 0.1,
+            rootMargin: '0px 0px 50px 0px',
+        });
+        this._intersectionObserver.observe(lastMsg);
+    }
+    _initResizeObserver() {
+        if (!this._container)
+            return;
+        this._resizeObserver = new ResizeObserver(() => {
+            this.checkPosition();
+        });
+        this._resizeObserver.observe(this._container);
+    }
+    /**
+     * Check current scroll position and update visibility state
+     */
+    checkPosition() {
+        if (!this._container)
+            return;
+        const isAtBottom = this.isAtBottom();
+        const hasOverflow = this._container.scrollHeight > this._container.clientHeight;
+        // Show button when not at bottom and content has overflow
+        const shouldShow = !isAtBottom && hasOverflow;
+        if (shouldShow !== this._isVisible) {
+            this._isVisible = shouldShow;
+            this.host.requestUpdate();
+        }
+    }
+    /**
+     * Scroll the container to the bottom
+     * @param behavior - Scroll behavior: 'smooth' or 'auto'
+     */
+    scrollToBottom(behavior = 'smooth') {
+        if (!this._container)
+            return;
+        this._container.scrollTo({
+            top: this._container.scrollHeight,
+            behavior,
+        });
+        // Hide button since we're scrolling to bottom
+        if (this._isVisible) {
+            this._isVisible = false;
+            this.host.requestUpdate();
+        }
+    }
+    /**
+     * Check if the container is currently at or near the bottom
+     * @returns true if within threshold pixels of bottom
+     */
+    isAtBottom() {
+        if (!this._container)
+            return true;
+        const distanceFromBottom = this._container.scrollHeight - this._container.scrollTop - this._container.clientHeight;
+        return distanceFromBottom < this.BOTTOM_THRESHOLD;
+    }
+    /**
+     * Get the current button visibility state
+     */
+    get isVisible() {
+        return this._isVisible;
+    }
+    /**
+     * Get the scrollable container element
+     */
+    get container() {
+        return this._container;
+    }
+    /**
+     * Update the observed last message (call when messages change)
+     */
+    updateObservedMessage() {
+        this._intersectionObserver?.disconnect();
+        this._initIntersectionObserver();
+        this.checkPosition();
+    }
+}

package/dist/core/renderer.js

@@ -1,8 +1,7 @@
 import { EMPTY_STYLES, LOADING_STYLES, MAIN_STYLES } from '../const/styles.js';
 import { resolveAuthorConfig } from '../utils/author-resolver.js';
-import { buildMessageRowHtml, setupTooltipForElement } from '../utils/message-builder.js';
+import { buildMessageRowHtml } from '../utils/message-builder.js';
 import { buildScrollButtonHtml } from '../utils/scroll-button.js';
-import { setupTooltips } from '../utils/tooltip.js';
 /**
  * Renderer - Manages all DOM rendering operations
  *
@@ -88,8 +87,6 @@ export class Renderer {
         if (wasAtBottom) {
             scrollContainer.scrollTop = scrollContainer.scrollHeight;
         }
-        // Re-setup tooltips for new content
-        setupTooltips(this.shadowRoot);
         return { wasAtBottom };
     }
     /**
@@ -126,11 +123,6 @@ export class Renderer {
         lastGroupTimestamp, true // isLastInGroup - when appending, this is always last (for now)
         );
         container.insertAdjacentHTML('beforeend', msgHtml);
-        // Setup tooltip for new element
-        const newWrapper = container.lastElementChild?.querySelector('.avatar-wrapper');
-        if (newWrapper) {
-            setupTooltipForElement(newWrapper);
-        }
         return {
             success: true,
             lastAuthor: message.author,

package/dist/parsers/base.d.ts

@@ -0,0 +1,21 @@
+import type { Message } from '../types/index.js';
+/**
+ * Parser interface for message parsing
+ * Allows custom parsers to be plugged in
+ */
+export interface MessageParser {
+    /**
+     * Parse text content into message array
+     * @param textContent - Raw text content to parse
+     * @returns Array of parsed messages
+     */
+    parse(textContent: string | null): Message[];
+}
+/**
+ * Input type for appending messages
+ */
+export interface MessageInput {
+    author: string;
+    text: string;
+    timestamp?: string;
+}

package/dist/parsers/base.js

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

package/dist/parsers/default-parser.d.ts

@@ -0,0 +1,10 @@
+import type { Message } from '../types/index.js';
+import type { MessageParser } from './base.js';
+/**
+ * Default message parser implementation
+ * Format: `[timestamp] author: text` or `author: text` (one message per line)
+ * Timestamp is optional for backward compatibility
+ */
+export declare class DefaultMessageParser implements MessageParser {
+    parse(textContent: string | null): Message[];
+}

package/dist/parsers/default-parser.js

@@ -0,0 +1,40 @@
+/**
+ * Default message parser implementation
+ * Format: `[timestamp] author: text` or `author: text` (one message per line)
+ * Timestamp is optional for backward compatibility
+ */
+export class DefaultMessageParser {
+    parse(textContent) {
+        const raw = textContent || '';
+        const messages = [];
+        // Pattern: [timestamp] author: text (space between timestamp and author is optional)
+        const timestampPattern = /^\[([^\]]+)\]\s*(.+)$/;
+        for (const line of raw.split('\n')) {
+            const trimmed = line.trim();
+            if (!trimmed)
+                continue;
+            let remainingLine = trimmed;
+            let timestamp;
+            // Try to extract timestamp
+            const timestampMatch = trimmed.match(timestampPattern);
+            if (timestampMatch) {
+                timestamp = timestampMatch[1].trim();
+                remainingLine = timestampMatch[2];
+            }
+            // Find the author:text separator (colon followed by space)
+            const colonIdx = remainingLine.indexOf(':');
+            if (colonIdx <= 0)
+                continue;
+            const author = remainingLine.slice(0, colonIdx).trim();
+            const text = remainingLine.slice(colonIdx + 1).trim();
+            if (author && text) {
+                const message = { author, text };
+                if (timestamp) {
+                    message.timestamp = timestamp;
+                }
+                messages.push(message);
+            }
+        }
+        return messages;
+    }
+}

package/dist/parsers/index.d.ts

@@ -0,0 +1,2 @@
+export type { MessageParser, MessageInput } from './base.js';
+export { DefaultMessageParser } from './default-parser.js';

package/dist/parsers/index.js

@@ -0,0 +1 @@
+export { DefaultMessageParser } from './default-parser.js';

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

@@ -11,7 +11,3 @@ export declare function buildTimestampHtml(timestamp: string, side: 'left' | 'ri
  * Build a single message row HTML string
  */
 export declare function buildMessageRowHtml(author: string, text: string, config: AuthorConfig, isSubsequent: boolean, timestamp?: string, isLastInGroup?: boolean): string;
-/**
- * Setup tooltip for a single avatar wrapper element
- */
-export declare function setupTooltipForElement(wrapper: Element): void;

package/dist/utils/message-builder.js

@@ -8,7 +8,6 @@ export function buildAvatarHtml(author, config, showAvatar) {
     <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>
   `;
 }
@@ -53,17 +52,3 @@ export function buildMessageRowHtml(author, text, config, isSubsequent, timestam
     </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/utils/tooltip.d.ts

@@ -1,5 +1,14 @@
 /**
- * Setup dynamic tooltip positioning
- * Tooltips are positioned fixed to avoid overflow clipping from parent containers
+ * Tooltip utilities for avatar hover effects
+ *
+ * Tooltips use position: fixed to escape overflow clipping from scrollable containers.
+ * Position is calculated on mouseenter and updated on scroll to prevent staleness.
+ */
+/**
+ * Setup tooltip positioning for a single avatar wrapper element
+ */
+export declare function setupTooltipForElement(wrapper: Element): void;
+/**
+ * Setup tooltips for all avatar wrappers in the shadow root
  */
 export declare function setupTooltips(shadowRoot: ShadowRoot): void;