mirror of
https://github.com/khoaliber/khoj.git
synced 2026-03-06 05:39:12 +00:00
340 lines
14 KiB
TypeScript
340 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
import { useAuthenticatedData } from "../common/auth";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import SidePanel from "../components/sidePanel/chatHistorySidePanel";
|
|
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,
|
|
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;
|
|
source: string;
|
|
compiled: string;
|
|
heading: string;
|
|
}
|
|
|
|
interface SearchResult {
|
|
type: string;
|
|
additional: AdditionalData;
|
|
entry: string;
|
|
score: number;
|
|
"corpus-id": string;
|
|
}
|
|
|
|
function getNoteTypeIcon(source: string) {
|
|
if (source === "notion") {
|
|
return <NotionLogo className="text-muted-foreground" />;
|
|
}
|
|
if (source === "github") {
|
|
return <GithubLogo className="text-muted-foreground" />;
|
|
}
|
|
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;
|
|
}
|
|
|
|
function Note(props: NoteResultProps) {
|
|
const note = props.note;
|
|
const isFileNameURL = (note.additional.file || "").startsWith("http");
|
|
const fileName = isFileNameURL
|
|
? note.additional.heading
|
|
: note.additional.file.split("/").pop();
|
|
|
|
return (
|
|
<Card className="bg-secondary h-full shadow-sm rounded-lg bg-gradient-to-b from-background to-slate-50 dark:to-gray-950 border border-muted mb-4">
|
|
<CardHeader>
|
|
<CardDescription className="p-1 border-muted border w-fit rounded-lg mb-2">
|
|
{getNoteTypeIcon(note.additional.source)}
|
|
</CardDescription>
|
|
<CardTitle>{fileName}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="line-clamp-4 text-muted-foreground">{note.entry}</div>
|
|
<Button
|
|
onClick={() => props.setFocusSearchResult(note)}
|
|
variant={"ghost"}
|
|
className="p-0 mt-2 text-orange-400 hover:bg-inherit"
|
|
>
|
|
See content
|
|
<ArrowRight className="inline ml-2" />
|
|
</Button>
|
|
</CardContent>
|
|
<CardFooter>
|
|
{isFileNameURL ? (
|
|
<a
|
|
href={note.additional.file}
|
|
target="_blank"
|
|
className="underline text-sm bg-muted p-1 rounded-lg text-muted-foreground"
|
|
>
|
|
<LinkSimple className="inline m-2" />
|
|
{note.additional.file}
|
|
</a>
|
|
) : (
|
|
<div className="bg-muted p-1 text-sm rounded-lg text-muted-foreground">
|
|
<FolderOpen className="inline m-2" />
|
|
{note.additional.file}
|
|
</div>
|
|
)}
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function focusNote(note: SearchResult) {
|
|
const isFileNameURL = (note.additional.file || "").startsWith("http");
|
|
const fileName = isFileNameURL
|
|
? note.additional.heading
|
|
: note.additional.file.split("/").pop();
|
|
return (
|
|
<Card className="bg-secondary h-full shadow-sm rounded-lg bg-gradient-to-b from-background to-slate-50 dark:to-gray-950 border border-muted mb-4">
|
|
<CardHeader>
|
|
<CardTitle>{fileName}</CardTitle>
|
|
</CardHeader>
|
|
<CardFooter>
|
|
{isFileNameURL ? (
|
|
<a
|
|
href={note.additional.file}
|
|
target="_blank"
|
|
className="underline text-sm bg-muted p-3 rounded-lg text-muted-foreground flex items-center gap-2"
|
|
>
|
|
<LinkSimple className="inline" />
|
|
{note.additional.file}
|
|
</a>
|
|
) : (
|
|
<div className="bg-muted p-3 text-sm rounded-lg text-muted-foreground flex items-center gap-2">
|
|
<FolderOpen className="inline" />
|
|
{note.additional.file}
|
|
</div>
|
|
)}
|
|
</CardFooter>
|
|
<CardContent>
|
|
<div className="text-m">{note.entry}</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default function Search() {
|
|
const authenticatedData = useAuthenticatedData();
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [isMobileWidth, setIsMobileWidth] = useState(false);
|
|
const [title, setTitle] = useState("Search");
|
|
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);
|
|
|
|
window.addEventListener("resize", () => {
|
|
setIsMobileWidth(window.innerWidth < 786);
|
|
});
|
|
|
|
setExampleQuery(
|
|
naturalLanguageSearchQueryExamples[
|
|
Math.floor(Math.random() * naturalLanguageSearchQueryExamples.length)
|
|
],
|
|
);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setTitle(isMobileWidth ? "" : "Search");
|
|
}, [isMobileWidth]);
|
|
|
|
function search() {
|
|
if (searchResultsLoading || !searchQuery.trim()) return;
|
|
|
|
const apiUrl = `/api/search?q=${encodeURIComponent(searchQuery)}&client=web`;
|
|
fetch(apiUrl, {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
setSearchResults(data);
|
|
setSearchResultsLoading(false);
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error:", error);
|
|
});
|
|
}
|
|
|
|
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 (
|
|
<div>
|
|
<div className={`h-full ${styles.sidePanel}`}>
|
|
<SidePanel conversationId={null} uploadedFiles={[]} isMobileWidth={isMobileWidth} />
|
|
</div>
|
|
<div className={`${styles.searchLayout}`}>
|
|
<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-2 gap-4 rounded-lg">
|
|
<MagnifyingGlass className="inline m-2 h-4 w-4" />
|
|
<Input
|
|
autoFocus={true}
|
|
className="border-none"
|
|
onChange={(e) => setSearchQuery(e.currentTarget.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && search()}
|
|
type="search"
|
|
placeholder="Search Documents"
|
|
/>
|
|
<button className="px-4 rounded" onClick={() => search()}>
|
|
Find
|
|
</button>
|
|
</div>
|
|
{focusSearchResult && (
|
|
<div className="mt-4">
|
|
<Button
|
|
onClick={() => setFocusSearchResult(null)}
|
|
className="mb-4"
|
|
variant={"outline"}
|
|
>
|
|
<ArrowLeft className="inline mr-2" />
|
|
Back
|
|
</Button>
|
|
{focusNote(focusSearchResult)}
|
|
</div>
|
|
)}
|
|
{!focusSearchResult && searchResults && searchResults.length > 0 && (
|
|
<div className="mt-4 max-w-[92vw] break-all">
|
|
<ScrollArea className="h-[80vh]">
|
|
{searchResults.map((result, index) => {
|
|
return (
|
|
<Note
|
|
key={result["corpus-id"]}
|
|
note={result}
|
|
setFocusSearchResult={setFocusSearchResult}
|
|
/>
|
|
);
|
|
})}
|
|
</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>
|
|
</div>
|
|
);
|
|
}
|