Merge pull request #768 from LAION-AI/763-make-labels-required

Ensure labeling task requires answers before review stage

website/src/components/FlaggableElement.tsx

@@ -26,7 +26,7 @@ import { useEffect, useReducer } from "react";
 import { FiAlertCircle } from "react-icons/fi";
 import { get, post } from "src/lib/api";
 import { Message } from "src/types/Conversation";
-import { colors } from "styles/Theme/colors";
+import { colors } from "src/styles/Theme/colors";
 import useSWR from "swr";
 import useSWRMutation from "swr/mutation";
 
@@ -105,6 +105,10 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
     if (isLoading) {
       return;
     }
+    if (!data) {
+      updateReport({ type: "load_labels", labels: [] });
+      return;
+    }
     const { valid_labels } = data;
     updateReport({ type: "load_labels", labels: valid_labels });
   }, [data, isLoading]);

website/src/components/Survey/LabelSliderGroup.tsx

@@ -1,6 +1,6 @@
 import { Grid, Slider, SliderFilledTrack, SliderThumb, SliderTrack, useColorMode } from "@chakra-ui/react";
 import { useId, useState } from "react";
-import { colors } from "styles/Theme/colors";
+import { colors } from "src/styles/Theme/colors";
 
 // TODO: consolidate with FlaggableElement
 interface LabelSliderGroupProps {

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

@@ -19,7 +19,10 @@ export const LabelTask = ({
   const [sliderValues, setSliderValues] = useState<number[]>(new Array(valid_labels.length).fill(0));
 
   useEffect(() => {
-    onReplyChanged({ content: { labels: {}, text: task.reply, message_id: task.message_id }, state: "DEFAULT" });
+    onReplyChanged({
+      content: { labels: {}, text: task.reply, message_id: task.message_id },
+      state: "NOT_SUBMITTABLE",
+    });
   }, [task, onReplyChanged]);
 
   const onSliderChange = (values: number[]) => {

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

@@ -0,0 +1 @@
+export * from "./LabelTask";

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

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { Task } from "./Task";
+
+export default {
+  title: "tasks/Task",
+  component: Task,
+};
+
+const Template = ({ frontendId, task, trigger, mutate }) => {
+  return <Task frontendId={frontendId} task={task} trigger={trigger} mutate={mutate} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  frontendId: "1234",
+  task: {
+    conversation: [],
+    id: "1234-4321",
+    mandatory_labels: ["spam"],
+    message_id: "772f843e-f740-4aad-a44f-e3cf0260692c",
+    reply: "1231231231",
+    type: "label_prompter_reply",
+    valid_labels: ["spam", "fails_task"],
+  },
+  trigger: (id, update_type, content) => {
+    console.log(content);
+  },
+  mutate: () => {
+    console.log("mutate");
+  },
+};

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

@@ -0,0 +1 @@
+export * from "./Task";

website/src/lib/oasst_api_client.ts

@@ -16,7 +16,13 @@ export class OasstError {
 }
 
 export class OasstApiClient {
-  constructor(private readonly oasstApiUrl: string, private readonly oasstApiKey: string) {}
+  oasstApiUrl: string;
+  oasstApiKey: string;
+
+  constructor(oasstApiUrl: string, oasstApiKey: string) {
+    this.oasstApiUrl = oasstApiUrl;
+    this.oasstApiKey = oasstApiKey;
+  }
 
   private async post(path: string, body: any): Promise<any> {
     const resp = await fetch(`${this.oasstApiUrl}${path}`, {

website/src/pages/api/new_task/[task_type].ts

@@ -20,6 +20,7 @@ const handler = withoutRole("banned", async (req, res, token) => {
   } catch (err) {
     console.error(err);
     res.status(500).json(err);
+    return;
   }
 
   // Store the task and link it to the user..

website/src/types/TaskReplyState.ts

@@ -1,3 +1,7 @@
+export interface TaskReplyNotSubmittable<T> {
+  content: T;
+  state: "NOT_SUBMITTABLE";
+}
 export interface TaskReplyValid<T> {
   content: T;
   state: "VALID";
@@ -11,4 +15,8 @@ export interface TaskReplyInValid<T> {
   state: "INVALID";
 }
 
-export type TaskReplyState<T> = TaskReplyValid<T> | TaskReplyDefault<T> | TaskReplyInValid<T>;
+export type TaskReplyState<T> =
+  | TaskReplyNotSubmittable<T>
+  | TaskReplyValid<T>
+  | TaskReplyDefault<T>
+  | TaskReplyInValid<T>;