test: stories for supplementary chat messages

apps/nextjs/.storybook/preview.tsx

@@ -45,7 +45,6 @@ export const decorators: Decorator[] = [
   ClerkDecorator,
   (Story) => (
     <>
-      {/* TODO: Mock tRPC calls with MSW */}
       <TRPCReactProvider>
         <AnalyticsProvider>
           <DialogProvider>

apps/nextjs/src/components/AppComponents/Chat/Chat/ChatModerationDisplay.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { ChatModerationDisplay } from "./ChatModerationDisplay";
 
 const meta: Meta<typeof ChatModerationDisplay> = {
-  title: "Components/Chat/ChatModerationDisplay",
+  title: "Components/Dialogs/ChatModerationDisplay",
   component: ChatModerationDisplay,
   tags: ["autodocs"],
   decorators: [

apps/nextjs/src/components/AppComponents/Chat/chat-list/demo-limit-message.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ChatModerationProvider } from "@/components/ContextProviders/ChatModerationContext";
+
+import { DemoLimitMessage } from "./demo-limit-message";
+
+const meta: Meta<typeof DemoLimitMessage> = {
+  title: "Components/Chat/DemoLimitMessage",
+  component: DemoLimitMessage,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <ChatModerationProvider chatId="test-chat-id">
+        <Story />
+      </ChatModerationProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof DemoLimitMessage>;
+
+export const Default: Story = {
+  args: {},
+};

apps/nextjs/src/components/AppComponents/Chat/chat-list/demo-limit-message.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { ChatMessage } from "@/components/AppComponents/Chat/chat-message";
+
+export function DemoLimitMessage({ id }: Readonly<{ id: string }>) {
+  return (
+    <div className="w-full flex-col gap-11">
+      <ChatMessage
+        chatId={id}
+        ailaStreamingStatus="Idle"
+        message={{
+          id: "demo-limit",
+          role: "assistant",
+          content:
+            '{"type": "error", "message": "**Your lesson is complete**\\nYou can no longer edit this lesson. [Create new lesson.](/aila)"}',
+        }}
+        persistedModerations={[]}
+        separator={<span className="my-10 flex" />}
+      />
+    </div>
+  );
+}

apps/nextjs/src/components/AppComponents/Chat/chat-list/in-chat-download-buttons.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DemoContext } from "@/components/ContextProviders/Demo";
+
+import { InChatDownloadButtons } from "./in-chat-download-buttons";
+
+const DemoDecorator: Story["decorators"] = (Story, { parameters }) => (
+  <DemoContext.Provider
+    value={{
+      isDemoUser: false,
+      isSharingEnabled: true,
+      ...parameters.demoContext,
+    }}
+  >
+    <Story />
+  </DemoContext.Provider>
+);
+
+const meta: Meta<typeof InChatDownloadButtons> = {
+  title: "Components/Chat/InChatDownloadButtons",
+  component: InChatDownloadButtons,
+  tags: ["autodocs"],
+  args: {
+    id: "test-chat-id",
+  },
+  decorators: [DemoDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof InChatDownloadButtons>;
+
+export const Default: Story = {};
+
+export const SharingDisabled: Story = {
+  parameters: {
+    demoContext: {
+      isSharingEnabled: false,
+    },
+  },
+};

apps/nextjs/src/components/AppComponents/Chat/chat-list/in-chat-download-buttons.tsx

@@ -0,0 +1,63 @@
+import { OakBox, OakFlex, OakIcon, OakSpan } from "@oaknational/oak-components";
+import Link from "next/link";
+
+import { useDemoUser } from "@/components/ContextProviders/Demo";
+
+import { useDialog } from "../../DialogContext";
+
+export const InChatDownloadButtons = ({ id }: { readonly id: string }) => {
+  const demo = useDemoUser();
+  const { setDialogWindow } = useDialog();
+
+  return (
+    <OakFlex $flexDirection="column" $gap="all-spacing-7" $mv="space-between-l">
+      {demo.isSharingEnabled && (
+        <Link
+          href={demo.isSharingEnabled ? `/aila/download/${id}` : "#"}
+          onClick={() => {
+            if (!demo.isSharingEnabled) {
+              setDialogWindow("demo-share-locked");
+            }
+          }}
+        >
+          <InnerInChatButton iconName="download">Download</InnerInChatButton>
+        </Link>
+      )}
+      <button
+        onClick={() => {
+          if (demo.isSharingEnabled) {
+            setDialogWindow("share-chat");
+          } else {
+            setDialogWindow("demo-share-locked");
+          }
+        }}
+      >
+        <InnerInChatButton iconName="share">Share</InnerInChatButton>
+      </button>
+    </OakFlex>
+  );
+};
+
+const InnerInChatButton = ({
+  iconName,
+  children,
+}: {
+  readonly iconName: "download" | "share";
+  readonly children: string;
+}) => {
+  return (
+    <OakFlex
+      $pa="inner-padding-m"
+      $gap="all-spacing-3"
+      $background="white"
+      $borderRadius="border-radius-m"
+      $alignItems="center"
+      $dropShadow="drop-shadow-standard"
+    >
+      <OakBox $transform="scale">
+        <OakIcon iconName={iconName} $width="all-spacing-7" />
+      </OakBox>
+      <OakSpan $font="body-2">{children}</OakSpan>
+    </OakFlex>
+  );
+};

apps/nextjs/src/components/AppComponents/Chat/chat-list.tsx → apps/nextjs/src/components/AppComponents/Chat/chat-list/index.tsx

@@ -1,47 +1,24 @@
 "use client";
 
-import type { Dispatch, SetStateAction } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 import type { PersistedModerationBase } from "@oakai/core/src/utils/ailaModeration/moderationSchema";
-import { OakBox, OakFlex, OakIcon, OakSpan } from "@oaknational/oak-components";
 import type { Message } from "ai";
-import Link from "next/link";
 
 import { ChatMessage } from "@/components/AppComponents/Chat/chat-message";
 import { useLessonChat } from "@/components/ContextProviders/ChatProvider";
 import type { DemoContextProps } from "@/components/ContextProviders/Demo";
 
-import { useDialog } from "../DialogContext";
-import type { AilaStreamingStatus } from "./Chat/hooks/useAilaStreamingStatus";
-import { useProgressForDownloads } from "./Chat/hooks/useProgressForDownloads";
-import type { DialogTypes } from "./Chat/types";
+import type { AilaStreamingStatus } from "../Chat/hooks/useAilaStreamingStatus";
+import { useProgressForDownloads } from "../Chat/hooks/useProgressForDownloads";
+import { DemoLimitMessage } from "./demo-limit-message";
+import { InChatDownloadButtons } from "./in-chat-download-buttons";
 
 export interface ChatListProps {
   isDemoLocked: boolean;
   showLessonMobile: boolean;
   demo: DemoContextProps;
 }
-
-function DemoLimitMessage({ id }: Readonly<{ id: string }>) {
-  return (
-    <div className="w-full flex-col gap-11">
-      <ChatMessage
-        chatId={id}
-        ailaStreamingStatus="Idle"
-        message={{
-          id: "demo-limit",
-          role: "assistant",
-          content:
-            '{"type": "error", "message": "**Your lesson is complete**\\nYou can no longer edit this lesson. [Create new lesson.](/aila)"}',
-        }}
-        persistedModerations={[]}
-        separator={<span className="my-10 flex" />}
-      />
-    </div>
-  );
-}
-
 export function ChatList({
   isDemoLocked,
   showLessonMobile,
@@ -129,7 +106,6 @@ export const ChatMessagesDisplay = ({
   demo,
 }: ChatMessagesDisplayProps) => {
   const { lessonPlan, isStreaming } = useLessonChat();
-  const { setDialogWindow } = useDialog();
   const { totalSections, totalSectionsComplete } = useProgressForDownloads({
     lessonPlan,
     isStreaming,
@@ -228,71 +204,7 @@ export const ChatMessagesDisplay = ({
             (message.role !== "user" &&
               message.content.includes("download") &&
               message.content.includes("share")),
-        ) && <InChatDownloadButtons {...{ demo, id, setDialogWindow }} />}
+        ) && <InChatDownloadButtons {...{ demo, id }} />}
     </>
   );
 };
-
-const InChatDownloadButtons = ({
-  demo,
-  id,
-  setDialogWindow,
-}: {
-  readonly demo: DemoContextProps;
-  readonly id: string;
-  readonly setDialogWindow: Dispatch<SetStateAction<DialogTypes>>;
-}) => {
-  return (
-    <OakFlex $flexDirection="column" $gap="all-spacing-7" $mv="space-between-l">
-      {demo.isSharingEnabled && (
-        <Link
-          href={demo.isSharingEnabled ? `/aila/download/${id}` : "#"}
-          onClick={() => {
-            if (!demo.isSharingEnabled) {
-              setDialogWindow("demo-share-locked");
-            }
-          }}
-        >
-          <InnerInChatButton iconName="download">Download</InnerInChatButton>
-        </Link>
-      )}
-      <button
-        onClick={() => {
-          if (demo.isSharingEnabled) {
-            setDialogWindow("share-chat");
-          } else {
-            setDialogWindow("demo-share-locked");
-          }
-        }}
-      >
-        <InnerInChatButton iconName="share">Share</InnerInChatButton>
-      </button>
-    </OakFlex>
-  );
-};
-
-const InnerInChatButton = ({
-  iconName,
-
-  children,
-}: {
-  readonly iconName: "download" | "share";
-
-  readonly children: string;
-}) => {
-  return (
-    <OakFlex
-      $pa="inner-padding-m"
-      $gap="all-spacing-3"
-      $background="white"
-      $borderRadius="border-radius-m"
-      $alignItems="center"
-      $dropShadow="drop-shadow-standard"
-    >
-      <OakBox $transform="scale">
-        <OakIcon iconName={iconName} $width="all-spacing-7" />
-      </OakBox>
-      <OakSpan $font="body-2">{children}</OakSpan>
-    </OakFlex>
-  );
-};

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

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { ChatStartForm } from "./chat-start-form";
 
 const meta: Meta<typeof ChatStartForm> = {
-  title: "Components/Chat/ChatStartForm",
+  title: "Components/Chat Start/ChatStartForm",
   component: ChatStartForm,
   tags: ["autodocs"],
 };

apps/nextjs/src/components/AppComponents/Chat/guidance-required.stories.tsx

@@ -23,18 +23,19 @@ export const Default: Story = {
   },
 };
 
-export const CustomClass: Story = {
-  args: {
-    moderation: mockModeration,
-    className: "custom-class",
-  },
-};
-
-export const Safe: Story = {
+export const NoModeration: Story = {
   args: {
     moderation: {
       id: "safe",
       categories: [],
     },
   },
+  decorators: [
+    (Story) => (
+      <>
+        <Story />
+        <p>(Nothing should render here)</p>
+      </>
+    ),
+  ],
 };