website: Switch to likert style labelling

website/src/components/Tasks/CreateTask.tsx

@@ -12,6 +12,7 @@ export const CreateTask = ({
   isEditable,
   isDisabled,
   onReplyChanged,
+  onValidityChanged,
 }: TaskSurveyProps<{ text: string }>) => {
   const cardColor = useColorModeValue("gray.50", "gray.800");
   const titleColor = useColorModeValue("gray.800", "gray.300");
@@ -20,11 +21,12 @@ export const CreateTask = ({
   const textChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     const text = event.target.value;
     const isTextBlank = !text || /^\s*$/.test(text) ? true : false;
+    onReplyChanged({ text });
     if (!isTextBlank) {
-      onReplyChanged({ content: { text }, state: "VALID" });
+      onValidityChanged("VALID");
       setInputText(text);
     } else {
-      onReplyChanged({ content: { text }, state: "INVALID" });
+      onValidityChanged("INVALID");
       setInputText("");
     }
   };

website/src/components/Tasks/EvaluateTask.tsx

@@ -1,5 +1,5 @@
 import { Box, useColorModeValue } from "@chakra-ui/react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { MessageTable } from "src/components/Messages/MessageTable";
 import { Sortable } from "src/components/Sortable/Sortable";
 import { SurveyCard } from "src/components/Survey/SurveyCard";
@@ -12,8 +12,10 @@ export const EvaluateTask = ({
   isEditable,
   isDisabled,
   onReplyChanged,
+  onValidityChanged,
 }: TaskSurveyProps<{ ranking: number[] }>) => {
   const cardColor = useColorModeValue("gray.50", "gray.800");
+  const [ranking, setRanking] = useState<number[]>(null);
 
   let messages = [];
   if (task.conversation) {
@@ -22,13 +24,15 @@ export const EvaluateTask = ({
   }
 
   useEffect(() => {
-    const ranking = (task.replies ?? task.prompts).map((_, idx) => idx);
-    onReplyChanged({ content: { ranking }, state: "DEFAULT" });
-  }, [task, onReplyChanged]);
-
-  const onRank = (newRanking: number[]) => {
-    onReplyChanged({ content: { ranking: newRanking }, state: "VALID" });
-  };
+    if (ranking === null) {
+      const defaultRanking = (task.replies ?? task.prompts).map((_, idx) => idx);
+      onReplyChanged({ ranking: defaultRanking });
+      onValidityChanged("DEFAULT");
+    } else {
+      onReplyChanged({ ranking });
+      onValidityChanged("VALID");
+    }
+  }, [task, ranking, onReplyChanged, onValidityChanged]);
 
   const sortables = task.replies ? "replies" : "prompts";
 
@@ -44,7 +48,7 @@ export const EvaluateTask = ({
             items={task[sortables]}
             isDisabled={isDisabled}
             isEditable={isEditable}
-            onChange={onRank}
+            onChange={setRanking}
             className="my-8"
           />
         </SurveyCard>

website/src/components/Tasks/LabelTask/LabelTask.tsx

@@ -1,9 +1,8 @@
-import { Box, useColorModeValue } from "@chakra-ui/react";
+import { Box, Flex, Text, useColorModeValue } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { MessageView } from "src/components/Messages";
 import { MessageTable } from "src/components/Messages/MessageTable";
-import { LabelRadioGroup } from "src/components/Survey/LabelRadioGroup";
-import { LabelSliderGroup } from "src/components/Survey/LabelSliderGroup";
+import { LabelInputGroup } from "src/components/Survey/LabelInputGroup";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
 import { TaskHeader } from "src/components/Tasks/TaskHeader";
@@ -12,28 +11,18 @@ import { TaskType } from "src/types/Task";
 export const LabelTask = ({
   task,
   taskType,
-  onReplyChanged,
   isEditable,
+  onReplyChanged,
+  onValidityChanged,
 }: TaskSurveyProps<{ text: string; labels: Record<string, number>; message_id: string }>) => {
-  const valid_labels = task.valid_labels;
-  const [sliderValues, setSliderValues] = useState<number[]>(new Array(valid_labels.length).fill(0));
+  const [sliderValues, setSliderValues] = useState<number[]>(new Array(task.valid_labels.length).fill(null));
 
   useEffect(() => {
-    onReplyChanged({
-      content: { labels: {}, text: task.reply, message_id: task.message_id },
-      state: "NOT_SUBMITTABLE",
-    });
-  }, [task, onReplyChanged]);
-
-  const onSliderChange = (values: number[]) => {
-    console.assert(valid_labels.length === sliderValues.length);
-    const labels = Object.fromEntries(valid_labels.map((label, i) => [label, sliderValues[i]]));
-    onReplyChanged({
-      content: { labels, text: task.reply || task.prompt, message_id: task.message_id },
-      state: "VALID",
-    });
-    setSliderValues(values);
-  };
+    console.assert(task.valid_labels.length === sliderValues.length);
+    const labels = Object.fromEntries(task.valid_labels.map((label, i) => [label, sliderValues[i]]));
+    onReplyChanged({ labels, text: task.reply || task.prompt, message_id: task.message_id });
+    onValidityChanged(sliderValues.every((value) => value !== null) ? "VALID" : "INVALID");
+  }, [task, sliderValues, onReplyChanged, onValidityChanged]);
 
   const cardColor = useColorModeValue("gray.50", "gray.800");
 
@@ -43,7 +32,7 @@ export const LabelTask = ({
         <>
           <TaskHeader taskType={taskType} />
           {task.conversation ? (
-            <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
+            <Box mt="4" p={[4, 6]} borderRadius="lg" bg={cardColor}>
               <MessageTable
                 messages={[
                   ...(task.conversation?.messages ?? []),
@@ -61,11 +50,15 @@ export const LabelTask = ({
             </Box>
           )}
         </>
-        {task.mode === "simple" ? (
-          <LabelRadioGroup labelIDs={task.valid_labels} isEditable={isEditable} onChange={onSliderChange} />
-        ) : (
-          <LabelSliderGroup labelIDs={task.valid_labels} isEditable={isEditable} onChange={onSliderChange} />
-        )}
+        <Flex direction="column" alignItems="stretch">
+          <Text>The highlighted message:</Text>
+          <LabelInputGroup
+            simple={task.mode === "simple"}
+            labelIDs={task.valid_labels}
+            isEditable={isEditable}
+            onChange={setSliderValues}
+          />
+        </Flex>
       </TwoColumnsWithCards>
     </div>
   );

website/src/components/Tasks/Task/Task.tsx

@@ -6,8 +6,7 @@ import { LabelTask } from "src/components/Tasks/LabelTask";
 import { TaskCategory, TaskInfo, TaskInfos } from "src/components/Tasks/TaskTypes";
 import { UnchangedWarning } from "src/components/Tasks/UnchangedWarning";
 import { post } from "src/lib/api";
-import { TaskContent } from "src/types/Task";
-import { TaskReplyState } from "src/types/TaskReplyState";
+import { TaskContent, TaskReplyValidity } from "src/types/Task";
 import useSWRMutation from "swr/mutation";
 
 export type TaskStatus = "NOT_SUBMITTABLE" | "DEFAULT" | "VALID" | "REVIEW" | "SUBMITTED";
@@ -19,7 +18,8 @@ export interface TaskSurveyProps<T> {
   taskType: TaskInfo;
   isEditable: boolean;
   isDisabled?: boolean;
-  onReplyChanged: (state: TaskReplyState<T>) => void;
+  onReplyChanged: (content: T) => void;
+  onValidityChanged: (validity: TaskReplyValidity) => void;
 }
 
 export const Task = ({ frontendId, task, trigger, mutate }) => {
@@ -44,20 +44,27 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
     });
   };
 
-  const onReplyChanged = useRef((state: TaskReplyState<TaskContent>) => {
-    if (taskStatus === "SUBMITTED") return;
+  const edit_mode = taskStatus === "NOT_SUBMITTABLE" || taskStatus === "DEFAULT" || taskStatus === "VALID";
+  const submitted = taskStatus === "SUBMITTED";
 
-    replyContent.current = state?.content;
-    if (state === null) {
-      if (taskStatus !== "NOT_SUBMITTABLE") setTaskStatus("NOT_SUBMITTABLE");
-    } else if (state.state === "DEFAULT") {
-      if (taskStatus !== "DEFAULT") setTaskStatus("DEFAULT");
-    } else if (state.state === "VALID") {
-      if (taskStatus !== "VALID") setTaskStatus("VALID");
-    } else if (state.state === "INVALID") {
-      setTaskStatus("NOT_SUBMITTABLE");
+  const onValidityChanged = (validity: TaskReplyValidity) => {
+    if (!edit_mode) return;
+    switch (validity) {
+      case "DEFAULT":
+        if (taskStatus !== "DEFAULT") setTaskStatus("DEFAULT");
+        break;
+      case "VALID":
+        if (taskStatus !== "VALID") setTaskStatus("VALID");
+        break;
+      case "INVALID":
+        if (taskStatus !== "NOT_SUBMITTABLE") setTaskStatus("NOT_SUBMITTABLE");
+        break;
     }
-  }).current;
+  };
+
+  const onReplyChanged = (content: TaskContent) => {
+    replyContent.current = content;
+  };
 
   const reviewResponse = () => {
     switch (taskStatus) {
@@ -99,9 +106,6 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
     }
   };
 
-  const edit_mode = taskStatus === "NOT_SUBMITTABLE" || taskStatus === "DEFAULT" || taskStatus === "VALID";
-  const submitted = taskStatus === "SUBMITTED";
-
   function taskTypeComponent() {
     switch (taskType.category) {
       case TaskCategory.Create:
@@ -113,6 +117,7 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
             isEditable={edit_mode}
             isDisabled={submitted}
             onReplyChanged={onReplyChanged}
+            onValidityChanged={onValidityChanged}
           />
         );
       case TaskCategory.Evaluate:
@@ -124,6 +129,7 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
             isEditable={edit_mode}
             isDisabled={submitted}
             onReplyChanged={onReplyChanged}
+            onValidityChanged={onValidityChanged}
           />
         );
       case TaskCategory.Label:
@@ -135,6 +141,7 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
             isEditable={edit_mode}
             isDisabled={submitted}
             onReplyChanged={onReplyChanged}
+            onValidityChanged={onValidityChanged}
           />
         );
     }

website/src/components/Tasks/TaskTypes.tsx

@@ -162,7 +162,7 @@ export const TaskInfos: TaskInfo[] = [
     category: TaskCategory.Label,
     pathname: "/label/label_prompter_reply",
     help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/prompting",
-    overview: "Read the following conversation and then answer the question about the last prompt in the discussion.",
+    overview: "Read the following conversation and then answer the question about the last reply in the discussion.",
     type: "label_prompter_reply",
     mode: "simple",
     update_type: "text_labels",
@@ -173,7 +173,7 @@ export const TaskInfos: TaskInfo[] = [
     category: TaskCategory.Label,
     pathname: "/label/label_assistant_reply",
     help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/prompting",
-    overview: "Read the following conversation and then answer the question about the last prompt in the discussion.",
+    overview: "Read the following conversation and then answer the question about the last reply in the discussion.",
     type: "label_assistant_reply",
     mode: "simple",
     update_type: "text_labels",