From 9e24256b5d6fac9924e6f8aec5ce0b0769fe4f3f Mon Sep 17 00:00:00 2001
From: Tom Wise <79859203+tomwisecodes@users.noreply.github.com>
Date: Fri, 15 Nov 2024 10:29:47 +0000
Subject: [PATCH] chore: test

---
 .../AppComponents/Chat/chat-start.tsx         | 69 +++++++++++++++----
 .../AppComponents/Chat/markdown.tsx           | 65 +++++++----------
 2 files changed, 82 insertions(+), 52 deletions(-)

diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-start.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-start.tsx
index fd53facf9..a0a914b1e 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-start.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-start.tsx
@@ -92,13 +92,26 @@ export function ChatStart() {
     ],
   );
   const [validationError, setValidationError] = useState<string | null>(null);
-  const userCanSubmit =
-    selectedSubject && selectedKeyStage && selectedLength && input
-      ? true
-      : false;
+
+  const [userCanSubmit, setUserCanSubmit] = useState(false);
+
+  useEffect(() => {
+    if (selectedSubject && selectedKeyStage && selectedLength && input) {
+      setUserCanSubmit(true);
+    } else {
+      setUserCanSubmit(false);
+    }
+  }, [
+    selectedSubject,
+    selectedKeyStage,
+    selectedLength,
+    input,
+    setUserCanSubmit,
+  ]);
+
   const submit = useCallback(
     async (message: string) => {
-      if (!userCanSubmit) {
+      if (!selectedSubject || !selectedKeyStage || !selectedLength || !input) {
         setValidationError(
           `The following field(s) are missing: ${
             !selectedSubject ? "Subject" : ""
@@ -115,7 +128,7 @@ export function ChatStart() {
         create(message);
       }
     },
-    [create, setDialogWindow, demo.isDemoUser, setIsSubmitting, userCanSubmit],
+    [create, setDialogWindow, demo.isDemoUser, setIsSubmitting],
   );
 
   const interstitialSubmit = useCallback(async () => {
@@ -198,13 +211,26 @@ export function ChatStart() {
                         variant="link"
                         className="pl-0"
                         onClick={async () => {
-                          trackEvent(`chat: ${message.message}`);
-                          setInput("roman britain");
-                          setSelectedKeyStage("Key Stage 3");
-                          setSelectedSubject("History");
-                          setSelectedLength("60 mins");
-                          if (typeof initialPrompt === "string") {
-                            await submit(initialPrompt);
+                          try {
+                            trackEvent(`chat: ${message.message}`);
+                            await populateAllStartChatFields({
+                              setInput,
+                              setSelectedKeyStage,
+                              setSelectedSubject,
+                              setSelectedLength,
+                            });
+
+                            if (typeof initialPrompt === "string") {
+                              // wait for 0.5s to ensure the state is updated
+                              setTimeout(async () => {
+                                await submit(initialPrompt);
+                              }, 500);
+                            }
+                          } catch (error) {
+                            console.error(
+                              "Error handling button click:",
+                              error,
+                            );
                           }
                         }}
                       >
@@ -517,3 +543,20 @@ export function useOutsideClick(callback: () => void) {
 
   return ref;
 }
+
+async function populateAllStartChatFields({
+  setInput,
+  setSelectedKeyStage,
+  setSelectedSubject,
+  setSelectedLength,
+}: {
+  setInput: (value: string) => void;
+  setSelectedKeyStage: (value: string) => void;
+  setSelectedSubject: (value: string) => void;
+  setSelectedLength: (value: string) => void;
+}) {
+  setInput("roman britain");
+  setSelectedKeyStage("Key Stage 3");
+  setSelectedSubject("History");
+  setSelectedLength("60 mins");
+}
diff --git a/apps/nextjs/src/components/AppComponents/Chat/markdown.tsx b/apps/nextjs/src/components/AppComponents/Chat/markdown.tsx
index 6adb0e9cf..29a8cb44d 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/markdown.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/markdown.tsx
@@ -40,7 +40,10 @@ export const MemoizedReactMarkdownWithStyles = ({
 
   // UseCallback to avoid inline function recreation
   const handleAppend = useCallback(
-    (content: string) => append({ content, role: "user" }),
+    (content: string) => {
+      console.log("Appending message:", content);
+      append({ content, role: "user" });
+    },
     [append],
   );
 
@@ -80,19 +83,19 @@ export const MemoizedReactMarkdownWithStyles = ({
           );
         },
         p({ children }) {
+          const isStringChild = (child: any): child is string =>
+            typeof child === "string";
+
+          const textChildren = React.Children.toArray(children)
+            .filter(isStringChild)
+            .join("");
+
           if (
-            Array.isArray(children) &&
-            (children[children.length - 1]?.includes(
-              "proceed to the final step",
-            ) ||
-              children[children.length - 1]?.includes(
-                "move on to the final step",
-              ) ||
-              children[children.length - 1]?.includes(
-                "complete the lesson plan",
-              ))
+            textChildren.includes("proceed to the final step") ||
+            textChildren.includes("move on to the final step") ||
+            textChildren.includes("complete the lesson plan")
           ) {
-            const text = children.slice(0, -2)[0].split("Otherwise, tap")[0];
+            const text = textChildren.split("Otherwise, tap")[0];
             return (
               <div className="flex flex-col gap-5">
                 <p className={cn("mb-7 last:mb-0", className)}>{text}</p>
@@ -103,17 +106,13 @@ export const MemoizedReactMarkdownWithStyles = ({
               </div>
             );
           }
+
           if (
-            Array.isArray(children) &&
-            (children[children.length - 1]?.includes(
-              "proceed to the next step",
-            ) ||
-              children[children.length - 1]?.includes(
-                "move on to the next step",
-              ) ||
-              children[children.length - 3]?.includes("Otherwise, tap"))
+            textChildren.includes("proceed to the next step") ||
+            textChildren.includes("move on to the next step") ||
+            textChildren.includes("Otherwise, tap")
           ) {
-            const text = children.slice(0, -2)[0].split("Otherwise, tap")[0];
+            const text = textChildren.split("Otherwise, tap")[0];
             return (
               <div className="flex flex-col gap-5">
                 <p className={cn("mb-7 last:mb-0", className)}>{text}</p>
@@ -125,24 +124,9 @@ export const MemoizedReactMarkdownWithStyles = ({
             );
           }
 
-          if (
-            Array.isArray(children) &&
-            children[2]?.includes("start from scratch")
-          ) {
-            return (
-              <div className="flex flex-col gap-5">
-                <p className={cn("mb-7 last:mb-0", className)}>
-                  If not, ask me something or else, or:
-                </p>
-                <InLineButton
-                  onClick={() => handleAppend("Continue from scratch")}
-                  text="Continue from scratch"
-                />
-              </div>
-            );
-          }
           return <p className={cn("mb-7 last:mb-0", className)}>{children}</p>;
         },
+
         h1({ children }) {
           return (
             <Flex align="center" gap="3" className="mt-20">
@@ -213,12 +197,15 @@ export const MemoizedReactMarkdownWithStyles = ({
     </MemoizedReactMarkdown>
   );
 };
-
 const InLineButton = memo(
   ({ text, onClick }: { text: string; onClick: () => void }) => {
+    const handleClick = useCallback(() => {
+      onClick();
+    }, [onClick]);
+
     return (
       <button
-        onClick={onClick}
+        onClick={handleClick}
         className="my-6 w-fit border-spacing-4 rounded-lg border border-black border-opacity-30 bg-white p-7 text-blue"
       >
         {text}