Merging with main

website/src/pages/api/admin/update_user.ts

@@ -1,4 +1,4 @@
-import withRole from "src/lib/auth";
+import { withRole } from "src/lib/auth";
 import prisma from "src/lib/prismadb";
 
 /**

website/src/pages/api/admin/users.ts

@@ -1,4 +1,4 @@
-import withRole from "src/lib/auth";
+import { withRole } from "src/lib/auth";
 import prisma from "src/lib/prismadb";
 
 // The number of users to fetch in any request.

website/src/pages/api/messages/[id]/children.ts

@@ -1,14 +1,6 @@
-import { getToken } from "next-auth/jwt";
-
-const handler = async (req, res) => {
-  const token = await getToken({ req });
-
-  // Return nothing if the user isn't registered.
-  if (!token) {
-    res.status(401).end();
-    return;
-  }
+import { withoutRole } from "src/lib/auth";
 
+const handler = withoutRole("banned", async (req, res) => {
   const { id } = req.query;
 
   const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}/children`, {
@@ -22,6 +14,6 @@ const handler = async (req, res) => {
 
   // Send recieved messages to the client.
   res.status(200).json(messages);
-};
+});
 
 export default handler;

website/src/pages/api/messages/[id]/conversation.ts

@@ -1,14 +1,6 @@
-import { getToken } from "next-auth/jwt";
-
-const handler = async (req, res) => {
-  const token = await getToken({ req });
-
-  // Return nothing if the user isn't registered.
-  if (!token) {
-    res.status(401).end();
-    return;
-  }
+import { withoutRole } from "src/lib/auth";
 
+const handler = withoutRole("banned", async (req, res) => {
   const { id } = req.query;
 
   const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}/conversation`, {
@@ -22,6 +14,6 @@ const handler = async (req, res) => {
 
   // Send recieved messages to the client.
   res.status(200).json(messages);
-};
+});
 
 export default handler;

website/src/pages/api/messages/[id]/index.ts

@@ -1,14 +1,6 @@
-import { getToken } from "next-auth/jwt";
-
-const handler = async (req, res) => {
-  const token = await getToken({ req });
-
-  // Return nothing if the user isn't registered.
-  if (!token) {
-    res.status(401).end();
-    return;
-  }
+import { withoutRole } from "src/lib/auth";
 
+const handler = withoutRole("banned", async (req, res) => {
   const { id } = req.query;
 
   const messageRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}`, {
@@ -22,6 +14,6 @@ const handler = async (req, res) => {
 
   // Send recieved messages to the client.
   res.status(200).json(message);
-};
+});
 
 export default handler;

website/src/pages/api/messages/[id]/parent.ts

@@ -1,14 +1,6 @@
-import { getToken } from "next-auth/jwt";
-
-const handler = async (req, res) => {
-  const token = await getToken({ req });
-
-  // Return nothing if the user isn't registered.
-  if (!token) {
-    res.status(401).end();
-    return;
-  }
+import { withoutRole } from "src/lib/auth";
 
+const handler = withoutRole("banned", async (req, res) => {
   const { id } = req.query;
 
   if (!id) {
@@ -43,6 +35,6 @@ const handler = async (req, res) => {
 
   // Send recieved messages to the client.
   res.status(200).json(parent);
-};
+});
 
 export default handler;

website/src/pages/api/messages/index.ts

@@ -1,14 +1,6 @@
-import { getToken } from "next-auth/jwt";
-
-const handler = async (req, res) => {
-  const token = await getToken({ req });
-
-  // Return nothing if the user isn't registered.
-  if (!token) {
-    res.status(401).end();
-    return;
-  }
+import { withoutRole } from "src/lib/auth";
 
+const handler = withoutRole("banned", async (req, res) => {
   const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages`, {
     method: "GET",
     headers: {
@@ -19,6 +11,6 @@ const handler = async (req, res) => {
 
   // Send recieved messages to the client.
   res.status(200).json(messages);
-};
+});
 
 export default handler;

website/src/pages/api/messages/user.ts

@@ -1,14 +1,6 @@
-import { getToken } from "next-auth/jwt";
-
-const handler = async (req, res) => {
-  const token = await getToken({ req });
-
-  // Return nothing if the user isn't registered.
-  if (!token) {
-    res.status(401).end();
-    return;
-  }
+import { withoutRole } from "src/lib/auth";
 
+const handler = withoutRole("banned", async (req, res, token) => {
   //TODO: add params if needed
   const params = new URLSearchParams({
     username: token.sub,
@@ -24,6 +16,6 @@ const handler = async (req, res) => {
 
   // Send recieved messages to the client.
   res.status(200).json(messages);
-};
+});
 
 export default handler;

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

@@ -1,4 +1,4 @@
-import { getToken } from "next-auth/jwt";
+import { withoutRole } from "src/lib/auth";
 import { oasstApiClient } from "src/lib/oasst_api_client";
 import prisma from "src/lib/prismadb";
 
@@ -10,19 +10,10 @@ import prisma from "src/lib/prismadb";
  * 3) Send and Ack to the Task Backend with our local id for the task.
  * 4) Return everything to the client.
  */
-const handler = async (req, res) => {
-  const { task_type } = req.query;
-
-  const token = await getToken({ req });
-
-  // Return nothing if the user isn't registered.
-  if (!token) {
-    res.status(401).end();
-    return;
-  }
-
+const handler = withoutRole("banned", async (req, res, token) => {
   // Fetch the new task.
-  const task = await oasstApiClient.fetchTask(task_type, token);
+  const { task_type } = req.query;
+  const task = await oasstApiClient.fetchTask(task_type as string, token);
 
   // Store the task and link it to the user..
   const registeredTask = await prisma.registeredTask.create({
@@ -38,6 +29,6 @@ const handler = async (req, res) => {
 
   // Send the results to the client.
   res.status(200).json(registeredTask);
-};
+});
 
 export default handler;

website/src/pages/api/reject_task.ts

@@ -1,17 +1,9 @@
 import { Prisma } from "@prisma/client";
-import { getToken } from "next-auth/jwt";
+import { withoutRole } from "src/lib/auth";
 import { oasstApiClient } from "src/lib/oasst_api_client";
 import prisma from "src/lib/prismadb";
 
-const handler = async (req, res) => {
-  const token = await getToken({ req });
-
-  // Return nothing if the user isn't registered.
-  if (!token) {
-    res.status(401).end();
-    return;
-  }
-
+const handler = withoutRole("banned", async (req, res) => {
   // Parse out the local task ID and the interaction contents.
   const { id: frontendId, reason } = await JSON.parse(req.body);
 
@@ -25,6 +17,6 @@ const handler = async (req, res) => {
 
   // Send the results to the client.
   res.status(200).json({});
-};
+});
 
 export default handler;

website/src/pages/api/set_label.ts

@@ -1,18 +1,10 @@
-import { getToken } from "next-auth/jwt";
+import { withoutRole } from "src/lib/auth";
 
 /**
  * Sets the Label in the Backend.
  *
  */
-const handler = async (req, res) => {
-  const token = await getToken({ req });
-
-  // Return nothing if the user isn't registered.
-  if (!token) {
-    res.status(401).end();
-    return;
-  }
-
+const handler = withoutRole("banned", async (req, res, token) => {
   // Parse out the local message_id, task ID and the interaction contents.
   const { message_id, label_map, text } = await JSON.parse(req.body);
 
@@ -35,6 +27,6 @@ const handler = async (req, res) => {
     }),
   });
   res.status(interactionRes.status).end();
-};
+});
 
 export default handler;

website/src/pages/api/update_task.ts

@@ -1,5 +1,5 @@
 import { Prisma } from "@prisma/client";
-import { getToken } from "next-auth/jwt";
+import { withoutRole } from "src/lib/auth";
 import { oasstApiClient } from "src/lib/oasst_api_client";
 import prisma from "src/lib/prismadb";
 
@@ -13,15 +13,7 @@ import prisma from "src/lib/prismadb";
  * 4) Records the new task in our local database.
  * 5) Returns the newly created task to the client.
  */
