Merge pull request #583 from LAION-AI/web-tidy-sweep

Web tidy sweep

website/cypress/e2e/evaluate/rank_assistant_replies.cy.ts

@@ -1,7 +1,7 @@
 describe("ranking prompter replies", () => {
   it("completes the current task on submit and on request shows a new task", () => {
     cy.signInWithEmail("cypress@example.com");
-    cy.visit("/evaluate/rank_user_replies");
+    cy.visit("/evaluate/rank_assistant_replies");
 
     cy.get('[data-cy="task-id"').then((taskIdElement) => {
       const taskId = taskIdElement.text();

website/cypress/e2e/evaluate/rank_user_replies.cy.ts

@@ -1,7 +1,7 @@
 describe("ranking assistant replies", () => {
   it("completes the current task on submit and on request shows a new task", () => {
     cy.signInWithEmail("cypress@example.com");
-    cy.visit("/evaluate/rank_assistant_replies");
+    cy.visit("/evaluate/rank_user_replies");
 
     cy.get('[data-cy="task-id"').then((taskIdElement) => {
       const taskId = taskIdElement.text();

website/src/components/CollapsableText.tsx

@@ -12,7 +12,7 @@ import React from "react";
 
 export const CollapsableText = ({ text, maxLength = 220 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  if (typeof text != "string" || text.length <= maxLength) {
+  if (typeof text !== "string" || text.length <= maxLength) {
     return text;
   } else {
     return (

website/src/components/FlaggableElement.tsx

@@ -45,7 +45,7 @@ export const FlaggableElement = (props) => {
   });
   const { trigger } = useSWRMutation("/api/set_label", poster, {
     onSuccess: () => {
-      setIsEditing.off;
+      setIsEditing.off();
     },
   });
 
@@ -69,14 +69,14 @@ export const FlaggableElement = (props) => {
   const handleCheckboxState = (isChecked, idx) => {
     setCheckboxValues(
       checkboxValues.map((val, i) => {
-        return i == idx ? isChecked : val;
+        return i === idx ? isChecked : val;
       })
     );
   };
   const handleSliderState = (newVal, idx) => {
     setSliderValues(
       sliderValues.map((val, i) => {
-        return i == idx ? newVal : val;
+        return i === idx ? newVal : val;
       })
     );
   };

website/src/components/Messages.tsx

@@ -1,16 +1,11 @@
 import { Grid } from "@chakra-ui/react";
-import { useColorMode } from "@chakra-ui/react";
+import { forwardRef, useColorMode } from "@chakra-ui/react";
 import { useMemo } from "react";
 import { Message } from "src/types/Conversation";
+import { ValidLabel } from "src/types/Task";
 
 import { FlaggableElement } from "./FlaggableElement";
 
-export interface ValidLabel {
-  name: string;
-  display_text: string;
-  help_text: string;
-}
-
 export const Messages = ({
   messages,
   post_id,
@@ -38,7 +33,7 @@ export const Messages = ({
   return <Grid gap={2}>{items}</Grid>;
 };
 
-export const MessageView = ({ is_assistant, text, message_id }: Message) => {
+export const MessageView = forwardRef<Message, "div">(({ is_assistant, text }: Message, ref) => {
   const { colorMode } = useColorMode();
 
   const bgColor = useMemo(() => {
@@ -49,5 +44,11 @@ export const MessageView = ({ is_assistant, text, message_id }: Message) => {
     }
   }, [colorMode, is_assistant]);
 
-  return <div className={`${bgColor} p-4 rounded-md text-white whitespace-pre-wrap`}>{text}</div>;
-};
+  return (
+    <div ref={ref} className={`${bgColor} p-4 rounded-md text-white whitespace-pre-wrap`}>
+      {text}
+    </div>
+  );
+});
+
+MessageView.displayName = "MessageView";

website/src/components/Messages/MessageTable.tsx

@@ -1,11 +1,11 @@
 import { Stack, StackDivider } from "@chakra-ui/react";
 import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
 
-export function MessageTable({ messages }) {
+export function MessageTable({ messages, valid_labels }) {
   return (
     <Stack divider={<StackDivider />} spacing="4">
       {messages.map((item, idx) => (
-        <MessageTableEntry item={item} idx={idx} key={item.id} />
+        <MessageTableEntry item={item} idx={idx} key={item.message_id} valid_labels={valid_labels} />
       ))}
     </Stack>
   );

website/src/components/Messages/MessageTableEntry.tsx

@@ -2,6 +2,7 @@ import { Avatar, HStack, LinkBox, useColorModeValue } from "@chakra-ui/react";
 import { boolean } from "boolean";
 import NextLink from "next/link";
 import { FlaggableElement } from "src/components/FlaggableElement";
+import type { ValidLabel } from "src/types/Task";
 
 interface Message {
   text: string;
@@ -11,13 +12,14 @@ interface Message {
 interface MessageTableEntryProps {
   item: Message;
   idx: number;
+  valid_labels: ValidLabel[];
 }
 export function MessageTableEntry(props: MessageTableEntryProps) {
-  const { item, idx } = props;
+  const { item, idx, valid_labels } = props;
   const bgColor = useColorModeValue(idx % 2 === 0 ? "bg-slate-800" : "bg-black", "bg-sky-900");
 
   return (
-    <FlaggableElement text={item.text} post_id={item.id} key={`flag_${item.id}`}>
+    <FlaggableElement text={item.text} post_id={item.id} key={`flag_${item.id}`} flaggable_labels={valid_labels}>
       <HStack>
         <Avatar
           name={`${boolean(item.is_assistant) ? "Assitant" : "User"}`}

website/src/components/Messages/MessageWithChildren.tsx

@@ -64,7 +64,7 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
           <Flex justifyContent="center" pb="2">
             <Box maxWidth="container.sm" flex="1" px={isFirstOrOnly ? [4, 6, 8, 9] : "0"}>
               <Box px={isFirstOrOnly ? "2" : "0"}>
-                <MessageTableEntry item={message} idx={1} />
+                <MessageTableEntry item={message} idx={1} valid_labels={[]} />
               </Box>
             </Box>
           </Flex>
@@ -90,7 +90,7 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
             <HStack {...MessageStackProps}>
               {children.map((item, idx) => (
                 <Box maxWidth="container.sm" flex="1" key={`recursiveMessageWChildren_${idx}`}>
-                  <MessageTableEntry item={item} idx={idx * 2} />
+                  <MessageTableEntry item={item} idx={idx * 2} valid_labels={[]} />
                 </Box>
               ))}
             </HStack>

website/src/components/Tasks/CreateTask.tsx

@@ -1,10 +1,9 @@
 import { useState } from "react";
-
 import { Messages } from "src/components/Messages";
 import { TaskControls } from "src/components/Survey/TaskControls";
 import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
-import { TaskInfo } from "./TaskTypes";
+import { TaskInfo } from "src/components/Tasks/TaskTypes";
 
 export interface CreateTaskProps {
   // we need a task type

website/src/components/Tasks/EvaluateTask.tsx

@@ -33,6 +33,7 @@ export const EvaluateTask = ({ tasks, trigger, onSkipTask, onNextTask, mainBgCla
     messages = messages.map((message, index) => ({ ...message, id: index }));
   }
 
+  const valid_labels = tasks[0].valid_labels;
   const sortables = tasks[0].task.replies ? "replies" : "prompts";
 
   return (
@@ -42,13 +43,13 @@ export const EvaluateTask = ({ tasks, trigger, onSkipTask, onNextTask, mainBgCla
         <p className="text-lg py-1">
           Given the following {sortables}, sort them from best to worst, best being first, worst being last.
         </p>
-        {messages ? <MessageTable messages={messages} /> : null}
+        {messages ? <MessageTable messages={messages} valid_labels={valid_labels} /> : null}
         <Sortable items={tasks[0].task[sortables]} onChange={setRanking} className="my-8" />
       </SurveyCard>
 
       <TaskControlsOverridable
         tasks={tasks}
-        isValid={ranking.length == tasks[0].task[sortables].length}
+        isValid={ranking.length === tasks[0].task[sortables].length}
         prepareForSubmit={() => setRanking(tasks[0].task[sortables].map((_, idx) => idx))}
         onSubmitResponse={submitResponse}
         onSkipTask={(task, reason) => {

website/src/components/Tasks/Task.tsx

@@ -1,8 +1,8 @@
-import { CreateTask } from "./CreateTask";
-import { EvaluateTask } from "./EvaluateTask";
-import { TaskCategory, TaskTypes } from "./TaskTypes";
-import useSWRMutation from "swr/mutation";
+import { CreateTask } from "src/components/Tasks/CreateTask";
+import { EvaluateTask } from "src/components/Tasks/EvaluateTask";
+import { TaskCategory, TaskTypes } from "src/components/Tasks/TaskTypes";
 import poster from "src/lib/poster";
+import useSWRMutation from "swr/mutation";
 
 export const Task = ({ tasks, trigger, mutate, mainBgClasses }) => {
   const task = tasks[0].task;

website/src/lib/oasst_api_client.ts

@@ -30,7 +30,7 @@ export class OasstApiClient {
       body: JSON.stringify(body),
     });
 
-    if (resp.status == 204) {
+    if (resp.status === 204) {
       return null;
     }
 
@@ -57,7 +57,7 @@ export class OasstApiClient {
       },
     });
 
-    if (resp.status == 204) {
+    if (resp.status === 204) {
       return null;
     }
 

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

@@ -39,8 +39,6 @@ const handler = async (req, res) => {
 
   // Add the valid labels that can be used to flag messages in this Task
   registeredTask["valid_labels"] = valid_labels;
-  // Update the backend with our Task ID
-  await oasstApiClient.ackTask(task.id, registeredTask.id);
 
   // Send the results to the client.
   res.status(200).json(registeredTask);

website/src/pages/api/reject_task.ts

@@ -1,6 +1,7 @@
 import { Prisma } from "@prisma/client";
 import { getToken } from "next-auth/jwt";
 import { oasstApiClient } from "src/lib/oasst_api_client";
+import prisma from "src/lib/prismadb";
 
 const handler = async (req, res) => {
   const token = await getToken({ req });

website/src/pages/api/set_label.ts

@@ -1,5 +1,4 @@
 import { getToken } from "next-auth/jwt";
-import prisma from "src/lib/prismadb";
 
 /**
  * Sets the Label in the Backend.
@@ -15,7 +14,7 @@ const handler = async (req, res) => {
   }
 
   // Parse out the local message_id, task ID and the interaction contents.
-  const { message_id, post_id, label_map, text } = await JSON.parse(req.body);
+  const { message_id, label_map, text } = await JSON.parse(req.body);
 
   const interactionRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/text_labels`, {
     method: "POST",

website/src/pages/auth/verify.tsx

@@ -1,7 +1,6 @@
 import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { getCsrfToken, getProviders } from "next-auth/react";
-import { AuthLayout } from "src/components/AuthLayout";
 
 export default function Verify() {
   const { colorMode } = useColorMode();

website/src/pages/create/summarize_story.tsx

@@ -63,7 +63,7 @@ const SummarizeStory = () => {
     return <LoadingScreen text="Loading..." />;
   }
 
-  if (tasks.length == 0) {
+  if (tasks.length === 0) {
     return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
   }
 

website/src/pages/evaluate/rate_summary.tsx

@@ -60,7 +60,7 @@ const RateSummary = () => {
     return <LoadingScreen text="Loading..." />;
   }
 
-  if (tasks.length == 0) {
+  if (tasks.length === 0) {
     return (
       <div className={`p-12 ${mainBgClasses}`}>
         <div className="flex h-full">

website/src/pages/index.tsx

@@ -1,10 +1,21 @@
 import Head from "next/head";
+import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
+import { useEffect } from "react";
 import { CallToAction } from "src/components/CallToAction";
 import { Faq } from "src/components/Faq";
 import { Hero } from "src/components/Hero";
 import { getTransparentHeaderLayout } from "src/components/Layout";
 
 const Home = () => {
+  const router = useRouter();
+  const { status } = useSession();
+  useEffect(() => {
+    if (status === "authenticated") {
+      router.push("/dashboard");
+    }
+  }, [router, status]);
+
   return (
     <>
       <Head>

website/src/pages/label/label_assistant_reply.tsx

@@ -16,6 +16,7 @@ const LabelAssistantReply = () => {
   }
 
   const task = tasks[0].task;
+  const valid_labels = tasks[0].valid_labels;
   const messages: Message[] = [
     ...task.conversation.messages,
     { text: task.reply, is_assistant: true, message_id: task.message_id },
@@ -25,7 +26,7 @@ const LabelAssistantReply = () => {
     <LabelTask
       title="Label Assistant Reply"
       desc="Given the following discussion, provide labels for the final prompt"
-      messages={<MessageTable messages={messages} />}
+      messages={<MessageTable messages={messages} valid_labels={valid_labels} />}
       inputs={<LabelSliderGroup labelIDs={task.valid_labels} onChange={setSliderValues} />}
       controls={
         <TaskControls

website/src/pages/label/label_prompter_reply.tsx

@@ -16,6 +16,7 @@ const LabelPrompterReply = () => {
   }
 
   const task = tasks[0].task;
+  const valid_labels = tasks[0].valid_labels;
   const messages: Message[] = [
     ...task.conversation.messages,
     { text: task.reply, is_assistant: false, message_id: task.message_id },
@@ -25,7 +26,7 @@ const LabelPrompterReply = () => {
     <LabelTask
       title="Label Prompter Reply"
       desc="Given the following discussion, provide labels for the final prompt"
-      messages={<MessageTable messages={messages} />}
+      messages={<MessageTable messages={messages} valid_labels={valid_labels} />}
       inputs={<LabelSliderGroup labelIDs={task.valid_labels} onChange={setSliderValues} />}
       controls={
         <TaskControls

website/src/pages/messages/[id]/index.tsx

@@ -41,7 +41,7 @@ const MessageDetail = ({ id }) => {
                 Parent
               </Text>
               <Box rounded="lg" p="2">
-                <MessageTableEntry item={parent} idx={1} />
+                <MessageTableEntry item={parent} idx={1} valid_labels={[]} />
               </Box>
             </>
           )}

website/src/pages/messages/index.tsx

@@ -52,7 +52,11 @@ const MessagesDashboard = () => {
             borderRadius="xl"
             className="p-6 shadow-sm"
           >
-            {receivedMessages ? <MessageTable messages={messages} /> : <CircularProgress isIndeterminate />}
+            {receivedMessages ? (
+              <MessageTable messages={messages} valid_labels={[]} />
+            ) : (
+              <CircularProgress isIndeterminate />
+            )}
           </Box>
         </Box>
         <Box>
@@ -66,7 +70,11 @@ const MessagesDashboard = () => {
             borderRadius="xl"
             className="p-6 shadow-sm"
           >
-            {receivedUserMessages ? <MessageTable messages={userMessages} /> : <CircularProgress isIndeterminate />}
+            {receivedUserMessages ? (
+              <MessageTable messages={userMessages} valid_labels={[]} />
+            ) : (
+              <CircularProgress isIndeterminate />
+            )}
           </Box>
         </Box>
       </SimpleGrid>

website/src/types/Task.ts

@@ -12,6 +12,12 @@ export const enum TaskType {
   label_assistant_reply = "label_assistant_reply",
 }
 
+export interface ValidLabel {
+  name: string;
+  display_text: string;
+  help_text: string;
+}
+
 export interface BaseTask {
   id: string;
   type: TaskType;
@@ -21,4 +27,5 @@ export interface TaskResponse<Task extends BaseTask> {
   id: string;
   userId: string;
   task: Task;
+  valid_labels: ValidLabel[];
 }