website: Remove next task button and load new task immediately

Also disable the task inputs while the task is submitted and before the new task is ready in case the users network is slow or something.

website/src/components/Tasks/CreateTask.tsx

@@ -1,11 +1,11 @@
 import { Box, Stack, Text, useColorModeValue } from "@chakra-ui/react";
 import { useState } from "react";
+import { MessageTable } from "src/components/Messages/MessageTable";
 import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
-import { MessageTable } from "../Messages/MessageTable";
 
-export const CreateTask = ({ task, taskType, onReplyChanged }: TaskSurveyProps<{ text: string }>) => {
+export const CreateTask = ({ task, taskType, 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");
@@ -45,7 +45,7 @@ export const CreateTask = ({ task, taskType, onReplyChanged }: TaskSurveyProps<{
               text={inputText}
               onTextChange={textChangeHandler}
               thresholds={{ low: 20, medium: 40, goal: 50 }}
-              textareaProps={{ placeholder: "Write your prompt here..." }}
+              textareaProps={{ placeholder: "Write your prompt here...", isDisabled }}
             />
           </Stack>
         </>

website/src/components/Tasks/EvaluateTask.tsx

@@ -5,7 +5,7 @@ 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, onReplyChanged }: TaskSurveyProps<{ ranking: number[] }>) => {
+export const EvaluateTask = ({ task, 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 +46,7 @@ export const EvaluateTask = ({ task, onReplyChanged }: TaskSurveyProps<{ ranking
           <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
             <MessageTable messages={messages} />
           </Box>
-          <Sortable items={task[sortables]} onChange={onRank} className="my-8" />
+          <Sortable items={task[sortables]} isDisabled={isDisabled} onChange={onRank} className="my-8" />
         </SurveyCard>
       </Box>
     </div>

website/src/components/Tasks/LabelTask.tsx

@@ -12,6 +12,7 @@ export const LabelTask = ({
   task,
   taskType,
   onReplyChanged,
+  isDisabled,
 }: 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));
@@ -64,7 +65,7 @@ export const LabelTask = ({
             </Box>
           )}
         </>
-        <LabelSliderGroup labelIDs={task.valid_labels} onChange={onSliderChange} />
+        <LabelSliderGroup labelIDs={task.valid_labels} isDisabled={isDisabled} onChange={onSliderChange} />
       </TwoColumnsWithCards>
     </div>
   );
@@ -74,9 +75,10 @@ export const LabelTask = ({
 interface LabelSliderGroupProps {
   labelIDs: Array<string>;
   onChange: (sliderValues: number[]) => unknown;
+  isDisabled?: boolean;
 }
 
-export const LabelSliderGroup = ({ labelIDs, onChange }: LabelSliderGroupProps) => {
+export const LabelSliderGroup = ({ labelIDs, onChange, isDisabled }: LabelSliderGroupProps) => {
   const [sliderValues, setSliderValues] = useState<number[]>(Array.from({ length: labelIDs.length }).map(() => 0));
 
   return (
@@ -92,6 +94,7 @@ export const LabelSliderGroup = ({ labelIDs, onChange }: LabelSliderGroupProps)
             onChange(sliderValues);
             setSliderValues(newState);
           }}
+          isDisabled={isDisabled}
         />
       ))}
     </Grid>
@@ -102,6 +105,7 @@ function CheckboxSliderItem(props: {
   labelId: string;
   sliderValue: number;
   sliderHandler: (newVal: number) => unknown;
+  isDisabled: boolean;
 }) {
   const id = useId();
   const { colorMode } = useColorMode();
@@ -114,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} onChangeEnd={(val) => props.sliderHandler(val / 100)}>
+      <Slider defaultValue={0} isDisabled={props.isDisabled} onChangeEnd={(val) => props.sliderHandler(val / 100)}>
         <SliderTrack>
           <SliderFilledTrack />
           <SliderThumb />

website/src/components/Tasks/Task.tsx

@@ -17,6 +17,7 @@ export interface TaskSurveyProps<T> {
   // eslint-disable-next-line  @typescript-eslint/no-explicit-any
   task: any;
   taskType: TaskInfo;
+  isDisabled?: boolean;
   onReplyChanged: (state: TaskReplyState<T>) => void;
 }
 
@@ -77,24 +78,42 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
   function taskTypeComponent() {
     switch (taskType.category) {
       case TaskCategory.Create:
-        return <CreateTask key={task.id} task={task} taskType={taskType} onReplyChanged={onReplyChanged} />;
+        return (
+          <CreateTask
+            key={task.id}
+            task={task}
+            taskType={taskType}
+            isDisabled={taskStatus === "SUBMITTED"}
+            onReplyChanged={onReplyChanged}
+          />
+        );
       case TaskCategory.Evaluate:
-        return <EvaluateTask key={task.id} task={task} taskType={taskType} onReplyChanged={onReplyChanged} />;
+        return (
+          <EvaluateTask
+            key={task.id}
+            task={task}
+            taskType={taskType}
+            isDisabled={taskStatus === "SUBMITTED"}
+            onReplyChanged={onReplyChanged}
+          />
+        );
       case TaskCategory.Label:
-        return <LabelTask key={task.id} task={task} taskType={taskType} onReplyChanged={onReplyChanged} />;
+        return (
+          <LabelTask
+            key={task.id}
+            task={task}
+            taskType={taskType}
+            isDisabled={taskStatus === "SUBMITTED"}
+            onReplyChanged={onReplyChanged}
+          />
+        );
     }
   }
 
   return (
     <div>
       {taskTypeComponent()}
-      <TaskControls
-        task={task}
-        taskStatus={taskStatus}
-        onSubmit={submitResponse}
-        onSkip={rejectTask}
-        onNextTask={mutate}
-      />
+      <TaskControls task={task} taskStatus={taskStatus} onSubmit={submitResponse} onSkip={rejectTask} />
       <UnchangedWarning
         show={showUnchangedWarning}
         title={taskType.unchanged_title || "No changes"}