wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-08-04 12:33:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Darkmode for survey pages. Fixes for eslint.

Browse Source
This commit is contained in:
Desmond Grealy
2023-01-02 18:36:54 -08:00
parent 5f3d32b875
commit 3d13c7c91c
35 changed files with 4778 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/pages/auth/signin.tsx
+9 -7
View File
@@ -27,12 +27,9 @@ function Signin({ csrfToken, providers }) {
const { colorMode } = useColorMode();
const bgColorClass = colorMode === "light" ? "bg-gray-50" : "bg-chakra-gray-900";
const buttonBgColor = colorMode === "light" ? "#2563eb" : "#2563eb";
const borderClass = colorMode === "light" ? "border-slate-200" : "border-transparent";
const buttonColorScheme = colorMode === "light" ? "blue" : "dark-blue-btn";
return (
<div className={bgColorClass}>
<Head>
@@ -45,7 +42,7 @@ function Signin({ csrfToken, providers }) {
<form onSubmit={signinWithDebugCredentials} className="border-2 border-orange-600 rounded-md p-4 relative">
<span className={`text-orange-600 absolute -top-3 left-5 ${bgColorClass} px-1`}>For Debugging Only</span>
<Stack>
<Input variant="outline" size="lg" placeholder="Username" ref={debugUsernameEl}/>
<Input variant="outline" size="lg" placeholder="Username" ref={debugUsernameEl} />
<Button size={"lg"} leftIcon={<FaBug />} colorScheme={buttonColorScheme} color="white" type="submit">
Continue with Debug User
</Button>
@@ -56,7 +53,13 @@ function Signin({ csrfToken, providers }) {
<form onSubmit={signinWithEmail}>
<Stack>
<Input variant="outline" size="lg" placeholder="Email Address" ref={emailEl} />
<Button size={"lg"} leftIcon={<FaEnvelope />} type="submit" colorScheme={buttonColorScheme} color="white">
<Button
size={"lg"}
leftIcon={<FaEnvelope />}
type="submit"
colorScheme={buttonColorScheme}
color="white"
>
Continue with Email
</Button>
</Stack>
@@ -117,7 +120,6 @@ function Signin({ csrfToken, providers }) {
);
}
Signin.getLayout = (page) => (
<div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
<Header transparent={true} />
@@ -128,7 +130,7 @@ Signin.getLayout = (page) => (
export default Signin;
export async function getServerSideProps(context) {
export async function getServerSideProps() {
const csrfToken = await getCsrfToken();
const providers = await getProviders();
return {
website/src/pages/create/assistant_reply.tsx
+14 -22
View File
@@ -1,16 +1,16 @@
import { Container, Flex, Textarea } from "@chakra-ui/react";
import { Container, Textarea } from "@chakra-ui/react";
import { useRef, useState } from "react";
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 { 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";
import { useColorMode } from "@chakra-ui/react";
import { TaskControls } from "src/components/Survey/TaskControls";
const AssistantReply = () => {
const [tasks, setTasks] = useState([]);
@@ -45,6 +45,9 @@ const AssistantReply = () => {
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..." />;
}
@@ -54,31 +57,20 @@ const AssistantReply = () => {
}
const task = tasks[0].task;
const endTask = tasks[tasks.length - 1];
return (
<Container className="p-6 text-gray-800">
<TwoColumns>
<div className={`p-12 ${mainBgClasses}`}>
<TwoColumnsWithCards>
<>
<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} post_id={task.id} />
</>
<Textarea name="reply" placeholder="Reply..." ref={inputRef} />
</TwoColumns>
</TwoColumnsWithCards>
<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>
{endTask.task.type !== "task_done" ? (
<SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
) : (
<SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
)}
</Flex>
</section>
</Container>
<TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
</div>
);
};
website/src/pages/create/summarize_story.tsx
+18 -23
View File
@@ -1,15 +1,13 @@
import { Flex, Textarea } from "@chakra-ui/react";
import Head from "next/head";
import { Textarea } from "@chakra-ui/react";
import { useRef, useState } from "react";
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 { 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";
import { useColorMode } from "@chakra-ui/react";
import { TaskControls } from "src/components/Survey/TaskControls";
const SummarizeStory = () => {
// Use an array of tasks that record the sequence of steps until a task is
@@ -20,7 +18,7 @@ const SummarizeStory = () => {
// 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/summarize_story", fetcher, {
const { isLoading, mutate } = useSWRImmutable("/api/new_task/summarize_story", fetcher, {
onSuccess: (data) => {
setTasks([data]);
},
@@ -50,6 +48,14 @@ const SummarizeStory = () => {
});
};
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..." />;
}
@@ -59,31 +65,20 @@ const SummarizeStory = () => {
}
return (
<>
<Head>
<title>Summarize A Story</title>
<meta name="description" content="Summarize a story to train our model." />
</Head>
<div className={`p-12 ${mainBgClasses}`}>
<main className="p-6 h-full mx-auto bg-slate-100 text-gray-800">
<TwoColumns>
<TwoColumnsWithCards>
<>
<h5 className="text-lg font-semibold">Instruction</h5>
<p className="text-lg py-1">Summarize the following story</p>
<div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">{tasks[0].task.story}</div>
</>
<Textarea name="summary" placeholder="Summary" ref={inputRef} />
</TwoColumns>
</TwoColumnsWithCards>
<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>
</Flex>
</section>
<TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
</main>
</>
</div>
);
};
website/src/pages/create/user_reply.tsx
+20 -24
View File
@@ -1,20 +1,17 @@
import { Flex, Textarea, useColorModeValue } from "@chakra-ui/react";
import { Container } from "src/components/Container";
import { Textarea } from "@chakra-ui/react";
import { useRef, useState } from "react";
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 { 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";
import { useColorMode } from "@chakra-ui/react";
import { TaskControls } from "src/components/Survey/TaskControls";
const UserReply = () => {
const [tasks, setTasks] = useState([]);
const bg = useColorModeValue("white", "gray.400");
const inputRef = useRef<HTMLTextAreaElement>(null);
@@ -47,19 +44,28 @@ const UserReply = () => {
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-gray-800">No tasks found...</Container>;
return (
<div className={`p-12 ${mainBgClasses}`}>
<div className="flex h-full">
<div className="text-xl font-bold mx-auto my-auto">No tasks found...</div>
</div>
</div>
);
}
const task = tasks[0].task;
const endTask = tasks[tasks.length - 1];
return (
<Container className="p-6">
<TwoColumns>
<div className={`p-12 ${mainBgClasses}`}>
<TwoColumnsWithCards>
<>
<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>
@@ -67,20 +73,10 @@ const UserReply = () => {
{task.hint && <p className="text-lg py-1">Hint: {task.hint}</p>}
</>
<Textarea name="reply" placeholder="Reply..." ref={inputRef} />
</TwoColumns>
</TwoColumnsWithCards>
<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>
{endTask.task.type !== "task_done" ? (
<SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
) : (
<SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
)}
</Flex>
</section>
</Container>
<TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
</div>
);
};
website/src/pages/evaluate/rank_assistant_replies.tsx
+21 -27
View File
@@ -1,15 +1,14 @@
import { Button, Container, Flex, useColorModeValue } from "@chakra-ui/react";
import Head from "next/head";
import { useState } from "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 fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
import { SurveyCard } from "src/components/Survey/SurveyCard";
import { useColorMode } from "@chakra-ui/react";
import { TaskControls } from "src/components/Survey/TaskControls";
const RankAssistantReplies = () => {
const [tasks, setTasks] = useState([]);
@@ -18,8 +17,7 @@ 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, mutate } = useSWRImmutable("/api/new_task/rank_assistant_replies", fetcher, {
onSuccess: (data) => {
setTasks([data]);
@@ -48,46 +46,42 @@ const RankAssistantReplies = () => {
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 bg-slate-100 text-gray-800">No Tasks Found...</Container>;
return (
<div className={`p-12 ${mainBgClasses}`}>
<div className="flex h-full">
<div className="text-xl font-bold mx-auto my-auto">No tasks found...</div>
</div>
</div>
);
}
const replies = tasks[0].task.replies as string[];
const endTask = tasks[tasks.length - 1];
return (
<>
<Head>
<title>Rank Assistant Replies</title>
<meta name="description" content="Rank Assistant Replies." />
</Head>
<Container className="p-6 bg-slate-100 text-gray-800">
<Container bg={bg} className="rounded-lg shadow-lg block p-6 mb-8">
<div className={`p-12 ${mainBgClasses}`}>
<SurveyCard className="max-w-7xl mx-auto h-fit mb-24">
<h5 className="text-lg font-semibold mb-4">Instructions</h5>
<p className="text-lg py-1">
Given the following replies, sort them from best to worst, best being first, worst being last.
</p>
<Sortable items={replies} onChange={setRanking} />
</Container>
<Sortable items={replies} onChange={setRanking} className="my-8" />
</SurveyCard>
<Container bg={bg} className="mb-8 p-4 rounded-lg shadow-lg 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>
{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>
<TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
</div>
</>
);
};
website/src/pages/evaluate/rank_initial_prompts.tsx
+20 -26
View File
@@ -1,15 +1,14 @@
import { Flex } from "@chakra-ui/react";
import Head from "next/head";
import { useState } from "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 fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
import { SurveyCard } from "src/components/Survey/SurveyCard";
import { useColorMode } from "@chakra-ui/react";
import { TaskControls } from "src/components/Survey/TaskControls";
const RankInitialPrompts = () => {
const [tasks, setTasks] = useState([]);
@@ -18,7 +17,7 @@ const RankInitialPrompts = () => {
* The best prompt will have index 0, and the worst is the last.
*/
const [ranking, setRanking] = useState<number[]>([]);
const bg = useColorModeValue("gray.100", "gray.800");
// const bg = useColorModeValue("gray.100", "gray.800");
const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_initial_prompts", fetcher, {
onSuccess: (data) => {
@@ -48,45 +47,40 @@ const RankInitialPrompts = () => {
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 bg-slate-100 text-gray-800">No tasks found...</Container>;
return (
<div className={`p-12 ${mainBgClasses}`}>
<div className="flex h-full">
<div className="text-xl font-bold mx-auto my-auto">No tasks found...</div>
</div>
</div>
);
}
const endTask = tasks[tasks.length - 1];
return (
<>
<Head>
<title>Rank Initial Prompts</title>
<meta name="description" content="Rank initial prompts." />
</Head>
<Container className="p-6 text-gray-800">
<Container bg={bg} className="rounded-lg shadow-lg block p-6 mb-8">
<div className={`p-12 ${mainBgClasses}`}>
<SurveyCard className="max-w-7xl mx-auto h-fit mb-24">
<h5 className="text-lg font-semibold mb-4">Instructions</h5>
<p className="text-lg py-1">
Given the following prompts, sort them from best to worst, best being first, worst being last.
</p>
<Sortable items={tasks[0].task.prompts} onChange={setRanking} />
</Container>
<Sortable items={tasks[0].task.prompts} onChange={setRanking} className="my-8" />
</SurveyCard>
<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>
{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>
<TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
</div>
</>
);
};
website/src/pages/evaluate/rank_user_replies.tsx
+19 -26
View File
@@ -1,15 +1,14 @@
import { Flex } from "@chakra-ui/react";
import Head from "next/head";
import { useState } from "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 fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
import { SurveyCard } from "src/components/Survey/SurveyCard";
import { useColorMode } from "@chakra-ui/react";
import { TaskControls } from "src/components/Survey/TaskControls";
const RankUserReplies = () => {
const [tasks, setTasks] = useState([]);
@@ -19,7 +18,6 @@ const RankUserReplies = () => {
*/
const [ranking, setRanking] = useState<number[]>([]);
const bg = useColorModeValue("gray.100", "gray.800");
const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_prompter_replies", fetcher, {
onSuccess: (data) => {
setTasks([data]);
@@ -48,46 +46,41 @@ const RankUserReplies = () => {
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 bg-slate-100 text-gray-800">Loading...</Container>;
return (
<div className={`p-12 ${mainBgClasses}`}>
<div className="flex h-full">
<div className="text-xl font-bold mx-auto my-auto">No tasks found...</div>
</div>
</div>
);
}
const replies = tasks[0].task.replies as string[];
const endTask = tasks[tasks.length - 1];
return (
<>
<Head>
<title>Rank User Replies</title>
<meta name="description" content="Rank User Replies." />
</Head>
<Container className="p-6 text-gray-800">
<Container bg={bg} className="rounded-lg shadow-lg block bg-white p-6 mb-8">
<div className={`p-12 ${mainBgClasses}`}>
<SurveyCard className="max-w-7xl mx-auto h-fit mb-24">
<h5 className="text-lg font-semibold mb-4">Instructions</h5>
<p className="text-lg py-1">
Given the following replies, sort them from best to worst, best being first, worst being last.
</p>
<Sortable items={replies} onChange={setRanking} />
</Container>
<Sortable items={replies} onChange={setRanking} className="my-8" />
</SurveyCard>
<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>
{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>
<TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
</div>
</>
);
};
website/src/pages/evaluate/rate_summary.tsx
+22 -21
View File
@@ -1,18 +1,18 @@
import { Flex, Textarea } from "@chakra-ui/react";
import { Textarea } from "@chakra-ui/react";
import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
import Head from "next/head";
import { useState } from "react";
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 { 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";
import { useColorMode } from "@chakra-ui/react";
import { TaskControls } from "src/components/Survey/TaskControls";
const RateSummary = () => {
// Use an array of tasks that record the sequence of steps until a task is
// deemed complete.
@@ -50,15 +50,27 @@ const RateSummary = () => {
});
};
const fetchNextTask = () => {
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 <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
return (
<div className={`p-12 ${mainBgClasses}`}>
<div className="flex h-full">
<div className="text-xl font-bold mx-auto my-auto">No tasks found...</div>
</div>
</div>
);
}
const endTask = tasks[tasks.length - 1];
return (
<>
<Head>
@@ -66,7 +78,7 @@ const RateSummary = () => {
<meta name="description" content="Rate a proposed story summary." />
</Head>
<main className="p-6 bg-slate-100 text-gray-800">
<TwoColumns>
<TwoColumnsWithCards>
<>
<h5 className="text-lg font-semibold mb-4">Instruction</h5>
<div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">{tasks[0].task.full_text}</div>
@@ -89,20 +101,9 @@ const RateSummary = () => {
</ul>
<Textarea name="notes" placeholder="Optional notes" />
</section>
</TwoColumns>
</TwoColumnsWithCards>
<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>
{endTask.task.type !== "task_done" ? (
<SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
) : (
<SubmitButton onClick={mutate}>Next Task</SubmitButton>
)}
</Flex>
</section>
<TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
</main>
</>
);
website/src/pages/index.tsx
+1 -2
View File
@@ -6,7 +6,6 @@ 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 { Box, Container } from "@chakra-ui/react";
const Home = () => {
const { data: session } = useSession();
@@ -21,7 +20,7 @@ const Home = () => {
/>
</Head>
{session ? (
<TaskSelection />
<TaskSelection />
) : (
<main className="oa-basic-theme">
<Hero />