add js file to handle scrolling (#18)

- add js file to handle scrolling (b7a0e76744e877b0bd849acd1cc605dc9a037c24)


Co-authored-by: Kai <kai-aizip@users.noreply.huggingface.co>

static/js/scroll_helpers.js

@@ -0,0 +1,51 @@
+/**
+ * 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 
+  });
+});