Move results count to settings page on web. Use it for search & chat

- Before
  Only the search interface had the results count configuration option

- After
  - The results count is set on the settings page instead of the
    search page
  - Both search and chat can use the configured results count instead
    of just search

src/khoj/interface/web/chat.html

@@ -51,6 +51,7 @@
         function chat() {
             // Extract required fields for search from form
             let query = document.getElementById("chat-input").value.trim();
+            let results_count = localStorage.getItem("khojResultsCount");
             console.log(`Query: ${query}`);
 
             // Short circuit on empty query
@@ -62,7 +63,7 @@
             document.getElementById("chat-input").value = "";
 
             // Generate backend API URL to execute query
-            let url = `/api/chat?q=${encodeURIComponent(query)}&client=web`;
+            let url = `/api/chat?q=${encodeURIComponent(query)}&n=${results_count}&client=web`;
 
             let chat_body = document.getElementById("chat-body");
             let new_response = document.createElement("div");

src/khoj/interface/web/config.html

@@ -169,6 +169,10 @@
         </div>
     </div>
     <div class="section">
+        <div id="results-count">
+            <label for="results-count-slider">Results Count: <span id="results-count-value">5</span></label>
+            <input type="range" id="results-count-slider" name="results-count-slider" min="1" max="10" step="1" value="5">
+        </div>
         <div id="status" style="display: none;"></div>
         <button id="configure" type="submit">⚙️ Configure</button>
         <button id="reinitialize" type="submit">🔄 Reinitialize</button>
@@ -276,5 +280,25 @@
             reinitialize.innerHTML = "🔄 Reinitialize";
         });
     });
+
+    // Setup the results count slider
+    const resultsCountSlider = document.getElementById('results-count-slider');
+    const resultsCountValue = document.getElementById('results-count-value');
+
+    // Set the initial value of the slider
+    resultsCountValue.textContent = resultsCountSlider.value;
+
+    // Store the slider value in localStorage when it changes
+    resultsCountSlider.addEventListener('input', () => {
+        resultsCountValue.textContent = resultsCountSlider.value;
+        localStorage.setItem('khojResultsCount', resultsCountSlider.value);
+    });
+
+    // Get the slider value from localStorage on page load
+    const storedResultsCount = localStorage.getItem('khojResultsCount');
+    if (storedResultsCount) {
+        resultsCountSlider.value = storedResultsCount;
+        resultsCountValue.textContent = storedResultsCount;
+    }
 </script>
 {% endblock %}

src/khoj/interface/web/index.html

@@ -112,8 +112,8 @@
             // Extract required fields for search from form
             query = document.getElementById("query").value.trim();
             type = document.getElementById("type").value;
-            results_count = document.getElementById("results-count").value || 6;
+            results_count = localStorage.getItem("khojResultsCount");
-            console.log(`Query: ${query}, Type: ${type}`);
+            console.log(`Query: ${query}, Type: ${type}, Results Count: ${results_count}`);
 
             // Short circuit on empty query
             if (query.length === 0)
@@ -191,12 +191,6 @@
             window.history.pushState({}, "", url.href);
         }
 
-        function setCountFieldInUrl(results_count) {
-            var url = new URL(window.location.href);
-            url.searchParams.set("n", results_count.value);
-            window.history.pushState({}, "", url.href);
-        }
-
         function setQueryFieldInUrl(query) {
             var url = new URL(window.location.href);
             url.searchParams.set("q", query);
@@ -207,11 +201,6 @@
             // Dynamically populate type dropdown based on enabled content types and type passed as URL query parameter
             populate_type_dropdown();
 
-            // Set results count field with value passed in URL query parameters, if any.
-            var results_count = new URLSearchParams(window.location.search).get("n");
-            if (results_count)
-                document.getElementById("results-count").value = results_count;
-
             // Fill query field with value passed in URL query parameters, if any.
             var query_via_url = new URLSearchParams(window.location.search).get("q");
             if (query_via_url)
@@ -256,9 +245,6 @@
         <div id="options">
             <!--Add Dropdown to Select Query Type -->
             <select id="type" class="option" onchange="setTypeFieldInUrl(this)"></select>
-
-            <!--Add Results Count Input To Set Results Count -->
-            <input type="number" id="results-count" min="1" max="100" value="6" placeholder="results count" onchange="setCountFieldInUrl(this)">
         </div>
 
         <!-- Section to Render Results -->
@@ -304,7 +290,7 @@
         #options {
             padding: 0;
             display: grid;
-            grid-template-columns: 1fr minmax(70px, 0.5fr);
+            grid-template-columns: 1fr;
         }
         #options > * {
             padding: 15px;
@@ -315,9 +301,6 @@
         .option:hover {
             box-shadow: 0 0 11px #aaa;
         }
-        #options > select {
-            margin-right: 10px;
-        }
         #options > button {
             margin-right: 10px;
         }