Merge pull request #329 from othrayte/website-implement-create-initial-prompt

Website implement create initial prompt

website/cypress/e2e/create/initial_prompt.cy.ts

@@ -0,0 +1,26 @@
+import { faker } from "@faker-js/faker";
+
+describe("creating initial prompts", () => {
+  it("completes the current task on submit and on request shows a new task", () => {
+    cy.signInWithEmail("cypress@example.com");
+    cy.visit("/create/initial_prompt");
+
+    cy.get('[data-cy="task-id"').then((taskIdElement) => {
+      const taskId = taskIdElement.text();
+
+      const prompt = faker.lorem.sentence();
+      cy.log("prompt", prompt);
+      cy.get('[data-cy="reply"').type(prompt);
+
+      cy.get('[data-cy="submit"]').click();
+
+      cy.get('[data-cy="next-task"]').click();
+
+      cy.get('[data-cy="task-id"').should((taskIdElement) => {
+        expect(taskIdElement.text()).not.to.eq(taskId);
+      });
+    });
+  });
+});
+
+export {};

website/src/components/Survey/TaskControls.tsx

@@ -30,9 +30,13 @@ export const TaskControls = (props: TaskControlsProps) => {
       <Flex justify="center" ml="auto" gap={2}>
         <SkipButton>Skip</SkipButton>
         {endTask.task.type !== "task_done" ? (
-          <SubmitButton onClick={() => props.onSubmitResponse(props.tasks[0])}>Submit</SubmitButton>
+          <SubmitButton data-cy="submit" onClick={() => props.onSubmitResponse(props.tasks[0])}>
+            Submit
+          </SubmitButton>
         ) : (
-          <SubmitButton onClick={props.onSkip}>Next Task</SubmitButton>
+          <SubmitButton data-cy="next-task" onClick={props.onSkip}>
+            Next Task
+          </SubmitButton>
         )}
       </Flex>
     </section>

website/src/components/TaskSelection/TaskSelection.tsx

@@ -26,6 +26,12 @@ export const TaskSelection = () => {
           title="Summarize stories"
           link="/create/summarize_story"
         /> */}
+        <TaskOption
+          alt="Create Initial Prompt"
+          img="/images/logos/logo.svg"
+          title="Create Initial Prompt"
+          link="/create/initial_prompt"
+        />
         <TaskOption alt="Reply as User" img="/images/logos/logo.svg" title="Reply as User" link="/create/user_reply" />
         <TaskOption
           alt="Reply as Assistant"

website/src/pages/auth/signin.tsx

@@ -52,8 +52,9 @@ function Signin({ csrfToken, providers }) {
           {email && (
             <form onSubmit={signinWithEmail}>
               <Stack>
-                <Input variant="outline" size="lg" placeholder="Email Address" ref={emailEl} />
+                <Input data-cy="email-address" variant="outline" size="lg" placeholder="Email Address" ref={emailEl} />
                 <Button
+                  data-cy="signin-email-button"
                   size={"lg"}
                   leftIcon={<FaEnvelope />}
                   type="submit"

website/src/pages/create/assistant_reply.tsx

@@ -65,7 +65,7 @@ const AssistantReply = () => {
           <p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
           <Messages messages={task.conversation.messages} post_id={task.id} />
         </>
-        <Textarea name="reply" placeholder="Reply..." ref={inputRef} />
+        <Textarea name="reply" data-cy="reply" placeholder="Reply..." ref={inputRef} />
       </TwoColumnsWithCards>
 
       <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />

website/src/pages/create/initial_prompt.tsx

@@ -0,0 +1,74 @@
+import { Container, Textarea } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
+import { useRef, useState } from "react";
+import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { TaskControls } from "src/components/Survey/TaskControls";
+import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
+import fetcher from "src/lib/fetcher";
+import poster from "src/lib/poster";
+import useSWRImmutable from "swr/immutable";
+import useSWRMutation from "swr/mutation";
+
+const InitialPrompt = () => {
+  const [tasks, setTasks] = useState([]);
+
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const { isLoading, mutate } = useSWRImmutable("/api/new_task/initial_prompt ", fetcher, {
+    onSuccess: (data) => {
+      setTasks([data]);
+    },
+  });
+
+  const { trigger } = useSWRMutation("/api/update_task", poster, {
+    onSuccess: async (data) => {
+      const newTask = await data.json();
+      setTasks((oldTasks) => [...oldTasks, newTask]);
+    },
+  });
+
+  const submitResponse = (task: { id: string }) => {
+    const text = inputRef.current.value.trim();
+    trigger({
+      id: task.id,
+      update_type: "text_reply_to_message",
+      content: {
+        text,
+      },
+    });
+  };
+
+  const fetchNextTask = () => {
+    inputRef.current.value = "";
+    mutate();
+  };
+
+  const { colorMode } = useColorMode();
+  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
+
+  if (isLoading) {
+    return <LoadingScreen text="Loading..." />;
+  }
+
+  if (tasks.length == 0) {
+    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+  }
+
+  const task = tasks[0].task;
+
+  return (
+    <div className={`p-12 ${mainBgClasses}`}>
+      <TwoColumnsWithCards>
+        <>
+          <h5 className="text-lg font-semibold">Start a conversation</h5>
+          <p className="text-lg py-1">Create an initial message to send to the assistant</p>
+        </>
+        <Textarea name="reply" data-cy="reply" placeholder="Question, task, greeting or similar..." ref={inputRef} />
+      </TwoColumnsWithCards>
+
+      <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
+    </div>
+  );
+};
+
+export default InitialPrompt;

website/src/pages/create/user_reply.tsx

@@ -72,7 +72,7 @@ const UserReply = () => {
           <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} />
+        <Textarea name="reply" data-cy="reply" placeholder="Reply..." ref={inputRef} />
       </TwoColumnsWithCards>
 
       <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />