website: show descriptions for label flags

Desciptions are shown both via tooltips, which are easier to read on desktop browsers, and via an explain (i) button so that mobile users can get the description (though in one larger list).

website/public/locales/en/labelling.json

@@ -8,10 +8,17 @@
   "spam.question": "Is the message spam?",
   "fails_task.question": "Is it a bad reply, as an answer to the prompt task?",
   "not_appropriate": "Not Appropriate",
+  "not_appropriate.explanation": "Inappropriate for a customer assistant.",
   "pii": "Contains PII",
+  "pii.explanation": "Contains personally identifying information. Examples include personal contact details, license and other identity numbers and banking details.",
   "hate_speech": "Hate Speech",
+  "hate_speech.explanation": "Content is abusive or threatening and expresses prejudice against a protected characteristic. Prejudice refers to preconceived views not based on reason. Protected characteristics include gender, ethnicity, religion, sexual orientation, and similar characteristics.",
   "sexual_content": "Sexual Content",
+  "sexual_content.explanation": "Contains sexual content.",
   "moral_judgement": "Judges Morality",
+  "moral_judgement.explanation": "Expresses moral judgement.",
   "political_content": "Political",
-  "lang_mismatch": "Wrong Language"
+  "political_content.explanation": "Expresses political views.",
+  "lang_mismatch": "Wrong Language",
+  "lang_mismatch.explanation": "Not written in the currently selected language."
 }

website/src/components/Messages/LabelFlagGroup.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex } from "@chakra-ui/react";
+import { Button, Flex, Tooltip } from "@chakra-ui/react";
 import { useTranslation } from "next-i18next";
 import { getTypeSafei18nKey } from "src/lib/i18n";
 
@@ -14,18 +14,19 @@ export const LabelFlagGroup = ({ values, labelNames, isEditable = true, onChange
   return (
     <Flex wrap="wrap" gap="4">
       {labelNames.map((name, idx) => (
-        <Button
-          key={name}
-          onClick={() => {
-            const newValues = values.slice();
-            newValues[idx] = newValues[idx] ? 0 : 1;
-            onChange(newValues);
-          }}
-          isDisabled={!isEditable}
-          colorScheme={values[idx] === 1 ? "blue" : undefined}
-        >
-          {t(getTypeSafei18nKey(name))}
-        </Button>
+        <Tooltip key={name} label={`${t(getTypeSafei18nKey(`${name}.explanation`))}`}>
+          <Button
+            onClick={() => {
+              const newValues = values.slice();
+              newValues[idx] = newValues[idx] ? 0 : 1;
+              onChange(newValues);
+            }}
+            isDisabled={!isEditable}
+            colorScheme={values[idx] === 1 ? "blue" : undefined}
+          >
+            {t(getTypeSafei18nKey(name))}
+          </Button>
+        </Tooltip>
       ))}
     </Flex>
   );

website/src/components/Messages/LabelInputGroup.tsx

@@ -1,10 +1,12 @@
 import { Text, VStack } from "@chakra-ui/react";
+import { useTranslation } from "next-i18next";
+import { Explain } from "src/components/Explain";
+import { LabelFlagGroup } from "src/components/Messages/LabelFlagGroup";
+import { LabelLikertGroup } from "src/components/Survey/LabelLikertGroup";
+import { LabelYesNoGroup } from "src/components/Messages/LabelYesNoGroup";
+import { getTypeSafei18nKey } from "src/lib/i18n";
 import { Label } from "src/types/Tasks";
 
-import { LabelLikertGroup } from "../Survey/LabelLikertGroup";
-import { LabelFlagGroup } from "./LabelFlagGroup";
-import { LabelYesNoGroup } from "./LabelYesNoGroup";
-
 export interface LabelInputInstructions {
   yesNoInstruction: string;
   flagInstruction: string;
@@ -28,6 +30,7 @@ export const LabelInputGroup = ({
   instructions,
   onChange,
 }: LabelInputGroupProps) => {
+  const { t } = useTranslation("labelling");
   const yesNoIndexes = labels.map((label, idx) => (label.widget === "yes_no" ? idx : null)).filter((v) => v !== null);
   const flagIndexes = labels.map((label, idx) => (label.widget === "flag" ? idx : null)).filter((v) => v !== null);
   const likertIndexes = labels.map((label, idx) => (label.widget === "likert" ? idx : null)).filter((v) => v !== null);
@@ -52,7 +55,17 @@ export const LabelInputGroup = ({
       )}
       {flagIndexes.length > 0 && (
         <VStack alignItems="stretch" spacing={2}>
-          <Text>{instructions.flagInstruction}</Text>
+          <Text>
+            {instructions.flagInstruction}
+            <Explain
+              explanation={flagIndexes.map(
+                (idx) =>
+                  `${t(getTypeSafei18nKey(labels[idx].name))}: ${t(
+                    getTypeSafei18nKey(`${labels[idx].name}.explanation`)
+                  )}`
+              )}
+            />{" "}
+          </Text>
           <LabelFlagGroup
             values={flagIndexes.map((idx) => values[idx])}
             labelNames={flagIndexes.map((idx) => labels[idx].name)}