Merge branch 'main' into fix/delete-all-button

apps/nextjs/.storybook/decorators/RadixThemeDecorator.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { Theme } from "@radix-ui/themes";
-import "@radix-ui/themes/styles.css";
 
 export const RadixThemeDecorator = (Story: React.ComponentType) => (
   <Theme>

apps/nextjs/.storybook/preview.css

@@ -1,2 +1,3 @@
 @import "../src/app/globals.css";
 @import "../src/app/theme-config.css";
+@import "../../../node_modules/@radix-ui/themes/styles.css";

apps/nextjs/.storybook/preview.tsx

@@ -10,6 +10,7 @@ import { OakThemeProvider, oakDefaultTheme } from "@oaknational/oak-components";
 import type { Preview, Decorator } from "@storybook/react";
 
 import { TooltipProvider } from "../src/components/AppComponents/Chat/ui/tooltip";
+import { DialogProvider } from "../src/components/AppComponents/DialogContext";
 import { AnalyticsProvider } from "../src/mocks/analytics/provider";
 import { ClerkDecorator } from "../src/mocks/clerk/ClerkDecorator";
 import { TRPCReactProvider } from "../src/utils/trpc";
@@ -25,7 +26,6 @@ const preview: Preview = {
       },
     },
   },
-  tags: ["autodocs"],
 };
 
 // Providers not currently used
