implement custom value when custom is active on model selector

frontend/src/app/onboarding/components/model-selector.tsx

@@ -1,5 +1,6 @@
 import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
 import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -24,6 +25,7 @@ export function ModelSelector({
 	placeholder = "Select model...",
 	searchPlaceholder = "Search model...",
 	noOptionsPlaceholder = "No models available",
+	custom = false,
 }: {
 	options: {
 		value: string;
@@ -35,14 +37,17 @@ export function ModelSelector({
 	placeholder?: string;
 	searchPlaceholder?: string;
 	noOptionsPlaceholder?: string;
+	custom?: boolean;
 	onValueChange: (value: string) => void;
 }) {
 	const [open, setOpen] = useState(false);
+	const [searchValue, setSearchValue] = useState("");
+
 	useEffect(() => {
-    if (value && !options.find((option) => option.value === value)) {
+		if (value && (!options.find((option) => option.value === value) && !custom)) {
 			onValueChange("");
 		}
-  }, [options, value, onValueChange]);
+	}, [options, value, custom, onValueChange]);
 	return (
 		<Popover open={open} onOpenChange={setOpen}>
 			<PopoverTrigger asChild>
@@ -57,13 +62,21 @@ export function ModelSelector({
 					{value ? (
 						<div className="flex items-center gap-2">
 							{icon && <div className="w-4 h-4">{icon}</div>}
-              {options.find((framework) => framework.value === value)?.label}
+							{options.find((framework) => framework.value === value)?.label ||
+								value}
 							{options.find((framework) => framework.value === value)
 								?.default && (
 								<span className="text-xs text-foreground p-1 rounded-md bg-muted">
 									Default
 								</span>
 							)}
+							{custom &&
+								value &&
+								!options.find((framework) => framework.value === value) && (
+									<Badge variant="outline" className="text-xs">
+										CUSTOM
+									</Badge>
+								)}
 						</div>
 					) : options.length === 0 ? (
 						noOptionsPlaceholder
@@ -75,7 +88,11 @@ export function ModelSelector({
 			</PopoverTrigger>
 			<PopoverContent align="start" className="w-[400px] p-0">
 				<Command>
-          <CommandInput placeholder={searchPlaceholder} />
+					<CommandInput
+						placeholder={searchPlaceholder}
+						value={searchValue}
+						onValueChange={setSearchValue}
+					/>
 					<CommandList>
 						<CommandEmpty>{noOptionsPlaceholder}</CommandEmpty>
 						<CommandGroup>
@@ -106,6 +123,32 @@ export function ModelSelector({
 									</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>