Merge branch 'LAION-AI:main' into messageNavigation

website/src/components/Dashboard/TaskOption.tsx

@@ -2,6 +2,12 @@ import { Box, Flex, GridItem, Heading, SimpleGrid, Text, useColorModeValue } fro
 import Link from "next/link";
 
 const crTasks = [
+  {
+    label: "Create Initial Prompts",
+    desc: "Write initial prompts to help Open Assistant to try replying to diverse messages.",
+    type: "create",
+    pathname: "/create/initial_prompt",
+  },
   {
     label: "Reply as User",
     desc: "Chat with Open Assistant and help improve it’s responses as you interact with it.",

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[];
@@ -30,11 +30,11 @@ export const TaskControls = (props: TaskControlsProps) => {
       <Flex justify="center" ml="auto" gap={2}>
         <SkipButton>Skip</SkipButton>
         {endTask.task.type !== "task_done" ? (
-          <SubmitButton data-cy="submit" onClick={() => props.onSubmitResponse(props.tasks[0])}>
+          <SubmitButton colorScheme="blue" data-cy="submit" onClick={() => props.onSubmitResponse(props.tasks[0])}>
             Submit
           </SubmitButton>
         ) : (
-          <SubmitButton data-cy="next-task" onClick={props.onSkip}>
+          <SubmitButton colorScheme="green" data-cy="next-task" onClick={props.onSkip}>
             Next Task
           </SubmitButton>
         )}

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 (
+    <>
+      <Modal isOpen={isModalOpen} onClose={onModalClose} isCentered>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalCloseButton />
+          <ModalHeader>Order Unchanged</ModalHeader>
+          <ModalBody>You have not changed the order of the prompts. Are you sure you would like to submit?</ModalBody>
+          <ModalFooter>
+            <Flex justify="center" ml="auto" gap={2}>
+              <Button variant={"ghost"} onClick={onModalClose}>
+                Cancel
+              </Button>
+              <Button onClick={onSubmitResponseOverride}>Submit anyway</Button>
+            </Flex>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+      <TaskControls onSubmitResponse={isValid ? props.onSubmitResponse : unchangedResponsePrompt} {...rest} />
+    </>
+  );
+};