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

implement custom value when custom is active on model selector

Browse source
This commit is contained in:
Lucas Oliveira 2025-10-01 10:57:06 -03:00
parent f4e1ca2ab7
commit b3ae29db83
1 changed files with 145 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

247
frontend/src/app/onboarding/components/model-selector.tsx
View file

@ -1,115 +1,158 @@
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"; import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Command, Command,
CommandEmpty, CommandEmpty,
CommandGroup, CommandGroup,
CommandInput, CommandInput,
CommandItem, CommandItem,
CommandList, CommandList,
} from "@/components/ui/command"; } from "@/components/ui/command";
import { import {
Popover, Popover,
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
export function ModelSelector({ export function ModelSelector({
options, options,
value, value,
onValueChange, onValueChange,
icon, icon,
placeholder = "Select model...", placeholder = "Select model...",
searchPlaceholder = "Search model...", searchPlaceholder = "Search model...",
noOptionsPlaceholder = "No models available", noOptionsPlaceholder = "No models available",
custom = false,
}: { }: {
options: { options: {
value: string; value: string;
label: string; label: string;
default?: boolean; default?: boolean;
}[]; }[];
value: string; value: string;
icon?: React.ReactNode; icon?: React.ReactNode;
placeholder?: string; placeholder?: string;
searchPlaceholder?: string; searchPlaceholder?: string;
noOptionsPlaceholder?: string; noOptionsPlaceholder?: string;
onValueChange: (value: string) => void; custom?: boolean;
onValueChange: (value: string) => void;
}) { }) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
useEffect(() => { const [searchValue, setSearchValue] = useState("");
if (value && !options.find((option) => option.value === value)) {
onValueChange(""); useEffect(() => {
} if (value && (!options.find((option) => option.value === value) && !custom)) {
}, [options, value, onValueChange]); onValueChange("");
return ( }
<Popover open={open} onOpenChange={setOpen}> }, [options, value, custom, onValueChange]);
<PopoverTrigger asChild> return (
{/** biome-ignore lint/a11y/useSemanticElements: has to be a Button */} <Popover open={open} onOpenChange={setOpen}>
<Button <PopoverTrigger asChild>
variant="outline" {/** biome-ignore lint/a11y/useSemanticElements: has to be a Button */}
role="combobox" <Button
disabled={options.length === 0} variant="outline"
aria-expanded={open} role="combobox"
className="w-full gap-2 justify-between font-normal text-sm" disabled={options.length === 0}
> aria-expanded={open}
{value ? ( className="w-full gap-2 justify-between font-normal text-sm"
<div className="flex items-center gap-2"> >
{icon && <div className="w-4 h-4">{icon}</div>} {value ? (
{options.find((framework) => framework.value === value)?.label} <div className="flex items-center gap-2">
{options.find((framework) => framework.value === value) {icon && <div className="w-4 h-4">{icon}</div>}
?.default && ( {options.find((framework) => framework.value === value)?.label ||
<span className="text-xs text-foreground p-1 rounded-md bg-muted"> value}
Default {options.find((framework) => framework.value === value)
</span> ?.default && (
)} <span className="text-xs text-foreground p-1 rounded-md bg-muted">
</div> Default
) : options.length === 0 ? ( </span>
noOptionsPlaceholder )}
) : ( {custom &&
placeholder value &&
)} !options.find((framework) => framework.value === value) && (
<ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <Badge variant="outline" className="text-xs">
</Button> CUSTOM
</PopoverTrigger> </Badge>
<PopoverContent align="start" className="w-[400px] p-0"> )}
<Command> </div>
<CommandInput placeholder={searchPlaceholder} /> ) : options.length === 0 ? (
<CommandList> noOptionsPlaceholder
<CommandEmpty>{noOptionsPlaceholder}</CommandEmpty> ) : (
<CommandGroup> placeholder
{options.map((option) => ( )}
<CommandItem <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
key={option.value} </Button>
value={option.value} </PopoverTrigger>
onSelect={(currentValue) => { <PopoverContent align="start" className="w-[400px] p-0">
if (currentValue !== value) { <Command>
onValueChange(currentValue); <CommandInput
} placeholder={searchPlaceholder}
setOpen(false); value={searchValue}
}} onValueChange={setSearchValue}
> />
<CheckIcon <CommandList>
className={cn( <CommandEmpty>{noOptionsPlaceholder}</CommandEmpty>
"mr-2 h-4 w-4", <CommandGroup>
value === option.value ? "opacity-100" : "opacity-0", {options.map((option) => (
)} <CommandItem
/> key={option.value}
<div className="flex items-center gap-2"> value={option.value}
{option.label} onSelect={(currentValue) => {
{option.default && ( if (currentValue !== value) {
<span className="text-xs text-foreground p-1 rounded-md bg-muted"> onValueChange(currentValue);
Default }
</span> setOpen(false);
)} }}
</div> >
</CommandItem> <CheckIcon
))} className={cn(
</CommandGroup> "mr-2 h-4 w-4",
</CommandList> value === option.value ? "opacity-100" : "opacity-0",
</Command> )}
</PopoverContent> />
</Popover> <div className="flex items-center gap-2">
); {option.label}
{option.default && (
<span className="text-xs text-foreground p-1 rounded-md bg-muted">
Default
</span>
)}
</div>
</CommandItem>
))}
{custom &&
searchValue &&
!options.find((option) => option.value === searchValue) && (
<CommandItem
value={searchValue}
onSelect={(currentValue) => {
if (currentValue !== value) {
onValueChange(currentValue);
}
setOpen(false);
}}
>
<CheckIcon
className={cn(
"mr-2 h-4 w-4",
value === searchValue ? "opacity-100" : "opacity-0",
)}
/>
<div className="flex items-center gap-2">
{searchValue}
<span className="text-xs text-foreground p-1 rounded-md bg-muted">
Custom
</span>
</div>
</CommandItem>
)}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
} }