diff --git a/website/src/components/FlaggableElement.tsx b/website/src/components/FlaggableElement.tsx index c4b28735..de042040 100644 --- a/website/src/components/FlaggableElement.tsx +++ b/website/src/components/FlaggableElement.tsx @@ -22,9 +22,11 @@ import { useId, } from "@chakra-ui/react"; import { FlagIcon, QuestionMarkCircleIcon } from "@heroicons/react/20/solid"; -import { useState } from "react"; +import { useEffect, useState } from "react"; +import fetcher from "src/lib/fetcher"; import poster from "src/lib/poster"; import { colors } from "styles/Theme/colors"; +import useSWR from "swr"; import useSWRMutation from "swr/mutation"; interface textFlagLabels { @@ -34,18 +36,28 @@ interface textFlagLabels { } export const FlaggableElement = (props) => { + const [labels, setLabels] = useState([]); + const [checkboxValues, setCheckboxValues] = useState([]); + const [sliderValues, setSliderValues] = useState([]); + const [isEditing, setIsEditing] = useBoolean(); const backgroundColor = useColorModeValue("gray.200", "gray.700"); - const [isEditing, setIsEditing] = useBoolean(); - const flaggable_labels = props.flaggable_labels; - const TEXT_LABEL_FLAGS = - flaggable_labels?.valid_labels?.map((valid_label) => { - return { - attributeName: valid_label.name, - labelText: valid_label.display_text, - additionalExplanation: valid_label.help_text, - }; - }) || []; + const { data, isLoading } = useSWR("/api/valid_labels", fetcher); + useEffect(() => { + if (isLoading) { + return; + } + const { valid_labels } = data; + const newLabels = valid_labels.map((valid_label) => ({ + attributeName: valid_label.name, + labelText: valid_label.display_text, + additionalExplanation: valid_label.help_text, + })); + setSliderValues(new Array(newLabels.length).fill(1)); + setCheckboxValues(new Array(newLabels.length).fill(false)); + setLabels(newLabels); + }, [data, isLoading]); + const { trigger } = useSWRMutation("/api/set_label", poster, { onSuccess: () => { setIsEditing.off(); @@ -54,7 +66,7 @@ export const FlaggableElement = (props) => { const submitResponse = () => { const label_map: Map = new Map(); - TEXT_LABEL_FLAGS.forEach((flag, i) => { + labels.forEach((flag, i) => { if (checkboxValues[i]) { label_map.set(flag.attributeName, sliderValues[i]); } @@ -66,8 +78,6 @@ export const FlaggableElement = (props) => { text: props.text, }); }; - const [checkboxValues, setCheckboxValues] = useState(new Array(TEXT_LABEL_FLAGS.length).fill(false)); - const [sliderValues, setSliderValues] = useState(new Array(TEXT_LABEL_FLAGS.length).fill(1)); const handleCheckboxState = (isChecked, idx) => { setCheckboxValues( @@ -112,7 +122,7 @@ export const FlaggableElement = (props) => { - {TEXT_LABEL_FLAGS.map((option, i) => ( + {labels.map((option, i) => ( { +export const Messages = ({ messages, post_id }: { messages: Message[]; post_id: string }) => { const items = messages.map((messageProps: Message, i: number) => { const { message_id, text } = messageProps; return ( - + ); diff --git a/website/src/components/Messages/MessageTable.tsx b/website/src/components/Messages/MessageTable.tsx index 872b79f1..163cf533 100644 --- a/website/src/components/Messages/MessageTable.tsx +++ b/website/src/components/Messages/MessageTable.tsx @@ -1,11 +1,11 @@ import { Stack, StackDivider } from "@chakra-ui/react"; import { MessageTableEntry } from "src/components/Messages/MessageTableEntry"; -export function MessageTable({ messages, valid_labels }) { +export function MessageTable({ messages }) { return ( } spacing="4"> - {messages.map((item, idx) => ( - + {messages.map((item) => ( + ))} ); diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx index 6b02e3f5..9626b95e 100644 --- a/website/src/components/Messages/MessageTableEntry.tsx +++ b/website/src/components/Messages/MessageTableEntry.tsx @@ -1,25 +1,23 @@ import { Avatar, HStack, LinkBox, LinkOverlay, useColorModeValue } from "@chakra-ui/react"; import { boolean } from "boolean"; import { FlaggableElement } from "src/components/FlaggableElement"; -import type { ValidLabel } from "src/types/Task"; interface Message { text: string; id: string; + message_id: string; is_assistant: boolean; } interface MessageTableEntryProps { item: Message; - idx: number; - valid_labels: ValidLabel[]; } export function MessageTableEntry(props: MessageTableEntryProps) { - const { item, valid_labels } = props; + const { item } = props; const backgroundColor = useColorModeValue("gray.50", "gray.800"); return (
- + - + @@ -95,7 +95,7 @@ export function MessageWithChildren(props: MessageWithChildrenProps) { {children.map((item, idx) => ( - + ))} diff --git a/website/src/components/Tasks/CreateTask.tsx b/website/src/components/Tasks/CreateTask.tsx index ad1aca3b..84b9fe3f 100644 --- a/website/src/components/Tasks/CreateTask.tsx +++ b/website/src/components/Tasks/CreateTask.tsx @@ -7,8 +7,6 @@ import { TaskSurveyProps } from "src/components/Tasks/Task"; export const CreateTask = ({ task, taskType, onReplyChanged }: TaskSurveyProps<{ text: string }>) => { const [inputText, setInputText] = useState(""); - const valid_labels = task.valid_labels; - const textChangeHandler = (event: React.ChangeEvent) => { const text = event.target.value; onReplyChanged({ content: { text }, state: "VALID" }); @@ -20,9 +18,7 @@ export const CreateTask = ({ task, taskType, onReplyChanged }: TaskSurveyProps<{ <>
{taskType.label}

{taskType.overview}

- {task.conversation ? ( - - ) : null} + {task.conversation ? : null} <>
{taskType.instruction}
diff --git a/website/src/components/Tasks/EvaluateTask.tsx b/website/src/components/Tasks/EvaluateTask.tsx index 9d69d73c..54abfbf6 100644 --- a/website/src/components/Tasks/EvaluateTask.tsx +++ b/website/src/components/Tasks/EvaluateTask.tsx @@ -24,7 +24,6 @@ export const EvaluateTask = ({ task, onReplyChanged }: TaskSurveyProps<{ ranking onReplyChanged({ content: { ranking: newRanking }, state: "VALID" }); }; - const valid_labels = task.valid_labels; const sortables = task.replies ? "replies" : "prompts"; return ( @@ -33,7 +32,7 @@ export const EvaluateTask = ({ task, onReplyChanged }: TaskSurveyProps<{ ranking

Given the following {sortables}, sort them from best to worst, best being first, worst being last.

- + ); diff --git a/website/src/components/Tasks/LabelTask.tsx b/website/src/components/Tasks/LabelTask.tsx index 4b94c947..9c08932c 100644 --- a/website/src/components/Tasks/LabelTask.tsx +++ b/website/src/components/Tasks/LabelTask.tsx @@ -44,7 +44,6 @@ export const LabelTask = ({ message_id: task.message_id, }, ]} - valid_labels={valid_labels} /> ) : ( diff --git a/website/src/components/Tasks/Task.tsx b/website/src/components/Tasks/Task.tsx index 260b73ee..29bad8c9 100644 --- a/website/src/components/Tasks/Task.tsx +++ b/website/src/components/Tasks/Task.tsx @@ -21,7 +21,7 @@ export interface TaskSurveyProps { onReplyChanged: (state: TaskReplyState) => void; } -export const Task = ({ task, trigger, mutate }) => { +export const Task = ({ frontendId, task, trigger, mutate }) => { const [taskStatus, setTaskStatus] = useState("NOT_SUBMITTABLE"); const replyContent = useRef(null); const [showUnchangedWarning, setShowUnchangedWarning] = useState(false); @@ -39,7 +39,7 @@ export const Task = ({ task, trigger, mutate }) => { const rejectTask = (reason: string) => { sendRejection({ - id: task.id, + id: frontendId, reason, }); }; @@ -66,7 +66,7 @@ export const Task = ({ task, trigger, mutate }) => { break; case "SUBMITABLE": { trigger({ - id: task.id, + id: frontendId, update_type: taskType.update_type, content: replyContent.current, }); @@ -107,7 +107,7 @@ export const Task = ({ task, trigger, mutate }) => { onSubmitAnyway={() => { if (taskStatus === "DEFAULT") { trigger({ - id: task.id, + id: frontendId, update_type: taskType.update_type, content: replyContent.current, }); diff --git a/website/src/pages/api/new_task/[task_type].ts b/website/src/pages/api/new_task/[task_type].ts index d8c00a47..58ac84fa 100644 --- a/website/src/pages/api/new_task/[task_type].ts +++ b/website/src/pages/api/new_task/[task_type].ts @@ -14,7 +14,6 @@ const handler = withoutRole("banned", async (req, res, token) => { // Fetch the new task. const { task_type } = req.query; const task = await oasstApiClient.fetchTask(task_type as string, token); - const valid_labels = await oasstApiClient.fetch_valid_text(); // Store the task and link it to the user.. const registeredTask = await prisma.registeredTask.create({ @@ -28,9 +27,6 @@ const handler = withoutRole("banned", async (req, res, token) => { }, }); - // Add the valid labels that can be used to flag messages in this Task - registeredTask["valid_labels"] = valid_labels; - // Send the results to the client. res.status(200).json(registeredTask); }); diff --git a/website/src/pages/api/set_label.ts b/website/src/pages/api/set_label.ts index 7e50fd44..7c8aebd5 100644 --- a/website/src/pages/api/set_label.ts +++ b/website/src/pages/api/set_label.ts @@ -6,7 +6,7 @@ import { withoutRole } from "src/lib/auth"; */ const handler = withoutRole("banned", async (req, res, token) => { // Parse out the local message_id, task ID and the interaction contents. - const { message_id, label_map, text } = await JSON.parse(req.body); + const { message_id, post_id, label_map, text } = await JSON.parse(req.body); const interactionRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/text_labels`, { method: "POST", @@ -16,7 +16,7 @@ const handler = withoutRole("banned", async (req, res, token) => { }, body: JSON.stringify({ type: "text_labels", - message_id: message_id, + message_id: message_id || post_id, labels: label_map, text: text, user: { @@ -26,6 +26,10 @@ const handler = withoutRole("banned", async (req, res, token) => { }, }), }); + if (interactionRes.status !== 204) { + const r = await interactionRes.json(); + console.error(JSON.stringify(r)); + } res.status(interactionRes.status).end(); }); diff --git a/website/src/pages/api/valid_labels.ts b/website/src/pages/api/valid_labels.ts new file mode 100644 index 00000000..5f61ff2f --- /dev/null +++ b/website/src/pages/api/valid_labels.ts @@ -0,0 +1,12 @@ +import { withoutRole } from "src/lib/auth"; +import { oasstApiClient } from "src/lib/oasst_api_client"; + +/** + * Returns the set of valid labels that can be applied to messages. + */ +const handler = withoutRole("banned", async (req, res) => { + const valid_labels = await oasstApiClient.fetch_valid_text(); + res.status(200).json(valid_labels); +}); + +export default handler; diff --git a/website/src/pages/create/assistant_reply.tsx b/website/src/pages/create/assistant_reply.tsx index f078fa40..f596de86 100644 --- a/website/src/pages/create/assistant_reply.tsx +++ b/website/src/pages/create/assistant_reply.tsx @@ -21,7 +21,7 @@ const AssistantReply = () => { Reply as Assistant - + ); }; diff --git a/website/src/pages/create/initial_prompt.tsx b/website/src/pages/create/initial_prompt.tsx index 01b882f9..4eb1dd94 100644 --- a/website/src/pages/create/initial_prompt.tsx +++ b/website/src/pages/create/initial_prompt.tsx @@ -21,7 +21,7 @@ const InitialPrompt = () => { Reply as Assistant - + ); }; diff --git a/website/src/pages/create/summarize_story.tsx b/website/src/pages/create/summarize_story.tsx index d551b8e6..15d7d99e 100644 --- a/website/src/pages/create/summarize_story.tsx +++ b/website/src/pages/create/summarize_story.tsx @@ -39,7 +39,7 @@ const SummarizeStory = () => { const submitResponse = () => { const text = inputText.trim(); trigger({ - id: tasks[0].task.id, + id: tasks[0].id, update_type: "text_reply_to_message", content: { text, diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx index 51a54b0e..9e34a31d 100644 --- a/website/src/pages/create/user_reply.tsx +++ b/website/src/pages/create/user_reply.tsx @@ -21,7 +21,7 @@ const UserReply = () => { Reply as Assistant - + ); }; diff --git a/website/src/pages/evaluate/rank_assistant_replies.tsx b/website/src/pages/evaluate/rank_assistant_replies.tsx index 6686a42f..bcf23b7a 100644 --- a/website/src/pages/evaluate/rank_assistant_replies.tsx +++ b/website/src/pages/evaluate/rank_assistant_replies.tsx @@ -21,7 +21,7 @@ const RankAssistantReplies = () => { Rank Assistant Replies - + ); }; diff --git a/website/src/pages/evaluate/rank_initial_prompts.tsx b/website/src/pages/evaluate/rank_initial_prompts.tsx index 1350305b..bc26b062 100644 --- a/website/src/pages/evaluate/rank_initial_prompts.tsx +++ b/website/src/pages/evaluate/rank_initial_prompts.tsx @@ -21,7 +21,7 @@ const RankInitialPrompts = () => { Rank Initial Prompts - + ); }; diff --git a/website/src/pages/evaluate/rank_user_replies.tsx b/website/src/pages/evaluate/rank_user_replies.tsx index 0bd23c64..854b75ba 100644 --- a/website/src/pages/evaluate/rank_user_replies.tsx +++ b/website/src/pages/evaluate/rank_user_replies.tsx @@ -21,7 +21,7 @@ const RankUserReplies = () => { Rank User Replies - + ); }; diff --git a/website/src/pages/label/label_assistant_reply.tsx b/website/src/pages/label/label_assistant_reply.tsx index ffc3af4d..36ac6dd6 100644 --- a/website/src/pages/label/label_assistant_reply.tsx +++ b/website/src/pages/label/label_assistant_reply.tsx @@ -21,7 +21,7 @@ const LabelAssistantReply = () => { Label Assistant Reply - + ); }; diff --git a/website/src/pages/label/label_initial_prompt.tsx b/website/src/pages/label/label_initial_prompt.tsx index beea5ee8..d2839e86 100644 --- a/website/src/pages/label/label_initial_prompt.tsx +++ b/website/src/pages/label/label_initial_prompt.tsx @@ -21,7 +21,7 @@ const LabelInitialPrompt = () => { Label Initial Prompt - + ); }; diff --git a/website/src/pages/label/label_prompter_reply.tsx b/website/src/pages/label/label_prompter_reply.tsx index 0eeaad33..03b4f19d 100644 --- a/website/src/pages/label/label_prompter_reply.tsx +++ b/website/src/pages/label/label_prompter_reply.tsx @@ -21,7 +21,7 @@ const LabelPrompterReply = () => { Label Prompter Reply - + ); }; diff --git a/website/src/pages/messages/[id]/index.tsx b/website/src/pages/messages/[id]/index.tsx index 173b38c8..cf05d0df 100644 --- a/website/src/pages/messages/[id]/index.tsx +++ b/website/src/pages/messages/[id]/index.tsx @@ -48,7 +48,7 @@ const MessageDetail = ({ id }) => { {" "} - + diff --git a/website/src/pages/messages/index.tsx b/website/src/pages/messages/index.tsx index dd5df7da..fbf8f6fd 100644 --- a/website/src/pages/messages/index.tsx +++ b/website/src/pages/messages/index.tsx @@ -52,11 +52,7 @@ const MessagesDashboard = () => { borderRadius="xl" className="p-6 shadow-sm" > - {receivedMessages ? ( - - ) : ( - - )} + {receivedMessages ? : } @@ -70,11 +66,7 @@ const MessagesDashboard = () => { borderRadius="xl" className="p-6 shadow-sm" > - {receivedUserMessages ? ( - - ) : ( - - )} + {receivedUserMessages ? : } diff --git a/website/src/types/Task.ts b/website/src/types/Task.ts index a681b2e5..d58f892c 100644 --- a/website/src/types/Task.ts +++ b/website/src/types/Task.ts @@ -31,5 +31,4 @@ export interface TaskResponse { id: string; userId: string; task: Task; - valid_labels: ValidLabel[]; }