feat: add autocomplete suggestions feature in search page #1030

Yash-1511 · 2025-01-05T12:01:56Z

File Path Autocompletion in Search

Description

Added file path autocompletion to enhance the search experience in Khoj. Users can now easily search for specific files by typing "file:" followed by the file name, with real-time suggestions appearing as they type.

Changes

Enhanced search UI with dropdown suggestions for file paths
Implemented debounced search to optimize API calls
Added keyboard (Enter) and mouse click support for selecting suggestions

Features

Type "file:" to trigger file path suggestions
Real-time filtering of suggestions as you type
Top 10 alphabetically sorted suggestions
Case-insensitive matching
Keyboard and mouse interaction support
Clear visual feedback with a dropdown UI

Screenshots

[Add screenshots showing the file path autocompletion in action]

Testing

Type "file:" in the search box
- Verify that suggestions dropdown appears
Type a partial file name
- Verify that suggestions are filtered in real-time
Select a suggestion using mouse click
- Verify that the search is performed with the selected file
Select a suggestion using Enter key
- Verify that the search is performed with the selected file
Type an invalid file prefix
- Verify that no suggestions are shown
Type without "file:" prefix
- Verify that no file suggestions appear

Dependencies

No new dependencies were added.

Notes

The feature is designed to be non-intrusive, only showing suggestions when explicitly typing "file:"
Suggestions are limited to 10 items to maintain performance and usability
The implementation follows Khoj's existing UI patterns and styling

debanjum

Hi @Yash-1511 , thanks for the useful PR. I've left some comments, feel free to ask any clarifications if required. Looking forward to get this PR in soon!

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

Yash-1511 · 2025-01-12T09:44:16Z

Hey @debanjum ,

I have made changes according to your review.

Changes Made

Allowed file: filter to be placed anywhere in the query (not just at the start)
Switched to using existing /api/content/computer endpoint for file listings
Implemented client-side file filtering for better performance
Added support for quoted file paths with spaces
Improved file path matching with case-insensitive partial matches

Technical Implementation

Client-side Optimization:
- Load all files once on page load using /api/content/computer
- Perform filtering and sorting on the client for instant suggestions
- Removed unnecessary API endpoint and network calls
Improved Query Handling:
- Added regex-based file filter detection: file:([^"\s]*|"[^"]*")?
- Support for both quoted and unquoted file paths
- Case-insensitive matching anywhere in file path
Code Cleanup:
- Removed /api/file-suggestions endpoint
- Eliminated debouncing for file suggestions
- Streamlined timeout handling

Examples

Now supports queries like:

/notes file:tasks.org
meeting file:"Project Notes/2024/January.md"
todo file:org

Testing

File suggestions appear for file: filter anywhere in query
Proper handling of file paths with spaces using quotes
Case-insensitive partial matching works as expected
Suggestions are limited to top 10 matches
Performance remains smooth with client-side filtering
Existing search functionality works unchanged
File suggestions load correctly on page load

Performance Impact

Reduced API calls by loading files once on page load
Faster suggestions due to client-side filtering
No impact on initial page load time

Related Issues

Closes #1024

debanjum

Hey @Yash-1511, I played around with your updates, changes look good! I just left one comment to improve the file filter dropdown

debanjum · 2025-01-20T19:44:17Z

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

+                                            value={searchQuery}
+                                        />
+                                        {showSuggestions && fileSuggestions.length > 0 && (
+                                            <div className="absolute z-10 w-full mt-1 bg-background border rounded-md shadow-lg">


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.

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.

sabaimran

Thanks for this, @Yash-1511 ! Definitely makes the search process easier for larger knowledge bases. I'll merge it, and we can handle any UI improvements on our end.

sabaimran · 2025-01-20T20:33:25Z

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

+                                            value={searchQuery}
+                                        />
+                                        {showSuggestions && fileSuggestions.length > 0 && (
+                                            <div className="absolute z-10 w-full mt-1 bg-background border rounded-md shadow-lg">


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.

feat: add autocomplete suggestions feature in search page

f306159

debanjum reviewed Jan 9, 2025

View reviewed changes

debanjum force-pushed the master branch from 97c3fed to 2069f57 Compare January 9, 2025 17:41

fix: review suggestions

27165b3

debanjum approved these changes Jan 20, 2025

View reviewed changes

sabaimran reviewed Jan 20, 2025

View reviewed changes

sabaimran approved these changes Jan 20, 2025

View reviewed changes

sabaimran merged commit b661d2c into khoj-ai:master Jan 20, 2025
2 of 3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add autocomplete suggestions feature in search page #1030

feat: add autocomplete suggestions feature in search page #1030

Yash-1511 commented Jan 5, 2025 •

edited by sabaimran

Loading

debanjum left a comment

Yash-1511 commented Jan 12, 2025

debanjum left a comment

debanjum Jan 20, 2025

sabaimran Jan 20, 2025

sabaimran left a comment

sabaimran Jan 20, 2025

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

feat: add autocomplete suggestions feature in search page #1030

feat: add autocomplete suggestions feature in search page #1030

Conversation

Yash-1511 commented Jan 5, 2025 • edited by sabaimran Loading

File Path Autocompletion in Search

Description

Changes

Features

Screenshots

Testing

Dependencies

Notes

debanjum left a comment

Choose a reason for hiding this comment

Yash-1511 commented Jan 12, 2025

Changes Made

Technical Implementation

Examples

Testing

Performance Impact

Related Issues

debanjum left a comment

Choose a reason for hiding this comment

debanjum Jan 20, 2025

Choose a reason for hiding this comment

sabaimran Jan 20, 2025

Choose a reason for hiding this comment

sabaimran left a comment

Choose a reason for hiding this comment

sabaimran Jan 20, 2025

Choose a reason for hiding this comment

Yash-1511 commented Jan 5, 2025 •

edited by sabaimran

Loading