Merge pull request #852 from rjmacarthy/chore/apply-i18n-pages

website: Add localization to pages, header and footer

website/public/locales/en/common.json

@@ -1,4 +1,17 @@
 {
+  "about": "About",
+  "account_settings": "Account Settings",
+  "connect": "Connect",
+  "conversational": "Conversational AI for everyone.",
+  "dashboard": "Dashboard",
   "discord": "Discord",
-  "github": "GitHub"
+  "docs": "Docs",
+  "github": "GitHub",
+  "legal": "Legal",
+  "privacy_policy": "Privacy Policy",
+  "report_a_bug": "Report a Bug",
+  "sign_in": "Sign In",
+  "sign_out": "Sign Out",
+  "terms_of_service": "Terms of Service",
+  "title": "Open Assistant"
 }

website/src/components/Footer.tsx

@@ -1,9 +1,11 @@
 import { Box, Divider, Flex, Text, useColorMode } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
+import { useTranslation } from "next-i18next";
 import { useMemo } from "react";
 
 export function Footer() {
+  const { t } = useTranslation();
   const { colorMode } = useColorMode();
   const backgroundColor = colorMode === "light" ? "white" : "gray.800";
   const textColor = colorMode === "light" ? "black" : "gray.300";
@@ -33,10 +35,10 @@ export function Footer() {
 
             <Box>
               <Text fontSize="md" fontWeight="bold">
-                Open Assistant
+                {t("title")}
               </Text>
               <Text fontSize="sm" color="gray.500">
-                Conversational AI for everyone.
+                {t("conversational")}
               </Text>
             </Box>
           </Flex>
@@ -45,23 +47,23 @@ export function Footer() {
             <Box display="flex" flexDirection={["column", "row"]} gap={["6", "14"]} fontSize="sm">
               <Flex direction="column" alignItems={["center", "start"]}>
                 <Text fontWeight="bold" color={textColor}>
-                  Legal
+                  {t("legal")}
                 </Text>
-                <FooterLink href="/privacy-policy" label="Privacy Policy" />
-                <FooterLink href="/terms-of-service" label="Terms of Service" />
+                <FooterLink href="/privacy-policy" label={t("privacy_policy")} />
+                <FooterLink href="/terms-of-service" label={t("terms_of_service")} />
               </Flex>
               <Flex direction="column" alignItems={["center", "start"]}>
                 <Text fontWeight="bold" color={textColor}>
-                  Connect
+                  {t("connect")}
                 </Text>
-                <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
-                <FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
+                <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label={t("github")} />
+                <FooterLink href="https://ykilcher.com/open-assistant-discord" label={t("discord")} />
               </Flex>
               <Flex direction="column" alignItems={["center", "start"]}>
                 <Text fontWeight="bold" color={textColor}>
-                  About
+                  {t("about")}
                 </Text>
-                <FooterLink href="https://projects.laion.ai/Open-Assistant" label="Docs" />
+                <FooterLink href="https://projects.laion.ai/Open-Assistant" label={t("docs")} />
               </Flex>
             </Box>
           </nav>

website/src/components/Header/Header.tsx

@@ -1,7 +1,8 @@
-import { Box, Button, Text, Flex } from "@chakra-ui/react";
+import { Box, Button, Flex, Text } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
+import { useTranslation } from "next-i18next";
 import { Flags } from "react-feature-flags";
 import { FaUser } from "react-icons/fa";
 
@@ -23,7 +24,8 @@ function AccountButton() {
   );
 }
 
-export function Header(props) {
+export function Header() {
+  const { t } = useTranslation();
   const { data: session } = useSession();
   const homeURL = session ? "/dashboard" : "/";
 
@@ -34,7 +36,7 @@ export function Header(props) {
           <Flex alignItems="center">
             <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
             <Text fontFamily="inter" fontSize="2xl" fontWeight="bold" ml="3">
-              Open Assistant
+              {t("title")}
             </Text>
           </Flex>
         </Link>

website/src/components/Header/UserMenu.tsx

@@ -13,6 +13,7 @@ import {
 } from "@chakra-ui/react";
 import NextLink from "next/link";
 import { signOut, useSession } from "next-auth/react";
+import { useTranslation } from "next-i18next";
 import React, { ElementType, useCallback } from "react";
 import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";
 
@@ -25,6 +26,7 @@ interface MenuOption {
 }
 
 export function UserMenu() {
+  const { t } = useTranslation();
   const borderColor = useColorModeValue("gray.300", "gray.600");
   const handleSignOut = useCallback(() => {
     signOut({ callbackUrl: "/" });
@@ -36,33 +38,33 @@ export function UserMenu() {
   }
   const options: MenuOption[] = [
     {
-      name: "Dashboard",
+      name: t("dashboard"),
       href: "/dashboard",
-      desc: "Dashboard",
+      desc: t("dashboard"),
       icon: FiLayout,
       isExternal: false,
     },
     {
-      name: "Account Settings",
+      name: t("account_settings"),
       href: "/account",
-      desc: "Account Settings",
+      desc: t("account_settings"),
       icon: FiSettings,
       isExternal: false,
     },
     {
-      name: "Report a Bug",
+      name: t("report_a_bug"),
       href: "https://github.com/LAION-AI/Open-Assistant/issues/new/choose",
-      desc: "Report a Bug",
+      desc: t("report_a_bug"),
       icon: FiAlertTriangle,
       isExternal: true,
     },
   ];
 
   if (session.user.role === "admin") {
     options.unshift({
-      name: "Admin Dashboard",
+      name: t("admin_dashboard"),
       href: "/admin",
-      desc: "Admin Dashboard",
+      desc: t("admin_dashboard"),
       icon: FiShield,
       isExternal: false,
     });
@@ -105,7 +107,7 @@ export function UserMenu() {
         <MenuDivider />
         <MenuItem gap="3" borderRadius="md" p="4" onClick={handleSignOut}>
           <FiLogOut className="text-blue-500" aria-hidden="true" />
-          <Text>Sign Out</Text>
+          <Text>{t("sign_out")}</Text>
         </MenuItem>
       </MenuList>
     </Menu>

website/src/components/Hero.tsx

@@ -2,8 +2,8 @@ import { Box, Text, useColorMode } from "@chakra-ui/react";
 import Image from "next/image";
 import { useTranslation } from "next-i18next";
 
-import { Container } from "./Container";
 import { AnimatedCircles } from "./AnimatedCircles";
+import { Container } from "./Container";
 
 export function Hero() {
   const { t } = useTranslation("index");

website/src/components/Layout.tsx

@@ -23,15 +23,15 @@ export const getDefaultLayout = (page: React.ReactElement) => (
 
 export const getTransparentHeaderLayout = (page: React.ReactElement) => (
   <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
-    <Header transparent={true} />
+    <Header />
     {page}
     <Footer />
   </div>
 );
 
 export const getDashboardLayout = (page: React.ReactElement) => (
   <Grid templateRows="min-content 1fr" h="full">
-    <Header transparent={true} />
+    <Header />
     <SideMenuLayout
       menuButtonOptions={[
         {
@@ -66,7 +66,7 @@ export const getDashboardLayout = (page: React.ReactElement) => (
 
 export const getAdminLayout = (page: React.ReactElement) => (
   <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
-    <Header transparent={true} />
+    <Header />
     <SideMenuLayout
       menuButtonOptions={[
         {

website/src/lib/default_static_props.ts

@@ -0,0 +1,7 @@
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+
+export const getDefaultStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale)),
+  },
+});

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

@@ -3,6 +3,7 @@ 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";
 
 export default function Account() {
   const { data: session } = useSession();

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 UsersCell from "src/components/UsersCell";
+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/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

@@ -3,6 +3,7 @@ import Head from "next/head";
 import { LeaderboardTable, TaskOption, WelcomeCard } from "src/components/Dashboard";
 import { getDashboardLayout } from "src/components/Layout";
 import { TaskCategory } from "src/components/Tasks/TaskTypes";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const Dashboard = () => {
   return (

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();