ContinuousAnnotationInput.tsx•1.79 kB
import { forwardRef } from "react";
import {
Flex,
Input,
NumberField,
NumberFieldProps,
Text,
} from "@phoenix/components";
import { AnnotationInputExplanation } from "@phoenix/components/annotation/AnnotationInputExplanation";
import { AnnotationInputLabel } from "@phoenix/components/annotation/AnnotationInputLabel";
import { AnnotationConfigContinuous } from "@phoenix/pages/settings/types";
import { AnnotationInputPropsBase } from "./types";
type ContinuousAnnotationInputProps =
AnnotationInputPropsBase<AnnotationConfigContinuous> & NumberFieldProps;
export const ContinuousAnnotationInput = forwardRef<
HTMLDivElement,
ContinuousAnnotationInputProps
>(({ annotationConfig, annotation, onSubmitExplanation, ...props }, ref) => {
return (
<Flex gap="size-50" alignItems="center" position="relative">
<AnnotationInputExplanation
annotation={annotation}
onSubmit={onSubmitExplanation}
/>
<NumberField
defaultValue={annotation?.score ?? undefined}
{...props}
ref={ref}
size="S"
minValue={annotationConfig?.lowerBound ?? 0}
maxValue={annotationConfig?.upperBound ?? 1}
css={{
width: "100%",
}}
>
<AnnotationInputLabel>{annotationConfig.name}</AnnotationInputLabel>
<Input
placeholder={
annotationConfig?.optimizationDirection === "MAXIMIZE"
? `e.g. ${annotationConfig.upperBound}`
: `e.g. ${annotationConfig.lowerBound}`
}
/>
<Text slot="description">
from {annotationConfig.lowerBound} to {annotationConfig.upperBound}
</Text>
</NumberField>
</Flex>
);
});
ContinuousAnnotationInput.displayName = "ContinuousAnnotationInput";