Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add autocomplete suggestions feature in search page #1030

Merged
merged 2 commits into from
Jan 20, 2025
Merged

feat: add autocomplete suggestions feature in search page #1030

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f306159
feat: add autocomplete suggestions feature in search page
Yash-1511 Jan 5, 2025
27165b3
fix: review suggestions
Yash-1511 Jan 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 95 additions & 33 deletions src/interface/web/app/search/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,8 +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 [allFiles, setAllFiles] = useState<string[]>([]);
const [showSuggestions, setShowSuggestions] = useState(false);
const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);

const isMobileWidth = useIsMobileWidth();

useEffect(() => {
Expand All @@ -183,8 +185,68 @@ export default function Search() {
Math.floor(Math.random() * naturalLanguageSearchQueryExamples.length)
],
);

// 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);

// 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;

Expand All @@ -205,30 +267,6 @@ export default function Search() {
});
}

useEffect(() => {
if (!searchQuery.trim()) {
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]);

return (
<SidebarProvider>
<AppSidebar conversationId={""} />
Expand All @@ -247,14 +285,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">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The options dropdown expands to the right edge of the screen, which feels a bit too wide in my opinion.

Maybe we can use the same Command and Popover dropdown UI components here? You can check how the slash commands uses them in chatInputArea.tsx.

khoj/src/interface/web/app/components/chatInputArea/chatInputArea.tsx

Lines 497 to 501 in 8fe08ee

{showCommandList && (
<div className="flex justify-center text-center">
<Popover open={showCommandList} onOpenChange={setShowCommandList}>
<PopoverTrigger className="flex justify-center text-center"></PopoverTrigger>
<PopoverContent

If that is too annoying to use, it may still be a good idea to restrict width of the file filter dropdown to not expand to the right edge of the screen.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wasn't able to reproduce the bug you're mentioning. In my view, the suggestions are only as wide as the input box. Let's sync up about it separately.

{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()}
Expand Down
Loading