From d8328807f4fc3536cd37200764b8d56338e64929 Mon Sep 17 00:00:00 2001 From: klotske Date: Thu, 12 Jan 2023 12:51:37 +0300 Subject: [PATCH 1/4] Remove redundant LinkOverlay --- website/src/components/Messages/MessageTableEntry.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx index e2d78e30..ac0eece7 100644 --- a/website/src/components/Messages/MessageTableEntry.tsx +++ b/website/src/components/Messages/MessageTableEntry.tsx @@ -28,7 +28,7 @@ export function MessageTableEntry(props: MessageTableEntryProps) { - {item.text} + {item.text} From 82a60ef904ad29a20ad30c376b5e976dd504af46 Mon Sep 17 00:00:00 2001 From: klotske Date: Thu, 12 Jan 2023 16:10:05 +0300 Subject: [PATCH 2/4] Change typings & refactor FlaggableElement --- website/src/components/FlaggableElement.tsx | 19 +++++++++++++------ website/src/components/Messages.tsx | 19 +++++++++++-------- .../src/components/Messages/MessageTable.tsx | 9 +++++++-- .../components/Messages/MessageTableEntry.tsx | 10 +++------- website/src/components/Tasks/LabelTask.tsx | 2 +- website/src/pages/api/set_label.ts | 6 +++--- website/src/types/Conversation.ts | 3 ++- 7 files changed, 40 insertions(+), 28 deletions(-) diff --git a/website/src/components/FlaggableElement.tsx b/website/src/components/FlaggableElement.tsx index de042040..eaf32ab0 100644 --- a/website/src/components/FlaggableElement.tsx +++ b/website/src/components/FlaggableElement.tsx @@ -25,6 +25,7 @@ import { FlagIcon, QuestionMarkCircleIcon } from "@heroicons/react/20/solid"; import { useEffect, useState } from "react"; import fetcher from "src/lib/fetcher"; import poster from "src/lib/poster"; +import { Message } from "src/types/Conversation"; import { colors } from "styles/Theme/colors"; import useSWR from "swr"; import useSWRMutation from "swr/mutation"; @@ -35,7 +36,12 @@ interface textFlagLabels { additionalExplanation?: string; } -export const FlaggableElement = (props) => { +interface FlaggableElementProps { + children: React.ReactNode; + message: Message; +} + +export const FlaggableElement = (props: FlaggableElementProps) => { const [labels, setLabels] = useState([]); const [checkboxValues, setCheckboxValues] = useState([]); const [sliderValues, setSliderValues] = useState([]); @@ -72,10 +78,9 @@ export const FlaggableElement = (props) => { } }); trigger({ - message_id: props.message_id, - post_id: props.post_id, + message_id: props.message.id, label_map: Object.fromEntries(label_map), - text: props.text, + text: props.message.text, }); }; @@ -151,14 +156,16 @@ export const FlaggableElement = (props) => { ); }; -export function FlagCheckbox(props: { +interface FlagCheckboxProps { option: textFlagLabels; idx: number; checkboxValues: boolean[]; sliderValues: number[]; checkboxHandler: (newVal: boolean, idx: number) => void; sliderHandler: (newVal: number, idx: number) => void; -}): JSX.Element { +} + +export function FlagCheckbox(props: FlagCheckboxProps): JSX.Element { let AdditionalExplanation = null; if (props.option.additionalExplanation) { AdditionalExplanation = ( diff --git a/website/src/components/Messages.tsx b/website/src/components/Messages.tsx index 769f0342..0934c5af 100644 --- a/website/src/components/Messages.tsx +++ b/website/src/components/Messages.tsx @@ -4,11 +4,14 @@ import { Message } from "src/types/Conversation"; import { FlaggableElement } from "./FlaggableElement"; -export const Messages = ({ messages, post_id }: { messages: Message[]; post_id: string }) => { +interface MessagesProps { + messages: Message[]; +} + +export const Messages = ({ messages }: MessagesProps) => { const items = messages.map((messageProps: Message, i: number) => { - const { message_id, text } = messageProps; return ( - + ); @@ -17,20 +20,20 @@ export const Messages = ({ messages, post_id }: { messages: Message[]; post_id: return {items}; }; -export const MessageView = forwardRef(({ is_assistant, text }: Message, ref) => { +export const MessageView = forwardRef((message: Message, ref) => { const { colorMode } = useColorMode(); const bgColor = useMemo(() => { if (colorMode === "light") { - return is_assistant ? "gray.800" : "blue.600"; + return message.is_assistant ? "gray.800" : "blue.600"; } else { - return is_assistant ? "black" : "blue.600"; + return message.is_assistant ? "black" : "blue.600"; } - }, [colorMode, is_assistant]); + }, [colorMode, message.is_assistant]); return ( - {text} + {message.text} ); }); diff --git a/website/src/components/Messages/MessageTable.tsx b/website/src/components/Messages/MessageTable.tsx index 163cf533..945faae6 100644 --- a/website/src/components/Messages/MessageTable.tsx +++ b/website/src/components/Messages/MessageTable.tsx @@ -1,11 +1,16 @@ import { Stack, StackDivider } from "@chakra-ui/react"; import { MessageTableEntry } from "src/components/Messages/MessageTableEntry"; +import { Message } from "src/types/Conversation"; -export function MessageTable({ messages }) { +interface MessageTableProps { + messages: Message[]; +} + +export function MessageTable({ messages }: MessageTableProps) { return ( } spacing="4"> {messages.map((item) => ( - + ))} ); diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx index ac0eece7..7275078e 100644 --- a/website/src/components/Messages/MessageTableEntry.tsx +++ b/website/src/components/Messages/MessageTableEntry.tsx @@ -2,23 +2,19 @@ import { Avatar, HStack, LinkBox, LinkOverlay, useColorModeValue } from "@chakra import { boolean } from "boolean"; import Link from "next/link"; import { FlaggableElement } from "src/components/FlaggableElement"; +import { Message } from "src/types/Conversation"; -interface Message { - text: string; - id: string; - message_id: string; - is_assistant: boolean; -} interface MessageTableEntryProps { item: Message; } + export function MessageTableEntry(props: MessageTableEntryProps) { const { item } = props; const backgroundColor = useColorModeValue("gray.50", "gray.800"); return (
- + ) : ( - + )} diff --git a/website/src/pages/api/set_label.ts b/website/src/pages/api/set_label.ts index 7c8aebd5..7d7b2d2e 100644 --- a/website/src/pages/api/set_label.ts +++ b/website/src/pages/api/set_label.ts @@ -5,8 +5,8 @@ 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, post_id, label_map, text } = await JSON.parse(req.body); + // Parse out the local message_id, and the interaction contents. + const { message_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 || post_id, + message_id: message_id, labels: label_map, text: text, user: { diff --git a/website/src/types/Conversation.ts b/website/src/types/Conversation.ts index f12b2781..6f51a870 100644 --- a/website/src/types/Conversation.ts +++ b/website/src/types/Conversation.ts @@ -1,7 +1,8 @@ export interface Message { text: string; is_assistant: boolean; - message_id: string; + id: string; + frontend_message_id?: string; } export interface Conversation { From 82b2693ed69bcfe17b622a6421087e3adeb72ee4 Mon Sep 17 00:00:00 2001 From: klotske Date: Thu, 12 Jan 2023 16:17:08 +0300 Subject: [PATCH 3/4] Remove unused import --- website/src/components/Messages/MessageTableEntry.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx index 7275078e..378776b0 100644 --- a/website/src/components/Messages/MessageTableEntry.tsx +++ b/website/src/components/Messages/MessageTableEntry.tsx @@ -1,4 +1,4 @@ -import { Avatar, HStack, LinkBox, LinkOverlay, useColorModeValue } from "@chakra-ui/react"; +import { Avatar, HStack, LinkBox, useColorModeValue } from "@chakra-ui/react"; import { boolean } from "boolean"; import Link from "next/link"; import { FlaggableElement } from "src/components/FlaggableElement"; From 4ac159ec7eb6afca7d67cdf20665afbc19f45dfb Mon Sep 17 00:00:00 2001 From: klotske Date: Thu, 12 Jan 2023 16:35:44 +0300 Subject: [PATCH 4/4] Update CreateTask UI --- website/src/components/Tasks/CreateTask.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/website/src/components/Tasks/CreateTask.tsx b/website/src/components/Tasks/CreateTask.tsx index e3f8f897..b66eebb0 100644 --- a/website/src/components/Tasks/CreateTask.tsx +++ b/website/src/components/Tasks/CreateTask.tsx @@ -1,11 +1,12 @@ import { Box, Stack, Text, useColorModeValue } from "@chakra-ui/react"; import { useState } from "react"; -import { Messages } from "src/components/Messages"; import { TrackedTextarea } from "src/components/Survey/TrackedTextarea"; import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards"; import { TaskSurveyProps } from "src/components/Tasks/Task"; +import { MessageTable } from "../Messages/MessageTable"; export const CreateTask = ({ task, taskType, onReplyChanged }: TaskSurveyProps<{ text: string }>) => { + const cardColor = useColorModeValue("gray.100", "gray.700"); const titleColor = useColorModeValue("gray.800", "gray.300"); const labelColor = useColorModeValue("gray.600", "gray.400"); @@ -30,8 +31,8 @@ export const CreateTask = ({ task, taskType, onReplyChanged }: TaskSurveyProps<{ {task.conversation ? ( - - + + ) : null}