Merge branch 'main' into dark-mode-implementation

website/src/pages/404.tsx

@@ -1,8 +1,4 @@
-import { useSession } from "next-auth/react";
-import { Footer } from "../components/Footer";
-import { Header } from "src/components/Header";
 import Head from "next/head";
-import Link from "next/link";
 
 export default function Error() {
   return (

website/src/pages/account/edit.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from "react";
-import { useSession } from "next-auth/react";
-import { Button, Input, InputGroup, Stack } from "@chakra-ui/react";
+import { Button, Input, InputGroup } from "@chakra-ui/react";
 import Head from "next/head";
 import Router from "next/router";
+import { useSession } from "next-auth/react";
+import React, { useState } from "react";
 
 export default function Account() {
   const { data: session } = useSession();

website/src/pages/account/index.tsx

@@ -1,13 +1,14 @@
+import { Button } from "@chakra-ui/react";
 import Head from "next/head";
 import Link from "next/link";
-import React, { useState } from "react";
 import { useSession } from "next-auth/react";
-import { Button } from "@chakra-ui/react";
+import React, { useState } from "react";
 
 export default function Account() {
   const { data: session } = useSession();
   const [username, setUsername] = useState("null");
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const handleUpdate = async () => {
     const response = await fetch("../api/update", {
       method: "POST",

website/src/pages/api/auth/[...nextauth].ts

@@ -1,12 +1,10 @@
-import type { AuthOptions } from "next-auth";
-import NextAuth from "next-auth";
-import { NextApiHandler } from "next";
-import DiscordProvider from "next-auth/providers/discord";
-import EmailProvider from "next-auth/providers/email";
-import CredentialsProvider from "next-auth/providers/credentials";
 import { PrismaAdapter } from "@next-auth/prisma-adapter";
 import { boolean } from "boolean";
-
+import type { AuthOptions } from "next-auth";
+import NextAuth from "next-auth";
+import CredentialsProvider from "next-auth/providers/credentials";
+import DiscordProvider from "next-auth/providers/discord";
+import EmailProvider from "next-auth/providers/email";
 import prisma from "src/lib/prismadb";
 
 const providers = [];
@@ -43,10 +41,19 @@ if (boolean(process.env.DEBUG_LOGIN) || process.env.NODE_ENV === "development")
         username: { label: "Username", type: "text" },
       },
       async authorize(credentials) {
-        return {
+        const user = {
           id: credentials.username,
           name: credentials.username,
         };
+        // save the user to the database
+        await prisma.user.upsert({
+          where: {
+            id: user.id,
+          },
+          update: {},
+          create: user,
+        });
+        return user;
       },
     })
   );

website/src/pages/api/new_task/[task_type].ts

@@ -1,7 +1,5 @@
 import { getToken } from "next-auth/jwt";
-
 import prisma from "src/lib/prismadb";
-import { authOptions } from "src/pages/api/auth/[...nextauth]";
 
 /**
  * Returns a new task created from the Task Backend.  We do a few things here:
@@ -62,10 +60,10 @@ const handler = async (req, res) => {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({
-      post_id: registeredTask.id,
+      message_id: registeredTask.id,
     }),
   });
-  const ack = await ackRes.json();
+  await ackRes.json();
 
   // Send the results to the client.
   res.status(200).json(registeredTask);

website/src/pages/api/update_task.ts

@@ -1,7 +1,5 @@
 import { getToken } from "next-auth/jwt";
-
 import prisma from "src/lib/prismadb";
-import { authOptions } from "src/pages/api/auth/[...nextauth]";
 
 /**
  * Stores the task interaction with the Task Backend and then returns the next task generated.
@@ -22,7 +20,7 @@ const handler = async (req, res) => {
   }
 
   // Parse out the local task ID and the interaction contents.
-  const { id, content } = await JSON.parse(req.body);
+  const { id, content, update_type } = await JSON.parse(req.body);
 
   // Log the interaction locally to create our user_post_id needed by the Task
   // Backend.
@@ -46,14 +44,14 @@ const handler = async (req, res) => {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({
-      type: "post_rating",
+      type: update_type,
       user: {
         id: token.sub,
         display_name: token.name || token.email,
         auth_method: "local",
       },
-      post_id: id,
-      user_post_id: interaction.id,
+      message_id: id,
+      user_message_id: interaction.id,
       ...content,
     }),
   });

website/src/pages/api/username.tsx

@@ -1,13 +1,10 @@
 import { getSession } from "next-auth/react";
-import { Prisma } from "@prisma/client";
-import Email from "next-auth/providers/email";
 
 // POST /api/post
 // Required fields in body: title
 // Optional fields in body: content
 export default async function handle(req, res) {
   const { username } = req.body;
-  const { email } = req.body;
 
   const session = await getSession({ req });
   const result = await prisma.user.update({

website/src/pages/auth/signin.tsx

@@ -9,6 +9,7 @@ import { Footer } from "src/components/Footer";
 import { AuthLayout } from "src/components/AuthLayout";
 import { useColorMode } from "@chakra-ui/react";
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function Signin({ csrfToken, providers }) {
   const { discord, email, github, credentials } = providers;
   const emailEl = useRef(null);
@@ -71,7 +72,7 @@ function Signin({ csrfToken, providers }) {
               size="lg"
               leftIcon={<FaDiscord />}
               color="white"
-              onClick={() => signIn(discord, { callbackUrl: "/" })}
+              onClick={() => signIn(discord.id, { callbackUrl: "/" })}
               // isDisabled="false"
             >
               Continue with Discord

website/src/pages/auth/verify.tsx

@@ -1,7 +1,5 @@
 import Head from "next/head";
-import { getCsrfToken, getProviders, signIn } from "next-auth/react";
-import Link from "next/link";
-
+import { getCsrfToken, getProviders } from "next-auth/react";
 import { AuthLayout } from "src/components/AuthLayout";
 
 export default function Verify() {
@@ -18,6 +16,7 @@ export default function Verify() {
   );
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export async function getServerSideProps(context) {
   const csrfToken = await getCsrfToken();
   const providers = await getProviders();

website/src/pages/create/assistant_reply.tsx

@@ -1,31 +1,28 @@
 import { Container, Flex, Textarea } from "@chakra-ui/react";
 import { useRef, useState } from "react";
-import useSWRMutation from "swr/mutation";
-import useSWRImmutable from "swr/immutable";
-
-import fetcher from "src/lib/fetcher";
-import poster from "src/lib/poster";
-
-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";
+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 fetcher from "src/lib/fetcher";
+import poster from "src/lib/poster";
+import useSWRImmutable from "swr/immutable";
+import useSWRMutation from "swr/mutation";
 
 const AssistantReply = () => {
   const [tasks, setTasks] = useState([]);
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
-  const { isLoading } = useSWRImmutable("/api/new_task/assistant_reply ", fetcher, {
+  const { isLoading, mutate } = useSWRImmutable("/api/new_task/assistant_reply ", fetcher, {
     onSuccess: (data) => {
-      console.log(data);
       setTasks([data]);
     },
   });
 
-  const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
+  const { trigger } = useSWRMutation("/api/update_task", poster, {
     onSuccess: async (data) => {
       const newTask = await data.json();
       setTasks((oldTasks) => [...oldTasks, newTask]);
@@ -36,13 +33,18 @@ const AssistantReply = () => {
     const text = inputRef.current.value.trim();
     trigger({
       id: task.id,
-      update_type: "text_reply_to_post",
+      update_type: "text_reply_to_message",
       content: {
         text,
       },
     });
   };
 
+  const fetchNextTask = () => {
+    inputRef.current.value = "";
+    mutate();
+  };
+
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -52,13 +54,14 @@ const AssistantReply = () => {
   }
 
   const task = tasks[0].task;
+  const endTask = tasks[tasks.length - 1];
   return (
     <Container className="p-6 text-gray-800">
       <TwoColumns>
         <>
           <h5 className="text-lg font-semibold">Reply as the assistant</h5>
           <p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
-          <Messages messages={task.conversation.messages} />
+          <Messages messages={task.conversation.messages} post_id={task.id} />
         </>
         <Textarea name="reply" placeholder="Reply..." ref={inputRef} />
       </TwoColumns>
@@ -68,7 +71,11 @@ const AssistantReply = () => {
 
         <Flex justify="center" ml="auto" gap={2}>
           <SkipButton>Skip</SkipButton>
-          <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+          {endTask.task.type !== "task_done" ? (
+            <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+          ) : (
+            <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
+          )}
         </Flex>
       </section>
     </Container>

website/src/pages/create/summarize_story.tsx

@@ -1,17 +1,15 @@
 import { Flex, Textarea } from "@chakra-ui/react";
 import Head from "next/head";
 import { useRef, 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 { 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";
+import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { TwoColumns } from "src/components/TwoColumns";
+import fetcher from "src/lib/fetcher";
+import poster from "src/lib/poster";
+import useSWRImmutable from "swr/immutable";
+import useSWRMutation from "swr/mutation";
 
 const SummarizeStory = () => {
   // Use an array of tasks that record the sequence of steps until a task is
@@ -31,7 +29,7 @@ const SummarizeStory = () => {
   // Every time we submit an answer to the latest task, let the backend handle
   // all the interactions then add the resulting task to the queue.  This ends
   // when we hit the done task.
-  const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
+  const { trigger } = useSWRMutation("/api/update_task", poster, {
     onSuccess: async (data) => {
       const newTask = await data.json();
       // This is the more efficient way to update a react state array.
@@ -45,7 +43,7 @@ const SummarizeStory = () => {
     const text = inputRef.current.value.trim();
     trigger({
       id: task.id,
-      update_type: "text_reply_to_post",
+      update_type: "text_reply_to_message",
       content: {
         text,
       },

website/src/pages/create/user_reply.tsx

@@ -1,17 +1,16 @@
-import { Container, Flex, Textarea, useColorModeValue } from "@chakra-ui/react";
+import { Flex, Textarea, useColorModeValue } from "@chakra-ui/react";
+import { Container } from "src/components/Container";
 import { useRef, useState } from "react";
-import useSWRMutation from "swr/mutation";
-import useSWRImmutable from "swr/immutable";
-
-import fetcher from "src/lib/fetcher";
-import poster from "src/lib/poster";
-
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
 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";
+import fetcher from "src/lib/fetcher";
+import poster from "src/lib/poster";
+import useSWRImmutable from "swr/immutable";
+import useSWRMutation from "swr/mutation";
 
 const UserReply = () => {
   const [tasks, setTasks] = useState([]);
@@ -19,14 +18,13 @@ const UserReply = () => {
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
-  const { isLoading } = useSWRImmutable("/api/new_task/user_reply", fetcher, {
+  const { isLoading, mutate } = useSWRImmutable("/api/new_task/prompter_reply", fetcher, {
     onSuccess: (data) => {
-      console.log(data);
       setTasks([data]);
     },
   });
 
-  const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
+  const { trigger } = useSWRMutation("/api/update_task", poster, {
     onSuccess: async (data) => {
       const newTask = await data.json();
       setTasks((oldTasks) => [...oldTasks, newTask]);
@@ -37,13 +35,18 @@ const UserReply = () => {
     const text = inputRef.current.value.trim();
     trigger({
       id: task.id,
-      update_type: "text_reply_to_post",
+      update_type: "text_reply_to_message",
       content: {
         text,
       },
     });
   };
 
+  const fetchNextTask = () => {
+    inputRef.current.value = "";
+    mutate();
+  };
+
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -53,13 +56,14 @@ const UserReply = () => {
   }
 
   const task = tasks[0].task;
+  const endTask = tasks[tasks.length - 1];
   return (
     <Container className="p-6">
       <TwoColumns>
         <>
           <h5 className="text-lg font-semibold">Reply as a user</h5>
           <p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
-          <Messages messages={task.conversation.messages} />
+          <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} />
@@ -67,10 +71,13 @@ 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" />
-
         <Flex justify="center" ml="auto" gap={2}>
           <SkipButton>Skip</SkipButton>
-          <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+          {endTask.task.type !== "task_done" ? (
+            <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+          ) : (
+            <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
+          )}
         </Flex>
       </section>
     </Container>

website/src/pages/evaluate/rank_assistant_replies.tsx

@@ -1,17 +1,15 @@
 import { Button, Container, Flex, useColorModeValue } 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 { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
 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";
+import fetcher from "src/lib/fetcher";
+import poster from "src/lib/poster";
+import useSWRImmutable from "swr/immutable";
+import useSWRMutation from "swr/mutation";
 
 const RankAssistantReplies = () => {
   const [tasks, setTasks] = useState([]);
@@ -20,14 +18,15 @@ const RankAssistantReplies = () => {
    * The best reply will have index 0, and the worst is the last.
    */
   const [ranking, setRanking] = useState<number[]>([]);
+  
   const bg = useColorModeValue("gray.100", "gray.800");
-  const { isLoading } = useSWRImmutable("/api/new_task/rank_assistant_replies", fetcher, {
+  const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_assistant_replies", fetcher, {
     onSuccess: (data) => {
       setTasks([data]);
     },
   });
 
-  const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
+  const { trigger } = useSWRMutation("/api/update_task", poster, {
     onSuccess: async (data) => {
       const newTask = await data.json();
       setTasks((oldTasks) => [...oldTasks, newTask]);
@@ -37,13 +36,18 @@ const RankAssistantReplies = () => {
   const submitResponse = (task) => {
     trigger({
       id: task.id,
-      update_type: "post_ranking",
+      update_type: "message_ranking",
       content: {
         ranking,
       },
     });
   };
 
+  const fetchNextTask = () => {
+    setRanking([]);
+    mutate();
+  };
+
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -51,8 +55,9 @@ const RankAssistantReplies = () => {
   if (tasks.length == 0) {
     return <Container className="p-6 bg-slate-100 text-gray-800">No Tasks Found...</Container>;
   }
-  const replies = tasks[0].task.replies as string[];
 
+  const replies = tasks[0].task.replies as string[];
+  const endTask = tasks[tasks.length - 1];
   return (
     <>
       <Head>
@@ -73,9 +78,13 @@ const RankAssistantReplies = () => {
 
           <Flex justify="center" ml="auto" gap={2}>
             <SkipButton>Skip</SkipButton>
-            <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
-              Submit
-            </SubmitButton>
+            {endTask.task.type !== "task_done" ? (
+              <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
+                Submit
+              </SubmitButton>
+            ) : (
+              <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
+            )}
           </Flex>
         </Container>
       </Container>

website/src/pages/evaluate/rank_initial_prompts.tsx

@@ -1,18 +1,15 @@
 import { 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 { Container, useColorModeValue } from "@chakra-ui/react";
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
 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";
+import fetcher from "src/lib/fetcher";
+import poster from "src/lib/poster";
+import useSWRImmutable from "swr/immutable";
+import useSWRMutation from "swr/mutation";
 
 const RankInitialPrompts = () => {
   const [tasks, setTasks] = useState([]);
@@ -23,13 +20,13 @@ const RankInitialPrompts = () => {
   const [ranking, setRanking] = useState<number[]>([]);
   const bg = useColorModeValue("gray.100", "gray.800");
 
-  const { isLoading } = useSWRImmutable("/api/new_task/rank_initial_prompts", fetcher, {
+  const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_initial_prompts", fetcher, {
     onSuccess: (data) => {
       setTasks([data]);
     },
   });
 
-  const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
+  const { trigger } = useSWRMutation("/api/update_task", poster, {
     onSuccess: async (data) => {
       const newTask = await data.json();
       setTasks((oldTasks) => [...oldTasks, newTask]);
@@ -39,13 +36,18 @@ const RankInitialPrompts = () => {
   const submitResponse = (task) => {
     trigger({
       id: task.id,
-      update_type: "post_ranking",
+      update_type: "message_ranking",
       content: {
         ranking,
       },
     });
   };
 
+  const fetchNextTask = () => {
+    setRanking([]);
+    mutate();
+  };
+
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -54,6 +56,7 @@ const RankInitialPrompts = () => {
     return <Container className="p-6 bg-slate-100 text-gray-800">No tasks found...</Container>;
   }
 
+  const endTask = tasks[tasks.length - 1];
   return (
     <>
       <Head>
@@ -74,9 +77,13 @@ const RankInitialPrompts = () => {
 
           <Flex justify="center" ml="auto" gap={2}>
             <SkipButton>Skip</SkipButton>
-            <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
-              Submit
-            </SubmitButton>
+            {endTask.task.type !== "task_done" ? (
+              <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
+                Submit
+              </SubmitButton>
+            ) : (
+              <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
+            )}
           </Flex>
         </section>
       </Container>

website/src/pages/evaluate/rank_user_replies.tsx

@@ -1,17 +1,15 @@
+import { 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 { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Sortable } from "src/components/Sortable/Sortable";
 import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
-import { Container, Flex, useColorModeValue } from "@chakra-ui/react";
-import { SkipButton } from "src/components/Buttons/Skip";
-import { SubmitButton } from "src/components/Buttons/Submit";
+import fetcher from "src/lib/fetcher";
+import poster from "src/lib/poster";
+import useSWRImmutable from "swr/immutable";
+import useSWRMutation from "swr/mutation";
 
 const RankUserReplies = () => {
   const [tasks, setTasks] = useState([]);
@@ -20,14 +18,15 @@ const RankUserReplies = () => {
    * The best reply will have index 0, and the worst is the last.
    */
   const [ranking, setRanking] = useState<number[]>([]);
+
   const bg = useColorModeValue("gray.100", "gray.800");
-  const { isLoading } = useSWRImmutable("/api/new_task/rank_user_replies", fetcher, {
+  const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_prompter_replies", fetcher, {
     onSuccess: (data) => {
       setTasks([data]);
     },
   });
 
-  const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
+  const { trigger } = useSWRMutation("/api/update_task", poster, {
     onSuccess: async (data) => {
       const newTask = await data.json();
       setTasks((oldTasks) => [...oldTasks, newTask]);
@@ -37,13 +36,18 @@ const RankUserReplies = () => {
   const submitResponse = (task) => {
     trigger({
       id: task.id,
-      update_type: "post_ranking",
+      update_type: "message_ranking",
       content: {
         ranking,
       },
     });
   };
 
+  const fetchNextTask = () => {
+    setRanking([]);
+    mutate();
+  };
+
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -53,6 +57,7 @@ const RankUserReplies = () => {
   }
   const replies = tasks[0].task.replies as string[];
 
+  const endTask = tasks[tasks.length - 1];
   return (
     <>
       <Head>
@@ -73,9 +78,13 @@ const RankUserReplies = () => {
 
           <Flex justify="center" ml="auto" gap={2}>
             <SkipButton>Skip</SkipButton>
-            <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
-              Submit
-            </SubmitButton>
+            {endTask.task.type !== "task_done" ? (
+              <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
+                Submit
+              </SubmitButton>
+            ) : (
+              <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
+            )}
           </Flex>
         </section>
       </Container>

website/src/pages/evaluate/rate_summary.tsx

@@ -2,18 +2,16 @@ import { Flex, Textarea } from "@chakra-ui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import Head from "next/head";
 import { useState } from "react";
-import useSWRImmutable from "swr/immutable";
-import useSWRMutation from "swr/mutation";
-
-import RatingRadioGroup from "src/components/RatingRadioGroup";
-import fetcher from "src/lib/fetcher";
-import poster from "src/lib/poster";
-
-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";
+import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import RatingRadioGroup from "src/components/RatingRadioGroup";
+import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { TwoColumns } from "src/components/TwoColumns";
+import fetcher from "src/lib/fetcher";
+import poster from "src/lib/poster";
+import useSWRImmutable from "swr/immutable";
+import useSWRMutation from "swr/mutation";
 
 const RateSummary = () => {
   // Use an array of tasks that record the sequence of steps until a task is
@@ -23,9 +21,8 @@ const RateSummary = () => {
 
   // Fetch the very fist task.  We can ignore everything except isLoading
   // because the onSuccess handler will update `tasks` when ready.
-  const { isLoading } = useSWRImmutable("/api/new_task/rate_summary", fetcher, {
+  const { isLoading, mutate } = useSWRImmutable("/api/new_task/rate_summary", fetcher, {
     onSuccess: (data) => {
-      console.log(data);
       setTasks([data]);
     },
   });
@@ -33,7 +30,7 @@ const RateSummary = () => {
   // Every time we submit an answer to the latest task, let the backend handle
   // all the interactions then add the resulting task to the queue.  This ends
   // when we hit the done task.
-  const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
+  const { trigger } = useSWRMutation("/api/update_task", poster, {
     onSuccess: async (data) => {
       const newTask = await data.json();
       // This is the more efficient way to update a react state array.
@@ -46,6 +43,7 @@ const RateSummary = () => {
   const submitResponse = (t) => {
     trigger({
       id: t.id,
+      update_type: "message_rating",
       content: {
         rating: rating,
       },
@@ -60,6 +58,7 @@ const RateSummary = () => {
     return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
   }
 
+  const endTask = tasks[tasks.length - 1];
   return (
     <>
       <Head>
@@ -97,7 +96,11 @@ const RateSummary = () => {
 
           <Flex justify="center" ml="auto" gap={2}>
             <SkipButton>Skip</SkipButton>
-            <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+            {endTask.task.type !== "task_done" ? (
+              <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+            ) : (
+              <SubmitButton onClick={mutate}>Next Task</SubmitButton>
+            )}
           </Flex>
         </section>
       </main>

website/src/pages/index.tsx

@@ -1,12 +1,11 @@
 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 { Header } from "src/components/Header";
-import { Footer } from "src/components/Footer";
 import { Box, Container } from "@chakra-ui/react";
 
 const Home = () => {
@@ -22,16 +21,12 @@ const Home = () => {
         />
       </Head>
       {session ? (
-        <Container>
           <TaskSelection />
-        </Container>
       ) : (
         <main className="oa-basic-theme">
-        {/* <Container className="min-w-full" variant="no-padding"> */}
           <Hero />
           <CallToAction />
           <Faq />
-        {/* </Container> */}
         </main>
       )}
     </>

website/src/pages/leaderboard/score-leaderboard.tsx

@@ -1,5 +1,5 @@
-import RankItem from "src/components/RankItem";
 import { HiBarsArrowDown } from "react-icons/hi2";
+import RankItem from "src/components/RankItem";
 
 const LeaderBoard = () => {
   const PlaceHolderProps = { username: "test_user", score: 10 };