diff --git a/website/src/components/Survey/TaskControls.tsx b/website/src/components/Survey/TaskControls.tsx
index a93889ea..13a2bb4e 100644
--- a/website/src/components/Survey/TaskControls.tsx
+++ b/website/src/components/Survey/TaskControls.tsx
@@ -4,7 +4,7 @@ import { SkipButton } from "src/components/Buttons/Skip";
import { SubmitButton } from "src/components/Buttons/Submit";
import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
-interface TaskControlsProps {
+export interface TaskControlsProps {
// we need a task type
// eslint-disable-next-line @typescript-eslint/no-explicit-any
tasks: any[];
diff --git a/website/src/components/Survey/TaskControlsOverridable.tsx b/website/src/components/Survey/TaskControlsOverridable.tsx
new file mode 100644
index 00000000..b5333087
--- /dev/null
+++ b/website/src/components/Survey/TaskControlsOverridable.tsx
@@ -0,0 +1,60 @@
+import {
+ Button,
+ Flex,
+ Modal,
+ ModalBody,
+ ModalCloseButton,
+ ModalContent,
+ ModalFooter,
+ ModalHeader,
+ ModalOverlay,
+ useDisclosure,
+} from "@chakra-ui/react";
+import { TaskControls, TaskControlsProps } from "./TaskControls";
+
+interface TaskControlsOverridableProps extends TaskControlsProps {
+ isValid: boolean;
+ prepareForSubmit: () => void;
+}
+
+export const TaskControlsOverridable = (props: TaskControlsOverridableProps) => {
+ const { isValid, onSubmitResponse, ...rest } = props;
+ const { isOpen: isModalOpen, onOpen: onOpenModal, onClose: onModalClose } = useDisclosure();
+
+ const unchangedResponsePrompt = () => {
+ onOpenModal();
+
+ // Ideally this happens when the user clicks submit, but we can't
+ // reliably wait for it to be executed before submitting the response
+ // without significant refactoring.
+ // As a result, modal will only display once even if the user doesn't proceed
+ props.prepareForSubmit();
+ };
+
+ const onSubmitResponseOverride = () => {
+ onSubmitResponse(props.tasks[0]);
+ onModalClose();
+ };
+
+ return (
+ <>
+
+
+
+
+ Order Unchanged
+ You have not changed the order of the prompts. Are you sure you would like to submit?
+
+
+
+
+
+
+
+
+
+ >
+ );
+};
diff --git a/website/src/pages/evaluate/rank_assistant_replies.tsx b/website/src/pages/evaluate/rank_assistant_replies.tsx
index 0ed69b09..d20f6364 100644
--- a/website/src/pages/evaluate/rank_assistant_replies.tsx
+++ b/website/src/pages/evaluate/rank_assistant_replies.tsx
@@ -6,7 +6,7 @@ import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Message } from "src/components/Messages";
import { Sortable } from "src/components/Sortable/Sortable";
import { SurveyCard } from "src/components/Survey/SurveyCard";
-import { TaskControls } from "src/components/Survey/TaskControls";
+import { TaskControlsOverridable } from "src/components/Survey/TaskControlsOverridable";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import useSWRImmutable from "swr/immutable";
@@ -90,7 +90,13 @@ const RankAssistantReplies = () => {
-
+ setRanking(tasks[0].task.replies.map((_, idx) => idx))}
+ onSubmitResponse={submitResponse}
+ onSkip={fetchNextTask}
+ />
>
);
diff --git a/website/src/pages/evaluate/rank_initial_prompts.tsx b/website/src/pages/evaluate/rank_initial_prompts.tsx
index a9d590ac..a0a48b27 100644
--- a/website/src/pages/evaluate/rank_initial_prompts.tsx
+++ b/website/src/pages/evaluate/rank_initial_prompts.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Sortable } from "src/components/Sortable/Sortable";
import { SurveyCard } from "src/components/Survey/SurveyCard";
-import { TaskControls } from "src/components/Survey/TaskControls";
+import { TaskControlsOverridable } from "src/components/Survey/TaskControlsOverridable";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import useSWRImmutable from "swr/immutable";
@@ -85,7 +85,13 @@ const RankInitialPrompts = () => {
-
+ setRanking(tasks[0].task.prompts.map((_, idx) => idx))}
+ onSubmitResponse={submitResponse}
+ onSkip={fetchNextTask}
+ />
>
);
diff --git a/website/src/pages/evaluate/rank_user_replies.tsx b/website/src/pages/evaluate/rank_user_replies.tsx
index 9a0577cb..09e24fa2 100644
--- a/website/src/pages/evaluate/rank_user_replies.tsx
+++ b/website/src/pages/evaluate/rank_user_replies.tsx
@@ -6,7 +6,7 @@ import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Message } from "src/components/Messages";
import { Sortable } from "src/components/Sortable/Sortable";
import { SurveyCard } from "src/components/Survey/SurveyCard";
-import { TaskControls } from "src/components/Survey/TaskControls";
+import { TaskControlsOverridable } from "src/components/Survey/TaskControlsOverridable";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import useSWRImmutable from "swr/immutable";
@@ -89,7 +89,13 @@ const RankUserReplies = () => {
-
+ setRanking(tasks[0].task.replies.map((_, idx) => idx))}
+ onSubmitResponse={submitResponse}
+ onSkip={fetchNextTask}
+ />
>
);