feat/manual-max-file-size-input: Add option to manually input max file size

src/server/query_processor.py

@@ -1,4 +1,4 @@
-""" Process a query by parsing input, cloning a repository, and generating a summary. """
+"""Process a query by parsing input, cloning a repository, and generating a summary."""
 
 from functools import partial
 
@@ -19,6 +19,8 @@ async def process_query(
     pattern_type: str = "exclude",
     pattern: str = "",
     is_index: bool = False,
+    is_file_size_manual: bool = False,
+    size_unit: str = "kb",
 ) -> _TemplateResponse:
     """
     Process a query by parsing input, cloning a repository, and generating a summary.
@@ -40,6 +42,10 @@ async def process_query(
         Pattern to include or exclude in the query, depending on the pattern type.
     is_index : bool
         Flag indicating whether the request is for the index page (default is False).
+    is_file_size_manual: bool
+        Flag indicating if the file size provided is via the manual input (default to False).
+    size_unit: str
+        The unit for the manual file size input ('kb' or 'mb'), by default 'kb'.
 
     Returns
     -------
@@ -62,7 +68,7 @@ async def process_query(
 
     template = "index.jinja" if is_index else "git.jinja"
     template_response = partial(templates.TemplateResponse, name=template)
-    max_file_size = log_slider_to_size(slider_position)
+    max_file_size = slider_position if is_file_size_manual else log_slider_to_size(slider_position)
 
     context = {
         "request": request,
@@ -71,6 +77,9 @@ async def process_query(
         "default_file_size": slider_position,
         "pattern_type": pattern_type,
         "pattern": pattern,
+        "use_manual_input": "true" if is_file_size_manual else "false",
+        "max_file_size_manual": slider_position if is_file_size_manual else None,
+        "size_unit": size_unit,
     }
 
     try:

src/server/routers/index.py

@@ -1,4 +1,6 @@
-""" This module defines the FastAPI router for the home page of the application. """
+"""This module defines the FastAPI router for the home page of the application."""
+
+from typing import Optional
 
 from fastapi import APIRouter, Form, Request
 from fastapi.responses import HTMLResponse
@@ -35,6 +37,9 @@ async def home(request: Request) -> HTMLResponse:
             "request": request,
             "examples": EXAMPLE_REPOS,
             "default_file_size": 243,
+            "default_file_size_manual": 50,
+            "use_manual_input": "false",
+            "size_unit": "kb",
         },
     )
 
@@ -45,6 +50,9 @@ async def index_post(
     request: Request,
     input_text: str = Form(...),
     max_file_size: int = Form(...),
+    max_file_size_manual: Optional[str] = Form(None),
+    use_manual_input: bool = Form(...),
+    size_unit: str = Form("kb"),
     pattern_type: str = Form(...),
     pattern: str = Form(...),
 ) -> HTMLResponse:
@@ -63,6 +71,12 @@ async def index_post(
         The input text provided by the user for processing, by default taken from the form.
     max_file_size : int
         The maximum allowed file size for the input, specified by the user.
+    max_file_size_manual : Optional[str], optional
+        The manually entered file size, by default None.
+    use_manual_input : bool
+        Whether to use the manual input instead of the slider, by default False.
+    size_unit : str
+        The unit for the manual file size input ('kb' or 'mb'), by default 'kb'.
     pattern_type : str
         The type of pattern used for the query, specified by the user.
     pattern : str
@@ -74,11 +88,22 @@ async def index_post(
         An HTML response containing the results of processing the form input and query logic,
         which will be rendered and returned to the user.
     """
+    # Determine the file size based on the input method
+    if use_manual_input and max_file_size_manual:
+        # Convert the manual input to bytes based on the size unit
+        size_value = int(max_file_size_manual)
+        if size_unit.lower() == "mb":
+            max_file_size = size_value * 1024 * 1024  # Convert MB to bytes
+        else:  # Default to KB
+            max_file_size = size_value * 1024  # Convert KB to bytes
+
     return await process_query(
         request,
         input_text,
         max_file_size,
         pattern_type,
         pattern,
         is_index=True,
+        is_file_size_manual=use_manual_input,
+        size_unit=size_unit,
     )

src/server/templates/components/git_form.jinja

@@ -1,14 +1,30 @@
 <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const checkbox = document.getElementById('use_manual_input');
