fix: retrieval of valid_labels from API to populate the TEXT_LABEL_FLAGS in FlaggableElements.tsx

website/src/components/FlaggableElement.tsx

@@ -27,8 +27,22 @@ import poster from "src/lib/poster";
 import { colors } from "styles/Theme/colors";
 import useSWRMutation from "swr/mutation";
 
+interface textFlagLabels {
+  attributeName: string;
+  labelText: string;
+  additionalExplanation?: string;
+}
+
 export const FlaggableElement = (props) => {
   const [isEditing, setIsEditing] = useBoolean();
+  const flaggable_labels = props.flaggable_labels;
+  const TEXT_LABEL_FLAGS = flaggable_labels.valid_labels.map((valid_label) => {
+    return {
+      attributeName: valid_label.name,
+      labelText: valid_label.display_text,
+      additionalExplanation: valid_label.help_text,
+    };
+  });
   const { trigger } = useSWRMutation("/api/set_label", poster, {
     onSuccess: () => {
       setIsEditing.off;
@@ -181,48 +195,3 @@ export function FlagCheckbox(props: {
     </Flex>
   );
 }
-interface textFlagLabels {
-  attributeName: string;
-  labelText: string;
-  additionalExplanation?: string;
-}
-const TEXT_LABEL_FLAGS: textFlagLabels[] = [
-  // For the time being this list is configured on the FE.
-  // In the future it may be provided by the API.
-  // {
-  //   attributeName: "fails_task",
-  //   labelText: "Fails to follow the correct instruction / task",
-  //   additionalExplanation: "__TODO__",
-  // },
-  // {
-  //   attributeName: "not_customer_assistant_appropriate",
-  //   labelText: "Inappropriate for customer assistant",
-  //   additionalExplanation: "__TODO__",
-  // },
-  {
-    attributeName: "sexual_content",
-    labelText: "Contains sexual content",
-  },
-  {
-    attributeName: "violence",
-    labelText: "Contains violent content",
-  },
-  // {
-  //   attributeName: "encourages_violence",
-  //   labelText: "Encourages or fails to discourage violence/abuse/terrorism/self-harm",
-  // },
-  // {
-  //   attributeName: "denigrates_a_protected_class",
-  //   labelText: "Denigrates a protected class",
-  // },
-  // {
-  //   attributeName: "gives_harmful_advice",
-  //   labelText: "Fails to follow the correct instruction / task",
-  //   additionalExplanation:
-  //     "The advice given in the output is harmful or counter-productive. This may be in addition to, but is distinct from the question about encouraging violence/abuse/terrorism/self-harm.",
-  // },
-  // {
-  //   attributeName: "expresses_moral_judgement",
-  //   labelText: "Expresses moral judgement",
-  // },
-];

website/src/components/Messages.tsx

@@ -10,11 +10,31 @@ export interface Message {
   message_id: string;
 }
 
-export const Messages = ({ messages, post_id }: { messages: Message[]; post_id: string }) => {
+export interface ValidLabel {
+  name: string;
+  display_text: string;
+  help_text: string;
+}
+
+export const Messages = ({
+  messages,
+  post_id,
+  valid_labels,
+}: {
+  messages: Message[];
+  post_id: string;
+  valid_labels: ValidLabel[];
+}) => {
   const items = messages.map((messageProps: Message, i: number) => {
     const { message_id, text } = messageProps;
     return (
-      <FlaggableElement text={text} post_id={post_id} message_id={message_id} key={i + text}>
+      <FlaggableElement
+        text={text}
+        post_id={post_id}
+        message_id={message_id}
+        key={i + text}
+        flaggable_labels={valid_labels}
+      >
         <MessageView {...messageProps} />
       </FlaggableElement>
     );

website/src/components/Tasks/CreateTask.tsx

@@ -18,7 +18,7 @@ export interface CreateTaskProps {
 }
 export const CreateTask = ({ tasks, taskType, trigger, onSkipTask, onNextTask, mainBgClasses }: CreateTaskProps) => {
   const task = tasks[0].task;
-
+  const valid_labels = tasks[0].valid_labels;
   const [inputText, setInputText] = useState("");
 
   const submitResponse = (task: { id: string }) => {
@@ -42,7 +42,9 @@ export const CreateTask = ({ tasks, taskType, trigger, onSkipTask, onNextTask, m
         <>
           <h5 className="text-lg font-semibold">{taskType.label}</h5>
           <p className="text-lg py-1">{taskType.overview}</p>
-          {task.conversation ? <Messages messages={task.conversation.messages} post_id={task.id} /> : null}
+          {task.conversation ? (
+            <Messages messages={task.conversation.messages} post_id={task.id} valid_labels={valid_labels} />
+          ) : null}
         </>
         <>
           <h5 className="text-lg font-semibold">{taskType.instruction}</h5>