fix: ensure that flag and modify button metadata uses strings (WIP)

apps/nextjs/src/components/AppComponents/Chat/drop-down-section/flag-button.tsx

@@ -1,11 +1,13 @@
 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";
 
 import { useLessonChat } from "@/components/ContextProviders/ChatProvider";
+import { isPlainObject } from "@/utils/isPlainObject";
 import { trpc } from "@/utils/trpc";
 
 import ActionButton from "./action-button";
@@ -26,7 +28,7 @@ type FlagButtonOptions = typeof flagOptions;
 type FlagButtonProps = {
   sectionTitle: string;
   sectionPath: string;
-  sectionValue: Record<string, unknown> | string | Array<unknown>;
+  sectionValue: LessonPlanSectionWhileStreaming;
 };
 
 const FlagButton = ({
@@ -48,6 +50,21 @@ const FlagButton = ({
 
   const { mutateAsync } = trpc.chat.chatFeedback.flagSection.useMutation();
 
+  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 +73,7 @@ const FlagButton = ({
         flagType: selectedRadio.enumValue,
         userComment: userFeedbackText,
         sectionPath,
-        sectionValue,
+        sectionValue: prepareSectionValue(sectionValue),
       };
       await mutateAsync(payload);
     }
@@ -93,7 +110,7 @@ const FlagButton = ({
           >
             {flagOptions.map((option) => (
               <FlagButtonFormItem
-                key={`flagbuttonformitem-${option.enumValue}`}
+                key={`flagButtonFormItem-${option.enumValue}`}
                 option={option}
                 setSelectedRadio={setSelectedRadio}
                 setDisplayTextBox={setDisplayTextBox}

apps/nextjs/src/components/AppComponents/Chat/drop-down-section/modify-button.tsx

@@ -1,12 +1,14 @@
 import { useRef, useState } from "react";
 
 import { getLastAssistantMessage } from "@oakai/aila/src/helpers/chat/getLastAssistantMessage";
+import type { LessonPlanSectionWhileStreaming } from "@oakai/aila/src/protocol/schema";
 import type { AilaUserModificationAction } from "@oakai/db";
 import { aiLogger } from "@oakai/logger";
 import { OakBox, OakP, OakRadioGroup } from "@oaknational/oak-components";
 import { TextArea } from "@radix-ui/themes";
 
 import { useLessonChat } from "@/components/ContextProviders/ChatProvider";
+import { isPlainObject } from "@/utils/isPlainObject";
 import { trpc } from "@/utils/trpc";
 
 import ActionButton from "./action-button";
@@ -43,7 +45,7 @@ const modifyOptions = [
 type ModifyButtonProps = {
   sectionTitle: string;
   sectionPath: string;
-  sectionValue: Record<string, unknown> | string | Array<unknown>;
+  sectionValue: LessonPlanSectionWhileStreaming;
 };
 
 const ModifyButton = ({
@@ -66,13 +68,27 @@ const ModifyButton = ({
 
   const lastAssistantMessage = getLastAssistantMessage(messages);
 
+  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 recordUserModifySectionContent = async () => {
     if (selectedRadio && lastAssistantMessage) {
       const payload = {
         chatId: id,
         messageId: lastAssistantMessage.id,
         sectionPath,
-        sectionValue,
+        sectionValue: prepareSectionValue(sectionValue),
         action: selectedRadio.enumValue,
         actionOtherText: userFeedbackText || null,
       };

apps/nextjs/src/utils/isPlainObject.ts

@@ -0,0 +1,7 @@
+// Type guard to check if the value is a plain object
+
+export const isPlainObject = (
+  value: unknown,
+): value is Record<string, unknown> => {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+};