added data-cy divs to Task components

This commit is contained in:
rsandb
2023-01-11 22:28:20 -06:00
parent 938beb4a74
commit 0f9867c542
3 changed files with 81 additions and 75 deletions
+32 -30
View File
@@ -18,35 +18,37 @@ export const CreateTask = ({ task, taskType, onReplyChanged }: TaskSurveyProps<{
};
return (
<TwoColumnsWithCards>
<>
<Stack spacing="1">
<Text fontSize="xl" fontWeight="bold" color={titleColor}>
{taskType.label}
</Text>
<Text fontSize="md" color={labelColor}>
{taskType.overview}
</Text>
</Stack>
{task.conversation ? (
<Box mt="4">
<Messages messages={task.conversation.messages} post_id={task.id} />
</Box>
) : null}
</>
<>
<Stack spacing="4">
<Text fontSize="xl" fontWeight="bold" color={titleColor}>
{taskType.instruction}
</Text>
<TrackedTextarea
text={inputText}
onTextChange={textChangeHandler}
thresholds={{ low: 20, medium: 40, goal: 50 }}
textareaProps={{ placeholder: "Write your prompt here..." }}
/>
</Stack>
</>
</TwoColumnsWithCards>
<div data-cy="task" data-task-type="create-task">
<TwoColumnsWithCards>
<>
<Stack spacing="1">
<Text fontSize="xl" fontWeight="bold" color={titleColor}>
{taskType.label}
</Text>
<Text fontSize="md" color={labelColor}>
{taskType.overview}
</Text>
</Stack>
{task.conversation ? (
<Box mt="4">
<Messages messages={task.conversation.messages} post_id={task.id} />
</Box>
) : null}
</>
<>
<Stack spacing="4">
<Text fontSize="xl" fontWeight="bold" color={titleColor}>
{taskType.instruction}
</Text>
<TrackedTextarea
text={inputText}
onTextChange={textChangeHandler}
thresholds={{ low: 20, medium: 40, goal: 50 }}
textareaProps={{ placeholder: "Write your prompt here..." }}
/>
</Stack>
</>
</TwoColumnsWithCards>
</div>
);
};
+18 -16
View File
@@ -32,21 +32,23 @@ export const EvaluateTask = ({ task, onReplyChanged }: TaskSurveyProps<{ ranking
const sortables = task.replies ? "replies" : "prompts";
return (
<Box mb="4">
<SurveyCard>
<Stack spacing="1">
<Text fontSize="xl" fontWeight="bold" color={titleColor}>
Instructions
</Text>
<Text fontSize="md" color={labelColor}>
Given the following {sortables}, sort them from best to worst, best being first, worst being last.
</Text>
</Stack>
<Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
<MessageTable messages={messages} />
</Box>
<Sortable items={task[sortables]} onChange={onRank} className="my-8" />
</SurveyCard>
</Box>
<div data-cy="task" data-task-type="evaluate-task">
<Box mb="4">
<SurveyCard>
<Stack spacing="1">
<Text fontSize="xl" fontWeight="bold" color={titleColor}>
Instructions
</Text>
<Text fontSize="md" color={labelColor}>
Given the following {sortables}, sort them from best to worst, best being first, worst being last.
</Text>
</Stack>
<Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
<MessageTable messages={messages} />
</Box>
<Sortable items={task[sortables]} onChange={onRank} className="my-8" />
</SurveyCard>
</Box>
</div>
);
};
+31 -29
View File
@@ -35,36 +35,38 @@ export const LabelTask = ({
const labelColor = useColorModeValue("gray.600", "gray.400");
return (
<TwoColumnsWithCards>
<>
<Text fontSize="xl" fontWeight="bold" color={titleColor}>
{taskType.label}
</Text>
<Text fontSize="md" color={labelColor}>
{taskType.overview}
</Text>
<div data-cy="task" data-task-type="label-task">
<TwoColumnsWithCards>
<>
<Text fontSize="xl" fontWeight="bold" color={titleColor}>
{taskType.label}
</Text>
<Text fontSize="md" color={labelColor}>
{taskType.overview}
</Text>
{task.conversation ? (
<Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
<MessageTable
messages={[
...(task.conversation ? task.conversation.messages : []),
{
text: task.reply,
is_assistant: task.type === TaskType.label_assistant_reply,
message_id: task.message_id,
},
]}
/>
</Box>
) : (
<Box mt="4">
<MessageView text={task.prompt} is_assistant={false} message_id={task.message_id} />
</Box>
)}
</>
<LabelSliderGroup labelIDs={task.valid_labels} onChange={onSliderChange} />
</TwoColumnsWithCards>
{task.conversation ? (
<Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
<MessageTable
messages={[
...(task.conversation ? task.conversation.messages : []),
{
text: task.reply,
is_assistant: task.type === TaskType.label_assistant_reply,
message_id: task.message_id,
},
]}
/>
</Box>
) : (
<Box mt="4">
<MessageView text={task.prompt} is_assistant={false} message_id={task.message_id} />
</Box>
)}
</>
<LabelSliderGroup labelIDs={task.valid_labels} onChange={onSliderChange} />
</TwoColumnsWithCards>
</div>
);
};