mirror of
https://github.com/wassname/Open-Assistant.git
synced 2026-07-26 13:07:22 +08:00
website: Support new widget types for labelling (#966)
* website: Support new widget types for labelling Adds proper support for yes/no spam style questions as well as a simple interface for flag style labels. Also cleaned up the Task component to fix some rerender issues. * website: Fix some UI text, adjust yes/no button alignment * website: Remove left over console.log Co-authored-by: notmd <33456881+notmd@users.noreply.github.com> --------- Co-authored-by: notmd <33456881+notmd@users.noreply.github.com>
This commit is contained in:
Adrian Cowan
@@ -0,0 +1,32 @@
|
||||
import { Button, Flex } from "@chakra-ui/react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import { getTypeSafei18nKey } from "src/lib/i18n";
|
||||
|
||||
interface LabelFlagGroupProps {
|
||||
values: number[];
|
||||
labelNames: string[];
|
||||
isEditable?: boolean;
|
||||
onChange: (values: number[]) => void;
|
||||
}
|
||||
|
||||
export const LabelFlagGroup = ({ values, labelNames, isEditable = true, onChange }: LabelFlagGroupProps) => {
|
||||
const { t } = useTranslation("labelling");
|
||||
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>
|
||||
))}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,84 @@
|
||||
import { Text, VStack } from "@chakra-ui/react";
|
||||
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;
|
||||
likertInstruction: string;
|
||||
}
|
||||
|
||||
interface LabelInputGroupProps {
|
||||
values: number[];
|
||||
labels: Label[];
|
||||
requiredLabels?: string[];
|
||||
isEditable?: boolean;
|
||||
instructions: LabelInputInstructions;
|
||||
onChange: (values: number[]) => void;
|
||||
}
|
||||
|
||||
export const LabelInputGroup = ({
|
||||
labels,
|
||||
values,
|
||||
requiredLabels,
|
||||
isEditable,
|
||||
instructions,
|
||||
onChange,
|
||||
}: LabelInputGroupProps) => {
|
||||
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);
|
||||
|
||||
return (
|
||||
<VStack alignItems="stretch" spacing={6}>
|
||||
{yesNoIndexes.length > 0 && (
|
||||
<VStack alignItems="stretch" spacing={2}>
|
||||
<Text>{instructions.yesNoInstruction}</Text>
|
||||
<LabelYesNoGroup
|
||||
values={yesNoIndexes.map((idx) => values[idx])}
|
||||
labelNames={yesNoIndexes.map((idx) => labels[idx].name)}
|
||||
isEditable={isEditable}
|
||||
requiredLabels={requiredLabels}
|
||||
onChange={(yesNoValues) => {
|
||||
const newValues = values.slice();
|
||||
yesNoIndexes.forEach((idx, yesNoIndex) => (newValues[idx] = yesNoValues[yesNoIndex]));
|
||||
onChange(newValues);
|
||||
}}
|
||||
/>
|
||||
</VStack>
|
||||
)}
|
||||
{flagIndexes.length > 0 && (
|
||||
<VStack alignItems="stretch" spacing={2}>
|
||||
<Text>{instructions.flagInstruction}</Text>
|
||||
<LabelFlagGroup
|
||||
values={flagIndexes.map((idx) => values[idx])}
|
||||
labelNames={flagIndexes.map((idx) => labels[idx].name)}
|
||||
isEditable={isEditable}
|
||||
onChange={(flagValues) => {
|
||||
const newValues = values.slice();
|
||||
flagIndexes.forEach((idx, flagIndex) => (newValues[idx] = flagValues[flagIndex]));
|
||||
onChange(newValues);
|
||||
}}
|
||||
/>
|
||||
</VStack>
|
||||
)}
|
||||
{likertIndexes.length > 0 && (
|
||||
<VStack alignItems="stretch" spacing={2}>
|
||||
<Text>{instructions.likertInstruction}</Text>
|
||||
<LabelLikertGroup
|
||||
labelIDs={likertIndexes.map((idx) => labels[idx].name)}
|
||||
isEditable={isEditable}
|
||||
onChange={(likertValues) => {
|
||||
const newValues = values.slice();
|
||||
likertIndexes.forEach((idx, likertIndex) => (newValues[idx] = likertValues[likertIndex]));
|
||||
onChange(newValues);
|
||||
}}
|
||||
/>
|
||||
</VStack>
|
||||
)}
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
@@ -9,9 +9,10 @@ import {
|
||||
ModalOverlay,
|
||||
} from "@chakra-ui/react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import { useState } from "react";
|
||||
import { LabelInputGroup } from "src/components/Survey/LabelInputGroup";
|
||||
import { useEffect, useState } from "react";
|
||||
import { LabelInputGroup } from "src/components/Messages/LabelInputGroup";
|
||||
import { get, post } from "src/lib/api";
|
||||
import { Label } from "src/types/Tasks";
|
||||
import useSWRImmutable from "swr/immutable";
|
||||
import useSWRMutation from "swr/mutation";
|
||||
|
||||
@@ -21,21 +22,19 @@ interface LabelMessagePopupProps {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface Label {
|
||||
name: string;
|
||||
display_text: string;
|
||||
help_text: string;
|
||||
}
|
||||
|
||||
interface ValidLabelsResponse {
|
||||
valid_labels: Label[];
|
||||
}
|
||||
|
||||
export const LabelMessagePopup = ({ messageId, show, onClose }: LabelMessagePopupProps) => {
|
||||
const { t } = useTranslation("message");
|
||||
const { t } = useTranslation();
|
||||
const { data: response } = useSWRImmutable<ValidLabelsResponse>("/api/valid_labels", get);
|
||||
const valid_labels = response?.valid_labels ?? [];
|
||||
const [values, setValues] = useState<number[]>(null);
|
||||
const [values, setValues] = useState<number[]>(new Array(valid_labels.length).fill(null));
|
||||
|
||||
useEffect(() => {
|
||||
setValues(new Array(valid_labels.length).fill(null));
|
||||
}, [messageId, valid_labels.length]);
|
||||
|
||||
const { trigger: setLabels } = useSWRMutation("/api/set_label", post);
|
||||
|
||||
@@ -60,14 +59,23 @@ export const LabelMessagePopup = ({ messageId, show, onClose }: LabelMessagePopu
|
||||
<Modal isOpen={show} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>{t("label_title")}</ModalHeader>
|
||||
<ModalHeader>{t("message:label_title")}</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<LabelInputGroup labelIDs={valid_labels.map(({ name }) => name)} onChange={setValues} />
|
||||
<LabelInputGroup
|
||||
labels={valid_labels}
|
||||
values={values}
|
||||
instructions={{
|
||||
yesNoInstruction: t("labelling:label_message_yes_no_instruction"),
|
||||
flagInstruction: t("labelling:label_message_flag_instruction"),
|
||||
likertInstruction: t("labelling:label_message_likert_instruction"),
|
||||
}}
|
||||
onChange={setValues}
|
||||
/>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button colorScheme="blue" mr={3} onClick={submit}>
|
||||
{t("submit_labels")}
|
||||
{t("message:submit_labels")}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
import { Button, HStack, Text, Tooltip } from "@chakra-ui/react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import { getTypeSafei18nKey } from "src/lib/i18n";
|
||||
|
||||
interface LabelYesNoGroupProps {
|
||||
values: number[];
|
||||
labelNames: string[];
|
||||
requiredLabels?: string[];
|
||||
isEditable?: boolean;
|
||||
onChange: (values: number[]) => void;
|
||||
}
|
||||
|
||||
export const LabelYesNoGroup = ({
|
||||
values,
|
||||
labelNames,
|
||||
requiredLabels = [],
|
||||
isEditable = true,
|
||||
onChange,
|
||||
}: LabelYesNoGroupProps) => {
|
||||
const { t } = useTranslation("labelling");
|
||||
return (
|
||||
<>
|
||||
{labelNames.map((name, idx) => {
|
||||
return (
|
||||
<YesNoQuestion
|
||||
key={name}
|
||||
question={t(getTypeSafei18nKey(`${name}.question`))}
|
||||
value={values[idx] === null ? null : values[idx] > 0.1 ? true : false}
|
||||
onChange={(value) => {
|
||||
const newValues = values.slice();
|
||||
newValues[idx] = value;
|
||||
onChange(newValues);
|
||||
}}
|
||||
isEditable={isEditable}
|
||||
isRequired={requiredLabels.includes(name)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const YesNoQuestion = ({
|
||||
isEditable,
|
||||
question,
|
||||
value,
|
||||
isRequired,
|
||||
onChange,
|
||||
}: {
|
||||
isEditable: boolean;
|
||||
question: string;
|
||||
value: boolean;
|
||||
isRequired?: boolean;
|
||||
onChange: (boolean) => void;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div data-cy="label-question" style={{ maxWidth: "30em" }}>
|
||||
<Text display="inline">
|
||||
{question}
|
||||
{isRequired ? <RequiredMark /> : undefined}
|
||||
</Text>
|
||||
<HStack style={{ float: "right" }}>
|
||||
<Button
|
||||
data-cy="yes"
|
||||
isDisabled={!isEditable}
|
||||
colorScheme={value === true ? "blue" : undefined}
|
||||
onClick={() => onChange(isRequired ? true : value === null ? true : null)}
|
||||
>
|
||||
{t("yes")}
|
||||
</Button>
|
||||
<Button
|
||||
data-cy="no"
|
||||
isDisabled={!isEditable}
|
||||
colorScheme={value === false ? "blue" : undefined}
|
||||
onClick={() => onChange(isRequired ? false : value === null ? false : null)}
|
||||
>
|
||||
{t("no")}
|
||||
</Button>
|
||||
</HStack>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const RequiredMark = () => (
|
||||
<Tooltip label="Required">
|
||||
<span style={{ color: "red" }}>*</span>
|
||||
</Tooltip>
|
||||
);
|
||||
@@ -36,7 +36,7 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
|
||||
const router = useRouter();
|
||||
const [emojiState, setEmojis] = useState<MessageEmojis>({ emojis: {}, user_emojis: [] });
|
||||
useEffect(() => {
|
||||
setEmojis({ emojis: message.emojis, user_emojis: message.user_emojis });
|
||||
setEmojis({ emojis: message.emojis || {}, user_emojis: message.user_emojis || [] });
|
||||
}, [message.emojis, message.user_emojis]);
|
||||
|
||||
const goToMessage = useCallback(() => router.push(`/messages/${message.id}`), [router, message.id]);
|
||||
|
||||
Reference in New Issue
Block a user