gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

changed knowledge search input design

Browse source
This commit is contained in:
Lucas Oliveira 2025-10-23 16:36:13 -03:00
parent 185f50af2f
commit 13040a4b8f
1 changed files with 90 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

180
frontend/components/knowledge-search-input.tsx
View file

@ -1,100 +1,100 @@
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import {
ChangeEvent,
FormEvent,
useCallback,
useEffect,
useState,
} from "react";
import { filterAccentClasses } from "./knowledge-filter-panel";
import { ArrowRight, Search, X } from "lucide-react"; import { ArrowRight, Search, X } from "lucide-react";
import {
type ChangeEvent,
type FormEvent,
useCallback,
useEffect,
useState,
} from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { filterAccentClasses } from "./knowledge-filter-panel";
export const KnowledgeSearchInput = () => { export const KnowledgeSearchInput = () => {
const { const {
selectedFilter, selectedFilter,
setSelectedFilter, setSelectedFilter,
parsedFilterData, parsedFilterData,
queryOverride, queryOverride,
setQueryOverride, setQueryOverride,
} = useKnowledgeFilter(); } = useKnowledgeFilter();
const [searchQueryInput, setSearchQueryInput] = useState(queryOverride || ""); const [searchQueryInput, setSearchQueryInput] = useState(queryOverride || "");
const handleSearch = useCallback( const handleSearch = useCallback(
(e?: FormEvent<HTMLFormElement>) => { (e?: FormEvent<HTMLFormElement>) => {
if (e) e.preventDefault(); if (e) e.preventDefault();
setQueryOverride(searchQueryInput.trim()); setQueryOverride(searchQueryInput.trim());
}, },
[searchQueryInput, setQueryOverride] [searchQueryInput, setQueryOverride],
); );
// Reset the query text when the selected filter changes // Reset the query text when the selected filter changes
useEffect(() => { useEffect(() => {
setSearchQueryInput(queryOverride); setSearchQueryInput(queryOverride);
}, [queryOverride]); }, [queryOverride]);
return ( return (
<form <form
className="flex flex-1 max-w-[min(640px,100%)] min-w-[100px]" className="flex flex-1 max-w-[min(640px,100%)] min-w-[100px]"
onSubmit={handleSearch} onSubmit={handleSearch}
> >
<div className="primary-input group/input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]"> <div className="primary-input group/input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
{selectedFilter?.name && ( {selectedFilter?.name && (
<div <div
title={selectedFilter?.name} title={selectedFilter?.name}
className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${ className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
filterAccentClasses[parsedFilterData?.color || "zinc"] filterAccentClasses[parsedFilterData?.color || "zinc"]
}`} }`}
> >
<span className="truncate">{selectedFilter?.name}</span> <span className="truncate text-xs font-medium">{selectedFilter?.name}</span>
<X <X
aria-label="Remove filter" aria-label="Remove filter"
className="h-4 w-4 flex-shrink-0 cursor-pointer" className="h-4 w-4 flex-shrink-0 cursor-pointer"
onClick={() => setSelectedFilter(null)} onClick={() => setSelectedFilter(null)}
/> />
</div> </div>
)} )}
<Search <Search
className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground" className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
strokeWidth={1.5} strokeWidth={1.5}
/> />
<input <input
className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono" className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
name="search-query" name="search-query"
id="search-query" id="search-query"
type="text" type="text"
placeholder="Search your documents..." placeholder="Search your documents..."
value={searchQueryInput} value={searchQueryInput}
onChange={(e: ChangeEvent<HTMLInputElement>) => onChange={(e: ChangeEvent<HTMLInputElement>) =>
setSearchQueryInput(e.target.value) setSearchQueryInput(e.target.value)
} }
/> />
{queryOverride && ( {queryOverride && (
<Button <Button
variant="ghost" variant="ghost"
className="h-full rounded-sm !px-1.5 !py-0" className="h-full rounded-sm !px-1.5 !py-0"
type="button" type="button"
onClick={() => { onClick={() => {
setSearchQueryInput(""); setSearchQueryInput("");
setQueryOverride(""); setQueryOverride("");
}} }}
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</Button> </Button>
)} )}
<Button <Button
variant="ghost" variant="ghost"
className={cn( className={cn(
"h-full rounded-sm !px-1.5 !py-0 hidden group-focus-within/input:block", "h-full rounded-sm !px-1.5 !py-0 hidden group-focus-within/input:block",
searchQueryInput && "block" searchQueryInput && "block",
)} )}
type="submit" type="submit"
> >
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
</Button> </Button>
</div> </div>
</form> </form>
); );
}; };