Reverted Level to only utas placement test exercises, Speaking, bug fixes, placeholder

src/components/ExamEditor/SettingsEditor/speaking.tsx

@@ -2,34 +2,65 @@ import useExamEditorStore from "@/stores/examEditor";
 import useSettingsState from "../Hooks/useSettingsState";
 import { SpeakingSectionSettings } from "@/stores/examEditor/types";
 import Option from "@/interfaces/option";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { generate } from "./Shared/Generate";
 import SettingsEditor from ".";
 import Dropdown from "./Shared/SettingsDropdown";
 import Input from "@/components/Low/Input";
 import GenerateBtn from "./Shared/GenerateBtn";
 import clsx from "clsx";
+import { FaFemale, FaMale, FaChevronDown } from "react-icons/fa";
+import { InteractiveSpeakingExercise, SpeakingExam, SpeakingExercise } from "@/interfaces/exam";
+import { toast } from "react-toastify";
+import { generateVideos } from "./Shared/generateVideos";
+import { usePersistentExamStore } from "@/stores/examStore";
+import { useRouter } from "next/router";
+import openDetachedTab from "@/utils/popout";
+import axios from "axios";
+import { playSound } from "@/utils/sound";
 
+export interface Avatar {
+    name: string;
+    gender: string;
+}
 
 const SpeakingSettings: React.FC = () => {
 
-    const { currentModule } = useExamEditorStore();
-    const { focusedSection, difficulty } = useExamEditorStore((store) => store.modules[currentModule])
+    const router = useRouter();
+
+    const {
+        setExam,
+        setExerciseIndex,
+        setQuestionIndex,
+        setBgColor,
+    } = usePersistentExamStore();
+
+    const { title, currentModule, speakingAvatars, dispatch } = useExamEditorStore();
+    const { focusedSection, difficulty, sections, minTimer, isPrivate } = useExamEditorStore((store) => store.modules[currentModule])
+
+    const section = sections.find((section) => section.sectionId == focusedSection)?.state;
+
 
     const { localSettings, updateLocalAndScheduleGlobal } = useSettingsState<SpeakingSectionSettings>(
         currentModule,
         focusedSection,
     );
 
+    const [selectedAvatar, setSelectedAvatar] = useState<Avatar | null>(null);
+
     const defaultPresets: Option[] = [
         {
-            label: "Preset: Writing Task 1",
-            value: "Welcome to {part} of the {label}. You will write a letter of at least 150 words in response to a given situation. Your letter may be personal, semi-formal, or formal. You have 20 minutes for this task."
-        },
-        {
-            label: "Preset: Writing Task 2",
-            value: "Welcome to {part} of the {label}. You will write a semi-formal/neutral essay of at least 250 words on a topic of general interest. Discuss the given opinion, argument, or problem. Organize your ideas clearly and support them with relevant examples. You have 40 minutes for this task."
-        }
+            label: "Preset: Speaking Part 1",
+            value: "Welcome to {part} of the {label}. You will engage in a conversation about yourself and familiar topics such as your home, family, work, studies, and interests. General questions will be asked."
+          },
+          {
+            label: "Preset: Speaking Part 2",
+            value: "Welcome to {part} of the {label}. You will be given a topic card describing a particular person, object, event, or experience."
+          },
+          {
+            label: "Preset: Speaking Part 3",
+            value: "Welcome to {part} of the {label}. You will engage in an in-depth discussion about abstract ideas and issues. The examiner will ask questions that require you to explain, analyze, and speculate about various aspects of the topic."
+          }
     ];
 
     const generateScript = useCallback((sectionId: number) => {
@@ -39,7 +70,7 @@ const SpeakingSettings: React.FC = () => {
             second_topic?: string;
             topic?: string;
         } = { difficulty };
-        
+
         if (sectionId === 1) {
             if (localSettings.topic) {
                 queryParams['first_topic'] = localSettings.topic;
@@ -86,7 +117,7 @@ const SpeakingSettings: React.FC = () => {
                 }
             }
         );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [localSettings, difficulty]);
 
     const onTopicChange = useCallback((topic: string) => {
@@ -97,16 +128,256 @@ const SpeakingSettings: React.FC = () => {
         updateLocalAndScheduleGlobal({ secondTopic: topic });
     }, [updateLocalAndScheduleGlobal]);
 
+    const canPreviewOrSubmit = (() => {
+        return sections.every((s) => {
+            const section = s.state as SpeakingExercise | InteractiveSpeakingExercise;
+            switch (section.type) {
+                case 'speaking':
+                    return section.title !== '' &&
+                        section.text !== '' &&
+                        section.video_url !== '' &&
+                        section.prompts.every(prompt => prompt !== '');
+
+                case 'interactiveSpeaking':
+                    if ('first_title' in section && 'second_title' in section) {
+                        return section.first_title !== '' &&
+                            section.second_title !== '' &&
+                            section.prompts.every(prompt => prompt.video_url !== '') &&
+                            section.prompts.length > 2;
+                    }
+                    return section.title !== '' &&
+                        section.prompts.every(prompt => prompt.video_url !== '');
+
+                default:
+                    return false;
+            }
+        });
+    })();
+
+    const canGenerate = section && (() => {
+        switch (focusedSection) {
+            case 1: {
+                const currentSection = section as InteractiveSpeakingExercise;
+                return currentSection.first_title !== "" &&
+                    currentSection.second_title !== "" &&
+                    currentSection.prompts.every(prompt => prompt.text !== "") && currentSection.prompts.length > 2;
+            }
+            case 2: {
+                const currentSection = section as SpeakingExercise;
+                return currentSection.title !== "" &&
+                    currentSection.text !== "" &&
+                    currentSection.prompts.every(prompt => prompt !== "");
+            }
+            case 3: {
+                const currentSection = section as InteractiveSpeakingExercise;
+                return currentSection.title !== "" &&
+                    currentSection.prompts.every(prompt => prompt.text !== "");
+            }
+            default:
+                return false;
+        }
+    })();
+
+    const generateVideoCallback = useCallback((sectionId: number) => {
+        dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "generating", value: "media" } })
+        generateVideos(
+            section as InteractiveSpeakingExercise | SpeakingExercise,
+            sectionId,
+            selectedAvatar,
+            speakingAvatars
+        ).then((results) => {
+            switch (sectionId) {
+                case 1:
+                case 3: {
+                    const interactiveSection = section as InteractiveSpeakingExercise;
+                    const updatedPrompts = interactiveSection.prompts.map((prompt, index) => ({
+                        ...prompt,
+                        video_url: results[index].url || ''
+                    }));
+                    dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "genResult", value: [{ prompts: updatedPrompts }] } })
+                    break;
+                }
+                case 2: {
+                    if (results[0]?.url) {
+                        dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "genResult", value: [{ video_url: results[0].url }] } })
+                    }
+                    break;
+                }
+            }
+        }).catch((error) => {
+            toast.error("Failed to generate the video, try again later!")
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedAvatar, section]);
+
+
+    const submitSpeaking = async () => {
+        if (title === "") {
+          toast.error("Enter a title for the exam!");
+          return;
+        }
+      
+        try {
+          const formData = new FormData();
+          const urlMap = new Map<string, string>();
+      
+          const sectionsWithVideos = sections.filter(s => {
+            const exercise = s.state as SpeakingExercise | InteractiveSpeakingExercise;
+            if (exercise.type === "speaking") {
+              return exercise.video_url !== "";
+            }
+            if (exercise.type === "interactiveSpeaking") {
+              return exercise.prompts?.some(prompt => prompt.video_url !== "");
+            }
+            return false;
+          });
+      
+          if (sectionsWithVideos.length === 0) {
+            toast.error('No video sections found in the exam! Please record or import videos.');
+            return;
+          }
+      
+          await Promise.all(
+            sectionsWithVideos.map(async (section) => {
+              const exercise = section.state as SpeakingExercise | InteractiveSpeakingExercise;
+              
+              if (exercise.type === "speaking") {
+                const response = await fetch(exercise.video_url);
+                const blob = await response.blob();
+                formData.append('file', blob, 'video.mp4');
+                urlMap.set(`${section.sectionId}`, exercise.video_url);
+              } else {
+                await Promise.all(
+                  exercise.prompts.map(async (prompt, promptIndex) => {
+                    if (prompt.video_url) {
+                      const response = await fetch(prompt.video_url);
+                      const blob = await response.blob();
+                      formData.append('file', blob, 'video.mp4');
+                      urlMap.set(`${section.sectionId}-${promptIndex}`, prompt.video_url);
+                    }
+                  })
+                );
+              }
+            })
+          );
+      
+          const response = await axios.post('/api/storage', formData, {
+            params: {
+              directory: 'speaking_videos'
+            },
+            headers: {
+              'Content-Type': 'multipart/form-data'
+            }
+          });
+      
+          const { urls } = response.data;
+      
+          const exam: SpeakingExam = {
+            exercises: sections.map((s) => {
+              const exercise = s.state as SpeakingExercise | InteractiveSpeakingExercise;
+      
+              if (exercise.type === "speaking") {
+                const videoIndex = Array.from(urlMap.entries())
+                  .findIndex(([key]) => key === `${s.sectionId}`);
+                
+                return {
+                  ...exercise,
+                  video_url: videoIndex !== -1 ? urls[videoIndex] : exercise.video_url,
+                  intro: s.settings.currentIntro,
+                  category: s.settings.category
+                };
+              } else {
+                const updatedPrompts = exercise.prompts.map((prompt, promptIndex) => {
+                  const videoIndex = Array.from(urlMap.entries())
+                    .findIndex(([key]) => key === `${s.sectionId}-${promptIndex}`);
+                  
+                  return {
+                    ...prompt,
+                    video_url: videoIndex !== -1 ? urls[videoIndex] : prompt.video_url
+                  };
+                });
+      
+                return {
+                  ...exercise,
+                  prompts: updatedPrompts,
+                  intro: s.settings.currentIntro,
+                  category: s.settings.category
+                };
+              }
+            }),
+            minTimer,
+            module: "speaking",
+            id: title,
+            isDiagnostic: false,
+            variant: undefined,
+            difficulty,
+            instructorGender: "varied",
+            private: isPrivate,
+          };
+      
+          const result = await axios.post('/api/exam/speaking', exam);
+          playSound("sent");
+          toast.success(`Submitted Exam ID: ${result.data.id}`);
+      
+          Array.from(urlMap.values()).forEach(url => {
+            URL.revokeObjectURL(url);
+          });
+      
+        } catch (error: any) {
+          toast.error(
+            "Something went wrong while submitting, please try again later."
+          );
+        }
+      };
+
+    const preview = () => {
+        setExam({
+            exercises: sections
+                .filter((s) => {
+                    const exercise = s.state as SpeakingExercise | InteractiveSpeakingExercise;
+
+                    if (exercise.type === "speaking") {
+                        return exercise.video_url !== "";
+                    }
+
+                    if (exercise.type === "interactiveSpeaking") {
+                        return exercise.prompts?.every(prompt => prompt.video_url !== "");
+                    }
+
+                    return false;
+                })
+                .map((s) => {
+                    const exercise = s.state as SpeakingExercise | InteractiveSpeakingExercise;
+                    return {
+                        ...exercise,
+                        intro: s.settings.currentIntro,
+                        category: s.settings.category
+                    };
+                }),
+            minTimer,
+            module: "speaking",
+            id: title,
+            isDiagnostic: false,
+            variant: undefined,
+            difficulty,
+            private: isPrivate,
+        } as SpeakingExam);
+        setExerciseIndex(0);
+        setQuestionIndex(0);
+        setBgColor("bg-white");
+        openDetachedTab("popout?type=Exam&module=speaking", router)
+    }
+
     return (
         <SettingsEditor
             sectionLabel={`Speaking ${focusedSection}`}
             sectionId={focusedSection}
             module="speaking"
             introPresets={[defaultPresets[focusedSection - 1]]}
-            preview={() => { }}
-            canPreview={false}
-            canSubmit={false}
-            submitModule={()=> {}}
+            preview={preview}
+            canPreview={canPreviewOrSubmit}
+            canSubmit={canPreviewOrSubmit}
+            submitModule={submitSpeaking}
         >
             <Dropdown
                 title="Generate Script"
@@ -115,7 +386,7 @@ const SpeakingSettings: React.FC = () => {
                 setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isExerciseDropdownOpen: isOpen }, false)}
             >
 
