Merge pull request #702 from LAION-AI/labeling-fix

Fix full labelling task display

website/src/components/FlaggableElement.tsx

@@ -146,7 +146,7 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
       isLazy
       lazyBehavior="keepMounted"
     >
-      <Grid display="flex" alignItems="center" gap="1">
+      <Grid display="flex" alignItems="center" gap="2">
         <PopoverAnchor>{props.children}</PopoverAnchor>
         <Tooltip label="Report" bg="red.500" aria-label="A tooltip">
           <div>

website/src/components/Messages/MessageTable.tsx

@@ -11,7 +11,7 @@ export function MessageTable({ messages, enableLink }: MessageTableProps) {
   return (
     <Stack spacing="3">
       {messages.map((item) => (
-        <MessageTableEntry enabled={enableLink} item={item} key={item.id || item.frontend_message_id} />
+        <MessageTableEntry enabled={enableLink} item={item} key={item.id + item.frontend_message_id} />
       ))}
     </Stack>
   );

website/src/components/Messages/MessageTableEntry.tsx

@@ -18,8 +18,8 @@ export function MessageTableEntry(props: MessageTableEntryProps) {
   const borderColor = useColorModeValue("blackAlpha.200", "whiteAlpha.200");
 
   return (
-    <FlaggableElement message={item} key={`flag_${item.id || item.frontend_message_id}`}>
-      <HStack>
+    <FlaggableElement message={item}>
+      <HStack w="100%" gap={2}>
         <Box borderRadius="full" border="solid" borderWidth="1px" borderColor={borderColor} bg={avatarColor}>
           <Avatar
             size="sm"
@@ -31,7 +31,7 @@ export function MessageTableEntry(props: MessageTableEntryProps) {
           <Box maxWidth="xl">
             <Link href={`/messages/${item.id}`}>
               <LinkBox
-                bg={item.is_assistant ? `${backgroundColor}` : `${backgroundColor2}`}
+                bg={item.is_assistant ? backgroundColor : backgroundColor2}
                 className={`p-4 rounded-md whitespace-pre-wrap w-full`}
               >
                 {item.text}
@@ -39,13 +39,12 @@ export function MessageTableEntry(props: MessageTableEntryProps) {
             </Link>
           </Box>
         ) : (
-          <Box maxWidth="xl">
-            <Box
-              bg={item.is_assistant ? `${backgroundColor}` : `${backgroundColor2}`}
-              className={`p-4 rounded-md whitespace-pre-wrap w-full`}
-            >
-              {item.text}
-            </Box>
+          <Box
+            maxWidth="xl"
+            bg={item.is_assistant ? backgroundColor : backgroundColor2}
+            className={`p-4 rounded-md whitespace-pre-wrap w-full`}
+          >
+            {item.text}
           </Box>
         )}
       </HStack>

website/src/components/Survey/LabelSliderGroup.tsx

@@ -1,4 +1,4 @@
-import { Box, Grid, Slider, SliderFilledTrack, SliderThumb, SliderTrack, useColorMode } from "@chakra-ui/react";
+import { Grid, Slider, SliderFilledTrack, SliderThumb, SliderTrack, useColorMode } from "@chakra-ui/react";
 import { useId, useState } from "react";
 import { colors } from "styles/Theme/colors";
 
@@ -13,7 +13,7 @@ export const LabelSliderGroup = ({ labelIDs, onChange, isEditable }: LabelSlider
   const [sliderValues, setSliderValues] = useState<number[]>(Array.from({ length: labelIDs.length }).map(() => 0));
 
   return (
-    <Grid templateColumns="auto 1fr" rowGap={1} columnGap={3}>
+    <Grid templateColumns="auto 1fr" rowGap={1} columnGap={4}>
       {labelIDs.map((labelId, idx) => (
         <CheckboxSliderItem
           key={idx}
@@ -44,12 +44,14 @@ function CheckboxSliderItem(props: {
   const labelTextClass = colorMode === "light" ? `text-${colors.light.text}` : `text-${colors.dark.text}`;
 
   return (
-    <Box data-cy="label-group-item" data-label-type="slider">
+    <>
       <label className="text-sm" htmlFor={id}>
         {/* TODO: display real text instead of just the id */}
         <span className={labelTextClass}>{props.labelId}</span>
       </label>
       <Slider
+        data-cy="label-group-item"
+        data-label-type="slider"
         aria-roledescription="slider"
         defaultValue={0}
         isDisabled={!props.isEditable}
@@ -60,6 +62,6 @@ function CheckboxSliderItem(props: {
           <SliderThumb />
         </SliderTrack>
       </Slider>
-    </Box>
+    </>
   );
 }

website/src/components/Tasks/LabelTask.tsx

@@ -14,13 +14,13 @@ export const LabelTask = ({
   taskType,
   onReplyChanged,
   isEditable,
-}: TaskSurveyProps<{ text: string; labels: { [k: string]: number }; message_id: string }>) => {
+}: 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));
 
   useEffect(() => {
     onReplyChanged({ content: { labels: {}, text: task.reply, message_id: task.message_id }, state: "DEFAULT" });
-  }, [task.reply, task.message_id, onReplyChanged]);
+  }, [task, onReplyChanged]);
 
   const onSliderChange = (values: number[]) => {
     console.assert(valid_labels.length === sliderValues.length);
@@ -51,7 +51,7 @@ export const LabelTask = ({
             <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
               <MessageTable
                 messages={[
-                  ...(task.conversation ? task.conversation.messages : []),
+                  ...(task.conversation?.messages ?? []),
                   {
                     text: task.reply,
                     is_assistant: task.type === TaskType.label_assistant_reply,

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

@@ -13,7 +13,14 @@ import prisma from "src/lib/prismadb";
 const handler = withoutRole("banned", async (req, res, token) => {
   // Fetch the new task.
   const { task_type } = req.query;
-  const task = await oasstApiClient.fetchTask(task_type as string, token);
+
+  let task;
+  try {
+    task = await oasstApiClient.fetchTask(task_type as string, token);
+  } catch (err) {
+    console.error(err);
+    res.status(500).json(err);
+  }
 
   // Store the task and link it to the user..
   const registeredTask = await prisma.registeredTask.create({

website/src/types/Tasks.ts

@@ -39,13 +39,8 @@ export interface LabelAssistantReplyTask extends BaseTask {
   conversation: Conversation;
   reply: string;
   valid_labels: string[];
-}
-
-export interface LabelInitialPromptTask extends BaseTask {
-  type: TaskType.label_initial_prompt;
-  message_id: string;
-  valid_labels: string[];
-  prompt: string;
+  mode: "simple" | "full";
+  mandatory_labels?: string[];
 }
 
 export interface LabelPrompterReplyTask extends BaseTask {
@@ -54,4 +49,13 @@ export interface LabelPrompterReplyTask extends BaseTask {
   conversation: Conversation;
   reply: string;
   valid_labels: string[];
+  mode: "simple" | "full";
+  mandatory_labels?: string[];
+}
+
+export interface LabelInitialPromptTask extends BaseTask {
+  type: TaskType.label_initial_prompt;
+  message_id: string;
+  valid_labels: string[];
+  prompt: string;
 }