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)}