From dfcbbee44440683b7717a2a06730bf1a99a1f4b6 Mon Sep 17 00:00:00 2001 From: BitterKanegul <15769643+BitterKanegul@users.noreply.github.com> Date: Sat, 31 Dec 2022 08:35:33 +0530 Subject: [PATCH 1/8] Adding popover to flag text with labels --- website/src/components/FlaggableElement.tsx | 182 ++++++++++++++++++++ website/src/components/Messages.tsx | 8 +- website/src/pages/create/user_reply.tsx | 3 +- 3 files changed, 189 insertions(+), 4 deletions(-) create mode 100644 website/src/components/FlaggableElement.tsx diff --git a/website/src/components/FlaggableElement.tsx b/website/src/components/FlaggableElement.tsx new file mode 100644 index 00000000..82b7c8a4 --- /dev/null +++ b/website/src/components/FlaggableElement.tsx @@ -0,0 +1,182 @@ +import poster from "src/lib/poster"; +import { + Popover, + useBoolean, + PopoverAnchor, + Button, + PopoverTrigger, + PopoverContent, + PopoverBody, + Checkbox, + PopoverCloseButton, + PopoverArrow, + Flex, + Spacer, + Slider, + SliderTrack, + SliderFilledTrack, + SliderThumb, +} from "@chakra-ui/react"; +import useSWRMutation from "swr/mutation"; +import { QuestionMarkCircleIcon, FlagIcon } from "@heroicons/react/20/solid"; +import {useState } from "react"; +import { SubmitButton } from "./Buttons/Submit"; + +export type TextFlagProps = { + text: string;label_map + post_id:string; +}; +type FlagRefs={ + label: string; + value:number; + setValue; + isChecked:boolean; + setChecked; +}; + +export const FlaggableElement = (props) => { + const [isEditing, setIsEditing] = useBoolean(); + const [hasCheck, setHasCheck] = useBoolean(); + const { trigger, isMutating } = useSWRMutation("/api/v1/text_labels", poster, { + onSuccess: () => { + setIsEditing.off; + }, + }); + + const submitResponse = (label_data) => { + trigger(label_data); + }; + const label_refs:FlagRefs[] = TEXT_LABEL_FLAGS.map((flag) =>{ + const [isChecked, setChecked] = useState(false); + const [value, setValue] = useState(1); + return({label:flag.attributeName, value:value, setValue:setValue, isChecked:isChecked, setChecked:setChecked}); + + }); + const fetchData = () =>{ + let label_map:Map =new Map(); + label_refs.filter((flagRef) => (flagRef.isChecked)).map((refs) =>{ + label_map.set(refs.label, refs.value) + }); + console.log(label_map); + return {post_id:props.post_id, label_map:Object.fromEntries(label_map), text:props.text} + + } + + return ( + +
+ + {props.children} + + + + +
+ + + + +
+ +
    + {TEXT_LABEL_FLAGS.map((option, i) => { + return ( + + ); + })} +
+
+ +
+ +
+ + + ); +}; +function FlagCheckboxLi(props: { option: textFlagLabels, state:FlagRefs}): JSX.Element { + let AdditionalExplanation = null; + if (props.option.additionalExplanation) { + AdditionalExplanation = ( + + + ); + } + + return ( + <> +
  • + + {props.state.setChecked(e.target.checked);}}/> + + + {props.state.setValue(val/100);}}> + + + + + + +
    • + + ); +} +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: "contains_sexual_content", + labelText: "Contains sexual content", + }, + { + attributeName: "contains_violent_content", + 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", + }, +]; diff --git a/website/src/components/Messages.tsx b/website/src/components/Messages.tsx index 4bc747d5..dcd11247 100644 --- a/website/src/components/Messages.tsx +++ b/website/src/components/Messages.tsx @@ -1,3 +1,5 @@ +import { FlaggableElement } from "./FlaggableElement"; + export interface Message { text: string; is_assistant: boolean; @@ -5,12 +7,14 @@ export interface Message { const getColor = (isAssistant: boolean) => (isAssistant ? "bg-slate-800" : "bg-sky-900"); -export const Messages = ({ messages }: { messages: Message[] }) => { +export const Messages = ({ messages , post_id}: { messages: Message[] , post_id:string}) => { const items = messages.map(({ text, is_assistant }: Message, i: number) => { return ( -
    + +
    {text}
    +     ); }); // Maybe also show a legend of the colors? diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx index 1b221571..30c552b4 100644 --- a/website/src/pages/create/user_reply.tsx +++ b/website/src/pages/create/user_reply.tsx @@ -61,7 +61,7 @@ const UserReply = () => { <>
    Reply as a user

    Given the following conversation, provide an adequate reply

    - + {task.hint &&

    Hint: {task.hint}

    }