Merge branch 'main' into discord-credentials

website/src/components/CollapsableText.tsx

@@ -0,0 +1,28 @@
+import { Button, useDisclosure } from "@chakra-ui/react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton } from "@chakra-ui/react";
+import React from "react";
+
+export const CollapsableText = ({ text, maxLength = 220 }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  if (typeof text != "string" || text.length <= maxLength) {
+    return text;
+  } else {
+    return (
+      <>
+        {text.substring(0, maxLength - 3)}
+        <Button style={{ display: "contents" }} onClick={onOpen}>
+          ...
+        </Button>
+        <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={"inside"}>
+          <ModalOverlay style={{ width: "100%", height: "100%" }}>
+            <ModalContent maxH="400">
+              <ModalHeader>Full Text</ModalHeader>
+              <ModalCloseButton />
+              <ModalBody>{text}</ModalBody>
+            </ModalContent>
+          </ModalOverlay>
+        </Modal>
+      </>
+    );
+  }
+};

website/src/components/Container.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
 
 export function Container({ className, ...props }) {
-  return <div className={clsx("mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", className)} {...props} />;
+  return <div className={clsx("mx-auto max-w-7xl px-4", className)} {...props} />;
 }

website/src/components/ContextMessages.tsx

@@ -0,0 +1,17 @@
+import { Box } from "@chakra-ui/react";
+import { Message } from "./Messages";
+
+export const ContextMessages = ({ messages }: { messages: Message[] }) => {
+  return (
+    <Box className="flex flex-col gap-1">
+      {messages.map((message, i) => {
+        return (
+          <Box key={i}>
+            <span>{message.is_assistant ? "Assistant: " : "User: "}</span>
+            <span>{message.text}</span>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};

website/src/components/Dashboard/LeaderboardTable.tsx

@@ -0,0 +1,94 @@
+import { Badge, Box, Image, Link, Stack, StackDivider, Text, useColorModeValue } from "@chakra-ui/react";
+
+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: "",
+    },
+  ];
+
+  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>
+          <Link href="#" _hover={{ textDecoration: "none" }}>
+            <Text color="blue.400" className="text-sm font-bold">
+              View All -&gt;
+            </Text>
+          </Link>
+        </div>
+        <Box
+          backgroundColor={backgroundColor}
+          boxShadow="base"
+          dropShadow={accentColor}
+          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>
+            {leaderInfo.map((item, itemIndex) => (
+              <div key={itemIndex} 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>
+                  <Badge colorScheme="purple">{item.streakCount}</Badge>
+                </div>
+                <Box bg={backgroundColor} className="col-start-4 flex justify-center">
+                  <p>{item.score}</p>
+                </Box>
+              </div>
+            ))}
+          </Stack>
+        </Box>
+      </div>
+    </main>
+  );
+}

website/src/components/Dashboard/SideMenu.tsx

@@ -0,0 +1,83 @@
+import { Box, Button, Link, Text, Tooltip, useColorMode } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { FiLayout, FiSun } from "react-icons/fi";
+import { colors } from "styles/Theme/colors";
+
+export function SideMenu() {
+  const router = useRouter();
+  const { colorMode, toggleColorMode } = useColorMode();
+  const buttonOptions = [
+    {
+      label: "Dashboard",
+      pathname: "/dashboard",
+      desc: "Dashboard Home",
+      icon: FiLayout,
+    },
+    // {
+    //   label: "Leaderboard",
+    //   pathname: "#",
+    //   desc: "Public Leaderboard",
+    //   icon: FiAward,
+    // },
+    // {
+    //   label: "Stats",
+    //   pathname: "#",
+    //   desc: "User Statistics",
+    //   icon: FiBarChart2,
+    // },
+  ];
+
+  return (
+    <main className="sticky top-0 sm:h-full">
+      <Box
+        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"
+      >
+        <nav className="grid grid-cols-3 col-span-3 sm:flex sm:flex-col gap-2">
+          {buttonOptions.map((item, itemIndex) => (
+            <Tooltip
+              key={itemIndex}
+              fontFamily="inter"
+              label={item.label}
+              placement="right"
+              className="hidden lg:hidden sm:block"
+            >
+              <Link key={`${item.label}-${itemIndex}`} href={item.pathname} style={{ textDecoration: "none" }}>
+                <Button
+                  justifyContent={["center", "center", "center", "left"]}
+                  gap="3"
+                  size="lg"
+                  width="full"
+                  bg={router.pathname === item.pathname ? "blue.500" : null}
+                  _hover={router.pathname === item.pathname ? { bg: "blue.600" } : null}
+                >
+                  <item.icon className={router.pathname === item.pathname ? "text-blue-200" : null} />
+                  <Text
+                    fontWeight="normal"
+                    color={router.pathname === item.pathname ? "white" : null}
+                    className="hidden lg:block"
+                  >
+                    {item.label}
+                  </Text>
+                </Button>
+              </Link>
+            </Tooltip>
+          ))}
+        </nav>
+        <div>
+          <Tooltip fontFamily="inter" label="Toggle Dark Mode" placement="right" className="hidden lg:hidden sm:block">
+            <Button size="lg" width="full" justifyContent="center" onClick={toggleColorMode} gap="2">
+              <FiSun />
+              <Text fontWeight="normal" className="hidden lg:block">
+                {colorMode === "light" ? "Dark Mode" : "Light Mode"}
+              </Text>
+            </Button>
+          </Tooltip>
+        </div>
+      </Box>
+    </main>
+  );
+}

website/src/components/Dashboard/TaskOption.tsx

@@ -0,0 +1,120 @@
+import { Box, Flex, GridItem, Heading, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
+import Link from "next/link";
+
+const crTasks = [
+  {
+    label: "Reply as User",
+    desc: "Chat with Open Assistant and help improve it’s responses as you interact with it.",
+    type: "create",
+    pathname: "/create/assistant_reply",
+  },
+  {
+    label: "Reply as Assistant",
+    desc: "Help Open Assistant improve its responses to conversations with other users.",
+    type: "create",
+    pathname: "/create/assistant_reply",
+  },
+];
+
+const evTasks = [
+  {
+    label: "Rank User Replies",
+    type: "eval",
+    desc: "Help Open Assistant improve its responses to conversations with other users.",
+    pathname: "/evaluate/rank_user_replies",
+  },
+
+  {
+    label: "Rank Assistant Replies",
+    desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
+    type: "eval",
+    pathname: "/evaluate/rank_assistant_replies",
+  },
+  {
+    label: "Rank Initial Prompts",
+    desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
+    type: "eval;",
+    pathname: "/evaluate/rank_initial_prompts",
+  },
+];
+
+export const TaskOption = () => {
+  const backgroundColor = useColorModeValue("white", "gray.700");
+
+  return (
+    <Box className="flex flex-col gap-14" fontFamily="inter">
+      <div>
+        <Text className="text-2xl font-bold pb-4">Create</Text>
+        <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
+          {crTasks.map((item, itemIndex) => (
+            <Link key={itemIndex} href={item.pathname}>
+              <GridItem
+                bg={backgroundColor}
+                borderRadius="xl"
+                boxShadow="base"
+                className="flex flex-col justify-between h-full"
+              >
+                <Box className="p-6 pb-10">
+                  <Flex flexDir="column" gap="3">
+                    <Heading size="md" fontFamily="inter">
+                      {item.label}
+                    </Heading>
+                    <Text size="sm" opacity="80%">
+                      {item.desc}
+                    </Text>
+                  </Flex>
+                </Box>
+                <Box
+                  bg="blue.500"
+                  borderBottomRadius="xl"
+                  className="px-6 py-2 transition-colors duration-300"
+                  _hover={{ backgroundColor: "blue.600" }}
+                >
+                  <Text fontWeight="bold" color="white">
+                    Go
+                  </Text>
+                </Box>
+              </GridItem>
+            </Link>
+          ))}
+        </SimpleGrid>
+      </div>
+      <div>
+        <Text className="text-2xl font-bold pb-4">Evaluate</Text>
+        <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
+          {evTasks.map((item, itemIndex) => (
+            <Link key={itemIndex} href={item.pathname}>
+              <GridItem
+                bg={backgroundColor}
+                borderRadius="xl"
+                boxShadow="base"
+                className="flex flex-col justify-between h-full"
+              >
+                <Box className="p-6 pb-10">
+                  <Flex flexDir="column" gap="3">
+                    <Heading size="md" fontFamily="inter">
+                      {item.label}
+                    </Heading>
+                    <Text size="sm" opacity="80%">
+                      {item.desc}
+                    </Text>
+                  </Flex>
+                </Box>
+                <Box
+                  bg="blue.500"
+                  borderBottomRadius="xl"
+                  className="px-6 py-2 transition-colors duration-300"
+                  _hover={{ backgroundColor: "blue.600" }}
+                >
+                  <Text fontWeight="bold" color="white">
+                    Go
+                  </Text>
+                </Box>
+              </GridItem>
+            </Link>
+          ))}
+        </SimpleGrid>
+      </div>
+    </Box>
+  );
+};

website/src/components/Dashboard/index.ts

@@ -0,0 +1,3 @@
+export { LeaderboardTable } from "./LeaderboardTable";
+export { SideMenu } from "./SideMenu";
+export { TaskOption } from "./TaskOption";

website/src/components/Header/Header.tsx

@@ -1,43 +1,11 @@
-import { Box, Button, useColorMode } from "@chakra-ui/react";
-import { Popover } from "@headlessui/react";
-import { AnimatePresence, motion } from "framer-motion";
+import { Box, Button, Text, useColorMode } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { FaUser } from "react-icons/fa";
 
-import { ColorModeIconToggle } from "../UI/ColorModeIconToggle";
 import { UserMenu } from "./UserMenu";
 
-function MenuIcon(props) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
-      <path d="M5 6h14M5 18h14M5 12h14" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
-function ChevronUpIcon(props) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
-      <path d="M17 14l-5-5-5 5" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
-function MobileNavLink({ children, ...props }) {
-  return (
-    <Popover.Button
-      as={Link}
-      href={props.href}
-      className="block text-base leading-7 tracking-tight text-gray-700"
-      {...props}
-    >
-      {children}
-    </Popover.Button>
-  );
-}
-
 function AccountButton() {
   const { data: session } = useSession();
   if (session) {
@@ -53,70 +21,29 @@ function AccountButton() {
 }
 
 export function Header(props) {
+  const { data: session } = useSession();
+  const homeURL = session ? "/dashboard" : "/";
+
   const { colorMode } = useColorMode();
   const borderClass = props.transparent
     ? ""
     : colorMode === "light"
     ? "border-b border-gray-400"
     : "border-b border-zinc-800";
-
   return (
     <nav className={`oa-basic-theme ${borderClass}`}>
-      <Box className="flex mx-auto max-w-7xl justify-between py-8 px-10">
-        <div className="relative z-10 flex items-center gap-16">
-          <Link href="/" aria-label="Home" className="flex items-center">
+      <Box className="relative z-10 flex justify-between px-4 py-4">
+        <div className="relative z-10 flex items-center gap-10">
+          <Link href={homeURL} aria-label="Home" className="flex items-center">
             <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
-            <span className="text-2xl font-bold ml-3">Open Assistant</span>
+            <Text fontFamily="inter" fontSize="2xl" fontWeight="bold" className="ml-3">
+              Open Assistant
+            </Text>
           </Link>
         </div>
         <div className="flex items-center gap-4">
-          <Popover className="lg:hidden">
-            {({ open }) => (
-              <>
-                <Popover.Button
-                  className="relative z-10 inline-flex items-center rounded-lg stroke-gray-900 p-2 hover:bg-gray-200/50 hover:stroke-gray-600 active:stroke-gray-900 [&:not(:focus-visible)]:focus:outline-none"
-                  aria-label="Toggle site navigation"
-                >
-                  {({ open }) => (open ? <ChevronUpIcon className="h-6 w-6" /> : <MenuIcon className="h-6 w-6" />)}
-                </Popover.Button>
-                <AnimatePresence initial={false}>
-                  {open && (
-                    <>
-                      <Popover.Overlay
-                        static
-                        as={motion.div}
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        className="fixed inset-0 z-1 bg-gray-300/60 backdrop-blur"
-                      />
-                      <Popover.Panel
-                        static
-                        as={motion.div}
-                        initial={{ opacity: 0, y: -32 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        exit={{
-                          opacity: 0,
-                          y: -32,
-                          transition: { duration: 0.2 },
-                        }}
-                        className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-white px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
-                      >
-                        <div className="space-y-4">
-                          <MobileNavLink href="/#join-us">Join Us</MobileNavLink>
-                          <MobileNavLink href="/#faqs">FAQs</MobileNavLink>
-                        </div>
-                        <div className="mt-8 flex flex-col gap-4"></div>
-                      </Popover.Panel>
-                    </>
-                  )}
-                </AnimatePresence>
-              </>
-            )}
-          </Popover>
           <AccountButton />
           <UserMenu />
-          <ColorModeIconToggle className="ml-5" />
         </div>
       </Box>
     </nav>

website/src/components/Header/NavLinks.tsx

@@ -1,7 +1,8 @@
-import { useColorMode } from "@chakra-ui/react";
+import { Text, useColorMode } from "@chakra-ui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Link from "next/link";
 import { useState } from "react";
+import { colors } from "styles/Theme/colors";
 
 export function NavLinks(): JSX.Element {
   const [hoveredIndex, setHoveredIndex] = useState(null);
@@ -14,8 +15,8 @@ export function NavLinks(): JSX.Element {
   return (
     <>
       {[
-        ["Join Us", "/#join-us"],
         ["FAQ", "/#faq"],
+        ["Join Us", "/#join-us"],
       ].map(([label, href], index) => (
         <Link
           key={label}
@@ -38,7 +39,9 @@ export function NavLinks(): JSX.Element {
               />
             )}
           </AnimatePresence>
-          <span className="relative z-10">{label}</span>
+          <Text color={colorMode === "light" ? colors.light.text : colors.dark.text} className="relative z-10">
+            {label}
+          </Text>
         </Link>
       ))}
     </>

website/src/components/Header/UserMenu.tsx

@@ -1,25 +1,33 @@
-import { Box, useColorModeValue } from "@chakra-ui/react";
+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 { signOut, useSession } from "next-auth/react";
 import React from "react";
-import { FaCog, FaSignOutAlt } from "react-icons/fa";
+import { FiLayout, FiLogOut, FiSettings } from "react-icons/fi";
 
 export function UserMenu() {
   const { data: session } = useSession();
-  const backgroundColor = useColorModeValue("#FFFFFF", "#000000");
+  const backgroundColor = useColorModeValue("white", "gray.700");
+  const accentColor = useColorModeValue("gray.300", "gray.600");
 
   if (!session) {
     return <></>;
   }
   if (session && session.user) {
     const accountOptions = [
+      {
+        name: "Dashboard",
+        href: "/dashboard",
+        desc: "Dashboard",
+        icon: FiLayout,
+        //For future use
+      },
       {
         name: "Account Settings",
         href: "/account",
         desc: "Account Settings",
-        icon: FaCog,
+        icon: FiSettings,
         //For future use
       },
     ];
@@ -28,18 +36,22 @@ export function UserMenu() {
         {({ open }) => (
           <>
             <Popover.Button aria-label="Toggle Account Options" className="flex">
-              <div className="flex items-center gap-4 p-1 lg:pr-6 rounded-full border border-slate-300/70 hover:bg-gray-200/50 transition-colors duration-300">
+              <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="40"
-                  height="40"
+                  width="36"
+                  height="36"
                   className="rounded-full"
                 ></Image>
                 <p data-cy="username" className="hidden lg:flex">
                   {session.user.name || session.user.email}
                 </p>
-              </div>
+              </Box>
             </Popover.Button>
             <AnimatePresence initial={false}>
               {open && (
@@ -54,35 +66,45 @@ export function UserMenu() {
                       y: -10,
                       transition: { duration: 0.2 },
                     }}
-                    className="absolute right-0 mt-3 w-screen bg-inherit max-w-xs p-4 rounded-md border border-slate-300/70"
                   >
-                    <Box className="flex flex-col gap-1">
-                      {accountOptions.map((item) => (
-                        <a
-                          key={item.name}
-                          href={item.href}
-                          aria-label={item.desc}
-                          className="flex items-center rounded-md hover:bg-gray-200/50"
+                    <Box
+                      bg={backgroundColor}
+                      borderWidth="1px"
+                      borderColor={accentColor}
+                      borderRadius="xl"
+                      className="absolute right-0 mt-3 w-screen max-w-xs p-4"
+                    >
+                      <Box className="flex flex-col gap-1">
+                        {accountOptions.map((item) => (
+                          <Link
+                            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 fontFamily="inter">{item.name}</Text>
+                            </div>
+                          </Link>
+                        ))}
+                        <Link
+                          className="flex items-center rounded-md cursor-pointer"
+                          _hover={{ textDecoration: "none" }}
+                          onClick={() => signOut({ callbackUrl: "/" })}
                         >
                           <div className="p-4">
-                            <item.icon aria-hidden="true" />
+                            <FiLogOut className="text-blue-500" />
                           </div>
                           <div>
-                            <p>{item.name}</p>
+                            <Text fontFamily="inter">Sign Out</Text>
                           </div>
-                        </a>
-                      ))}
-                      <a
-                        className="flex items-center rounded-md hover:bg-gray-100 cursor-pointer"
-                        onClick={() => signOut({ callbackUrl: "/" })}
-                      >
-                        <div className="p-4">
-                          <FaSignOutAlt />
-                        </div>
-                        <div>
-                          <p>Sign Out</p>
-                        </div>
-                      </a>
+                        </Link>
+                      </Box>
                     </Box>
                   </Popover.Panel>
                 </Box>

website/src/components/Layout.tsx

@@ -17,4 +17,12 @@ export const getDefaultLayout = (page: React.ReactElement) => (
   </div>
 );
 
+export const getTransparentHeaderLayout = (page: React.ReactElement) => (
+  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
+    <Header transparent={true} />
+    {page}
+    <Footer />
+  </div>
+);
+
 export const noLayout = (page: React.ReactElement) => page;

website/src/components/Roadmap.tsx

@@ -0,0 +1,78 @@
+import { Container } from "./Container";
+
+const Roadmap = () => {
+  return (
+    <Container className="">
+      <div className="py-32">
+        <h2 className="text-4xl mb-16">Our Roadmap</h2>
+        <div className="flex flex-col items-center space-y-8 md:space-y-0 md:items-start md:flex-row md:justify-between">
+          <div className="flex flex-col items-center space-y-4">
+            <div className="h-[5rem] w-[5rem] border-4 border-[#a72a1e] rounded-full flex items-center justify-center">
+              <p className="font-bold text-[#a72a1e] text-center">ASAP</p>
+            </div>
+            <h4 className="font-bold text-xl text-[#a72a1e] text-center max-w-[10rem]">Minimum Viable Prototype</h4>
+            <ul className="ml-6 md:ml-8 lg:ml-6 space-y-4 text-[#a72a1e] list-disc">
+              <li>Data Collection Pipeline</li>
+              <li>RL on Human Feedback</li>
+              <li>Assistant v1 usable</li>
+              <li>Out January 2023!</li>
+            </ul>
+          </div>
+          <div>
+            <span className="w-[4vw] h-[4px] mt-8 bg-[#a72a1e] rounded-full hidden md:block" />
+          </div>
+          <span className="w-[4px] h-16 bg-[#a72a1e] rounded-full block md:hidden" />
+          <div className="flex flex-col items-center space-y-4">
+            <div className="h-[5rem] w-[5rem] border-4 border-[#858585] rounded-full flex items-center justify-center">
+              <p className="font-bold text-[#858585] text-center">
+                Q1
+                <br />
+                2023
+              </p>
+            </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>Retrieval Augmentation</li>
+              <li>Rapid Personalization</li>
+              <li>Using External Tools</li>
+            </ul>
+          </div>
+          <div>
+            <span className="w-[4vw] h-[4px] mt-8 bg-[#858585] rounded-full hidden md:block" />
+          </div>
+          <span className="w-[4px] h-16 bg-[#858585] rounded-full block md:hidden" />
+          <div className="flex flex-col items-center space-y-4">
+            <div className="h-[5rem] w-[5rem] border-4 border-[#858585] rounded-full flex items-center justify-center">
+              <p className="font-bold text-[#858585] text-center">
+                Q2
+                <br />
+                2023
+              </p>
+            </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>Device Control</li>
+              <li>Multi-Modality</li>
+            </ul>
+          </div>
+          <div>
+            <span className="w-[4vw] h-[4px] mt-8 bg-[#858585] rounded-full hidden md:block" />
+          </div>
+          <span className="w-[4px] h-16 bg-[#858585] rounded-full block md:hidden" />
+          <div className="flex flex-col items-center space-y-4">
+            <div className="h-[5rem] w-[5rem] border-4 border-[#858585] rounded-full flex items-center justify-center">
+              <p className="font-bold text-[#858585] text-center">...</p>
+            </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>What do you need?</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </Container>
+  );
+};
+
+export default Roadmap;

website/src/components/Services.tsx

@@ -0,0 +1,50 @@
+import { Container } from "./Container";
+
+const Services = () => {
+  return (
+    <div className="bg-white py-32 border-t-[1px] border-gray-150">
+      <Container className="">
+        <div className="grid grid-cols-1 lg:grid-cols-10 lg:grid-rows-2">
+          <div className="grid col-span-3 row-span-2">
+            <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#307bf3] rounded-tl-[45px] lg:rounded-tl-none lg:rounded-bl-[45px] rounded-br-[45px] lg:rounded-br-none lg:rounded-tr-[45px]">
+              <h4 className="font-bold text-white text-xl mb-4">Your Conversational Assistant</h4>
+              <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
+              <p className="text-white">State-of-the-Art chat assistant that can be personalized to your needs</p>
+            </div>
+            <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#275ddf] rounded-tl-[45px] rounded-br-[45px]">
+              <h4 className="font-bold text-white text-xl mb-4">Interface w/ external systems</h4>
+              <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
+              <p className="text-white">
+                Usage of APIs and third-party applications, described via language & demonstrations.
+              </p>
+            </div>
+          </div>
+          <div className="grid grid-rows-2 col-span-3 row-span-2">
+            <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#307bf3] lg:bg-[#275ddf] rounded-tl-[45px] rounded-br-[45px]">
+              <h4 className="font-bold text-white text-xl mb-4">Retrieval via Search Engines</h4>
+              <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
+              <p className="text-white">External, upgradeable knowledge: No need for billions of parameters.</p>
+            </div>
+            <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#275ddf] lg:bg-[#307bf3] rounded-tl-[45px] lg:rounded-tl-none lg:rounded-bl-[45px] rounded-br-[45px] lg:rounded-br-none lg:rounded-tr-[45px]">
+              <h4 className="font-bold text-white text-xl mb-4">A building block for developers</h4>
+              <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
+              <p className="text-white">Integrate OpenAssistant into your application.</p>
+            </div>
+          </div>
+          <div className="px-12 sm:px-16 py-20 lg:p-20 col-span-4 row-span-2 bg-[#1a44a1] lg:flex lg:flex-col lg:justify-center rounded-tl-[45px] rounded-br-[45px] lg:rounded-tr-[80px] lg:rounded-tl-none lg:rounded-br-none">
+            <h4 className="font-bold text-white text-xl mb-4">OpenAssistant unifies all knowledge work in one place</h4>
+            <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
+            <ul className="ml-4 sm:ml-12 mt-8 space-y-4 list-disc text-white">
+              <li>Uses modern deep learning</li>
+              <li>Runs on consumer hardware</li>
+              <li>Trains on human feedback</li>
+              <li>Free and open</li>
+            </ul>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default Services;

website/src/components/Sortable/Sortable.tsx

@@ -18,6 +18,7 @@ import {
 } from "@dnd-kit/sortable";
 import { ReactNode, useEffect, useState } from "react";
 
+import { CollapsableText } from "../CollapsableText";
 import { SortableItem } from "./SortableItem";
 
 export interface SortableProps {
@@ -64,7 +65,7 @@ export const Sortable = (props: SortableProps) => {
         <Flex direction="column" gap={2} className={extraClasses}>
           {itemsWithIds.map(({ id, item }) => (
             <SortableItem key={id} id={id}>
-              {item}
+              <CollapsableText text={item} />
             </SortableItem>
           ))}
         </Flex>

website/src/components/Survey/TaskControls.tsx

@@ -30,9 +30,13 @@ export const TaskControls = (props: TaskControlsProps) => {
       <Flex justify="center" ml="auto" gap={2}>
         <SkipButton>Skip</SkipButton>
         {endTask.task.type !== "task_done" ? (
-          <SubmitButton onClick={() => props.onSubmitResponse(props.tasks[0])}>Submit</SubmitButton>
+          <SubmitButton data-cy="submit" onClick={() => props.onSubmitResponse(props.tasks[0])}>
+            Submit
+          </SubmitButton>
         ) : (
-          <SubmitButton onClick={props.onSkip}>Next Task</SubmitButton>
+          <SubmitButton data-cy="next-task" onClick={props.onSkip}>
+            Next Task
+          </SubmitButton>
         )}
       </Flex>
     </section>

website/src/components/TaskSelection/TaskSelection.tsx

@@ -26,6 +26,12 @@ export const TaskSelection = () => {
           title="Summarize stories"
           link="/create/summarize_story"
         /> */}
+        <TaskOption
+          alt="Create Initial Prompt"
+          img="/images/logos/logo.svg"
+          title="Create Initial Prompt"
+          link="/create/initial_prompt"
+        />
         <TaskOption alt="Reply as User" img="/images/logos/logo.svg" title="Reply as User" link="/create/user_reply" />
         <TaskOption
           alt="Reply as Assistant"

website/src/components/Vision.tsx

@@ -0,0 +1,25 @@
+import { Container } from "./Container";
+import Image from "next/image";
+
+const Vision = () => {
+  return (
+    <div className="bg-gray-900 py-20">
+      <Container className="">
+        <div className="grid gap-16 items-center py-20 md:py-32 lg:grid-cols-2">
+          <div>
+            <h2 className="text-4xl text-white mb-6">Our Vision</h2>
+            <p className="text-2xl text-gray-400">
+              We want OpenAssistant to be the single, unifying platform that all other systems use to interface with
+              humans.
+            </p>
+          </div>
+          <div className="m-auto rounded-tl-[45px] rounded-br-[45px] overflow-hidden">
+            <Image src="/images/temp-avatars/av2.jpg" width={450} height={450} alt="temp-image" />
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default Vision;

website/src/middleware.ts

@@ -4,5 +4,5 @@ export { default } from "next-auth/middleware";
  * Guards all pages under `/grading` and redirects them to the sign in page.
  */
 export const config = {
-  matcher: ["/create/:path*", "/evaluate/:path*", "/account/:path*"],
+  matcher: ["/create/:path*", "/evaluate/:path*", "/account/:path*", "/dashboard"],
 };

website/src/pages/about.tsx

@@ -0,0 +1,39 @@
+import { Container } from "src/components/Container";
+import Services from "src/components/Services";
+import Vision from "src/components/Vision";
+import Roadmap from "src/components/Roadmap";
+import { CallToAction } from "src/components/CallToAction";
+import Image from "next/image";
+
+const AboutPage = () => {
+  return (
+    <div>
+      <Container className="">
+        <div className="grid gap-16 items-center py-20 md:py-40 lg:grid-cols-2">
+          <div className="m-auto order-2 lg:order-1">
+            <Image src="/images/logos/logo.png" width={450} height={450} alt="temp-image" />
+          </div>
+          <div className="space-y-8 order-1 lg:order-2">
+            <div>
+              <h1 className="text-4xl mb-6">What is OpenAssistant?</h1>
+              <p className="text-2xl">
+                OpenAssistant is a chat-based assistant that understands tasks, can interact with third-party systems,
+                and retrieve information dynamically to do so.
+              </p>
+            </div>
+            <p className="text-2xl">
+              It can be extended and personalized easily and is developed as free, open-source software.
+            </p>
+          </div>
+        </div>
+      </Container>
+
+      <Services />
+      <Vision />
+      <Roadmap />
+      <CallToAction />
+    </div>
+  );
+};
+
+export default AboutPage;

website/src/pages/account/edit.tsx

@@ -7,6 +7,7 @@ import React, { useState } from "react";
 export default function Account() {
   const { data: session } = useSession();
   const [username, setUsername] = useState("");
+
   const updateUser = async (e: React.SyntheticEvent) => {
     e.preventDefault();
     try {
@@ -16,6 +17,7 @@ export default function Account() {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(body),
       });
+      session.user.name = username;
       await Router.push("/account");
     } catch (error) {
       console.error(error);
@@ -49,7 +51,6 @@ export default function Account() {
             </Button>
           </InputGroup>
         </form>
-        <p>{session.user.email}</p>
       </main>
     </>
   );

website/src/pages/api/username.tsx

@@ -1,4 +1,5 @@
 import { getSession } from "next-auth/react";
+import prisma from "../../lib/prismadb";
 
 // POST /api/post
 // Required fields in body: title

website/src/pages/auth/signin.tsx

@@ -15,13 +15,13 @@ function Signin({ csrfToken, providers }) {
   const emailEl = useRef(null);
   const signinWithEmail = (ev: React.FormEvent) => {
     ev.preventDefault();
-    signIn(email.id, { callbackUrl: "/", email: emailEl.current.value });
+    signIn(email.id, { callbackUrl: "/dashboard", email: emailEl.current.value });
   };
 
   const debugUsernameEl = useRef(null);
   function signinWithDebugCredentials(ev: React.FormEvent) {
     ev.preventDefault();
-    signIn(credentials.id, { callbackUrl: "/", username: debugUsernameEl.current.value });
+    signIn(credentials.id, { callbackUrl: "/dashboard", username: debugUsernameEl.current.value });
   }
 
   const { colorMode } = useColorMode();
@@ -52,8 +52,9 @@ function Signin({ csrfToken, providers }) {
           {email && (
             <form onSubmit={signinWithEmail}>
               <Stack>
-                <Input variant="outline" size="lg" placeholder="Email Address" ref={emailEl} />
+                <Input data-cy="email-address" variant="outline" size="lg" placeholder="Email Address" ref={emailEl} />
                 <Button
+                  data-cy="signin-email-button"
                   size={"lg"}
                   leftIcon={<FaEnvelope />}
                   type="submit"
@@ -97,7 +98,8 @@ function Signin({ csrfToken, providers }) {
             </Button>
           )}
         </Stack>
-        <div className="pt-10 text-center">
+        <hr className="mt-14 mb-4 h-px bg-gray-200 border-0" />
+        <div className="text-center">
           By signing up you agree to our <br></br>
           <Link href="/terms-of-service" aria-label="Terms of Service" className="hover:underline underline-offset-4">
             <b>Terms of Service</b>

website/src/pages/create/assistant_reply.tsx

@@ -65,7 +65,7 @@ const AssistantReply = () => {
           <p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
           <Messages messages={task.conversation.messages} post_id={task.id} />
         </>
-        <Textarea name="reply" placeholder="Reply..." ref={inputRef} />
+        <Textarea name="reply" data-cy="reply" placeholder="Reply..." ref={inputRef} />
       </TwoColumnsWithCards>
 
       <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />

website/src/pages/create/initial_prompt.tsx

@@ -0,0 +1,74 @@
+import { Container, Textarea } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
+import { useRef, useState } from "react";
+import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { TaskControls } from "src/components/Survey/TaskControls";
+import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
+import fetcher from "src/lib/fetcher";
+import poster from "src/lib/poster";
+import useSWRImmutable from "swr/immutable";
+import useSWRMutation from "swr/mutation";
+
+const InitialPrompt = () => {
+  const [tasks, setTasks] = useState([]);
+
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const { isLoading, mutate } = useSWRImmutable("/api/new_task/initial_prompt ", fetcher, {
+    onSuccess: (data) => {
+      setTasks([data]);
+    },
+  });
+
+  const { trigger } = useSWRMutation("/api/update_task", poster, {
+    onSuccess: async (data) => {
+      const newTask = await data.json();
+      setTasks((oldTasks) => [...oldTasks, newTask]);
+    },
+  });
+
+  const submitResponse = (task: { id: string }) => {
+    const text = inputRef.current.value.trim();
+    trigger({
+      id: task.id,
+      update_type: "text_reply_to_message",
+      content: {
+        text,
+      },
+    });
+  };
+
+  const fetchNextTask = () => {
+    inputRef.current.value = "";
+    mutate();
+  };
+
+  const { colorMode } = useColorMode();
+  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
+
+  if (isLoading) {
+    return <LoadingScreen text="Loading..." />;
+  }
+
+  if (tasks.length == 0) {
+    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+  }
+
+  const task = tasks[0].task;
+
+  return (
+    <div className={`p-12 ${mainBgClasses}`}>
+      <TwoColumnsWithCards>
+        <>
+          <h5 className="text-lg font-semibold">Start a conversation</h5>
+          <p className="text-lg py-1">Create an initial message to send to the assistant</p>
+        </>
+        <Textarea name="reply" data-cy="reply" placeholder="Question, task, greeting or similar..." ref={inputRef} />
+      </TwoColumnsWithCards>
+
+      <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
+    </div>
+  );
+};
+
+export default InitialPrompt;

website/src/pages/create/user_reply.tsx

@@ -72,7 +72,7 @@ const UserReply = () => {
           <Messages messages={task.conversation.messages} post_id={task.id} />
           {task.hint && <p className="text-lg py-1">Hint: {task.hint}</p>}
         </>
-        <Textarea name="reply" placeholder="Reply..." ref={inputRef} />
+        <Textarea name="reply" data-cy="reply" placeholder="Reply..." ref={inputRef} />
       </TwoColumnsWithCards>
 
       <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />

website/src/pages/dashboard.tsx

@@ -0,0 +1,37 @@
+import { Box, useColorMode } from "@chakra-ui/react";
+import Head from "next/head";
+import { Header } from "src/components/Header";
+import { LeaderboardTable, SideMenu, TaskOption } from "src/components/Dashboard";
+import { colors } from "styles/Theme/colors";
+
+const Dashboard = () => {
+  const { colorMode } = useColorMode();
+  return (
+    <>
+      <Head>
+        <title>Dashboard - Open Assistant</title>
+        <meta name="description" content="Chat with Open Assistant and provide feedback." />
+      </Head>
+      <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">
+            <SideMenu />
+          </Box>
+          <Box className="flex flex-col overflow-auto p-6 sm:pl-0 gap-14">
+            <TaskOption />
+            <LeaderboardTable />
+          </Box>
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+Dashboard.getLayout = (page) => (
+  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
+    <Header transparent={true} />
+    {page}
+  </div>
+);
+
+export default Dashboard;

website/src/pages/evaluate/rank_assistant_replies.tsx

@@ -1,7 +1,9 @@
 import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { useState } from "react";
+import { ContextMessages } from "src/components/ContextMessages";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { Message } from "src/components/Messages";
 import { Sortable } from "src/components/Sortable/Sortable";
 import { SurveyCard } from "src/components/Survey/SurveyCard";
 import { TaskControls } from "src/components/Survey/TaskControls";
@@ -64,6 +66,7 @@ const RankAssistantReplies = () => {
   }
 
   const replies = tasks[0].task.replies as string[];
+  const messages = tasks[0].task.conversation.messages as Message[];
 
   return (
     <>
@@ -77,6 +80,7 @@ const RankAssistantReplies = () => {
           <p className="text-lg py-1">
             Given the following replies, sort them from best to worst, best being first, worst being last.
           </p>
+          <ContextMessages messages={messages} />
           <Sortable items={replies} onChange={setRanking} className="my-8" />
         </SurveyCard>
 

website/src/pages/evaluate/rank_user_replies.tsx

@@ -1,7 +1,9 @@
 import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { useState } from "react";
+import { ContextMessages } from "src/components/ContextMessages";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { Message } from "src/components/Messages";
 import { Sortable } from "src/components/Sortable/Sortable";
 import { SurveyCard } from "src/components/Survey/SurveyCard";
 import { TaskControls } from "src/components/Survey/TaskControls";
@@ -63,6 +65,7 @@ const RankUserReplies = () => {
     );
   }
   const replies = tasks[0].task.replies as string[];
+  const messages = tasks[0].task.conversation.messages as Message[];
 
   return (
     <>
@@ -76,6 +79,7 @@ const RankUserReplies = () => {
           <p className="text-lg py-1">
             Given the following replies, sort them from best to worst, best being first, worst being last.
           </p>
+          <ContextMessages messages={messages} />
           <Sortable items={replies} onChange={setRanking} className="my-8" />
         </SurveyCard>
 

website/src/pages/index.tsx

@@ -1,15 +1,10 @@
 import Head from "next/head";
-import { useSession } from "next-auth/react";
 import { CallToAction } from "src/components/CallToAction";
 import { Faq } from "src/components/Faq";
-import { Footer } from "src/components/Footer";
-import { Header } from "src/components/Header";
 import { Hero } from "src/components/Hero";
-import { TaskSelection } from "src/components/TaskSelection";
+import { getTransparentHeaderLayout } from "src/components/Layout";
 
 const Home = () => {
-  const { data: session } = useSession();
-
   return (
     <>
       <Head>
@@ -19,25 +14,15 @@ const Home = () => {
           content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
         />
       </Head>
-      {session ? (
-        <TaskSelection />
-      ) : (
-        <main className="oa-basic-theme">
-          <Hero />
-          <CallToAction />
-          <Faq />
-        </main>
-      )}
+      <main className="oa-basic-theme">
+        <Hero />
+        <CallToAction />
+        <Faq />
+      </main>
     </>
   );
 };
 
-Home.getLayout = (page) => (
-  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
-    <Header transparent={true} />
-    {page}
-    <Footer />
-  </div>
-);
+Home.getLayout = getTransparentHeaderLayout;
 
 export default Home;

website/src/pages/privacy-policy.tsx

@@ -0,0 +1,409 @@
+import { Container, Heading } from "@chakra-ui/react";
+import Head from "next/head";
+import { Footer } from "src/components/Footer";
+import { Header } from "src/components/Header";
+import { getTransparentHeaderLayout } from "src/components/Layout";
+
+const PrivacyPolicy = () => {
+  return (
+    <>
+      <Head>
+        <title>Open Assistant Privacy Policy</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."
+        />
+      </Head>
+      <main>
+        <Container>
+          <Heading as="h1" size="3xl">
+            Privacy Policy
+          </Heading>
+          <Heading>Overview</Heading>
+
+          <Container>
+            We are pleased that you are interested in our work and welcome you to our website laion.ai. In this Privacy
+            Policy you will learn which personal data we process when you visit our website and to what kind of purpose,
+            and also what rights you have regarding these data. Categorically, we only store data as long as we need
+            them. There is no legal obligation to provide us with personal data. Automated decision-making, as per
+            Article 22 of the EU-GDPR, will not happen.
+          </Container>
+
+          <Heading>1. Definitions</Heading>
+
+          <Container>
+            We are required by law that personal data are processed lawfully, in good faith, and in a manner that can be
+            comprehended by the persons who are affected (“lawfulness, fair processing, transparency”). To this end, we
+            hereby inform you about the individual legal definitions of the European General Data Protection Regulation
+            (GDPR) and the new German Federal Data Protection Act, which are also used in these data privacy
+            regulations.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            1.1 Personal data
+          </Heading>
+
+          <Container>
+            &apos;Personal data&apos; means any information relating to an identified or identifiable natural person
+            (hereinafter the &apos;data subject&apos;). A natural person is considered to be identifiable if he or she
+            can be identified directly or indirectly, in particular by association with an identifier such as a name, an
+            identification number, location data, an online identifier, or one or more special features which express
+            the physical, physiological, genetic, mental, economic, cultural or social identity of the natural person.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            1.2 Restriction of processing
+          </Heading>
+
+          <Container>
+            &apos;Restriction of processing&apos; means the marking of stored personal data with the aim of limiting its
+            processing in the future.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            1.3 Profiling
+          </Heading>
+
+          <Container>
+            &apos;Profiling&apos; means any form of automated processing of personal data consisting of the use of
+            personal data to evaluate certain personal aspects relating to a natural person, in particular to analyse or
+            predict aspects concerning that natural person&apos;s performance at work, economic situation, health,
+            personal preferences, interests, reliability, behaviour, location or movements.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            1.4 Pseudonymization
+          </Heading>
+
+          <Container>
+            &apos;Pseudonymization&apos; means the processing of personal data in such a manner that the personal data
+            can no longer be attributed to a specific data subject without the use of additional information, provided
+            that such additional information is kept separately and is subject to technical and organizational measures
+            to ensure that the personal data is not attributed to an identified or identifiable natural person
+          </Container>
+
+          <Heading as="h3" size="lg">
+            1.5 Filing system
+          </Heading>
+
+          <Container>
+            &apos;Filing system&apos; means any structured set of personal data which is accessible according to
+            specific criteria, whether centralized, decentralized or dispersed on a functional or geographical basis.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            1.6 Controller
+          </Heading>
+
+          <Container>
+            &apos;Controller&apos; means the natural or legal person, public authority, agency or other body which,
+            alone or jointly with others, determines the purposes and means of the processing of personal data. Where
+            the purposes and means of such processing are determined by European Union or Member State law, the
+            controller or the specific criteria for its nomination may be provided for by European Union or Member State
+            law.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            1.7 Processor
+          </Heading>
+
+          <Container>
+            &apos;Processor&apos; means a natural or legal person, public authority, agency or other body which
+            processes personal data on behalf of the controller.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            1.8 Recipient
+          </Heading>
+
+          <Container>
+            &apos;Recipient&apos; means a natural or legal person, public authority, agency or another body, to which
+            the personal data is disclosed, whether a third party or not. However, public authorities which may receive
+            potentially personal data in the framework of a particular inquiry in accordance with European Union or
+            Member State law shall not be regarded as recipients. The processing of that data by those public
+            authorities shall be in compliance with the applicable data protection rules according to the purposes of
+            the processing.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            1.9 Third party
+          </Heading>
+
+          <Container>
+            A &apos;third party&apos; means a natural or legal person, public authority, agency or body other than the
+            data subject, controller, processor and persons who, under the direct authority of the controller or
+            processor, are authorized to process personal data.
+          </Container>
+
+          <Heading>2. Responsible controller</Heading>
+
+          <Container>Responsible controller is: LAION e.V., Marie-Henning-Weg 143, 21035 Hamburg, Germany</Container>
+
+          <Heading>3. Data we collect</Heading>
+
+          <Container>Open Assistant tracks data in the following conditions</Container>
+
+          <Heading as="h3" size="lg">
+            3.1 Using the Discord Bot
+          </Heading>
+
+          <Container>
+            When using the Open Assistant Discord bot, we privately track and store the unique Discord ID of the user
+            submitting responses. Each submitted response is associated with the user’s Discord ID.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            3.1 Using the Website
+          </Heading>
+
+          <Container>
+            When a user registers an account with the website we privately track and store either the unique Discord ID
+            of the user or the unique Email of the registered user. When a user submits responses we store:
+            <ol>
+              <li> When registered using Discord, we associate the unique Discord ID with each submitted response</li>
+              <li> When registered using Email, we associate a unique pseudonymous ID with each submitted response</li>
+            </ol>
+          </Container>
+          <Heading>4. Inquiries</Heading>
+
+          <Container>
+            When you contact us via e-mail, telephone or telefax, your inquiry, including all personal data arising
+            thereof will be stored by us for the purpose of processing your request. We will not pass on these data
+            without your consent. The processing of these data is based on Article 6 (1) (1) (b) GDPR, if your inquiry
+            is related to the fulfilment of a contract concluded with us or required for the implementation of
+            pre-contractual measures. Furthermore, the processing is based on Article 6 (1) (1) (f) GDPR, because we
+            have a legitimate interest in the effective handling of requests sent to us. In addition, according to
+            Article 6 (1) (1) (c) GDPR we are also entitled to the processing of the above-mentioned data, because we
+            are legally bound to enable fast electronic contact and immediate communication. Of course, your data will
+            only be used strictly according to purpose and only for processing and responding to your request. After
+            final processing, your data will immediately be anonymized or deleted, unless we are bound by a legally
+            prescribed storage period.
+          </Container>
+
+          <Heading>5. Processors</Heading>
+
+          <Container>
+            In principle, we will never pass on your personal data to third parties without your explicit consent.
+            However, just as every modern business we cooperate with data processors in order to be able to offer you
+            the best possible uninterrupted service. When we cooperate with external service providers, regular order
+            processing is performed, based on Article 28 GDPR. For this purpose, we enter into respective agreements
+            with our partners, in order to safeguard the protection of your data. For processing your data, we only use
+            carefully selected processors. They are bound by our instructions, and regularly controlled by us. We only
+            commission external service provider who have guaranteed that all data processing procedures are performed
+            in unison with data protection regulations. Receivers of personal data may be: Hosting companies and Hosting
+            service providers
+          </Container>
+
+          <Heading>6. Children and young people</Heading>
+
+          <Container>
+            In principle, our offer is directed towards adults. Children and young people under the age of 16 are not
+            allowed to transmit personal data to us without the consent of their parents or legal guardians.
+          </Container>
+
+          <Heading>7. Your rights</Heading>
+
+          <Container>
+            If your personal data is processed on the basis of consent which you have given us, you have the right to
+            revoke your consent at any time. The revocation of consent does not affect the legality of the processing
+            performed on the basis of the consent until the time of revocation. You can contact us at any time to
+            exercise your right to revoke consent.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            7.2 Right to confirmation
+          </Heading>
+
+          <Container>
+            You have the right to request confirmation from the controller that we are processing personal data
+            concerning you. You can request this confirmation at any time using the contact details above.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            7.3 Right to information
+          </Heading>
+
+          <Container>
+            In the event that personal data is processed, you can request information about this personal data and the
+            following information at any time: the purposes of the processing, the categories of personal data being
+            processed, the recipients or categories of recipients to whom the personal data has been or is being
+            disclosed, in particular in the case of recipients in third countries or international organizations, if
+            possible, the planned duration for which the personal data is stored or, if this is not, possible, the
+            criteria for determining this duration, the existence of a right to rectification or erasure of the personal
+            data concerning you, or to a restriction of processing by the controller or a right to object to such
+            processing, the existence of a right to lodge a complaint with a supervisory authority, if the personal data
+            is not collected from the data subject, all available information on the source of the data, the existence
+            of automated decision-making, including profiling, in accordance with Article 22 (1) and (4) GDPR and, at
+            least in these cases, meaningful information about the logic involved and the scope and intended impact of
+            such processing on the data subject. If personal data is transferred to a third country or to an
+            international organization, you have the right to be informed of the appropriate safeguards under Article 46
+            of the GDPR in connection with the transfer. We provide a copy of the personal data that is the subject of
+            the processing. For any additional copies you request of a person, we may charge a reasonable fee based on
+            our administrative costs. If your request is submitted electronically, the information must be provided in a
+            standard electronic format, unless otherwise stated. The right to receive a copy under paragraph 3 shall not
+            affect the rights and freedoms of others.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            7.4 Right to rectification
+          </Heading>
+
+          <Container>
+            You have the right to demand the immediate correction of incorrect personal data concerning you. Taking into
+            account the purposes of processing, you have the right to request the completion of incomplete personal
+            data, including by means of a supplementary statement.{" "}
+          </Container>
+
+          <Heading as="h3" size="lg">
+            7.4 Right to rectification
+          </Heading>
+
+          <Container>
+            You have the right to demand the immediate correction of incorrect personal data concerning you. Taking into
+            account the purposes of processing, you have the right to request the completion of incomplete personal
+            data, including by means of a supplementary statement.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            7.5 Right to erasure (“right to be forgotten“)
+          </Heading>
+
+          <Container>
+            You have the right to demand that the controller erase personal data concerning you without undue delay, and
+            we are obligated to erase personal data without undue delay where one of the following grounds applies: the
+            personal data are no longer necessary in relation to the purposes for which they were collected or otherwise
+            processed, the data subject withdraws the consent on which the processing is based according to point (a) of
+            Article 6(1), or point (a) of Article 9(2), and there is no other legal ground for the processing, the data
+            subject objects to the processing pursuant to Article 21(1) GDPR and there are no overriding legitimate
+            grounds for the processing, or the data subject objects to the processing pursuant to Article 21(2) GDPR,
+            the personal data have been unlawfully processed, personal data must be erased for compliance with a legal
+            obligation in Union or Member State law to which the controller is subject, the personal data was collected
+            in relation to the offer of information society services referred to in Article 8(1) GDPR. If the controller
+            has made the personal data public and is obliged pursuant to paragraph 1 to erase the personal data, the
+            controller, taking account of available technology and the cost of implementation, shall take reasonable
+            steps, including technical measures, to inform controllers which are processing the personal data that the
+            data subject has requested the erasure by such controllers of any links to, or copy or replication of, that
+            personal data. The right to erasure (“right to be forgotten“) does not apply to the extent that the
+            processing is necessary: to exercise the right of freedom of expression and information, for compliance with
+            a legal obligation which requires processing by Union or Member, State law to which the controller is
+            subject or for the performance of a task carried out in the public interest or in the exercise of official
+            authority vested in the controller, for reasons of public interest in the area of public health in
+            accordance with points (h) and (i) of Article 9(2) as well as Article 9(3) GDPR, for archiving purposes in
+            the public interest, scientific or historical research purposes or statistical purposes in accordance with
+            Article 89(1) GDPR in so far as the right referred to in paragraph 1 is likely to render impossible or
+            seriously impair the achievement of the objectives of that processing; or for the establishment, exercise or
+            defense of legal claims
+          </Container>
+
+          <Heading as="h3" size="lg">
+            7.6 Right to restriction of processing
+          </Heading>
+
+          <Container>
+            You have the right to request that we restrict the processing of your personal data if any of the following
+            conditions apply: the accuracy of the personal data is contested by the data subject, for a period enabling
+            the controller to verify the accuracy of the personal data, the processing is unlawful and the data subject
+            opposes the erasure of the personal data and requests the restriction of their use instead, the controller
+            no longer needs the personal data for the purposes of the processing, but the data is required by the data
+            subject for the establishment, exercise or defense of legal claims, or the data subject has objected to
+            processing pursuant to Article 21(1) GDPR pending the verification whether the legitimate grounds of the
+            controller override those of the data subject In the event that processing has been restricted under the
+            aforementioned conditions, this personal data shall – with the exception of storage – only be processed with
+            the data subject’s consent or for the establishment, exercise or defense of legal claims or for the
+            protection of the rights of another natural or legal person or for reasons of important public interest of
+            the Union or of a Member State. In order to exercise the right to restrict processing, the data subject may
+            contact us at any time using the contact details provided above.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            7.7 Right to data portability
+          </Heading>
+
+          <Container>
+            You have the right to receive the personal data concerning you which you have provided to us in a
+            structured, commonly used and machine-readable format and have the right to transmit that data to another
+            controller without hindrance from the controller to which the personal data have been provided, to the
+            extent that: the processing is based on consent pursuant to point (a) of Article 6 (1) or point (a) of
+            Article 9 (2) or on a contract pursuant to point (b) of Article 6 (1) GDPR and the processing is carried out
+            by automated means. In exercising your right to data portability pursuant to paragraph 1, you have the right
+            to have the personal data transmitted directly from one controller to another, to the extent that this is
+            technically feasible. The exercise of the right to data portability does not affect your right to erasure
+            (“right to be forgotten”). That right shall not apply to processing necessary for the performance of a task
+            carried out in the public interest or in the exercise of official authority vested in the controller.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            7.8 Right to object
+          </Heading>
+
+          <Container>
+            You have the right to object, on grounds relating to your particular situation, at any time to processing of
+            personal data which concerns you which is based on point (e) or (f) of Article 6 (1) GDPR, including
+            profiling based on those provisions. If objection is made, the controller will no longer process the
+            personal data unless the controller demonstrates compelling legitimate grounds for the processing which
+            override the interests, rights and freedoms of the data subject or for the establishment, exercise or
+            defense of legal claims. In the event that personal data is processed for direct marketing purposes, you
+            have the right to object at any time to processing of personal data concerning you for such marketing. This
+            also applies to profiling to the extent that it is related to such direct marketing. If you object to
+            processing for direct marketing purposes, your personal data shall no longer be processed for such purposes.
+            Regarding the use of information society services, and notwithstanding Directive 2002/58/EC, you can
+            exercise your right to object by automated means using technical specifications. Where personal data are
+            processed for scientific or historical research purposes or statistical purposes pursuant to Article 89 (1),
+            you, on grounds relating to your particular situation, have the right to object to processing of personal
+            data concerning you, unless the processing is necessary for the performance of a task carried out for
+            reasons of public interest. The right of objection can be exercised at any time by contacting the respective
+            controller.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            7.9 Automated individual decision-making, including profiling
+          </Heading>
+
+          <Container>
+            You have the right not to be subject to a decision based solely on automated processing, including
+            profiling, which produces legal effects for you or similarly significantly affects you. This does not apply
+            if the decision: is necessary for entering into, or performance of, a contract between the data subject and
+            a data controller, is authorized by Union or Member State law to which the controller is subject and which
+            also lays down suitable measures to safeguard the data subject’s rights and freedoms and legitimate
+            interests, or is based on the data subject’s explicit consent. The controller shall implement suitable
+            measures to safeguard the data subject’s rights and freedoms and legitimate interests, at least the right to
+            obtain human intervention on the part of the controller, to express his or her point of view and to contest
+            the decision. This right can be exercised by the data subject at any time by contacting the respective
+            controller.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            7.10 Right to lodge a complaint with a supervisory authority
+          </Heading>
+
+          <Container>
+            You also have the right, without prejudice to any other administrative or judicial remedy, to lodge a
+            complaint with a supervisory authority, in particular in the Member State of your habitual residence, place
+            of work or place of the alleged infringement if you as data subject consider that the processing of personal
+            data relating to you infringes this Regulation.
+          </Container>
+
+          <Heading as="h3" size="lg">
+            7.11 Right to effective judicial remedy
+          </Heading>
+
+          <Container>
+            Without prejudice to any other available administrative or judicial remedy, including the right to lodge a
+            complaint with a supervisory authority pursuant to Article 77 GDPR, you have the right to an effective
+            judicial remedy if you consider that your rights under this Regulation have been infringed as a result of
+            the processing of your personal data in breach of this Regulation.
+          </Container>
+
+          <Heading>Submitting requests</Heading>
+          <Container>
+            Email <a href="mailto:privacy@open-assistant.io">privacy@open-assistant.io</a>
+          </Container>
+        </Container>
+      </main>
+    </>
+  );
+};
+
+PrivacyPolicy.getLayout = getTransparentHeaderLayout;
+
+export default PrivacyPolicy;

website/src/pages/terms-of-service.tsx

@@ -0,0 +1,154 @@
+import { Container, Heading } from "@chakra-ui/react";
+import Head from "next/head";
+import { Footer } from "src/components/Footer";
+import { Header } from "src/components/Header";
+import { getTransparentHeaderLayout } from "src/components/Layout";
+
+const TermsOfService = () => {
+  return (
+    <>
+      <Head>
+        <title>Open Assistant Terms of Service</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."
+        />
+      </Head>
+      <main>
+        <Container>
+          <Heading as="h1" size="3xl">
+            Terms Of Service
+          </Heading>
+          <Heading>1. Scope of application, amendments</Heading>
+          <Container>
+            1.1. LAION (association in formation), Marie-Henning-Weg 143, 21035 Hamburg (hereinafter referred to as:
+            &quot;LAION&quot;) operates an online portal for the producing a machine learning model called Open
+            Assistant using crowdsourced data.
+          </Container>
+          <Container>
+            1.2. The present terms of use regulate the user relationship between the users of the portal and LAION.
+          </Container>
+          <Container>
+            1.3. LAION reserves the right to amend these Terms of Use at any time, also with regard to persons already
+            registered, if this becomes necessary due to changes in the law, changes in jurisdiction, changes in
+            economic circumstances or gaps in these Terms of Use that subsequently become apparent. The user will be
+            informed of such changes in good time by e-mail The user has the opportunity to object to the changes within
+            14 days of receipt of this e-mail. If the user does not object to the changes and continues to use the
+            portal after expiry of the objection period, the changes shall be deemed to have been agreed effectively
+            from the expiry of the period. If the user objects to the changes within the two-week period, LAION shall be
+            entitled to exclude the user from using the portal. The user shall be informed of these effects once again
+            in the e-mail.
+          </Container>
+          <Heading>2. Subject of use, availability of the service</Heading>
+          <Container>
+            2.1. The portal serves as a platform for creating data to train an interactive agent for scientific
+            purposes. All text and prompt generated through the service are used for scientific purposes, in particular
+            for the optimization of the AI.
+          </Container>
+          <Container>
+            2.2. The input of texts on the portal and the subsequent generation of text by the artificial intelligence
+            provided by the portal do not give rise to any works protected by copyright. The user who has entered the
+            text for the generation of the text shall have neither the exclusive rights of use nor any rights of an
+            author to the generated text.
+          </Container>
+          <Container>
+            2.3. LAION shall endeavour to ensure that the portal can be used as uninterruptedly as possible. However,
+            there shall be no legal claim to the use of the portal. LAION reserves the right, at its own discretion, to
+            change the portal at any time and without notice, to discontinue its operation or to exclude individual
+            users from using it. Furthermore, it cannot be ruled out that temporary restrictions or interruptions may
+            occur due to technical faults (such as interruption of the power supply, hardware and software errors,
+            technical problems in the data lines).
+          </Container>
+          <Heading>3. User obligations</Heading>
+          <Container>
+            3.1. The user may only use the portal for the intended purposes. In particular, he/she may not misuse the
+            portal. The user undertakes to refrain from generating text that violate criminal law, youth protection
+            regulations or the applicable laws of the following countries: Federal Republic of Germany, United States of
+            America (USA), Great Britain, user&apos;s place of residence. In particular it is prohibited to enter texts
+            that lead to the creation of pornographic, violence-glorifying or paedosexual content and/or content that
+            violates the personal rights of third parties. LAION reserves the right to file a criminal complaint with
+            the competent authorities in the event of violations.
+          </Container>
+          <Container>
+            3.2. The user undertakes not to use any programs, algorithms or other software in connection with the use of
+            the portal which could interfere with the functioning of the portal. Furthermore, the user shall not take
+            any measures that may result in an unreasonable or excessive load on the infrastructure of the portal or may
+            interfere with it in a disruptive manner.
+          </Container>
+          <Container>
+            3.3. If a user notices obvious errors in the portal which could lead to misuse of the portal or the contents
+            contained therein, the user shall be obliged to report the error to LAION without delay.
+          </Container>
+          <Container>
+            3.4. The use, distribution, storage, forwarding, editing and/or other use of images that violate these terms
+            of use is prohibited.
+          </Container>
+          <Heading>4. Liability</Heading>
+          <Container>
+            4.1. LAION accepts no liability for the accuracy, completeness, reliability, up-to-dateness and usability of
+            the content.
+          </Container>
+          <Container>
+            4.2. LAION shall be liable without limitation for intent and gross negligence. In the case of simple
+            negligence, LAION shall only be liable for damage resulting from injury to life, limb or health or an
+            essential contractual obligation (obligation the fulfillment of which makes the proper performance of the
+            contract possible in the first place and on the observance of which the contractual partner regularly trusts
+            and may trust).
+          </Container>
+          <Container>
+            4.3. In the event of a breach of material contractual obligations due to simple negligence, the liability of
+            LAION shall be limited to the amount of the foreseeable, typically occurring damage. In all other respects
+            liability shall be excluded.
+          </Container>
+          <Container>
+            4.4. The above limitations of liability shall also apply in favour of the legal representatives and
+            vicarious agents of LAION.
+          </Container>
+          <Container>
+            4.5. LAION shall not be liable for the loss of data of the user. The user shall be solely responsible for
+            the secure storage of his/her data.
+          </Container>
+          <Container>
+            4.6 LAION shall not be liable for any damages incurred by the user as a result of the violation of these
+            terms of use.
+          </Container>
+          <Container>
+            4.7 LAION shall not be liable for the use of content generated on the portal by text input outside the
+            portal. In particular, LAION shall not be liable for any damages incurred by the user due to the assumption
+            of copyrights or exclusive rights of use.
+          </Container>
+          <Heading>5. Data protection</Heading>
+          <Container>
+            5.1. LAION processes the personal data of users in accordance with the provisions of data protection law.
+            Detailed information can be found in the privacy policy, available at: /privacy-policy.
+          </Container>
+          <Container>
+            5.2 The user expressly agrees that communication within the scope of and for the purpose of the user
+            relationship between him/her and LAION may also take place via unencrypted e-mails. The user is aware that
+            unencrypted e-mails only offer limited security and confidentiality.
+          </Container>
+          <Heading>6. Final provisions</Heading>
+          <Container>
+            6.1 The contractual relationship shall be governed exclusively by the law of the Federal Republic of Germany
+            to the exclusion of the UN Convention on Contracts for the International Sale of Goods.
+          </Container>
+          <Container>
+            6.2 Should individual provisions of these GTC including this provision be or become invalid in whole or in
+            part, the validity of the remaining provisions shall remain unaffected. The invalid or missing provisions
+            shall be replaced by the respective statutory provisions.
+          </Container>
+          <Container>
+            6.3 If the customer is a merchant, a legal entity under public law or a special fund under public law, the
+            place of jurisdiction for all disputes arising from and in connection with contracts concluded under these
+            terms of use shall be the registered office of LAION.
+          </Container>
+          <Container>Status: 1st January 2023</Container>
+        </Container>
+      </main>
+    </>
+  );
+};
+
+TermsOfService.getLayout = getTransparentHeaderLayout;
+
+export default TermsOfService;

website/src/styles/Theme/index.ts

@@ -14,6 +14,14 @@ const components = {
   Container: containerTheme,
 };
 
+const breakpoints = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px",
+};
+
 const styles: Styles = {
   global: (props) => ({
     "*": {
@@ -34,4 +42,4 @@ const styles: Styles = {
   }),
 };
 
-export const theme = extendTheme({ colors, config, styles, components });
+export const theme = extendTheme({ colors, config, styles, components, breakpoints });