mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-20 04:39:00 +08:00
### What problem does this PR solve? Feat: Filter the agent form's large model list by type #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
@ -1,8 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import { CheckIcon, ChevronDownIcon } from 'lucide-react';
|
||||
import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react';
|
||||
import {
|
||||
Fragment,
|
||||
MouseEventHandler,
|
||||
ReactNode,
|
||||
forwardRef,
|
||||
useCallback,
|
||||
@ -28,6 +29,7 @@ import {
|
||||
} from '@/components/ui/popover';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { RAGFlowSelectOptionType } from '../ui/select';
|
||||
import { Separator } from '../ui/separator';
|
||||
|
||||
export type SelectWithSearchFlagOptionType = {
|
||||
label: ReactNode;
|
||||
@ -41,122 +43,159 @@ export type SelectWithSearchFlagProps = {
|
||||
value?: string;
|
||||
onChange?(value: string): void;
|
||||
triggerClassName?: string;
|
||||
allowClear?: boolean;
|
||||
};
|
||||
|
||||
export const SelectWithSearch = forwardRef<
|
||||
React.ElementRef<typeof Button>,
|
||||
SelectWithSearchFlagProps
|
||||
>(({ value: val = '', onChange, options = [], triggerClassName }, ref) => {
|
||||
const id = useId();
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
const [value, setValue] = useState<string>('');
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(val: string) => {
|
||||
setValue(val);
|
||||
setOpen(false);
|
||||
onChange?.(val);
|
||||
>(
|
||||
(
|
||||
{
|
||||
value: val = '',
|
||||
onChange,
|
||||
options = [],
|
||||
triggerClassName,
|
||||
allowClear = false,
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
ref,
|
||||
) => {
|
||||
const id = useId();
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
const [value, setValue] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
setValue(val);
|
||||
}, [val]);
|
||||
const selectLabel = useMemo(() => {
|
||||
const optionTemp = options[0];
|
||||
if (optionTemp?.options) {
|
||||
return options
|
||||
.map((group) => group?.options?.find((item) => item.value === value))
|
||||
.filter(Boolean)[0]?.label;
|
||||
} else {
|
||||
return options.find((opt) => opt.value === value)?.label || '';
|
||||
}
|
||||
}, [options, value]);
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
id={id}
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]',
|
||||
triggerClassName,
|
||||
)}
|
||||
>
|
||||
{value ? (
|
||||
<span className="flex min-w-0 options-center gap-2">
|
||||
<span className="text-lg leading-none truncate">
|
||||
{selectLabel}
|
||||
const handleSelect = useCallback(
|
||||
(val: string) => {
|
||||
setValue(val);
|
||||
setOpen(false);
|
||||
onChange?.(val);
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
|
||||
const handleClear: MouseEventHandler<SVGElement> = useCallback(
|
||||
(e) => {
|
||||
e.stopPropagation();
|
||||
setValue('');
|
||||
onChange?.('');
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setValue(val);
|
||||
}, [val]);
|
||||
const selectLabel = useMemo(() => {
|
||||
const optionTemp = options[0];
|
||||
if (optionTemp?.options) {
|
||||
return options
|
||||
.map((group) => group?.options?.find((item) => item.value === value))
|
||||
.filter(Boolean)[0]?.label;
|
||||
} else {
|
||||
return options.find((opt) => opt.value === value)?.label || '';
|
||||
}
|
||||
}, [options, value]);
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
id={id}
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px] [&_svg]:pointer-events-auto',
|
||||
triggerClassName,
|
||||
)}
|
||||
>
|
||||
{value ? (
|
||||
<span className="flex min-w-0 options-center gap-2">
|
||||
<span className="text-lg leading-none truncate">
|
||||
{selectLabel}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">Select value</span>
|
||||
)}
|
||||
<ChevronDownIcon
|
||||
size={16}
|
||||
className="text-muted-foreground/80 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="border-input w-full min-w-[var(--radix-popper-anchor-width)] p-0"
|
||||
align="start"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="Search ..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No data found.</CommandEmpty>
|
||||
{options.map((group, idx) => {
|
||||
if (group.options) {
|
||||
return (
|
||||
<Fragment key={idx}>
|
||||
<CommandGroup heading={group.label}>
|
||||
{group.options.map((option) => (
|
||||
<CommandItem
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
disabled={option.disabled}
|
||||
onSelect={handleSelect}
|
||||
>
|
||||
<span className="text-lg leading-none">
|
||||
{option.label}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">Select value</span>
|
||||
)}
|
||||
<div className="flex items-center justify-between">
|
||||
{value && allowClear && (
|
||||
<>
|
||||
<XIcon
|
||||
className="h-4 mx-2 cursor-pointer text-muted-foreground"
|
||||
onClick={handleClear}
|
||||
/>
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
className="flex min-h-6 h-full"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<ChevronDownIcon
|
||||
size={16}
|
||||
className="text-muted-foreground/80 shrink-0 ml-2"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="border-input w-full min-w-[var(--radix-popper-anchor-width)] p-0"
|
||||
align="start"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="Search ..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No data found.</CommandEmpty>
|
||||
{options.map((group, idx) => {
|
||||
if (group.options) {
|
||||
return (
|
||||
<Fragment key={idx}>
|
||||
<CommandGroup heading={group.label}>
|
||||
{group.options.map((option) => (
|
||||
<CommandItem
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
disabled={option.disabled}
|
||||
onSelect={handleSelect}
|
||||
>
|
||||
<span className="text-lg leading-none">
|
||||
{option.label}
|
||||
</span>
|
||||
|
||||
{value === option.value && (
|
||||
<CheckIcon size={16} className="ml-auto" />
|
||||
)}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</Fragment>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<CommandItem
|
||||
key={group.value}
|
||||
value={group.value}
|
||||
disabled={group.disabled}
|
||||
onSelect={handleSelect}
|
||||
>
|
||||
<span className="text-lg leading-none">{group.label}</span>
|
||||
{value === option.value && (
|
||||
<CheckIcon size={16} className="ml-auto" />
|
||||
)}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</Fragment>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<CommandItem
|
||||
key={group.value}
|
||||
value={group.value}
|
||||
disabled={group.disabled}
|
||||
onSelect={handleSelect}
|
||||
>
|
||||
<span className="text-lg leading-none">
|
||||
{group.label}
|
||||
</span>
|
||||
|
||||
{value === group.value && (
|
||||
<CheckIcon size={16} className="ml-auto" />
|
||||
)}
|
||||
</CommandItem>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
});
|
||||
{value === group.value && (
|
||||
<CheckIcon size={16} className="ml-auto" />
|
||||
)}
|
||||
</CommandItem>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
SelectWithSearch.displayName = 'SelectWithSearch';
|
||||
|
||||
Reference in New Issue
Block a user