Require labels to be set on labeling task and setting up basic storybook stories for tasks

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/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..