-const handler = async (req, res) => {
-  const token = await getToken({ req });
-
-  // Return nothing if the user isn't registered.
-  if (!token) {
-    res.status(401).end();
-    return;
-  }
-
+const handler = withoutRole("banned", async (req, res, token) => {
   // Parse out the local task ID and the interaction contents.
   const { id: frontendId, content, update_type } = await JSON.parse(req.body);
 
@@ -65,6 +57,6 @@ const handler = async (req, res) => {
 
   // Send the next task in the sequence to the client.
   res.status(200).json(newRegisteredTask);
-};
+});
 
 export default handler;

website/src/pages/create/assistant_reply.tsx

@@ -1,5 +1,4 @@
 import { Container } from "@chakra-ui/react";
-import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
@@ -8,9 +7,6 @@ import { useCreateAssistantReply } from "src/hooks/tasks/useCreateReply";
 const AssistantReply = () => {
   const { tasks, isLoading, reset, trigger } = useCreateAssistantReply();
 
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
-
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -25,7 +21,7 @@ const AssistantReply = () => {
         <title>Reply as Assistant</title>
         <meta name="description" content="Reply as Assistant." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
+      <Task key={tasks[0].task.id} task={tasks[0].task} trigger={trigger} mutate={reset} />
     </>
   );
 };

website/src/pages/create/initial_prompt.tsx

@@ -1,5 +1,4 @@
 import { Container } from "@chakra-ui/react";
-import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
@@ -8,9 +7,6 @@ import { useCreateInitialPrompt } from "src/hooks/tasks/useCreateReply";
 const InitialPrompt = () => {
   const { tasks, isLoading, reset, trigger } = useCreateInitialPrompt();
 
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
-
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -25,7 +21,7 @@ const InitialPrompt = () => {
         <title>Reply as Assistant</title>
         <meta name="description" content="Reply as Assistant." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
+      <Task key={tasks[0].task.id} task={tasks[0].task} trigger={trigger} mutate={reset} />
     </>
   );
 };

website/src/pages/create/summarize_story.tsx

@@ -36,10 +36,10 @@ const SummarizeStory = () => {
 
   // Trigger a mutation that updates the current task.  We should probably
   // signal somewhere that this interaction is being processed.
-  const submitResponse = (task: { id: string }) => {
+  const submitResponse = () => {
     const text = inputText.trim();
     trigger({
-      id: task.id,
+      id: tasks[0].task.id,
       update_type: "text_reply_to_message",
       content: {
         text,
@@ -88,9 +88,10 @@ const SummarizeStory = () => {
         </TwoColumnsWithCards>
 
         <TaskControls
-          tasks={tasks}
-          onSubmitResponse={submitResponse}
-          onSkipTask={fetchNextTask}
+          task={tasks[0].task}
+          taskStatus={"NOT_SUBMITTABLE"}
+          onSubmit={submitResponse}
+          onSkip={fetchNextTask}
           onNextTask={fetchNextTask}
         />
       </main>

website/src/pages/create/user_reply.tsx

@@ -1,4 +1,3 @@
-import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { Container } from "src/components/Container";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -8,9 +7,6 @@ import { useCreatePrompterReply } from "src/hooks/tasks/useCreateReply";
 const UserReply = () => {
   const { tasks, isLoading, reset, trigger } = useCreatePrompterReply();
 
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
-
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -25,7 +21,7 @@ const UserReply = () => {
         <title>Reply as Assistant</title>
         <meta name="description" content="Reply as Assistant." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
+      <Task key={tasks[0].task.id} task={tasks[0].task} trigger={trigger} mutate={reset} />
     </>
   );
 };

website/src/pages/evaluate/rank_assistant_replies.tsx

@@ -1,4 +1,3 @@
-import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { Container } from "src/components/Container";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -8,9 +7,6 @@ import { useRankAssistantRepliesTask } from "src/hooks/tasks/useRankReplies";
 const RankAssistantReplies = () => {
   const { tasks, isLoading, reset, trigger } = useRankAssistantRepliesTask();
 
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
-
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -25,7 +21,7 @@ const RankAssistantReplies = () => {
         <title>Rank Assistant Replies</title>
         <meta name="description" content="Rank Assistant Replies." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
+      <Task key={tasks[0].task.id} task={tasks[0].task} trigger={trigger} mutate={reset} />
     </>
   );
 };

website/src/pages/evaluate/rank_initial_prompts.tsx

@@ -1,4 +1,3 @@
-import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { Container } from "src/components/Container";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -8,9 +7,6 @@ import { useRankInitialPromptsTask } from "src/hooks/tasks/useRankReplies";
 const RankInitialPrompts = () => {
   const { tasks, isLoading, reset, trigger } = useRankInitialPromptsTask();
 
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
-
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -25,7 +21,7 @@ const RankInitialPrompts = () => {
         <title>Rank Initial Prompts</title>
         <meta name="description" content="Rank initial prompts." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
+      <Task key={tasks[0].task.id} task={tasks[0].task} trigger={trigger} mutate={reset} />
     </>
   );
 };

website/src/pages/evaluate/rank_user_replies.tsx

@@ -1,4 +1,3 @@
-import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { Container } from "src/components/Container";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -8,9 +7,6 @@ import { useRankPrompterRepliesTask } from "src/hooks/tasks/useRankReplies";
 const RankUserReplies = () => {
   const { tasks, isLoading, reset, trigger } = useRankPrompterRepliesTask();
 
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
-
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -25,7 +21,7 @@ const RankUserReplies = () => {
         <title>Rank User Replies</title>
         <meta name="description" content="Rank User Replies." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
+      <Task key={tasks[0].task.id} task={tasks[0].task} trigger={trigger} mutate={reset} />
     </>
   );
 };

website/src/pages/evaluate/rate_summary.tsx

@@ -39,9 +39,9 @@ const RateSummary = () => {
 
   // Trigger a mutation that updates the current task.  We should probably
   // signal somewhere that this interaction is being processed.
-  const submitResponse = (t) => {
+  const submitResponse = () => {
     trigger({
-      id: t.id,
+      id: tasks[0].task.id,
       update_type: "message_rating",
       content: {
         rating: rating,
@@ -103,9 +103,10 @@ const RateSummary = () => {
         </TwoColumnsWithCards>
 
         <TaskControls
-          tasks={tasks}
-          onSubmitResponse={submitResponse}
-          onSkipTask={fetchNextTask}
+          task={tasks[0].task}
+          taskStatus={"NOT_SUBMITTABLE"}
+          onSubmit={submitResponse}
+          onSkip={fetchNextTask}
           onNextTask={fetchNextTask}
         />
       </main>

website/src/pages/label/label_assistant_reply.tsx

@@ -1,43 +1,28 @@
-import { useState } from "react";
+import { Container } from "@chakra-ui/react";
+import Head from "next/head";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
-import { MessageTable } from "src/components/Messages/MessageTable";
-import { TaskControls } from "src/components/Survey/TaskControls";
-import { LabelSliderGroup, LabelTask } from "src/components/Tasks/LabelTask";
-import { LabelAssistantReplyTaskResponse, useLabelAssistantReplyTask } from "src/hooks/tasks/useLabelingTask";
-import { Message } from "src/types/Conversation";
+import { Task } from "src/components/Tasks/Task";
+import { useLabelAssistantReplyTask } from "src/hooks/tasks/useLabelingTask";
 
 const LabelAssistantReply = () => {
-  const [sliderValues, setSliderValues] = useState<number[]>([]);
+  const { tasks, isLoading, trigger, reset } = useLabelAssistantReplyTask();
 
-  const { tasks, isLoading, submit, reset } = useLabelAssistantReplyTask();
-
-  if (isLoading || tasks.length === 0) {
+  if (isLoading) {
     return <LoadingScreen />;
   }
 
-  const task = tasks[0].task;
-  const messages: Message[] = [
-    ...task.conversation.messages,
-    { text: task.reply, is_assistant: true, message_id: task.message_id },
-  ];
+  if (tasks.length === 0) {
+    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+  }
 
   return (
-    <LabelTask
-      title="Label Assistant Reply"
-      desc="Given the following discussion, provide labels for the final prompt"
-      messages={<MessageTable messages={messages} />}
-      inputs={<LabelSliderGroup labelIDs={task.valid_labels} onChange={setSliderValues} />}
-      controls={
-        <TaskControls
-          tasks={tasks}
-          onSkipTask={() => reset()}
-          onNextTask={reset}
-          onSubmitResponse={({ id, task }: LabelAssistantReplyTaskResponse) =>
-            submit(id, task.message_id, task.reply, task.valid_labels, sliderValues)
-          }
-        />
-      }
-    />
+    <>
+      <Head>
+        <title>Label Assistant Reply</title>
+        <meta name="description" content="Label Assistant Reply" />
+      </Head>
+      <Task key={tasks[0].task.id} task={tasks[0].task} trigger={trigger} mutate={reset} />
+    </>
   );
 };
 

website/src/pages/label/label_initial_prompt.tsx

@@ -1,38 +1,28 @@
-import { useState } from "react";
+import { Container } from "@chakra-ui/react";
+import Head from "next/head";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
-import { MessageView } from "src/components/Messages";
-import { TaskControls } from "src/components/Survey/TaskControls";
-import { LabelSliderGroup, LabelTask } from "src/components/Tasks/LabelTask";
-import { LabelInitialPromptTaskResponse, useLabelInitialPromptTask } from "src/hooks/tasks/useLabelingTask";
+import { Task } from "src/components/Tasks/Task";
+import { useLabelInitialPromptTask } from "src/hooks/tasks/useLabelingTask";
 
 const LabelInitialPrompt = () => {
-  const [sliderValues, setSliderValues] = useState<number[]>([]);
+  const { tasks, isLoading, trigger, reset } = useLabelInitialPromptTask();
 
-  const { tasks, isLoading, submit, reset } = useLabelInitialPromptTask();
-
-  if (isLoading || tasks.length === 0) {
+  if (isLoading) {
     return <LoadingScreen />;
   }
 
-  const task = tasks[0].task;
+  if (tasks.length === 0) {
+    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+  }
 
   return (
-    <LabelTask
-      title="Label Initial Prompt"
-      desc="Provide labels for the following prompt"
-      messages={<MessageView text={task.prompt} is_assistant message_id={task.message_id} />}
-      inputs={<LabelSliderGroup labelIDs={task.valid_labels} onChange={setSliderValues} />}
-      controls={
-        <TaskControls
-          tasks={tasks}
-          onSkipTask={() => reset()}
-          onNextTask={reset}
-          onSubmitResponse={({ id, task }: LabelInitialPromptTaskResponse) =>
-            submit(id, task.message_id, task.prompt, task.valid_labels, sliderValues)
-          }
-        />
-      }
-    />
+    <>
+      <Head>
+        <title>Label Initial Prompt</title>
+        <meta name="description" content="Label Initial Prompt" />
+      </Head>
+      <Task key={tasks[0].task.id} task={tasks[0].task} trigger={trigger} mutate={reset} />
+    </>
   );
 };
 

website/src/pages/label/label_prompter_reply.tsx

@@ -1,43 +1,28 @@
-import { useState } from "react";
+import { Container } from "@chakra-ui/react";
+import Head from "next/head";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
-import { MessageTable } from "src/components/Messages/MessageTable";
-import { TaskControls } from "src/components/Survey/TaskControls";
-import { LabelSliderGroup, LabelTask } from "src/components/Tasks/LabelTask";
-import { LabelPrompterReplyTaskResponse, useLabelPrompterReplyTask } from "src/hooks/tasks/useLabelingTask";
-import { Message } from "src/types/Conversation";
+import { Task } from "src/components/Tasks/Task";
+import { useLabelPrompterReplyTask } from "src/hooks/tasks/useLabelingTask";
 
 const LabelPrompterReply = () => {
-  const [sliderValues, setSliderValues] = useState<number[]>([]);
+  const { tasks, isLoading, trigger, reset } = useLabelPrompterReplyTask();
 
-  const { tasks, isLoading, submit, reset } = useLabelPrompterReplyTask();
-
-  if (isLoading || tasks.length === 0) {
+  if (isLoading) {
     return <LoadingScreen />;
   }
 
-  const task = tasks[0].task;
-  const messages: Message[] = [
-    ...task.conversation.messages,
-    { text: task.reply, is_assistant: false, message_id: task.message_id },
-  ];
+  if (tasks.length === 0) {
+    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+  }
 
   return (
-    <LabelTask
-      title="Label Prompter Reply"
-      desc="Given the following discussion, provide labels for the final prompt"
-      messages={<MessageTable messages={messages} />}
-      inputs={<LabelSliderGroup labelIDs={task.valid_labels} onChange={setSliderValues} />}
-      controls={
-        <TaskControls
-          tasks={tasks}
-          onSkipTask={() => reset()}
-          onNextTask={reset}
-          onSubmitResponse={({ id, task }: LabelPrompterReplyTaskResponse) =>
-            submit(id, task.message_id, task.reply, task.valid_labels, sliderValues)
-          }
-        />
-      }
-    />
+    <>
+      <Head>
+        <title>Label Prompter Reply</title>
+        <meta name="description" content="Label Prompter Reply" />
+      </Head>
+      <Task key={tasks[0].task.id} task={tasks[0].task} trigger={trigger} mutate={reset} />
+    </>
   );
 };