Merge pull request #591 from othrayte/refactor-task-pages

website: Refactor remaining task pages to use Task.tsx

website/src/components/Tasks/LabelTask.tsx

@@ -1,43 +1,71 @@
 import { Grid, Slider, SliderFilledTrack, SliderThumb, SliderTrack } from "@chakra-ui/react";
 import { useColorMode } from "@chakra-ui/react";
-import { ReactNode, useEffect, useId, useMemo, useState } from "react";
+import { useEffect, useId, useState } from "react";
+import { MessageView } from "src/components/Messages";
+import { MessageTable } from "src/components/Messages/MessageTable";
+import { TaskControls } from "src/components/Survey/TaskControls";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
+import { TaskInfo } from "src/components/Tasks/TaskTypes";
+import { TaskType } from "src/types/Task";
 import { colors } from "styles/Theme/colors";
 
-export const LabelTask = ({
-  title,
-  desc,
-  messages,
-  inputs,
-  controls,
-}: {
-  title: string;
-  desc: string;
-  messages: ReactNode;
-  inputs: ReactNode;
-  controls: ReactNode;
-}) => {
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
+export interface LabelTaskProps {
+  // we need a task type
+  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+  tasks: any[];
+  taskType: TaskInfo;
+  trigger: (update: {
+    id: string;
+    update_type: string;
+    content: { text: string; labels: { [k: string]: number }; message_id: string };
+  }) => void;
+  onSkipTask: (task: { id: string }, reason: string) => void;
+  onNextTask: () => void;
+  mainBgClasses: string;
+}
+export const LabelTask = ({ tasks, taskType, trigger, onSkipTask, onNextTask, mainBgClasses }: LabelTaskProps) => {
+  const task = tasks[0].task;
+  const valid_labels = tasks[0].valid_labels;
 
-  const card = useMemo(
-    () => (
-      <>
-        <h5 className="text-lg font-semibold">{title}</h5>
-        <p className="text-lg py-1">{desc}</p>
-        {messages}
-      </>
-    ),
-    [title, desc, messages]
-  );
+  const [sliderValues, setSliderValues] = useState<number[]>([]);
+
+  const submitResponse = (task: { id: string; reply: string; message_id: string }) => {
+    console.assert(valid_labels.length === sliderValues.length);
+    const labels = Object.fromEntries(valid_labels.valid_labels.map((label, i) => [label, sliderValues[i]]));
+    trigger({
+      id: task.id,
+      update_type: "text_labels",
+      content: { labels, text: task.reply, message_id: task.message_id },
+    });
+  };
 
   return (
     <div className={`p-12 ${mainBgClasses}`}>
       <TwoColumnsWithCards>
-        {card}
-        {inputs}
+        <>
+          <h5 className="text-lg font-semibold">{taskType.label}</h5>
+          <p className="text-lg py-1">{taskType.overview}</p>
+
+          {task.conversation ? (
+            <MessageTable
+              messages={[
+                ...(task.conversation ? task.conversation.messages : []),
+                {
+                  text: task.reply,
+                  is_assistant: task.type === TaskType.label_assistant_reply,
+                  message_id: task.message_id,
+                },
+              ]}
+              valid_labels={valid_labels}
+            />
+          ) : (
+            <MessageView text={task.prompt} is_assistant={false} message_id={task.message_id} />
+          )}
+        </>
+        <LabelSliderGroup labelIDs={task.valid_labels} onChange={setSliderValues} />
       </TwoColumnsWithCards>
-      {controls}
+
+      <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkipTask={onSkipTask} onNextTask={onNextTask} />
     </div>
   );
 };

website/src/components/Tasks/Task.tsx

@@ -1,12 +1,17 @@
+import { useColorMode } from "@chakra-ui/react";
 import { CreateTask } from "src/components/Tasks/CreateTask";
 import { EvaluateTask } from "src/components/Tasks/EvaluateTask";
+import { LabelTask } from "src/components/Tasks/LabelTask";
 import { TaskCategory, TaskTypes } from "src/components/Tasks/TaskTypes";
 import poster from "src/lib/poster";
 import useSWRMutation from "swr/mutation";
 
-export const Task = ({ tasks, trigger, mutate, mainBgClasses }) => {
+export const Task = ({ tasks, trigger, mutate }) => {
   const task = tasks[0].task;
 
+  const { colorMode } = useColorMode();
+  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
+
   const { trigger: sendRejection } = useSWRMutation("/api/reject_task", poster, {
     onSuccess: async () => {
       mutate();
@@ -45,6 +50,17 @@ export const Task = ({ tasks, trigger, mutate, mainBgClasses }) => {
             mainBgClasses={mainBgClasses}
           />
         );
+      case TaskCategory.Label:
+        return (
+          <LabelTask
+            tasks={tasks}
+            taskType={taskType}
+            trigger={trigger}
+            onSkipTask={rejectTask}
+            onNextTask={mutate}
+            mainBgClasses={mainBgClasses}
+          />
+        );
     }
   }
 

website/src/components/Tasks/TaskTypes.tsx

@@ -71,6 +71,7 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Provide labels for a prompt.",
     category: TaskCategory.Label,
     pathname: "/label/label_initial_prompt",
+    overview: "Provide labels for the following prompt",
     type: "label_initial_prompt",
   },
   {
@@ -78,6 +79,7 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Provide labels for a prompt.",
     category: TaskCategory.Label,
     pathname: "/label/label_prompter_reply",
+    overview: "Given the following discussion, provide labels for the final promp",
     type: "label_prompter_reply",
   },
   {
@@ -85,6 +87,7 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Provide labels for a prompt.",
     category: TaskCategory.Label,
     pathname: "/label/label_assistant_reply",
+    overview: "Given the following discussion, provide labels for the final prompt.",
     type: "label_assistant_reply",
   },
 ];

website/src/hooks/tasks/useLabelingTask.ts

@@ -1,32 +1,9 @@
-import { BaseTask, TaskResponse, TaskType } from "src/types/Task";
+import { TaskType } from "src/types/Task";
 import { LabelAssistantReplyTask, LabelInitialPromptTask, LabelPrompterReplyTask } from "src/types/Tasks";
 
 import { useGenericTaskAPI } from "./useGenericTaskAPI";
 
-const useLabelingTask = <Task extends BaseTask>(
-  endpoint: TaskType.label_assistant_reply | TaskType.label_prompter_reply | TaskType.label_initial_prompt
-) => {
-  const { tasks, isLoading, trigger, reset, error } = useGenericTaskAPI<Task>(endpoint);
-
-  const submit = (id: string, message_id: string, text: string, validLabels: string[], labelWeights: number[]) => {
-    console.assert(validLabels.length === labelWeights.length);
-    const labels = Object.fromEntries(validLabels.map((label, i) => [label, labelWeights[i]]));
-
-    return trigger({ id, update_type: "text_labels", content: { labels, text, message_id } });
-  };
-
-  return { tasks, isLoading, submit, reset, error };
-};
-
-export type LabelAssistantReplyTaskResponse = TaskResponse<LabelAssistantReplyTask>;
-
 export const useLabelAssistantReplyTask = () =>
-  useLabelingTask<LabelAssistantReplyTask>(TaskType.label_assistant_reply);
-
-export type LabelInitialPromptTaskResponse = TaskResponse<LabelInitialPromptTask>;
-
-export const useLabelInitialPromptTask = () => useLabelingTask<LabelInitialPromptTask>(TaskType.label_initial_prompt);
-
-export type LabelPrompterReplyTaskResponse = TaskResponse<LabelPrompterReplyTask>;
-
-export const useLabelPrompterReplyTask = () => useLabelingTask<LabelPrompterReplyTask>(TaskType.label_prompter_reply);
+  useGenericTaskAPI<LabelAssistantReplyTask>(TaskType.label_assistant_reply);
+export const useLabelInitialPromptTask = () => useGenericTaskAPI<LabelInitialPromptTask>(TaskType.label_initial_prompt);
+export const useLabelPrompterReplyTask = () => useGenericTaskAPI<LabelPrompterReplyTask>(TaskType.label_prompter_reply);

website/src/pages/create/assistant_reply.tsx

@@ -1,5 +1,4 @@
 import { Container } from "@chakra-ui/react";
-import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
@@ -8,9 +7,6 @@ import { useCreateAssistantReply } from "src/hooks/tasks/useCreateReply";
 const AssistantReply = () => {
   const { tasks, isLoading, reset, trigger } = useCreateAssistantReply();
 
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
-
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -25,7 +21,7 @@ const AssistantReply = () => {
         <title>Reply as Assistant</title>
         <meta name="description" content="Reply as Assistant." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
+      <Task tasks={tasks} trigger={trigger} mutate={reset} />
     </>
   );
 };

website/src/pages/create/initial_prompt.tsx

@@ -1,5 +1,4 @@
 import { Container } from "@chakra-ui/react";
-import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
@@ -8,9 +7,6 @@ import { useCreateInitialPrompt } from "src/hooks/tasks/useCreateReply";
 const InitialPrompt = () => {
   const { tasks, isLoading, reset, trigger } = useCreateInitialPrompt();
 
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
-
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -25,7 +21,7 @@ const InitialPrompt = () => {
         <title>Reply as Assistant</title>
         <meta name="description" content="Reply as Assistant." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
+      <Task tasks={tasks} trigger={trigger} mutate={reset} />
     </>
   );
 };

website/src/pages/create/user_reply.tsx

@@ -1,4 +1,3 @@
-import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { Container } from "src/components/Container";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -8,9 +7,6 @@ import { useCreatePrompterReply } from "src/hooks/tasks/useCreateReply";
 const UserReply = () => {
   const { tasks, isLoading, reset, trigger } = useCreatePrompterReply();
 
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
-
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -25,7 +21,7 @@ const UserReply = () => {
         <title>Reply as Assistant</title>
         <meta name="description" content="Reply as Assistant." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
+      <Task tasks={tasks} trigger={trigger} mutate={reset} />
     </>
   );
 };

website/src/pages/evaluate/rank_assistant_replies.tsx

@@ -1,4 +1,3 @@
-import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { Container } from "src/components/Container";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -8,9 +7,6 @@ import { useRankAssistantRepliesTask } from "src/hooks/tasks/useRankReplies";
 const RankAssistantReplies = () => {
   const { tasks, isLoading, reset, trigger } = useRankAssistantRepliesTask();
 
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
-
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -25,7 +21,7 @@ const RankAssistantReplies = () => {
         <title>Rank Assistant Replies</title>
         <meta name="description" content="Rank Assistant Replies." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
+      <Task tasks={tasks} trigger={trigger} mutate={reset} />
     </>
   );
 };

website/src/pages/evaluate/rank_initial_prompts.tsx

@@ -1,4 +1,3 @@
-import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { Container } from "src/components/Container";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -8,9 +7,6 @@ import { useRankInitialPromptsTask } from "src/hooks/tasks/useRankReplies";
 const RankInitialPrompts = () => {
   const { tasks, isLoading, reset, trigger } = useRankInitialPromptsTask();
 
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
-
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -25,7 +21,7 @@ const RankInitialPrompts = () => {
         <title>Rank Initial Prompts</title>
         <meta name="description" content="Rank initial prompts." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
+      <Task tasks={tasks} trigger={trigger} mutate={reset} />
     </>
   );
 };

website/src/pages/evaluate/rank_user_replies.tsx

@@ -1,4 +1,3 @@
-import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { Container } from "src/components/Container";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -8,9 +7,6 @@ import { useRankPrompterRepliesTask } from "src/hooks/tasks/useRankReplies";
 const RankUserReplies = () => {
   const { tasks, isLoading, reset, trigger } = useRankPrompterRepliesTask();
 
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
-
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -25,7 +21,7 @@ const RankUserReplies = () => {
         <title>Rank User Replies</title>
         <meta name="description" content="Rank User Replies." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
+      <Task tasks={tasks} trigger={trigger} mutate={reset} />
     </>
   );
 };

website/src/pages/label/label_assistant_reply.tsx

@@ -1,44 +1,28 @@
-import { useState } from "react";
+import { Container } from "@chakra-ui/react";
+import Head from "next/head";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
-import { MessageTable } from "src/components/Messages/MessageTable";
-import { TaskControls } from "src/components/Survey/TaskControls";
-import { LabelSliderGroup, LabelTask } from "src/components/Tasks/LabelTask";
-import { LabelAssistantReplyTaskResponse, useLabelAssistantReplyTask } from "src/hooks/tasks/useLabelingTask";
-import { Message } from "src/types/Conversation";
+import { Task } from "src/components/Tasks/Task";
+import { useLabelAssistantReplyTask } from "src/hooks/tasks/useLabelingTask";
 
 const LabelAssistantReply = () => {
-  const [sliderValues, setSliderValues] = useState<number[]>([]);
+  const { tasks, isLoading, trigger, reset } = useLabelAssistantReplyTask();
 
-  const { tasks, isLoading, submit, reset } = useLabelAssistantReplyTask();
-
-  if (isLoading || tasks.length === 0) {
+  if (isLoading) {
     return <LoadingScreen />;
   }
 
-  const task = tasks[0].task;
-  const valid_labels = tasks[0].valid_labels;
-  const messages: Message[] = [
-    ...task.conversation.messages,
-    { text: task.reply, is_assistant: true, message_id: task.message_id },
-  ];
+  if (tasks.length === 0) {
+    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+  }
 
   return (
-    <LabelTask
-      title="Label Assistant Reply"
-      desc="Given the following discussion, provide labels for the final prompt"
-      messages={<MessageTable messages={messages} valid_labels={valid_labels} />}
-      inputs={<LabelSliderGroup labelIDs={task.valid_labels} onChange={setSliderValues} />}
-      controls={
-        <TaskControls
-          tasks={tasks}
-          onSkipTask={() => reset()}
-          onNextTask={reset}
-          onSubmitResponse={({ id, task }: LabelAssistantReplyTaskResponse) =>
-            submit(id, task.message_id, task.reply, task.valid_labels, sliderValues)
-          }
-        />
-      }
-    />
+    <>
+      <Head>
+        <title>Label Assistant Reply</title>
+        <meta name="description" content="Label Assistant Reply" />
+      </Head>
+      <Task tasks={tasks} trigger={trigger} mutate={reset} />
+    </>
   );
 };
 

website/src/pages/label/label_initial_prompt.tsx

@@ -1,38 +1,28 @@
-import { useState } from "react";
+import { Container } from "@chakra-ui/react";
+import Head from "next/head";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
-import { MessageView } from "src/components/Messages";
-import { TaskControls } from "src/components/Survey/TaskControls";
-import { LabelSliderGroup, LabelTask } from "src/components/Tasks/LabelTask";
-import { LabelInitialPromptTaskResponse, useLabelInitialPromptTask } from "src/hooks/tasks/useLabelingTask";
+import { Task } from "src/components/Tasks/Task";
+import { useLabelInitialPromptTask } from "src/hooks/tasks/useLabelingTask";
 
 const LabelInitialPrompt = () => {
-  const [sliderValues, setSliderValues] = useState<number[]>([]);
+  const { tasks, isLoading, trigger, reset } = useLabelInitialPromptTask();
 
-  const { tasks, isLoading, submit, reset } = useLabelInitialPromptTask();
-
-  if (isLoading || tasks.length === 0) {
+  if (isLoading) {
     return <LoadingScreen />;
   }
 
-  const task = tasks[0].task;
+  if (tasks.length === 0) {
+    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+  }
 
   return (
-    <LabelTask
-      title="Label Initial Prompt"
-      desc="Provide labels for the following prompt"
-      messages={<MessageView text={task.prompt} is_assistant message_id={task.message_id} />}
-      inputs={<LabelSliderGroup labelIDs={task.valid_labels} onChange={setSliderValues} />}
-      controls={
-        <TaskControls
-          tasks={tasks}
-          onSkipTask={() => reset()}
-          onNextTask={reset}
-          onSubmitResponse={({ id, task }: LabelInitialPromptTaskResponse) =>
-            submit(id, task.message_id, task.prompt, task.valid_labels, sliderValues)
-          }
-        />
-      }
-    />
+    <>
+      <Head>
+        <title>Label Initial Prompt</title>
+        <meta name="description" content="Label Initial Prompt" />
+      </Head>
+      <Task tasks={tasks} trigger={trigger} mutate={reset} />
+    </>
   );
 };
 

website/src/pages/label/label_prompter_reply.tsx

@@ -1,44 +1,28 @@
-import { useState } from "react";
+import { Container } from "@chakra-ui/react";
+import Head from "next/head";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
-import { MessageTable } from "src/components/Messages/MessageTable";
-import { TaskControls } from "src/components/Survey/TaskControls";
-import { LabelSliderGroup, LabelTask } from "src/components/Tasks/LabelTask";
-import { LabelPrompterReplyTaskResponse, useLabelPrompterReplyTask } from "src/hooks/tasks/useLabelingTask";
-import { Message } from "src/types/Conversation";
+import { Task } from "src/components/Tasks/Task";
+import { useLabelPrompterReplyTask } from "src/hooks/tasks/useLabelingTask";
 
 const LabelPrompterReply = () => {
-  const [sliderValues, setSliderValues] = useState<number[]>([]);
+  const { tasks, isLoading, trigger, reset } = useLabelPrompterReplyTask();
 
-  const { tasks, isLoading, submit, reset } = useLabelPrompterReplyTask();
-
-  if (isLoading || tasks.length === 0) {
+  if (isLoading) {
     return <LoadingScreen />;
   }
 
-  const task = tasks[0].task;
-  const valid_labels = tasks[0].valid_labels;
-  const messages: Message[] = [
-    ...task.conversation.messages,
-    { text: task.reply, is_assistant: false, message_id: task.message_id },
-  ];
+  if (tasks.length === 0) {
+    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+  }
 
   return (
-    <LabelTask
-      title="Label Prompter Reply"
-      desc="Given the following discussion, provide labels for the final prompt"
-      messages={<MessageTable messages={messages} valid_labels={valid_labels} />}
-      inputs={<LabelSliderGroup labelIDs={task.valid_labels} onChange={setSliderValues} />}
-      controls={
-        <TaskControls
-          tasks={tasks}
-          onSkipTask={() => reset()}
-          onNextTask={reset}
-          onSubmitResponse={({ id, task }: LabelPrompterReplyTaskResponse) =>
-            submit(id, task.message_id, task.reply, task.valid_labels, sliderValues)
-          }
-        />
-      }
-    />
+    <>
+      <Head>
+        <title>Label Prompter Reply</title>
+        <meta name="description" content="Label Prompter Reply" />
+      </Head>
+      <Task tasks={tasks} trigger={trigger} mutate={reset} />
+    </>
   );
 };