static/js/scroll_helpers.js

/**
 * Script to handle text scrolling in the RAG Summarizer Arena
 * Uses a simplified approach relying primarily on Gradio's autoscroll parameter
 */

// Scroll to the query section when loading new content
function scrollToQuerySection() {
  const querySection = document.getElementById('query-section');
  if (querySection) {
    setTimeout(() => {
      querySection.scrollIntoView({ behavior: 'smooth', block: 'start' });
      console.log('Scrolled to query section');
    }, 300); // Small delay to ensure content is loaded
  }
}

// Set up event listeners when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
  console.log('Setting up basic scroll helpers...');
  
  // Monitor button clicks for scrolling to the query section
  function setupButtonListeners() {
    const tryAnotherBtn = document.getElementById('try-another-btn');
    if (tryAnotherBtn && !tryAnotherBtn.hasAttribute('data-scroll-handler')) {
      tryAnotherBtn.addEventListener('click', scrollToQuerySection);
      tryAnotherBtn.setAttribute('data-scroll-handler', 'true');
      console.log('Added listener to try-another-btn');
    }
    
    const randomQuestionBtn = document.querySelector('.query-button');
    if (randomQuestionBtn && !randomQuestionBtn.hasAttribute('data-scroll-handler')) {
      randomQuestionBtn.addEventListener('click', scrollToQuerySection);
      randomQuestionBtn.setAttribute('data-scroll-handler', 'true');
      console.log('Added listener to query-button');
    }
  }
  
  // Set up button listeners
  setupButtonListeners();
  
  // Watch for DOM changes to catch dynamically added elements
  const bodyObserver = new MutationObserver(() => {
    setupButtonListeners();
  });
  
  // Start observing the body for changes
  bodyObserver.observe(document.body, { 
    childList: true, 
    subtree: true 
  });
});