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

Merge branch 'main' into 911_control_email_signin

Browse Source
This commit is contained in:
notmd
2023-02-03 13:31:18 +07:00
parent 6019b93971 d5c0adba5f
commit 2d2ea2039c
61 changed files with 2092 additions and 801 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/Explain.tsx
+2 -7
View File
@@ -8,7 +8,7 @@ import {
PopoverTrigger,
Text,
} from "@chakra-ui/react";
import { InformationCircleIcon } from "@heroicons/react/20/solid";
import { Info } from "lucide-react";
interface ExplainProps {
explanation: string[];
@@ -18,12 +18,7 @@ export const Explain = ({ explanation }: ExplainProps) => {
return (
<Popover>
<PopoverTrigger>
<IconButton
aria-label="explanation"
variant="link"
size="xs"
icon={<InformationCircleIcon className="h-4 w-4" />}
></IconButton>
<IconButton aria-label="explanation" variant="link" size="xs" icon={<Info size="16" />}></IconButton>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
website/src/components/Messages/LabelFlagGroup.tsx
+14 -13
View File
@@ -1,4 +1,4 @@
import { Button, Flex } from "@chakra-ui/react";
import { Button, Flex, Tooltip } from "@chakra-ui/react";
import { useTranslation } from "next-i18next";
import { getTypeSafei18nKey } from "src/lib/i18n";
@@ -14,18 +14,19 @@ export const LabelFlagGroup = ({ values, labelNames, isEditable = true, onChange
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>
<Tooltip key={name} label={`${t(getTypeSafei18nKey(`${name}.explanation`))}`}>
<Button
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>
</Tooltip>
))}
</Flex>
);
website/src/components/Messages/LabelInputGroup.tsx
+18 -5
View File
@@ -1,10 +1,12 @@
import { Text, VStack } from "@chakra-ui/react";
import { useTranslation } from "next-i18next";
import { Explain } from "src/components/Explain";
import { LabelFlagGroup } from "src/components/Messages/LabelFlagGroup";
import { LabelLikertGroup } from "src/components/Survey/LabelLikertGroup";
import { LabelYesNoGroup } from "src/components/Messages/LabelYesNoGroup";
import { getTypeSafei18nKey } from "src/lib/i18n";
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;
@@ -28,6 +30,7 @@ export const LabelInputGroup = ({
instructions,
onChange,
}: LabelInputGroupProps) => {
const { t } = useTranslation("labelling");
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);
@@ -52,7 +55,17 @@ export const LabelInputGroup = ({
)}
{flagIndexes.length > 0 && (
<VStack alignItems="stretch" spacing={2}>
<Text>{instructions.flagInstruction}</Text>
<Text>
{instructions.flagInstruction}
<Explain
explanation={flagIndexes.map(
(idx) =>
`${t(getTypeSafei18nKey(labels[idx].name))}: ${t(
getTypeSafei18nKey(`${labels[idx].name}.explanation`)
)}`
)}
/>{" "}
</Text>
<LabelFlagGroup
values={flagIndexes.map((idx) => values[idx])}
labelNames={flagIndexes.map((idx) => labels[idx].name)}
website/src/components/Messages/MessageTableEntry.tsx
+12 -10
View File
@@ -23,8 +23,8 @@ 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 { colors } from "src/styles/Theme/colors";
import { Message, MessageEmojis } from "src/types/Conversation";
import { colors } from "styles/Theme/colors";
import useSWRMutation from "swr/mutation";
interface MessageTableEntryProps {
@@ -66,7 +66,7 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
),
[borderColor, inlineAvatar, message.is_assistant]
);
const highlightColor = useColorModeValue(colors.light.highlight, colors.dark.highlight);
const highlightColor = useColorModeValue(colors.light.active, colors.dark.active);
const { trigger: sendEmojiChange } = useSWRMutation(`/api/messages/${message.id}/emoji`, post, {
onSuccess: setEmojis,
@@ -97,14 +97,16 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
style={{ float: "right", position: "relative", right: "-0.3em", bottom: "-0em", marginLeft: "1em" }}
onClick={(e) => e.stopPropagation()}
>
{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))}
/>
))}
{Object.entries(emojiState.emojis)
.filter(([k]) => !k.startsWith("_"))
.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}
website/src/components/SideMenu.tsx
+5 -8
View File
@@ -1,8 +1,7 @@
import { Box, Button, Text, Tooltip, useColorMode } from "@chakra-ui/react";
import { Button, Card, Text, Tooltip, useColorMode } from "@chakra-ui/react";
import { LucideIcon, Sun } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/router";
import { colors } from "styles/Theme/colors";
export interface MenuButtonOption {
label: string;
@@ -21,12 +20,10 @@ export function SideMenu(props: SideMenuProps) {
return (
<main className="sticky top-0 sm:h-full">
<Box
<Card
display={{ base: "grid", sm: "flex" }}
width={["100%", "100%", "100px", "280px"]}
backgroundColor={colorMode === "light" ? colors.light.div : colors.dark.div}
boxShadow="base"
borderRadius="xl"
className="grid grid-cols-4 gap-2 sm:flex sm:flex-col sm:justify-between p-4 h-full"
className="grid-cols-4 gap-2 sm:flex-col sm:justify-between p-4 h-full"
>
<nav className="grid grid-cols-3 col-span-3 sm:flex sm:flex-col gap-2">
{props.buttonOptions.map((item, itemIndex) => (
@@ -69,7 +66,7 @@ export function SideMenu(props: SideMenuProps) {
</Button>
</Tooltip>
</div>
</Box>
</Card>
</main>
);
}
website/src/components/SideMenuLayout.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { Box, useColorMode } from "@chakra-ui/react";
import { MenuButtonOption, SideMenu } from "src/components/SideMenu";
import { colors } from "styles/Theme/colors";
import { colors } from "src/styles/Theme/colors";
interface SideMenuLayoutProps {
menuButtonOptions: MenuButtonOption[];
@@ -11,7 +11,7 @@ export const SideMenuLayout = (props: SideMenuLayoutProps) => {
const { colorMode } = useColorMode();
return (
<Box backgroundColor={colorMode === "light" ? colors.light.bg : colors.dark.bg} className="sm:overflow-hidden">
<Box backgroundColor={colorMode === "light" ? "gray.100" : colors.dark.bg} className="sm:overflow-hidden">
<Box display="flex" flexDirection={["column", "row"]} h="full" gap={["0", "0", "0", "6"]}>
<Box p={["3", "3", "3", "6"]} pr={["3", "3", "3", "0"]}>
<SideMenu buttonOptions={props.menuButtonOptions} />
website/src/components/Survey/LabelLikertGroup.tsx
+2 -2
View File
@@ -211,7 +211,7 @@ export const LabelLikertGroup = ({ labelIDs, onChange, isEditable = true }: Labe
}}
alignItems="center"
>
<Text as="div">
<Text as="div" display="flex" alignItems="center">
{textA}
{descriptionA.length > 0 ? <Explain explanation={descriptionA} /> : null}
</Text>
@@ -229,7 +229,7 @@ export const LabelLikertGroup = ({ labelIDs, onChange, isEditable = true }: Labe
/>
</GridItem>
<GridItem>
<Text textAlign="right" as="div">
<Text as="div" display="flex" alignItems="center" justifyContent="end">
{textB}
{descriptionB.length > 0 ? <Explain explanation={descriptionB} /> : null}
</Text>
website/src/components/Tasks/CreateTask.tsx
+2 -2
View File
@@ -49,9 +49,9 @@ export const CreateTask = ({
</>
<>
<Stack spacing="4">
{!!i18n.exists(`task.${taskType.id}.instruction`) && (
{!!i18n.exists(`tasks:${taskType.id}.instruction`) && (
<Text fontSize="xl" fontWeight="bold" color={titleColor}>
{t(getTypeSafei18nKey(`${taskType.id}.instruction`))}
{t(getTypeSafei18nKey(`tasks:${taskType.id}.instruction`))}
</Text>
)}
<TrackedTextarea
website/src/lib/captcha.ts
+1 -1
View File
@@ -24,7 +24,7 @@ export const checkCaptcha = async (
): Promise<CheckCaptchaResponse> => {
const data = new FormData();
data.append("secret", process.env.CLOUDFLARE_CAPTCHA_SERCERT_KEY);
data.append("secret", process.env.CLOUDFLARE_CAPTCHA_SECRET_KEY);
data.append("response", token);
data.append("remoteip", ipAdress);
website/src/pages/messages/[id]/index.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { Box, Text, useColorModeValue } from "@chakra-ui/react";
import { Box, Card, Text, useColorModeValue } from "@chakra-ui/react";
import Head from "next/head";
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
@@ -36,9 +36,9 @@ const MessageDetail = ({ id }: { id: string }) => {
<Text fontWeight="bold" fontSize="xl" pb="2">
{t("parent")}
</Text>
<Box bg={backgroundColor} padding="4" borderRadius="xl" boxShadow="base" width="fit-content">
<Card bg={backgroundColor} padding="4" width="fit-content">
<MessageTableEntry enabled message={parent} />
</Box>
</Card>
</Box>
</>
)}
website/src/styles/Theme/colors.ts
+2
View File
@@ -2,10 +2,12 @@ export const colors = {
light: {
bg: "rgb(250,250,250)",
text: "black",
active: "blue.400",
},
dark: {
bg: "gray.900",
text: "white",
active: "blue.500",
},
"dark-blue-btn": {
200: "rgb(29,78,216)",