Merge branch 'main' into eslint

website/src/components/Footer.tsx

@@ -25,7 +25,7 @@ export function Footer() {
                   <Link href="#" aria-label="Our Team" className="hover:underline underline-offset-2">
                     Our Team
                   </Link>
-                  <Link href="#join-us" aria-label="Join Us" className="hover:underline underline-offset-2">
+                  <Link href="/#join-us" aria-label="Join Us" className="hover:underline underline-offset-2">
                     Join Us
                   </Link>
                 </div>

website/src/components/Header/Header.stories.jsx

@@ -21,4 +21,4 @@ const Template = (args) => {
 };
 
 export const Default = Template.bind({});
-Default.args = { session: { data: { user: { name: "StoryBook user" } }, status: "authenticated" } };
+Default.args = { session: { data: { user: { name: "StoryBook user" } }, status: "authenticated" }, transparent: false };

website/src/components/Header/Header.tsx

@@ -3,8 +3,10 @@ import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
-import { useSession } from "next-auth/react";
-import { FaUser } from "react-icons/fa";
+
+import { signOut, useSession } from "next-auth/react";
+import { FaUser, FaSignOutAlt } from "react-icons/fa";
+import clsx from "clsx";
 
 import { Container } from "src/components/Container";
 import { NavLinks } from "./NavLinks";
@@ -53,9 +55,10 @@ function AccountButton() {
   );
 }
 
-export function Header() {
+export function Header(props) {
+  const transparent = props.transparent ?? false;
   return (
-    <header className="bg-white">
+    <header className={clsx(!transparent && "bg-white")}>
       <nav>
         <Container className="relative z-10 flex justify-between py-8">
           <div className="relative z-10 flex items-center gap-16">
@@ -101,8 +104,8 @@ export function Header() {
                           className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-white px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
                         >
                           <div className="space-y-4">
-                            <MobileNavLink href="#join-us">Join Us</MobileNavLink>
-                            <MobileNavLink href="#faqs">FAQs</MobileNavLink>
+                            <MobileNavLink href="/#join-us">Join Us</MobileNavLink>
+                            <MobileNavLink href="/#faqs">FAQs</MobileNavLink>
                           </div>
                           <div className="mt-8 flex flex-col gap-4"></div>
                         </Popover.Panel>

website/src/components/Header/NavLinks.tsx

@@ -8,8 +8,8 @@ export function NavLinks(): JSX.Element {
   return (
     <>
       {[
-        ["Join Us", "#join-us"],
-        ["FAQ", "#faq"],
+        ["Join Us", "/#join-us"],
+        ["FAQ", "/#faq"],
       ].map(([label, href], index) => (
         <Link
           key={label}

website/src/components/TaskSelection/TaskSelection.tsx

@@ -7,12 +7,12 @@ export const TaskSelection = () => {
   return (
     <Flex gap={10} wrap="wrap" justifyContent="space-evenly" width="full" height="full" alignItems={"center"}>
       <TaskOptions key="create" title="Create">
-        <TaskOption
+        {/* <TaskOption
           alt="Summarize Stories"
           img="/images/logos/logo.svg"
           title="Summarize stories"
           link="/create/summarize_story"
-        />
+        /> */}
         <TaskOption alt="Reply as User" img="/images/logos/logo.svg" title="Reply as User" link="/create/user_reply" />
         <TaskOption
           alt="Reply as Assistant"
@@ -22,12 +22,12 @@ export const TaskSelection = () => {
         />
       </TaskOptions>
       <TaskOptions key="evaluate" title="Evaluate">
-        <TaskOption
+        {/* <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"