Class MessageNavigation

chat/components/MessageNavigation.js:2–389

// Message Navigation Component
import { renderMathContent } from '../services/mathRendering.js';

export default class MessageNavigation {
    constructor(app) {
        this.app = app;
        this.currentMessageIndex = 0;
        this.messages = [];
        this.container = null;
        this.isVisible = false;
        this.hideTimeout = null;
        this.isNavigating = false; // Flag to prevent scroll handler from overriding click navigation
        this.clickedIndex = null; // Tracks user-clicked bar, null = use viewport-based detection
        this.awaitingScrollEnd = false; // True while waiting for programmatic scroll to finish
        this.scrollEndTimer = null;

        this.init();
    }

    init() {
        this.createNavigationUI();
        this.setupEventListeners();
    }

    createNavigationUI() {
        // Create navigation container
        const nav = document.createElement('div');
        nav.id = 'message-navigation';
        nav.className = 'message-navigation hidden';
        nav.innerHTML = `
            <button id="prev-message-btn" class="nav-btn" aria-label="Previous message" title="Previous message (↑)">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
                </svg>
            </button>
            <div id="message-indicators" class="message-indicators"></div>
            <button id="next-message-btn" class="nav-btn" aria-label="Next message" title="Next message (↓)">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                </svg>
            </button>
        `;

        // Add to chat area
        const chatArea = document.getElementById('chat-area');
        if (chatArea) {
            chatArea.appendChild(nav);
            this.container = nav;
        }
    }

    setupEventListeners() {
        const prevBtn = document.getElementById('prev-message-btn');
        const nextBtn = document.getElementById('next-message-btn');

        if (prevBtn) {
            prevBtn.addEventListener('click', () => this.navigateToPrevious());
        }

        if (nextBtn) {