Merge branch 'master' of github.com:khoj-ai/khoj into features/add-a-knowledge-base-page

src/interface/web/app/search/page.tsx

@@ -469,6 +469,9 @@ export default function Search() {
     const [files, setFiles] = useState<FileObject[]>([]);
     const [error, setError] = useState<string | null>(null);
     const [fileObjectsLoading, setFileObjectsLoading] = useState(true);
+    const [fileSuggestions, setFileSuggestions] = useState<string[]>([]);
+    const [allFiles, setAllFiles] = useState<string[]>([]);
+    const [showSuggestions, setShowSuggestions] = useState(false);
     const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const [selectedFile, setSelectedFile] = useState<string | null>(null);
     const [selectedFileFullText, setSelectedFileFullText] = useState<string | null>(null);
@@ -481,6 +484,74 @@ export default function Search() {
 
     const isMobileWidth = useIsMobileWidth();
 
+    useEffect(() => {
+        // Load all files once on page load
+        fetch('/api/content/computer', {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        })
+            .then(response => response.json())
+            .then(data => {
+                setAllFiles(data);
+            })
+            .catch(error => {
+                console.error('Error loading files:', error);
+            });
+    }, []);
+
+    function getFileSuggestions(query: string) {
+        const fileFilterMatch = query.match(/file:([^"\s]*|"[^"]*")?/);
+        if (!fileFilterMatch) {
+            setFileSuggestions([]);
+            setShowSuggestions(false);
+            return;
+        }
+
+        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);
+
+        if (!value.trim()) {
+            setSearchResults(null);
+            setShowSuggestions(false);
+            return;
+        }
+
+        // Clear previous search timeout
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+
+        // Get file suggestions immediately
+        getFileSuggestions(value);
+
+        // Debounce search
+        if (value.trim()) {
+            searchTimeoutRef.current = setTimeout(() => {
+                search();
+            }, 750);
+        }
+    }
+
+    function applySuggestion(suggestion: string) {
+        // 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;
 
@@ -556,31 +627,6 @@ export default function Search() {
         window.URL.revokeObjectURL(url);
     };
 
-    useEffect(() => {
-        if (!searchQuery.trim()) {
-            setSearchResults(null);
-            return;
-        }
-
-        setFocusSearchResult(null);
-
-        if (searchTimeoutRef.current) {
-            clearTimeout(searchTimeoutRef.current);
-        }
-
-        if (searchQuery.trim()) {
-            searchTimeoutRef.current = setTimeout(() => {
-                search();
-            }, 750); // 1000 milliseconds = 1 second
-        }
-
-        return () => {
-            if (searchTimeoutRef.current) {
-                clearTimeout(searchTimeoutRef.current);
-            }
-        };
-    }, [searchQuery]);
-
     useEffect(() => {
         if (selectedFile) {
             fetchSpecificFile(selectedFile);
@@ -645,15 +691,38 @@ export default function Search() {
                         <div className="md:w-5/6 sm:w-full mx-auto pt-6 md:pt-8">
                             <div className="p-4 w-full mx-auto">
                                 <div className="flex justify-between items-center border-2 border-muted p-1 gap-1 rounded-lg">
-                                    <Input
+                                    <div className="relative flex-1">
-                                        autoFocus={true}
+                                        <Input
-                                        className="border-none pl-4 focus-visible:ring-transparent focus-visible:ring-offset-transparent"
+                                            autoFocus={true}
-                                        onChange={(e) => setSearchQuery(e.currentTarget.value)}
+                                            className="border-none pl-4 focus-visible:ring-transparent focus-visible:ring-offset-transparent"
-                                        onKeyDown={(e) => e.key === "Enter" && search()}
+                                            onChange={(e) => handleSearchInputChange(e.currentTarget.value)}
-                                        value={searchQuery}
+                                            onKeyDown={(e) => {
-                                        type="search"
+                                                if (e.key === "Enter") {
-                                        placeholder="Search Documents"
+                                                    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 rounded-none items-center border-l border-gray-300 hover:text-gray-500"
                                         variant={"ghost"}
@@ -694,7 +763,7 @@ export default function Search() {
                                     searchResults.length > 0 && (
                                         <div className="mt-4 max-w-[92vw] break-all">
                                             <Button
-                                                onClick={() => setSearchQuery("")}
+                                                onClick={() => handleSearchInputChange("")}
                                                 className="mb-4"
                                                 variant={"outline"}
                                             >