wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-06-29 16:30:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

website: Add a review step before submitting

Browse Source 
to hint to the user that they should reread and check what they have written.

Also show numbers for ranked items rather than drag handles in the review step as the items can't be moved in that step.
This commit is contained in:
Adrian Cowan
2023-01-14 01:25:46 +11:00
parent 3d4b57c071
commit eb43c8b4f8
11 changed files with 134 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/cypress/e2e/tasks/random.cy.ts
+4
View File
@@ -15,6 +15,8 @@ describe("handles random tasks", () => {
cy.log("reply", reply);
cy.get('[data-cy="reply"]').type(reply);
cy.get('[data-cy="review"]').click();
cy.get('[data-cy="submit"]').click();
cy.get('[data-cy="task-id]"').should((taskIdElement) => {
@@ -38,6 +40,8 @@ describe("handles random tasks", () => {
.wait(100)
.type("{enter}");
cy.get('[data-cy="review"]').click();
cy.get('[data-cy="submit"]').click();
cy.get('[data-cy="task-id"]').should((taskIdElement) => {
website/src/components/Sortable/Sortable.stories.tsx
+4 -2
View File
@@ -8,8 +8,8 @@ export default {
component: Sortable,
};
const Template = ({ items, isDisabled }) => {
return <Sortable items={items} isDisabled={isDisabled} className="my-8" />;
const Template = ({ items, isEditable, isDisabled }) => {
return <Sortable items={items} isEditable={isEditable} isDisabled={isDisabled} className="my-8" />;
};
export const Default = Template.bind({});
@@ -19,6 +19,7 @@ Default.args = {
"euirdteunvglfe23908230892309832098 AAAAAAAA",
"Sorry, my cat sat on my keyboard. Can you print a cat in ASCII art?",
],
isEditable: true,
isDisabled: false,
};
@@ -29,5 +30,6 @@ LongText.args = {
"Assistant: Yes, I think they can be helpful when the child misbehaves, but they should be used with a little bit of compassion and understanding that it\u2019s not the natural state of things to have an adult yelling at them. Time outs are also often used without letting the child know how they\u2019re getting out of the time out, which can make it feel arbitrary or like a punishment, rather than a consequence for something they did. It\u2019s really easy for adults to do this kind of thing unconsciously. It\u2019s easy to get caught up in the notion that \u201cThey\u2019re in time out, and that\u2019s the end of it!\u201d but kids can be pretty imaginative, and they can use their own creativity to make their way out of time outs. A compassionate time out ends when the child shows a sign of understanding what they\u2019ve done wrong, and are ready to begin again. That way the child knows they\u2019re learning, and that the parent is seeing them as an intelligent person, even if they sometimes mess up. You can still use the other techniques you were using to be tough when necessary, but using a compassionate approach will let you use them without actually using them!",
"Assistant: No. The USA was founded by a Puritan group of Protestants, but it didn\u2019t adopt the religion of the Puritans until much later, and it was always a secular state. The Puritans observed the Sabbath on Sunday, and the Puritans only had a small influence in the early history of the USA. It\u2019s difficult to trace the origins of closing stores on Sunday, but one early and short-lived attempt at forcing the Sabbath on people in the 1800s was motivated by the Protestant ideal that people should spend Sunday focusing on spiritual activities. By the mid-1800s, when the Sunday closing law was made, there was not a lot of pressure from that standpoint, but the church had begun to advocate for Sunday closing laws as a way of counteracting the negative effects of industrialization on the day of rest. Even after that shift, closing stores on Sunday was not always possible, since the religious Sunday was not always chosen for observance. And as industrialization accelerated and mechanization made it possible to operate stores on Sunday, the law was not enforced as much as people liked. The day of rest was also being violated by stores that stayed open all day on Sunday, so closing stores on Sundays became an effort to protect the Sabbath for all citizens.",
],
isEditable: true,
isDisabled: false,
};
website/src/components/Sortable/Sortable.tsx
+3 -2
View File
@@ -24,6 +24,7 @@ import { SortableItem } from "./SortableItem";
export interface SortableProps {
items: ReactNode[];
onChange?: (newSortedIndices: number[]) => void;
isEditable: boolean;
isDisabled?: boolean;
className?: string;
}
@@ -64,8 +65,8 @@ export const Sortable = (props: SortableProps) => {
>
<SortableContext items={itemsWithIds} strategy={verticalListSortingStrategy}>
<Flex direction="column" gap={2} className={extraClasses}>
{itemsWithIds.map(({ id, item }) => (
<SortableItem key={id} id={id} isDisabled={props.isDisabled}>
{itemsWithIds.map(({ id, item }, index) => (
<SortableItem key={id} id={id} index={index} isEditable={props.isEditable} isDisabled={props.isDisabled}>
<CollapsableText text={item} isDisabled={props.isDisabled} />
</SortableItem>
))}
website/src/components/Sortable/SortableItem.tsx
+10 -6
View File
@@ -4,12 +4,18 @@ import { CSS } from "@dnd-kit/utilities";
import { PropsWithChildren, useState } from "react";
import { RxDragHandleDots2 } from "react-icons/rx";
export const SortableItem = ({ children, id, isDisabled }: PropsWithChildren<{ id: number; isDisabled: boolean }>) => {
export const SortableItem = ({
children,
id,
index,
isEditable,
isDisabled,
}: PropsWithChildren<{ id: number; index: number; isEditable: boolean; isDisabled: boolean }>) => {
const backgroundColor = useColorModeValue("gray.700", "gray.500");
const disabledBackgroundColor = useColorModeValue("gray.400", "gray.700");
const textColor = useColorModeValue("white", "white");
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id, disabled: isDisabled });
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id, disabled: !isEditable });
const style = {
transform: CSS.Translate.toString(transform),
@@ -27,7 +33,7 @@ export const SortableItem = ({ children, id, isDisabled }: PropsWithChildren<{ i
borderRadius="lg"
p="4"
color={textColor}
cursor={isDisabled ? "auto" : grabbing ? "grabbing" : "grab"}
cursor={isEditable ? (grabbing ? "grabbing" : "grab") : "auto"}
onMouseDown={() => {
setGrabbing(true);
}}
@@ -38,9 +44,7 @@ export const SortableItem = ({ children, id, isDisabled }: PropsWithChildren<{ i
style={style}
shadow="base"
>
<Box pr="4">
<RxDragHandleDots2 size="20px" />
</Box>
<Box pr="4">{isEditable ? <RxDragHandleDots2 size="20px" /> : `${index + 1}.`}</Box>
{children}
</Box>
);
website/src/components/Survey/TaskControls.tsx
+31 -10
View File
@@ -1,4 +1,5 @@
import { Box, Flex, useColorModeValue } from "@chakra-ui/react";
import { Box, Flex, IconButton, Tooltip, useColorModeValue } from "@chakra-ui/react";
import { FiEdit2 } from "react-icons/fi";
import { SkipButton } from "src/components/Buttons/Skip";
import { SubmitButton } from "src/components/Buttons/Submit";
import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
@@ -10,6 +11,8 @@ export interface TaskControlsProps {
task: any;
className?: string;
taskStatus: TaskStatus;
onEdit: () => void;
onReview: () => void;
onSubmit: () => void;
onSkip: (reason: string) => void;
}
@@ -30,15 +33,33 @@ export const TaskControls = (props: TaskControlsProps) => {
>
<TaskInfo id={props.task.id} output="Submit your answer" />
<Flex width={["full", "fit-content"]} justify="center" ml="auto" gap={2}>
<SkipButton onSkip={props.onSkip} />
<SubmitButton
colorScheme="blue"
data-cy="submit"
disabled={props.taskStatus === "NOT_SUBMITTABLE" || props.taskStatus === "SUBMITTED"}
onClick={props.onSubmit}
>
Submit
</SubmitButton>
{props.taskStatus === "REVIEW" || props.taskStatus === "SUBMITTED" ? (
<>
<Tooltip label="Edit">
<IconButton size="lg" data-cy="edit" aria-label="edit" onClick={props.onEdit} icon={<FiEdit2 />} />
</Tooltip>
<SubmitButton
colorScheme="green"
data-cy="submit"
disabled={props.taskStatus === "SUBMITTED"}
onClick={props.onSubmit}
>
Submit
</SubmitButton>
</>
) : (
<>
<SkipButton onSkip={props.onSkip} />
<SubmitButton
colorScheme="blue"
data-cy="review"
disabled={props.taskStatus === "NOT_SUBMITTABLE"}
onClick={props.onReview}
>
Review
</SubmitButton>
</>
)}
</Flex>
</Box>
);
website/src/components/Tasks/CreateTask.tsx
+8 -2
View File
@@ -5,7 +5,13 @@ import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
import { TaskSurveyProps } from "src/components/Tasks/Task";
export const CreateTask = ({ task, taskType, isDisabled, onReplyChanged }: TaskSurveyProps<{ text: string }>) => {
export const CreateTask = ({
task,
taskType,
isEditable,
isDisabled,
onReplyChanged,
}: TaskSurveyProps<{ text: string }>) => {
const cardColor = useColorModeValue("gray.100", "gray.700");
const titleColor = useColorModeValue("gray.800", "gray.300");
const labelColor = useColorModeValue("gray.600", "gray.400");
@@ -50,7 +56,7 @@ export const CreateTask = ({ task, taskType, isDisabled, onReplyChanged }: TaskS
text={inputText}
onTextChange={textChangeHandler}
thresholds={{ low: 20, medium: 40, goal: 50 }}
textareaProps={{ placeholder: "Write your prompt here...", isDisabled }}
textareaProps={{ placeholder: "Write your prompt here...", isDisabled, isReadOnly: !isEditable }}
/>
</Stack>
</>
website/src/components/Tasks/EvaluateTask.tsx
+13 -2
View File
@@ -5,7 +5,12 @@ import { Sortable } from "src/components/Sortable/Sortable";
import { SurveyCard } from "src/components/Survey/SurveyCard";
import { TaskSurveyProps } from "src/components/Tasks/Task";
export const EvaluateTask = ({ task, isDisabled, onReplyChanged }: TaskSurveyProps<{ ranking: number[] }>) => {
export const EvaluateTask = ({
task,
isEditable,
isDisabled,
onReplyChanged,
}: TaskSurveyProps<{ ranking: number[] }>) => {
const cardColor = useColorModeValue("gray.100", "gray.700");
const titleColor = useColorModeValue("gray.800", "gray.300");
const labelColor = useColorModeValue("gray.600", "gray.400");
@@ -46,7 +51,13 @@ export const EvaluateTask = ({ task, isDisabled, onReplyChanged }: TaskSurveyPro
<Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
<MessageTable messages={messages} />
</Box>
<Sortable items={task[sortables]} isDisabled={isDisabled} onChange={onRank} className="my-8" />
<Sortable
items={task[sortables]}
isDisabled={isDisabled}
isEditable={isEditable}
onChange={onRank}
className="my-8"
/>
</SurveyCard>
</Box>
</div>
website/src/components/Tasks/LabelTask.tsx
+7 -7
View File
@@ -12,7 +12,7 @@ export const LabelTask = ({
task,
taskType,
onReplyChanged,
isDisabled,
isEditable,
}: TaskSurveyProps<{ text: string; labels: { [k: string]: number }; message_id: string }>) => {
const valid_labels = task.valid_labels;
const [sliderValues, setSliderValues] = useState<number[]>(new Array(valid_labels.length).fill(0));
@@ -65,7 +65,7 @@ export const LabelTask = ({
</Box>
)}
</>
<LabelSliderGroup labelIDs={task.valid_labels} isDisabled={isDisabled} onChange={onSliderChange} />
<LabelSliderGroup labelIDs={task.valid_labels} isEditable={isEditable} onChange={onSliderChange} />
</TwoColumnsWithCards>
</div>
);
@@ -75,10 +75,10 @@ export const LabelTask = ({
interface LabelSliderGroupProps {
labelIDs: Array<string>;
onChange: (sliderValues: number[]) => unknown;
isDisabled?: boolean;
isEditable: boolean;
}
export const LabelSliderGroup = ({ labelIDs, onChange, isDisabled }: LabelSliderGroupProps) => {
export const LabelSliderGroup = ({ labelIDs, onChange, isEditable }: LabelSliderGroupProps) => {
const [sliderValues, setSliderValues] = useState<number[]>(Array.from({ length: labelIDs.length }).map(() => 0));
return (
@@ -94,7 +94,7 @@ export const LabelSliderGroup = ({ labelIDs, onChange, isDisabled }: LabelSlider
onChange(sliderValues);
setSliderValues(newState);
}}
isDisabled={isDisabled}
isEditable={isEditable}
/>
))}
</Grid>
@@ -105,7 +105,7 @@ function CheckboxSliderItem(props: {
labelId: string;
sliderValue: number;
sliderHandler: (newVal: number) => unknown;
isDisabled: boolean;
isEditable: boolean;
}) {
const id = useId();
const { colorMode } = useColorMode();
@@ -118,7 +118,7 @@ function CheckboxSliderItem(props: {
{/* TODO: display real text instead of just the id */}
<span className={labelTextClass}>{props.labelId}</span>
</label>
<Slider defaultValue={0} isDisabled={props.isDisabled} onChangeEnd={(val) => props.sliderHandler(val / 100)}>
<Slider defaultValue={0} isDisabled={!props.isEditable} onChangeEnd={(val) => props.sliderHandler(val / 100)}>
<SliderTrack>
<SliderFilledTrack />
<SliderThumb />
website/src/components/Tasks/Task.tsx
+48 -20
View File
@@ -10,13 +10,14 @@ import { TaskContent } from "src/types/Task";
import { TaskReplyState } from "src/types/TaskReplyState";
import useSWRMutation from "swr/mutation";
export type TaskStatus = "NOT_SUBMITTABLE" | "DEFAULT" | "SUBMITABLE" | "SUBMITTED";
export type TaskStatus = "NOT_SUBMITTABLE" | "DEFAULT" | "VALID" | "REVIEW" | "SUBMITTED";
export interface TaskSurveyProps<T> {
// we need a task type
// eslint-disable-next-line @typescript-eslint/no-explicit-any
task: any;
taskType: TaskInfo;
isEditable: boolean;
isDisabled?: boolean;
onReplyChanged: (state: TaskReplyState<T>) => void;
}
@@ -50,20 +51,38 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
} else if (state.state === "DEFAULT") {
if (taskStatus !== "DEFAULT") setTaskStatus("DEFAULT");
} else if (state.state === "VALID") {
if (taskStatus !== "SUBMITABLE") setTaskStatus("SUBMITABLE");
} else if (state.state == "INVALID") {
if (taskStatus !== "VALID") setTaskStatus("VALID");
} else if (state.state === "INVALID") {
setTaskStatus("NOT_SUBMITTABLE");
}
}).current;
const submitResponse = () => {
const reviewResponse = () => {
switch (taskStatus) {
case "NOT_SUBMITTABLE":
return;
case "DEFAULT":
setShowUnchangedWarning(true);
break;
case "SUBMITABLE": {
case "VALID":
setTaskStatus("REVIEW");
break;
default:
return;
}
};
const editResponse = () => {
switch (taskStatus) {
case "REVIEW":
setTaskStatus("VALID");
break;
default:
return;
}
};
const submitResponse = () => {
switch (taskStatus) {
case "REVIEW": {
trigger({
id: frontendId,
update_type: taskType.update_type,
@@ -72,11 +91,14 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
setTaskStatus("SUBMITTED");
break;
}
case "SUBMITTED":
default:
return;
}
};
const edit_mode = taskStatus === "NOT_SUBMITTABLE" || taskStatus === "DEFAULT" || taskStatus === "VALID";
const submitted = taskStatus === "SUBMITTED";
function taskTypeComponent() {
switch (taskType.category) {
case TaskCategory.Create:
@@ -85,7 +107,8 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
key={task.id}
task={task}
taskType={taskType}
isDisabled={taskStatus === "SUBMITTED"}
isEditable={edit_mode}
isDisabled={submitted}
onReplyChanged={onReplyChanged}
/>
);
@@ -95,7 +118,8 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
key={task.id}
task={task}
taskType={taskType}
isDisabled={taskStatus === "SUBMITTED"}
isEditable={edit_mode}
isDisabled={submitted}
onReplyChanged={onReplyChanged}
/>
);
@@ -105,7 +129,8 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
key={task.id}
task={task}
taskType={taskType}
isDisabled={taskStatus === "SUBMITTED"}
isEditable={edit_mode}
isDisabled={submitted}
onReplyChanged={onReplyChanged}
/>
);
@@ -115,20 +140,23 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
return (
<div>
{taskTypeComponent()}
<TaskControls task={task} taskStatus={taskStatus} onSubmit={submitResponse} onSkip={rejectTask} />
<TaskControls
task={task}
taskStatus={taskStatus}
onEdit={editResponse}
onReview={reviewResponse}
onSubmit={submitResponse}
onSkip={rejectTask}
/>
<UnchangedWarning
show={showUnchangedWarning}
title={taskType.unchanged_title || "No changes"}
message={taskType.unchanged_message || "Are you sure you would like to submit?"}
message={taskType.unchanged_message || "Are you sure you would like to continue?"}
continueButtonText={"Continue anyway"}
onClose={() => setShowUnchangedWarning(false)}
onSubmitAnyway={() => {
onContinueAnyway={() => {
if (taskStatus === "DEFAULT") {
trigger({
id: frontendId,
update_type: taskType.update_type,
content: replyContent.current,
});
setTaskStatus("SUBMITTED");
setTaskStatus("REVIEW");
setShowUnchangedWarning(false);
}
}}
website/src/components/Tasks/TaskTypes.tsx
+3 -3
View File
@@ -68,7 +68,7 @@ export const TaskTypes: TaskInfo[] = [
type: "rank_prompter_replies",
update_type: "message_ranking",
unchanged_title: "Order Unchanged",
unchanged_message: "You have not changed the order of the prompts. Are you sure you would like to submit?",
unchanged_message: "You have not changed the order of the prompts. Are you sure you would like to continue?",
},
{
label: "Rank Assistant Replies",
@@ -78,7 +78,7 @@ export const TaskTypes: TaskInfo[] = [
type: "rank_assistant_replies",
update_type: "message_ranking",
unchanged_title: "Order Unchanged",
unchanged_message: "You have not changed the order of the prompts. Are you sure you would like to submit?",
unchanged_message: "You have not changed the order of the prompts. Are you sure you would like to continue?",
},
{
label: "Rank Initial Prompts",
@@ -88,7 +88,7 @@ export const TaskTypes: TaskInfo[] = [
type: "rank_initial_prompts",
update_type: "message_ranking",
unchanged_title: "Order Unchanged",
unchanged_message: "You have not changed the order of the prompts. Are you sure you would like to submit?",
unchanged_message: "You have not changed the order of the prompts. Are you sure you would like to continue?",
},
// label
{
website/src/components/Tasks/UnchangedWarning.tsx
+3 -2
View File
@@ -14,8 +14,9 @@ interface UnchangedWarningProps {
show: boolean;
title: string;
message: string;
continueButtonText: string;
onClose: () => void;
onSubmitAnyway: () => void;
onContinueAnyway: () => void;
}
export const UnchangedWarning = (props: UnchangedWarningProps) => {
@@ -32,7 +33,7 @@ export const UnchangedWarning = (props: UnchangedWarningProps) => {
<Button variant={"ghost"} onClick={props.onClose}>
Cancel
</Button>
<Button onClick={props.onSubmitAnyway}>Submit anyway</Button>
<Button onClick={props.onContinueAnyway}>{props.continueButtonText}</Button>
</Flex>
</ModalFooter>
</ModalContent>