Prompt for reason for skipping.

Note: skipping is only half implemented for labelling and summarisation tasks as those probably need to be changed to use the new Task component.

website/src/components/Tasks/CreateTask.tsx

@@ -1,10 +1,22 @@
 import { useState } from "react";
+
 import { Messages } from "src/components/Messages";
 import { TaskControls } from "src/components/Survey/TaskControls";
 import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
+import { TaskType } from "./TaskTypes";
 
-export const CreateTask = ({ tasks, taskType, trigger, mutate, mainBgClasses }) => {
+export interface CreateTaskProps {
+  // we need a task type
+  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+  tasks: any[];
+  taskType: TaskType;
+  trigger: (update: { id: string; update_type: string; content: { text: string } }) => void;
+  onSkipTask: (task: { id: string }, reason: string) => void;
+  onNextTask: () => void;
+  mainBgClasses: string;
+}
+export const CreateTask = ({ tasks, taskType, trigger, onSkipTask, onNextTask, mainBgClasses }: CreateTaskProps) => {
   const task = tasks[0].task;
 
   const [inputText, setInputText] = useState("");
@@ -20,11 +32,6 @@ export const CreateTask = ({ tasks, taskType, trigger, mutate, mainBgClasses })
     });
   };
 
-  const fetchNextTask = () => {
-    setInputText("");
-    mutate();
-  };
-
   const textChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     setInputText(event.target.value);
   };
@@ -48,7 +55,15 @@ export const CreateTask = ({ tasks, taskType, trigger, mutate, mainBgClasses })
         </>
       </TwoColumnsWithCards>
 
-      <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
+      <TaskControls
+        tasks={tasks}
+        onSubmitResponse={submitResponse}
+        onSkipTask={(task, reason) => {
+          setInputText("");
+          onSkipTask(task, reason);
+        }}
+        onNextTask={onNextTask}
+      />
     </div>
   );
 };

website/src/components/Tasks/EvaluateTask.tsx

@@ -5,7 +5,17 @@ import { TaskControlsOverridable } from "src/components/Survey/TaskControlsOverr
 
 import { MessageTable } from "../Messages/MessageTable";
 
-export const EvaluateTask = ({ tasks, trigger, mutate, mainBgClasses }) => {
+export interface EvaluateTaskProps {
+  // we need a task type
+  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+  tasks: any[];
+  trigger: (update: { id: string; update_type: string; content: { ranking: number[] } }) => void;
+  onSkipTask: (task: { id: string }, reason: string) => void;
+  onNextTask: () => void;
+  mainBgClasses: string;
+}
+
+export const EvaluateTask = ({ tasks, trigger, onSkipTask, onNextTask, mainBgClasses }: EvaluateTaskProps) => {
   const [ranking, setRanking] = useState<number[]>([]);
   const submitResponse = (task) => {
     trigger({
@@ -17,10 +27,6 @@ export const EvaluateTask = ({ tasks, trigger, mutate, mainBgClasses }) => {
     });
   };
 
-  const fetchNextTask = () => {
-    setRanking([]);
-    mutate();
-  };
   let messages = null;
   if (tasks[0].task.conversation) {
     messages = tasks[0].task.conversation.messages;
@@ -45,7 +51,11 @@ export const EvaluateTask = ({ tasks, trigger, mutate, mainBgClasses }) => {
         isValid={ranking.length == tasks[0].task[sortables].length}
         prepareForSubmit={() => setRanking(tasks[0].task[sortables].map((_, idx) => idx))}
         onSubmitResponse={submitResponse}
-        onSkip={fetchNextTask}
+        onSkipTask={(task, reason) => {
+          setRanking([]);
+          onSkipTask(task, reason);
+        }}
+        onNextTask={onNextTask}
       />
     </div>
   );

website/src/components/Tasks/Task.tsx

@@ -1,10 +1,25 @@
 import { CreateTask } from "./CreateTask";
 import { EvaluateTask } from "./EvaluateTask";
 import { TaskCategory, TaskTypes } from "./TaskTypes";
+import useSWRMutation from "swr/mutation";
+import poster from "src/lib/poster";
 
 export const Task = ({ tasks, trigger, mutate, mainBgClasses }) => {
   const task = tasks[0].task;
 
+  const { trigger: sendRejection } = useSWRMutation("/api/reject_task", poster, {
+    onSuccess: async () => {
+      mutate();
+    },
+  });
+
+  const rejectTask = (task: { id: string }, reason: string) => {
+    sendRejection({
+      id: task.id,
+      reason,
+    });
+  };
+
   function taskTypeComponent(type) {
     const taskType = TaskTypes.find((taskType) => taskType.type === type);
     const category = taskType.category;
@@ -14,13 +29,22 @@ export const Task = ({ tasks, trigger, mutate, mainBgClasses }) => {
           <CreateTask
             tasks={tasks}
             trigger={trigger}
-            mutate={mutate}
+            onSkipTask={rejectTask}
+            onNextTask={mutate}
             taskType={taskType}
             mainBgClasses={mainBgClasses}
           />
         );
       case TaskCategory.Evaluate:
-        return <EvaluateTask tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />;
+        return (
+          <EvaluateTask
+            tasks={tasks}
+            trigger={trigger}
+            onSkipTask={rejectTask}
+            onNextTask={mutate}
+            mainBgClasses={mainBgClasses}
+          />
+        );
     }
   }
 

website/src/components/Tasks/TaskTypes.tsx

@@ -4,7 +4,17 @@ export enum TaskCategory {
   Label = "Label",
 }
 
-export const TaskTypes = [
+export interface TaskType {
+  label: string;
+  desc: string;
+  category: TaskCategory;
+  pathname: string;
+  type: string;
+  overview?: string;
+  instruction?: string;
+}
+
+export const TaskTypes: TaskType[] = [
   // create
   {
     label: "Create Initial Prompts",