mirror of
https://github.com/khoj-ai/khoj.git
synced 2024-11-23 23:48:56 +01:00
Add some better default states for no files found, prompt to search. Add link to search in the file search compnoent in side panel
This commit is contained in:
sabaimran
parent
662dffea3b
commit
7482797605
2 changed files with 98 additions and 8 deletions
|
|
@ -203,7 +203,7 @@ function FilesMenu(props: FilesMenuProps) {
|
|||
<Command>
|
||||
<CommandInput placeholder="Find file" />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
<CommandEmpty>No results found. <Link href="/search">Try advanced search</Link>.</CommandEmpty>
|
||||
<CommandGroup heading="Quick">
|
||||
<CommandItem
|
||||
onSelect={() => {
|
||||
|
|
|
|||
|
|
@ -3,14 +3,15 @@
|
|||
import { Input } from '@/components/ui/input';
|
||||
|
||||
import { useAuthenticatedData } from '../common/auth';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import SidePanel from '../components/sidePanel/chatHistorySidePanel';
|
||||
import NavMenu from '../components/navMenu/navMenu';
|
||||
import styles from './search.module.css';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { ArrowLeft, ArrowRight, Folder, FolderOpen, GithubLogo, LinkSimple, MagnifyingGlass, NoteBlank, NotionLogo } from '@phosphor-icons/react';
|
||||
import { ArrowLeft, ArrowRight, FileDashed, FileMagnifyingGlass, Folder, FolderOpen, GithubLogo, Lightbulb, LinkSimple, MagnifyingGlass, NoteBlank, NotionLogo } from '@phosphor-icons/react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface AdditionalData {
|
||||
file: string;
|
||||
|
|
@ -37,6 +38,25 @@ function getNoteTypeIcon(source: string) {
|
|||
return <NoteBlank className='text-muted-foreground' />;
|
||||
}
|
||||
|
||||
const naturalLanguageSearchQueryExamples = [
|
||||
"What does the paper say about climate change?",
|
||||
"Making a cappuccino at home",
|
||||
"Benefits of eating mangoes",
|
||||
"How to plan a wedding on a budget",
|
||||
"Appointment with Dr. Makinde on 12th August",
|
||||
"Class notes lecture 3 on quantum mechanics",
|
||||
"Painting concepts for acrylics",
|
||||
"Abstract from the paper attention is all you need",
|
||||
"Climbing Everest without oxygen",
|
||||
"Solving a rubik's cube in 30 seconds",
|
||||
"Facts about the planet Mars",
|
||||
"How to make a website using React",
|
||||
"Fish at the bottom of the ocean",
|
||||
"Fish farming Kenya 2021",
|
||||
"How to make a cake without an oven",
|
||||
"Installing a solar panel at home",
|
||||
]
|
||||
|
||||
interface NoteResultProps {
|
||||
note: SearchResult;
|
||||
setFocusSearchResult: (note: SearchResult) => void;
|
||||
|
|
@ -117,9 +137,12 @@ export default function Search() {
|
|||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [isMobileWidth, setIsMobileWidth] = useState(false);
|
||||
const [title, setTitle] = useState('Search');
|
||||
const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
|
||||
const [searchResults, setSearchResults] = useState<SearchResult[] | null>(null);
|
||||
const [searchResultsLoading, setSearchResultsLoading] = useState(false);
|
||||
const [focusSearchResult, setFocusSearchResult] = useState<SearchResult | null>(null);
|
||||
const [exampleQuery, setExampleQuery] = useState('');
|
||||
const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setIsMobileWidth(window.innerWidth < 786);
|
||||
|
|
@ -128,13 +151,15 @@ export default function Search() {
|
|||
setIsMobileWidth(window.innerWidth < 786);
|
||||
});
|
||||
|
||||
setExampleQuery(naturalLanguageSearchQueryExamples[Math.floor(Math.random() * naturalLanguageSearchQueryExamples.length)]);
|
||||
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setTitle(isMobileWidth ? '' : 'Search');
|
||||
}, [isMobileWidth]);
|
||||
|
||||
function search(query: string) {
|
||||
function search() {
|
||||
if (searchResultsLoading) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -158,6 +183,31 @@ 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]);
|
||||
|
||||
console.log('searchResults', searchResults);
|
||||
|
||||
return (
|
||||
|
|
@ -179,12 +229,13 @@ export default function Search() {
|
|||
<div className='flex justify-between items-center border-2 border-muted p-2 gap-4 rounded-lg'>
|
||||
<MagnifyingGlass className='inline m-2' />
|
||||
<Input
|
||||
autoFocus
|
||||
className='border-none'
|
||||
onChange={(e) => setSearchQuery(e.currentTarget.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && search(searchQuery)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && search()}
|
||||
type="search"
|
||||
placeholder="Search Documents" />
|
||||
<button className='px-4 rounded' onClick={() => search(searchQuery)}>
|
||||
<button className='px-4 rounded' onClick={() => search()}>
|
||||
Find
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -199,7 +250,7 @@ export default function Search() {
|
|||
</div>
|
||||
}
|
||||
{
|
||||
!focusSearchResult && searchResults.length > 0 &&
|
||||
!focusSearchResult && searchResults && searchResults.length > 0 &&
|
||||
<div className='mt-4'>
|
||||
<ScrollArea className="h-[80vh]">
|
||||
{
|
||||
|
|
@ -214,6 +265,45 @@ export default function Search() {
|
|||
</ScrollArea>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
searchResults == null &&
|
||||
<Card className='flex flex-col items-center justify-center border-none shadow-none'>
|
||||
<CardHeader className='flex flex-col items-center justify-center'>
|
||||
<CardDescription className='border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4'>
|
||||
<FileMagnifyingGlass weight='fill' className='text-muted-foreground h-10 w-10' />
|
||||
</CardDescription>
|
||||
<CardTitle className='text-center'>
|
||||
Search across your documents
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className='text-muted-foreground items-center justify-center text-center flex'>
|
||||
<Lightbulb className='inline mr-2' /> {exampleQuery}
|
||||
</CardContent>
|
||||
</Card>
|
||||
}
|
||||
{
|
||||
searchResults && searchResults.length === 0 &&
|
||||
<Card className='flex flex-col items-center justify-center border-none shadow-none'>
|
||||
<CardHeader className='flex flex-col items-center justify-center'>
|
||||
<CardDescription className='border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4'>
|
||||
<FileDashed weight='fill' className='text-muted-foreground h-10 w-10' />
|
||||
</CardDescription>
|
||||
<CardTitle className='text-center'>
|
||||
No documents found
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className='text-muted-foreground items-center justify-center text-center flex'>
|
||||
To use search, upload your docs to your account.
|
||||
</div>
|
||||
<Link href="https://docs.khoj.dev/data-sources/share_your_data" className='no-underline'>
|
||||
<div className='mt-4 text-center text-secondary-foreground bg-secondary w-fit m-auto p-2 rounded-lg'>
|
||||
Learn More
|
||||
</div>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue