Update script.js

script.js

@@ -1,22 +1,50 @@
+// Theme Toggle
+const themeSwitch = document.getElementById('theme-switch');
+themeSwitch.addEventListener('click', () => {
+    document.body.classList.toggle('light');
+    themeSwitch.textContent = document.body.classList.contains('light') ? '☀️' : '🌙';
+});
+
+// Query Submission
 document.getElementById('submit-query').addEventListener('click', () => {
-    const query = document.getElementById('query-input').value;
-    if (query.trim()) {
-        document.getElementById('response-output').innerHTML = `<p>Processing query: ${query}...</p>`;
-        document.getElementById('context-output').innerHTML = `<p>Retrieving relevant context...</p>`;
-        // Simulate API call (replace with actual backend integration)
-        setTimeout(() => {
-            document.getElementById('response-output').innerHTML = `<p>Sample response for: ${query}</p>`;
-            document.getElementById('context-output').innerHTML = `<p>Sample context retrieved for: ${query}</p>`;
-        }, 1000);
-    } else {
+    const query = document.getElementById('query-input').value.trim();
+    if (!query) {
         alert('Please enter a query.');
+        return;
     }
+
+    // Simulate loading state
+    const responseOutput = document.getElementById('response-output');
+    const contextOutput = document.getElementById('context-output');
+    responseOutput.innerHTML = '<p class="loading">Generating response...</p>';
+    contextOutput.innerHTML = '<p class="loading">Retrieving context...</p>';
+
+    // Simulate API response (replace with actual backend integration)
+    setTimeout(() => {
+        responseOutput.innerHTML = `<p>Response to: ${query}</p>`;
+        contextOutput.innerHTML = `<p>Context for: ${query}</p>`;
+    }, 1500);
 });
 
+// Apply Settings
 document.getElementById('apply-settings').addEventListener('click', () => {
     const model = document.getElementById('model-select').value;
     const topK = document.getElementById('top-k').value;
     const temperature = document.getElementById('temperature').value;
     const contextLength = document.getElementById('context-length').value;
-    alert(`Settings applied: Model=${model}, Top-K=${topK}, Temperature=${temperature}, Context Length=${contextLength}`);
+
+    // Simulate settings application
+    const settingsOutput = `Settings applied: Model=${model}, Top-K=${topK}, Temperature=${temperature}, Context Length=${contextLength}`;
+    console.log(settingsOutput);
+    alert(settingsOutput);
+});
+
+// Smooth scroll for better UX
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', (e) => {
+        e.preventDefault();
+        document.querySelector(anchor.getAttribute('href')).scrollIntoView({
+            behavior: 'smooth'
+        });
+    });
 });