Merge branch 'main' into 763-make-labels-required

website/src/components/CollapsableText.tsx

@@ -11,6 +11,8 @@ import {
 } from "@chakra-ui/react";
 import React, { ReactNode } from "react";
 
+const killEvent = (e) => e.stopPropagation();
+
 export const CollapsableText = ({
   text,
   maxLength = 220,
@@ -44,8 +46,9 @@ export const CollapsableText = ({
           </Button>
         </span>
         <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={"inside"}>
-          <ModalOverlay style={{ width: "100%", height: "100%" }}>
-            <ModalContent maxH="400">
+          {/* we kill the event here to disable drag and drop, since it is in the same container */}
+          <ModalOverlay onMouseDown={killEvent}>
+            <ModalContent alignItems="center">
               <ModalHeader>Full Text</ModalHeader>
               <ModalCloseButton />
               <ModalBody>{text}</ModalBody>

website/src/components/Dashboard/LeaderboardTable.tsx

@@ -1,17 +1,16 @@
-import { Box, Link, Stack, StackDivider, Text, useColorModeValue } from "@chakra-ui/react";
+import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
 import NextLink from "next/link";
-import { get } from "src/lib/api";
-import useSWR from "swr";
+import { LeaderboardGridCell } from "src/components/LeaderboardGridCell";
+import { LeaderboardTimeFrame } from "src/types/Leaderboard";
 
 export function LeaderboardTable() {
   const backgroundColor = useColorModeValue("white", "gray.700");
   const accentColor = useColorModeValue("gray.200", "gray.900");
-  const { data: leaderboardEntries } = useSWR("/api/leaderboard", get);
   return (
     <main className="h-fit col-span-3">
       <div className="flex flex-col gap-4">
         <div className="flex items-end justify-between">
-          <Text className="text-2xl font-bold">Top 5 Contributors</Text>
+          <Text className="text-2xl font-bold">Top 5 Contributors Today</Text>
           <Link as={NextLink} href="/leaderboard" _hover={{ textDecoration: "none" }}>
             <Text color="blue.400" className="text-sm font-bold">
               View All -&gt;
@@ -25,30 +24,7 @@ export function LeaderboardTable() {
           borderRadius="xl"
           className="p-6 shadow-sm"
         >
-          <Stack divider={<StackDivider />} spacing="4">
-            <div className="grid grid-cols-4 items-center font-bold">
-              <p>Name</p>
-              <div className="col-start-4 flex justify-center">
-                <p>Score</p>
-              </div>
-            </div>
-            {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>{display_name}</p>
-                  {/*
-                  <Badge colorScheme="purple">{item.streakCount}</Badge>
-                    */}
-                </div>
-                <Box bg={backgroundColor} className="col-start-4 flex justify-center">
-                  <p>{score}</p>
-                </Box>
-              </div>
-            ))}
-          </Stack>
+          <LeaderboardGridCell timeFrame={LeaderboardTimeFrame.day} />
         </Box>
       </div>
     </main>

website/src/components/Dashboard/SlimFooter.tsx

@@ -0,0 +1,45 @@
+import { Box, Divider } from "@chakra-ui/react";
+import Image from "next/image";
+import Link from "next/link";
+import { useMemo } from "react";
+
+export function SlimFooter() {
+  return (
+    <footer>
+      <Box>
+        <Divider />
+        <Box display="flex" gap="4" flexDir="column" alignItems="center" my="8">
+          <Box display="flex" alignItems="center">
+            <Link href="/" aria-label="Home" className="flex items-center gap-1">
+              <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="48" height="48" alt="logo" />
+            </Link>
+          </Box>
+          <nav>
+            <Box display="flex" gap="5" fontSize="xs" color="blue.500">
+              <FooterLink href="/privacy-policy" label="Privacy Policy" />
+              <FooterLink href="/terms-of-service" label="Terms of Service" />
+              <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
+              <FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
+            </Box>
+          </nav>
+        </Box>
+      </Box>
+    </footer>
+  );
+}
+
+const FooterLink = ({ href, label }: { href: string; label: string }) =>
+  useMemo(
+    () => (
+      <Link
+        href={href}
+        rel="noopener noreferrer nofollow"
+        target="_blank"
+        aria-label={label}
+        className="hover:underline underline-offset-2"
+      >
+        {label}
+      </Link>
+    ),
+    [href, label]
+  );

website/src/components/Footer.tsx

@@ -1,40 +1,66 @@
-import { useColorMode } from "@chakra-ui/react";
+import { Box, Divider, Flex, Text, useColorMode } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
 import { useMemo } from "react";
 
 export function Footer() {
   const { colorMode } = useColorMode();
-  const bgColorClass = colorMode === "light" ? "bg-transparent" : "bg-gray-800";
-  const borderClass = colorMode === "light" ? "border-slate-200" : "border-transparent";
+  const backgroundColor = colorMode === "light" ? "white" : "gray.800";
+  const textColor = colorMode === "light" ? "black" : "gray.300";
 
   return (
-    <footer className={bgColorClass}>
-      <div className={`flex mx-auto max-w-7xl justify-between border-t p-10 ${borderClass}`}>
-        <div className="flex items-center pr-8">
-          <Link href="/" aria-label="Home" className="flex items-center">
-            <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="52" height="52" alt="logo" />
-          </Link>
+    <footer>
+      <Box bg={backgroundColor}>
+        <Divider />
+        <Box
+          display="flex"
+          flexDirection={["column", "row"]}
+          justifyContent="space-between"
+          alignItems="center"
+          gap="6"
+          p="8"
+          pb={["14", "8"]}
+          w="full"
+          mx="auto"
+          maxWidth="7xl"
+        >
+          <Flex alignItems="center">
+            <Box pr="2">
+              <Link href="/" aria-label="Home">
+                <Image src="/images/logos/logo.svg" width="52" height="52" alt="logo" />
+              </Link>
+            </Box>
 
-          <div className="ml-2">
-            <p className="text-base font-bold">Open Assistant</p>
-            <p className="text-sm">Conversational AI for everyone.</p>
-          </div>
-        </div>
+            <Box>
+              <Text fontSize="md" fontWeight="bold">
+                Open Assistant
+              </Text>
+              <Text fontSize="sm" color="gray.500">
+                Conversational AI for everyone.
+              </Text>
+            </Box>
+          </Flex>
 
-        <nav className="grid grid-cols-2 gap-20 leading-5 text-sm">
-          <div className="flex flex-col">
-            <b className="pb-1">Legal</b>
-            <FooterLink href="/privacy-policy" label="Privacy Policy" />
-            <FooterLink href="/terms-of-service" label="Terms of Service" />
-          </div>
-          <div className="flex flex-col">
-            <b className="pb-1">Connect</b>
-            <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
-            <FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
-          </div>
-        </nav>
-      </div>
+          <nav>
+            <Box display="flex" flexDirection={["column", "row"]} gap={["6", "14"]} alignItems="center" fontSize="sm">
+              <Flex direction="column" alignItems={["center", "start"]}>
+                <Text fontWeight="bold" color={textColor}>
+                  Legal
+                </Text>
+                <FooterLink href="/privacy-policy" label="Privacy Policy" />
+                <FooterLink href="/terms-of-service" label="Terms of Service" />
+              </Flex>
+              <Flex direction="column" alignItems={["center", "start"]}>
+                <Text fontWeight="bold" color={textColor}>
+                  Connect
+                </Text>
+                <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
+                <FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
+              </Flex>
+            </Box>
+          </nav>
+        </Box>
+      </Box>
     </footer>
   );
 }
@@ -42,14 +68,10 @@ export function Footer() {
 const FooterLink = ({ href, label }: { href: string; label: string }) =>
   useMemo(
     () => (
-      <Link
-        href={href}
-        rel="noopener noreferrer nofollow"
-        target="_blank"
-        aria-label={label}
-        className="hover:underline underline-offset-2"
-      >
-        {label}
+      <Link href={href} rel="noopener noreferrer nofollow" target="_blank" aria-label={label}>
+        <Text color="blue.500" textUnderlineOffset={2} _hover={{ textDecoration: "underline" }}>
+          {label}
+        </Text>
       </Link>
     ),
     [href, label]

website/src/components/Layout.tsx

@@ -1,9 +1,11 @@
 // https://nextjs.org/docs/basic-features/layouts
 
+import { Box, Grid } from "@chakra-ui/react";
 import type { NextPage } from "next";
 import { FiBarChart2, FiLayout, FiMessageSquare, FiUsers } from "react-icons/fi";
 import { Header } from "src/components/Header";
 
+import { SlimFooter } from "./Dashboard/SlimFooter";
 import { Footer } from "./Footer";
 import { SideMenuLayout } from "./SideMenuLayout";
 
@@ -28,7 +30,7 @@ export const getTransparentHeaderLayout = (page: React.ReactElement) => (
 );
 
 export const getDashboardLayout = (page: React.ReactElement) => (
-  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
+  <Grid templateRows="min-content 1fr" h="full">
     <Header transparent={true} />
     <SideMenuLayout
       menuButtonOptions={[
@@ -52,10 +54,14 @@ export const getDashboardLayout = (page: React.ReactElement) => (
         },
       ]}
     >
-      {page}
+      <Grid templateRows="1fr min-content" h="full">
+        <Box>{page}</Box>
+        <Box mt="10">
+          <SlimFooter />
+        </Box>
+      </Grid>
     </SideMenuLayout>
-    <Footer />
-  </div>
+  </Grid>
 );
 
 export const getAdminLayout = (page: React.ReactElement) => (

website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx

@@ -8,7 +8,7 @@ import useSWRImmutable from "swr/immutable";
 const columns = [
   {
     Header: "Rank",
-    accessor: (item: LeaderboardEntity, rowIndex: number) => "#" + item.rank,
+    accessor: "rank",
     style: { width: "90px" },
   },
   {

website/src/components/Roadmap.tsx

@@ -51,7 +51,7 @@ const Roadmap = () => {
             </div>
             <h4 className="font-bold text-xl text-[#858585] text-center max-w-[10rem]">Growing Up</h4>
             <ul className="ml-6 md:ml-8 lg:ml-6 space-y-4 text-[#858585] list-disc">
-              <li>Third-Party Extentions</li>
+              <li>Third-Party Extensions</li>
               <li>Device Control</li>
               <li>Multi-Modality</li>
             </ul>

website/src/components/SideMenuLayout.tsx

@@ -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 lg:gap-6">
-        <Box className="p-3 lg:p-6 lg:pr-0">
+      <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} />
         </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 className="overflow-y-auto p-3 lg:p-6 lg:pl-0 w-full">{props.children}</Box>
       </Box>
     </Box>
   );

website/src/components/Survey/LabelRadioGroup.tsx

@@ -1,4 +1,18 @@
-import { Box, Button, Flex, useColorMode } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  Flex,
+  IconButton,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+  useColorMode,
+} from "@chakra-ui/react";
+import { InformationCircleIcon } from "@heroicons/react/20/solid";
 import { useId, useState } from "react";
 import { colors } from "src/styles/Theme/colors";
 
@@ -8,6 +22,17 @@ interface LabelRadioGroupProps {
   isEditable?: boolean;
 }
 
+const label_messages: { [label: string]: { description: string; explanation: string[] } } = {
+  spam: {
+    description: "The message is spam?",
+    explanation: [
+      '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.",
+    ],
+  },
+};
+
 export const LabelRadioGroup = (props: LabelRadioGroupProps) => {
   const [labelValues, setLabelValues] = useState<number[]>(Array.from({ length: props.labelIDs.length }).map(() => 0));
   const [interactionFlag, setInteractionFlag] = useState(false);
@@ -17,7 +42,7 @@ export const LabelRadioGroup = (props: LabelRadioGroupProps) => {
       {props.labelIDs.map((labelId, idx) => (
         <LabelRadioItem
           key={idx}
-          labelId={labelId}
+          labelText={label_messages[labelId] || { description: labelId }}
           labelValue={labelValues[idx]}
           clickHandler={(newValue) => {
             const newState = labelValues.slice();
@@ -45,7 +70,7 @@ interface ButtonState {
 }
 
 interface LabelRadioItemProps {
-  labelId: string;
+  labelText: { description: string; explanation?: string[] };
   labelValue: number;
   clickHandler: (newVal: number) => unknown;
   states: ButtonState[];
@@ -63,7 +88,27 @@ const LabelRadioItem = (props: LabelRadioItemProps) => {
     <Box data-cy="label-group-item" data-label-type="radio">
       <label className="text-sm" htmlFor={id}>
         {/* TODO: display real text instead of just the id */}
-        <span className={labelTextClass}>{props.labelId}</span>
+        <span className={labelTextClass}>{props.labelText.description}</span>
+        {props.labelText.explanation ? (
+          <Popover>
+            <PopoverTrigger>
+              <IconButton
+                aria-label="explanation"
+                variant="link"
+                icon={<InformationCircleIcon className="h-5 w-5" />}
+              ></IconButton>
+            </PopoverTrigger>
+            <PopoverContent>
+              <PopoverArrow />
+              <PopoverCloseButton />
+              <PopoverBody>
+                {props.labelText.explanation.map((paragraph, idx) => (
+                  <Text key={idx}>{paragraph}</Text>
+                ))}
+              </PopoverBody>
+            </PopoverContent>
+          </Popover>
+        ) : null}
       </label>
       <Flex direction="row" gap={6} justify="center">
         {props.states.map((item, idx) => (

website/src/components/Tasks/LabelTask/LabelTask.tsx

@@ -69,7 +69,7 @@ export const LabelTask = ({
             </Box>
           )}
         </>
-        {valid_labels.length === 1 ? (
+        {task.mode === "simple" ? (
           <LabelRadioGroup labelIDs={task.valid_labels} isEditable={isEditable} onChange={onSliderChange} />
         ) : (
           <LabelSliderGroup labelIDs={task.valid_labels} isEditable={isEditable} onChange={onSliderChange} />

website/src/components/Tasks/Task/Task.tsx

@@ -27,7 +27,7 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
   const replyContent = useRef<TaskContent>(null);
   const [showUnchangedWarning, setShowUnchangedWarning] = useState(false);
 
-  const taskType = TaskTypes.find((taskType) => taskType.type === task.type);
+  const taskType = TaskTypes.find((taskType) => taskType.type === task.type && taskType.mode === task.mode);
 
   const { trigger: sendRejection } = useSWRMutation("/api/reject_task", post, {
     onSuccess: async () => {

website/src/components/Tasks/TaskTypes.tsx

@@ -11,6 +11,7 @@ export interface TaskInfo {
   category: TaskCategory;
   pathname: string;
   type: string;
+  mode?: string;
   overview?: string;
   instruction?: string;
   update_type: string;
@@ -90,7 +91,7 @@ export const TaskTypes: TaskInfo[] = [
     unchanged_title: "Order Unchanged",
     unchanged_message: "You have not changed the order of the prompts. Are you sure you would like to continue?",
   },
-  // label
+  // label (full)
   {
     label: "Label Initial Prompt",
     desc: "Provide labels for a prompt.",
@@ -98,6 +99,7 @@ export const TaskTypes: TaskInfo[] = [
     pathname: "/label/label_initial_prompt",
     overview: "Provide labels for the following prompt",
     type: "label_initial_prompt",
+    mode: "full",
     update_type: "text_labels",
   },
   {
@@ -105,8 +107,9 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Provide labels for a prompt.",
     category: TaskCategory.Label,
     pathname: "/label/label_prompter_reply",
-    overview: "Given the following discussion, provide labels for the final promp",
+    overview: "Given the following discussion, provide labels for the final prompt",
     type: "label_prompter_reply",
+    mode: "full",
     update_type: "text_labels",
   },
   {
@@ -116,6 +119,38 @@ export const TaskTypes: TaskInfo[] = [
     pathname: "/label/label_assistant_reply",
     overview: "Given the following discussion, provide labels for the final prompt.",
     type: "label_assistant_reply",
+    mode: "full",
+    update_type: "text_labels",
+  },
+  // label (simple)
+  {
+    label: "Classify Initial Prompt",
+    desc: "Provide labels for a prompt.",
+    category: TaskCategory.Label,
+    pathname: "/label/label_initial_prompt",
+    overview: "Read the following prompt and then answer the question about it.",
+    type: "label_initial_prompt",
+    mode: "simple",
+    update_type: "text_labels",
+  },
+  {
+    label: "Classify Prompter Reply",
+    desc: "Provide labels for a prompt.",
+    category: TaskCategory.Label,
+    pathname: "/label/label_prompter_reply",
+    overview: "Read the following conversation and then answer the question about the last prompt in the discussion.",
+    type: "label_prompter_reply",
+    mode: "simple",
+    update_type: "text_labels",
+  },
+  {
+    label: "Classify Assistant Reply",
+    desc: "Provide labels for a prompt.",
+    category: TaskCategory.Label,
+    pathname: "/label/label_assistant_reply",
+    overview: "Read the following conversation and then answer the question about the last prompt in the discussion.",
+    type: "label_assistant_reply",
+    mode: "simple",
     update_type: "text_labels",
   },
 ];