klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-03 05:29:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sabaimran
2025-01-20 13:11:45 -08:00
parent 696551b686 b661d2cba7
commit edfed2d571
1 changed files with 104 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/interface/web/app/search/page.tsx
View File

@@ -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
autoFocus={true}
className="border-none pl-4 focus-visible:ring-transparent focus-visible:ring-offset-transparent"
onChange={(e) => setSearchQuery(e.currentTarget.value)}
onKeyDown={(e) => e.key === "Enter" && search()}
value={searchQuery}
type="search"
placeholder="Search Documents"
/>
<div className="relative flex-1">
<Input
autoFocus={true}
className="border-none pl-4 focus-visible:ring-transparent focus-visible:ring-offset-transparent"
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 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"}
>