chore: use LessonPlanSectionWhileStreaming type (#434)

oaknational · Dec 9, 2024 · c1c812f · c1c812f
1 parent b7972ba
commit c1c812f
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 36 deletions.
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-lessonPlanDisplay.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-lessonPlanDisplay.tsx
@@ -24,7 +24,7 @@ function basedOnTitle(basedOn: string | BasedOnOptional) {
 }
 
 const displayStyles = cva(
-  "relative flex flex-col space-y-10 px-14 pb-28 opacity-100 sm:px-24 ",
+  "relative flex flex-col space-y-10 px-14 pb-28 opacity-100 sm:px-24",
 );
 
 export type LessonPlanDisplayProps = Readonly<{
@@ -143,7 +143,7 @@ export const LessonPlanDisplay = ({
                 return (
                   <DropDownSection
                     key={dependant}
-                    objectKey={dependant}
+                    section={dependant}
                     sectionRefs={sectionRefs}
                     value={value}
                     userHasCancelledAutoScroll={userHasCancelledAutoScroll}

diff --git a/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/action-button-wrapper.tsx b/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/action-button-wrapper.tsx
@@ -1,6 +1,7 @@
 import { useRef, useState } from "react";
 
 import { getLastAssistantMessage } from "@oakai/aila/src/helpers/chat/getLastAssistantMessage";
+import type { LessonPlanSectionWhileStreaming } from "@oakai/aila/src/protocol/schema";
 import { OakBox } from "@oaknational/oak-components";
 import type { AilaUserModificationAction } from "@prisma/client";
 
@@ -18,7 +19,7 @@ import type { FeedbackOption } from "./drop-down-form-wrapper";
 export type ActionButtonWrapperProps = Readonly<{
   sectionTitle: string;
   sectionPath: string;
-  sectionValue: Record<string, unknown> | string | Array<unknown>;
+  sectionValue: LessonPlanSectionWhileStreaming;
   options: ModifyOptions | AdditionalMaterialOptions;
   buttonText: string;
   actionButtonLabel: string;
@@ -59,7 +60,7 @@ const ActionButtonWrapper = ({
         chatId: id,
         messageId: lastAssistantMessage.id,
         sectionPath,
-        sectionValue,
+        sectionValue: String(sectionValue),
         action: selectedRadio.enumValue,
         actionOtherText: userFeedbackText || null,
       };

diff --git a/...s/src/components/AppComponents/Chat/drop-down-section/add-additional-materials-button.tsx b/...s/src/components/AppComponents/Chat/drop-down-section/add-additional-materials-button.tsx
@@ -1,3 +1,4 @@
+import type { LessonPlanSectionWhileStreaming } from "@oakai/aila/src/protocol/schema";
 import type { AilaUserModificationAction } from "@prisma/client";
 
 import ActionButtonWrapper from "./action-button-wrapper";
@@ -7,7 +8,7 @@ import type { FeedbackOption } from "./drop-down-form-wrapper";
 export type AdditionalMaterialsProps = Readonly<{
   sectionTitle: string;
   sectionPath: string;
-  sectionValue: Record<string, unknown> | string | Array<unknown>;
+  sectionValue: LessonPlanSectionWhileStreaming;
 }>;
 
 const AddAdditionalMaterialsButton = ({

diff --git a/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/chat-section.tsx b/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/chat-section.tsx
@@ -1,3 +1,7 @@
+import type {
+  LessonPlanKeys,
+  LessonPlanSectionWhileStreaming,
+} from "@oakai/aila/src/protocol/schema";
 import { sectionToMarkdown } from "@oakai/aila/src/protocol/sectionToMarkdown";
 import { OakFlex } from "@oaknational/oak-components";
 import { lessonSectionTitlesAndMiniDescriptions } from "data/lessonSectionTitlesAndMiniDescriptions";
@@ -9,41 +13,42 @@ import FlagButton from "./flag-button";
 import ModifyButton from "./modify-button";
 
 export type ChatSectionProps = Readonly<{
-  objectKey: string;
-  value: Record<string, unknown> | string | Array<unknown>;
+  section: LessonPlanKeys;
+  value: LessonPlanSectionWhileStreaming;
 }>;
-const ChatSection = ({ objectKey, value }: ChatSectionProps) => {
+
+const ChatSection = ({ section, value }: ChatSectionProps) => {
   return (
     <OakFlex $flexDirection="column">
       <MemoizedReactMarkdownWithStyles
         lessonPlanSectionDescription={
-          lessonSectionTitlesAndMiniDescriptions[objectKey]?.description
+          lessonSectionTitlesAndMiniDescriptions[section]?.description
         }
-        markdown={`${sectionToMarkdown(objectKey, value)}`}
+        markdown={`${sectionToMarkdown(section, value)}`}
       />
       <OakFlex
         $gap="all-spacing-3"
         $mt="space-between-s"
         $position="relative"
         $display={["none", "flex"]}
       >
-        {objectKey === "additionalMaterials" && value === "None" ? (
+        {section === "additionalMaterials" && value === "None" ? (
           <AddAdditionalMaterialsButton
-            sectionTitle={sectionTitle(objectKey)}
-            sectionPath={objectKey}
+            sectionTitle={sectionTitle(section)}
+            sectionPath={section}
             sectionValue={value}
           />
         ) : (
           <ModifyButton
-            sectionTitle={sectionTitle(objectKey)}
-            sectionPath={objectKey}
+            sectionTitle={sectionTitle(section)}
+            sectionPath={section}
             sectionValue={value}
           />
         )}
 
         <FlagButton
-          sectionTitle={sectionTitle(objectKey)}
-          sectionPath={objectKey}
+          sectionTitle={sectionTitle(section)}
+          sectionPath={section}
           sectionValue={value}
         />
       </OakFlex>

diff --git a/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/flag-button.tsx b/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/flag-button.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 
 import { getLastAssistantMessage } from "@oakai/aila/src/helpers/chat/getLastAssistantMessage";
+import type { LessonPlanSectionWhileStreaming } from "@oakai/aila/src/protocol/schema";
 import type { AilaUserFlagType } from "@oakai/db";
 import { OakBox, OakP, OakRadioGroup } from "@oaknational/oak-components";
 import styled from "styled-components";
@@ -26,7 +27,7 @@ type FlagButtonOptions = typeof flagOptions;
 export type FlagButtonProps = Readonly<{
   sectionTitle: string;
   sectionPath: string;
-  sectionValue: Record<string, unknown> | string | Array<unknown>;
+  sectionValue: LessonPlanSectionWhileStreaming;
 }>;
 
 const FlagButton = ({
@@ -48,6 +49,25 @@ const FlagButton = ({
 
   const { mutateAsync } = trpc.chat.chatFeedback.flagSection.useMutation();
 
+  const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+  };
+
+  const prepareSectionValue = (
+    value: LessonPlanSectionWhileStreaming,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ): string | any[] | Record<string, unknown> => {
+    if (
+      typeof value === "string" ||
+      Array.isArray(value) ||
+      isPlainObject(value)
+    ) {
+      return value;
+    }
+    // For numbers or any other types, convert to string
+    return String(value);
+  };
+
   const flagSectionContent = async () => {
     if (selectedRadio && lastAssistantMessage) {
       const payload = {
@@ -56,7 +76,7 @@ const FlagButton = ({
         flagType: selectedRadio.enumValue,
         userComment: userFeedbackText,
         sectionPath,
-        sectionValue,
+        sectionValue: prepareSectionValue(sectionValue),
       };
       await mutateAsync(payload);
     }
@@ -93,7 +113,7 @@ const FlagButton = ({
           >
             {flagOptions.map((option) => (
               <FlagButtonFormItem
-                key={`flagbuttonformitem-${option.enumValue}`}
+                key={`flagButtonFormItem-${option.enumValue}`}
                 option={option}
                 setSelectedRadio={setSelectedRadio}
                 setDisplayTextBox={setDisplayTextBox}

diff --git a/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/index.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/index.stories.tsx
@@ -40,7 +40,7 @@ const meta: Meta<typeof DropDownSection> = {
   component: DropDownSection,
   tags: ["autodocs"],
   args: {
-    objectKey: "learningOutcome",
+    section: "learningOutcome",
     value:
       "I can explain the reasons why frogs are so important to British society and culture",
     documentContainerRef: { current: null },
@@ -89,7 +89,7 @@ export const Closed: Story = {
 
 export const AdditionalMaterials: Story = {
   args: {
-    objectKey: "additionalMaterials",
+    section: "additionalMaterials",
     value: "None",
   },
 };
@@ -116,7 +116,7 @@ export const ModifyAdditionalMaterials: Story = {
     },
   },
   args: {
-    objectKey: "additionalMaterials",
+    section: "additionalMaterials",
     value: "None",
   },
   play: async ({ canvasElement }) => {

diff --git a/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/index.tsx b/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 
+import type { LessonPlanKeys } from "@oakai/aila/src/protocol/schema";
 import { camelCaseToSentenceCase } from "@oakai/core/src/utils/camelCaseConversion";
 import { OakBox, OakFlex, OakP } from "@oaknational/oak-components";
 import { equals } from "ramda";
@@ -15,7 +16,7 @@ import ChatSection from "./chat-section";
 const HALF_SECOND = 500;
 
 export type DropDownSectionProps = Readonly<{
-  objectKey: string;
+  section: LessonPlanKeys;
   sectionRefs: Record<string, React.MutableRefObject<HTMLDivElement | null>>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any;
@@ -26,7 +27,7 @@ export type DropDownSectionProps = Readonly<{
 }>;
 
 const DropDownSection = ({
-  objectKey,
+  section,
   sectionRefs,
   value,
   documentContainerRef,
@@ -35,7 +36,7 @@ const DropDownSection = ({
   streamingTimeout = HALF_SECOND,
 }: DropDownSectionProps) => {
   const sectionRef = useRef(null);
-  if (sectionRefs) sectionRefs[objectKey] = sectionRef;
+  if (sectionRefs) sectionRefs[section] = sectionRef;
   const [isOpen, setIsOpen] = useState(false);
   const [status, setStatus] = useState<"empty" | "isStreaming" | "isLoaded">(
     "empty",
@@ -56,7 +57,7 @@ const DropDownSection = ({
       setStatus("isStreaming");
 
       if (sectionRef && sectionHasFired === false && status === "isStreaming") {
-        if (objectKey && value) {
+        if (section && value) {
           function scrollToSection() {
             if (!userHasCancelledAutoScroll) {
               scrollToRef({
@@ -86,7 +87,7 @@ const DropDownSection = ({
     sectionRef,
     sectionHasFired,
     status,
-    objectKey,
+    section,
     setIsOpen,
     prevValue,
     documentContainerRef,
@@ -109,7 +110,7 @@ const DropDownSection = ({
 
         <FullWidthButton onClick={() => setIsOpen(!isOpen)} aria-label="toggle">
           <OakFlex $width="100%" $justifyContent="space-between">
-            <OakP $font="heading-6">{sectionTitle(objectKey)}</OakP>
+            <OakP $font="heading-6">{sectionTitle(section)}</OakP>
             <Icon icon={isOpen ? "chevron-up" : "chevron-down"} size="sm" />
           </OakFlex>
         </FullWidthButton>
@@ -118,7 +119,7 @@ const DropDownSection = ({
       {isOpen && (
         <div className="mt-12 w-full">
           {status === "isLoaded" ? (
-            <ChatSection objectKey={objectKey} value={value} />
+            <ChatSection section={section} value={value} />
           ) : (
             <Skeleton loaded={false} numberOfRows={1}>
               <p>Loading</p>

diff --git a/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/modify-button.tsx b/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/modify-button.tsx
@@ -1,3 +1,4 @@
+import type { LessonPlanSectionWhileStreaming } from "@oakai/aila/src/protocol/schema";
 import type { AilaUserModificationAction } from "@prisma/client";
 
 import ActionButtonWrapper from "./action-button-wrapper";
@@ -7,7 +8,7 @@ import type { FeedbackOption } from "./drop-down-form-wrapper";
 export type ModifyButtonProps = Readonly<{
   sectionTitle: string;
   sectionPath: string;
-  sectionValue: Record<string, unknown> | string | Array<unknown>;
+  sectionValue: LessonPlanSectionWhileStreaming;
 }>;
 
 const ModifyButton = ({

diff --git a/apps/nextjs/src/data/lessonSectionTitlesAndMiniDescriptions.ts b/apps/nextjs/src/data/lessonSectionTitlesAndMiniDescriptions.ts
@@ -1,4 +1,24 @@
-export const lessonSectionTitlesAndMiniDescriptions = {
+import type { LessonPlanKeys } from "@oakai/aila/src/protocol/schema";
+
+export const lessonSectionTitlesAndMiniDescriptions: Record<
+  LessonPlanKeys,
+  { description: string }
+> = {
+  title: {
+    description: "The name of the lesson.",
+  },
+  keyStage: {
+    description: "The educational stage for which the lesson is intended.",
+  },
+  subject: {
+    description: "The subject area of the lesson.",
+  },
+  topic: {
+    description: "An optional topic that this lesson is part of.",
+  },
+  basedOn: {
+    description: "An Oak lesson that this lesson is based on.",
+  },
   learningOutcome: {
     description:
       "A short summary of the knowledge, skills and understanding students are expected to acquire by the end of the lesson.",
@@ -47,8 +67,8 @@ export const lessonSectionTitlesAndMiniDescriptions = {
     description:
       "Extra resources for further study or practice, including worksheets, readings, and interactive activities.",
   },
-  slides: {
-    description:
-      "Visual aids and presentations used throughout the lesson to support teaching and learning.",
-  },
+  // slides: {
+  //   description:
+  //     "Visual aids and presentations used throughout the lesson to support teaching and learning.",
+  // },
 };