AI Model Selector

import { useState } from "react";
import {
    Select,
    SelectTrigger,
    SelectValue,
    SelectContent,
    SelectItem,
    SelectGroup,
    SelectLabel,
    SelectSeparator,
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

interface AIModel {
    id: string;
    name: string;
    capabilities: string[];
    status: "active" | "beta" | "deprecated";
    description: string;
}

const models: AIModel[] = [
    {
        id: "gpt4",
        name: "GPT-4",
        capabilities: ["Chat", "Code", "Reasoning"],
        status: "active",
        description: "State-of-the-art LLM from OpenAI, versatile in chat and coding tasks.",
    },
    {
        id: "claude",
        name: "Claude",
        capabilities: ["Chat", "Summarization"],
        status: "beta",
        description: "Anthropic AI model focused on safe and coherent chat outputs.",
    },
    {
        id: "gemini",
        name: "Gemini",
        capabilities: ["Chat", "Reasoning", "Math"],
        status: "active",
        description: "Google’s Gemini AI for multi-modal reasoning tasks.",
    },
    {
        id: "custom-llm",
        name: "Custom LLM",
        capabilities: ["Custom"],
        status: "active",
        description: "Your own trained LLM integrated with the system.",
    },
];

export default function AIModelSelector01() {
    const [selectedModel, setSelectedModel] = useState<string>("gpt4");
    const [searchQuery, setSearchQuery] = useState("");

    // Filter models by search
    const filteredModels = models.filter((m) =>
        m.name.toLowerCase().includes(searchQuery.toLowerCase())
    );

    const activeModel = models.find((m) => m.id === selectedModel);

    return (
        <div className="flex flex-col gap-2 w-[320px]">
            {/* Search input */}
            <Input
                placeholder="Search AI models..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
            />

            {/* Model dropdown */}
            <Select onValueChange={setSelectedModel} defaultValue={selectedModel}>
                <SelectTrigger className="w-full">
                    <SelectValue placeholder="Select model" />
                </SelectTrigger>
                <SelectContent>
                    {filteredModels.map((model) => (
                        <SelectItem key={model.id} value={model.id}>
                            <div className="flex flex-col">
                                <div className="flex items-center justify-between">
                                    <span>{model.name}</span>
                                </div>
                            </div>
                        </SelectItem>
                    ))}
                </SelectContent>
            </Select>

            {/* Model info */}
            {activeModel && (
                <div className="border border-border rounded-md p-2 text-sm flex flex-col gap-1">
                    <span className="font-medium">{activeModel.name}</span>
                    <p className="text-muted-foreground">{activeModel.description}</p>
                    <div className="flex gap-1 flex-wrap">
                        {activeModel.capabilities.map((cap) => (
                            <Badge key={cap} variant="outline" className="text-xs">
                                {cap}
                            </Badge>
                        ))}
                    </div>
                </div>
            )}

            {/* Optional action */}
            <Button size="sm" className="w-full mt-1">
                Configure Model
            </Button>
        </div>
    );
}