L L M Configuration Form - Copy this React, Tailwind Component to your project

"use-client";-import-{-useState,-useEffect-}-from-"react";-import-{-useForm-}-from-"react-hook-form";-import-{-zodResolver-}-from-"@hookform/resolvers/zod";-import-{-z-}-from-"zod";-import-axios-from-"axios";-import-{-useMutation,-useQueryClient,-useQuery-}-from-"@tanstack/react-query";-import-{-toast-}-from-"sonner";-import-{-Card,-CardContent,-CardDescription,-CardHeader,-CardTitle-}-from-"@/components/ui/card";-import-{-Form,-FormControl,-FormField,-FormItem,-FormLabel,-FormMessage-}-from-"@/components/ui/form";-import-{-Input-}-from-"@/components/ui/input";-import-{-Button-}-from-"@/components/ui/button";-import-{-Select,-SelectContent,-SelectItem,-SelectTrigger,-SelectValue-}-from-"@/components/ui/select";-import-{-Tabs,-TabsContent,-TabsList,-TabsTrigger-}-from-"@/components/ui/tabs";-import-{-Loader2-}-from-'lucide-react';-import-{-BRAIN_API_KEY,-BRAIN_URL-}-from-"@/config/site";-const-formSchema-=-z.object({-provider:-z.string().nonempty("Provider-is-required"),-llm_name:-z.string().nonempty("Model-is-required"),-temperature:-z.number().min(0).max(1),-max_tokens:-z.number().min(1),-api_key_name:-z.string().optional(),-additional_config:-z.record(z.any()).optional(),-});-const-templates-=-{-balanced:-{-name:-"Balanced",-description:-"A-good-balance-between-speed-and-accuracy",-config:-{-provider:-"openai",-llm_name:-"gpt-4",-temperature:-0.7,-max_tokens:-1000,-},-},-precise:-{-name:-"Precise",-description:-"Optimized-for-accuracy-and-detailed-responses",-config:-{-provider:-"openai",-llm_name:-"gpt-4-turbo",-temperature:-0.1,-max_tokens:-2000,-},-},-fast:-{-name:-"Fast",-description:-"Optimized-for-quick-responses",-config:-{-provider:-"openai",-llm_name:-"gpt-3.5-turbo",-temperature:-0.5,-max_tokens:-500,-},-},-};-export-function-LLMConfigTab({-agent-})-{-const-[activeTab,-setActiveTab]-=-useState("balanced");-const-[isCustom,-setIsCustom]-=-useState(false);-const-form-=-useForm({-resolver:-zodResolver(formSchema),-defaultValues:-{-...templates.balanced.config,-api_key_name:-"OPENAI_API_KEY",-},-});-const-queryClient-=-useQueryClient();-const-{-data:-models,-isLoading:-isLoadingModels-}-=-useQuery({-queryKey:-["models",-form.watch("provider")],-queryFn:-async-()-=>-{-const-response-=-await-axios.get(`${BRAIN_URL}/models/${form.watch("provider")}`,-{-headers:-{-"x-api-key":-BRAIN_API_KEY-},-});-return-response.data.models;-},-enabled:-!!form.watch("provider"),-});-const-{-mutate,-isPending-}-=-useMutation({-mutationFn:-async-(config)-=>-{-return-axios.put(`${BRAIN_URL}/agent/${agent.id}/llm-config`,-config,-{-headers:-{-"x-api-key":-BRAIN_API_KEY-},-});-},-onSuccess:-()-=>-{-toast.success("Configuration-saved-successfully!");-queryClient.invalidateQueries({-queryKey:-["agent",-agent.id]-});-},-onError:-()-=>-{-toast.error("An-error-occurred.-Please-try-again.");-},-});-const-onSubmit-=-(data)-=>-{-mutate({-...data,-api_key_name:-data.api_key_name-||-"OPENAI_API_KEY",-});-};-const-handleTabChange-=-(value)-=>-{-setActiveTab(value);-setIsCustom(value-===-"custom");-if-(value-!==-"custom")-{-form.reset(templates[value].config);-}-};-useEffect(()-=>-{-if-(!isCustom)-{-form.reset(templates[activeTab].config);-}-},-[activeTab,-isCustom,-form]);-return-(-<div-className="space-y-6">-<div>-<h2-className="text-2xl-font-bold">LLM-Configuration</h2>-<p-className="text-muted-foreground">Configure-your-language-model-parameters</p>-</div>-<Tabs-value={activeTab}-onValueChange={handleTabChange}-className="w-full">-<TabsList-className="grid-w-full-grid-cols-4">-<TabsTrigger-value="balanced">Balanced</TabsTrigger>-<TabsTrigger-value="precise">Precise</TabsTrigger>-<TabsTrigger-value="fast">Fast</TabsTrigger>-<TabsTrigger-value="custom">Custom</TabsTrigger>-</TabsList>-{Object.entries(templates).map(([key,-template])-=>-(-<TabsContent-key={key}-value={key}>-<Card>-<CardHeader>-<CardTitle>{template.name}</CardTitle>-<CardDescription>{template.description}</CardDescription>-</CardHeader>-<CardContent>-<Form-{...form}>-<form-onSubmit={form.handleSubmit(onSubmit)}-className="space-y-4">-<FormField-control={form.control}-name="provider"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Provider</FormLabel>-<FormControl>-<Input-{...field}-disabled={true}-/>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-<FormField-control={form.control}-name="llm_name"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Model</FormLabel>-<Select-onValueChange={field.onChange}-defaultValue={field.value}-disabled={!isCustom-||-isLoadingModels}->-<FormControl>-<SelectTrigger>-<SelectValue-placeholder="Select-a-model"-/>-</SelectTrigger>-</FormControl>-<SelectContent>-{isLoadingModels-?-(-<SelectItem-value="loading"-disabled>-<Loader2-className="mr-2-h-4-w-4-animate-spin"-/>-Loading-models...-</SelectItem>-)-:-(-models?.map((model)-=>-(-<SelectItem-key={model}-value={model}>-{model}-</SelectItem>-))-)}-</SelectContent>-</Select>-<FormMessage-/>-</FormItem>-)}-/>-<FormField-control={form.control}-name="temperature"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Temperature</FormLabel>-<FormControl>-<Input-{...field}-type="number"-step="0.1"-min="0"-max="1"-disabled={!isCustom}-onChange={(e)-=>-field.onChange(parseFloat(e.target.value))}-/>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-<FormField-control={form.control}-name="max_tokens"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Max-Tokens</FormLabel>-<FormControl>-<Input-{...field}-type="number"-min="1"-disabled={!isCustom}-onChange={(e)-=>-field.onChange(parseInt(e.target.value,-10))}-/>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-{isCustom-&&-(-<FormField-control={form.control}-name="api_key_name"-render={({-field-})-=>-(-<FormItem>-<FormLabel>API-Key-Name</FormLabel>-<FormControl>-<Input-{...field}-/>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-)}-<Button-type="submit"-disabled={isPending}-className="w-full">-{isPending-?-(-<>-<Loader2-className="mr-2-h-4-w-4-animate-spin"-/>-Saving...-</>-)-:-(-"Save-Configuration"-)}-</Button>-</form>-</Form>-</CardContent>-</Card>-</TabsContent>-))}-<TabsContent-value="custom">-<Card>-<CardHeader>-<CardTitle>Custom-Configuration</CardTitle>-<CardDescription>Customize-all-parameters-for-your-LLM</CardDescription>-</CardHeader>-<CardContent>-<Form-{...form}>-<form-onSubmit={form.handleSubmit(onSubmit)}-className="space-y-4">-<FormField-control={form.control}-name="provider"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Provider</FormLabel>-<FormControl>-<Input-{...field}-/>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-<FormField-control={form.control}-name="llm_name"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Model</FormLabel>-<Select-onValueChange={field.onChange}-defaultValue={field.value}>-<FormControl>-<SelectTrigger>-<SelectValue-placeholder="Select-a-model"-/>-</SelectTrigger>-</FormControl>-<SelectContent>-{isLoadingModels-?-(-<SelectItem-value="loading"-disabled>-<Loader2-className="mr-2-h-4-w-4-animate-spin"-/>-Loading-models...-</SelectItem>-)-:-(-models?.map((model)-=>-(-<SelectItem-key={model}-value={model}>-{model}-</SelectItem>-))-)}-</SelectContent>-</Select>-<FormMessage-/>-</FormItem>-)}-/>-<FormField-control={form.control}-name="temperature"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Temperature</FormLabel>-<FormControl>-<Input-{...field}-type="number"-step="0.1"-min="0"-max="1"-onChange={(e)-=>-field.onChange(parseFloat(e.target.value))}-/>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-<FormField-control={form.control}-name="max_tokens"-render={({-field-})-=>-(-<FormItem>-<FormLabel>Max-Tokens</FormLabel>-<FormControl>-<Input-{...field}-type="number"-min="1"-onChange={(e)-=>-field.onChange(parseInt(e.target.value,-10))}-/>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-<FormField-control={form.control}-name="api_key_name"-render={({-field-})-=>-(-<FormItem>-<FormLabel>API-Key-Name</FormLabel>-<FormControl>-<Input-{...field}-/>-</FormControl>-<FormMessage-/>-</FormItem>-)}-/>-<Button-type="submit"-disabled={isPending}-className="w-full">-{isPending-?-(-<>-<Loader2-className="mr-2-h-4-w-4-animate-spin"-/>-Saving...-</>-)-:-(-"Save-Configuration"-)}-</Button>-</form>-</Form>-</CardContent>-</Card>-</TabsContent>-</Tabs>-</div>-);-}-Actua-como-un-experto-en-UX/IU-y-aplica-las-heuristicas-de-neison-por-favor-no-me-gusta-nada-el-diseño-ni-la-maquetacion-de-este-forms.-reestructuralo-y-dame-algo-mas-interactivo-y-visual