Spaces:
Sleeping
Sleeping
| import { useState } from 'react'; | |
| import { ChevronDown, ChevronUp, Settings2 } from 'lucide-react'; | |
| import { AnalysisOptions } from '../types'; | |
| interface AdvancedOptionsProps { | |
| options: AnalysisOptions; | |
| onChange: (opts: Partial<AnalysisOptions>) => void; | |
| } | |
| function Toggle({ | |
| id, | |
| label, | |
| description, | |
| checked, | |
| onChange, | |
| }: { | |
| id: string; | |
| label: string; | |
| description?: string; | |
| checked: boolean; | |
| onChange: (v: boolean) => void; | |
| }) { | |
| return ( | |
| <label | |
| htmlFor={id} | |
| className="flex items-start gap-3 cursor-pointer group" | |
| > | |
| <div className="relative flex-shrink-0 mt-0.5"> | |
| <input | |
| type="checkbox" | |
| id={id} | |
| checked={checked} | |
| onChange={e => onChange(e.target.checked)} | |
| className="sr-only" | |
| /> | |
| <div | |
| className={`w-9 h-5 rounded-full border transition-all duration-200 ${ | |
| checked | |
| ? 'bg-blue-600 border-blue-500' | |
| : 'bg-white/5 border-white/15 group-hover:border-white/25' | |
| }`} | |
| > | |
| <div | |
| className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-all duration-200 ${ | |
| checked ? 'translate-x-4' : 'translate-x-0.5' | |
| }`} | |
| /> | |
| </div> | |
| </div> | |
| <div> | |
| <p className="text-sm font-medium text-gray-200">{label}</p> | |
| {description && <p className="text-xs text-gray-500 mt-0.5">{description}</p>} | |
| </div> | |
| </label> | |
| ); | |
| } | |
| function NumberInput({ | |
| id, | |
| label, | |
| value, | |
| min, | |
| max, | |
| onChange, | |
| }: { | |
| id: string; | |
| label: string; | |
| value: number; | |
| min: number; | |
| max: number; | |
| onChange: (v: number) => void; | |
| }) { | |
| return ( | |
| <div className="flex items-center justify-between gap-4"> | |
| <label htmlFor={id} className="text-sm text-gray-300 flex-1">{label}</label> | |
| <input | |
| type="number" | |
| id={id} | |
| value={value} | |
| min={min} | |
| max={max} | |
| onChange={e => onChange(Number(e.target.value))} | |
| className="w-20 input-field text-center py-1" | |
| /> | |
| </div> | |
| ); | |
| } | |
| export function AdvancedOptions({ options, onChange }: AdvancedOptionsProps) { | |
| const [open, setOpen] = useState(false); | |
| return ( | |
| <div className="card overflow-hidden"> | |
| <button | |
| id="advanced-options-toggle" | |
| className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-white/[0.02] transition-colors" | |
| onClick={() => setOpen(o => !o)} | |
| > | |
| <span className="flex items-center gap-2 text-sm font-medium text-gray-300"> | |
| <Settings2 className="w-4 h-4 text-gray-500" /> | |
| Advanced Options | |
| </span> | |
| {open ? ( | |
| <ChevronUp className="w-4 h-4 text-gray-500" /> | |
| ) : ( | |
| <ChevronDown className="w-4 h-4 text-gray-500" /> | |
| )} | |
| </button> | |
| {open && ( | |
| <div className="px-4 pb-4 divider border-t pt-4 space-y-4 animate-fade-in"> | |
| <div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> | |
| <Toggle | |
| id="opt-case-sensitive" | |
| label="Case-sensitive matching" | |
| description="Disable to also find case-insensitive matches" | |
| checked={options.case_sensitive} | |
| onChange={v => onChange({ case_sensitive: v })} | |
| /> | |
| <Toggle | |
| id="opt-url-decoded" | |
| label="Search URL-decoded values" | |
| description="Matches percent-encoded representations" | |
| checked={options.search_url_decoded} | |
| onChange={v => onChange({ search_url_decoded: v })} | |
| /> | |
| <Toggle | |
| id="opt-include-req-bodies" | |
| label="Include request bodies" | |
| description="Search POST/PUT body content" | |
| checked={options.include_request_bodies} | |
| onChange={v => onChange({ include_request_bodies: v })} | |
| /> | |
| <Toggle | |
| id="opt-include-resp-bodies" | |
| label="Include response bodies" | |
| description="Search response content (slower for large HAR)" | |
| checked={options.include_response_bodies} | |
| onChange={v => onChange({ include_response_bodies: v })} | |
| /> | |
| </div> | |
| <div className="space-y-3 pt-2 border-t border-white/[0.06]"> | |
| <NumberInput | |
| id="opt-min-snippet" | |
| label="Minimum snippet length" | |
| value={options.min_snippet_length} | |
| min={2} | |
| max={20} | |
| onChange={v => onChange({ min_snippet_length: v })} | |
| /> | |
| <NumberInput | |
| id="opt-max-results" | |
| label="Max results per cookie" | |
| value={options.max_results_per_cookie} | |
| min={10} | |
| max={1000} | |
| onChange={v => onChange({ max_results_per_cookie: v })} | |
| /> | |
| <NumberInput | |
| id="opt-context-chars" | |
| label="Context window (chars)" | |
| value={options.context_chars} | |
| min={20} | |
| max={300} | |
| onChange={v => onChange({ context_chars: v })} | |
| /> | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |