Merging with main changes

2026-07-02 17:00:28 +08:00 · 2023-01-14 17:03:18 +09:00
parent ddfb497764 58cbc50b31
commit 8203406fa1
24 changed files with 360 additions and 398 deletions
@@ -1,55 +1,12 @@
-import { Badge, Box, Image, Link, Stack, StackDivider, Text, useColorModeValue } from "@chakra-ui/react";
+import { Box, Link, Stack, StackDivider, Text, useColorModeValue } from "@chakra-ui/react";
 import NextLink from "next/link";
+import { get } from "src/lib/api";
+import useSWR from "swr";

 export function LeaderboardTable() {
  const backgroundColor = useColorModeValue("white", "gray.700");
  const accentColor = useColorModeValue("gray.200", "gray.900");
-
-  //need to add streak info to chart
-
-  const leaderInfo = [
-    {
-      name: "fozziethebeat#6690",
-      image: "/images/temp-avatars/av1.jpg",
-      score: "5,208",
-      arrowDir: "increase",
-      streak: false,
-      streakCount: "5-Day Streak",
-    },
-    {
-      name: "k_nearest_neighbor#8579",
-      image: "/images/temp-avatars/av2.jpg",
-      score: "5,164",
-      arrowDir: "decrease",
-      streak: false,
-      streakCount: "",
-    },
-    {
-      name: "andreaskoepf#2266",
-      image: "/images/temp-avatars/av3.jpg",
-      score: "5,120",
-      arrowDir: "",
-      streak: false,
-      streakCount: "2-Day Streak",
-    },
-    {
-      name: "AbdBarho#1684",
-      image: "/images/temp-avatars/av4.jpg",
-      score: "4,260",
-      arrowDir: "",
-      streak: false,
-      streakCount: "",
-    },
-    {
-      name: "zu#9016",
-      image: "/images/temp-avatars/av5.jpg",
-      score: "3,608",
-      arrowDir: "",
-      streak: false,
-      streakCount: "",
-    },
-  ];
-
+  const { data: leaderboardEntries } = useSWR("/api/leaderboard", get);
  return (
    <main className="h-fit col-span-3">
      <div className="flex flex-col gap-4">
@@ -75,15 +32,19 @@ export function LeaderboardTable() {
                <p>Score</p>
              </div>
            </div>
-            {leaderInfo.map((item, itemIndex) => (
-              <div key={itemIndex} className="grid grid-cols-4 items-center">
+            {leaderboardEntries?.map(({ display_name, score }, idx) => (
+              <div key={idx} className="grid grid-cols-4 items-center">
                <div className="flex items-center gap-3">
+                  {/*
                  <Image alt="Profile Picture" src={item.image} boxSize="7" borderRadius="full"></Image>
-                  <p>{item.name}</p>
+                    */}
+                  <p>{display_name}</p>
+                  {/*
                  <Badge colorScheme="purple">{item.streakCount}</Badge>
+                    */}
                </div>
                <Box bg={backgroundColor} className="col-start-4 flex justify-center">
-                  <p>{item.score}</p>
+                  <p>{score}</p>
                </Box>
              </div>
            ))}
@@ -1,5 +1,6 @@
-import { Center, Text, useColorMode, useColorModeValue } from "@chakra-ui/react";
-import { FiFileText } from "react-icons/fi";
+import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { FiAlertTriangle } from "react-icons/fi";
 import { IconType } from "react-icons/lib";

 type EmptyStateProps = {
@@ -8,25 +9,26 @@ type EmptyStateProps = {
 };

 export const EmptyState = (props: EmptyStateProps) => {
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-900" : "bg-slate-900 text-white";
-
-  const widgetClasses = useColorModeValue("border-gray-700 text-gray-700", "border-gray-300 text-gray-300");
+  const backgroundColor = useColorModeValue("white", "gray.800");
+  const router = useRouter();

  return (
-    <div className={`p-12 ${mainBgClasses}`}>
-      <Center>
-        <div className={`block border-2 border-dotted rounded-lg p-24 text-center ${widgetClasses}`}>
-          <props.icon className="mx-auto h-16 w-16" />
-          <Text fontFamily="inter" fontSize="2xl">
-            {props.text}
-          </Text>
-        </div>
-      </Center>
-    </div>
+    <Box 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>
+        <Link onClick={() => router.back()} color="blue.500" textUnderlineOffset="3px">
+          <Text>Click here to go back</Text>
+        </Link>
+      </Box>
+    </Box>
  );
 };

 export const TaskEmptyState = () => {
-  return <EmptyState text="No tasks found!" icon={FiFileText} />;
+  return <EmptyState text="Looks like no tasks were found." icon={FiAlertTriangle} />;
+};
+
+export const PageEmptyState = () => {
+  return <EmptyState text="Sorry, the page you are looking for does not exist." icon={FiAlertTriangle} />;
 };
@@ -1,4 +1,5 @@
 import {
+  Box,
  Button,
  Checkbox,
  Flex,
@@ -21,8 +22,9 @@ import {
  useColorModeValue,
  useId,
 } from "@chakra-ui/react";
-import { FlagIcon, QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
+import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 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 "styles/Theme/colors";
@@ -98,7 +100,6 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
    { label_values: [], submittable: false }
  );
  const [isEditing, setIsEditing] = useBoolean();
-  const backgroundColor = useColorModeValue("gray.200", "gray.700");

  const { data, isLoading } = useSWR("/api/valid_labels", get);
  useEffect(() => {
@@ -145,20 +146,20 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
      isLazy
      lazyBehavior="keepMounted"
    >
-      <Grid templateColumns="1fr min-content" gap={2}>
+      <Grid display="flex" alignItems="center" gap="1">
        <PopoverAnchor>{props.children}</PopoverAnchor>
-        <Tooltip label="Report" bg="red.500">
+        <Tooltip label="Report" bg="red.500" aria-label="A tooltip">
          <div>
            <PopoverTrigger>
-              <Button h="full" bg={backgroundColor}>
-                <FlagIcon className="w-4 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />
-              </Button>
+              <Box as="button" display="flex" alignItems="center" justifyContent="center" borderRadius="full" p="1">
+                <FiAlertCircle size="20" className="text-red-400" aria-hidden="true" />
+              </Box>
            </PopoverTrigger>
          </div>
        </Tooltip>
      </Grid>

-      <PopoverContent width="fit-content">
+      <PopoverContent width="fit-content" p="3">
        <PopoverArrow />
        <div className="relative h-4">
          <PopoverCloseButton />
@@ -224,7 +225,7 @@ export function FlagCheckbox(props: FlagCheckboxProps): JSX.Element {
      : `text-${colors.dark.text} hover:text-blue-400 float-left`;

  return (
-    <Flex gap={1}>
+    <Flex gap="2">
      <Checkbox
        id={id}
        isChecked={props.checked}
@@ -1,16 +1,24 @@
-import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
-import { Popover } from "@headlessui/react";
-import { AnimatePresence, motion } from "framer-motion";
-import Image from "next/image";
-import NextLink from "next/link";
+import {
+  Avatar,
+  Box,
+  Link,
+  Menu,
+  MenuButton,
+  MenuDivider,
+  MenuGroup,
+  MenuItem,
+  MenuList,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
 import { signOut, useSession } from "next-auth/react";
 import React from "react";
 import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";

 export function UserMenu() {
+  const borderColor = useColorModeValue("gray.300", "gray.600");
+
  const { data: session } = useSession();
-  const backgroundColor = useColorModeValue("white", "gray.700");
-  const accentColor = useColorModeValue("gray.300", "gray.600");

  if (!session) {
    return <></>;
@@ -29,6 +37,8 @@ export function UserMenu() {
        desc: "Account Settings",
        icon: FiSettings,
      },
+    ];
+    const helpOptions = [
      {
        name: "Report a Bug",
        href: "https://github.com/LAION-AI/Open-Assistant/issues/new/choose",
@@ -47,87 +57,53 @@ export function UserMenu() {
    }

    return (
-      <Popover className="relative">
-        {({ open }) => (
-          <>
-            <Popover.Button aria-label="Toggle Account Options" className="flex">
-              <Box
-                borderWidth="1px"
-                borderColor={accentColor}
-                className="flex items-center gap-4 p-1 lg:pr-6 rounded-full transition-colors duration-300"
-              >
-                <Image
-                  src={session.user.image || "/images/temp-avatars/av1.jpg"}
-                  alt="Profile Picture"
-                  width="36"
-                  height="36"
-                  className="rounded-full"
-                ></Image>
-                <p data-cy="username" className="hidden lg:flex">
-                  {session.user.name || session.user.email}
-                </p>
-              </Box>
-            </Popover.Button>
-            <AnimatePresence initial={false}>
-              {open && (
-                <Box backgroundColor={backgroundColor}>
-                  <Popover.Panel
-                    static
-                    as={motion.div}
-                    initial={{ opacity: 0, y: -10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{
-                      opacity: 0,
-                      y: -10,
-                      transition: { duration: 0.2 },
-                    }}
-                  >
-                    <Box
-                      bg={backgroundColor}
-                      borderRadius="xl"
-                      shadow="base"
-                      className="absolute right-0 mt-3 w-screen max-w-xs p-4"
-                    >
-                      <Box className="flex flex-col gap-1">
-                        {accountOptions.map((item) => (
-                          <Link
-                            as={NextLink}
-                            key={item.name}
-                            href={item.href}
-                            aria-label={item.desc}
-                            className="flex items-center"
-                            bg={backgroundColor}
-                            _hover={{ textDecoration: "none" }}
-                          >
-                            <div className="p-4">
-                              <item.icon className="text-blue-500" aria-hidden="true" />
-                            </div>
-                            <div>
-                              <Text>{item.name}</Text>
-                            </div>
-                          </Link>
-                        ))}
-                        <Link
-                          className="flex items-center rounded-md cursor-pointer"
-                          _hover={{ textDecoration: "none" }}
-                          onClick={() => signOut({ callbackUrl: "/" })}
-                        >
-                          <div className="p-4">
-                            <FiLogOut className="text-blue-500" />
-                          </div>
-                          <div>
-                            <Text>Sign Out</Text>
-                          </div>
-                        </Link>
-                      </Box>
-                    </Box>
-                  </Popover.Panel>
-                </Box>
-              )}
-            </AnimatePresence>
-          </>
-        )}
-      </Popover>
+      <>
+        <Menu>
+          <MenuButton border="solid" borderRadius="full" borderWidth="thin" borderColor={borderColor}>
+            <Box display="flex" alignItems="center" gap="3" p="1" paddingRight={[1, 1, 1, 6, 6]}>
+              <Avatar size="sm" bgImage={session.user.image}></Avatar>
+              <Text data-cy="username" className="hidden lg:flex">
+                {session.user.name || session.user.email}
+              </Text>
+            </Box>
+          </MenuButton>
+          <MenuList p="2" borderRadius="xl" shadow="none">
+            <Box display="flex" flexDirection="column" alignItems="center" borderRadius="md" p="4">
+              <Text>{session.user.name}</Text>
+              <Text color="blue.500" fontWeight="bold" fontSize="xl">
+                3,200
+              </Text>
+            </Box>
+            <MenuDivider />
+            <MenuGroup>
+              {accountOptions.map((item) => (
+                <Link key={item.name} href={item.href} _hover={{ textDecoration: "none" }}>
+                  <MenuItem gap="3" borderRadius="md" p="4">
+                    <item.icon className="text-blue-500" aria-hidden="true" />
+                    <Text>{item.name}</Text>
+                  </MenuItem>
+                </Link>
+              ))}
+            </MenuGroup>
+            <MenuDivider />
+            <MenuGroup>
+              {helpOptions.map((item) => (
+                <Link key={item.name} href={item.href} isExternal _hover={{ textDecoration: "none" }}>
+                  <MenuItem gap="3" borderRadius="md" p="4">
+                    <item.icon className="text-blue-500" aria-hidden="true" />
+                    <Text>{item.name}</Text>
+                  </MenuItem>
+                </Link>
+              ))}
+            </MenuGroup>
+            <MenuDivider />
+            <MenuItem gap="3" borderRadius="md" p="4" onClick={() => signOut({ callbackUrl: "/" })}>
+              <FiLogOut className="text-blue-500" aria-hidden="true" />
+              <Text>Sign Out</Text>
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      </>
    );
  }
 }
@@ -0,0 +1,97 @@
+import { Avatar, Box, Grid, GridItem, Text, useColorModeValue } from "@chakra-ui/react";
+import { FiChevronDown } from "react-icons/fi";
+import { get } from "src/lib/api";
+import useSWR from "swr";
+
+/**
+ * Presents a grid of leaderboard entries with more detailed information.
+ */
+const LeaderboardGridCell = () => {
+  const { data: leaderboardEntries } = useSWR("/api/leaderboard", get);
+  const backgroundColor = useColorModeValue("white", "gray.800");
+  const columns = `repeat(${FILTER.length}, 1fr)`;
+
+  return (
+    <>
+      <Grid>
+        <GridItem
+          colSpan={4}
+          bg={backgroundColor}
+          display="grid"
+          gridTemplateColumns={columns}
+          p="4"
+          borderRadius="lg"
+          mb="4"
+          shadow="base"
+        >
+          {FILTER.map(({ title, GridItemProps }, index) => (
+            <GridItem key={index} display="flex" {...GridItemProps}>
+              <Box display="flex" alignItems="center" gap="2" width="fit-content" borderRadius="md" cursor="pointer">
+                <Text fontSize="sm" fontWeight="bold" textTransform="uppercase">
+                  {title}
+                </Text>
+
+                <FiChevronDown size="16" />
+              </Box>
+            </GridItem>
+          ))}
+        </GridItem>
+      </Grid>
+      <Grid templateColumns={columns} bg={backgroundColor} borderRadius="xl" shadow="base" p="4" gap="6">
+        {leaderboardEntries?.map(({ display_name, ranking, score }, index) => (
+          <GridItem key={index} colSpan={4} display="grid" gridTemplateColumns={columns} borderRadius="lg" p="2">
+            <GridItem overflow="hidden">
+              <Box display="flex" gap="2">
+                <Avatar size="xs" />
+                <Text>{display_name}</Text>
+              </Box>
+            </GridItem>
+            <GridItem>
+              <GridItem display="flex" justifyContent="center">
+                <Text>{ranking}</Text>
+              </GridItem>
+            </GridItem>
+            <GridItem display="flex" justifyContent="center">
+              <Text>{score}</Text>
+            </GridItem>
+            {/*
+            <GridItem display="flex" justifyContent="center">
+              <Text fontSize="xl">{item.medal}</Text>
+            </GridItem>
+              */}
+          </GridItem>
+        ))}
+      </Grid>
+    </>
+  );
+};
+
+/**
+ * Specifies the table headers in the grid.
+ */
+const FILTER = [
+  {
+    title: "User",
+    isActive: false,
+    GridItemProps: { justifyContent: "start" },
+  },
+  {
+    title: "Rank",
+    isActive: false,
+    GridItemProps: { justifyContent: "center" },
+  },
+  {
+    title: "Score",
+    isActive: false,
+    GridItemProps: { justifyContent: "center" },
+  },
+  /*
+  {
+    title: "Medal",
+    isActive: false,
+    GridItemProps: { justifyContent: "center" },
+  },
+   */
+];
+
+export { LeaderboardGridCell };
@@ -0,0 +1 @@
+export * from "./LeaderboardGridCell";
@@ -1,14 +1,12 @@
 import { Box, Center, Progress, Text, useColorModeValue } from "@chakra-ui/react";

 export const LoadingScreen = ({ text = "Loading..." } = {}) => {
-  const mainBgClasses = useColorModeValue("bg-slate-300 text-gray-900", "bg-slate-900 text-white");
-
  return (
-    <Box width="full" className={mainBgClasses}>
+    <Box width="full">
      <Progress size="sm" isIndeterminate />
      {text && (
-        <Center width="full" className="p-12">
-          <Text fontFamily="Inter">{text}</Text>
+        <Center width="full" p="12">
+          <Text>{text}</Text>
        </Center>
      )}
    </Box>
@@ -1,4 +1,4 @@
-import { Stack, StackDivider } from "@chakra-ui/react";
+import { Stack } from "@chakra-ui/react";
 import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
 import { Message } from "src/types/Conversation";

@@ -9,7 +9,7 @@ interface MessageTableProps {

 export function MessageTable({ messages, enableLink }: MessageTableProps) {
  return (
-    <Stack divider={<StackDivider />} spacing="4">
+    <Stack spacing="3">
      {messages.map((item) => (
        <MessageTableEntry enabled={enableLink} item={item} key={item.id || item.frontend_message_id} />
      ))}
@@ -11,30 +11,44 @@ interface MessageTableEntryProps {

 export function MessageTableEntry(props: MessageTableEntryProps) {
  const { item } = props;
-  const backgroundColor = useColorModeValue("gray.50", "gray.800");
+  const backgroundColor = useColorModeValue("gray.100", "gray.700");
+  const backgroundColor2 = useColorModeValue("#DFE8F1", "#42536B");
+
+  const avatarColor = useColorModeValue("white", "black");
+  const borderColor = useColorModeValue("blackAlpha.200", "whiteAlpha.200");
+
  return (
-    <div>
-      <FlaggableElement message={item} key={`flag_${item.id || item.frontend_message_id}`}>
-        <HStack>
+    <FlaggableElement message={item} key={`flag_${item.id || item.frontend_message_id}`}>
+      <HStack>
+        <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"}`}
          />
-
-          {props.enabled ? (
+        </Box>
+        {props.enabled ? (
+          <Box maxWidth="xl">
            <Link href={`/messages/${item.id}`}>
-              <LinkBox bg={backgroundColor} className={`p-4 rounded-md whitespace-pre-wrap w-full`}>
+              <LinkBox
+                bg={item.is_assistant ? `${backgroundColor}` : `${backgroundColor2}`}
+                className={`p-4 rounded-md whitespace-pre-wrap w-full`}
+              >
                {item.text}
              </LinkBox>
            </Link>
-          ) : (
-            <Box bg={backgroundColor} className={`p-4 rounded-md whitespace-pre-wrap w-full`}>
+          </Box>
+        ) : (
+          <Box maxWidth="xl">
+            <Box
+              bg={item.is_assistant ? `${backgroundColor}` : `${backgroundColor2}`}
+              className={`p-4 rounded-md whitespace-pre-wrap w-full`}
+            >
              {item.text}
            </Box>
-          )}
-        </HStack>
-      </FlaggableElement>
-    </div>
+          </Box>
+        )}
+      </HStack>
+    </FlaggableElement>
  );
 }
@@ -26,8 +26,8 @@ interface MessageWithChildrenProps {
 }

 export function MessageWithChildren(props: MessageWithChildrenProps) {
-  const backgroundColor = useColorModeValue("white", "gray.700");
-  const childBackgroundColor = useColorModeValue("gray.200", "gray.800");
+  const backgroundColor = useColorModeValue("white", "gray.800");
+  const childBackgroundColor = useColorModeValue("gray.200", "gray.700");

  const { id, depth, maxDepth, isOnlyChild = true } = props;

@@ -93,11 +93,21 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
          <>
            <Text {...MessageHeaderProps}>{isFirstOrOnly ? "Children" : "Ancestor"}</Text>
            <Stack {...MessageStackProps}>
-              {children.map((item, idx) => (
-                <Box flex="1" key={`recursiveMessageWChildren_${idx}`}>
-                  <MessageTableEntry enabled item={item} />
-                </Box>
-              ))}
+              <Box
+                bg={backgroundColor}
+                padding="4"
+                borderRadius="xl"
+                display="flex"
+                flexDirection="column"
+                gap="4"
+                shadow="base"
+              >
+                {children.map((item, idx) => (
+                  <Box flex="1" key={`recursiveMessageWChildren_${idx}`}>
+                    <MessageTableEntry enabled item={item} />
+                  </Box>
+                ))}
+              </Box>
            </Stack>
          </>
        )
@@ -1,58 +0,0 @@
-import { Avatar, Box, GridItem, Text } from "@chakra-ui/react";
-
-const RankItem = () => {
-  const leaderInfo = [
-    {
-      username: "fozziethebeat",
-      rank: 1,
-      score: 530,
-      medal: "\uD83E\uDD47",
-    },
-    {
-      username: "k_nearest",
-      rank: 2,
-      score: 420,
-      medal: "\uD83E\uDD48",
-    },
-    {
-      username: "zu",
-      rank: 3,
-      score: 160,
-      medal: "\uD83E\uDD49",
-    },
-    {
-      username: "Abd",
-      rank: 4,
-      score: 140,
-      medal: "",
-    },
-  ];
-
-  return (
-    <>
-      {leaderInfo.map((item, index) => (
-        <GridItem key={index} colSpan={4} display="grid" gridTemplateColumns="repeat(4, 1fr)" borderRadius="lg" p="2">
-          <GridItem overflow="hidden">
-            <Box display="flex" gap="2">
-              <Avatar size="xs" />
-              <Text>{item.username}</Text>
-            </Box>
-          </GridItem>
-          <GridItem>
-            <GridItem display="flex" justifyContent="center">
-              <Text>{item.rank}</Text>
-            </GridItem>
-          </GridItem>
-          <GridItem display="flex" justifyContent="center">
-            <Text>{item.score}</Text>
-          </GridItem>
-          <GridItem display="flex" justifyContent="center">
-            <Text fontSize="xl">{item.medal}</Text>
-          </GridItem>
-        </GridItem>
-      ))}
-    </>
-  );
-};
-
-export default RankItem;
@@ -12,11 +12,11 @@ export const SideMenuLayout = (props: SideMenuLayoutProps) => {

  return (
    <Box backgroundColor={colorMode === "light" ? colors.light.bg : colors.dark.bg} className="sm:overflow-hidden">
-      <Box className="sm:flex h-full gap-6">
-        <Box className="p-6 sm:pr-0">
+      <Box className="sm:flex h-full lg:gap-6">
+        <Box className="p-3 lg:p-6 lg:pr-0">
          <SideMenu buttonOptions={props.menuButtonOptions} />
        </Box>
-        <Box className="flex flex-col overflow-y-auto p-6 sm:pl-0 gap-14 w-full">{props.children}</Box>
+        <Box className="flex flex-col overflow-y-auto p-3 lg:p-6 lg:pl-0 gap-14 w-full">{props.children}</Box>
      </Box>
    </Box>
  );
@@ -6,13 +6,13 @@ interface SurveyCardProps {
 }

 export const SurveyCard = (props: SurveyCardProps) => {
-  const backgroundColor = useColorModeValue("white", "gray.800");
+  const backgroundColor = useColorModeValue("white", "gray.700");

  const BoxClasses: BoxProps = {
-    p: "6",
    gap: "2",
    borderRadius: "xl",
    shadow: "base",
+    className: "p-4 sm:p-6",
  };

  return (
@@ -12,7 +12,7 @@ export const CreateTask = ({
  isDisabled,
  onReplyChanged,
 }: TaskSurveyProps<{ text: string }>) => {
-  const cardColor = useColorModeValue("gray.100", "gray.700");
+  const cardColor = useColorModeValue("gray.50", "gray.900");
  const titleColor = useColorModeValue("gray.800", "gray.300");
  const labelColor = useColorModeValue("gray.600", "gray.400");

@@ -42,7 +42,7 @@ export const CreateTask = ({
            </Text>
          </Stack>
          {task.conversation ? (
-            <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
+            <Box mt="4" borderRadius="lg" bg={cardColor} className="p-3 sm:p-6">
              <MessageTable messages={task.conversation.messages} />
            </Box>
          ) : null}
@@ -22,13 +22,9 @@ export const EvaluateTask = ({
  }

  useEffect(() => {
-    const conversationMsgs = task.conversation ? task.conversation.messages : [];
-    const defaultRanking = conversationMsgs.map((message, index) => index);
-    onReplyChanged({
-      content: { ranking: defaultRanking },
-      state: "DEFAULT",
-    });
-  }, [task.conversation, onReplyChanged]);
+    const ranking = (task.replies ?? task.prompts).map((_, idx) => idx);
+    onReplyChanged({ content: { ranking }, state: "DEFAULT" });
+  }, [task, onReplyChanged]);

  const onRank = (newRanking: number[]) => {
    onReplyChanged({ content: { ranking: newRanking }, state: "VALID" });
@@ -3,11 +3,11 @@ import { Text, useColorModeValue } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { MessageView } from "src/components/Messages";
 import { MessageTable } from "src/components/Messages/MessageTable";
+import { LabelRadioGroup } from "src/components/Survey/LabelRadioGroup";
+import { LabelSliderGroup } from "src/components/Survey/LabelSliderGroup";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
 import { TaskType } from "src/types/Task";
-import { LabelSliderGroup } from "src/components/Survey/LabelSliderGroup";
-import { LabelRadioGroup } from "src/components/Survey/LabelRadioGroup";

 export const LabelTask = ({
  task,
@@ -207,11 +207,19 @@ export class OasstApiClient {
    return this.put(`/api/v1/users/users/${user_id}?enabled=${is_enabled}&notes=${notes}`);
  }

-  //Fetch valid labels. This is called every task. though the call may be redundant
-  //keeping this for future where the valid labels may change per task
-  async fetch_valid_text(): Promise<void> {
+  /**
+   * Returns the valid labels for messages.
+   */
+  async fetch_valid_text(): Promise<any> {
    return this.get(`/api/v1/text_labels/valid_labels`);
  }
+
+  /**
+   * Returns the current leaderboard ranking.
+   */
+  async fetch_leaderboard(): Promise<any> {
+    return this.get(`/api/v1/experimental/leaderboards/create/assistant`);
+  }
 }

 const oasstApiClient = new OasstApiClient(process.env.FASTAPI_URL, process.env.FASTAPI_KEY);
@@ -1,32 +1,47 @@
-import { Button, Link, Stack } from "@chakra-ui/react";
+import { Box, Button, Center, Link, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
-import NextLink from "next/link";
+import { useRouter } from "next/router";
 import { FiAlertTriangle } from "react-icons/fi";
+import { PageEmptyState } from "src/components/EmptyState";
+import { getTransparentHeaderLayout } from "src/components/Layout";
+
+function Error() {
+  const router = useRouter();
+  const backgroundColor = useColorModeValue("white", "gray.800");

-export default function Error() {
  return (
    <>
      <Head>
        <title>404 - Open Assistant</title>
        <meta name="404" content="Sorry, this page doesn't exist." />
      </Head>
-      <main className="flex h-3/4 items-center justify-center overflow-hidden subpixel-antialiased text-xl">
-        <Stack>
-          <p>Sorry, the page you are looking for does not exist.</p>
-          <p>If you were trying to contribute data but ended up here, please file a bug</p>
-          <Button leftIcon={<FiAlertTriangle className="text-blue-500" aria-hidden="true" />} variant="solid">
+      <Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
+        <PageEmptyState />
+        <Box display="flex" flexDirection="column" alignItems="center" gap="2" mt="6">
+          <Text fontSize="sm">If you were trying to contribute data but ended up here, please file a bug.</Text>
+          <Button
+            width="fit-content"
+            leftIcon={<FiAlertTriangle className="text-blue-500" aria-hidden="true" />}
+            variant="solid"
+            size="xs"
+          >
            <Link
-              as={NextLink}
              key="Report a Bug"
              href="https://github.com/LAION-AI/Open-Assistant/issues/new/choose"
              aria-label="Report a Bug"
              className="flex items-center"
+              _hover={{ textDecoration: "none" }}
+              isExternal
            >
              Report a Bug
            </Link>
          </Button>
-        </Stack>
-      </main>
+        </Box>
+      </Center>
    </>
  );
 }
+
+Error.getLayout = getTransparentHeaderLayout;
+
+export default Error;
@@ -0,0 +1,18 @@
+import { withoutRole } from "src/lib/auth";
+import { oasstApiClient } from "src/lib/oasst_api_client";
+
+/**
+ * Returns the set of valid labels that can be applied to messages.
+ */
+const handler = withoutRole("banned", async (req, res) => {
+  const { leaderboard } = await oasstApiClient.fetch_leaderboard();
+  res.status(200).json(
+    leaderboard.map(({ display_name, ranking, score }) => ({
+      display_name,
+      ranking,
+      score,
+    }))
+  );
+});
+
+export default handler;
@@ -0,0 +1,25 @@
+import { Box, Heading } from "@chakra-ui/react";
+import Head from "next/head";
+import { getDashboardLayout } from "src/components/Layout";
+import { LeaderboardGridCell } from "src/components/LeaderboardGridCell";
+
+const Leaderboard = () => {
+  return (
+    <>
+      <Head>
+        <title>Leaderboard - Open Assistant</title>
+        <meta name="description" content="Leaderboard Rankings" charSet="UTF-8" />
+      </Head>
+      <Box display="flex" flexDirection="column">
+        <Heading fontSize="2xl" fontWeight="bold" pb="4">
+          Leaderboard
+        </Heading>
+        <LeaderboardGridCell />
+      </Box>
+    </>
+  );
+};
+
+Leaderboard.getLayout = getDashboardLayout;
+
+export default Leaderboard;
@@ -1,80 +0,0 @@
-import { Box, Grid, GridItem, GridItemProps, Heading, Text, useColorModeValue } from "@chakra-ui/react";
-import Head from "next/head";
-import { FiChevronDown } from "react-icons/fi";
-import { getDashboardLayout } from "src/components/Layout";
-import RankItem from "src/components/RankItem";
-
-const Leaderboard = () => {
-  const backgroundColor = useColorModeValue("white", "gray.800");
-
-  const GridProps: GridItemProps = {
-    justifyContent: "start",
-  };
-  const filter = [
-    {
-      title: "User",
-      isActive: false,
-      GridItemProps: { ...GridProps, justifyContent: "start" },
-    },
-    {
-      title: "Rank",
-      isActive: false,
-      GridItemProps: { ...GridProps, justifyContent: "center" },
-    },
-    {
-      title: "Score",
-      isActive: false,
-      GridItemProps: { ...GridProps, justifyContent: "center" },
-    },
-    {
-      title: "Medal",
-      isActive: false,
-      GridItemProps: { ...GridProps, justifyContent: "center" },
-    },
-  ];
-
-  return (
-    <>
-      <Head>
-        <title>Leaderboard - Open Assistant</title>
-        <meta name="description" content="Leaderboard Rankings" charSet="UTF-8" />
-      </Head>
-      <Box display="flex" flexDirection="column">
-        <Heading fontSize="2xl" fontWeight="bold" pb="4">
-          Leaderboard
-        </Heading>
-        <Grid>
-          <GridItem
-            colSpan={4}
-            bg={backgroundColor}
-            display="grid"
-            gridTemplateColumns="repeat(4, 1fr)"
-            p="4"
-            borderRadius="lg"
-            mb="4"
-            shadow="base"
-          >
-            {filter.map((item, index) => (
-              <GridItem key={index} display="flex" {...item.GridItemProps}>
-                <Box display="flex" alignItems="center" gap="2" width="fit-content" borderRadius="md" cursor="pointer">
-                  <Text fontSize="sm" fontWeight="bold" textTransform="uppercase">
-                    {item.title}
-                  </Text>
-
-                  <FiChevronDown size="16" />
-                </Box>
-              </GridItem>
-            ))}
-          </GridItem>
-        </Grid>
-        <Grid templateColumns="repeat(4, 1fr)" bg={backgroundColor} borderRadius="xl" shadow="base" p="4" gap="6">
-          <RankItem />
-        </Grid>
-      </Box>
-    </>
-  );
-};
-
-Leaderboard.getLayout = getDashboardLayout;
-
-export default Leaderboard;
@@ -9,7 +9,7 @@ import { get } from "src/lib/api";
 import useSWR from "swr";

 const MessageDetail = ({ id }) => {
-  const backgroundColor = useColorModeValue("white", "gray.700");
+  const backgroundColor = useColorModeValue("white", "gray.800");
  const [parent, setParent] = useState(null);

  const { isLoading: isLoadingParent } = useSWR(id ? `/api/messages/${id}/parent` : null, get, {
@@ -38,11 +38,10 @@ const MessageDetail = ({ id }) => {
          {parent && (
            <>
              <Box pb="4">
-                <Text fontFamily="Inter" fontWeight="bold" fontSize="xl" pb="2">
+                <Text fontWeight="bold" fontSize="xl" pb="2">
                  Parent
                </Text>
                <Box bg={backgroundColor} padding="4" borderRadius="xl" boxShadow="base" width="fit-content">
-                  {" "}
                  <MessageTableEntry enabled item={parent} />
                </Box>
              </Box>
@@ -1,38 +1,16 @@
 import { Box, CircularProgress, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
-import { useEffect, useState } from "react";
 import { getDashboardLayout } from "src/components/Layout";
 import { MessageTable } from "src/components/Messages/MessageTable";
 import { get } from "src/lib/api";
-import { Message } from "src/types/Conversation";
 import useSWRImmutable from "swr/immutable";

 const MessagesDashboard = () => {
-  const boxBgColor = useColorModeValue("white", "gray.700");
+  const boxBgColor = useColorModeValue("white", "gray.800");
  const boxAccentColor = useColorModeValue("gray.200", "gray.900");

-  const [messages, setMessages] = useState<Message[]>(null);
-  const [userMessages, setUserMessages] = useState<Message[]>(null);
-
-  const { isLoading: isLoadingAll, mutate: mutateAll } = useSWRImmutable("/api/messages", get, {
-    onSuccess: setMessages,
-  });
-
-  const { isLoading: isLoadingUser, mutate: mutateUser } = useSWRImmutable(`/api/messages/user`, get, {
-    onSuccess: setUserMessages,
-  });
-
-  const receivedMessages = !isLoadingAll && Array.isArray(messages);
-  const receivedUserMessages = !isLoadingUser && Array.isArray(userMessages);
-
-  useEffect(() => {
-    if (!receivedMessages) {
-      mutateAll();
-    }
-    if (!receivedUserMessages) {
-      mutateUser();
-    }
-  }, [receivedMessages, mutateAll, receivedUserMessages, mutateUser]);
+  const { data: messages } = useSWRImmutable("/api/messages", get, { revalidateOnMount: true });
+  const { data: userMessages } = useSWRImmutable(`/api/messages/user`, get, { revalidateOnMount: true });

  return (
    <>
@@ -40,24 +18,24 @@ const MessagesDashboard = () => {
        <title>Messages - Open Assistant</title>
        <meta name="description" content="Chat with Open Assistant and provide feedback." />
      </Head>
-      <SimpleGrid fontFamily="Inter" columns={[1, 1, 1, 2]} gap={4}>
+      <SimpleGrid columns={[1, 1, 1, 1, 1, 2]} gap={4}>
        <Box>
          <Text className="text-2xl font-bold" pb="4">
-            Recent messages
+            Recent Messages
          </Text>
          <Box
            backgroundColor={boxBgColor}
            boxShadow="base"
            dropShadow={boxAccentColor}
            borderRadius="xl"
-            className="p-6 shadow-sm"
+            className="p-3 sm:p-4 shadow-sm"
          >
-            {receivedMessages ? <MessageTable enableLink messages={messages} /> : <CircularProgress isIndeterminate />}
+            {messages ? <MessageTable enableLink messages={messages} /> : <CircularProgress isIndeterminate />}
          </Box>
        </Box>
        <Box>
          <Text className="text-2xl font-bold" pb="4">
-            Your recent messages
+            Your Recent Messages
          </Text>
          <Box
            backgroundColor={boxBgColor}
@@ -66,11 +44,7 @@ const MessagesDashboard = () => {
            borderRadius="xl"
            className="p-6 shadow-sm"
          >
-            {receivedUserMessages ? (
-              <MessageTable enableLink messages={userMessages} />
-            ) : (
-              <CircularProgress isIndeterminate />
-            )}
+            {userMessages ? <MessageTable enableLink messages={userMessages} /> : <CircularProgress isIndeterminate />}
          </Box>
        </Box>
      </SimpleGrid>
@@ -0,0 +1,5 @@
+export interface LeaderboardEntry {
+  display_name: string;
+  ranking: number;
+  score: number;
+}