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

package/src/component.ts

@@ -1,17 +1,24 @@
 import type { AuthorOptions, Message } from './types/index.js';
-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 {
   private _mutationObserver?: MutationObserver;
+  private _debounceTimer?: ReturnType<typeof setTimeout>;
+
+  // Core modules
+  private _eventTracker = new EventTracker();
+  private _messageProcessor = new MessageProcessor();
+  private _scrollManager: ScrollManager;
+  private _renderer: Renderer;
+
+  // State
   private _userAuthors = new Map<string, AuthorOptions>();
   private _lastAuthor = '';
   private _lastGroupTimestamp: string | undefined;
-  private _scrollButtonVisible = false;
 
   static get observedAttributes() {
     return ['theme', 'loading', 'hide-scroll-bar', 'infinite', 'hide-scroll-button'];
@@ -20,10 +27,25 @@ export class BBMsgHistory extends HTMLElement {
   constructor() {
     super();
     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: string) {
-    if (name === 'theme' || name === 'loading' || name === 'hide-scroll-bar' || name === 'infinite' || name === 'hide-scroll-button') {
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+    if (oldValue === newValue) return;
+    if (['theme', 'loading', 'hide-scroll-bar', 'infinite', 'hide-scroll-button'].includes(name)) {
       this.render();
     }
   }
@@ -72,19 +94,24 @@ export class BBMsgHistory extends HTMLElement {
    * el.appendMessage({ author: 'bob', text: 'How are you?' });
    */
   appendMessage(message: Message): this {
+    // 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;
   }
@@ -96,105 +123,32 @@ export class BBMsgHistory extends HTMLElement {
    * el.scrollToBottom();  // Scroll with smooth animation
    */
   scrollToBottom(): this {
-    if (this.hasAttribute('infinite')) {
-      return this;
-    }
-
-    const container = this.shadowRoot?.querySelector('.history') as HTMLElement | null;
-    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
+   */
   private _appendSingleMessage(message: Message): void {
-    const container = this.shadowRoot!.querySelector('.history') as HTMLElement;
+    const result = this._renderer.appendSingleMessage(message, this._userAuthors, {
+      author: this._lastAuthor,
+      groupTimestamp: this._lastGroupTimestamp,
+    });
 
-    // If empty state or no container, do full render first
-    if (!container) {
+    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);
+    // Update state
+    this._lastAuthor = result.lastAuthor;
+    this._lastGroupTimestamp = result.lastGroupTimestamp;
 
-    // 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)
+    // 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') as HTMLButtonElement | null;
-        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();
     }
   }
 
@@ -205,15 +159,12 @@ export class BBMsgHistory extends HTMLElement {
 
   disconnectedCallback() {
     this._mutationObserver?.disconnect();
+    clearTimeout(this._debounceTimer);
+    this._eventTracker.cleanup();
   }
 
   private _setupMutationObserver() {
-    let debounceTimer: ReturnType<typeof setTimeout>;
-    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,
@@ -226,233 +177,41 @@ 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: Message, curr: Message): boolean => {
-      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: boolean[] = 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<number, string | undefined>();
-    let currentGroupTimestamp: string | undefined;
-
-    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;
+    this._lastGroupTimestamp = lastGroupTimestamp;
 
-    // Check if we need to create or update the structure
-    const historyContainer = this.shadowRoot!.querySelector('.history') as HTMLElement;
-    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);
-    }
-  }
-
-  private _renderFullStructure(messagesHtml: string): void {
-    const loadingOverlay = this.hasAttribute('loading')
-      ? `<div class="loading-overlay" role="status" aria-label="Loading messages">
-          <div class="loading-spinner"></div>
-        </div>`
-      : '';
-
+    // Render messages
+    const isLoading = this.hasAttribute('loading');
     const hideScrollButton = this.hasAttribute('hide-scroll-button');
+    const { wasAtBottom } = this._renderer.render(
+      processed,
+      this._userAuthors,
+      isLoading,
+      hideScrollButton
+    );
 
-    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();
-  }
-
-  private _updateContent(historyContainer: HTMLElement, messagesHtml: string): void {
-    // 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!);
+    // Setup scroll tracking and other post-render tasks
+    this._setupAfterRender(wasAtBottom);
   }
 
-  private _updateLoadingOverlay(): void {
-    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();
-    }
-  }
-
-  private _setupAfterRender(): void {
+  private _setupAfterRender(shouldScrollToBottom = true): void {
     requestAnimationFrame(() => {
-      const container = this.shadowRoot!.querySelector('.history') as HTMLElement;
-      const scrollButton = this.shadowRoot!.querySelector('.scroll-to-bottom') as HTMLButtonElement | null;
+      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 });
-      }
-
-      if (scrollButton && !isInfinite) {
-        scrollButton.addEventListener('click', () => {
-          container?.scrollTo({
-            top: container.scrollHeight,
-            behavior: 'smooth',
-          });
-        });
+        // Initialize scroll manager
+        this._scrollManager.init(container, scrollButton, shouldScrollToBottom);
       }
-
-      setupTooltips(this.shadowRoot!);
     });
   }
-
-  private _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>
-      `;
-    }
-  }
-
-  private _setupScrollTracking(
-    container: HTMLElement,
-    button: HTMLButtonElement | null,
-    options?: { skipInitialCheck?: boolean }
-  ): void {
-    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/src/const/authors.ts

@@ -24,8 +24,9 @@ export const AUTHOR_CONFIG: Record<string, Omit<AuthorConfig, 'isCustomAvatar'>>
     textColor: THEME.gray[900],
     side: 'left',
   },
-  '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>',
+  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',
     textColor: THEME.gray[900],

package/src/core/message-processor.ts

@@ -0,0 +1,120 @@
+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 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(prev: Message | null, curr: Message): boolean {
+    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: Message[]): ProcessResult {
+    if (messages.length === 0) {
+      return { processed: [], lastAuthor: '' };
+    }
+
+    const processed: ProcessedMessage[] = [];
+    let lastAuthor = '';
+    let lastGroupTimestamp: string | undefined;
+
+    // Track group state
+    let currentGroupTimestamp: string | undefined;
+
+    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: ProcessedMessage = {
+        ...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 };
+  }
+}