diff --git a/website/public/locales/en/labelling.json b/website/public/locales/en/labelling.json
index 0335f08f..624de963 100644
--- a/website/public/locales/en/labelling.json
+++ b/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."
}
diff --git a/website/src/components/Messages/LabelFlagGroup.tsx b/website/src/components/Messages/LabelFlagGroup.tsx
index fb1158bc..53e8c49e 100644
--- a/website/src/components/Messages/LabelFlagGroup.tsx
+++ b/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 (
{labelNames.map((name, idx) => (
-
+
+
+
))}
);
diff --git a/website/src/components/Messages/LabelInputGroup.tsx b/website/src/components/Messages/LabelInputGroup.tsx
index 51383128..2193a9f2 100644
--- a/website/src/components/Messages/LabelInputGroup.tsx
+++ b/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 && (
- {instructions.flagInstruction}
+
+ {instructions.flagInstruction}
+
+ `${t(getTypeSafei18nKey(labels[idx].name))}: ${t(
+ getTypeSafei18nKey(`${labels[idx].name}.explanation`)
+ )}`
+ )}
+ />{" "}
+
values[idx])}
labelNames={flagIndexes.map((idx) => labels[idx].name)}