feat: complete search REST route, restore disk sync, and extraFields support across API/MCP
This commit is contained in:
asepharyana committed
1 parent
989ee9c464
commit
a67a8c6469
11 files changed
+319
-34
No files matched your search
@@ -1,7 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect, useCallback, Suspense } from "react";
|
||||
import Link from "next/link";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
|
||||
interface DocHit {
|
||||
slug: string;
|
||||
@@ -11,19 +12,30 @@ interface DocHit {
|
||||
snippet: string;
|
||||
}
|
||||
|
||||
export default function SearchPage() {
|
||||
const [query, setQuery] = useState("");
|
||||
type SearchMode = "hybrid" | "keyword" | "semantic";
|
||||
|
||||
function SearchContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const initialQ = searchParams.get("q") ?? "";
|
||||
const initialMode = (searchParams.get("mode") as SearchMode) ?? "hybrid";
|
||||
|
||||
const [query, setQuery] = useState(initialQ);
|
||||
const [mode, setMode] = useState<SearchMode>(
|
||||
["hybrid", "keyword", "semantic"].includes(initialMode) ? initialMode : "hybrid",
|
||||
);
|
||||
const [results, setResults] = useState<DocHit[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
async function handleSearch(q: string) {
|
||||
const handleSearch = useCallback(async (q: string, searchMode: SearchMode) => {
|
||||
if (!q.trim()) {
|
||||
setResults([]);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`);
|
||||
const res = await fetch(
|
||||
`/api/search?q=${encodeURIComponent(q)}&mode=${searchMode}`,
|
||||
);
|
||||
const data = await res.json();
|
||||
setResults(data.results || []);
|
||||
} catch {
|
||||
@@ -31,51 +43,98 @@ export default function SearchPage() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialQ) {
|
||||
handleSearch(initialQ, mode);
|
||||
}
|
||||
}, [initialQ, handleSearch, mode]);
|
||||
|
||||
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const val = e.target.value;
|
||||
setQuery(val);
|
||||
handleSearch(val);
|
||||
handleSearch(val, mode);
|
||||
}
|
||||
|
||||
function handleModeChange(newMode: SearchMode) {
|
||||
setMode(newMode);
|
||||
if (query.trim()) {
|
||||
handleSearch(query, newMode);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="text-2xl font-light text-[#f7f8f8] mb-6">Search</h1>
|
||||
<div className="mb-6">
|
||||
|
||||
<div className="space-y-4 mb-8">
|
||||
<input
|
||||
type="search"
|
||||
value={query}
|
||||
onChange={handleChange}
|
||||
placeholder="Search documents..."
|
||||
className="w-full px-4 py-2 bg-[#0f1011] border border-[#23252a] rounded text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2]"
|
||||
placeholder="Search documents by keyword or semantic meaning..."
|
||||
className="w-full px-4 py-2.5 bg-[#0f1011] border border-[#23252a] rounded-lg text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2]"
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
{/* Mode Selector */}
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span className="text-[#62666d]">Mode:</span>
|
||||
{(
|
||||
[
|
||||
{ id: "hybrid", label: "Hybrid (FTS + Semantic)" },
|
||||
{ id: "keyword", label: "Keyword (FTS)" },
|
||||
{ id: "semantic", label: "Semantic (Embeddings)" },
|
||||
] as const
|
||||
).map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
type="button"
|
||||
onClick={() => handleModeChange(m.id)}
|
||||
className={`px-2.5 py-1 rounded border transition-colors ${
|
||||
mode === m.id
|
||||
? "bg-[#5e6ad2]/15 border-[#5e6ad2] text-[#7170ff]"
|
||||
: "bg-[#0f1011] border-[#1f2022] text-[#8a8f98] hover:text-[#d0d6e0]"
|
||||
}`}
|
||||
>
|
||||
{m.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading && <p className="text-[#8a8f98]">Searching...</p>}
|
||||
|
||||
{!loading && results.length === 0 && query && (
|
||||
<p className="text-[#8a8f98]">No results for "{query}".</p>
|
||||
<p className="text-[#8a8f98]">No results found for "{query}".</p>
|
||||
)}
|
||||
|
||||
{!loading && results.length > 0 && (
|
||||
<ul className="space-y-3">
|
||||
<ul className="space-y-4">
|
||||
{results.map((r) => (
|
||||
<li key={r.slug} className="border-b border-[#1f2022] pb-3">
|
||||
<li
|
||||
key={r.slug}
|
||||
className="bg-[#0f1011] border border-[#1f2022] rounded-lg p-4 hover:border-[#5e6ad2]/40 transition-colors"
|
||||
>
|
||||
<Link
|
||||
href={`/${r.slug}`}
|
||||
className="text-[#f7f8f8] hover:text-[#7170ff] font-medium transition-colors"
|
||||
className="text-[#f7f8f8] hover:text-[#7170ff] font-medium transition-colors block mb-1"
|
||||
>
|
||||
{r.title}
|
||||
</Link>
|
||||
<span className="block text-xs text-[#62666d]">
|
||||
{r.section} · {Math.round(r.score * 100)}% match
|
||||
</span>
|
||||
<div className="flex items-center gap-2 text-xs text-[#62666d] mb-2">
|
||||
<span className="uppercase text-[#7170ff]">{r.section}</span>
|
||||
<span>·</span>
|
||||
<span>{r.slug}</span>
|
||||
<span>·</span>
|
||||
<span>Score: {r.score.toFixed(3)}</span>
|
||||
</div>
|
||||
{r.snippet && (
|
||||
<p className="mt-1 text-sm text-[#8a8f98] line-clamp-2">
|
||||
{r.snippet}
|
||||
</p>
|
||||
<p
|
||||
className="text-sm text-[#8a8f98] leading-relaxed [&>mark]:bg-[#5e6ad2]/30 [&>mark]:text-[#f7f8f8] [&>mark]:px-1 [&>mark]:rounded"
|
||||
dangerouslySetInnerHTML={{ __html: r.snippet }}
|
||||
/>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
@@ -84,3 +143,18 @@ export default function SearchPage() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SearchPage() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="text-2xl font-light text-[#f7f8f8] mb-6">Search</h1>
|
||||
<p className="text-[#8a8f98]">Loading search...</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<SearchContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user