Merge https://github.com/LAION-AI/Open-Assistant into dark-mode-implementation

website/src/components/Button.tsx

@@ -1,19 +0,0 @@
-import clsx from "clsx";
-
-export const Button = (
-  props: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
-) => {
-  const { className, children, ...rest } = props;
-  return (
-    <button
-      type="button"
-      className={clsx(
-        "inline-flex items-center rounded-md border border-transparent px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2",
-        className
-      )}
-      {...rest}
-    >
-      {children}
-    </button>
-  );
-};

website/src/components/Buttons/Skip.tsx

@@ -0,0 +1,9 @@
+import { Button, ButtonProps } from "@chakra-ui/react";
+
+export const SkipButton = ({ children, ...props }: ButtonProps) => {
+  return (
+    <Button size="lg" variant="outline" {...props}>
+      {children}
+    </Button>
+  );
+};

website/src/components/Buttons/Submit.tsx

@@ -0,0 +1,9 @@
+import { Button, ButtonProps } from "@chakra-ui/react";
+
+export const SubmitButton = ({ children, ...props }: ButtonProps) => {
+  return (
+    <Button size="lg" variant="solid" {...props}>
+      {children}
+    </Button>
+  );
+};

website/src/components/CircleBackground.tsx

@@ -1,7 +1,7 @@
 import { useId } from "react";
 
 export function CircleBackground({ color, width = 558, height = 558, ...props }) {
-  let id = useId();
+  const id = useId();
 
   return (
     <svg viewBox="0 0 558 558" width={width} height={height} fill="none" aria-hidden="true" {...props}>

website/src/components/Footer.tsx

@@ -34,17 +34,19 @@ export function Footer() {
                 </Link>
               </div>
             </div>
-            <div className="flex flex-col text-sm leading-7">
-              <b>Legal</b>
-              <div className="flex flex-col leading-5">
-                <Link href="#" aria-label="Privacy Policy" className="hover:underline underline-offset-2">
-                  Privacy Policy
-                </Link>
-                <Link href="#" aria-label="Terms of Service" className="hover:underline underline-offset-2">
-                  Terms of Service
-                </Link>
+            <nav className="flex justify-center gap-20">
+              <div className="flex flex-col text-sm leading-7">
+                <b>Information</b>
+                <div className="flex flex-col leading-5">
+                  <Link href="#" aria-label="Our Team" className="hover:underline underline-offset-2">
+                    Our Team
+                  </Link>
+                  <Link href="/#join-us" aria-label="Join Us" className="hover:underline underline-offset-2">
+                    Join Us
+                  </Link>
+                </div>
               </div>
-            </div>
+            </nav>
             <div className="flex flex-col text-sm leading-7">
               <b>Connect</b>
               <div className="flex flex-col leading-5">

website/src/components/Header/Header.tsx

@@ -100,8 +100,8 @@ export function Header(props) {
                         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>
+                          <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>

website/src/components/Header/NavLinks.tsx

@@ -3,13 +3,13 @@ import Link from "next/link";
 import { AnimatePresence, motion } from "framer-motion";
 
 export function NavLinks(): JSX.Element {
-  let [hoveredIndex, setHoveredIndex] = useState(null);
+  const [hoveredIndex, setHoveredIndex] = useState(null);
 
   return (
     <>
       {[
-        ["Join Us", "#join-us"],
-        ["FAQ", "#faq"],
+        ["Join Us", "/#join-us"],
+        ["FAQ", "/#faq"],
       ].map(([label, href], index) => (
         <Link
           key={label}

website/src/components/Header/UserMenu.tsx

@@ -3,7 +3,7 @@ import { signOut, useSession } from "next-auth/react";
 import Image from "next/image";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
-import { FaCog, FaSignOutAlt, FaGithub } from "react-icons/fa";
+import { FaCog, FaSignOutAlt } from "react-icons/fa";
 import { Box, useColorModeValue } from "@chakra-ui/react";
 
 export function UserMenu() {

website/src/components/Layout.tsx

@@ -5,7 +5,7 @@ import type { NextPage } from "next";
 import { Footer } from "./Footer";
 import { Header } from "src/components/Header";
 
-export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+export type NextPageWithLayout<P = unknown, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: React.ReactElement) => React.ReactNode;
 };
 

website/src/components/Sortable/Sortable.tsx

@@ -0,0 +1,48 @@
+import { ReactNode, useEffect, useState } from "react";
+import { SortableItem } from "./SortableItem";
+
+export interface SortableProps {
+  items: ReactNode[];
+  onChange: (newSortedIndices: number[]) => void;
+}
+
+export const Sortable = ({ items, onChange }) => {
+  const [sortOrder, setSortOrder] = useState<number[]>([]);
+
+  const update = (newRanking: number[]) => {
+    setSortOrder(newRanking);
+    onChange(newRanking);
+  };
+
+  useEffect(() => {
+    const indices = Array.from({ length: items.length }).map((_, i) => i);
+    setSortOrder(indices);
+    onChange(indices);
+  }, [items, onChange]);
+
+  return (
+    <ul className="flex flex-col gap-4">
+      {sortOrder.map((rank, i) => (
+        <SortableItem
+          key={`${rank}`}
+          canIncrement={i > 0}
+          onIncrement={() => {
+            const newRanking = sortOrder.slice();
+            const newIdx = i - 1;
+            [newRanking[i], newRanking[newIdx]] = [newRanking[newIdx], newRanking[i]];
+            update(newRanking);
+          }}
+          canDecrement={i < sortOrder.length - 1}
+          onDecrement={() => {
+            const newRanking = sortOrder.slice();
+            const newIdx = i + 1;
+            [newRanking[i], newRanking[newIdx]] = [newRanking[newIdx], newRanking[i]];
+            update(newRanking);
+          }}
+        >
+          {items[rank]}
+        </SortableItem>
+      ))}
+    </ul>
+  );
+};

website/src/components/Sortable/SortableItem.tsx

@@ -0,0 +1,40 @@
+import { ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/20/solid";
+import { Button } from "@chakra-ui/react";
+import clsx from "clsx";
+
+export interface SortableItemProps {
+  canIncrement: boolean;
+  canDecrement: boolean;
+  onIncrement: () => void;
+  onDecrement: () => void;
+  children: React.ReactNode;
+}
+
+export const SortableItem = ({ canIncrement, canDecrement, onIncrement, onDecrement, children }: SortableItemProps) => {
+  return (
+    <li className="grid grid-cols-[min-content_1fr] items-center rounded-lg shadow-md gap-x-2 p-2">
+      <ArrowButton active={canIncrement} onClick={onIncrement}>
+        <ArrowUpIcon width={28} />
+      </ArrowButton>
+      <span style={{ gridRow: "span 2" }}>{children}</span>
+
+      <ArrowButton active={canDecrement} onClick={onDecrement}>
+        <ArrowDownIcon width={28} />
+      </ArrowButton>
+    </li>
+  );
+};
+
+interface ArrowButtonProps {
+  active: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}
+
+const ArrowButton = ({ children, active, onClick }: ArrowButtonProps) => {
+  return (
+    <Button justifyContent="center" variant="ghost" onClick={onClick} disabled={!active}>
+      {children}
+    </Button>
+  );
+};

website/src/components/TaskInfo/TaskInfo.tsx

@@ -0,0 +1,10 @@
+export const TaskInfo = ({ id, output }: { id: string; output: any }) => {
+  return (
+    <div className="grid grid-cols-[min-content_auto] gap-x-2 text-gray-700">
+      <b>Prompt</b>
+      <span>{id}</span>
+      <b>Output</b>
+      <span>{output}</span>
+    </div>
+  );
+};

website/src/components/TaskSelection/TaskSelection.tsx

@@ -34,6 +34,18 @@ export const TaskSelection = () => {
           title="Rank Initial Prompts"
           link="/evaluate/rank_initial_prompts"
         />
+        <TaskOption
+          alt="Rank User Replies"
+          img="/images/logos/logo.svg"
+          title="Rank User Replies"
+          link="/evaluate/rank_user_replies"
+        />
+        <TaskOption
+          alt="Rank Assistant Replies"
+          img="/images/logos/logo.svg"
+          title="Rank Assistant Replies"
+          link="/evaluate/rank_assistant_replies"
+        />
       </TaskOptions>
     </Flex>
   );