|
| 1 | +import { Loader2Icon, SearchIcon, SparklesIcon, XIcon } from "lucide-react"; |
| 2 | +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; |
| 3 | + |
| 4 | +import { Badge } from "@hypr/ui/components/ui/badge"; |
| 5 | +import { cn } from "@hypr/utils"; |
| 6 | + |
| 7 | +import { |
| 8 | + type GroupedSearchResults, |
| 9 | + type SearchEntityType, |
| 10 | + useSearch, |
| 11 | +} from "../../../../contexts/search/ui"; |
| 12 | +import { ResultItem } from "./result-item"; |
| 13 | + |
| 14 | +const FILTER_OPTIONS: { type: SearchEntityType; label: string }[] = [ |
| 15 | + { type: "session", label: "Meeting note" }, |
| 16 | + { type: "human", label: "Person" }, |
| 17 | + { type: "organization", label: "Organization" }, |
| 18 | +]; |
| 19 | + |
| 20 | +interface AdvancedSearchViewProps { |
| 21 | + selectedTypes: string[] | null; |
| 22 | + setSelectedTypes: (types: string[] | null) => void; |
| 23 | + onResultClick: (type: string, id: string) => void; |
| 24 | +} |
| 25 | + |
| 26 | +export function AdvancedSearchView({ |
| 27 | + selectedTypes, |
| 28 | + setSelectedTypes, |
| 29 | + onResultClick, |
| 30 | +}: AdvancedSearchViewProps) { |
| 31 | + const { query, setQuery, results, isSearching, isIndexing } = useSearch(); |
| 32 | + const [localQuery, setLocalQuery] = useState(query); |
| 33 | + const inputRef = useRef<HTMLInputElement>(null); |
| 34 | + |
| 35 | + useEffect(() => { |
| 36 | + const timer = setTimeout(() => { |
| 37 | + setQuery(localQuery); |
| 38 | + }, 200); |
| 39 | + return () => clearTimeout(timer); |
| 40 | + }, [localQuery, setQuery]); |
| 41 | + |
| 42 | + useEffect(() => { |
| 43 | + inputRef.current?.focus(); |
| 44 | + }, []); |
| 45 | + |
| 46 | + const toggleFilter = useCallback( |
| 47 | + (type: SearchEntityType) => { |
| 48 | + if (!selectedTypes) { |
| 49 | + setSelectedTypes([type]); |
| 50 | + } else if (selectedTypes.includes(type)) { |
| 51 | + const newTypes = selectedTypes.filter((t) => t !== type); |
| 52 | + setSelectedTypes(newTypes.length > 0 ? newTypes : null); |
| 53 | + } else { |
| 54 | + setSelectedTypes([...selectedTypes, type]); |
| 55 | + } |
| 56 | + }, |
| 57 | + [selectedTypes, setSelectedTypes], |
| 58 | + ); |
| 59 | + |
| 60 | + const filteredResults = useMemo(() => { |
| 61 | + if (!results || !selectedTypes || selectedTypes.length === 0) { |
| 62 | + return results; |
| 63 | + } |
| 64 | + return { |
| 65 | + ...results, |
| 66 | + groups: results.groups.filter((group) => |
| 67 | + selectedTypes.includes(group.type), |
| 68 | + ), |
| 69 | + totalResults: results.groups |
| 70 | + .filter((group) => selectedTypes.includes(group.type)) |
| 71 | + .reduce((acc, group) => acc + group.totalCount, 0), |
| 72 | + }; |
| 73 | + }, [results, selectedTypes]); |
| 74 | + |
| 75 | + const showLoading = isSearching || isIndexing; |
| 76 | + const hasQuery = query.trim().length > 0; |
| 77 | + const hasResults = filteredResults && filteredResults.totalResults > 0; |
| 78 | + |
| 79 | + return ( |
| 80 | + <div className="flex flex-col h-full"> |
| 81 | + <div className="px-6 pt-6 pb-4 border-b border-neutral-100"> |
| 82 | + <div className="relative"> |
| 83 | + {showLoading ? ( |
| 84 | + <Loader2Icon className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-neutral-400 animate-spin" /> |
| 85 | + ) : ( |
| 86 | + <SearchIcon className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-neutral-400" /> |
| 87 | + )} |
| 88 | + <input |
| 89 | + ref={inputRef} |
| 90 | + type="text" |
| 91 | + placeholder="Try 'budget', '@john', or '#design'" |
| 92 | + value={localQuery} |
| 93 | + onChange={(e) => setLocalQuery(e.target.value)} |
| 94 | + className={cn([ |
| 95 | + "w-full pl-12 pr-10 py-3", |
| 96 | + "text-base placeholder:text-neutral-400", |
| 97 | + "rounded-xl bg-neutral-100", |
| 98 | + "border border-transparent", |
| 99 | + "focus:outline-none focus:border-neutral-300 focus:bg-white", |
| 100 | + "transition-all", |
| 101 | + ])} |
| 102 | + /> |
| 103 | + {localQuery && ( |
| 104 | + <button |
| 105 | + onClick={() => setLocalQuery("")} |
| 106 | + className="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600" |
| 107 | + > |
| 108 | + <XIcon className="h-5 w-5" /> |
| 109 | + </button> |
| 110 | + )} |
| 111 | + </div> |
| 112 | + |
| 113 | + <div className="flex gap-2 mt-4"> |
| 114 | + {FILTER_OPTIONS.map((option) => { |
| 115 | + const isActive = selectedTypes?.includes(option.type); |
| 116 | + return ( |
| 117 | + <Badge |
| 118 | + key={option.type} |
| 119 | + variant={isActive ? "default" : "outline"} |
| 120 | + className={cn([ |
| 121 | + "cursor-pointer transition-all", |
| 122 | + isActive |
| 123 | + ? "bg-neutral-900 text-white hover:bg-neutral-800" |
| 124 | + : "bg-white text-neutral-600 hover:bg-neutral-100 border-neutral-200", |
| 125 | + ])} |
| 126 | + onClick={() => toggleFilter(option.type)} |
| 127 | + > |
| 128 | + {option.label} |
| 129 | + </Badge> |
| 130 | + ); |
| 131 | + })} |
| 132 | + </div> |
| 133 | + </div> |
| 134 | + |
| 135 | + <div className="flex-1 overflow-y-auto"> |
| 136 | + {!hasQuery ? ( |
| 137 | + <SuggestionsView |
| 138 | + results={filteredResults} |
| 139 | + onResultClick={onResultClick} |
| 140 | + /> |
| 141 | + ) : hasResults ? ( |
| 142 | + <SearchResultsView |
| 143 | + results={filteredResults!} |
| 144 | + onResultClick={onResultClick} |
| 145 | + /> |
| 146 | + ) : ( |
| 147 | + <NoResultsView query={query} /> |
| 148 | + )} |
| 149 | + </div> |
| 150 | + </div> |
| 151 | + ); |
| 152 | +} |
| 153 | + |
| 154 | +function SuggestionsView({ |
| 155 | + results, |
| 156 | + onResultClick, |
| 157 | +}: { |
| 158 | + results: GroupedSearchResults | null; |
| 159 | + onResultClick: (type: string, id: string) => void; |
| 160 | +}) { |
| 161 | + return ( |
| 162 | + <div className="p-6"> |
| 163 | + <div className="flex items-center gap-2 text-sm text-neutral-500 mb-4"> |
| 164 | + <SparklesIcon className="h-4 w-4" /> |
| 165 | + <span>Suggestions</span> |
| 166 | + </div> |
| 167 | + {results && results.totalResults > 0 ? ( |
| 168 | + <div className="space-y-1"> |
| 169 | + {results.groups |
| 170 | + .slice(0, 3) |
| 171 | + .flatMap((group) => |
| 172 | + group.results |
| 173 | + .slice(0, 5) |
| 174 | + .map((result) => ( |
| 175 | + <ResultItem |
| 176 | + key={result.id} |
| 177 | + result={result} |
| 178 | + onClick={() => onResultClick(result.type, result.id)} |
| 179 | + /> |
| 180 | + )), |
| 181 | + )} |
| 182 | + </div> |
| 183 | + ) : ( |
| 184 | + <div className="text-center py-12 text-neutral-400"> |
| 185 | + <p>Start typing to search</p> |
| 186 | + <p className="text-sm mt-1">or browse your recent notes</p> |
| 187 | + </div> |
| 188 | + )} |
| 189 | + </div> |
| 190 | + ); |
| 191 | +} |
| 192 | + |
| 193 | +function SearchResultsView({ |
| 194 | + results, |
| 195 | + onResultClick, |
| 196 | +}: { |
| 197 | + results: GroupedSearchResults; |
| 198 | + onResultClick: (type: string, id: string) => void; |
| 199 | +}) { |
| 200 | + return ( |
| 201 | + <div className="p-6"> |
| 202 | + {results.groups.map((group) => ( |
| 203 | + <div key={group.key} className="mb-6"> |
| 204 | + <h3 className="text-sm font-semibold text-neutral-900 mb-3"> |
| 205 | + {group.title} |
| 206 | + </h3> |
| 207 | + <div className="space-y-1"> |
| 208 | + {group.results.map((result) => ( |
| 209 | + <ResultItem |
| 210 | + key={result.id} |
| 211 | + result={result} |
| 212 | + onClick={() => onResultClick(result.type, result.id)} |
| 213 | + /> |
| 214 | + ))} |
| 215 | + </div> |
| 216 | + </div> |
| 217 | + ))} |
| 218 | + </div> |
| 219 | + ); |
| 220 | +} |
| 221 | + |
| 222 | +function NoResultsView({ query }: { query: string }) { |
| 223 | + return ( |
| 224 | + <div className="flex flex-col items-center justify-center h-full py-12"> |
| 225 | + <SearchIcon className="h-12 w-12 text-neutral-200 mb-4" /> |
| 226 | + <p className="text-neutral-600 font-medium">No results found</p> |
| 227 | + <p className="text-sm text-neutral-400 mt-1">No matches for "{query}"</p> |
| 228 | + </div> |
| 229 | + ); |
| 230 | +} |
0 commit comments