From f306159a5aee3e31f46518b87bafcc2a3c552b0c Mon Sep 17 00:00:00 2001
From: Yash-1511 <yashp3020@gmail.com>
Date: Sun, 5 Jan 2025 17:30:00 +0530
Subject: [PATCH 1/2] feat: add autocomplete suggestions feature in search page

---
 src/interface/web/app/search/page.tsx | 98 +++++++++++++++++++++------
 src/khoj/routers/api.py               | 16 +++++
 2 files changed, 95 insertions(+), 19 deletions(-)

diff --git a/src/interface/web/app/search/page.tsx b/src/interface/web/app/search/page.tsx
index b700e5c11..1c099a7ae 100644
--- a/src/interface/web/app/search/page.tsx
+++ b/src/interface/web/app/search/page.tsx
@@ -173,7 +173,10 @@ export default function Search() {
     const [searchResultsLoading, setSearchResultsLoading] = useState(false);
     const [focusSearchResult, setFocusSearchResult] = useState<SearchResult | null>(null);
     const [exampleQuery, setExampleQuery] = useState("");
+    const [fileSuggestions, setFileSuggestions] = useState<string[]>([]);
+    const [showSuggestions, setShowSuggestions] = useState(false);
     const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const suggestionsTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
     const isMobileWidth = useIsMobileWidth();
 
@@ -205,29 +208,62 @@ export default function Search() {
             });
     }
 
