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

Merge branch 'main' into 766_admin_enhancement

Browse Source
This commit is contained in:
notmd
2023-01-20 23:12:43 +07:00
parent 99d9ee1937 70fc80aa08
commit 7099ff4dd0
63 changed files with 874 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/Dashboard/TaskOption.tsx
+7 -7
View File
@@ -1,19 +1,19 @@
import { Box, Flex, GridItem, Heading, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
import Link from "next/link";
import { TaskTypes } from "../Tasks/TaskTypes";
import { TaskCategory, TaskCategoryLabels, TaskTypes } from "../Tasks/TaskTypes";
export const TaskOption = ({ displayTaskCategories }) => {
export const TaskOption = ({ displayTaskCategories }: { displayTaskCategories: TaskCategory[] }) => {
const backgroundColor = useColorModeValue("white", "gray.700");
return (
<Box className="flex flex-col gap-14">
{displayTaskCategories.map((category, categoryIndex) => (
<div key={categoryIndex}>
<Text className="text-2xl font-bold pb-4">{category}</Text>
{displayTaskCategories.map((category) => (
<div key={category}>
<Text className="text-2xl font-bold pb-4">{TaskCategoryLabels[category]}</Text>
<SimpleGrid columns={[1, 1, 2, 2, 3, 4]} gap={4}>
{TaskTypes.filter((task) => task.category === category).map((item, itemIndex) => (
<Link key={itemIndex} href={item.pathname}>
{TaskTypes.filter((task) => task.category === category).map((item) => (
<Link key={category + item.label} href={item.pathname}>
<GridItem
bg={backgroundColor}
borderRadius="xl"
website/src/components/FlaggableElement.tsx
+3 -5
View File
@@ -25,8 +25,8 @@ import clsx from "clsx";
import { useEffect, useReducer } from "react";
import { FiAlertCircle } from "react-icons/fi";
import { get, post } from "src/lib/api";
import { Message } from "src/types/Conversation";
import { colors } from "src/styles/Theme/colors";
import { Message } from "src/types/Conversation";
import useSWR from "swr";
import useSWRMutation from "swr/mutation";
@@ -114,9 +114,7 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
}, [data, isLoading]);
const { trigger } = useSWRMutation("/api/set_label", post, {
onSuccess: () => {
setIsEditing.off();
},
onSuccess: setIsEditing.off,
});
const submitResponse = () => {
@@ -149,7 +147,7 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
isLazy
lazyBehavior="keepMounted"
>
<Box display="flex" alignItems="center" gap="2">
<Box display="flex" alignItems="center" flexDirection={["column", "row"]} gap="2">
<PopoverAnchor>{props.children}</PopoverAnchor>
<Tooltip label="Report" bg="red.500" aria-label="A tooltip">
website/src/components/Footer.tsx
+12 -10
View File
@@ -1,9 +1,11 @@
import { Box, Divider, Flex, Text, useColorMode } from "@chakra-ui/react";
import Image from "next/image";
import Link from "next/link";
import { useTranslation } from "next-i18next";
import { useMemo } from "react";
export function Footer() {
const { t } = useTranslation();
const { colorMode } = useColorMode();
const backgroundColor = colorMode === "light" ? "white" : "gray.800";
const textColor = colorMode === "light" ? "black" : "gray.300";
@@ -33,10 +35,10 @@ export function Footer() {
<Box>
<Text fontSize="md" fontWeight="bold">
Open Assistant
{t("title")}
</Text>
<Text fontSize="sm" color="gray.500">
Conversational AI for everyone.
{t("conversational")}
</Text>
</Box>
</Flex>
@@ -45,23 +47,23 @@ export function Footer() {
<Box display="flex" flexDirection={["column", "row"]} gap={["6", "14"]} fontSize="sm">
<Flex direction="column" alignItems={["center", "start"]}>
<Text fontWeight="bold" color={textColor}>
Legal
{t("legal")}
</Text>
<FooterLink href="/privacy-policy" label="Privacy Policy" />
<FooterLink href="/terms-of-service" label="Terms of Service" />
<FooterLink href="/privacy-policy" label={t("privacy_policy")} />
<FooterLink href="/terms-of-service" label={t("terms_of_service")} />
</Flex>
<Flex direction="column" alignItems={["center", "start"]}>
<Text fontWeight="bold" color={textColor}>
Connect
{t("connect")}
</Text>
<FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
<FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
<FooterLink href="https://github.com/LAION-AI/Open-Assistant" label={t("github")} />
<FooterLink href="https://ykilcher.com/open-assistant-discord" label={t("discord")} />
</Flex>
<Flex direction="column" alignItems={["center", "start"]}>
<Text fontWeight="bold" color={textColor}>
About
{t("about")}
</Text>
<FooterLink href="https://projects.laion.ai/Open-Assistant" label="Docs" />
<FooterLink href="https://projects.laion.ai/Open-Assistant" label={t("docs")} />
</Flex>
</Box>
</nav>
website/src/components/Header/Header.tsx
+5 -3
View File
@@ -1,7 +1,8 @@
import { Box, Button, Text, Flex } from "@chakra-ui/react";
import { Box, Button, Flex, Text } from "@chakra-ui/react";
import Image from "next/image";
import Link from "next/link";
import { useSession } from "next-auth/react";
import { useTranslation } from "next-i18next";
import { Flags } from "react-feature-flags";
import { FaUser } from "react-icons/fa";
@@ -23,7 +24,8 @@ function AccountButton() {
);
}
export function Header(props) {
export function Header() {
const { t } = useTranslation();
const { data: session } = useSession();
const homeURL = session ? "/dashboard" : "/";
@@ -34,7 +36,7 @@ export function Header(props) {
<Flex alignItems="center">
<Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
<Text fontFamily="inter" fontSize="2xl" fontWeight="bold" ml="3">
Open Assistant
{t("title")}
</Text>
</Flex>
</Link>
website/src/components/Header/UserMenu.tsx
+11 -9
View File
@@ -13,6 +13,7 @@ import {
} from "@chakra-ui/react";
import NextLink from "next/link";
import { signOut, useSession } from "next-auth/react";
import { useTranslation } from "next-i18next";
import React, { ElementType, useCallback } from "react";
import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";
@@ -25,6 +26,7 @@ interface MenuOption {
}
export function UserMenu() {
const { t } = useTranslation();
const borderColor = useColorModeValue("gray.300", "gray.600");
const handleSignOut = useCallback(() => {
signOut({ callbackUrl: "/" });
@@ -36,23 +38,23 @@ export function UserMenu() {
}
const options: MenuOption[] = [
{
name: "Dashboard",
name: t("dashboard"),
href: "/dashboard",
desc: "Dashboard",
desc: t("dashboard"),
icon: FiLayout,
isExternal: false,
},
{
name: "Account Settings",
name: t("account_settings"),
href: "/account",
desc: "Account Settings",
desc: t("account_settings"),
icon: FiSettings,
isExternal: false,
},
{
name: "Report a Bug",
name: t("report_a_bug"),
href: "https://github.com/LAION-AI/Open-Assistant/issues/new/choose",
desc: "Report a Bug",
desc: t("report_a_bug"),
icon: FiAlertTriangle,
isExternal: true,
},
@@ -60,9 +62,9 @@ export function UserMenu() {
if (session.user.role === "admin") {
options.unshift({
name: "Admin Dashboard",
name: t("admin_dashboard"),
href: "/admin",
desc: "Admin Dashboard",
desc: t("admin_dashboard"),
icon: FiShield,
isExternal: false,
});
@@ -105,7 +107,7 @@ export function UserMenu() {
<MenuDivider />
<MenuItem gap="3" borderRadius="md" p="4" onClick={handleSignOut}>
<FiLogOut className="text-blue-500" aria-hidden="true" />
<Text>Sign Out</Text>
<Text>{t("sign_out")}</Text>
</MenuItem>
</MenuList>
</Menu>
website/src/components/Hero.tsx
+1 -1
View File
@@ -2,8 +2,8 @@ import { Box, Text, useColorMode } from "@chakra-ui/react";
import Image from "next/image";
import { useTranslation } from "next-i18next";
import { Container } from "./Container";
import { AnimatedCircles } from "./AnimatedCircles";
import { Container } from "./Container";
export function Hero() {
const { t } = useTranslation("index");
website/src/components/Layout.tsx
+3 -3
View File
@@ -23,7 +23,7 @@ export const getDefaultLayout = (page: React.ReactElement) => (
export const getTransparentHeaderLayout = (page: React.ReactElement) => (
<div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
<Header transparent={true} />
<Header />
{page}
<Footer />
</div>
@@ -31,7 +31,7 @@ export const getTransparentHeaderLayout = (page: React.ReactElement) => (
export const getDashboardLayout = (page: React.ReactElement) => (
<Grid templateRows="min-content 1fr" h="full">
<Header transparent={true} />
<Header />
<SideMenuLayout
menuButtonOptions={[
{
@@ -66,7 +66,7 @@ export const getDashboardLayout = (page: React.ReactElement) => (
export const getAdminLayout = (page: React.ReactElement) => (
<div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
<Header transparent={true} />
<Header />
<SideMenuLayout
menuButtonOptions={[
{
website/src/components/Messages/MessageTable.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ interface MessageTableProps {
export function MessageTable({ messages, enableLink }: MessageTableProps) {
return (
<Stack spacing="3">
<Stack spacing="4">
{messages.map((item) => (
<MessageTableEntry enabled={enableLink} item={item} key={item.id + item.frontend_message_id} />
))}
website/src/components/Messages/MessageTableEntry.tsx
+35 -32
View File
@@ -1,6 +1,8 @@
import { Avatar, Box, HStack, LinkBox, useColorModeValue } from "@chakra-ui/react";
import { Avatar, Box, HStack, LinkBox, useBreakpoint, useBreakpointValue, useColorModeValue } from "@chakra-ui/react";
import { boolean } from "boolean";
import Link from "next/link";
import { useRouter } from "next/router";
import { useCallback, useMemo } from "react";
import { FlaggableElement } from "src/components/FlaggableElement";
import { Message } from "src/types/Conversation";
@@ -10,47 +12,48 @@ interface MessageTableEntryProps {
}
export function MessageTableEntry(props: MessageTableEntryProps) {
const router = useRouter();
const { item } = props;
const goToMessage = useCallback(() => router.push(`/messages/${item.id}`), [router, item.id]);
const backgroundColor = useColorModeValue("gray.100", "gray.700");
const backgroundColor2 = useColorModeValue("#DFE8F1", "#42536B");
const avatarColor = useColorModeValue("white", "black");
const borderColor = useColorModeValue("blackAlpha.200", "whiteAlpha.200");
const inlineAvatar = useBreakpointValue({ base: true, sm: false });
const avatar = useMemo(
() => (
<Avatar
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"}`}
/>
),
[borderColor, inlineAvatar, item.is_assistant]
);
return (
<FlaggableElement message={item}>
<HStack w={["full", "full", "full", "fit-content"]} gap={2}>
<Box borderRadius="full" border="solid" borderWidth="1px" borderColor={borderColor} bg={avatarColor}>
<Avatar
size="sm"
name={`${boolean(item.is_assistant) ? "Assistant" : "User"}`}
src={`${boolean(item.is_assistant) ? "/images/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
/>
{!inlineAvatar && avatar}
<Box
width={["full", "full", "full", "fit-content"]}
maxWidth={["full", "full", "full", "2xl"]}
p="4"
borderRadius="md"
bg={item.is_assistant ? backgroundColor : backgroundColor2}
onClick={props.enabled && goToMessage}
_hover={props.enabled && { cursor: "pointer", opacity: 0.9 }}
>
{inlineAvatar && avatar}
{item.text}
</Box>
{props.enabled ? (
<Box width={["full", "full", "full", "fit-content"]} maxWidth={["full", "full", "full", "2xl"]}>
<Link href={`/messages/${item.id}`}>
<LinkBox
bg={item.is_assistant ? backgroundColor : backgroundColor2}
p="4"
borderRadius="md"
whiteSpace="pre-line"
>
{item.text}
</LinkBox>
</Link>
</Box>
) : (
<Box
width={["full", "full", "full", "fit-content"]}
maxWidth={["full", "full", "full", "2xl"]}
bg={item.is_assistant ? backgroundColor : backgroundColor2}
p="4"
borderRadius="md"
>
{item.text}
</Box>
)}
</HStack>
</FlaggableElement>
);
website/src/components/Survey/SurveyCard.tsx
+5 -8
View File
@@ -1,22 +1,19 @@
import { Box, BoxProps, useColorModeValue } from "@chakra-ui/react";
import clsx from "clsx";
import { PropsWithChildren } from "react";
interface SurveyCardProps {
className?: string;
children: React.ReactNode;
}
export const SurveyCard = (props: SurveyCardProps) => {
export const SurveyCard = (props: PropsWithChildren<{ className?: string }>) => {
const backgroundColor = useColorModeValue("white", "gray.700");
const BoxClasses: BoxProps = {
gap: "2",
borderRadius: "xl",
shadow: "base",
className: "p-4 sm:p-6",
className: clsx("p-4 sm:p-6", props.className),
};
return (
<Box bg={backgroundColor} {...BoxClasses}>
<Box as="section" bg={backgroundColor} {...BoxClasses}>
{props.children}
</Box>
);
website/src/components/Tasks/TaskTypes.tsx
+10 -3
View File
@@ -1,5 +1,5 @@
export enum TaskCategory {
Tasks = "Tasks",
Random = "Random",
Create = "Create",
Evaluate = "Evaluate",
Label = "Label",
@@ -20,12 +20,19 @@ export interface TaskInfo {
unchanged_message?: string;
}
export const TaskCategoryLabels: { [key in TaskCategory]: string } = {
[TaskCategory.Random]: "I'm feeling lucky",
[TaskCategory.Create]: "Create",
[TaskCategory.Evaluate]: "Evaluate",
[TaskCategory.Label]: "Label",
};
export const TaskTypes: TaskInfo[] = [
// general/random
{
label: "Start a Task",
desc: "Help us improve Open Assistant by starting a random task.",
category: TaskCategory.Tasks,
category: TaskCategory.Random,
pathname: "/tasks/random",
help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/prompting",
type: "random",
@@ -121,7 +128,7 @@ export const TaskTypes: TaskInfo[] = [
category: TaskCategory.Label,
pathname: "/label/label_prompter_reply",
help_link: "https://projects.laion.ai/Open-Assistant/docs/tasks/label_prompter_reply",
overview: "Given the following discussion, provide labels for the final prompt",
overview: "Given the following discussion, provide labels for the final prompt.",
type: "label_prompter_reply",
mode: "full",
update_type: "text_labels",