wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-08-15 12:05:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into 911_sigin_captcha

Browse Source
This commit is contained in:
notmd
2023-01-29 23:34:04 +07:00
parent fb26a52c2c 61b2949122
commit 599d70962e
155 changed files with 6347 additions and 1905 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/.prettierignore
View File
website/src/.prettierrc.json
-12
View File
@@ -1,12 +0,0 @@
{
"tabWidth": 2,
"printWidth": 120,
"overrides": [
{
"files": "*.css",
"options": {
"tabWidth": 4
}
}
]
}
website/src/components/EmptyState.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export const EmptyState = (props: EmptyStateProps) => {
<Box data-cy={props["data-cy"]} bg={backgroundColor} p="10" borderRadius="xl" shadow="base">
<Box display="flex" flexDirection="column" alignItems="center" gap="8" fontSize="lg">
<props.icon size="30" color="DarkOrange" />
<Text>{props.text}</Text>
<Text data-cy="cy-no-tasks">{props.text}</Text>
<NextLink href="/dashboard">
<Text color="blue.500">Go back to the dashboard</Text>
</NextLink>
website/src/components/FlaggableElement.tsx
-116
View File
@@ -1,116 +0,0 @@
import {
Box,
Button,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Popover,
PopoverAnchor,
PopoverTrigger,
Tooltip,
useColorModeValue,
useDisclosure,
} from "@chakra-ui/react";
import { AlertCircle } from "lucide-react";
import { useState } from "react";
import { get, post } from "src/lib/api";
import { colors } from "src/styles/Theme/colors";
import { Message } from "src/types/Conversation";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
import { LabelInputGroup } from "./Survey/LabelInputGroup";
interface Label {
name: string;
display_text: string;
help_text: string;
}
interface FlaggableElementProps {
children: React.ReactNode;
message: Message;
}
interface ValidLabelsResponse {
valid_labels: Label[];
}
export const FlaggableElement = (props: FlaggableElementProps) => {
const { data: response } = useSWRImmutable<ValidLabelsResponse>("/api/valid_labels", get);
const { isOpen, onOpen, onClose } = useDisclosure();
const { valid_labels } = response || { valid_labels: [] };
const [values, setValues] = useState<number[]>([]);
const submittable =
values.some((value) => {
return value !== null;
}) &&
values.length === valid_labels.length &&
valid_labels.length > 0;
const { trigger } = useSWRMutation("/api/set_label", post, {
onSuccess: onClose,
onError: onClose,
});
const submitResponse = () => {
const label_map: Map<string, number> = new Map();
console.assert(valid_labels.length === values.length);
values.forEach((value, idx) => {
if (value !== null) {
label_map.set(valid_labels[idx].name, value);
}
});
trigger({
message_id: props.message.id,
label_map: Object.fromEntries(label_map),
text: props.message.text,
});
};
return (
<Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose} closeOnBlur={false} isLazy lazyBehavior="keepMounted">
<Box display="flex" alignItems="center" flexDirection={["column", "row"]} gap="2">
<PopoverAnchor>{props.children}</PopoverAnchor>
<Tooltip label="Report" bg="red.500" aria-label="A tooltip">
<Box>
<PopoverTrigger>
<Box as="button" display="flex" alignItems="center" justifyContent="center" borderRadius="full" p="1">
<AlertCircle size="20" className="text-red-400" aria-hidden="true" />
</Box>
</PopoverTrigger>
</Box>
</Tooltip>
</Box>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Select one or more labels that apply.</ModalHeader>
<ModalCloseButton />
<ModalBody>
<LabelInputGroup simple labelIDs={valid_labels.map(({ name }) => name)} onChange={setValues} />
</ModalBody>
<ModalFooter>
<Button
isDisabled={!submittable}
onClick={submitResponse}
className={`bg-indigo-600 text-${useColorModeValue(
colors.light.text,
colors.dark.text
)} hover:bg-indigo-700`}
>
Report
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</Popover>
);
};
website/src/components/Loading/LoadingScreen.jsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Box, Center, Progress, Text, useColorModeValue } from "@chakra-ui/react";
import { Box, Center, Progress, Text } from "@chakra-ui/react";
export const LoadingScreen = ({ text = "Loading..." } = {}) => {
return (
website/src/components/Messages.tsx
+2 -20
View File
@@ -1,26 +1,8 @@
import { Box, forwardRef, Grid, useColorMode } from "@chakra-ui/react";
import { Box, forwardRef, useColorMode } from "@chakra-ui/react";
import { useMemo } from "react";
import { Message } from "src/types/Conversation";
import { FlaggableElement } from "./FlaggableElement";
interface MessagesProps {
messages: Message[];
}
export const Messages = ({ messages }: MessagesProps) => {
const items = messages.map((messageProps: Message, i: number) => {
return (
<FlaggableElement message={messageProps} key={i + messageProps.id}>
<MessageView {...messageProps} />
</FlaggableElement>
);
});
// Maybe also show a legend of the colors?
return <Grid gap={2}>{items}</Grid>;
};
export const MessageView = forwardRef<Message, "div">((message: Message, ref) => {
export const MessageView = forwardRef<Partial<Message>, "div">((message: Partial<Message>, ref) => {
const { colorMode } = useColorMode();
const bgColor = useMemo(() => {
website/src/components/Messages/LabelFlagGroup.tsx
+32
View File
@@ -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>
);
};
website/src/components/Messages/LabelInputGroup.tsx
+84
View File
@@ -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>
);
};
website/src/components/Messages/LabelPopup.tsx
+84
View File
@@ -0,0 +1,84 @@
import {
Button,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
} from "@chakra-ui/react";
import { useTranslation } from "next-i18next";
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";
interface LabelMessagePopupProps {
messageId: string;
show: boolean;
onClose: () => void;
}
interface ValidLabelsResponse {
valid_labels: Label[];
}
export const LabelMessagePopup = ({ messageId, show, onClose }: LabelMessagePopupProps) => {
const { t } = useTranslation();
const { data: response } = useSWRImmutable<ValidLabelsResponse>(`/api/valid_labels?message_id=${messageId}`, get);
const valid_labels = response?.valid_labels ?? [];
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);
const submit = () => {
const label_map: Map<string, number> = new Map();
console.assert(valid_labels.length === values.length);
values.forEach((value, idx) => {
if (value !== null) {
label_map.set(valid_labels[idx].name, value);
}
});
setLabels({
message_id: messageId,
label_map: Object.fromEntries(label_map),
});
setValues(null);
onClose();
};
return (
<Modal isOpen={show} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>{t("message:label_title")}</ModalHeader>
<ModalCloseButton />
<ModalBody>
<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("message:submit_labels")}
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
};
website/src/components/Messages/LabelYesNoGroup.tsx
+89
View File
@@ -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>
);
website/src/components/Messages/MessageEmojiButton.stories.tsx
+34
View File
@@ -0,0 +1,34 @@
import React from "react";
import { MessageEmojiButton } from "./MessageEmojiButton";
// eslint-disable-next-line import/no-anonymous-default-export
export default {
title: "Messages/MessageEmojiButton",
component: MessageEmojiButton,
};
const Template = ({ emoji, count, checked }: { emoji: string; count: number; checked?: boolean }) => {
return <MessageEmojiButton emoji={{ name: emoji, count }} checked={checked} onClick={undefined} />;
};
export const Default = Template.bind({});
Default.args = {
emoji: "+1",
count: 7,
checked: false,
};
export const BigNumber = Template.bind({});
BigNumber.args = {
emoji: "+1",
count: 999,
checked: false,
};
export const Checked = Template.bind({});
Checked.args = {
emoji: "+1",
count: 2,
checked: true,
};
website/src/components/Messages/MessageEmojiButton.tsx
+48
View File
@@ -0,0 +1,48 @@
import { Button } from "@chakra-ui/react";
import { BoxSelect, Flag, LucideProps, ThumbsDown, ThumbsUp } from "lucide-react";
import { ReactElement } from "react";
import { MessageEmoji } from "src/types/Conversation";
type EmojiIconPurpose = "MINI_BUTTON" | "NORMAL";
const defaultIconProps: (purpose: EmojiIconPurpose) => LucideProps = (purpose: EmojiIconPurpose) => {
if (purpose === "MINI_BUTTON") return { height: "1em" };
return {};
};
export const getEmojiIcon = (name: string, purpose: EmojiIconPurpose): ReactElement => {
switch (name) {
case "+1":
return <ThumbsUp {...defaultIconProps(purpose)} />;
case "-1":
return <ThumbsDown {...defaultIconProps(purpose)} />;
case "flag":
case "red_flag":
return <Flag {...defaultIconProps(purpose)} />;
default:
return <BoxSelect {...defaultIconProps(purpose)} />;
}
};
interface MessageEmojiButtonProps {
emoji: MessageEmoji;
checked?: boolean;
onClick: () => void;
}
export const MessageEmojiButton = ({ emoji, checked, onClick }: MessageEmojiButtonProps) => {
return (
<Button
onClick={onClick}
variant={checked ? "solid" : "ghost"}
colorScheme={checked ? "blue" : undefined}
size="sm"
height="1.6em"
minWidth={0}
padding="0"
>
{getEmojiIcon(emoji.name, "MINI_BUTTON")}
<span style={{ marginInlineEnd: "0.25em" }}>{emoji.count}</span>
</Button>
);
};
website/src/components/Messages/MessageTable.stories.tsx
+110
View File
@@ -0,0 +1,110 @@
import React from "react";
import { Message } from "src/types/Conversation";
import { MessageTable } from "./MessageTable";
// eslint-disable-next-line import/no-anonymous-default-export
export default {
title: "Messages/MessageTable",
component: MessageTable,
};
const Template = ({
messages,
enableLink,
highlightLastMessage,
}: {
messages: Message[];
enableLink: boolean;
highlightLastMessage: boolean;
}) => {
return <MessageTable messages={messages} enableLink={enableLink} highlightLastMessage={highlightLastMessage} />;
};
export const Default = Template.bind({});
Default.args = {
messages: [
{
text: "I'm unsure how to interpret this. Is it a riddle?",
is_assistant: true,
id: "",
frontend_message_id: "",
emojis: {},
user_emojis: [],
},
{
text: "No, I just wanted to see how you reply when I type random characters. Can you tell me who invented Wikipedia?",
is_assistant: false,
id: "",
frontend_message_id: "",
emojis: { "-1": 11, red_flag: 2 },
user_emojis: [],
},
{
text: "Sorry, my cat sat on my keyboard. Can you print a cat in ASCII art?",
is_assistant: false,
id: "",
frontend_message_id: "",
emojis: {},
user_emojis: [],
},
],
enableLink: true,
highlightLastMessage: false,
};
export const Conversation = Template.bind({});
Conversation.args = {
messages: [
{
text: "Hello! How can I help you?",
is_assistant: true,
id: "",
frontend_message_id: "",
emojis: {},
user_emojis: [],
},
{
text: "Who were the 8 presidents before George Washington?",
is_assistant: false,
id: "",
frontend_message_id: "",
emojis: {},
user_emojis: [],
},
],
enableLink: false,
highlightLastMessage: true,
};
export const LongText = Template.bind({});
LongText.args = {
messages: [
{
text: "Okay, here\u2019s my answer. The thing is, in a job interview you are applying to the position, right? Which means that you need to try to make yourself sound as good a fit as possible. So that means it\u2019s a mistake to wear something that people would think of as a silly or stupid outfit. It\u2019s good to wear something in line with what people expect the job to require, and ideally you want to wear something that you can walk around comfortably in. At the same time, if you wear something that looks kind of dorky, you might not stand out as much as someone who doesn\u2019t, because the other candidates probably all have something slightly weird or wacky about them too. So, I\u2019d say, do you like your outfit? Wear something that you\u2019re comfortable in, that you think you look good in, and is in line with what the job would require. Also, for interview prep, I would focus on making yourself look as professional as possible, from your hair to your outfit. What do you think of this?",
is_assistant: true,
id: "",
frontend_message_id: "",
emojis: {},
user_emojis: [],
},
{
text: "Yes, I think they can be helpful when the child misbehaves, but they should be used with a little bit of compassion and understanding that it\u2019s not the natural state of things to have an adult yelling at them. Time outs are also often used without letting the child know how they\u2019re getting out of the time out, which can make it feel arbitrary or like a punishment, rather than a consequence for something they did. It\u2019s really easy for adults to do this kind of thing unconsciously. It\u2019s easy to get caught up in the notion that \u201cThey\u2019re in time out, and that\u2019s the end of it!\u201d but kids can be pretty imaginative, and they can use their own creativity to make their way out of time outs. A compassionate time out ends when the child shows a sign of understanding what they\u2019ve done wrong, and are ready to begin again. That way the child knows they\u2019re learning, and that the parent is seeing them as an intelligent person, even if they sometimes mess up. You can still use the other techniques you were using to be tough when necessary, but using a compassionate approach will let you use them without actually using them!",
is_assistant: false,
id: "",
frontend_message_id: "",
emojis: {},
user_emojis: [],
},
{
text: "No. The USA was founded by a Puritan group of Protestants, but it didn\u2019t adopt the religion of the Puritans until much later, and it was always a secular state. The Puritans observed the Sabbath on Sunday, and the Puritans only had a small influence in the early history of the USA. It\u2019s difficult to trace the origins of closing stores on Sunday, but one early and short-lived attempt at forcing the Sabbath on people in the 1800s was motivated by the Protestant ideal that people should spend Sunday focusing on spiritual activities. By the mid-1800s, when the Sunday closing law was made, there was not a lot of pressure from that standpoint, but the church had begun to advocate for Sunday closing laws as a way of counteracting the negative effects of industrialization on the day of rest. Even after that shift, closing stores on Sunday was not always possible, since the religious Sunday was not always chosen for observance. And as industrialization accelerated and mechanization made it possible to operate stores on Sunday, the law was not enforced as much as people liked. The day of rest was also being violated by stores that stayed open all day on Sunday, so closing stores on Sundays became an effort to protect the Sabbath for all citizens.",
is_assistant: false,
id: "",
frontend_message_id: "",
emojis: {},
user_emojis: [],
},
],
enableLink: true,
highlightLastMessage: false,
};
website/src/components/Messages/MessageTable.tsx
+3 -3
View File
@@ -11,11 +11,11 @@ interface MessageTableProps {
export function MessageTable({ messages, enableLink, highlightLastMessage }: MessageTableProps) {
return (
<Stack spacing="4">
{messages.map((item, idx) => (
{messages.map((message, idx) => (
<MessageTableEntry
enabled={enableLink}
item={item}
key={item.id + item.frontend_message_id}
message={message}
key={message.id + message.frontend_message_id}
highlight={highlightLastMessage && idx === messages.length - 1}
/>
))}
website/src/components/Messages/MessageTableEntry.stories.tsx
+62
View File
@@ -0,0 +1,62 @@
import React from "react";
import { Message } from "src/types/Conversation";
import { MessageTableEntry } from "./MessageTableEntry";
// eslint-disable-next-line import/no-anonymous-default-export
export default {
title: "Messages/MessageTableEntry",
component: MessageTableEntry,
};
const Template = ({ enabled, highlight, ...message }) => {
return <MessageTableEntry message={message as Message} enabled={enabled} highlight={highlight} />;
};
export const Default = Template.bind({});
Default.args = {
text: "Who were the 8 presidents before George Washington?",
is_assistant: false,
id: "",
frontend_message_id: "",
enabled: true,
highlight: false,
emojis: {},
user_emojis: [],
};
export const Asistant = Template.bind({});
Asistant.args = {
text: "Who were the 8 presidents before George Washington?",
is_assistant: true,
id: "",
frontend_message_id: "",
enabled: true,
highlight: false,
emojis: {},
user_emojis: [],
};
export const LongText = Template.bind({});
LongText.args = {
text: "Assistant: No. The USA was founded by a Puritan group of Protestants, but it didn\u2019t adopt the religion of the Puritans until much later, and it was always a secular state. The Puritans observed the Sabbath on Sunday, and the Puritans only had a small influence in the early history of the USA. It\u2019s difficult to trace the origins of closing stores on Sunday, but one early and short-lived attempt at forcing the Sabbath on people in the 1800s was motivated by the Protestant ideal that people should spend Sunday focusing on spiritual activities. By the mid-1800s, when the Sunday closing law was made, there was not a lot of pressure from that standpoint, but the church had begun to advocate for Sunday closing laws as a way of counteracting the negative effects of industrialization on the day of rest. Even after that shift, closing stores on Sunday was not always possible, since the religious Sunday was not always chosen for observance. And as industrialization accelerated and mechanization made it possible to operate stores on Sunday, the law was not enforced as much as people liked. The day of rest was also being violated by stores that stayed open all day on Sunday, so closing stores on Sundays became an effort to protect the Sabbath for all citizens.",
is_assistant: true,
id: "",
frontend_message_id: "",
enabled: true,
highlight: false,
emojis: {},
user_emojis: [],
};
export const WithEmoji = Template.bind({});
WithEmoji.args = {
text: "As you\u2019ve mentioned, Star Wars has many sequels, prequels, and crossovers. The official list of movies in Star Wars is:",
is_assistant: true,
id: "",
frontend_message_id: "",
enabled: true,
highlight: false,
emojis: { "-1": 5, "+1": 1 },
user_emojis: ["-1"],
};
website/src/components/Messages/MessageTableEntry.tsx
+148 -31
View File
@@ -1,23 +1,50 @@
import { Avatar, Box, HStack, useBreakpointValue, useColorModeValue } from "@chakra-ui/react";
import {
Avatar,
Box,
HStack,
Menu,
MenuButton,
MenuDivider,
MenuGroup,
MenuItem,
MenuList,
SimpleGrid,
useBreakpointValue,
useColorModeValue,
useDisclosure,
} from "@chakra-ui/react";
import { boolean } from "boolean";
import { ClipboardList, Flag, MessageSquare, MoreHorizontal } from "lucide-react";
import { useRouter } from "next/router";
import { useCallback, useMemo } from "react";
import { FlaggableElement } from "src/components/FlaggableElement";
import { Message } from "src/types/Conversation";
import { useTranslation } from "next-i18next";
import { useCallback, useEffect, useMemo, useState } from "react";
import { LabelMessagePopup } from "src/components/Messages/LabelPopup";
import { getEmojiIcon, MessageEmojiButton } from "src/components/Messages/MessageEmojiButton";
import { ReportPopup } from "src/components/Messages/ReportPopup";
import { post } from "src/lib/api";
import { Message, MessageEmojis } from "src/types/Conversation";
import { colors } from "styles/Theme/colors";
import useSWRMutation from "swr/mutation";
interface MessageTableEntryProps {
item: Message;
message: Message;
enabled?: boolean;
highlight?: boolean;
}
export function MessageTableEntry(props: MessageTableEntryProps) {
export function MessageTableEntry({ message, enabled, highlight }: MessageTableEntryProps) {
const router = useRouter();
const [emojiState, setEmojis] = useState<MessageEmojis>({ emojis: {}, user_emojis: [] });
useEffect(() => {
setEmojis({
emojis: message?.emojis || {},
user_emojis: message?.user_emojis || [],
});
}, [message.emojis, message.user_emojis]);
const { item } = props;
const goToMessage = useCallback(() => router.push(`/messages/${item.id}`), [router, item.id]);
const goToMessage = useCallback(() => router.push(`/messages/${message.id}`), [router, message.id]);
const { isOpen: reportPopupOpen, onOpen: showReportPopup, onClose: closeReportPopup } = useDisclosure();
const { isOpen: labelPopupOpen, onOpen: showLabelPopup, onClose: closeLabelPopup } = useDisclosure();
const backgroundColor = useColorModeValue("gray.100", "gray.700");
const backgroundColor2 = useColorModeValue("#DFE8F1", "#42536B");
@@ -32,34 +59,124 @@ export function MessageTableEntry(props: MessageTableEntryProps) {
borderColor={borderColor}
size={inlineAvatar ? "xs" : "sm"}
mr={inlineAvatar ? 2 : 0}
name={`${boolean(item.is_assistant) ? "Assistant" : "User"}`}
src={`${boolean(item.is_assistant) ? "/images/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
name={`${boolean(message.is_assistant) ? "Assistant" : "User"}`}
src={`${boolean(message.is_assistant) ? "/images/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
/>
),
[borderColor, inlineAvatar, item.is_assistant]
[borderColor, inlineAvatar, message.is_assistant]
);
const highlightColor = useColorModeValue(colors.light.highlight, colors.dark.highlight);
const { trigger: sendEmojiChange } = useSWRMutation(`/api/messages/${message.id}/emoji`, post, {
onSuccess: setEmojis,
});
const react = (emoji: string, state: boolean) => {
sendEmojiChange({ op: state ? "add" : "remove", emoji });
};
return (
<FlaggableElement message={item}>
<HStack w={["full", "full", "full", "fit-content"]} gap={2}>
{!inlineAvatar && avatar}
<Box
width={["full", "full", "full", "fit-content"]}
maxWidth={["full", "full", "full", "2xl"]}
p="4"
borderRadius="md"
bg={item.is_assistant ? backgroundColor : backgroundColor2}
outline={props.highlight && "2px solid black"}
outlineColor={highlightColor}
onClick={props.enabled && goToMessage}
_hover={props.enabled && { cursor: "pointer", opacity: 0.9 }}
whiteSpace="pre-wrap"
<HStack w={["full", "full", "full", "fit-content"]} gap={2}>
{!inlineAvatar && avatar}
<Box
width={["full", "full", "full", "fit-content"]}
maxWidth={["full", "full", "full", "2xl"]}
p="4"
borderRadius="md"
bg={message.is_assistant ? backgroundColor : backgroundColor2}
outline={highlight && "2px solid black"}
outlineColor={highlightColor}
onClick={enabled && goToMessage}
whiteSpace="pre-wrap"
cursor={enabled && "pointer"}
style={{ position: "relative" }}
>
{inlineAvatar && avatar}
{message.text}
<HStack
style={{ float: "right", position: "relative", right: "-0.3em", bottom: "-0em", marginLeft: "1em" }}
onClick={(e) => e.stopPropagation()}
>
{inlineAvatar && avatar}
{item.text}
</Box>
</HStack>
</FlaggableElement>
{Object.entries(emojiState.emojis).map(([emoji, count]) => (
<MessageEmojiButton
key={emoji}
emoji={{ name: emoji, count }}
checked={emojiState.user_emojis.includes(emoji)}
onClick={() => react(emoji, !emojiState.user_emojis.includes(emoji))}
/>
))}
<MessageActions
react={react}
userEmoji={emojiState.user_emojis}
onLabel={showLabelPopup}
onReport={showReportPopup}
messageId={message.id}
/>
<LabelMessagePopup messageId={message.id} show={labelPopupOpen} onClose={closeLabelPopup} />
<ReportPopup messageId={message.id} show={reportPopupOpen} onClose={closeReportPopup} />
</HStack>
</Box>
</HStack>
);
}
const EmojiMenuItem = ({
emoji,
checked,
react,
}: {
emoji: string;
checked?: boolean;
react: (emoji: string, state: boolean) => void;
}) => {
const activeColor = useColorModeValue(colors.light.active, colors.dark.active);
return (
<MenuItem onClick={() => react(emoji, !checked)} justifyContent="center" color={checked ? activeColor : undefined}>
{getEmojiIcon(emoji, "NORMAL")}
</MenuItem>
);
};
const MessageActions = ({
react,
userEmoji,
onLabel,
onReport,
messageId,
}: {
react: (emoji: string, state: boolean) => void;
userEmoji: string[];
onLabel: () => void;
onReport: () => void;
messageId: string;
}) => {
const { t } = useTranslation("message");
return (
<Menu>
<MenuButton>
<MoreHorizontal />
</MenuButton>
<MenuList>
<MenuGroup title={t("reactions")}>
<SimpleGrid columns={4}>
{["+1", "-1"].map((emoji) => (
<EmojiMenuItem key={emoji} emoji={emoji} checked={userEmoji?.includes(emoji)} react={react} />
))}
</SimpleGrid>
</MenuGroup>
<MenuDivider />
<MenuItem onClick={onLabel} icon={<ClipboardList />}>
{t("label_action")}
</MenuItem>
<MenuItem onClick={onReport} icon={<Flag />}>
{t("report_action")}
</MenuItem>
<MenuDivider />
<MenuItem as="a" href={`/messages/${messageId}`} target="_blank" icon={<MessageSquare />}>
{t("open_new_tab_action")}
</MenuItem>
</MenuList>
</Menu>
);
};
website/src/components/Messages/MessageWithChildren.stories.tsx
+99
View File
@@ -0,0 +1,99 @@
import { rest } from "msw";
import { MessageWithChildren } from "./MessageWithChildren";
// eslint-disable-next-line import/no-anonymous-default-export
export default {
title: "Messages/MessageWithChildren",
component: MessageWithChildren,
parameters: {
layout: "fullscreen",
msw: {
handlers: {
messagesDefault: [
rest.get("/api/messages/id-1", (req, res, ctx) => {
return res(
ctx.json({
text: "Some message Text",
is_assistant: false,
id: "id-1",
})
);
}),
rest.get("/api/messages/id-1/children", (req, res, ctx) => {
return res(ctx.json([]));
}),
],
},
},
},
};
const Template = (args) => <MessageWithChildren {...args} />;
export const NoChildren = Template.bind({});
NoChildren.args = {
id: "id-1",
maxDepth: 2,
};
export const WithChildren = Template.bind({});
WithChildren.args = {
id: "id-1",
maxDepth: 1,
};
WithChildren.parameters = {
msw: {
handlers: {
additionalMessages: [
rest.get("/api/messages/id-2", (req, res, ctx) => {
return res(
ctx.json({
text: "Some child message Text",
is_assistant: false,
id: "id-2",
})
);
}),
rest.get("/api/messages/id-3", (req, res, ctx) => {
return res(
ctx.json({
text: "Some child message Text",
is_assistant: false,
id: "id-3",
})
);
}),
rest.get("/api/messages/id-1/children", (req, res, ctx) => {
return res(
ctx.json([
{
text: "Some child message Text",
is_assistant: false,
id: "id-2",
},
{
text: "another child message Text",
is_assistant: false,
id: "id-3",
},
])
);
}),
rest.get("/api/messages/id-2/children", (req, res, ctx) => {
return res(
ctx.json([
{
text: "another message Text",
is_assistant: false,
id: "id-4",
},
])
);
}),
rest.get("/api/messages/id-3/children", (req, res, ctx) => {
return res(ctx.json([]));
}),
],
},
},
};
website/src/components/Messages/MessageWithChildren.tsx
+3 -3
View File
@@ -52,7 +52,7 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
{isFirst ? "Message" : depth === 1 ? "Children" : "Ancestor"}
</Text>
<Box width="fit-content" bg={backgroundColor} padding="4" borderRadius="xl" boxShadow="base">
<MessageTableEntry enabled item={message} />
<MessageTableEntry enabled message={message} />
</Box>
</Box>
</>
@@ -86,9 +86,9 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
gap="4"
shadow="base"
>
{children.map((item, idx) => (
{children.map((message, idx) => (
<Box flex="1" key={`recursiveMessageWChildren_${idx}`}>
<MessageTableEntry enabled item={item} />
<MessageTableEntry enabled message={message} />
</Box>
))}
</Box>
website/src/components/Messages/ReportPopup.tsx
+56
View File
@@ -0,0 +1,56 @@
import {
Button,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Textarea,
} from "@chakra-ui/react";
import { useTranslation } from "next-i18next";
import { useState } from "react";
import { post } from "src/lib/api";
import useSWRMutation from "swr/mutation";
interface ReportPopupProps {
messageId: string;
show: boolean;
onClose: () => void;
}
export const ReportPopup = ({ messageId, show, onClose }: ReportPopupProps) => {
const { t } = useTranslation("message");
const [text, setText] = useState("");
const { trigger } = useSWRMutation("/api/report", post);
const submit = () => {
trigger({
message_id: messageId,
text,
});
setText("");
onClose();
};
return (
<Modal isOpen={show} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>{t("report_title")}</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Textarea onChange={(e) => setText(e.target.value)} resize="none" placeholder={t("report_placeholder")} />
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={submit}>
{t("send_report")}
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
};
website/src/components/Survey/LabelInputGroup.tsx
-198
View File
@@ -1,198 +0,0 @@
import { Box, Grid, GridItem, Text, useColorModeValue } from "@chakra-ui/react";
import React from "react";
import { useState } from "react";
import { LikertButtons } from "src/components/Buttons/LikertButtons";
import { Explain } from "src/components/Explain";
interface LabelInputGroupProps {
labelIDs: Array<string>;
simple?: boolean;
onChange: (values: number[]) => unknown;
isEditable?: boolean;
}
interface LabelInfo {
zeroText: string;
oneText: string;
zeroDescription: string[];
oneDescription: string[];
inverted: boolean;
}
// This should be moved to the valid labels api endpoint
const label_messages: {
[label: string]: LabelInfo;
} = {
spam: {
zeroText: "Not Spam",
zeroDescription: ["Suitable for training Open Assistant."],
oneText: "Spam",
oneDescription: [
"Seems to be intentionally low-quality or irrelevant",
'We consider the following unwanted content as spam: trolling, intentional undermining of our purpose, illegal material, material that violates our code of conduct, and other things that are inappropriate for our dataset. We collect these under the common heading of "spam".',
"This is not an assessment of whether this message is the best possible answer. Especially for prompts or user-replies, we very much want to retain all kinds of responses in the dataset, so that the assistant can learn to reply appropriately.",
"Please mark this text as spam only if it is clearly unsuited to be part of our dataset, as outlined above, and try not to make any subjective value-judgments beyond that.",
],
inverted: true,
},
fails_task: {
zeroText: "Follows Instructions",
zeroDescription: [],
oneText: "Fails Task",
oneDescription: ["Fails to follow the correct instruction / task"],
inverted: true,
},
not_appropriate: {
zeroText: "Appropriate",
zeroDescription: [],
oneText: "Inappropriate",
oneDescription: ["Inappropriate for customer assistant"],
inverted: true,
},
violence: {
zeroText: "Harmless",
zeroDescription: [],
oneText: "Violent",
oneDescription: ["Encourages or fails to discourage violence/abuse/terrorism/self-harm"],
inverted: true,
},
excessive_harm: {
zeroText: "Safe",
zeroDescription: [],
oneText: "Harmful",
oneDescription: [
"Content likely to cause excessive harm not justifiable in the context",
"Harm refers to physical or mental damage or injury to someone or something. Excessive refers to a reasonable threshold of harm in the context, for instance damaging skin is not excessive in the context of surgery.",
],
inverted: true,
},
sexual_content: {
zeroText: "Non Sexual",
zeroDescription: [],
oneText: "Sexual",
oneDescription: ["Contains sexual content"],
inverted: true,
},
toxicity: {
zeroText: "Polite",
zeroDescription: [],
oneText: "Rude",
oneDescription: ["Contains rude, abusive, profane or insulting content"],
inverted: true,
},
moral_judgement: {
zeroText: "Non-Judgemental",
zeroDescription: [],
oneText: "Judgemental",
oneDescription: ["Expresses moral judgement"],
inverted: true,
},
political_content: {
zeroText: "Apolitical",
zeroDescription: [],
oneText: "Political",
oneDescription: ["Expresses political views"],
inverted: true,
},
humor: {
zeroText: "Serious",
zeroDescription: [],
oneText: "Humorous",
oneDescription: ["Contains humorous content including sarcasm"],
inverted: false,
},
hate_speech: {
zeroText: "Safe",
zeroDescription: [],
oneText: "Hateful",
oneDescription: [
"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.",
],
inverted: true,
},
threat: {
zeroText: "Safe",
zeroDescription: [],
oneText: "Threatening",
oneDescription: ["Contains a threat against a person or persons"],
inverted: true,
},
misleading: {
zeroText: "Accurate",
zeroDescription: [],
oneText: "Misleading",
oneDescription: ["Contains text which is incorrect or misleading"],
inverted: true,
},
helpful: {
zeroText: "Unhelful",
zeroDescription: [],
oneText: "Helpful",
oneDescription: ["Completes the task to a high standard"],
inverted: false,
},
creative: {
zeroText: "Boring",
zeroDescription: [],
oneText: "Creative",
oneDescription: ["Expresses creativity in responding to the task"],
inverted: false,
},
};
export const LabelInputGroup = ({ labelIDs, onChange, isEditable = true }: LabelInputGroupProps) => {
const [labelValues, setLabelValues] = useState<number[]>(Array.from({ length: labelIDs.length }).map(() => null));
const cardColor = useColorModeValue("gray.50", "gray.800");
return (
<Grid templateColumns={"minmax(min-content, 30em)"} rowGap={2}>
{labelIDs.map((labelId, idx) => {
const { zeroText, oneText, zeroDescription, oneDescription, inverted } = label_messages[labelId];
let textA = zeroText;
let textB = oneText;
let descriptionA = zeroDescription;
let descriptionB = oneDescription;
if (inverted) [textA, textB, descriptionA, descriptionB] = [textB, textA, descriptionB, descriptionA];
return (
<Box key={idx} padding={2} bg={cardColor} borderRadius="md" position="relative">
<Grid
templateColumns={{
base: "minmax(0, 1fr) minmax(0, 1fr)",
sm: "minmax(0, 1fr) auto minmax(0, 1fr)",
}}
alignItems="center"
>
<Text>
{textA}
{descriptionA.length > 0 ? <Explain explanation={descriptionA} /> : null}
</Text>
<GridItem colSpan={{ base: 2, sm: 1 }} gridColumnStart={{ base: 1, sm: 2 }} gridRow={{ base: 2, sm: 1 }}>
<LikertButtons
isDisabled={!isEditable}
count={5}
data-cy="label-options"
onChange={(value) => {
const newState = labelValues.slice();
newState[idx] = value === null ? null : inverted ? 1 - value : value;
onChange(newState);
setLabelValues(newState);
}}
/>
</GridItem>
<GridItem>
<Text textAlign="right">
{textB}
{descriptionB.length > 0 ? <Explain explanation={descriptionB} /> : null}
</Text>
</GridItem>
</Grid>
</Box>
);
})}
</Grid>
);
};
website/src/components/Survey/LabelLikertGroup.tsx
+243
View File
@@ -0,0 +1,243 @@
import { Box, Grid, GridItem, Text, useColorModeValue } from "@chakra-ui/react";
import React from "react";
import { useState } from "react";
import { LikertButtons } from "src/components/Buttons/LikertButtons";
import { Explain } from "src/components/Explain";
interface LabelInputGroupProps {
labelIDs: Array<string>;
onChange: (values: number[]) => unknown;
isEditable?: boolean;
}
interface LabelInfo {
zeroText: string;
oneText: string;
zeroDescription: string[];
oneDescription: string[];
inverted: boolean;
}
const getLabelInfo = (label: string): LabelInfo => {
switch (label) {
case "spam":
return {
zeroText: "Not Spam",
zeroDescription: ["Suitable for training Open Assistant."],
oneText: "Spam",
oneDescription: [
"Seems to be intentionally low-quality or irrelevant",
'We consider the following unwanted content as spam: trolling, intentional undermining of our purpose, illegal material, material that violates our code of conduct, and other things that are inappropriate for our dataset. We collect these under the common heading of "spam".',
"This is not an assessment of whether this message is the best possible answer. Especially for prompts or user-replies, we very much want to retain all kinds of responses in the dataset, so that the assistant can learn to reply appropriately.",
"Please mark this text as spam only if it is clearly unsuited to be part of our dataset, as outlined above, and try not to make any subjective value-judgments beyond that.",
],
inverted: true,
};
case "fails_task":
return {
zeroText: "Follows Instructions",
zeroDescription: [],
oneText: "Fails Task",
oneDescription: ["Fails to follow the correct instruction / task"],
inverted: true,
};
case "not_appropriate":
return {
zeroText: "Appropriate",
zeroDescription: [],
oneText: "Inappropriate",
oneDescription: ["Inappropriate for customer assistant"],
inverted: true,
};
case "violence":
return {
zeroText: "Harmless",
zeroDescription: [],
oneText: "Violent",
oneDescription: ["Encourages or fails to discourage violence/abuse/terrorism/self-harm"],
inverted: true,
};
case "excessive_harm":
return {
zeroText: "Safe",
zeroDescription: [],
oneText: "Harmful",
oneDescription: [
"Content likely to cause excessive harm not justifiable in the context",
"Harm refers to physical or mental damage or injury to someone or something. Excessive refers to a reasonable threshold of harm in the context, for instance damaging skin is not excessive in the context of surgery.",
],
inverted: true,
};
case "sexual_content":
return {
zeroText: "Non Sexual",
zeroDescription: [],
oneText: "Sexual",
oneDescription: ["Contains sexual content"],
inverted: true,
};
case "toxicity":
return {
zeroText: "Polite",
zeroDescription: [],
oneText: "Rude",
oneDescription: ["Contains rude, abusive, profane or insulting content"],
inverted: true,
};
case "moral_judgement":
return {
zeroText: "Non-Judgemental",
zeroDescription: [],
oneText: "Judgemental",
oneDescription: ["Expresses moral judgement"],
inverted: true,
};
case "political_content":
return {
zeroText: "Apolitical",
zeroDescription: [],
oneText: "Political",
oneDescription: ["Expresses political views"],
inverted: true,
};
case "humor":
return {
zeroText: "Serious",
zeroDescription: [],
oneText: "Humorous",
oneDescription: ["Contains humorous content including sarcasm"],
inverted: false,
};
case "hate_speech":
return {
zeroText: "Safe",
zeroDescription: [],
oneText: "Hateful",
oneDescription: [
"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.",
],
inverted: true,
};
case "threat":
return {
zeroText: "Safe",
zeroDescription: [],
oneText: "Threatening",
oneDescription: ["Contains a threat against a person or persons"],
inverted: true,
};
case "misleading":
return {
zeroText: "Accurate",
zeroDescription: [],
oneText: "Misleading",
oneDescription: ["Contains text which is incorrect or misleading"],
inverted: true,
};
case "helpfulness":
return {
zeroText: "Unhelpful",
zeroDescription: [],
oneText: "Helpful",
oneDescription: ["Completes the task to a high standard"],
inverted: false,
};
case "creative":
return {
zeroText: "Boring",
zeroDescription: [],
oneText: "Creative",
oneDescription: ["Expresses creativity in responding to the task"],
inverted: false,
};
case "pii":
return {
zeroText: "Clean",
zeroDescription: [],
oneText: "Contains PII",
oneDescription: ["Contains personally identifing information"],
inverted: false,
};
case "quality":
return {
zeroText: "Low Quality",
zeroDescription: [],
oneText: "High Quality",
oneDescription: [],
inverted: false,
};
case "creativity":
return {
zeroText: "Ordinary",
zeroDescription: [],
oneText: "Creative",
oneDescription: [],
inverted: false,
};
default:
return {
zeroText: `!${label}`,
zeroDescription: [],
oneText: label,
oneDescription: [],
inverted: false,
};
}
};
export const LabelLikertGroup = ({ labelIDs, onChange, isEditable = true }: LabelInputGroupProps) => {
const [labelValues, setLabelValues] = useState<number[]>(Array.from({ length: labelIDs.length }).map(() => null));
const cardColor = useColorModeValue("gray.50", "gray.800");
return (
<Grid templateColumns={"minmax(min-content, 30em)"} rowGap={2}>
{labelIDs.map((labelId, idx) => {
const { zeroText, oneText, zeroDescription, oneDescription, inverted } = getLabelInfo(labelId);
let textA = zeroText;
let textB = oneText;
let descriptionA = zeroDescription;
let descriptionB = oneDescription;
if (inverted) [textA, textB, descriptionA, descriptionB] = [textB, textA, descriptionB, descriptionA];
return (
<Box key={idx} padding={2} bg={cardColor} borderRadius="md" position="relative">
<Grid
templateColumns={{
base: "minmax(0, 1fr) minmax(0, 1fr)",
sm: "minmax(0, 1fr) auto minmax(0, 1fr)",
}}
alignItems="center"
>
<Text as="div">
{textA}
{descriptionA.length > 0 ? <Explain explanation={descriptionA} /> : null}
</Text>
<GridItem colSpan={{ base: 2, sm: 1 }} gridColumnStart={{ base: 1, sm: 2 }} gridRow={{ base: 2, sm: 1 }}>
<LikertButtons
isDisabled={!isEditable}
count={5}
data-cy="label-options"
onChange={(value) => {
const newState = labelValues.slice();
newState[idx] = value === null ? null : inverted ? 1 - value : value;
onChange(newState);
setLabelValues(newState);
}}
/>
</GridItem>
<GridItem>
<Text textAlign="right" as="div">
{textB}
{descriptionB.length > 0 ? <Explain explanation={descriptionB} /> : null}
</Text>
</GridItem>
</Grid>
</Box>
);
})}
</Grid>
);
};
website/src/components/Survey/TaskControls.tsx
+46 -51
View File
@@ -1,71 +1,66 @@
import { Box, Flex, IconButton, Tooltip, useColorModeValue } from "@chakra-ui/react";
import { Box, Flex, IconButton, Progress, Tooltip, useColorModeValue } from "@chakra-ui/react";
import { Edit2 } from "lucide-react";
import { SkipButton } from "src/components/Buttons/Skip";
import { SubmitButton } from "src/components/Buttons/Submit";
import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
import { TaskStatus } from "src/components/Tasks/Task";
import { BaseTask } from "src/types/Task";
export interface TaskControlsProps {
// we need a task type
// eslint-disable-next-line @typescript-eslint/no-explicit-any
task: any;
className?: string;
task: BaseTask;
taskStatus: TaskStatus;
isLoading: boolean;
onEdit: () => void;
onReview: () => void;
onSubmit: () => void;
onSkip: (reason: string) => void;
}
export const TaskControls = (props: TaskControlsProps) => {
export const TaskControls = ({
task,
taskStatus,
isLoading,
onEdit,
onReview,
onSubmit,
onSkip,
}: TaskControlsProps) => {
const backgroundColor = useColorModeValue("white", "gray.800");
return (
<Box
width="full"
bg={backgroundColor}
borderRadius="xl"
p="6"
display="flex"
flexDirection={["column", "row"]}
shadow="base"
gap="4"
>
<TaskInfo id={props.task.id} output="Submit your answer" />
<Flex width={["full", "fit-content"]} justify="center" ml="auto" gap={2}>
{props.taskStatus === "REVIEW" || props.taskStatus === "SUBMITTED" ? (
<>
<Tooltip label="Edit">
<IconButton
size="lg"
data-cy="edit"
aria-label="edit"
onClick={props.onEdit}
icon={<Edit2 size="1em" />}
/>
</Tooltip>
<SubmitButton
colorScheme="green"
data-cy="submit"
isDisabled={props.taskStatus === "SUBMITTED"}
onClick={props.onSubmit}
>
Submit
</SubmitButton>
</>
) : (
<>
<SkipButton onSkip={props.onSkip} />
<SubmitButton
colorScheme="blue"
data-cy="review"
isDisabled={props.taskStatus === "NOT_SUBMITTABLE"}
onClick={props.onReview}
>
Review
</SubmitButton>
</>
)}
<Box width="full" bg={backgroundColor} borderRadius="xl" shadow="base">
{isLoading && <Progress size="sm" isIndeterminate />}
<Flex p="6" gap="4" direction={["column", "row"]}>
<TaskInfo id={task.id} output="Submit your answer" />
<Flex width={["full", "fit-content"]} justify="center" ml="auto" gap={2}>
{taskStatus.mode === "EDIT" ? (
<>
<SkipButton onSkip={onSkip} />
<SubmitButton
colorScheme="blue"
data-cy="review"
isDisabled={taskStatus.replyValidity === "INVALID"}
onClick={onReview}
>
Review
</SubmitButton>
</>
) : (
<>
<Tooltip label="Edit">
<IconButton size="lg" data-cy="edit" aria-label="edit" onClick={onEdit} icon={<Edit2 size="1em" />} />
</Tooltip>
<SubmitButton
colorScheme="green"
data-cy="submit"
isDisabled={taskStatus.mode === "SUBMITTED"}
onClick={onSubmit}
>
Submit
</SubmitButton>
</>
)}
</Flex>
</Flex>
</Box>
);
website/src/components/TaskPage/TaskPage.tsx
+53
View File
@@ -0,0 +1,53 @@
import Head from "next/head";
import { useTranslation } from "next-i18next";
import { TaskEmptyState } from "src/components/EmptyState";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { TaskInfos } from "src/components/Tasks/TaskTypes";
import { taskApiHooks } from "src/lib/constants";
import { getTypeSafei18nKey } from "src/lib/i18n";
import { TaskType } from "src/types/Task";
import { KnownTaskType } from "src/types/Tasks";
type TaskPageProps = {
type: TaskType;
};
export const TaskPage = ({ type }: TaskPageProps) => {
const { t } = useTranslation(["tasks", "common"]);
const taskApiHook = taskApiHooks[type];
const { response, isLoading, completeTask, skipTask } = taskApiHook(type);
const taskInfo = TaskInfos.find((taskType) => taskType.type === type);
let body;
switch (response.taskAvailability) {
case "AWAITING_INITIAL":
body = <LoadingScreen text={t("common:loading")} />;
break;
case "NONE_AVAILABLE":
body = <TaskEmptyState />;
break;
case "AVAILABLE":
body = (
<Task
key={response.task.id}
frontendId={response.id}
task={response.task as KnownTaskType}
isLoading={isLoading}
completeTask={completeTask}
skipTask={skipTask}
/>
);
break;
}
return (
<>
<Head>
<title>{t(getTypeSafei18nKey(`${taskInfo.id}.label`))}</title>
<meta name="description" content={t(getTypeSafei18nKey(`${taskInfo.id}.desc`))} />
</Head>
{body}
</>
);
};
website/src/components/Tasks/CreateTask.tsx
+9 -3
View File
@@ -7,6 +7,8 @@ import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
import { TaskSurveyProps } from "src/components/Tasks/Task";
import { TaskHeader } from "src/components/Tasks/TaskHeader";
import { getTypeSafei18nKey } from "src/lib/i18n";
import { TaskType } from "src/types/Task";
import { CreateTaskType } from "src/types/Tasks";
export const CreateTask = ({
task,
@@ -15,7 +17,7 @@ export const CreateTask = ({
isDisabled,
onReplyChanged,
onValidityChanged,
}: TaskSurveyProps<{ text: string }>) => {
}: TaskSurveyProps<CreateTaskType, { text: string }>) => {
const { t, i18n } = useTranslation(["tasks", "common"]);
const cardColor = useColorModeValue("gray.50", "gray.800");
const titleColor = useColorModeValue("gray.800", "gray.300");
@@ -39,7 +41,7 @@ export const CreateTask = ({
<TwoColumnsWithCards>
<>
<TaskHeader taskType={taskType} />
{!!task.conversation && (
{task.type !== TaskType.initial_prompt && (
<Box mt="4" borderRadius="lg" bg={cardColor} className="p-3 sm:p-6">
<MessageTable messages={task.conversation.messages} highlightLastMessage />
</Box>
@@ -56,7 +58,11 @@ export const CreateTask = ({
text={inputText}
onTextChange={textChangeHandler}
thresholds={{ low: 20, medium: 40, goal: 50 }}
textareaProps={{ placeholder: t("tasks:write_initial_prompt"), isDisabled, isReadOnly: !isEditable }}
textareaProps={{
placeholder: t(getTypeSafei18nKey(`tasks:${taskType.id}.response_placeholder`)),
isDisabled,
isReadOnly: !isEditable,
}}
/>
</Stack>
</>
website/src/components/Tasks/EvaluateTask.tsx
+10 -6
View File
@@ -5,6 +5,8 @@ import { Sortable } from "src/components/Sortable/Sortable";
import { SurveyCard } from "src/components/Survey/SurveyCard";
import { TaskSurveyProps } from "src/components/Tasks/Task";
import { TaskHeader } from "src/components/Tasks/TaskHeader";
import { TaskType } from "src/types/Task";
import { RankTaskType } from "src/types/Tasks";
export const EvaluateTask = ({
task,
@@ -13,20 +15,22 @@ export const EvaluateTask = ({
isDisabled,
onReplyChanged,
onValidityChanged,
}: TaskSurveyProps<{ ranking: number[] }>) => {
}: TaskSurveyProps<RankTaskType, { ranking: number[] }>) => {
const cardColor = useColorModeValue("gray.50", "gray.800");
const [ranking, setRanking] = useState<number[]>(null);
let messages = [];
if (task.conversation) {
if (task.type !== TaskType.rank_initial_prompts) {
messages = task.conversation.messages;
messages = messages.map((message, index) => ({ ...message, id: index }));
}
useEffect(() => {
if (ranking === null) {
const defaultRanking = (task.replies ?? task.prompts).map((_, idx) => idx);
onReplyChanged({ ranking: defaultRanking });
if (task.type === TaskType.rank_initial_prompts) {
onReplyChanged({ ranking: task.prompts.map((_, idx) => idx) });
} else {
onReplyChanged({ ranking: task.replies.map((_, idx) => idx) });
}
onValidityChanged("DEFAULT");
} else {
onReplyChanged({ ranking });
@@ -34,7 +38,7 @@ export const EvaluateTask = ({
}
}, [task, ranking, onReplyChanged, onValidityChanged]);
const sortables = task.replies ? "replies" : "prompts";
const sortables = task.type === TaskType.rank_initial_prompts ? "prompts" : "replies";
return (
<div data-cy="task" data-task-type="evaluate-task">
website/src/components/Tasks/LabelTask/LabelTask.tsx
+53 -32
View File
@@ -1,12 +1,18 @@
import { Box, Flex, Text, useColorModeValue } from "@chakra-ui/react";
import { Box, useBoolean, useColorModeValue } from "@chakra-ui/react";
import { useTranslation } from "next-i18next";
import { useEffect, useState } from "react";
import { MessageView } from "src/components/Messages";
import { LabelInputGroup } from "src/components/Messages/LabelInputGroup";
import { MessageTable } from "src/components/Messages/MessageTable";
import { LabelInputGroup } from "src/components/Survey/LabelInputGroup";
import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
import { TaskSurveyProps } from "src/components/Tasks/Task";
import { TaskHeader } from "src/components/Tasks/TaskHeader";
import { TaskType } from "src/types/Task";
import { LabelTaskType } from "src/types/Tasks";
const isRequired = (labelName: string, requiredLabels?: string[]) => {
return requiredLabels ? requiredLabels.includes(labelName) : false;
};
export const LabelTask = ({
task,
@@ -14,52 +20,67 @@ export const LabelTask = ({
isEditable,
onReplyChanged,
onValidityChanged,
}: TaskSurveyProps<{ text: string; labels: Record<string, number>; message_id: string }>) => {
const [sliderValues, setSliderValues] = useState<number[]>(new Array(task.valid_labels.length).fill(null));
}: TaskSurveyProps<LabelTaskType, { text: string; labels: Record<string, number>; message_id: string }>) => {
const { t } = useTranslation("labelling");
const [values, setValues] = useState<number[]>(new Array(task.labels.length).fill(null));
const [userInputMade, setUserInputMade] = useBoolean(false);
// Initial setup to run when the task changes
useEffect(() => {
console.assert(task.valid_labels.length === sliderValues.length);
const labels = Object.fromEntries(task.valid_labels.map((label, i) => [label, sliderValues[i]]));
onReplyChanged({ labels, text: task.reply || task.prompt, message_id: task.message_id });
onValidityChanged(sliderValues.every((value) => value !== null) ? "VALID" : "INVALID");
}, [task, sliderValues, onReplyChanged, onValidityChanged]);
setValues(new Array(task.labels.length).fill(null));
onValidityChanged(task.labels.some(({ name }) => isRequired(name, task.mandatory_labels)) ? "INVALID" : "DEFAULT");
setUserInputMade.off();
}, [task, setUserInputMade, onValidityChanged]);
// Update the reply and validity when the values change
useEffect(() => {
onReplyChanged({
text: "unused?",
labels: Object.fromEntries(task.labels.map(({ name }, idx) => [name, values[idx] || 0])),
message_id: task.message_id,
});
onValidityChanged(
task.labels.some(({ name }, idx) => values[idx] === null && isRequired(name, task.mandatory_labels))
? "INVALID"
: userInputMade
? "VALID"
: "DEFAULT"
);
}, [task, values, onReplyChanged, userInputMade, onValidityChanged]);
const cardColor = useColorModeValue("gray.50", "gray.800");
const isSpamTask = task.mode === "simple" && task.valid_labels.length === 1 && task.valid_labels[0] === "spam";
return (
<div data-cy="task" data-task-type="label-task">
<div data-cy="task" data-task-type={isSpamTask ? "spam-task" : "label-task"}>
<TwoColumnsWithCards>
<>
<TaskHeader taskType={taskType} />
{task.conversation ? (
{task.type !== TaskType.label_initial_prompt ? (
<Box mt="4" p={[4, 6]} borderRadius="lg" bg={cardColor}>
<MessageTable
messages={[
...(task.conversation?.messages ?? []),
{
text: task.reply,
is_assistant: task.type === TaskType.label_assistant_reply,
message_id: task.message_id,
},
]}
highlightLastMessage
/>
<MessageTable messages={task.conversation.messages} highlightLastMessage />
</Box>
) : (
<Box mt="4">
<MessageView text={task.prompt} is_assistant={false} id={task.message_id} />
<MessageView text={task.prompt} is_assistant={false} id={task.message_id} emojis={{}} user_emojis={[]} />
</Box>
)}
</>
<Flex direction="column" alignItems="stretch">
<Text>The highlighted message:</Text>
<LabelInputGroup
simple={task.mode === "simple"}
labelIDs={task.valid_labels}
isEditable={isEditable}
onChange={setSliderValues}
/>
</Flex>
<LabelInputGroup
labels={task.labels}
values={values}
requiredLabels={task.mandatory_labels}
isEditable={isEditable}
instructions={{
yesNoInstruction: t("label_highlighted_yes_no_instruction"),
flagInstruction: t("label_highlighted_flag_instruction"),
likertInstruction: t("label_highlighted_likert_instruction"),
}}
onChange={(values) => {
setValues(values);
setUserInputMade.on();
}}
/>
</TwoColumnsWithCards>
</div>
);
website/src/components/Tasks/Task/Task.stories.tsx
+8 -5
View File
@@ -7,8 +7,10 @@ export default {
component: Task,
};
const Template = ({ frontendId, task, trigger, mutate }) => {
return <Task frontendId={frontendId} task={task} trigger={trigger} mutate={mutate} />;
const Template = ({ frontendId, task, isLoading, completeTask, skipTask }) => {
return (
<Task frontendId={frontendId} task={task} isLoading={isLoading} completeTask={completeTask} skipTask={skipTask} />
);
};
export const Default = Template.bind({});
@@ -23,10 +25,11 @@ Default.args = {
type: "label_prompter_reply",
valid_labels: ["spam", "fails_task"],
},
trigger: (id, update_type, content) => {
isLoading: false,
completeTask: (id, update_type, content) => {
console.log(content);
},
mutate: () => {
console.log("mutate");
skipTask: () => {
console.log("skip");
},
};
website/src/components/Tasks/Task/Task.tsx
+143 -92
View File
@@ -1,5 +1,6 @@
import { useTranslation } from "next-i18next";
import { useRef, useState } from "react";
import { useCallback, useEffect, useReducer } from "react";
import { useMemo, useRef } from "react";
import { TaskControls } from "src/components/Survey/TaskControls";
import { CreateTask } from "src/components/Tasks/CreateTask";
import { EvaluateTask } from "src/components/Tasks/EvaluateTask";
@@ -8,15 +9,53 @@ import { TaskCategory, TaskInfo, TaskInfos } from "src/components/Tasks/TaskType
import { UnchangedWarning } from "src/components/Tasks/UnchangedWarning";
import { post } from "src/lib/api";
import { getTypeSafei18nKey } from "src/lib/i18n";
import { TaskContent, TaskReplyValidity } from "src/types/Task";
import { BaseTask, TaskContent, TaskReplyValidity } from "src/types/Task";
import { CreateTaskType, KnownTaskType, LabelTaskType, RankTaskType } from "src/types/Tasks";
import useSWRMutation from "swr/mutation";
export type TaskStatus = "NOT_SUBMITTABLE" | "DEFAULT" | "VALID" | "REVIEW" | "SUBMITTED";
interface EditMode {
mode: "EDIT";
replyValidity: TaskReplyValidity;
}
interface ReviewMode {
mode: "REVIEW";
}
interface DefaultWarnMode {
mode: "DEFAULT_WARN";
}
interface SubmittedMode {
mode: "SUBMITTED";
}
export interface TaskSurveyProps<T> {
// we need a task type
// eslint-disable-next-line @typescript-eslint/no-explicit-any
task: any;
export type TaskStatus = EditMode | DefaultWarnMode | ReviewMode | SubmittedMode;
interface NewTask {
action: "NEW_TASK";
}
interface Review {
action: "REVIEW";
}
interface SetSubmitted {
action: "SET_SUBMITTED";
}
interface ReturnToEdit {
action: "RETURN_EDIT";
}
interface AcceptDefault {
action: "ACCEPT_DEFAULT";
}
interface UpdateValidity {
action: "UPDATE_VALIDITY";
replyValidity: TaskReplyValidity;
}
export interface TaskSurveyProps<TaskType extends BaseTask, T> {
task: TaskType;
taskType: TaskInfo;
isEditable: boolean;
isDisabled?: boolean;
@@ -24,19 +63,76 @@ export interface TaskSurveyProps<T> {
onValidityChanged: (validity: TaskReplyValidity) => void;
}
export const Task = ({ frontendId, task, trigger, mutate }) => {
interface TaskProps {
frontendId: string;
task: KnownTaskType;
isLoading: boolean;
completeTask: (TaskContent) => void;
skipTask: () => void;
}
export const Task = ({ frontendId, task, isLoading, completeTask, skipTask }: TaskProps) => {
const { t } = useTranslation("tasks");
const [taskStatus, setTaskStatus] = useState<TaskStatus>("NOT_SUBMITTABLE");
const [taskStatus, taskEvent] = useReducer(
(
status: TaskStatus,
event: NewTask | UpdateValidity | AcceptDefault | Review | ReturnToEdit | SetSubmitted
): TaskStatus => {
switch (event.action) {
case "NEW_TASK":
return { mode: "EDIT", replyValidity: "INVALID" };
case "UPDATE_VALIDITY":
return status.mode === "EDIT" ? { mode: "EDIT", replyValidity: event.replyValidity } : status;
case "ACCEPT_DEFAULT":
return status.mode === "DEFAULT_WARN" ? { mode: "REVIEW" } : status;
case "REVIEW": {
if (status.mode === "EDIT") {
switch (status.replyValidity) {
case "DEFAULT":
return { mode: "DEFAULT_WARN" };
case "VALID":
return { mode: "REVIEW" };
}
}
return status;
}
case "RETURN_EDIT": {
switch (status.mode) {
case "REVIEW":
return { mode: "EDIT", replyValidity: "VALID" };
case "DEFAULT_WARN":
return { mode: "EDIT", replyValidity: "DEFAULT" };
default:
return status;
}
}
case "SET_SUBMITTED": {
return status.mode === "REVIEW" ? { mode: "SUBMITTED" } : status;
}
}
},
{ mode: "EDIT", replyValidity: "INVALID" }
);
const replyContent = useRef<TaskContent>(null);
const [showUnchangedWarning, setShowUnchangedWarning] = useState(false);
const updateValidity = useCallback(
(replyValidity: TaskReplyValidity) => taskEvent({ action: "UPDATE_VALIDITY", replyValidity }),
[taskEvent]
);
useEffect(() => {
taskEvent({ action: "NEW_TASK" });
}, [task.id, updateValidity]);
const rootEl = useRef<HTMLDivElement>(null);
const taskType = TaskInfos.find((taskType) => taskType.type === task.type && taskType.mode === task.mode);
const taskType = useMemo(() => {
return TaskInfos.find((taskType) => taskType.type === task.type);
}, [task.type]);
const { trigger: sendRejection } = useSWRMutation("/api/reject_task", post, {
onSuccess: async () => {
mutate();
skipTask();
},
});
@@ -47,128 +143,83 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
});
};
const edit_mode = taskStatus === "NOT_SUBMITTABLE" || taskStatus === "DEFAULT" || taskStatus === "VALID";
const submitted = taskStatus === "SUBMITTED";
const onValidityChanged = (validity: TaskReplyValidity) => {
if (!edit_mode) return;
switch (validity) {
case "DEFAULT":
if (taskStatus !== "DEFAULT") setTaskStatus("DEFAULT");
break;
case "VALID":
if (taskStatus !== "VALID") setTaskStatus("VALID");
break;
case "INVALID":
if (taskStatus !== "NOT_SUBMITTABLE") setTaskStatus("NOT_SUBMITTABLE");
break;
}
};
const onReplyChanged = (content: TaskContent) => {
replyContent.current = content;
};
const reviewResponse = () => {
switch (taskStatus) {
case "DEFAULT":
setShowUnchangedWarning(true);
break;
case "VALID":
setTaskStatus("REVIEW");
break;
default:
return;
}
};
const editResponse = () => {
switch (taskStatus) {
case "REVIEW":
setTaskStatus("VALID");
break;
default:
return;
}
};
const onReplyChanged = useCallback(
(content: TaskContent) => {
replyContent.current = content;
},
[replyContent]
);
const submitResponse = () => {
switch (taskStatus) {
case "REVIEW": {
trigger({
id: frontendId,
update_type: taskType.update_type,
content: replyContent.current,
});
setTaskStatus("SUBMITTED");
scrollToTop(rootEl.current);
break;
}
default:
return;
if (taskStatus.mode === "REVIEW") {
completeTask({
id: frontendId,
update_type: taskType.update_type,
content: replyContent.current,
});
taskEvent({ action: "SET_SUBMITTED" });
scrollToTop(rootEl.current);
}
};
function taskTypeComponent() {
const taskTypeComponent = useMemo(() => {
switch (taskType.category) {
case TaskCategory.Create:
return (
<CreateTask
task={task}
task={task as CreateTaskType}
taskType={taskType}
isEditable={edit_mode}
isDisabled={submitted}
isEditable={taskStatus.mode === "EDIT"}
isDisabled={taskStatus.mode === "SUBMITTED"}
onReplyChanged={onReplyChanged}
onValidityChanged={onValidityChanged}
onValidityChanged={updateValidity}
/>
);
case TaskCategory.Evaluate:
return (
<EvaluateTask
task={task}
task={task as RankTaskType}
taskType={taskType}
isEditable={edit_mode}
isDisabled={submitted}
isEditable={taskStatus.mode === "EDIT"}
isDisabled={taskStatus.mode === "SUBMITTED"}
onReplyChanged={onReplyChanged}
onValidityChanged={onValidityChanged}
onValidityChanged={updateValidity}
/>
);
case TaskCategory.Label:
return (
<LabelTask
task={task}
task={task as LabelTaskType}
taskType={taskType}
isEditable={edit_mode}
isDisabled={submitted}
isEditable={taskStatus.mode === "EDIT"}
isDisabled={taskStatus.mode === "SUBMITTED"}
onReplyChanged={onReplyChanged}
onValidityChanged={onValidityChanged}
onValidityChanged={updateValidity}
/>
);
}
}
}, [task, taskType, taskStatus.mode, onReplyChanged, updateValidity]);
return (
<div ref={rootEl}>
{taskTypeComponent()}
{taskTypeComponent}
<TaskControls
task={task}
taskStatus={taskStatus}
onEdit={editResponse}
onReview={reviewResponse}
isLoading={isLoading}
onEdit={() => taskEvent({ action: "RETURN_EDIT" })}
onReview={() => taskEvent({ action: "REVIEW" })}
onSubmit={submitResponse}
onSkip={rejectTask}
/>
<UnchangedWarning
show={showUnchangedWarning}
show={taskStatus.mode === "DEFAULT_WARN"}
title={t(getTypeSafei18nKey(`${taskType.id}.unchanged_title`)) || t("default.unchanged_title")}
message={t(getTypeSafei18nKey(`${taskType.id}.unchanged_message`)) || t("default.unchanged_message")}
continueButtonText={"Continue anyway"}
onClose={() => setShowUnchangedWarning(false)}
onClose={() => taskEvent({ action: "RETURN_EDIT" })}
onContinueAnyway={() => {
if (taskStatus === "DEFAULT") {
setTaskStatus("REVIEW");
setShowUnchangedWarning(false);
}
taskEvent({ action: "ACCEPT_DEFAULT" });
}}
/>
</div>
website/src/components/UserTable.tsx
+1 -2
View File
@@ -4,8 +4,7 @@ import { Pencil } from "lucide-react";
import Link from "next/link";
import { memo, useState } from "react";
import { get } from "src/lib/api";
import { FetchUsersResponse } from "src/lib/oasst_api_client";
import type { User } from "src/types/Users";
import type { FetchUsersResponse, User } from "src/types/Users";
import useSWR from "swr";
import { DataTable, DataTableColumnDef, FilterItem } from "./DataTable";
website/src/hooks/tasks/useGenericTaskAPI.tsx
+28 -16
View File
@@ -1,26 +1,38 @@
import { useState } from "react";
import { get, post } from "src/lib/api";
import { BaseTask, TaskResponse, TaskType as TaskTypeEnum } from "src/types/Task";
import { TaskApiHook } from "src/types/Hooks";
import { BaseTask, TaskAvailableResponse, TaskResponse, TaskType as TaskTypeEnum } from "src/types/Task";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
export const useGenericTaskAPI = <TaskType extends BaseTask>(taskType: TaskTypeEnum) => {
type ConcreteTaskResponse = TaskResponse<TaskType>;
export const useGenericTaskAPI = <TaskType extends BaseTask>(taskType: TaskTypeEnum): TaskApiHook<TaskType> => {
const [response, setReponse] = useState<TaskResponse<TaskType>>({ taskAvailability: "AWAITING_INITIAL" });
// Note: We use isValidating to indiate we are loading beause it signals eash load, not just the first one.
const { isValidating: isLoading, mutate: requestNewTask } = useSWRImmutable<TaskAvailableResponse<TaskType>>(
"/api/new_task/" + taskType,
get,
{
onSuccess: (response) => {
setReponse({ taskAvailability: "AVAILABLE", ...response });
},
onError: () => {
// We could check for code 503 here for truely unavailable, but we need to do something with other errors anyway.
setReponse({ taskAvailability: "NONE_AVAILABLE" });
},
revalidateOnMount: true,
dedupingInterval: 500,
}
);
const [tasks, setTasks] = useState<ConcreteTaskResponse[]>([]);
const { isLoading, mutate, error } = useSWRImmutable<ConcreteTaskResponse>("/api/new_task/" + taskType, get, {
onSuccess: (data) => setTasks([data]),
revalidateOnMount: true,
dedupingInterval: 500,
});
const { trigger } = useSWRMutation("/api/update_task", post, {
onSuccess: async (newTask: ConcreteTaskResponse) => {
setTasks((oldTasks) => [...oldTasks, newTask]);
mutate();
const { trigger: completeTask } = useSWRMutation<TaskAvailableResponse<TaskType>>("/api/update_task", post, {
onSuccess: () => {
requestNewTask();
},
onError: () => {
// We could check for code 503 here for truely unavailable, but we need to do something with other errors anyway.
setReponse({ taskAvailability: "NONE_AVAILABLE" });
},
});
return { tasks, isLoading, trigger, error, reset: mutate };
return { response, isLoading, completeTask, skipTask: requestNewTask };
};
website/src/lib/api.ts
+5 -1
View File
@@ -6,8 +6,11 @@ const headers = {
"Content-Type": "application/json",
};
// Create Axios such that we always send credential cookies along with the
// request. This allows the Backend services to authenticate the user.
const api = axios.create({
headers,
withCredentials: true,
});
export const get = (url: string) => api.get(url).then((res) => res.data);
@@ -17,7 +20,8 @@ export const post = (url: string, { arg: data }) => api.post(url, data).then((re
api.interceptors.response.use(
(response) => response,
(error) => {
throw new OasstError(error.message ?? error, error.error_code);
const err = error?.response?.data;
throw new OasstError(err?.message ?? error, err?.errorCode, error?.response?.httpStatusCode || -1);
}
);
website/src/lib/auth.ts
+2 -2
View File
@@ -21,14 +21,14 @@ const withoutRole = (role: Role, handler: (arg0: NextApiRequest, arg1: NextApiRe
* Wraps any API Route handler and verifies that the user has the appropriate
* role before running the handler. Returns a 403 otherwise.
*/
const withRole = (role: Role, handler: (arg0: NextApiRequest, arg1: NextApiResponse) => void) => {
const withRole = (role: Role, handler: (arg0: NextApiRequest, arg1: NextApiResponse, token: JWT) => void) => {
return async (req: NextApiRequest, res: NextApiResponse) => {
const token = await getToken({ req });
if (!token || token.role !== role) {
res.status(403).end();
return;
}
return handler(req, res);
return handler(req, res, token);
};
};
website/src/lib/constants.ts
+43
View File
@@ -0,0 +1,43 @@
import {
useCreateAssistantReply,
useCreateInitialPrompt,
useCreatePrompterReply,
} from "src/hooks/tasks/useCreateReply";
import { useGenericTaskAPI } from "src/hooks/tasks/useGenericTaskAPI";
import {
useLabelAssistantReplyTask,
useLabelInitialPromptTask,
useLabelPrompterReplyTask,
} from "src/hooks/tasks/useLabelingTask";
import {
useRankAssistantRepliesTask,
useRankInitialPromptsTask,
useRankPrompterRepliesTask,
} from "src/hooks/tasks/useRankReplies";
import { TaskApiHooks } from "src/types/Hooks";
import { TaskType } from "src/types/Task";
export const ERROR_CODES = {
TASK_REQUESTED_TYPE_NOT_AVAILABLE: 1006,
TASK_INVALID_REQUEST_TYPE: 1000,
TASK_ACK_FAILED: 1001,
TASK_NACK_FAILED: 1002,
TASK_INVALID_RESPONSE_TYPE: 1003,
TASK_INTERACTION_REQUEST_FAILED: 1004,
TASK_GENERATION_FAILED: 1005,
TASK_AVAILABILITY_QUERY_FAILED: 1007,
TASK_MESSAGE_TOO_LONG: 1008,
};
export const taskApiHooks: TaskApiHooks = {
[TaskType.random]: useGenericTaskAPI,
[TaskType.assistant_reply]: useCreateAssistantReply,
[TaskType.initial_prompt]: useCreateInitialPrompt,
[TaskType.label_assistant_reply]: useLabelAssistantReplyTask,
[TaskType.label_initial_prompt]: useLabelInitialPromptTask,
[TaskType.label_prompter_reply]: useLabelPrompterReplyTask,
[TaskType.prompter_reply]: useCreatePrompterReply,
[TaskType.rank_assistant_replies]: useRankAssistantRepliesTask,
[TaskType.rank_initial_prompts]: useRankInitialPromptsTask,
[TaskType.rank_prompter_replies]: useRankPrompterRepliesTask,
};
website/src/lib/oasst_api_client.ts
+136 -153
View File
@@ -1,126 +1,34 @@
import type { Message } from "src/types/Conversation";
import type { EmojiOp, Message } from "src/types/Conversation";
import { LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard";
import type { AvailableTasks } from "src/types/Task";
import type { BackendUser, BackendUserCore, User } from "src/types/Users";
import type { BackendUser, BackendUserCore, FetchUsersParams, FetchUsersResponse } from "src/types/Users";
export class OasstError {
message: string;
errorCode: number;
httpStatusCode: number;
constructor(message: string, errorCode: number, httpStatusCode?: number) {
constructor(message: string, errorCode: number, httpStatusCode: number) {
this.message = message;
this.errorCode = errorCode;
this.httpStatusCode = httpStatusCode;
}
}
export type FetchUsersParams = {
limit: number;
cursor?: string;
direction: "forward" | "back";
searchDisplayName?: string;
sortKey?: "username" | "display_name";
};
export type FetchUsersResponse<T extends User | BackendUser = BackendUser> = {
items: T[];
next?: string;
prev?: string;
sort_key: "username" | "display_name";
order: "asc" | "desc";
};
export class OasstApiClient {
oasstApiUrl: string;
oasstApiKey: string;
userHeaders: Record<string, string> = {};
constructor(oasstApiUrl: string, oasstApiKey: string) {
constructor(oasstApiUrl: string, oasstApiKey: string, user?: BackendUserCore) {
this.oasstApiUrl = oasstApiUrl;
this.oasstApiKey = oasstApiKey;
if (user) {
this.userHeaders = {
"X-OASST-USER": `${user.auth_method}:${user.id}`,
};
}
}
private async post(path: string, body: any): Promise<any> {
const resp = await fetch(`${this.oasstApiUrl}${path}`, {
method: "POST",
headers: {
"X-API-Key": this.oasstApiKey,
"Content-Type": "application/json",
},
body: JSON.stringify(body),
});
if (resp.status === 204) {
return null;
}
if (resp.status >= 300) {
const errorText = await resp.text();
let error: any;
try {
error = JSON.parse(errorText);
} catch (e) {
throw new OasstError(errorText, 0, resp.status);
}
throw new OasstError(error.message ?? error, error.error_code, resp.status);
}
return await resp.json();
}
private async put(path: string): Promise<any> {
const resp = await fetch(`${this.oasstApiUrl}${path}`, {
method: "PUT",
headers: {
"X-API-Key": this.oasstApiKey,
},
});
if (resp.status === 204) {
return null;
}
if (resp.status >= 300) {
const errorText = await resp.text();
let error: any;
try {
error = JSON.parse(errorText);
} catch (e) {
throw new OasstError(errorText, 0, resp.status);
}
throw new OasstError(error.message ?? error, error.error_code, resp.status);
}
return await resp.json();
}
private async get(path: string): Promise<any> {
const resp = await fetch(`${this.oasstApiUrl}${path}`, {
method: "GET",
headers: {
"X-API-Key": this.oasstApiKey,
"Content-Type": "application/json",
},
});
if (resp.status === 204) {
return null;
}
if (resp.status >= 300) {
const errorText = await resp.text();
let error: any;
try {
error = JSON.parse(errorText);
} catch (e) {
throw new OasstError(errorText, 0, resp.status);
}
throw new OasstError(error.message ?? error, error.error_code, resp.status);
}
return await resp.json();
}
// TODO return a strongly typed Task?
// This method is used to store a task in RegisteredTask.task.
// This is a raw Json type, so we can't use it to strongly type the task.
@@ -132,13 +40,13 @@ export class OasstApiClient {
});
}
async ackTask(taskId: string, messageId: string): Promise<void> {
async ackTask(taskId: string, messageId: string): Promise<null> {
return this.post(`/api/v1/tasks/${taskId}/ack`, {
message_id: messageId,
});
}
async nackTask(taskId: string, reason: string): Promise<void> {
async nackTask(taskId: string, reason: string): Promise<null> {
return this.post(`/api/v1/tasks/${taskId}/nack`, {
reason,
});
@@ -170,8 +78,29 @@ export class OasstApiClient {
/**
* Returns the tasks availability information for given `user`.
*/
async fetch_tasks_availability(user: object): Promise<any> {
return this.post("/api/v1/tasks/availability", user);
async fetch_tasks_availability(user: object): Promise<AvailableTasks | null> {
return this.post<AvailableTasks>("/api/v1/tasks/availability", user);
}
/**
* Returns the `Message`s associated with `user_id` in the backend.
*/
async fetch_message(message_id: string, user: BackendUserCore): Promise<Message> {
return this.get<Message>(`/api/v1/messages/${message_id}?username=${user.id}&auth_method=${user.auth_method}`);
}
/**
* Send a report about a message
*/
async send_report(message_id: string, user: BackendUserCore, text: string) {
return this.post("/api/v1/text_labels", {
type: "text_labels",
message_id,
labels: [], // Not yet implemented
text,
is_report: true,
user,
});
}
/**
@@ -191,18 +120,12 @@ export class OasstApiClient {
/**
* Returns the `BackendUser` associated with `user_id`
*/
async fetch_user(user_id: string): Promise<BackendUser> {
async fetch_user(user_id: string): Promise<BackendUser | null> {
return this.get(`/api/v1/users/${user_id}`);
}
/**
* Returns the set of `BackendUser`s stored by the backend.
*
* @param {number} max_count - The maximum number of users to fetch.
* @param {string} cursor - The user's `display_name` to use when paginating.
* @param {boolean} isForward - If true and `cursor` is not empty, pages
* forward. If false and `cursor` is not empty, pages backwards.
* @returns {Promise<BackendUser[]>} A Promise that returns an array of `BackendUser` objects.
*/
async fetch_users({
direction,
@@ -210,53 +133,35 @@ export class OasstApiClient {
cursor,
searchDisplayName,
sortKey = "display_name",
}: FetchUsersParams): Promise<FetchUsersResponse> {
const params = new URLSearchParams({
}: FetchUsersParams): Promise<FetchUsersResponse | null> {
return this.get<FetchUsersResponse>(`/api/v1/users/cursor`, {
search_text: searchDisplayName,
sort_key: sortKey,
max_count: limit.toString(),
max_count: limit,
after: direction === "forward" ? cursor : undefined,
before: direction === "back" ? cursor : undefined,
});
// The backend API uses different query parameters depending on the
// pagination direction but they both take the same cursor value.
// Depending on direction, pick the right query param.
if (cursor !== "") {
params.append(direction === "forward" ? "after" : "before", cursor);
}
const BASE_URL = `/api/v1/users/cursor`;
const url = `${BASE_URL}/?${params.toString()}`;
return this.get(url);
}
// async fetch_user_by_display_name(name: string): Promise<BackendUser[]> {
// const params = new URLSearchParams({
// search_text: name,
// });
// const endpoint = `/api/v1/frontend_users/by_display_name`;
// return this.get(`${endpoint}?${params.toString()}`);
// }
/**
* Returns the `Message`s associated with `user_id` in the backend.
*/
async fetch_user_messages(user_id: string): Promise<Message[]> {
return this.get(`/api/v1/users/${user_id}/messages`);
async fetch_user_messages(user_id: string): Promise<Message[] | null> {
return this.get<Message[]>(`/api/v1/users/${user_id}/messages`);
}
/**
* Updates the backend's knowledge about the `user_id`.
*/
async set_user_status(user_id: string, is_enabled: boolean, notes): Promise<void> {
return this.put(`/api/v1/users/users/${user_id}?enabled=${is_enabled}&notes=${notes}`);
async set_user_status(user_id: string, is_enabled: boolean, notes: string): Promise<void> {
await this.put(`/api/v1/users/users/${user_id}?enabled=${is_enabled}&notes=${notes}`);
}
/**
* Returns the valid labels for messages.
*/
async fetch_valid_text(): Promise<any> {
return this.get(`/api/v1/text_labels/valid_labels`);
async fetch_valid_text(messageId?: string): Promise<any> {
return this.get("/api/v1/text_labels/valid_labels", { message_id: messageId });
}
/**
@@ -265,21 +170,99 @@ export class OasstApiClient {
async fetch_leaderboard(
time_frame: LeaderboardTimeFrame,
{ limit = 20 }: { limit?: number }
): Promise<LeaderboardReply> {
const params = new URLSearchParams({
limit: limit.toString(),
});
return this.get(`/api/v1/leaderboards/${time_frame}?${params.toString()}`);
): Promise<LeaderboardReply | null> {
return this.get<LeaderboardReply>(`/api/v1/leaderboards/${time_frame}`, { max_count: limit });
}
/**
* Returns the counts of all tasks (some might be zero)
*/
async fetch_available_tasks(user: BackendUserCore, lang: string): Promise<AvailableTasks> {
return this.post(`/api/v1/tasks/availability?lang=${lang}`, user);
async fetch_available_tasks(user: BackendUserCore, lang: string): Promise<AvailableTasks | null> {
return this.post<AvailableTasks>(`/api/v1/tasks/availability?lang=${lang}`, user);
}
/**
* Add/remove an emoji on a message for a user
*/
async set_user_message_emoji(message_id: string, user: BackendUserCore, emoji: string, op: EmojiOp): Promise<void> {
await this.post(`/api/v1/messages/${message_id}/emoji`, {
user,
emoji,
op,
});
}
private async post<T>(path: string, body: unknown) {
return this.request<T>("POST", path, {
body: JSON.stringify(body),
});
}
private async put<T>(path: string) {
return this.request<T>("PUT", path);
}
private async get<T>(path: string, query?: Record<string, string | number | boolean | undefined>) {
if (!query) {
return this.request<T>("GET", path);
}
const filteredQuery = Object.fromEntries(
Object.entries(query).filter(([, value]) => value !== undefined)
) as Record<string, string>;
const params = new URLSearchParams(filteredQuery).toString();
return this.request<T>("GET", `${path}?${params}`);
}
private async request<T>(method: "GET" | "POST" | "PUT", path: string, init?: RequestInit): Promise<T | null> {
const resp = await fetch(`${this.oasstApiUrl}${path}`, {
method,
...init,
headers: {
...init?.headers,
...this.userHeaders,
"X-API-Key": this.oasstApiKey,
"Content-Type": "application/json",
},
});
if (resp.status === 204) {
return null;
}
if (resp.status >= 300) {
const errorText = await resp.text();
let error;
try {
error = JSON.parse(errorText);
} catch (e) {
throw new OasstError(errorText, 0, resp.status);
}
throw new OasstError(error.message ?? error, error.error_code, resp.status);
}
return await resp.json();
}
fetch_my_messages(user: BackendUserCore) {
const params = new URLSearchParams({
username: user.id,
auth_method: user.auth_method,
});
return this.get<Message[]>(`/api/v1/messages?${params}`);
}
fetch_recent_messages() {
return this.get<Message[]>(`/api/v1/messages`);
}
fetch_message_children(messageId: string) {
return this.get<Message[]>(`/api/v1/messages/${messageId}/children`);
}
fetch_conversation(messageId: string) {
return this.get(`/api/v1/messages/${messageId}/conversation`);
}
}
const oasstApiClient = new OasstApiClient(process.env.FASTAPI_URL, process.env.FASTAPI_KEY);
export { oasstApiClient };
website/src/lib/oasst_client_factory.ts
+11
View File
@@ -0,0 +1,11 @@
import { JWT } from "next-auth/jwt";
import { OasstApiClient } from "src/lib/oasst_api_client";
import { getBackendUserCore } from "src/lib/users";
import { BackendUserCore } from "src/types/Users";
export const createApiClientFromUser = (user: BackendUserCore) =>
new OasstApiClient(process.env.FASTAPI_URL, process.env.FASTAPI_KEY, user);
export const createApiClient = async (token: JWT) => createApiClientFromUser(await getBackendUserCore(token.sub));
export const userlessApiClient = new OasstApiClient(process.env.FASTAPI_URL, process.env.FASTAPI_KEY);
website/src/pages/admin/manage_user/[id].tsx
+2 -2
View File
@@ -10,7 +10,7 @@ import { getAdminLayout } from "src/components/Layout";
import { Role, RoleSelect } from "src/components/RoleSelect";
import { UserMessagesCell } from "src/components/UserMessagesCell";
import { post } from "src/lib/api";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { userlessApiClient } from "src/lib/oasst_client_factory";
import prisma from "src/lib/prismadb";
import useSWRMutation from "swr/mutation";
@@ -113,7 +113,7 @@ const ManageUser = ({ user }: InferGetServerSidePropsType<typeof getServerSidePr
* Fetch the user's data on the server side when rendering.
*/
export async function getServerSideProps({ query, locale }) {
const backend_user = await oasstApiClient.fetch_user(query.id);
const backend_user = await userlessApiClient.fetch_user(query.id);
const local_user = await prisma.user.findUnique({
where: { id: backend_user.id },
select: {
website/src/pages/api/admin/status.ts
+3 -3
View File
@@ -1,17 +1,17 @@
import { getToken } from "next-auth/jwt";
import { withRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { getBackendUserCore } from "src/lib/users";
import { createApiClientFromUser } from "src/lib/oasst_client_factory";
/**
* Returns tasks availability, stats, and tree manager stats.
*/
const handler = withRole("admin", async (req, res) => {
// NOTE: why are we using a dummy user here?
const dummyUser = {
id: "__dummy_user__",
display_name: "Dummy User",
auth_method: "local",
};
const oasstApiClient = createApiClientFromUser(dummyUser);
const [tasksAvailabilityOutcome, statsOutcome, treeManagerOutcome] = await Promise.allSettled([
oasstApiClient.fetch_tasks_availability(dummyUser),
oasstApiClient.fetch_stats(),
website/src/pages/api/admin/update_user.ts
+5 -8
View File
@@ -1,22 +1,19 @@
import { withRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClient } from "src/lib/oasst_client_factory";
import prisma from "src/lib/prismadb";
/**
* Update's the user's data in the database. Accessible only to admins.
*/
const handler = withRole("admin", async (req, res) => {
const handler = withRole("admin", async (req, res, token) => {
const { id, auth_method, user_id, notes, role } = req.body;
const oasstApiClient = await createApiClient(token);
// If the user is authorized by the web, update their role.
if (auth_method === "local") {
await prisma.user.update({
where: {
id,
},
data: {
role,
},
where: { id },
data: { role },
});
}
// Tell the backend the user's enabled or not enabled status.
website/src/pages/api/admin/user_messages.ts
+3 -2
View File
@@ -1,12 +1,13 @@
import { withRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClient } from "src/lib/oasst_client_factory";
import type { Message } from "src/types/Conversation";
/**
* Returns the messages recorded by the backend for a user.
*/
const handler = withRole("admin", async (req, res) => {
const handler = withRole("admin", async (req, res, token) => {
const { user } = req.query;
const oasstApiClient = await createApiClient(token);
const messages: Message[] = await oasstApiClient.fetch_user_messages(user as string);
res.status(200).json(messages);
});
website/src/pages/api/admin/users.ts
+4 -2
View File
@@ -1,6 +1,7 @@
import { withRole } from "src/lib/auth";
import { FetchUsersParams, oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClient } from "src/lib/oasst_client_factory";
import prisma from "src/lib/prismadb";
import { FetchUsersParams } from "src/types/Users";
/**
* The number of users to fetch in a single request. Could later be a query parameter.
@@ -16,9 +17,10 @@ const PAGE_SIZE = 20;
* - `direction`: Either "forward" or "backward" representing the pagination
* direction.
*/
const handler = withRole("admin", async (req, res) => {
const handler = withRole("admin", async (req, res, token) => {
const { cursor, direction, searchDisplayName = "", sortKey = "username" } = req.query;
const oasstApiClient = await createApiClient(token);
// First, get all the users according to the backend.
const { items: all_users, ...rest } = await oasstApiClient.fetch_users({
searchDisplayName: searchDisplayName as FetchUsersParams["searchDisplayName"],
website/src/pages/api/auth/[...nextauth].ts
+15
View File
@@ -150,6 +150,21 @@ const authOptions: AuthOptions = {
}
},
},
/*
* We maybe need this, we maybe don't. Checking in this uncommented until
* it's confirmed we can drop this.
cookies: {
sessionToken: {
name: `next-auth.session-token`,
options: {
httpOnly: true,
sameSite: "none",
path: "/",
secure: true,
},
},
},
*/
session: {
strategy: "jwt",
},
website/src/pages/api/available_tasks.ts
+2 -1
View File
@@ -1,9 +1,10 @@
import { withoutRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClientFromUser } from "src/lib/oasst_client_factory";
import { getBackendUserCore, getUserLanguage } from "src/lib/users";
const handler = withoutRole("banned", async (req, res, token) => {
const user = await getBackendUserCore(token.sub);
const oasstApiClient = createApiClientFromUser(user);
const userLanguage = getUserLanguage(req);
const availableTasks = await oasstApiClient.fetch_available_tasks(user, userLanguage);
res.status(200).json(availableTasks);
website/src/pages/api/leaderboard.ts
+3 -2
View File
@@ -1,11 +1,12 @@
import { withoutRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClient } from "src/lib/oasst_client_factory";
import { LeaderboardTimeFrame } from "src/types/Leaderboard";
/**
* Returns the set of valid labels that can be applied to messages.
*/
const handler = withoutRole("banned", async (req, res) => {
const handler = withoutRole("banned", async (req, res, token) => {
const oasstApiClient = await createApiClient(token);
const time_frame = (req.query.time_frame as LeaderboardTimeFrame) ?? LeaderboardTimeFrame.day;
const info = await oasstApiClient.fetch_leaderboard(time_frame, { limit: req.query.limit as unknown as number });
res.status(200).json(info);
website/src/pages/api/messages/[id]/children.ts
+4 -12
View File
@@ -1,18 +1,10 @@
import { withoutRole } from "src/lib/auth";
import { createApiClient } from "src/lib/oasst_client_factory";
const handler = withoutRole("banned", async (req, res) => {
const handler = withoutRole("banned", async (req, res, token) => {
const { id } = req.query;
const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}/children`, {
method: "GET",
headers: {
"X-API-Key": process.env.FASTAPI_KEY,
"Content-Type": "application/json",
},
});
const messages = await messagesRes.json();
// Send recieved messages to the client.
const client = await createApiClient(token);
const messages = await client.fetch_message_children(id as string);
res.status(200).json(messages);
});
website/src/pages/api/messages/[id]/conversation.ts
+4 -12
View File
@@ -1,18 +1,10 @@
import { withoutRole } from "src/lib/auth";
import { createApiClient } from "src/lib/oasst_client_factory";
const handler = withoutRole("banned", async (req, res) => {
const handler = withoutRole("banned", async (req, res, token) => {
const { id } = req.query;
const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}/conversation`, {
method: "GET",
headers: {
"X-API-Key": process.env.FASTAPI_KEY,
"Content-Type": "application/json",
},
});
const messages = await messagesRes.json();
// Send recieved messages to the client.
const client = await createApiClient(token);
const messages = await client.fetch_conversation(id as string);
res.status(200).json(messages);
});
website/src/pages/api/messages/[id]/emoji.ts
+31
View File
@@ -0,0 +1,31 @@
import { withoutRole } from "src/lib/auth";
import { createApiClientFromUser } from "src/lib/oasst_client_factory";
import { getBackendUserCore } from "src/lib/users";
const handler = withoutRole("banned", async (req, res, token) => {
const { id } = req.query;
if (!id) {
res.status(400).end();
return;
}
const messageId = id as string;
const { emoji, op } = req.body;
const user = await getBackendUserCore(token.sub);
const oasstApiClient = createApiClientFromUser(user);
try {
await oasstApiClient.set_user_message_emoji(messageId, user, emoji, op);
} catch (err) {
console.error(JSON.stringify(err));
return res.status(500).json(err);
}
// Get updated emoji
const message = await oasstApiClient.fetch_message(messageId, user);
res.status(200).json({ emojis: message.emojis, user_emojis: message.user_emojis });
});
export default handler;
website/src/pages/api/messages/[id]/index.ts
+6 -12
View File
@@ -1,18 +1,12 @@
import { withoutRole } from "src/lib/auth";
import { createApiClientFromUser } from "src/lib/oasst_client_factory";
import { getBackendUserCore } from "src/lib/users";
const handler = withoutRole("banned", async (req, res) => {
const handler = withoutRole("banned", async (req, res, token) => {
const { id } = req.query;
const messageRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}`, {
method: "GET",
headers: {
"X-API-Key": process.env.FASTAPI_KEY,
"Content-Type": "application/json",
},
});
const message = await messageRes.json();
// Send recieved messages to the client.
const user = await getBackendUserCore(token.sub);
const client = createApiClientFromUser(user);
const message = await client.fetch_message(id as string, user);
res.status(200).json(message);
});
website/src/pages/api/messages/[id]/parent.ts
+7 -21
View File
@@ -1,6 +1,8 @@
import { withoutRole } from "src/lib/auth";
import { createApiClient, createApiClientFromUser } from "src/lib/oasst_client_factory";
import { getBackendUserCore } from "src/lib/users";
const handler = withoutRole("banned", async (req, res) => {
const handler = withoutRole("banned", async (req, res, token) => {
const { id } = req.query;
if (!id) {
@@ -8,32 +10,16 @@ const handler = withoutRole("banned", async (req, res) => {
return;
}
const messageRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}`, {
method: "GET",
headers: {
"X-API-Key": process.env.FASTAPI_KEY,
"Content-Type": "application/json",
},
});
const message = await messageRes.json();
const user = await getBackendUserCore(token.sub);
const client = createApiClientFromUser(user);
const message = await client.fetch_message(id as string, user);
if (!message.parent_id) {
res.status(404).end();
return;
}
const parentRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${message.parent_id}`, {
method: "GET",
headers: {
"X-API-Key": process.env.FASTAPI_KEY,
"Content-Type": "application/json",
},
});
const parent = await parentRes.json();
// Send recieved messages to the client.
const parent = await client.fetch_message(message.parent_id, user);
res.status(200).json(parent);
});
website/src/pages/api/messages/index.ts
+4 -10
View File
@@ -1,15 +1,9 @@
import { withoutRole } from "src/lib/auth";
import { createApiClient } from "src/lib/oasst_client_factory";
const handler = withoutRole("banned", async (req, res) => {
const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages`, {
method: "GET",
headers: {
"X-API-Key": process.env.FASTAPI_KEY,
},
});
const messages = await messagesRes.json();
// Send recieved messages to the client.
const handler = withoutRole("banned", async (req, res, token) => {
const client = await createApiClient(token);
const messages = await client.fetch_recent_messages();
res.status(200).json(messages);
});
website/src/pages/api/messages/user.ts
+3 -15
View File
@@ -1,23 +1,11 @@
import { withoutRole } from "src/lib/auth";
import { createApiClientFromUser } from "src/lib/oasst_client_factory";
import { getBackendUserCore } from "src/lib/users";
const handler = withoutRole("banned", async (req, res, token) => {
//TODO: add params if needed
const user = await getBackendUserCore(token.sub);
const params = new URLSearchParams({
username: user.id,
auth_method: user.auth_method,
});
const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages?${params}`, {
method: "GET",
headers: {
"X-API-Key": process.env.FASTAPI_KEY,
},
});
const messages = await messagesRes.json();
// Send recieved messages to the client.
const client = createApiClientFromUser(user);
const messages = await client.fetch_my_messages(user);
res.status(200).json(messages);
});
website/src/pages/api/new_task/[task_type].ts
+10 -3
View File
@@ -1,5 +1,7 @@
import { withoutRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { ERROR_CODES } from "src/lib/constants";
import { OasstError } from "src/lib/oasst_api_client";
import { createApiClientFromUser } from "src/lib/oasst_client_factory";
import prisma from "src/lib/prismadb";
import { getBackendUserCore, getUserLanguage } from "src/lib/users";
@@ -17,12 +19,17 @@ const handler = withoutRole("banned", async (req, res, token) => {
const userLanguage = getUserLanguage(req);
const user = await getBackendUserCore(token.sub);
const oasstApiClient = createApiClientFromUser(user);
let task;
try {
task = await oasstApiClient.fetchTask(task_type as string, user, userLanguage);
} catch (err) {
console.error(err);
res.status(500).json(err);
if (err instanceof OasstError && err.errorCode === ERROR_CODES.TASK_REQUESTED_TYPE_NOT_AVAILABLE) {
res.status(503).json({});
} else {
console.error(err);
res.status(500).json(err);
}
return;
}
website/src/pages/api/reject_task.ts
+8 -6
View File
@@ -1,19 +1,21 @@
import { Prisma } from "@prisma/client";
import { withoutRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClient } from "src/lib/oasst_client_factory";
import prisma from "src/lib/prismadb";
const handler = withoutRole("banned", async (req, res) => {
const handler = withoutRole("banned", async (req, res, token) => {
// Parse out the local task ID and the interaction contents.
const { id: frontendId, reason } = req.body;
const registeredTask = await prisma.registeredTask.findUniqueOrThrow({ where: { id: frontendId } });
const [oasstApiClient, registeredTask] = await Promise.all([
createApiClient(token),
prisma.registeredTask.findUniqueOrThrow({ where: { id: frontendId } }),
]);
const task = registeredTask.task as Prisma.JsonObject;
const id = task.id as string;
const taskId = (registeredTask.task as Prisma.JsonObject).id as string;
// Update the backend with the rejection
await oasstApiClient.nackTask(id, reason);
await oasstApiClient.nackTask(taskId, reason);
// Send the results to the client.
res.status(200).json({});
website/src/pages/api/report.ts
+25
View File
@@ -0,0 +1,25 @@
import { withoutRole } from "src/lib/auth";
import { createApiClientFromUser } from "src/lib/oasst_client_factory";
import { getBackendUserCore } from "src/lib/users";
/**
* Adds a report for a message
*
*/
const handler = withoutRole("banned", async (req, res, token) => {
// Parse out the local message_id, and the interaction contents.
const { message_id, text } = req.body;
const user = await getBackendUserCore(token.sub);
const oasstApiClient = createApiClientFromUser(user);
try {
await oasstApiClient.send_report(message_id, user, text);
} catch (err) {
console.error(JSON.stringify(err));
return res.status(500).json(err);
}
res.status(200).end();
});
export default handler;
website/src/pages/api/set_label.ts
+5 -2
View File
@@ -5,8 +5,10 @@ import { withoutRole } from "src/lib/auth";
*
*/
const handler = withoutRole("banned", async (req, res, token) => {
// TODO: move to oasst_api_client
// Parse out the local message_id, and the interaction contents.
const { message_id, label_map, text } = req.body;
const { message_id, label_map } = req.body;
const interactionRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/text_labels`, {
method: "POST",
headers: {
@@ -17,7 +19,8 @@ const handler = withoutRole("banned", async (req, res, token) => {
type: "text_labels",
message_id: message_id,
labels: label_map,
text: text,
text: "", // used only in reporting
is_report: false,
user: {
id: token.sub,
display_name: token.name || token.email,
website/src/pages/api/update_task.ts
+12 -7
View File
@@ -1,6 +1,6 @@
import { Prisma } from "@prisma/client";
import { withoutRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClient } from "src/lib/oasst_client_factory";
import prisma from "src/lib/prismadb";
import { getBackendUserCore, getUserLanguage } from "src/lib/users";
@@ -18,13 +18,18 @@ const handler = withoutRole("banned", async (req, res, token) => {
// Parse out the local task ID and the interaction contents.
const { id: frontendId, content, update_type } = req.body;
// Record that the user has done meaningful work and is no longer new.
await prisma.user.update({ where: { id: token.sub }, data: { isNew: false } });
// do in parallel since they are independent
const [_, registeredTask, oasstApiClient] = await Promise.all([
// Record that the user has done meaningful work and is no longer new.
prisma.user.update({ where: { id: token.sub }, data: { isNew: false } }),
// Accept the task so that we can complete it, this will probably go away soon.
prisma.registeredTask.findUniqueOrThrow({ where: { id: frontendId } }),
// Create client for upcoming requests
createApiClient(token),
]);
const taskId = (registeredTask.task as Prisma.JsonObject).id as string;
// Accept the task so that we can complete it, this will probably go away soon.
const registeredTask = await prisma.registeredTask.findUniqueOrThrow({ where: { id: frontendId } });
const task = registeredTask.task as Prisma.JsonObject;
const taskId = task.id as string;
await oasstApiClient.ackTask(taskId, registeredTask.id);
// Log the interaction locally to create our user_post_id needed by the Task
website/src/pages/api/valid_labels.ts
+5 -3
View File
@@ -1,11 +1,13 @@
import { withoutRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClient } from "src/lib/oasst_client_factory";
/**
* 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();
const handler = withoutRole("banned", async (req, res, token) => {
const { message_id } = req.query;
const client = await createApiClient(token);
const valid_labels = await client.fetch_valid_text(message_id as string);
res.status(200).json(valid_labels);
});
website/src/pages/create/assistant_reply.tsx
+3 -26
View File
@@ -1,32 +1,9 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useCreateAssistantReply } from "src/hooks/tasks/useCreateReply";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const AssistantReply = () => {
const { tasks, isLoading, reset, trigger } = useCreateAssistantReply();
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Reply as Assistant</title>
<meta name="description" content="Reply as Assistant." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
const AssistantReply = () => <TaskPage type={TaskType.assistant_reply} />;
AssistantReply.getLayout = getDashboardLayout;
website/src/pages/create/initial_prompt.tsx
+3 -26
View File
@@ -1,32 +1,9 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useCreateInitialPrompt } from "src/hooks/tasks/useCreateReply";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const InitialPrompt = () => {
const { tasks, isLoading, reset, trigger } = useCreateInitialPrompt();
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Initial Prompt</title>
<meta name="description" content="Add an initial Prompt." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
const InitialPrompt = () => <TaskPage type={TaskType.initial_prompt} />;
InitialPrompt.getLayout = getDashboardLayout;
website/src/pages/create/user_reply.tsx
+5 -28
View File
@@ -1,33 +1,10 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useCreatePrompterReply } from "src/hooks/tasks/useCreateReply";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const UserReply = () => {
const { tasks, isLoading, reset, trigger } = useCreatePrompterReply();
const PrompterReply = () => <TaskPage type={TaskType.prompter_reply} />;
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
PrompterReply.getLayout = getDashboardLayout;
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Reply as User</title>
<meta name="description" content="Reply as User." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
UserReply.getLayout = getDashboardLayout;
export default UserReply;
export default PrompterReply;
website/src/pages/dashboard.tsx
+3
View File
@@ -11,6 +11,9 @@ export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_
import useSWR from "swr";
const Dashboard = () => {
// Adding a demonstrative call to the backend that includes the web's JWT.
useSWR(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/auth/check`, get);
const {
t,
i18n: { language },
website/src/pages/evaluate/rank_assistant_replies.tsx
+3 -26
View File
@@ -1,32 +1,9 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useRankAssistantRepliesTask } from "src/hooks/tasks/useRankReplies";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const RankAssistantReplies = () => {
const { tasks, isLoading, reset, trigger } = useRankAssistantRepliesTask();
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Rank Assistant Replies</title>
<meta name="description" content="Rank Assistant Replies." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
const RankAssistantReplies = () => <TaskPage type={TaskType.rank_assistant_replies} />;
RankAssistantReplies.getLayout = getDashboardLayout;
website/src/pages/evaluate/rank_initial_prompts.tsx
+3 -26
View File
@@ -1,32 +1,9 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useRankInitialPromptsTask } from "src/hooks/tasks/useRankReplies";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const RankInitialPrompts = () => {
const { tasks, isLoading, reset, trigger } = useRankInitialPromptsTask();
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Rank Initial Prompts</title>
<meta name="description" content="Rank initial prompts." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
const RankInitialPrompts = () => <TaskPage type={TaskType.rank_initial_prompts} />;
RankInitialPrompts.getLayout = getDashboardLayout;
website/src/pages/evaluate/rank_user_replies.tsx
+5 -28
View File
@@ -1,33 +1,10 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useRankPrompterRepliesTask } from "src/hooks/tasks/useRankReplies";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const RankUserReplies = () => {
const { tasks, isLoading, reset, trigger } = useRankPrompterRepliesTask();
const RankPrompterReplies = () => <TaskPage type={TaskType.rank_prompter_replies} />;
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
RankPrompterReplies.getLayout = getDashboardLayout;
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Rank User Replies</title>
<meta name="description" content="Rank User Replies." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
RankUserReplies.getLayout = getDashboardLayout;
export default RankUserReplies;
export default RankPrompterReplies;
website/src/pages/label/label_assistant_reply.tsx
+3 -26
View File
@@ -1,32 +1,9 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useLabelAssistantReplyTask } from "src/hooks/tasks/useLabelingTask";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const LabelAssistantReply = () => {
const { tasks, isLoading, trigger, reset } = useLabelAssistantReplyTask();
if (isLoading) {
return <LoadingScreen />;
}
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Label Assistant Reply</title>
<meta name="description" content="Label Assistant Reply" />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
const LabelAssistantReply = () => <TaskPage type={TaskType.label_assistant_reply} />;
LabelAssistantReply.getLayout = getDashboardLayout;
website/src/pages/label/label_initial_prompt.tsx
+3 -26
View File
@@ -1,32 +1,9 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useLabelInitialPromptTask } from "src/hooks/tasks/useLabelingTask";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const LabelInitialPrompt = () => {
const { tasks, isLoading, trigger, reset } = useLabelInitialPromptTask();
if (isLoading) {
return <LoadingScreen />;
}
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Label Initial Prompt</title>
<meta name="description" content="Label Initial Prompt" />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
const LabelInitialPrompt = () => <TaskPage type={TaskType.label_initial_prompt} />;
LabelInitialPrompt.getLayout = getDashboardLayout;
website/src/pages/label/label_prompter_reply.tsx
+3 -26
View File
@@ -1,32 +1,9 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useLabelPrompterReplyTask } from "src/hooks/tasks/useLabelingTask";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const LabelPrompterReply = () => {
const { tasks, isLoading, trigger, reset } = useLabelPrompterReplyTask();
if (isLoading) {
return <LoadingScreen />;
}
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Label Prompter Reply</title>
<meta name="description" content="Label Prompter Reply" />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
const LabelPrompterReply = () => <TaskPage type={TaskType.label_prompter_reply} />;
LabelPrompterReply.getLayout = getDashboardLayout;
website/src/pages/messages/[id]/index.tsx
+6 -4
View File
@@ -1,5 +1,6 @@
import { Box, Text, useColorModeValue } from "@chakra-ui/react";
import Head from "next/head";
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { getDashboardLayout } from "src/components/Layout";
import { MessageLoading } from "src/components/Loading/MessageLoading";
@@ -10,6 +11,7 @@ import { Message } from "src/types/Conversation";
import useSWRImmutable from "swr/immutable";
const MessageDetail = ({ id }: { id: string }) => {
const { t } = useTranslation(["message", "common"]);
const backgroundColor = useColorModeValue("white", "gray.800");
const { isLoading: isLoadingParent, data: parent } = useSWRImmutable<Message>(`/api/messages/${id}/parent`, get);
@@ -20,7 +22,7 @@ const MessageDetail = ({ id }: { id: string }) => {
return (
<>
<Head>
<title>Open Assistant</title>
<title>{t("common:title")}</title>
<meta
name="description"
content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
@@ -32,10 +34,10 @@ const MessageDetail = ({ id }: { id: string }) => {
<>
<Box pb="4">
<Text fontWeight="bold" fontSize="xl" pb="2">
Parent
{t("parent")}
</Text>
<Box bg={backgroundColor} padding="4" borderRadius="xl" boxShadow="base" width="fit-content">
<MessageTableEntry enabled item={parent} />
<MessageTableEntry enabled message={parent} />
</Box>
</Box>
</>
@@ -54,7 +56,7 @@ MessageDetail.getLayout = (page) => getDashboardLayout(page);
export const getServerSideProps = async ({ locale, query }) => ({
props: {
id: query.id,
...(await serverSideTranslations(locale, ["common"])),
...(await serverSideTranslations(locale, ["common", "message"])),
},
});
website/src/pages/tasks/random.tsx
+4 -28
View File
@@ -1,34 +1,10 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useGenericTaskAPI } from "src/hooks/tasks/useGenericTaskAPI";
import { TaskPage } from "src/components/TaskPage/TaskPage";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
import { TaskType } from "src/types/Task";
const RandomTask = () => {
const { tasks, isLoading, trigger, reset } = useGenericTaskAPI(TaskType.random);
const Random = () => <TaskPage type={TaskType.random} />;
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
Random.getLayout = getDashboardLayout;
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Random Task</title>
<meta name="description" content="Random Task." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
RandomTask.getLayout = (page) => getDashboardLayout(page);
export default RandomTask;
export default Random;
website/src/types/Conversation.ts
+17 -2
View File
@@ -1,7 +1,22 @@
export interface Message {
export type EmojiOp = "add" | "remove" | "toggle";
export interface MessageEmoji {
name: string;
count: number;
}
export interface MessageEmojis {
emojis: { [emoji: string]: number };
user_emojis: string[];
}
export interface Message extends MessageEmojis {
id: string;
text: string;
is_assistant: boolean;
id: string;
lang: string;
created_date: string; // iso date string
parent_id: string;
frontend_message_id?: string;
}
website/src/types/Hooks.ts
+16
View File
@@ -0,0 +1,16 @@
import { BaseTask, TaskContent, TaskResponse, TaskType } from "src/types/Task";
interface TaskInteraction {
id: string;
update_type: string;
content: TaskContent;
}
export type TaskApiHook<Task extends BaseTask> = {
response: TaskResponse<Task>;
isLoading: boolean;
completeTask: (interaction: TaskInteraction) => void;
skipTask: () => void;
};
export type TaskApiHooks = Record<TaskType, (args: TaskType) => TaskApiHook<BaseTask>>;
website/src/types/Task.ts
+16 -2
View File
@@ -1,4 +1,4 @@
export const enum TaskType {
export enum TaskType {
initial_prompt = "initial_prompt",
assistant_reply = "assistant_reply",
prompter_reply = "prompter_reply",
@@ -29,12 +29,26 @@ export interface BaseTask {
type: TaskType;
}
export interface TaskResponse<Task extends BaseTask> {
export interface TaskAvailableResponse<Task extends BaseTask> {
id: string;
userId: string;
task: Task;
}
interface TaskAvailable<Task extends BaseTask> extends TaskAvailableResponse<Task> {
taskAvailability: "AVAILABLE";
}
interface AwaitingInitialTask {
taskAvailability: "AWAITING_INITIAL";
}
interface NoTaskAvailable {
taskAvailability: "NONE_AVAILABLE";
}
export type TaskResponse<Task extends BaseTask> = TaskAvailable<Task> | AwaitingInitialTask | NoTaskAvailable;
export type TaskReplyValidity = "DEFAULT" | "VALID" | "INVALID";
export type AvailableTasks = { [taskType in TaskType]: number };
website/src/types/Tasks.ts
+30 -14
View File
@@ -1,4 +1,4 @@
import { Conversation } from "./Conversation";
import { Conversation, Message } from "./Conversation";
import { BaseTask, TaskType } from "./Task";
export interface CreateInitialPromptTask extends BaseTask {
@@ -16,6 +16,8 @@ export interface CreatePrompterReplyTask extends BaseTask {
conversation: Conversation;
}
export type CreateTaskType = CreateInitialPromptTask | CreateAssistantReplyTask | CreatePrompterReplyTask;
export interface RankInitialPromptsTask extends BaseTask {
type: TaskType.rank_initial_prompts;
prompts: string[];
@@ -33,29 +35,43 @@ export interface RankPrompterRepliesTask extends BaseTask {
replies: string[];
}
export interface LabelAssistantReplyTask extends BaseTask {
export type RankTaskType = RankInitialPromptsTask | RankAssistantRepliesTask | RankPrompterRepliesTask;
export interface Label {
display_text: string;
help_text: string;
name: string;
widget: "flag" | "yes_no" | "likert";
}
export interface BaseLabelTask extends BaseTask {
message_id: string;
labels: Label[];
valid_labels: string[];
disposition: "spam" | "quality";
mode: "simple" | "full";
mandatory_labels?: string[];
}
export interface LabelAssistantReplyTask extends BaseLabelTask {
type: TaskType.label_assistant_reply;
message_id: string;
conversation: Conversation;
reply_message: Message;
reply: string;
valid_labels: string[];
mode: "simple" | "full";
mandatory_labels?: string[];
}
export interface LabelPrompterReplyTask extends BaseTask {
export interface LabelPrompterReplyTask extends BaseLabelTask {
type: TaskType.label_prompter_reply;
message_id: string;
conversation: Conversation;
reply_message: Message;
reply: string;
valid_labels: string[];
mode: "simple" | "full";
mandatory_labels?: string[];
}
export interface LabelInitialPromptTask extends BaseTask {
export interface LabelInitialPromptTask extends BaseLabelTask {
type: TaskType.label_initial_prompt;
message_id: string;
valid_labels: string[];
prompt: string;
}
export type LabelTaskType = LabelInitialPromptTask | LabelAssistantReplyTask | LabelPrompterReplyTask;
export type KnownTaskType = CreateTaskType | RankTaskType | LabelTaskType;
website/src/types/Users.ts
+16
View File
@@ -51,3 +51,19 @@ export interface User extends BackendUser {
*/
role: string;
}
export type FetchUsersParams = {
limit: number;
cursor?: string;
direction: "forward" | "back";
searchDisplayName?: string;
sortKey?: "username" | "display_name";
};
export type FetchUsersResponse<T extends User | BackendUser = BackendUser> = {
items: T[];
next?: string;
prev?: string;
sort_key: "username" | "display_name";
order: "asc" | "desc";
};