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>
   );

website/src/pages/create/assistant_reply.tsx

@@ -1,4 +1,4 @@
-import { Textarea } from "@chakra-ui/react";
+import { Flex, Textarea } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 import useSWRMutation from "swr/mutation";
 import useSWRImmutable from "swr/immutable";
@@ -6,11 +6,12 @@ import useSWRImmutable from "swr/immutable";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 
-import { Button } from "src/components/Button";
 import { Messages } from "src/components/Messages";
 import { TwoColumns } from "src/components/TwoColumns";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
 
 const AssistantReply = () => {
   const [tasks, setTasks] = useState([]);
@@ -64,15 +65,11 @@ const AssistantReply = () => {
 
       <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
         <TaskInfo id={tasks[0].id} output="Submit your answer" />
-        <div className="flex justify-center ml-auto">
-          <Button className="mr-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-200">Skip</Button>
-          <Button
-            onClick={() => submitResponse(tasks[0])}
-            className="bg-indigo-600 text-white shadow-sm hover:bg-indigo-700"
-          >
-            Submit
-          </Button>
-        </div>
+
+        <Flex justify="center" ml="auto" gap={2}>
+          <SkipButton>Skip</SkipButton>
+          <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+        </Flex>
       </section>
     </div>
   );

website/src/pages/create/summarize_story.tsx

@@ -1,4 +1,4 @@
-import { Textarea } from "@chakra-ui/react";
+import { Flex, Textarea } from "@chakra-ui/react";
 import Head from "next/head";
 import { useRef, useState } from "react";
 import useSWRImmutable from "swr/immutable";
@@ -7,10 +7,11 @@ import useSWRMutation from "swr/mutation";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 
-import { Button } from "src/components/Button";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { TwoColumns } from "src/components/TwoColumns";
 import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
 
 const SummarizeStory = () => {
   // Use an array of tasks that record the sequence of steps until a task is
@@ -78,15 +79,10 @@ const SummarizeStory = () => {
         <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
           <TaskInfo id={tasks[0].id} output="Submit your answer" />
 
-          <div className="flex justify-center ml-auto">
-            <Button className="mr-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-200">Skip</Button>
-            <Button
-              onClick={() => submitResponse(tasks[0])}
-              className="bg-indigo-600 text-white shadow-sm hover:bg-indigo-700"
-            >
-              Submit
-            </Button>
-          </div>
+          <Flex justify="center" ml="auto" gap={2}>
+            <SkipButton>Skip</SkipButton>
+            <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+          </Flex>
         </section>
       </main>
     </>

website/src/pages/create/user_reply.tsx

@@ -1,4 +1,4 @@
-import { Textarea } from "@chakra-ui/react";
+import { Flex, Textarea } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 import useSWRMutation from "swr/mutation";
 import useSWRImmutable from "swr/immutable";
@@ -6,11 +6,12 @@ import useSWRImmutable from "swr/immutable";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 
-import { Button } from "src/components/Button";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Messages } from "src/components/Messages";
 import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
 import { TwoColumns } from "src/components/TwoColumns";
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
 
 const UserReply = () => {
   const [tasks, setTasks] = useState([]);
@@ -66,15 +67,10 @@ const UserReply = () => {
       <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
         <TaskInfo id={tasks[0].id} output="Submit your answer" />
 
-        <div className="flex justify-center ml-auto">
-          <Button className="mr-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-200">Skip</Button>
-          <Button
-            onClick={() => submitResponse(tasks[0])}
-            className="bg-indigo-600 text-white shadow-sm hover:bg-indigo-700"
-          >
-            Submit
-          </Button>
-        </div>
+        <Flex justify="center" ml="auto" gap={2}>
+          <SkipButton>Skip</SkipButton>
+          <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+        </Flex>
       </section>
     </div>
   );

website/src/pages/evaluate/rank_assistant_replies.tsx

@@ -0,0 +1,86 @@
+import { Button, Flex } from "@chakra-ui/react";
+import Head from "next/head";
+import { useState } from "react";
+import useSWRImmutable from "swr/immutable";
+import useSWRMutation from "swr/mutation";
+
+import fetcher from "src/lib/fetcher";
+import poster from "src/lib/poster";
+
+import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { Sortable } from "src/components/Sortable/Sortable";
+import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { SubmitButton } from "src/components/Buttons/Submit";
+import { SkipButton } from "src/components/Buttons/Skip";
+
+const RankAssistantReplies = () => {
+  const [tasks, setTasks] = useState([]);
+  /**
+   * This array will contain the ranked indices of the replies
+   * The best reply will have index 0, and the worst is the last.
+   */
+  const [ranking, setRanking] = useState<number[]>([]);
+
+  const { isLoading } = useSWRImmutable("/api/new_task/rank_assistant_replies", fetcher, {
+    onSuccess: (data) => {
+      setTasks([data]);
+    },
+  });
+
+  const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
+    onSuccess: async (data) => {
+      const newTask = await data.json();
+      setTasks((oldTasks) => [...oldTasks, newTask]);
+    },
+  });
+
+  const submitResponse = (task) => {
+    trigger({
+      id: task.id,
+      update_type: "post_ranking",
+      content: {
+        ranking,
+      },
+    });
+  };
+
+  if (isLoading) {
+    return <LoadingScreen text="Loading..." />;
+  }
+
+  if (tasks.length == 0) {
+    return <div className="p-6 bg-slate-100 text-gray-800">Loading...</div>;
+  }
+  const replies = tasks[0].task.replies as string[];
+
+  return (
+    <>
+      <Head>
+        <title>Rank Assistant Replies</title>
+        <meta name="description" content="Rank Assistant Replies." />
+      </Head>
+      <main className="p-6 bg-slate-100 text-gray-800">
+        <div className="rounded-lg shadow-lg block bg-white p-6 mb-8">
+          <h5 className="text-lg font-semibold mb-4">Instructions</h5>
+          <p className="text-lg py-1">
+            Given the following replies, sort them from best to worst, best being first, worst being last.
+          </p>
+          <Sortable items={replies} onChange={setRanking} />
+        </div>
+
+        <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch">
+          <TaskInfo id={tasks[0].id} output="Submit your answer" />
+
+          <Flex justify="center" ml="auto" gap={2}>
+            <SkipButton>Skip</SkipButton>
+            <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
+              Submit
+            </SubmitButton>
+          </Flex>
+        </section>
+      </main>
+    </>
+  );
+};
+
+export default RankAssistantReplies;

website/src/pages/evaluate/rank_initial_prompts.tsx

@@ -1,3 +1,4 @@
+import { Flex } from "@chakra-ui/react";
 import Head from "next/head";
 import { useState } from "react";
 import useSWRImmutable from "swr/immutable";
@@ -6,10 +7,11 @@ import useSWRMutation from "swr/mutation";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 
-import { Button } from "src/components/Button";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Sortable } from "src/components/Sortable/Sortable";
 import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
 
 const RankInitialPrompts = () => {
   const [tasks, setTasks] = useState([]);
@@ -68,16 +70,12 @@ const RankInitialPrompts = () => {
         <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch">
           <TaskInfo id={tasks[0].id} output="Submit your answer" />
 
-          <div className="flex justify-center ml-auto">
-            <Button className="mr-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-200">Skip</Button>
-            <Button
-              onClick={() => submitResponse(tasks[0])}
-              disabled={ranking.length === 0}
-              className="bg-indigo-600 text-white shadow-sm hover:bg-indigo-700"
-            >
+          <Flex justify="center" ml="auto" gap={2}>
+            <SkipButton>Skip</SkipButton>
+            <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
               Submit
-            </Button>
-          </div>
+            </SubmitButton>
+          </Flex>
         </section>
       </main>
     </>

website/src/pages/evaluate/rank_user_replies.tsx

@@ -6,10 +6,12 @@ import useSWRMutation from "swr/mutation";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 
-import { Button } from "src/components/Button";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Sortable } from "src/components/Sortable/Sortable";
 import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { Flex } from "@chakra-ui/react";
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
 
 const RankUserReplies = () => {
   const [tasks, setTasks] = useState([]);
@@ -69,16 +71,12 @@ const RankUserReplies = () => {
         <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
           <TaskInfo id={tasks[0].id} output="Submit your answer" />
 
-          <div className="flex justify-center ml-auto">
-            <Button className="mr-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-200">Skip</Button>
-            <Button
-              onClick={() => submitResponse(tasks[0])}
-              disabled={ranking.length === 0}
-              className="bg-indigo-600 text-white shadow-sm hover:bg-indigo-700"
-            >
+          <Flex justify="center" ml="auto" gap={2}>
+            <SkipButton>Skip</SkipButton>
+            <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
               Submit
-            </Button>
-          </div>
+            </SubmitButton>
+          </Flex>
         </section>
       </main>
     </>

website/src/pages/evaluate/rate_summary.tsx

@@ -1,4 +1,4 @@
-import { Textarea } from "@chakra-ui/react";
+import { Flex, Textarea } from "@chakra-ui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import Head from "next/head";
 import { useState } from "react";
@@ -9,10 +9,11 @@ import RatingRadioGroup from "src/components/RatingRadioGroup";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 
-import { Button } from "src/components/Button";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { TwoColumns } from "src/components/TwoColumns";
 import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
 
 const RateSummary = () => {
   // Use an array of tasks that record the sequence of steps until a task is
@@ -94,15 +95,10 @@ const RateSummary = () => {
         <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
           <TaskInfo id={tasks[0].id} output="Submit your answer" />
 
-          <div className="flex justify-center ml-auto">
-            <Button className="mr-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-200">Skip</Button>
-            <Button
-              onClick={() => submitResponse(tasks[0])}
-              className="bg-indigo-600 text-white shadow-sm hover:bg-indigo-700"
-            >
-              Submit
-            </Button>
-          </div>
+          <Flex justify="center" ml="auto" gap={2}>
+            <SkipButton>Skip</SkipButton>
+            <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+          </Flex>
         </section>
       </main>
     </>