-                <div className={clsx("gap-2 px-2 pb-4", focusedSection === 1 ? "flex flex-col w-full" : "flex flex-row items-center" )}>
+                <div className={clsx("gap-2 px-2 pb-4", focusedSection === 1 ? "flex flex-col w-full" : "flex flex-row items-center")}>
                     <div className="flex flex-col flex-grow gap-4 px-2">
                         <label className="font-normal text-base text-mti-gray-dim">{`${focusedSection === 1 ? "First Topic" : "Topic"}`} (Optional)</label>
                         <Input
@@ -155,19 +426,52 @@ const SpeakingSettings: React.FC = () => {
             <Dropdown
                 title="Generate Video"
                 module={currentModule}
-                open={localSettings.isGenerateAudio}
-                setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isGenerateAudio: isOpen }, false)}
+                open={localSettings.isGenerateAudioOpen}
+                disabled={!canGenerate}
+                setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isGenerateAudioOpen: isOpen }, false)}
             >
-                <div className={clsx("gap-2 px-2 pb-4 flex flex-row items-center" )}>
-                    
-                    <div className={clsx("flex h-16 mb-1", focusedSection === 1 ? "justify-center mt-4" : "self-end")}>
-                        <GenerateBtn
-                            module={currentModule}
-                            genType="media"
-                            sectionId={focusedSection}
-                            generateFnc={generateScript}
-                        />
+                <div className={clsx("flex items-center justify-between gap-4 px-2 pb-4")}>
+                    <div className="relative flex-1 max-w-xs">
+                        <select
+                            value={selectedAvatar ? `${selectedAvatar.name}-${selectedAvatar.gender}` : ""}
+                            onChange={(e) => {
+                                if (e.target.value === "") {
+                                    setSelectedAvatar(null);
+                                } else {
+                                    const [name, gender] = e.target.value.split("-");
+                                    const avatar = speakingAvatars.find(a => a.name === name && a.gender === gender);
+                                    if (avatar) setSelectedAvatar(avatar);
+                                }
+                            }}
+                            className="w-full appearance-none px-4 py-2 border border-gray-200 rounded-full text-base bg-white focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                        >
+                            <option value="">Select an avatar</option>
+                            {speakingAvatars.map((avatar) => (
+                                <option
+                                    key={`${avatar.name}-${avatar.gender}`}
+                                    value={`${avatar.name}-${avatar.gender}`}
+                                >
+                                    {avatar.name}
+                                </option>
+                            ))}
+                        </select>
+                        <div className="absolute right-2.5 top-2.5 pointer-events-none">
+                            {selectedAvatar && (
+                                selectedAvatar.gender === 'male' ? (
+                                    <FaMale className="w-5 h-5 text-blue-500" />
+                                ) : (
+                                    <FaFemale className="w-5 h-5 text-pink-500" />
+                                )
+                            )}
+                        </div>
                     </div>
+
+                    <GenerateBtn
+                        module={currentModule}
+                        genType="media"
+                        sectionId={focusedSection}
+                        generateFnc={generateVideoCallback}
+                    />
                 </div>
             </Dropdown>
         </SettingsEditor>