Number input

"use client"

import * as React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/candor/ui/card"
import { Field } from "@/components/candor/ui/field"
import { NumberInput } from "@/components/candor/ui/number-input"
import { TooltipProvider } from "@/components/candor/ui/tooltip"

// Empty is null, not 0. The buttons stop at the range and say why; a typed value outside it is left for your check to name.
function TimeLimit() {
  const [minutes, setMinutes] = React.useState<number | null>(15)
  const error = minutes !== null && (minutes < 1 || minutes > 120) ? "Enter a time limit from 1 to 120 minutes" : undefined
  return (
    <Field label="Time limit per run" hint="The agent stops and reports what it finished." error={error} className="w-full max-w-xs">
      <NumberInput value={minutes} onValueChange={setMinutes} min={1} max={120} step={5} unit="minutes" />
    </Field>
  )
}

// A fine-tune card: an inspector built from Card and NumberInputs with `scrub`. Drag a grip sideways to change its
// number (Shift for ten steps at a time); the arrow keys and the step buttons do the same from the keyboard.
function FineTune() {
  const [temperature, setTemperature] = React.useState<number | null>(0.7)
  const [tokens, setTokens] = React.useState<number | null>(1200)
  const [retries, setRetries] = React.useState<number | null>(2)
  return (
    <Card className="w-full max-w-xs">
      <CardHeader>
        <CardTitle>Fine-tune</CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <Field label="Temperature">
          <NumberInput value={temperature} onValueChange={setTemperature} min={0} max={2} step={0.1} scrub />
        </Field>
        <Field label="Reply length">
          <NumberInput value={tokens} onValueChange={setTokens} min={100} max={8000} step={100} unit="tokens" scrub />
        </Field>
        <Field label="Retries">
          <NumberInput value={retries} onValueChange={setRetries} min={0} max={5} scrub />
        </Field>
      </CardContent>
    </Card>
  )
}

export default function Example() {
  return (
    <TooltipProvider>
      <div className="flex w-full flex-col gap-6">
        <TimeLimit />
        <FineTune />
      </div>
    </TooltipProvider>
  )
}