Merge branch 'main' into dark-mode-implementation

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>