@@ -44,11 +44,13 @@ export const decorators: Decorator[] = [
       {/* TODO: Mock tRPC calls with MSW */}
       <TRPCReactProvider>
         <AnalyticsProvider>
-          <OakThemeProvider theme={oakDefaultTheme}>
-            <TooltipProvider>
-              <Story />
-            </TooltipProvider>
-          </OakThemeProvider>
+          <DialogProvider>
+            <OakThemeProvider theme={oakDefaultTheme}>
+              <TooltipProvider>
+                <Story />
+              </TooltipProvider>
+            </OakThemeProvider>
+          </DialogProvider>
         </AnalyticsProvider>
       </TRPCReactProvider>
     </>

apps/nextjs/src/app/aila/[id]/download/DownloadView.stories.tsx

@@ -0,0 +1,68 @@
+import type { AilaPersistedChat } from "@oakai/aila/src/protocol/schema";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DemoProvider } from "../../../../../src/components/ContextProviders/Demo";
+import { DownloadContent } from "./DownloadView";
+
+const meta: Meta<typeof DownloadContent> = {
+  title: "Pages/Chat/Download",
+  component: DownloadContent,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <DemoProvider>
+        <Story />
+      </DemoProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof DownloadContent>;
+
+const chat: AilaPersistedChat = {
+  id: "nSLmbQ1LO75zLTcA",
+  path: "/aila/nSLmbQ1LO75zLTcA",
+  title: "The End of Roman Britain",
+  userId: "user_2nQuq4jFWLfo4w1WNA6xEBp93IY",
+  lessonPlan: {
+    title: "The End of Roman Britain",
+    subject: "history",
+    keyStage: "key-stage-3",
+    learningOutcome:
+      "I can explain the factors leading to the end of Roman rule in Britain and its impact on society.",
+    learningCycles: [
+      "Identify the key factors that led to the exit of the Romans from Britain.",
+      "Discuss the immediate social and economic impacts of the Roman departure on Britain.",
+      "Explore how archaeologists have uncovered evidence of the Roman era in Britain.",
+    ],
+  },
+  relevantLessons: [],
+  createdAt: 1732008272042,
+  updatedAt: 1732008303927,
+  iteration: 2,
+  messages: [
+    {
+      id: "u-Mksqgrrlq7-02EvL",
+      content:
+        "Create a lesson plan about The End of Roman Britain for Key Stage 3 History",
+      role: "user",
+    },
+    {
+      id: "a-ttJ8OIwaxn4aFEOq",
+      content:
+        '{"type":"llmMessage","sectionsToEdit":["learningOutcome","learningCycles"],"patches":[{"type":"patch","reasoning":"Creating a new lesson plan from scratch as no existing Oak lessons are available for this topic. Setting a clear learning outcome and defining the learning cycles to structure the lesson effectively.","value":{"type":"string","op":"add","path":"/learningOutcome","value":"I can explain the factors leading to the end of Roman rule in Britain and its impact on society."},"status":"complete"},{"type":"patch","reasoning":"Outlining the learning cycles to provide a structured approach to teaching the factors leading to the end of Roman Britain, the immediate effects, and the archaeological evidence.","value":{"type":"string-array","op":"add","path":"/learningCycles","value":["Identify the key factors that led to the exit of the Romans from Britain.","Discuss the immediate social and economic impacts of the Roman departure on Britain.","Explore how archaeologists have uncovered evidence of the Roman era in Britain."]},"status":"complete"}],"sectionsEdited":["learningOutcome","learningCycles"],"prompt":{"type":"text","value":"Are the learning outcome and learning cycles appropriate for your pupils? If not, suggest an edit. Otherwise, tap **Continue** to move on to the next step."},"status":"complete"}',
+      role: "assistant",
+    },
+  ],
+  subject: "history",
+  keyStage: "key-stage-3",
+};
+
+export const Default: Story = {
+  args: {
+    chat,
+  },
+};

apps/nextjs/src/app/aila/[id]/download/DownloadView.tsx

@@ -19,7 +19,7 @@ import { useDownloadView } from "./useDownloadView";
 type DownloadViewProps = Readonly<{
   chat: AilaPersistedChat;
 }>;
-export function DownloadView({ chat }: Readonly<DownloadViewProps>) {
+export function DownloadContent({ chat }: Readonly<DownloadViewProps>) {
   const { lessonPlan, id } = chat;
   const {
     lessonSlidesExport,
@@ -37,7 +37,7 @@ export function DownloadView({ chat }: Readonly<DownloadViewProps>) {
   const isLessonComplete = totalSectionsComplete >= totalSections;
 
   return (
-    <Layout>
+    <>
       <DialogRoot>
         <DialogContents
           chatId={chat.id}
@@ -194,6 +194,14 @@ export function DownloadView({ chat }: Readonly<DownloadViewProps>) {
           </Box>
         </div>
       </DialogRoot>
+    </>
+  );
+}
+
+export function DownloadView(props: Readonly<DownloadViewProps>) {
+  return (
+    <Layout>
+      <DownloadContent {...props} />
     </Layout>
   );
 }

apps/nextjs/src/app/aila/[id]/share/index.stories.tsx

@@ -0,0 +1,40 @@
+import type { LooseLessonPlan } from "@oakai/aila/src/protocol/schema";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import ShareChat from "./";
+
+const meta: Meta<typeof ShareChat> = {
+  title: "Pages/Chat/Share",
+  component: ShareChat,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ShareChat>;
+
+const lessonPlan: LooseLessonPlan = {
+  title: "The End of Roman Britain",
+  subject: "history",
+  keyStage: "key-stage-3",
+  learningOutcome:
+    "I can explain the factors leading to the end of Roman rule in Britain and its impact on society.",
+  learningCycles: [
+    "Identify the key factors that led to the exit of the Romans from Britain.",
+    "Discuss the immediate social and economic impacts of the Roman departure on Britain.",
+    "Explore how archaeologists have uncovered evidence of the Roman era in Britain.",
+  ],
+};
+
+export const Default: Story = {
+  args: {
+    lessonPlan,
+    creatorsName: "Mr Teacher",
+    moderation: {
+      id: "mock-moderation-id",
+      categories: ["l/strong-language"],
+      justification: "Mock sensitive result",
+    },
+  },
+};

apps/nextjs/src/app/aila/help/index.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DemoProvider } from "@/components/ContextProviders/Demo";
+
+import { HelpContent } from ".";
+
+const meta: Meta<typeof HelpContent> = {
+  title: "Pages/Chat/Help",
+  component: HelpContent,
+  parameters: {
+    // Including custom decorators changes the layout from fullscreen
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <DemoProvider>
+        <Story />
+      </DemoProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof HelpContent>;
+
+export const Default: Story = {
+  args: {},
+};

apps/nextjs/src/app/aila/help/index.tsx

@@ -8,7 +8,7 @@ import { useSearchParams } from "next/navigation";
 import { Header } from "@/components/AppComponents/Chat/header";
 import GetInTouchBox from "@/components/AppComponents/GetInTouchBox";
 
-const Help = () => {
+export const HelpContent = () => {
   const startingRef = useRef(null);
   const structureRef = useRef(null);
   const downloadsRef = useRef(null);
@@ -31,7 +31,6 @@ const Help = () => {
 
   return (
     <>
-      <Header />
       <div className="mx-auto mt-30 h-[100vh] w-full max-w-[1280px] px-9">
         <div className="mb-27 flex justify-between gap-3">
           <div className="hidden  sm:block sm:min-w-[300px]">
@@ -224,4 +223,11 @@ const Help = () => {
   );
 };
 
-export default Help;
+export default function HelpPage() {
+  return (
+    <>
+      <Header />
+      <HelpContent />
+    </>
+  );
+}

apps/nextjs/src/app/faqs/index.stories.tsx

@@ -5,7 +5,6 @@ import { FAQPageContent } from ".";
 const meta: Meta<typeof FAQPageContent> = {
   title: "Pages/FAQs",
   component: FAQPageContent,
-  tags: ["autodocs"],
 };
 
 export default meta;

apps/nextjs/src/app/home-page.stories.tsx

@@ -5,7 +5,6 @@ import { HomePageContent } from "./home-page";
 const meta: Meta<typeof HomePageContent> = {
   title: "Pages/Homepage",
   component: HomePageContent,
-  tags: ["autodocs"],
 };
 
 export default meta;

apps/nextjs/src/app/legal/[slug]/legal.stories.tsx

@@ -5,7 +5,6 @@ import { LegalContent } from "./legal";
 const meta: Meta<typeof LegalContent> = {
   title: "Pages/Legal/Sanity dynamic",
   component: LegalContent,
-  tags: ["autodocs"],
 };
 
 export default meta;

apps/nextjs/src/app/prompts/prompts.stories.tsx

@@ -5,7 +5,6 @@ import { PromptsContent } from "./prompts";
 const meta: Meta<typeof PromptsContent> = {
   title: "Pages/Prompts",
   component: PromptsContent,
-  tags: ["autodocs"],
 };
 
 export default meta;

apps/nextjs/src/components/AppComponents/Chat/chat-start.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DemoProvider } from "@/components/ContextProviders/Demo";
+
+import { DialogProvider } from "../DialogContext";
+import { ChatStart } from "./chat-start";
+
+const meta: Meta<typeof ChatStart> = {
+  title: "Pages/Chat/Chat Start",
+  component: ChatStart,
+  parameters: {
+    // Including custom decorators changes the layout from fullscreen
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <DialogProvider>
+        <DemoProvider>
+          <Story />
+        </DemoProvider>
+      </DialogProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ChatStart>;
+
+export const Default: Story = {
+  args: {},
+};