Function ModelParameterControl

sdk/app-builder/src/components/app-builder.tsx:3400–3506

({
  parameter,
  value,
  onChange,
}: {
  parameter: ModelParameterConfig
  value: string
  onChange: (value: string) => void
})

}

function ModelParameterControl({
  parameter,
  value,
  onChange,
}: {
  parameter: ModelParameterConfig
  value: string
  onChange: (value: string) => void
}) {
  const booleanOptions = getBooleanParameterOptions(parameter)
  if (booleanOptions) {
    const isOn = value === booleanOptions.on.id
    return (
      <div className="flex items-center gap-3">
        <span className="text-sm font-medium">{parameter.label}</span>
        <button
          type="button"
          role="switch"
          aria-checked={isOn}
          aria-label={parameter.label}
          className={cn(
            "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border p-0 transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
            isOn ? "border-primary bg-primary" : "border-input bg-muted"
          )}
          onClick={() => {
            onChange(
              isOn ? booleanOptions.off.id : booleanOptions.on.id
            )
          }}
        >
          <span
            aria-hidden="true"
            className={cn(
              "absolute left-0.5 top-1/2 size-4 -translate-y-1/2 rounded-full bg-background shadow-sm transition-transform",
              isOn ? "translate-x-4" : "translate-x-0"
            )}
          />
        </button>
      </div>
    )
  }

  if (parameter.values.length <= 4) {
    return (
      <Field>
        <FieldLabel>{parameter.label}</FieldLabel>
        <ToggleGroup
          value={[value]}
          onValueChange={(nextValue) => {
            if (nextValue[0]) {
              onChange(nextValue[0])
            }
          }}
          size="sm"
          variant="outline"
          className="rounded-md bg-muted/40 data-[size=sm]:rounded-md"
        >
          {parameter.values.map((option) => (