feat: share

oaknational · Sep 1, 2024 · 38b959c · 38b959c
1 parent df1d1cc
commit 38b959c
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 27 deletions.
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -40,7 +40,7 @@
     "@oakai/exports": "*",
     "@oakai/logger": "*",
     "@oakai/prettier-config": "*",
-    "@oaknational/oak-components": "^1.0.0",
+    "@oaknational/oak-components": "^1.26.0",
     "@oaknational/oak-consent-client": "^2.1.0",
     "@prisma/client": "^5.13.0",
     "@prisma/extension-accelerate": "^1.0.0",

diff --git a/apps/nextjs/src/app/aila/[id]/share/index.tsx b/apps/nextjs/src/app/aila/[id]/share/index.tsx
@@ -1,7 +1,10 @@
 "use client";
 
+import { useEffect, useState } from "react";
+
 import { LooseLessonPlan } from "@oakai/aila/src/protocol/schema";
 import { PersistedModerationBase } from "@oakai/core/src/utils/ailaModeration/moderationSchema";
+import { OakSmallPrimaryButton } from "@oaknational/oak-components";
 import Link from "next/link";
 
 import {
@@ -23,6 +26,17 @@ export default function ShareChat({
   creatorsName,
   moderation,
 }: Readonly<ShareChatProps>) {
+  const [userHasCopiedLink, setUserHasCopiedLink] = useState(false);
+
+  useEffect(() => {
+    if (userHasCopiedLink) {
+      const timeout = setTimeout(() => {
+        setUserHasCopiedLink(false);
+      }, 3000);
+      return () => clearTimeout(timeout);
+    }
+  }, [userHasCopiedLink, setUserHasCopiedLink]);
+
   const keyStageSubjectTuple = [
     keyStageToTitle(lessonPlan.keyStage ?? ""),
     subjectToTitle(lessonPlan.subject ?? ""),
@@ -41,8 +55,8 @@ export default function ShareChat({
       <div className="flex items-start justify-between bg-lavender30 px-9 py-9 lg:px-24">
         <Logo />
       </div>
-      <div className="flex items-center bg-lavender30 px-9 py-14 md:px-14 md:py-18">
-        <div className="absolute hidden h-38 w-38 items-center justify-center rounded-lg bg-lavender50 xl:left-24 xl:flex">
+      <div className="flex items-center bg-lavender30 px-9  py-18 pb-27 md:px-14">
+        <div className="absolute hidden h-38 w-38 items-center justify-center rounded-lg xl:left-24 xl:flex">
           <Icon
             className="flex items-center justify-center"
             icon="ai-lesson"
@@ -51,10 +65,21 @@ export default function ShareChat({
           />
         </div>
         <div className="mx-auto flex h-24 w-full max-w-2xl flex-col items-start justify-center lg:h-32 xl:h-38 ">
-          <h2 className="mb-6 text-base font-medium">
+          <h2 className="mb-6 pt-20 text-base font-medium sm:mt-0">
             {keyStageSubjectTuple.join(" • ")}
           </h2>
           <h1 className="text-3xl font-bold">{lessonPlan.title}</h1>
+          <div className="mt-10 pb-20">
+            <OakSmallPrimaryButton
+              onClick={() => {
+                navigator.clipboard.writeText(window.location.href).then(() => {
+                  setUserHasCopiedLink(true);
+                });
+              }}
+            >
+              {userHasCopiedLink ? " Link copied" : "Copy link"}
+            </OakSmallPrimaryButton>
+          </div>
         </div>
       </div>
       <div className="mx-auto max-w-2xl px-9 py-14 pb-30 sm:px-0">

diff --git a/apps/nextjs/src/components/AppComponents/Chat/desktop-layout.tsx b/apps/nextjs/src/components/AppComponents/Chat/desktop-layout.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useRef, useState } from "react";
 
 import { useRouter } from "#next/navigation";
-import { OakIcon } from "@oaknational/oak-components";
+import { OakIcon, OakSmallSecondaryButton } from "@oaknational/oak-components";
 import { Flex } from "@radix-ui/themes";
 import { useDemoLocking } from "hooks/useDemoLocking";
 import { useMobileLessonPullOutControl } from "hooks/useMobileLessonPullOutControl";
+import Link from "next/link";
 
 import AiIcon from "@/components/AiIcon";
 import { useLessonChat } from "@/components/ContextProviders/ChatProvider";
@@ -30,8 +31,14 @@ export const DesktopChatLayout = ({
 }: Readonly<DesktopChatLayoutProps>) => {
   const chat = useLessonChat();
 
-  const { messages, isLoading, chatAreaRef, lessonPlan, ailaStreamingStatus } =
-    chat;
+  const {
+    id,
+    messages,
+    isLoading,
+    chatAreaRef,
+    lessonPlan,
+    ailaStreamingStatus,
+  } = chat;
 
   const chatEndRef = useRef<HTMLDivElement>(null);
 
@@ -161,8 +168,22 @@ export const DesktopChatLayout = ({
               </span>
               <span className="text-base font-bold">Hide lesson</span>
             </button>
-            <button
-              className="scale-75"
+          </div>
+          <div className="flex gap-10 p-12 sm:hidden">
+            <OakSmallSecondaryButton
+              element={Link}
+              iconName="download"
+              href={demo.isSharingEnabled ? `/aila/download/${id}` : "#"}
+              onClick={() => {
+                if (!demo.isSharingEnabled) {
+                  setDialogWindow("demo-share-locked");
+                }
+              }}
+            >
+              Download
+            </OakSmallSecondaryButton>
+            <OakSmallSecondaryButton
+              iconName="share"
               onClick={() => {
                 if (demo.isSharingEnabled) {
                   setDialogWindow("share-chat");
@@ -171,8 +192,8 @@ export const DesktopChatLayout = ({
                 }
               }}
             >
-              <OakIcon iconName="share" />
-            </button>
+              Share
+            </OakSmallSecondaryButton>
           </div>
           <div className="block px-14 pb-9 pt-12 sm:hidden">
             <LessonPlanProgressBar lessonPlan={lessonPlan} />

diff --git a/apps/nextjs/src/components/AppComponents/Chat/header.tsx b/apps/nextjs/src/components/AppComponents/Chat/header.tsx
@@ -44,7 +44,7 @@ export function Header() {
         </div>
       )}
 
-      <div className="flex h-26 w-full shrink-0 items-center justify-between bg-white px-10 sm:w-fit sm:border-b-2  sm:border-black  ">
+      <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-10">
           <div className="hidden sm:flex">
             <SidebarMobile>

diff --git a/apps/nextjs/src/components/DialogControl/dialogStyles.ts b/apps/nextjs/src/components/DialogControl/dialogStyles.ts
@@ -5,7 +5,7 @@ export const dialogContent = cva([
   "data-[state=open]:animate-contentShow z-50",
 ]);
 export const dialogContentInner = cva([
-  "mx-20 border-2 border-black",
+  "sm:mx-20 sm:border-2 sm:border-black",
   "h-full w-full  sm:w-[80%] md:w-[680px]",
   "flex w-full flex-col items-center justify-between",
   "data-[state=open]:animate-contentShow bg-white p-10 pb-24 focus:outline-none md:p-22",
@@ -16,8 +16,8 @@ export const dialogOverlay = cva(
   {
     variants: {
       opacity: {
-        true: "bg-lavender30/80 bg-opacity-90", // Adjust opacity class as needed
-        false: "bg-lavender30 bg-opacity-90",
+        true: "bg-white sm:bg-lavender30/80 sm:bg-opacity-90", // Adjust opacity class as needed
+        false: "bg-white sm:bg-lavender30 sm:bg-opacity-90",
       },
     },
     defaultVariants: {