Merge remote-tracking branch 'upstream/main'

website/src/components/AuthLayout.tsx

@@ -1,14 +1,8 @@
-import Link from "next/link";
-import Image from "next/image";
-
 export function AuthLayout({ children }) {
   return (
-    <main className="flex items-center justify-center min-h-full overflow-hidden pt-16 sm:py-28 subpixel-antialiased">
+    <main className="flex items-center justify-center sm:py-4 subpixel-antialiased">
       <div className="flex items-center w-full max-w-2xl flex-col px-4 sm:px-6">
-        <Link href="/" aria-label="Home" className="flex items-center text-3xl font-bold text-black">
-          <Image src="/images/logos/logo.svg" width="100" height="100" alt="Open Assistant Logo" /> Open Assistant
-        </Link>
-        <div className="flex-auto items-center justify-center w-full py-10 px-4 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-20">
+        <div className="flex-auto items-center justify-center w-full py-10 px-4 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-4">
           {children}
         </div>
       </div>

website/src/components/Header.tsx

@@ -55,9 +55,9 @@ function AccountButton() {
 
 export function Header() {
   return (
-    <header>
+    <header className="bg-white">
       <nav>
-        <Container className="relative bg-white z-10 flex justify-between py-8">
+        <Container className="relative z-10 flex justify-between py-8">
           <div className="relative z-10 flex items-center gap-16">
             <Link href="/" aria-label="Home" className="flex items-center">
               <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />

website/src/components/Layout.tsx

@@ -0,0 +1,20 @@
+// https://nextjs.org/docs/basic-features/layouts
+
+import type { NextPage } from "next";
+
+import { Footer } from "./Footer";
+import { Header } from "./Header";
+
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: React.ReactElement) => React.ReactNode;
+};
+
+export const getDefaultLayout = (page: React.ReactElement) => (
+  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
+    <Header />
+    {page}
+    <Footer />
+  </div>
+);
+
+export const noLayout = (page: React.ReactElement) => page;

website/src/components/RatingRadioGroup.tsx

@@ -1,8 +1,7 @@
-import { chakra, Box, HStack, useRadio, useRadioGroup } from "@chakra-ui/react";
+import { Box, HStack, useRadio, useRadioGroup } from "@chakra-ui/react";
 
 const RatingRadioButton = (props) => {
-  const { option, ...radioProps } = props;
-  const { getInputProps, getCheckboxProps } = useRadio(radioProps);
+  const { state, getInputProps, getCheckboxProps } = useRadio(props);
 
   const input = getInputProps();
   const checkbox = getCheckboxProps();
@@ -27,25 +26,33 @@ const RatingRadioButton = (props) => {
         px={5}
         py={3}
       >
-        {option}
+        {props.children}
       </Box>
     </Box>
   );
 };
 
 const RatingRadioGroup = (props) => {
-  const { min, max, onChange, ...rest } = props;
-  const { value, getRadioProps, getRootProps } = useRadioGroup({
-    defaultValue: min,
+  const { min, max, onChange } = props;
+  const { getRadioProps, getRootProps } = useRadioGroup({
+    name: "rating",
+    defaultValue: `${min}`,
     onChange: onChange,
   });
-  const options = Array.from(new Array(1 + max - min), (x, i) => i + min);
+  const group = getRootProps();
+
+  const options = Array.from(new Array(1 + max - min), (x, i) => `${i + min}`);
 
   return (
-    <HStack {...getRootProps()}>
-      {options.map((option) => (
-        <RatingRadioButton key={option} option={option} {...getRadioProps({ value: option })} />
-      ))}
+    <HStack {...group}>
+      {options.map((option) => {
+        const radio = getRadioProps({ value: option });
+        return (
+          <RatingRadioButton key={option} {...radio}>
+            {option}
+          </RatingRadioButton>
+        );
+      })}
     </HStack>
   );
 };

website/src/components/TaskSelection/TaskSelection.tsx

@@ -11,7 +11,7 @@ export const TaskSelection = () => {
           alt="Summarize Stories"
           img="/images/logos/logo.svg"
           title="Summarize stories"
-          link="/summarize/story"
+          link="/create/summarize_story"
         />
         <TaskOption alt="Reply as User" img="/images/logos/logo.svg" title="Reply as User" link="/create/user_reply" />
         <TaskOption
@@ -22,7 +22,18 @@ export const TaskSelection = () => {
         />
       </TaskOptions>
       <TaskOptions key="evaluate" title="Evaluate">
-        <TaskOption alt="Rate Prompts" img="/images/logos/logo.svg" title="Rate Prompts" link="/grading/grade-output" />
+        <TaskOption
+          alt="Rate Prompts"
+          img="/images/logos/logo.svg"
+          title="Rate Prompts"
+          link="/evaluate/rate_summary"
+        />
+        <TaskOption
+          alt="Rank Initial Prompts"
+          img="/images/logos/logo.svg"
+          title="Rank Initial Prompts"
+          link="/evaluate/rank_initial_prompts"
+        />
       </TaskOptions>
     </Flex>
   );