Merge branch 'main' into fix/findlast

oaknational · Oct 11, 2024 · 60736d5 · 60736d5
2 parents fd2feca + 9f7a3d6
commit 60736d5
Show file tree

Hide file tree

Showing 39 changed files with 1,066 additions and 394 deletions.
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -24,7 +24,7 @@
   },
   "prettier": "@oakai/prettier-config",
   "dependencies": {
-    "@clerk/nextjs": "5.1.0",
+    "@clerk/nextjs": "5.7.2",
     "@clerk/testing": "^1.3.7",
     "@cloudinary/react": "^1.11.2",
     "@cloudinary/url-gen": "^1.14.0",

diff --git a/apps/nextjs/scripts/aila-cli.ts b/apps/nextjs/scripts/aila-cli.ts
@@ -9,6 +9,9 @@ const cliPlugin: AilaPlugin = {
   onToxicModeration: async (moderation, { aila, enqueue }) => {
     // ...
   },
+  onBackgroundWork: (promise) => {
+    // ...
+  },
 };
 
 const aila = new Aila({

diff --git a/apps/nextjs/src/app/aila/help/index.tsx b/apps/nextjs/src/app/aila/help/index.tsx
@@ -2,11 +2,12 @@
 
 import { useRef } from "react";
 
-import { OakLink } from "@oaknational/oak-components";
+import { OakFlex, OakLink } from "@oaknational/oak-components";
 import { useSearchParams } from "next/navigation";
 
 import { Header } from "@/components/AppComponents/Chat/header";
 import GetInTouchBox from "@/components/AppComponents/GetInTouchBox";
+import { useDemoUser } from "@/components/ContextProviders/Demo";
 
 const Help = () => {
   const startingRef = useRef(null);
@@ -28,11 +29,19 @@ const Help = () => {
 
   const searchParams = useSearchParams();
   const ailaId = searchParams.get("ailaId");
-
+  const demo = useDemoUser();
+  const marginTop = demo.isDemoUser ? "200px" : "125px";
   return (
     <>
       <Header />
-      <div className="mx-auto mt-30 h-[100vh] w-full max-w-[1280px] px-9">
+      <OakFlex
+        $maxWidth={"all-spacing-24"}
+        $ml="auto"
+        $mr="auto"
+        style={{ marginTop: marginTop }}
+        $width={"100%"}
+        $ph={"inner-padding-s"}
+      >
         <div className="mb-27 flex justify-between gap-3">
           <div className="hidden  sm:block sm:min-w-[300px]">
             <h1 className="mb-24 text-4xl font-bold">Help</h1>
@@ -219,7 +228,7 @@ const Help = () => {
             </p>
           </div>
         </div>
-      </div>
+      </OakFlex>
     </>
   );
 };

diff --git a/apps/nextjs/src/app/api/chat/route.test.ts b/apps/nextjs/src/app/api/chat/route.test.ts
@@ -1,4 +1,4 @@
-import { Aila } from "@oakai/aila";
+import { Aila, AilaInitializationOptions } from "@oakai/aila";
 import { MockLLMService } from "@oakai/aila/src/core/llm/MockLLMService";
 import { MockCategoriser } from "@oakai/aila/src/features/categorisation/categorisers/MockCategoriser";
 import { mockTracer } from "@oakai/core/src/tracing/mockTracer";
@@ -36,15 +36,14 @@ describe("Chat API Route", () => {
 
     testConfig = {
       createAila: jest.fn().mockImplementation(async (options) => {
-        const ailaConfig = {
+        const ailaConfig: AilaInitializationOptions = {
           options: {
             usePersistence: false,
             useRag: false,
             useAnalytics: false,
             useModeration: false,
             useErrorReporting: false,
             useThreatDetection: false,
-            useRateLimiting: false,
           },
           chat: {
             id: chatId,

diff --git a/apps/nextjs/src/app/api/chat/webActionsPlugin.ts b/apps/nextjs/src/app/api/chat/webActionsPlugin.ts
@@ -7,6 +7,7 @@ import {
 } from "@oakai/core";
 import { UserBannedError } from "@oakai/core/src/models/safetyViolations";
 import { PrismaClientWithAccelerate } from "@oakai/db";
+import { waitUntil } from "@vercel/functions";
 
 type PluginCreator = (
   prisma: PrismaClientWithAccelerate,
@@ -88,8 +89,13 @@ export const createWebActionsPlugin: PluginCreator = (
     }
   };
 
+  const onBackgroundWork: AilaPlugin["onBackgroundWork"] = (promise) => {
+    waitUntil(promise);
+  };
+
   return {
     onStreamError,
     onToxicModeration,
+    onBackgroundWork,
   };
 };
diff --git a/apps/nextjs/src/app/layout.tsx b/apps/nextjs/src/app/layout.tsx
@@ -77,7 +77,7 @@ export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
 
   return (
     <html lang="en" suppressHydrationWarning className={lexend.variable}>
-      <ClerkProvider nonce={nonce ?? undefined}>
+      <ClerkProvider>
         <body
           className={cn(
             "overflow-x-hidden font-sans antialiased",

diff --git a/apps/nextjs/src/app/quiz-designer/quiz-designer-page.tsx b/apps/nextjs/src/app/quiz-designer/quiz-designer-page.tsx
@@ -3,11 +3,9 @@
 import { memo, useCallback, useEffect, useReducer, useState } from "react";
 
 import { useUser } from "@clerk/nextjs";
-import { buildClerkProps, getAuth } from "@clerk/nextjs/server";
 import { quizAppReducer } from "ai-apps/quiz-designer/state/reducer";
 import { QuizAppState, QuizAppStatus } from "ai-apps/quiz-designer/state/types";
 import { useQuizSession } from "hooks/useQuizSession";
-import { GetServerSideProps } from "next";
 import { useRouter } from "next/navigation";
 import { equals } from "remeda";
 
@@ -119,19 +117,4 @@ const MemoizedStatePersistence = memo(
   },
 );
 
-export const getServerSideProps: GetServerSideProps = async (ctx) => {
-  const { userId } = getAuth(ctx.req);
-
-  if (!userId) {
-    return {
-      redirect: {
-        destination: "/sign-up",
-        permanent: false,
-      },
-    };
-  }
-
-  return { props: { ...buildClerkProps(ctx.req) } };
-};
-
 export default QuizDesignerPage;
diff --git a/apps/nextjs/src/components/AppComponents/Chat/header.tsx b/apps/nextjs/src/components/AppComponents/Chat/header.tsx
@@ -2,13 +2,17 @@
 
 import * as React from "react";
 
-import { OakIcon } from "@oaknational/oak-components";
+import {
+  OakBox,
+  OakFlex,
+  OakIcon,
+  OakLink,
+  OakSpan,
+} from "@oaknational/oak-components";
 import { useClerkDemoMetadata } from "hooks/useClerkDemoMetadata";
-import Link from "next/link";
 import { usePathname } from "next/navigation";
 
 import { useDemoUser } from "@/components/ContextProviders/Demo";
-import { Icon } from "@/components/Icon";
 import OakIconLogo from "@/components/OakIconLogo";
 
 import { BetaTagHeader } from "./beta-tag";
@@ -25,67 +29,105 @@ export function Header() {
   const ailaId = usePathname().split("aila/")[1];
 
   return (
-    <header className="fixed inset-x-0 top-0 z-50">
+    <OakBox
+      as={"header"}
+      $position={"fixed"}
+      $zIndex={"banner"}
+      $width={"100%"}
+    >
       {clerkMetadata.isSet && demo.isDemoUser && (
-        <div
+        <OakFlex
+          $alignItems={"center"}
+          $bb={"border-solid-m"}
+          $background={"lemon"}
+          $pv={"inner-padding-s"}
+          $ph={"inner-padding-xl"}
           data-testid="demo-banner"
-          className="flex h-28 items-center border-b-2 border-black bg-lemon px-15 py-6 sm:h-26 md:h-22"
         >
-          <div>
-            <strong className="font-semibold">
-              Create {demo.appSessionsPerMonth} lessons per month
-            </strong>
-            <span className="mx-8">•</span>
-            <span>If you are a teacher in the UK,</span>{" "}
-            <a href={demo.contactHref} className="underline">
-              contact us for full access.
-            </a>
-          </div>
-          <a href={demo.contactHref}>
-            <Icon icon="chevron-right" size="sm" />
-          </a>
-          <div className="grow" />
+          <OakSpan $font={"body-1"}>
+            <OakSpan $font={"body-1-bold"}>
+              Create {demo.appSessionsPerMonth} lessons per month •
+            </OakSpan>{" "}
+            If you are a teacher in the UK,{" "}
+            <OakLink
+              iconName="chevron-right"
+              isTrailingIcon
+              color="black"
+              href={demo.contactHref}
+            >
+              contact us for full access
+            </OakLink>
+          </OakSpan>
+
+          <OakFlex $flexGrow={1} />
           {demo.appSessionsRemaining !== undefined && (
-            <strong className="hidden font-semibold lg:block">
-              {demo.appSessionsRemaining} of {demo.appSessionsPerMonth} lessons
-              remaining
-            </strong>
+            <OakBox $display={["none", "none", "block"]}>
+              <OakSpan $font={"body-1-bold"}>
+                {demo.appSessionsRemaining} of {demo.appSessionsPerMonth}{" "}
+                lessons remaining
+              </OakSpan>
+            </OakBox>
           )}
-        </div>
+        </OakFlex>
       )}
 
-      <div className="flex h-26 shrink-0 items-center justify-between border-b-2 border-black bg-white px-10">
-        <div className="flex items-center gap-9">
-          <span className="flex items-center justify-center gap-9">
-            <Link href="/" aria-label="go to home page">
+      <OakFlex
+        $background="white"
+        $bb="border-solid-m"
+        $pa={"inner-padding-l"}
+        $alignItems="center"
+        $justifyContent="space-between"
+        $gap={"all-spacing-3"}
+      >
+        <OakFlex $gap={"all-spacing-3"} $alignItems={"center"}>
+          <OakFlex
+            $alignItems={"center"}
+            $justifyContent={"center"}
+            $gap={"all-spacing-3"}
+          >
+            <OakLink href="/" aria-label="go to home page">
               <OakIconLogo />
-            </Link>
-            <span className="text-xl font-bold text-black">Aila</span>
-          </span>
-          <div className="flex">
+            </OakLink>
+            <OakSpan $font="heading-5">Aila</OakSpan>
+          </OakFlex>
+          <OakFlex>
             <BetaTagHeader />
-          </div>
-        </div>
+          </OakFlex>
+        </OakFlex>
 
-        <div className="flex items-center justify-end space-x-12">
-          <Link
-            className="hidden items-center sm:flex"
-            href={ailaId ? `/aila/help/?ailaId=${ailaId}` : "/aila/help"}
-            target="_blank"
-          >
-            <OakIcon iconName="question-mark" $width="all-spacing-6" />
-            <div className="ml-6 text-sm font-semibold text-black">Help</div>
-          </Link>
-          <div className="= flex items-center">
+        <OakFlex
+          $alignItems="center"
+          $justifyContent="flex-end"
+          $gap="all-spacing-6"
+        >
+          <OakBox $display={["none", "flex"]}>
+            <OakLink
+              color="black"
+              href={ailaId ? `/aila/help/?ailaId=${ailaId}` : "/aila/help"}
+              target="_blank"
+              style={{ textDecoration: "none" }}
+            >
+              <OakFlex $alignItems={"center"} $alignContent={"center"}>
+                <OakIcon
+                  $mr={"space-between-sssx"}
+                  iconName={"question-mark"}
+                />
+                <OakSpan $font={"body-1-bold"} $color={"black"}>
+                  Help
+                </OakSpan>
+              </OakFlex>
+            </OakLink>
+          </OakBox>
+          <OakFlex>
             <UserOrLogin />
-          </div>
-          <div className="flex">
+          </OakFlex>
+          <OakFlex>
             <SidebarMobile>
               <ChatHistory />
             </SidebarMobile>
-          </div>
-        </div>
-      </div>
-    </header>
+          </OakFlex>
+        </OakFlex>
+      </OakFlex>
+    </OakBox>
   );
 }
diff --git a/apps/nextjs/src/components/AppComponents/Chat/sidebar-mobile.tsx b/apps/nextjs/src/components/AppComponents/Chat/sidebar-mobile.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { OakFlex, OakSpan } from "@oaknational/oak-components";
+
 import { Sidebar } from "@/components/AppComponents/Chat/sidebar";
 import { Button } from "@/components/AppComponents/Chat/ui/button";
 import {
@@ -28,9 +30,10 @@ export function SidebarMobile({ children }: Readonly<SidebarMobileProps>) {
           }}
         >
           <Icon icon="sidebar" size="md" />
-          <div className="ml-4 hidden pr-5 font-semibold text-black sm:block">
-            Menu
-          </div>
+          <OakFlex $pl={"inner-padding-ssx"} $display={["none", "flex"]}>
+            <OakSpan $font={"body-1-bold"}>Menu</OakSpan>
+          </OakFlex>
+
           <span className="sr-only block sm:hidden">Toggle Sidebar</span>
         </Button>
       </SheetTrigger>
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,9 @@ const cliPlugin: AilaPlugin = { @@
       onToxicModeration: async (moderation, { aila, enqueue }) => {
         // ...
       },
+      onBackgroundWork: (promise) => {
+        // ...
+      },
     };
     const aila = new Aila({
@@ Expand Down @@