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

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/authors.js

@@ -22,7 +22,7 @@ export const AUTHOR_CONFIG = {
         textColor: THEME.gray[900],
         side: 'left',
     },
-    'GitHub': {
+    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',

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/message-processor.d.ts

@@ -0,0 +1,56 @@
+import type { Message } from '../types/index.js';
+/**
+ * Extended message with grouping metadata
+ */
+export interface ProcessedMessage extends Message {
+    /** Whether this is the first message from this author in the current group */
+    isFirstFromAuthor: boolean;
+    /** Whether this is the last message in the current group */
+    isLastInGroup: boolean;
+    /** The timestamp to display for this group (if any) */
+    groupTimestamp?: string;
+}
+/**
+ * Result of processing messages, including state for incremental updates
+ */
+export interface ProcessResult {
+    /** Processed messages with grouping metadata */
+    processed: ProcessedMessage[];
+    /** The author of the last message */
+    lastAuthor: string;
+    /** The timestamp of the current group */
+    lastGroupTimestamp?: string;
+}
+/**
+ * MessageProcessor - Handles message grouping and metadata calculation
+ *
+ * Encapsulates the grouping algorithm to determine:
+ * - Which messages are first from an author (show avatar)
+ * - Which messages are last in a group (show timestamp)
+ * - Group timestamps for display
+ *
+ * Optimized to process messages in a single pass instead of multiple traversals.
+ */
+export declare class MessageProcessor {
+    /**
+     * Check if two messages can be grouped together
+     * Messages can be grouped if they have the same author and compatible timestamps
+     *
+     * @param prev - Previous message (null if this is the first)
+     * @param curr - Current message
+     * @returns true if messages can be grouped
+     */
+    private canGroup;
+    /**
+     * Process messages to add grouping metadata
+     *
+     * This method performs a single-pass algorithm that:
+     * 1. Determines first/last status for each message in its group
+     * 2. Assigns group timestamps consistently
+     * 3. Tracks state for incremental updates
+     *
+     * @param messages - Raw messages from parser
+     * @returns Processed messages with grouping metadata and state
+     */
+    process(messages: Message[]): ProcessResult;
+}

package/dist/core/message-processor.js

@@ -0,0 +1,85 @@
+/**
+ * MessageProcessor - Handles message grouping and metadata calculation
+ *
+ * Encapsulates the grouping algorithm to determine:
+ * - Which messages are first from an author (show avatar)
+ * - Which messages are last in a group (show timestamp)
+ * - Group timestamps for display
+ *
+ * Optimized to process messages in a single pass instead of multiple traversals.
+ */
+export class MessageProcessor {
+    /**
+     * Check if two messages can be grouped together
+     * Messages can be grouped if they have the same author and compatible timestamps
+     *
+     * @param prev - Previous message (null if this is the first)
+     * @param curr - Current message
+     * @returns true if messages can be grouped
+     */
+    canGroup(prev, curr) {
+        if (!prev)
+            return false;
+        if (prev.author !== curr.author)
+            return false;
+        // Different timestamps = break group
+        if (prev.timestamp && curr.timestamp && prev.timestamp !== curr.timestamp) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Process messages to add grouping metadata
+     *
+     * This method performs a single-pass algorithm that:
+     * 1. Determines first/last status for each message in its group
+     * 2. Assigns group timestamps consistently
+     * 3. Tracks state for incremental updates
+     *
+     * @param messages - Raw messages from parser
+     * @returns Processed messages with grouping metadata and state
+     */
+    process(messages) {
+        if (messages.length === 0) {
+            return { processed: [], lastAuthor: '' };
+        }
+        const processed = [];
+        let lastAuthor = '';
+        let lastGroupTimestamp;
+        // Track group state
+        let currentGroupTimestamp;
+        for (let i = 0; i < messages.length; i++) {
+            const msg = messages[i];
+            const prev = i > 0 ? messages[i - 1] : null;
+            const next = i < messages.length - 1 ? messages[i + 1] : null;
+            // Determine if this is first from author
+            const isFirstFromAuthor = !this.canGroup(prev, msg);
+            // Start of new group - initialize group timestamp
+            if (isFirstFromAuthor) {
+                currentGroupTimestamp = msg.timestamp;
+            }
+            else if (!currentGroupTimestamp && msg.timestamp) {
+                // If no timestamp yet and current msg has one, use it
+                currentGroupTimestamp = msg.timestamp;
+            }
+            // Determine if this is last in group
+            const isLastInGroup = !next || !this.canGroup(msg, next);
+            // Create processed message with metadata
+            const processedMsg = {
+                ...msg,
+                isFirstFromAuthor,
+                isLastInGroup,
+                groupTimestamp: isLastInGroup ? currentGroupTimestamp : undefined,
+            };
+            processed.push(processedMsg);
+            // Update state tracking
+            lastAuthor = msg.author;
+            // If this is the last in group, reset group timestamp
+            if (isLastInGroup) {
+                lastGroupTimestamp = currentGroupTimestamp;
+                currentGroupTimestamp = undefined;
+            }
+        }
+        return { processed, lastAuthor, lastGroupTimestamp };
+    }
+}

package/dist/core/renderer.d.ts

@@ -0,0 +1,87 @@
+import type { AuthorOptions, Message } from '../types/index.js';
+import type { ProcessedMessage } from './message-processor.js';
+/**
+ * State for incremental message appending
+ */
+export interface LastState {
+    author: string;
+    groupTimestamp?: string;
+}
+/**
+ * Result of a full render operation
+ */
+export interface RenderResult {
+    wasAtBottom: boolean;
+}
+/**
+ * Result of an incremental append operation
+ */
+export interface AppendResult {
+    success: boolean;
+    lastAuthor: string;
+    lastGroupTimestamp?: string;
+}
+/**
+ * Renderer - Manages all DOM rendering operations
+ *
+ * Centralizes DOM manipulation logic:
+ * - Full render of all messages
+ * - Incremental update when appending single messages
+ * - Empty state rendering
+ * - Loading overlay management
+ */
+export declare class Renderer {
+    private shadowRoot;
+    constructor(shadowRoot: ShadowRoot);
+    /**
+     * Render the complete message history
+     *
+     * @param messages - Processed messages with grouping metadata
+     * @param authors - User-defined author configurations
+     * @param isLoading - Whether to show loading overlay
+     * @param hideScrollButton - Whether to hide the scroll-to-bottom button
+     * @returns Result indicating if we were at bottom before render
+     */
+    render(messages: ProcessedMessage[], authors: Map<string, AuthorOptions>, isLoading: boolean, hideScrollButton: boolean): RenderResult;
+    /**
+     * Build HTML string for all messages
+     */
+    private buildMessagesHtml;
+    /**
+     * Render full structure including styles, container, and scroll button
+     */
+    private renderFullStructure;
+    /**
+     * Update content while preserving DOM structure
+     */
+    private updateContent;
+    /**
+     * Append a single message without full re-render
+     *
+     * @param message - The message to append
+     * @param authors - User-defined author configurations
+     * @param lastState - Previous state for grouping logic
+     * @returns Result indicating success and updated state
+     */
+    appendSingleMessage(message: Message, authors: Map<string, AuthorOptions>, lastState: LastState): AppendResult;
+    /**
+     * Check if two messages can be grouped
+     */
+    private canGroupMessages;
+    /**
+     * Render empty state (no messages)
+     */
+    renderEmpty(isLoading: boolean): void;
+    /**
+     * Update loading overlay visibility
+     */
+    updateLoadingOverlay(shouldShow: boolean): void;
+    /**
+     * Get the history container element
+     */
+    getHistoryContainer(): HTMLElement | null;
+    /**
+     * Get the scroll-to-bottom button element
+     */
+    getScrollButton(): HTMLButtonElement | null;
+}