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

package/dist/component.d.ts

@@ -1,13 +1,17 @@
 import type { AuthorOptions, Message } from './types/index.js';
 export declare class BBMsgHistory extends HTMLElement {
     private _mutationObserver?;
+    private _debounceTimer?;
+    private _eventTracker;
+    private _messageProcessor;
+    private _scrollManager;
+    private _renderer;
     private _userAuthors;
     private _lastAuthor;
     private _lastGroupTimestamp;
-    private _scrollButtonVisible;
     static get observedAttributes(): string[];
     constructor();
-    attributeChangedCallback(name: string): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /**
      * Configure an author's avatar, side, and colors.
      * Call before or after rendering — the component re-renders automatically.
@@ -45,15 +49,13 @@ export declare class BBMsgHistory extends HTMLElement {
      * el.scrollToBottom();  // Scroll with smooth animation
      */
     scrollToBottom(): this;
+    /**
+     * Internal: Append a single message with incremental DOM update
+     */
     private _appendSingleMessage;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _setupMutationObserver;
     private render;
-    private _renderFullStructure;
-    private _updateContent;
-    private _updateLoadingOverlay;
     private _setupAfterRender;
-    private _renderEmpty;
-    private _setupScrollTracking;
 }

package/dist/component.js

@@ -1,22 +1,37 @@
-import { EMPTY_STYLES, LOADING_STYLES, MAIN_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';
+import { EventTracker } from './utils/event-tracker.js';
+import { MessageProcessor } from './core/message-processor.js';
+import { ScrollManager } from './core/scroll-manager.js';
+import { Renderer } from './core/renderer.js';
 export class BBMsgHistory extends HTMLElement {
     static get observedAttributes() {
         return ['theme', 'loading', 'hide-scroll-bar', 'infinite', 'hide-scroll-button'];
     }
     constructor() {
         super();
+        // Core modules
+        this._eventTracker = new EventTracker();
+        this._messageProcessor = new MessageProcessor();
+        // State
         this._userAuthors = new Map();
         this._lastAuthor = '';
-        this._scrollButtonVisible = false;
         this.attachShadow({ mode: 'open' });
+        // Initialize renderer with shadow root
+        this._renderer = new Renderer(this.shadowRoot);
+        // Initialize scroll manager with callback
+        this._scrollManager = new ScrollManager(this, this.shadowRoot, this._eventTracker, _ => {
+            // Callback for visibility changes (state tracking if needed)
+        });
+        // Create MutationObserver for reactive rendering
+        this._mutationObserver = new MutationObserver(() => {
+            clearTimeout(this._debounceTimer);
+            this._debounceTimer = setTimeout(() => this.render(), 50);
+        });
     }
-    attributeChangedCallback(name) {
-        if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar' || name === 'infinite' || name === 'hide-scroll-button') {
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (['theme', 'loading', 'hide-scroll-bar', 'infinite', 'hide-scroll-button'].includes(name)) {
             this.render();
         }
     }
@@ -61,16 +76,21 @@ export class BBMsgHistory extends HTMLElement {
      * el.appendMessage({ author: 'bob', text: 'How are you?' });
      */
     appendMessage(message) {
+        // Temporarily disconnect observer BEFORE updating textContent to prevent double render
+        this._mutationObserver?.disconnect();
+        clearTimeout(this._debounceTimer);
         // 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();
+        this._mutationObserver?.observe(this, {
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
         return this;
     }
     /**
@@ -80,79 +100,28 @@ export class BBMsgHistory extends HTMLElement {
      * el.scrollToBottom();  // Scroll with smooth animation
      */
     scrollToBottom() {
-        if (this.hasAttribute('infinite')) {
-            return this;
-        }
-        const container = this.shadowRoot?.querySelector('.history');
-        if (!container) {
-            return this;
-        }
-        container.scrollTo({
-            top: container.scrollHeight,
-            behavior: 'smooth',
-        });
+        this._scrollManager.scrollToBottom();
         return this;
     }
+    /**
+     * Internal: Append a single message with incremental DOM update
+     */
     _appendSingleMessage(message) {
-        const container = this.shadowRoot.querySelector('.history');
-        // If empty state or no container, do full render first
-        if (!container) {
+        const result = this._renderer.appendSingleMessage(message, this._userAuthors, {
+            author: this._lastAuthor,
+            groupTimestamp: this._lastGroupTimestamp,
+        });
+        if (!result.success) {
+            // Container not ready, do full render
             this.render();
             return;
         }
-        const author = message.author;
-        const text = message.text;
-        const timestamp = message.timestamp;
-        const config = resolveAuthorConfig(author, this._userAuthors);
-        // Check if this can group with the last message
-        // Same author AND (no timestamp conflict)
-        const canGroupWithLast = author === this._lastAuthor &&
-            (!this._lastGroupTimestamp || !timestamp || this._lastGroupTimestamp === timestamp);
-        const isFirstFromAuthor = !canGroupWithLast;
-        this._lastAuthor = author;
-        const isSubsequent = !isFirstFromAuthor;
-        // Update group timestamp tracking
-        if (isFirstFromAuthor) {
-            // Start new group
-            this._lastGroupTimestamp = timestamp;
-        }
-        else if (!this._lastGroupTimestamp && timestamp) {
-            // If no timestamp in group yet and current has one, use it
-            this._lastGroupTimestamp = timestamp;
-        }
-        // When appending, we assume this IS the last in group (for now)
-        // If another message from same author comes, we'll re-render
-        const isLastInGroup = true;
-        const groupTimestamp = this._lastGroupTimestamp;
-        // Use utility function to build message HTML
-        const msgHtml = buildMessageRowHtml(author, text, config, isSubsequent, groupTimestamp, isLastInGroup);
-        // 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 (skip in infinite mode)
+        // Update state
+        this._lastAuthor = result.lastAuthor;
+        this._lastGroupTimestamp = result.lastGroupTimestamp;
+        // Scroll to bottom (skip in infinite mode)
         if (!this.hasAttribute('infinite')) {
-            container.scrollTo({
-                top: container.scrollHeight,
-                behavior: 'smooth',
-            });
-            // Hide scroll button since we're scrolling to bottom
-            if (this._scrollButtonVisible) {
-                this._scrollButtonVisible = false;
-                const scrollButton = this.shadowRoot.querySelector('.scroll-to-bottom');
-                if (scrollButton) {
-                    scrollButton.classList.remove('visible');
-                }
-                // Dispatch hide event (always, regardless of button visibility)
-                this.dispatchEvent(new CustomEvent('bb-scrollbuttonhide', {
-                    bubbles: true,
-                    composed: true,
-                    detail: { visible: false }
-                }));
-            }
+            this._scrollManager.scrollToBottom();
         }
     }
     connectedCallback() {
@@ -161,14 +130,11 @@ export class BBMsgHistory extends HTMLElement {
     }
     disconnectedCallback() {
         this._mutationObserver?.disconnect();
+        clearTimeout(this._debounceTimer);
+        this._eventTracker.cleanup();
     }
     _setupMutationObserver() {
-        let debounceTimer;
-        this._mutationObserver = new MutationObserver(() => {
-            clearTimeout(debounceTimer);
-            debounceTimer = setTimeout(() => this.render(), 50);
-        });
-        this._mutationObserver.observe(this, {
+        this._mutationObserver?.observe(this, {
             childList: true,
             characterData: true,
             subtree: true,
@@ -179,188 +145,30 @@ export class BBMsgHistory extends HTMLElement {
         if (messages.length === 0) {
             this._lastAuthor = '';
             this._lastGroupTimestamp = undefined;
-            this._renderEmpty();
+            this._renderer.renderEmpty(this.hasAttribute('loading'));
             return;
         }
-        // Helper: Check if two messages can be grouped (same author, no timestamp conflict)
-        const canGroup = (prev, curr) => {
-            if (prev.author !== curr.author)
-                return false;
-            // Different timestamps = break group
-            if (prev.timestamp && curr.timestamp && prev.timestamp !== curr.timestamp) {
-                return false;
-            }
-            return true;
-        };
-        // First pass: determine which messages are last in their group
-        const lastInGroupFlags = messages.map((msg, i) => {
-            const next = messages[i + 1];
-            return !next || !canGroup(msg, next);
-        });
-        // Second pass: collect the timestamp for each group
-        // Use the first non-empty timestamp in the group
-        const groupTimestamps = new Map();
-        let currentGroupTimestamp;
-        messages.forEach((msg, i) => {
-            // Start of a new group
-            if (i === 0 || !canGroup(messages[i - 1], msg)) {
-                currentGroupTimestamp = msg.timestamp;
-            }
-            else if (!currentGroupTimestamp && msg.timestamp) {
-                // If no timestamp yet and current msg has one, use it
-                currentGroupTimestamp = msg.timestamp;
-            }
-            // If this is the last message in the group, save the timestamp
-            if (lastInGroupFlags[i]) {
-                groupTimestamps.set(i, currentGroupTimestamp);
-                currentGroupTimestamp = undefined;
-            }
-        });
-        // Third pass: build HTML
-        let lastAuthor = '';
-        const messagesHtml = messages
-            .map((msg, i) => {
-            const { author, text } = msg;
-            const config = resolveAuthorConfig(author, this._userAuthors);
-            // Determine if this is a new author group (can't group with previous)
-            const isFirstFromAuthor = i === 0 || !canGroup(messages[i - 1], msg);
-            lastAuthor = author;
-            const isSubsequent = !isFirstFromAuthor;
-            // Get timestamp if this is the last in group
-            const isLastInGroup = lastInGroupFlags[i];
-            const groupTimestamp = groupTimestamps.get(i);
-            // Use utility function to build message HTML
-            return buildMessageRowHtml(author, text, config, isSubsequent, groupTimestamp, isLastInGroup);
-        })
-            .join('');
+        // Process messages (single-pass algorithm)
+        const { processed, lastAuthor, lastGroupTimestamp } = this._messageProcessor.process(messages);
+        // Update state
         this._lastAuthor = lastAuthor;
-        // Check if we need to create or update the structure
-        const historyContainer = this.shadowRoot.querySelector('.history');
-        const needsFullSetup = !historyContainer;
-        if (needsFullSetup) {
-            // First render - create full structure
-            this._renderFullStructure(messagesHtml);
-        }
-        else {
-            // Update only - preserve DOM structure, just update content
-            this._updateContent(historyContainer, messagesHtml);
-        }
-    }
-    _renderFullStructure(messagesHtml) {
-        const loadingOverlay = this.hasAttribute('loading')
-            ? `<div class="loading-overlay" role="status" aria-label="Loading messages">
-          <div class="loading-spinner"></div>
-        </div>`
-            : '';
+        this._lastGroupTimestamp = lastGroupTimestamp;
+        // Render messages
+        const isLoading = this.hasAttribute('loading');
         const hideScrollButton = this.hasAttribute('hide-scroll-button');
-        this.shadowRoot.innerHTML = `
-      <style>${MAIN_STYLES}${LOADING_STYLES}</style>
-      <div class="history" role="log" aria-live="polite" aria-label="Message history">
-        ${messagesHtml}
-      </div>
-      ${hideScrollButton ? '' : buildScrollButtonHtml()}
-      ${loadingOverlay}
-    `;
-        this._setupAfterRender();
-    }
-    _updateContent(historyContainer, messagesHtml) {
-        // Preserve scroll position before update
-        const scrollContainer = historyContainer;
-        const wasAtBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight < 50;
-        // Update messages content only
-        historyContainer.innerHTML = messagesHtml;
-        // Update loading overlay
-        this._updateLoadingOverlay();
-        // Restore scroll position or scroll to bottom if we were there
-        if (wasAtBottom) {
-            scrollContainer.scrollTop = scrollContainer.scrollHeight;
-        }
-        // Re-setup tooltips for new content
-        setupTooltips(this.shadowRoot);
+        const { wasAtBottom } = this._renderer.render(processed, this._userAuthors, isLoading, hideScrollButton);
+        // Setup scroll tracking and other post-render tasks
+        this._setupAfterRender(wasAtBottom);
     }
-    _updateLoadingOverlay() {
-        const existingOverlay = this.shadowRoot.querySelector('.loading-overlay');
-        const shouldShow = this.hasAttribute('loading');
-        if (shouldShow && !existingOverlay) {
-            const overlay = document.createElement('div');
-            overlay.className = 'loading-overlay';
-            overlay.setAttribute('role', 'status');
-            overlay.setAttribute('aria-label', 'Loading messages');
-            overlay.innerHTML = '<div class="loading-spinner"></div>';
-            this.shadowRoot.appendChild(overlay);
-        }
-        else if (!shouldShow && existingOverlay) {
-            existingOverlay.remove();
-        }
-    }
-    _setupAfterRender() {
+    _setupAfterRender(shouldScrollToBottom = true) {
         requestAnimationFrame(() => {
-            const container = this.shadowRoot.querySelector('.history');
-            const scrollButton = this.shadowRoot.querySelector('.scroll-to-bottom');
+            const container = this._renderer.getHistoryContainer();
+            const scrollButton = this._renderer.getScrollButton();
             const isInfinite = this.hasAttribute('infinite');
             if (container && !isInfinite) {
-                container.scrollTop = container.scrollHeight;
-                this._setupScrollTracking(container, scrollButton, { skipInitialCheck: true });
+                // Initialize scroll manager
+                this._scrollManager.init(container, scrollButton, shouldScrollToBottom);
             }
-            if (scrollButton && !isInfinite) {
-                scrollButton.addEventListener('click', () => {
-                    container?.scrollTo({
-                        top: container.scrollHeight,
-                        behavior: 'smooth',
-                    });
-                });
-            }
-            setupTooltips(this.shadowRoot);
         });
     }
-    _renderEmpty() {
-        const isLoading = this.hasAttribute('loading');
-        if (isLoading) {
-            // Show loading overlay with minimum height for better appearance
-            this.shadowRoot.innerHTML = `
-        <style>${EMPTY_STYLES}${LOADING_STYLES}</style>
-        <div style="position: relative; min-height: 120px;">
-          <div class="loading-overlay" role="status" aria-label="Loading messages">
-            <div class="loading-spinner"></div>
-          </div>
-        </div>
-      `;
-        }
-        else {
-            this.shadowRoot.innerHTML = `
-        <style>${EMPTY_STYLES}</style>
-        <div class="empty-state">No messages</div>
-      `;
-        }
-    }
-    _setupScrollTracking(container, button, options) {
-        const checkScrollPosition = () => {
-            const threshold = 50; // pixels from bottom
-            const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
-            const hasOverflow = container.scrollHeight > container.clientHeight;
-            // Show button when not at bottom and content has overflow
-            const shouldShow = !isAtBottom && hasOverflow;
-            if (shouldShow !== this._scrollButtonVisible) {
-                this._scrollButtonVisible = shouldShow;
-                // Only toggle button visibility if button exists
-                if (button) {
-                    button.classList.toggle('visible', shouldShow);
-                }
-                // Dispatch custom event (always, regardless of button visibility)
-                this.dispatchEvent(new CustomEvent(shouldShow ? 'bb-scrollbuttonshow' : 'bb-scrollbuttonhide', {
-                    bubbles: true,
-                    composed: true,
-                    detail: { visible: shouldShow }
-                }));
-            }
-        };
-        // Check initial state unless skipped
-        if (!options?.skipInitialCheck) {
-            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

@@ -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/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;
+}