mirror of
https://github.com/lordmathis/llamactl.git
synced 2025-11-06 00:54:23 +00:00
Remove ZodFormField and BasicInstanceFields components
This commit is contained in:
@@ -1,144 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { Input } from '@/components/ui/input'
|
|
||||||
import { Label } from '@/components/ui/label'
|
|
||||||
import { Checkbox } from '@/components/ui/checkbox'
|
|
||||||
import { BackendType, type CreateInstanceOptions } from '@/types/instance'
|
|
||||||
import { getFieldType, basicFieldsConfig } from '@/lib/zodFormUtils'
|
|
||||||
|
|
||||||
interface ZodFormFieldProps {
|
|
||||||
fieldKey: keyof CreateInstanceOptions
|
|
||||||
value: string | number | boolean | string[] | undefined
|
|
||||||
onChange: (key: keyof CreateInstanceOptions, value: string | number | boolean | string[] | undefined) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const ZodFormField: React.FC<ZodFormFieldProps> = ({ fieldKey, value, onChange }) => {
|
|
||||||
// Get configuration for basic fields, or use field name for advanced fields
|
|
||||||
const config = basicFieldsConfig[fieldKey as string] || { label: fieldKey }
|
|
||||||
|
|
||||||
// Get type from Zod schema
|
|
||||||
const fieldType = getFieldType(fieldKey)
|
|
||||||
|
|
||||||
const handleChange = (newValue: string | number | boolean | string[] | undefined) => {
|
|
||||||
onChange(fieldKey, newValue)
|
|
||||||
}
|
|
||||||
|
|
||||||
const renderField = () => {
|
|
||||||
// Special handling for backend_type field - render as dropdown
|
|
||||||
if (fieldKey === 'backend_type') {
|
|
||||||
return (
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor={fieldKey}>
|
|
||||||
{config.label}
|
|
||||||
</Label>
|
|
||||||
<select
|
|
||||||
id={fieldKey}
|
|
||||||
value={typeof value === 'string' ? value : BackendType.LLAMA_CPP}
|
|
||||||
onChange={(e) => handleChange(e.target.value || undefined)}
|
|
||||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<option value={BackendType.LLAMA_CPP}>Llama Server</option>
|
|
||||||
<option value={BackendType.MLX_LM}>MLX LM</option>
|
|
||||||
<option value={BackendType.VLLM}>vLLM</option>
|
|
||||||
</select>
|
|
||||||
{config.description && (
|
|
||||||
<p className="text-sm text-muted-foreground">{config.description}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (fieldType) {
|
|
||||||
case 'boolean':
|
|
||||||
return (
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Checkbox
|
|
||||||
id={fieldKey}
|
|
||||||
checked={typeof value === 'boolean' ? value : false}
|
|
||||||
onCheckedChange={(checked) => handleChange(checked)}
|
|
||||||
/>
|
|
||||||
<Label htmlFor={fieldKey} className="text-sm font-normal">
|
|
||||||
{config.label}
|
|
||||||
{config.description && (
|
|
||||||
<span className="text-muted-foreground ml-1">- {config.description}</span>
|
|
||||||
)}
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
case 'number':
|
|
||||||
return (
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor={fieldKey}>
|
|
||||||
{config.label}
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id={fieldKey}
|
|
||||||
type="number"
|
|
||||||
step="any" // This allows decimal numbers
|
|
||||||
value={typeof value === 'string' || typeof value === 'number' ? value : ''}
|
|
||||||
onChange={(e) => {
|
|
||||||
const numValue = e.target.value ? parseFloat(e.target.value) : undefined
|
|
||||||
// Only update if the parsed value is valid or the input is empty
|
|
||||||
if (e.target.value === '' || (numValue !== undefined && !isNaN(numValue))) {
|
|
||||||
handleChange(numValue)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
placeholder={config.placeholder}
|
|
||||||
/>
|
|
||||||
{config.description && (
|
|
||||||
<p className="text-sm text-muted-foreground">{config.description}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
case 'array':
|
|
||||||
return (
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor={fieldKey}>
|
|
||||||
{config.label}
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id={fieldKey}
|
|
||||||
type="text"
|
|
||||||
value={Array.isArray(value) ? value.join(', ') : ''}
|
|
||||||
onChange={(e) => {
|
|
||||||
const arrayValue = e.target.value
|
|
||||||
? e.target.value.split(',').map(s => s.trim()).filter(Boolean)
|
|
||||||
: undefined
|
|
||||||
handleChange(arrayValue)
|
|
||||||
}}
|
|
||||||
placeholder="item1, item2, item3"
|
|
||||||
/>
|
|
||||||
{config.description && (
|
|
||||||
<p className="text-sm text-muted-foreground">{config.description}</p>
|
|
||||||
)}
|
|
||||||
<p className="text-xs text-muted-foreground">Separate multiple values with commas</p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
case 'text':
|
|
||||||
default:
|
|
||||||
return (
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor={fieldKey}>
|
|
||||||
{config.label}
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id={fieldKey}
|
|
||||||
type="text"
|
|
||||||
value={typeof value === 'string' || typeof value === 'number' ? value : ''}
|
|
||||||
onChange={(e) => handleChange(e.target.value || undefined)}
|
|
||||||
placeholder={config.placeholder}
|
|
||||||
/>
|
|
||||||
{config.description && (
|
|
||||||
<p className="text-sm text-muted-foreground">{config.description}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return <div className="space-y-2">{renderField()}</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ZodFormField
|
|
||||||
@@ -1,99 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { BackendType, type CreateInstanceOptions } from '@/types/instance'
|
|
||||||
import { getBasicFields, basicFieldsConfig } from '@/lib/zodFormUtils'
|
|
||||||
import { getFieldType } from '@/schemas/instanceOptions'
|
|
||||||
import TextInput from '@/components/form/TextInput'
|
|
||||||
import NumberInput from '@/components/form/NumberInput'
|
|
||||||
import CheckboxInput from '@/components/form/CheckboxInput'
|
|
||||||
import SelectInput from '@/components/form/SelectInput'
|
|
||||||
|
|
||||||
interface BasicInstanceFieldsProps {
|
|
||||||
formData: CreateInstanceOptions
|
|
||||||
onChange: (key: keyof CreateInstanceOptions, value: any) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const BasicInstanceFields: React.FC<BasicInstanceFieldsProps> = ({
|
|
||||||
formData,
|
|
||||||
onChange
|
|
||||||
}) => {
|
|
||||||
const basicFields = getBasicFields()
|
|
||||||
|
|
||||||
const renderField = (fieldKey: keyof CreateInstanceOptions) => {
|
|
||||||
const config = basicFieldsConfig[fieldKey as string] || { label: fieldKey }
|
|
||||||
const fieldType = getFieldType(fieldKey)
|
|
||||||
|
|
||||||
// Special handling for backend_type field
|
|
||||||
if (fieldKey === 'backend_type') {
|
|
||||||
return (
|
|
||||||
<SelectInput
|
|
||||||
key={fieldKey}
|
|
||||||
id={fieldKey}
|
|
||||||
label={config.label}
|
|
||||||
value={formData[fieldKey] || BackendType.LLAMA_CPP}
|
|
||||||
onChange={(value) => onChange(fieldKey, value)}
|
|
||||||
options={[
|
|
||||||
{ value: BackendType.LLAMA_CPP, label: 'Llama Server' },
|
|
||||||
{ value: BackendType.MLX_LM, label: 'MLX LM' },
|
|
||||||
{ value: BackendType.VLLM, label: 'vLLM' }
|
|
||||||
]}
|
|
||||||
description={config.description}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Render based on field type
|
|
||||||
switch (fieldType) {
|
|
||||||
case 'boolean':
|
|
||||||
return (
|
|
||||||
<CheckboxInput
|
|
||||||
key={fieldKey}
|
|
||||||
id={fieldKey}
|
|
||||||
label={config.label}
|
|
||||||
value={formData[fieldKey] as boolean | undefined}
|
|
||||||
onChange={(value) => onChange(fieldKey, value)}
|
|
||||||
description={config.description}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
|
|
||||||
case 'number':
|
|
||||||
return (
|
|
||||||
<NumberInput
|
|
||||||
key={fieldKey}
|
|
||||||
id={fieldKey}
|
|
||||||
label={config.label}
|
|
||||||
value={formData[fieldKey] as number | undefined}
|
|
||||||
onChange={(value) => onChange(fieldKey, value)}
|
|
||||||
placeholder={config.placeholder}
|
|
||||||
description={config.description}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
|
|
||||||
default:
|
|
||||||
return (
|
|
||||||
<TextInput
|
|
||||||
key={fieldKey}
|
|
||||||
id={fieldKey}
|
|
||||||
label={config.label}
|
|
||||||
value={formData[fieldKey] as string | number | undefined}
|
|
||||||
onChange={(value) => onChange(fieldKey, value)}
|
|
||||||
placeholder={config.placeholder}
|
|
||||||
description={config.description}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Filter out auto restart fields and backend_options (handled separately)
|
|
||||||
const fieldsToRender = basicFields.filter(
|
|
||||||
fieldKey => !['auto_restart', 'max_restarts', 'restart_delay', 'backend_options'].includes(fieldKey as string)
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-lg font-medium">Basic Configuration</h3>
|
|
||||||
{fieldsToRender.map(renderField)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BasicInstanceFields
|
|
||||||
Reference in New Issue
Block a user