Implement rank_assistant_replies in web

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/Sortable/SortableItem.tsx

@@ -1,5 +1,5 @@
 import { ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/20/solid";
-import { Button } from "src/components/Button";
+import { Button } from "@chakra-ui/react";
 import clsx from "clsx";
 
 export interface SortableItemProps {
@@ -33,11 +33,7 @@ interface ArrowButtonProps {
 
 const ArrowButton = ({ children, active, onClick }: ArrowButtonProps) => {
   return (
-    <Button
-      className={clsx("justify-center", active ? "hover:bg-indigo-200" : "opacity-10")}
-      onClick={onClick}
-      disabled={!active}
-    >
+    <Button justifyContent="center" variant="ghost" onClick={onClick} disabled={!active}>
       {children}
     </Button>
   );

website/src/components/TaskSelection/TaskSelection.tsx

@@ -40,6 +40,12 @@ export const TaskSelection = () => {
           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>
   );