+        const hiddenInput = document.getElementById('file_size_manual');
+        const sizeUnitInput = document.getElementById('size_unit_input');
+
+        if (sizeUnitInput.value === 'mb') {
+            document.getElementById('size-mb').checked = true;
+        } else {
+            document.getElementById('size-kb').checked = true;
+        }
+
+        if (hiddenInput.value === "true") {
+            checkbox.checked = true;
+        }
+
+        changeFilesizeInputType(checkbox);
+    });
+
     function changePattern(element) {
-        console.log("Pattern changed", element.value);
         let patternType = element.value;
         const files = document.getElementsByName("tree-line");
 
         Array.from(files).forEach((element) => {
             if (element.textContent.includes("Directory structure:")) {
                 return;
             }
-
             element.classList.toggle('line-through');
             element.classList.toggle('text-gray-500');
             element.classList.toggle('hover:text-inherit');
@@ -17,9 +33,62 @@
             element.classList.toggle('hover:text-gray-500');
         });
     }
+
+    function changeFilesizeInputType(element) {
+        const hiddenInput = document.getElementById('file_size_manual');
+        const sliderContainer = document.getElementById('slider_container');
+        const manualSizeInput = document.getElementById('manual_size_input_container');
+        const manualSizeValueInput = document.getElementById('max_file_size_manual_input');
+        const hiddenSizeInput = document.getElementById('max_file_size_manual');
+        const sizeUnitInput = document.getElementById('size_unit_input');
+
+        hiddenInput.value = element.checked ? "true" : "false";
+
+        if (element.checked) {
+            sliderContainer.style.display = "none";
+            manualSizeInput.style.display = "flex";
+            const sizeUnit = sizeUnitInput.value;
+            const maxValue = sizeUnit === 'kb' ? 100 * 1024 : 100;
+            manualSizeValueInput.max = maxValue;
+            if (parseInt(manualSizeValueInput.value) > maxValue) {
+                manualSizeValueInput.value = maxValue;
+            }
+            hiddenSizeInput.value = manualSizeValueInput.value || "1024";
+        } else {
+            manualSizeInput.style.display = "none";
+            sliderContainer.style.display = "flex";
+            sliderContainer.style.flexDirection = "column";
+
+            const sliderValue = document.getElementById('file_size').value;
+            hiddenSizeInput.value = sliderValue;
+        }
+    }
+
+    function updateManualSizeValue(element) {
+        const hiddenSizeInput = document.getElementById('max_file_size_manual');
+        hiddenSizeInput.value = element.value || "1024";
+    }
+
+    function updateSizeUnit(element) {
+        const hiddenSizeUnitInput = document.getElementById('size_unit_input');
+        const hiddenSizeInput = document.getElementById('max_file_size_manual');
+        const manualSizeValueInput = document.getElementById('max_file_size_manual_input');
+        const sizeUnit = element.value;
+        const currentValue = parseInt(manualSizeValueInput.value);
+
+        hiddenSizeUnitInput.value = sizeUnit;
+
+        const maxValue = sizeUnit === 'kb' ? 100 * 1024 : 100;
+        manualSizeValueInput.max = maxValue;
+
+        if (sizeUnit === 'mb' && currentValue > 100) {
+            manualSizeValueInput.value = 100;
+            hiddenSizeInput.value = 100;
+        }
+    }
 </script>
 <div class="relative">
-    <div class="w-full h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
+    <div class="w-full lg:h-[90%] sm:h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
     <div class="rounded-xl relative z-20 pl-8 sm:pl-10 pr-8 sm:pr-16 py-8 border-[3px] border-gray-900 bg-[#fff4da]">
         <img src="https://cdn.devdojo.com/images/january2023/shape-1.png"
              class="absolute md:block hidden left-0 h-[4.5rem] w-[4.5rem] bottom-0 -translate-x-full ml-3">
@@ -43,10 +112,22 @@
                     Ingest
                 </button>
             </div>
+            <input type="hidden"
+                   id="file_size_manual"
+                   name="use_manual_input"
+                   value="{{ use_manual_input|default('false') }}">
+            <input type="hidden"
+                   id="max_file_size_manual"
+                   name="max_file_size_manual"
+                   value="{{ max_file_size_manual }}">
+            <input type="hidden"
+                   id="size_unit_input"
+                   name="size_unit"
+                   value="{{ size_unit|default('kb') }}">
             <input type="hidden" name="pattern_type" value="exclude">
             <input type="hidden" name="pattern" value="">
         </form>
-        <div class="mt-4 relative z-20 flex flex-wrap gap-4 items-start">
+        <div class="mt-4 relative z-20 flex flex-wrap gap-4 items-center">
             <!-- Pattern selector -->
             <div class="w-[200px] sm:w-[250px] mr-9 mt-4">
                 <div class="relative">
@@ -83,18 +164,69 @@
                     </div>
                 </div>
             </div>
-            <div class="w-[200px] sm:w-[200px] mt-3">
-                <label for="file_size" class="block text-gray-700 mb-1">
-                    Include files under: <span id="size_value" class="font-bold">50kb</span>
-                </label>
-                <input type="range"
-                       id="file_size"
-                       name="max_file_size"
-                       min="0"
-                       max="500"
-                       required
-                       value="{{ default_file_size }}"
-                       class="w-full h-3 bg-[#FAFAFA] bg-no-repeat bg-[length:50%_100%] bg-[#ebdbb7] appearance-none border-[3px] border-gray-900 rounded-sm focus:outline-none bg-gradient-to-r from-[#FE4A60] to-[#FE4A60] [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-7 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-solid [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-gray-900 [&::-webkit-slider-thumb]:shadow-[3px_3px_0_#000]  ">
+            <div class="flex items-center gap-4 h-[40px]">
+                <div class="mt-4">
+                    <label class="flex flex-col items-center cursor-pointer">
+                        <input type="checkbox"
+                               id="use_manual_input"
+                               name="use_manual_input"
+                               class="sr-only peer w-12"
+                               onchange="changeFilesizeInputType(this)">
+                        <div class="relative w-12 h-6 bg-[#ebdbb7] peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-[#FE4A60]/30 rounded-full peer border-[2px] border-gray-900 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-5 after:transition-all peer-checked:bg-[#FE4A60]">
+                        </div>
+                        <p class="ms-1 text-xs font-medium text-gray-900">Manual</p>
+                    </label>
+                </div>
+                <div id="slider_container" class="w-[200px] sm:w-[200px] mt-3">
+                    <label for="file_size" class="block text-gray-700 mb-1">
+                        Include files under: <span id="size_value" class="font-bold">50kb</span>
+                    </label>
+                    <input type="range"
+                           id="file_size"
+                           name="max_file_size"
+                           min="0"
+                           max="500"
+                           required
+                           value="{{ default_file_size }}"
+                           class="w-full h-3 bg-[#FAFAFA] bg-no-repeat bg-[length:50%_100%] bg-[#ebdbb7] appearance-none border-[3px] border-gray-900 rounded-sm focus:outline-none bg-gradient-to-r from-[#FE4A60] to-[#FE4A60] [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-7 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-solid [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-gray-900 [&::-webkit-slider-thumb]:shadow-[3px_3px_0_#000]">
+                </div>
+                <div id="manual_size_input_container" class="mt-3 flex gap-2">
+                    <div>
+                        <label for="max_file_size_manual_input" class="block text-gray-700 mb-1">Include files under:</label>
+                        <input type="number"
+                               id="max_file_size_manual_input"
+                               name="max_file_size_manual"
+                               min="1"
+                               max="{{ '102400' if size_unit == 'kb' else '100' }}"
+                               value="{{ default_file_size_manual }}"
+                               class="lg:w-[150px] sm:w-[100px] border-[3px] border-gray-900 rounded-sm focus:outline-none bg-[#ebdbb7] appearance-none indent-2"
+                               style="-webkit-appearance: none;
+                                      color: #333"
+                               onchange="updateManualSizeValue(this)">
+                    </div>
+                    <div class="flex flex-col justify-end mb-1">
+                        <div class="flex items-center">
+                            <input id="size-kb"
+                                   type="radio"
+                                   value="kb"
+                                   name="size_unit"
+                                   class="w-4 h-4"
+                                   {% if size_unit == 'kb' %}checked{% endif %}
+                                   onchange="updateSizeUnit(this)">
+                            <label for="size-kb" class="ms-2 text-sm font-medium text-gray-900">KB</label>
+                        </div>
+                        <div class="flex items-center mt-1">
+                            <input id="size-mb"
+                                   type="radio"
+                                   value="mb"
+                                   name="size_unit"
+                                   class="w-4 h-4 text-[#FE4A60] bg-[#FE4A60] border-[#FE4A60] focus:ring-[#FE4A60]"
+                                   {% if size_unit == 'mb' %}checked{% endif %}
+                                   onchange="updateSizeUnit(this)">
+                            <label for="size-mb" class="ms-2 text-sm font-medium text-gray-900">MB</label>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         {% if show_examples %}
@@ -112,4 +244,3 @@
             </div>
         {% endif %}
     </div>
-</div>