Merge branch 'main' into 766_admin_enhancement

website/src/pages/404.tsx

@@ -3,6 +3,7 @@ import Head from "next/head";
 import { FiAlertTriangle } from "react-icons/fi";
 import { EmptyState } from "src/components/EmptyState";
 import { getTransparentHeaderLayout } from "src/components/Layout";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 function Error() {
   return (

website/src/pages/500.tsx

@@ -3,6 +3,7 @@ import Head from "next/head";
 import { FiAlertTriangle } from "react-icons/fi";
 import { EmptyState } from "src/components/EmptyState";
 import { getTransparentHeaderLayout } from "src/components/Layout";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 function ServerError() {
   return (

website/src/pages/about.tsx

@@ -4,6 +4,7 @@ import { Container } from "src/components/Container";
 import Roadmap from "src/components/Roadmap";
 import Services from "src/components/Services";
 import Vision from "src/components/Vision";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const AboutPage = () => {
   return (

website/src/pages/account/edit.tsx

@@ -4,6 +4,7 @@ import Router from "next/router";
 import { useSession } from "next-auth/react";
 import React from "react";
 import { Control, useForm, useWatch } from "react-hook-form";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 export default function Account() {
   const { data: session } = useSession();

website/src/pages/account/index.tsx

@@ -1,8 +1,11 @@
-import { Button } from "@chakra-ui/react";
+import { Button, Divider, Flex, Grid, Icon, Text } from "@chakra-ui/react";
 import Head from "next/head";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
 import React from "react";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
+import { MdOutlineEdit } from "react-icons/md";
+import { SurveyCard } from "src/components/Survey/SurveyCard";
 
 export default function Account() {
   const { data: session } = useSession();
@@ -19,15 +22,28 @@ export default function Account() {
           content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
         />
       </Head>
-      <div className="oa-basic-theme">
-        <main className="h-3/4 z-0 flex flex-col items-center justify-center">
-          <p>{session.user.name || "No username"}</p>
-          <Button>
-            <Link href="/account/edit">Edit Username</Link>
-          </Button>
-          <p>{session.user.email}</p>
-        </main>
-      </div>
+      <main className="oa-basic-theme p-6">
+        <Flex m="auto" className="max-w-7xl" alignContent="center">
+          <SurveyCard className="w-full">
+            <Text as="b" display="block" fontSize="2xl" py={2}>
+              Your Account
+            </Text>
+            <Divider />
+            <Grid gridTemplateColumns="repeat(2, max-content)" alignItems="center" gap={6} py={4}>
+              <Text as="b">Username</Text>
+              <Flex gap={2}>
+                {session.user.name ?? "(No username)"}
+                <Link href="/account/edit">
+                  <Icon boxSize={5} as={MdOutlineEdit} />
+                </Link>
+              </Flex>
+              <Text as="b">Email</Text>
+              <Text>{session.user.email ?? "(No Email)"}</Text>
+            </Grid>
+            <p></p>
+          </SurveyCard>
+        </Flex>
+      </main>
     </>
   );
 }

website/src/pages/admin/index.tsx

@@ -4,6 +4,7 @@ import { useSession } from "next-auth/react";
 import { useEffect } from "react";
 import { getAdminLayout } from "src/components/Layout";
 import { UserTable } from "src/components/UserTable";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 /**
  * Provides the admin index page that will display a list of users and give

website/src/pages/admin/manage_user/[id].tsx

@@ -3,6 +3,7 @@ import { InferGetServerSidePropsType } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { getAdminLayout } from "src/components/Layout";
@@ -111,7 +112,7 @@ const ManageUser = ({ user }: InferGetServerSidePropsType<typeof getServerSidePr
 /**
  * Fetch the user's data on the server side when rendering.
  */
-export async function getServerSideProps({ query }) {
+export async function getServerSideProps({ query, locale }) {
   const backend_user = await oasstApiClient.fetch_user(query.id);
   const local_user = await prisma.user.findUnique({
     where: { id: backend_user.id },
@@ -126,6 +127,7 @@ export async function getServerSideProps({ query }) {
   return {
     props: {
       user,
+      ...(await serverSideTranslations(locale, ["common"])),
     },
   };
 }

website/src/pages/api/available_tasks.ts

@@ -0,0 +1,11 @@
+import { withoutRole } from "src/lib/auth";
+import { oasstApiClient } from "src/lib/oasst_api_client";
+import { getBackendUserCore } from "src/lib/users";
+
+const handler = withoutRole("banned", async (req, res, token) => {
+  const user = await getBackendUserCore(token.sub);
+  const availableTasks = await oasstApiClient.fetch_available_tasks(user);
+  res.status(200).json(availableTasks);
+});
+
+export default handler;

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

@@ -1,6 +1,7 @@
 import { withoutRole } from "src/lib/auth";
 import { oasstApiClient } from "src/lib/oasst_api_client";
 import prisma from "src/lib/prismadb";
+import { getBackendUserCore } from "src/lib/users";
 
 /**
  * Returns a new task created from the Task Backend.  We do a few things here:
@@ -14,9 +15,10 @@ const handler = withoutRole("banned", async (req, res, token) => {
   // Fetch the new task.
   const { task_type } = req.query;
 
+  const user = await getBackendUserCore(token.sub);
   let task;
   try {
-    task = await oasstApiClient.fetchTask(task_type as string, token);
+    task = await oasstApiClient.fetchTask(task_type as string, user);
   } catch (err) {
     console.error(err);
     res.status(500).json(err);

website/src/pages/api/update_task.ts

@@ -2,6 +2,7 @@ import { Prisma } from "@prisma/client";
 import { withoutRole } from "src/lib/auth";
 import { oasstApiClient } from "src/lib/oasst_api_client";
 import prisma from "src/lib/prismadb";
+import { getBackendUserCore } from "src/lib/users";
 
 /**
  * Stores the task interaction with the Task Backend and then returns the next task generated.
@@ -39,9 +40,10 @@ const handler = withoutRole("banned", async (req, res, token) => {
     },
   });
 
+  const user = await getBackendUserCore(token.sub);
   let newTask;
   try {
-    newTask = await oasstApiClient.interactTask(update_type, taskId, frontendId, interaction.id, content, token);
+    newTask = await oasstApiClient.interactTask(update_type, taskId, frontendId, interaction.id, content, user);
   } catch (err) {
     console.error(JSON.stringify(err));
     return res.status(500).json(err);

website/src/pages/auth/signin.tsx

@@ -5,6 +5,7 @@ import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { ClientSafeProvider, getProviders, signIn } from "next-auth/react";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import React, { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { FaBug, FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa";
@@ -47,7 +48,6 @@ interface SigninProps {
 function Signin({ providers }: SigninProps) {
   const router = useRouter();
   const { discord, email, github, credentials } = providers;
-  const emailEl = useRef(null);
   const [error, setError] = useState("");
 
   useEffect(() => {
@@ -151,7 +151,7 @@ function Signin({ providers }: SigninProps) {
 
 Signin.getLayout = (page) => (
   <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
-    <Header transparent={true} />
+    <Header />
     {page}
     <Footer />
   </div>
@@ -209,11 +209,12 @@ const DebugSigninForm = ({ credentials, bgColorClass }: { credentials: ClientSaf
   );
 };
 
-export const getServerSideProps: GetServerSideProps<SigninProps> = async () => {
+export const getServerSideProps: GetServerSideProps<SigninProps> = async ({ locale }) => {
   const providers = await getProviders();
   return {
     props: {
       providers,
+      ...(await serverSideTranslations(locale, ["common"])),
     },
   };
 };

website/src/pages/create/assistant_reply.tsx

@@ -4,6 +4,7 @@ import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useCreateAssistantReply } from "src/hooks/tasks/useCreateReply";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const AssistantReply = () => {
   const { tasks, isLoading, reset, trigger } = useCreateAssistantReply();

website/src/pages/create/initial_prompt.tsx

@@ -4,6 +4,7 @@ import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useCreateInitialPrompt } from "src/hooks/tasks/useCreateReply";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const InitialPrompt = () => {
   const { tasks, isLoading, reset, trigger } = useCreateInitialPrompt();

website/src/pages/create/user_reply.tsx

@@ -4,6 +4,7 @@ import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useCreatePrompterReply } from "src/hooks/tasks/useCreateReply";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const UserReply = () => {
   const { tasks, isLoading, reset, trigger } = useCreatePrompterReply();

website/src/pages/dashboard.tsx

@@ -1,10 +1,20 @@
 import { Flex } from "@chakra-ui/react";
 import Head from "next/head";
+import { useMemo } from "react";
 import { LeaderboardTable, TaskOption, WelcomeCard } from "src/components/Dashboard";
 import { getDashboardLayout } from "src/components/Layout";
 import { TaskCategory } from "src/components/Tasks/TaskTypes";
+import { get } from "src/lib/api";
+import type { AvailableTasks, TaskType } from "src/types/Task";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
+import useSWRImmutable from "swr/immutable";
 
 const Dashboard = () => {
+  const { data } = useSWRImmutable<AvailableTasks>("/api/available_tasks", get);
+
+  // TODO: show only these tasks:
+  const availableTasks = useMemo(() => filterAvailableTasks(data ?? {}), [data]);
+
   return (
     <>
       <Head>
@@ -13,13 +23,19 @@ const Dashboard = () => {
       </Head>
       <Flex direction="column" gap="10">
         <WelcomeCard />
-        <TaskOption displayTaskCategories={[TaskCategory.Tasks]} />
+        <TaskOption displayTaskCategories={[TaskCategory.Random]} />
         <LeaderboardTable />
       </Flex>
     </>
   );
 };
 
-Dashboard.getLayout = (page) => getDashboardLayout(page);
+Dashboard.getLayout = getDashboardLayout;
 
 export default Dashboard;
+
+const filterAvailableTasks = (availableTasks: Partial<AvailableTasks>) =>
+  Object.entries(availableTasks)
+    .filter(([_, count]) => count > 0)
+    .sort((a, b) => b[1] - a[1])
+    .map(([taskType]) => taskType) as TaskType[];

website/src/pages/evaluate/rank_assistant_replies.tsx

@@ -4,6 +4,7 @@ import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useRankAssistantRepliesTask } from "src/hooks/tasks/useRankReplies";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const RankAssistantReplies = () => {
   const { tasks, isLoading, reset, trigger } = useRankAssistantRepliesTask();

website/src/pages/evaluate/rank_initial_prompts.tsx

@@ -4,6 +4,7 @@ import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useRankInitialPromptsTask } from "src/hooks/tasks/useRankReplies";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const RankInitialPrompts = () => {
   const { tasks, isLoading, reset, trigger } = useRankInitialPromptsTask();

website/src/pages/evaluate/rank_user_replies.tsx

@@ -4,6 +4,7 @@ import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useRankPrompterRepliesTask } from "src/hooks/tasks/useRankReplies";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const RankUserReplies = () => {
   const { tasks, isLoading, reset, trigger } = useRankPrompterRepliesTask();

website/src/pages/label/label_assistant_reply.tsx

@@ -4,6 +4,7 @@ import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useLabelAssistantReplyTask } from "src/hooks/tasks/useLabelingTask";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const LabelAssistantReply = () => {
   const { tasks, isLoading, trigger, reset } = useLabelAssistantReplyTask();

website/src/pages/label/label_initial_prompt.tsx

@@ -4,6 +4,7 @@ import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useLabelInitialPromptTask } from "src/hooks/tasks/useLabelingTask";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const LabelInitialPrompt = () => {
   const { tasks, isLoading, trigger, reset } = useLabelInitialPromptTask();

website/src/pages/label/label_prompter_reply.tsx

@@ -4,6 +4,7 @@ import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useLabelPrompterReplyTask } from "src/hooks/tasks/useLabelingTask";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const LabelPrompterReply = () => {
   const { tasks, isLoading, trigger, reset } = useLabelPrompterReplyTask();

website/src/pages/leaderboard.tsx

@@ -2,6 +2,7 @@ import { Box, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-u
 import Head from "next/head";
 import { getDashboardLayout } from "src/components/Layout";
 import { LeaderboardGridCell } from "src/components/LeaderboardGridCell";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 import { LeaderboardTimeFrame } from "src/types/Leaderboard";
 
 const Leaderboard = () => {

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

@@ -1,5 +1,6 @@
 import { Box, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { getDashboardLayout } from "src/components/Layout";
 import { MessageLoading } from "src/components/Loading/MessageLoading";
 import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
@@ -48,10 +49,13 @@ const MessageDetail = ({ id }: { id: string }) => {
   );
 };
 
-MessageDetail.getInitialProps = async ({ query }) => {
-  const { id } = query;
-  return { id };
-};
-
 MessageDetail.getLayout = (page) => getDashboardLayout(page);
+
+export const getServerSideProps = async ({ locale, query }) => ({
+  props: {
+    id: query.id,
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default MessageDetail;

website/src/pages/messages/index.tsx

@@ -4,6 +4,7 @@ import { getDashboardLayout } from "src/components/Layout";
 import { MessageTable } from "src/components/Messages/MessageTable";
 import { get } from "src/lib/api";
 import useSWRImmutable from "swr/immutable";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const MessagesDashboard = () => {
   const boxBgColor = useColorModeValue("white", "gray.800");

website/src/pages/privacy-policy.tsx

@@ -3,6 +3,7 @@ import Head from "next/head";
 import { getTransparentHeaderLayout } from "src/components/Layout";
 import { PolicyChapterCard } from "src/components/PolicyCards/PolicyChapterCard";
 import { PolicySectionCard } from "src/components/PolicyCards/PolicySectionCard";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const PrivacyPolicy = () => {
   const backgroundColor = useColorModeValue("gray.100", "gray.800");

website/src/pages/tasks/random.tsx

@@ -4,9 +4,10 @@ import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useGenericTaskAPI } from "src/hooks/tasks/useGenericTaskAPI";
+import { TaskType } from "src/types/Task";
 
 const RandomTask = () => {
-  const { tasks, isLoading, trigger, reset } = useGenericTaskAPI("random");
+  const { tasks, isLoading, trigger, reset } = useGenericTaskAPI(TaskType.random);
 
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;

website/src/pages/terms-of-service.tsx

@@ -3,6 +3,7 @@ import Head from "next/head";
 import { getTransparentHeaderLayout } from "src/components/Layout";
 import { PolicyChapterCard } from "src/components/PolicyCards/PolicyChapterCard";
 import { PolicySectionCard } from "src/components/PolicyCards/PolicySectionCard";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const TermsOfService = () => {
   const TermsData = [