-    useEffect(() => {
-        if (!searchQuery.trim()) {
+    function getFileSuggestions(query: string) {
+        // Get suggestions only if query starts with "file:"
+        if (!query.toLowerCase().startsWith("file:")) {
+            setFileSuggestions([]);
+            setShowSuggestions(false);
             return;
         }
 
-        setFocusSearchResult(null);
+        const filePrefix = query.substring(5).trim(); // Remove "file:" prefix
+        const apiUrl = `/api/file-suggestions?q=${encodeURIComponent(filePrefix)}`;
+        
+        fetch(apiUrl, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                setFileSuggestions(data);
+                setShowSuggestions(true);
+            })
+            .catch((error) => {
+                console.error("Error:", error);
+            });
+    }
 
+    function handleSearchInputChange(value: string) {
+        setSearchQuery(value);
+
+        // Clear previous timeouts
         if (searchTimeoutRef.current) {
             clearTimeout(searchTimeoutRef.current);
         }
+        if (suggestionsTimeoutRef.current) {
+            clearTimeout(suggestionsTimeoutRef.current);
+        }
 
-        if (searchQuery.trim()) {
+        // Get file suggestions immediately
+        suggestionsTimeoutRef.current = setTimeout(() => {
+            getFileSuggestions(value);
+        }, 100);
+
+        // Debounce search
+        if (value.trim()) {
             searchTimeoutRef.current = setTimeout(() => {
                 search();
-            }, 750); // 1000 milliseconds = 1 second
+            }, 750);
         }
+    }
 
-        return () => {
-            if (searchTimeoutRef.current) {
-                clearTimeout(searchTimeoutRef.current);
-            }
-        };
-    }, [searchQuery]);
+    function applySuggestion(suggestion: string) {
+        setSearchQuery(`file:${suggestion}`);
+        setShowSuggestions(false);
+        search();
+    }
 
     return (
         <SidebarProvider>
@@ -247,14 +283,38 @@ export default function Search() {
                         <div className="md:w-3/4 sm:w-full mx-auto pt-6 md:pt-8">
                             <div className="p-4 md:w-3/4 sm:w-full mx-auto">
                                 <div className="flex justify-between items-center border-2 border-muted p-1 gap-1 rounded-lg">
-                                    <Input
-                                        autoFocus={true}
-                                        className="border-none pl-4"
-                                        onChange={(e) => setSearchQuery(e.currentTarget.value)}
-                                        onKeyDown={(e) => e.key === "Enter" && search()}
-                                        type="search"
-                                        placeholder="Search Documents"
-                                    />
+                                    <div className="relative flex-1">
+                                        <Input
+                                            autoFocus={true}
+                                            className="border-none pl-4"
+                                            onChange={(e) => handleSearchInputChange(e.currentTarget.value)}
+                                            onKeyDown={(e) => {
+                                                if (e.key === "Enter") {
+                                                    if (showSuggestions && fileSuggestions.length > 0) {
+                                                        applySuggestion(fileSuggestions[0]);
+                                                    } else {
+                                                        search();
+                                                    }
+                                                }
+                                            }}
+                                            type="search"
+                                            placeholder="Search Documents (type 'file:' for file suggestions)"
+                                            value={searchQuery}
+                                        />
+                                        {showSuggestions && fileSuggestions.length > 0 && (
+                                            <div className="absolute z-10 w-full mt-1 bg-background border rounded-md shadow-lg">
+                                                {fileSuggestions.map((suggestion, index) => (
+                                                    <div
+                                                        key={index}
+                                                        className="px-4 py-2 hover:bg-muted cursor-pointer"
+                                                        onClick={() => applySuggestion(suggestion)}
+                                                    >
+                                                        {suggestion}
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        )}
+                                    </div>
                                     <button
                                         className="px-2 gap-2 inline-flex items-center rounded border-l border-gray-300 hover:text-gray-500"
                                         onClick={() => search()}
diff --git a/src/khoj/routers/api.py b/src/khoj/routers/api.py
index a29e993af..d5cb060db 100644
--- a/src/khoj/routers/api.py
+++ b/src/khoj/routers/api.py
@@ -757,3 +757,19 @@ def edit_job(
 
     # Return modified automation information as a JSON response
     return Response(content=json.dumps(automation_info), media_type="application/json", status_code=200)
+
+
+@api.get("/file-suggestions", response_class=Response)
+@requires(["authenticated"])
+def get_file_suggestions(request: Request, q: str = ""):
+    """Get file suggestions for autocompletion based on the query prefix."""
+    user = request.user.object
+    file_list = EntryAdapters.get_all_filenames_by_source(user, "computer")
+    
+    # Filter files based on query prefix
+    suggestions = [f for f in file_list if f.lower().startswith(q.lower())]
+    
+    # Sort suggestions alphabetically and limit to top 10
+    suggestions = sorted(suggestions)[:10]
+    
+    return Response(content=json.dumps(suggestions), media_type="application/json")

From 27165b3f4a956184cf8a99ec169e4bb14b6a2f27 Mon Sep 17 00:00:00 2001
From: Yash-1511 <yashp3020@gmail.com>
Date: Sun, 12 Jan 2025 15:12:14 +0530
Subject: [PATCH 2/2] fix: review suggestions

---
 src/interface/web/app/search/page.tsx | 94 ++++++++++++++-------------
 src/khoj/routers/api.py               | 16 -----
 2 files changed, 48 insertions(+), 62 deletions(-)

diff --git a/src/interface/web/app/search/page.tsx b/src/interface/web/app/search/page.tsx
index 1c099a7ae..902b96310 100644
--- a/src/interface/web/app/search/page.tsx
+++ b/src/interface/web/app/search/page.tsx
@@ -174,10 +174,9 @@ export default function Search() {
     const [focusSearchResult, setFocusSearchResult] = useState<SearchResult | null>(null);
     const [exampleQuery, setExampleQuery] = useState("");
     const [fileSuggestions, setFileSuggestions] = useState<string[]>([]);
+    const [allFiles, setAllFiles] = useState<string[]>([]);
     const [showSuggestions, setShowSuggestions] = useState(false);
     const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    const suggestionsTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
     const isMobileWidth = useIsMobileWidth();
 
     useEffect(() => {
@@ -186,70 +185,51 @@ export default function Search() {
                 Math.floor(Math.random() * naturalLanguageSearchQueryExamples.length)
             ],
         );
-    }, []);
 
-    function search() {
-        if (searchResultsLoading || !searchQuery.trim()) return;
-
-        const apiUrl = `/api/search?q=${encodeURIComponent(searchQuery)}&client=web`;
-        fetch(apiUrl, {
-            method: "GET",
+        // Load all files once on page load
+        fetch('/api/content/computer', {
+            method: 'GET',
             headers: {
-                "Content-Type": "application/json",
+                'Content-Type': 'application/json',
             },
         })
-            .then((response) => response.json())
-            .then((data) => {
-                setSearchResults(data);
-                setSearchResultsLoading(false);
-            })
-            .catch((error) => {
-                console.error("Error:", error);
-            });
-    }
+        .then(response => response.json())
+        .then(data => {
+            setAllFiles(data);
+        })
+        .catch(error => {
+            console.error('Error loading files:', error);
+        });
+    }, []);
 
     function getFileSuggestions(query: string) {
-        // Get suggestions only if query starts with "file:"
-        if (!query.toLowerCase().startsWith("file:")) {
+        const fileFilterMatch = query.match(/file:([^"\s]*|"[^"]*")?/);
+        if (!fileFilterMatch) {
             setFileSuggestions([]);
             setShowSuggestions(false);
             return;
         }
 
-        const filePrefix = query.substring(5).trim(); // Remove "file:" prefix
-        const apiUrl = `/api/file-suggestions?q=${encodeURIComponent(filePrefix)}`;
-        
-        fetch(apiUrl, {
-            method: "GET",
-            headers: {
-                "Content-Type": "application/json",
-            },
-        })
-            .then((response) => response.json())
-            .then((data) => {
-                setFileSuggestions(data);
-                setShowSuggestions(true);
-            })
-            .catch((error) => {
-                console.error("Error:", error);
-            });
+        const filePrefix = fileFilterMatch[1]?.replace(/^"|"$/g, '').trim() || '';
+        const filteredSuggestions = allFiles
+            .filter(file => file.toLowerCase().includes(filePrefix.toLowerCase()))
+            .sort()
+            .slice(0, 10);
+
+        setFileSuggestions(filteredSuggestions);
+        setShowSuggestions(true);
     }
 
     function handleSearchInputChange(value: string) {
         setSearchQuery(value);
 
-        // Clear previous timeouts
+        // Clear previous search timeout
         if (searchTimeoutRef.current) {
             clearTimeout(searchTimeoutRef.current);
         }
-        if (suggestionsTimeoutRef.current) {
-            clearTimeout(suggestionsTimeoutRef.current);
-        }
 
         // Get file suggestions immediately
-        suggestionsTimeoutRef.current = setTimeout(() => {
-            getFileSuggestions(value);
-        }, 100);
+        getFileSuggestions(value);
 
         // Debounce search
         if (value.trim()) {
@@ -260,11 +240,33 @@ export default function Search() {
     }
 
     function applySuggestion(suggestion: string) {
-        setSearchQuery(`file:${suggestion}`);
+        // Replace the file: filter with the selected suggestion
+        const newQuery = searchQuery.replace(/file:([^"\s]*|"[^"]*")?/, `file:"${suggestion}"`);
+        setSearchQuery(newQuery);
         setShowSuggestions(false);
         search();
     }
 
+    function search() {
+        if (searchResultsLoading || !searchQuery.trim()) return;
+
+        const apiUrl = `/api/search?q=${encodeURIComponent(searchQuery)}&client=web`;
+        fetch(apiUrl, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                setSearchResults(data);
+                setSearchResultsLoading(false);
+            })
+            .catch((error) => {
+                console.error("Error:", error);
+            });
+    }
+
     return (
         <SidebarProvider>
             <AppSidebar conversationId={""} />
diff --git a/src/khoj/routers/api.py b/src/khoj/routers/api.py
index d5cb060db..a29e993af 100644
--- a/src/khoj/routers/api.py
+++ b/src/khoj/routers/api.py
@@ -757,19 +757,3 @@ def edit_job(
 
     # Return modified automation information as a JSON response
     return Response(content=json.dumps(automation_info), media_type="application/json", status_code=200)
-
-
-@api.get("/file-suggestions", response_class=Response)
-@requires(["authenticated"])
-def get_file_suggestions(request: Request, q: str = ""):
-    """Get file suggestions for autocompletion based on the query prefix."""
-    user = request.user.object
-    file_list = EntryAdapters.get_all_filenames_by_source(user, "computer")
-    
-    # Filter files based on query prefix
-    suggestions = [f for f in file_list if f.lower().startswith(q.lower())]
-    
-    # Sort suggestions alphabetically and limit to top 10
-    suggestions = sorted(suggestions)[:10]
-    
-    return Response(content=json.dumps(suggestions), media_type="application/json")