370 lines
17 KiB
TypeScript
370 lines
17 KiB
TypeScript
import useExamEditorStore from "@/stores/examEditor";
|
|
import { LevelSectionSettings, SpeakingSectionSettings } from "@/stores/examEditor/types";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { generate } from "../Shared/Generate";
|
|
import Dropdown from "../Shared/SettingsDropdown";
|
|
import Input from "@/components/Low/Input";
|
|
import GenerateBtn from "../Shared/GenerateBtn";
|
|
import clsx from "clsx";
|
|
import { FaFemale, FaMale } from "react-icons/fa";
|
|
import { Difficulty, InteractiveSpeakingExercise, LevelPart, SpeakingExercise } from "@/interfaces/exam";
|
|
import { toast } from "react-toastify";
|
|
import { generateVideos } from "../Shared/generateVideos";
|
|
import { Module } from "@/interfaces";
|
|
import useCanGenerate from "./useCanGenerate";
|
|
import ReactSelect, { components } from "react-select";
|
|
import { capitalize } from "lodash";
|
|
import Option from "@/interfaces/option";
|
|
import { MdSignalCellularAlt } from "react-icons/md";
|
|
|
|
export interface Avatar {
|
|
name: string;
|
|
gender: string;
|
|
}
|
|
|
|
interface Props {
|
|
localSettings: SpeakingSectionSettings | LevelSectionSettings;
|
|
updateLocalAndScheduleGlobal: (updates: Partial<SpeakingSectionSettings | LevelSectionSettings>, schedule?: boolean) => void;
|
|
section: SpeakingExercise | InteractiveSpeakingExercise | LevelPart;
|
|
level?: boolean;
|
|
module?: Module;
|
|
id?: string;
|
|
sectionId?: number;
|
|
}
|
|
|
|
const SpeakingComponents: React.FC<Props> = ({ localSettings, updateLocalAndScheduleGlobal, section, level = false, module = "speaking", id, sectionId }) => {
|
|
|
|
const { currentModule, speakingAvatars, dispatch, modules } = useExamEditorStore();
|
|
const { focusedSection, difficulty, sections } = useExamEditorStore((store) => store.modules[level ? "level" : currentModule])
|
|
const state = sections.find((s) => s.sectionId === sectionId);
|
|
|
|
const [selectedAvatar, setSelectedAvatar] = useState<Avatar | null>(null);
|
|
|
|
const randomDiff = difficulty.length === 1
|
|
? capitalize(difficulty[0])
|
|
: `Random (${difficulty.map(dif => capitalize(dif)).join(", ")})` as Difficulty;
|
|
|
|
const DIFFICULTIES = difficulty.length === 1
|
|
? ["A1", "A2", "B1", "B2", "C1", "C2"]
|
|
: ["A1", "A2", "B1", "B2", "C1", "C2", randomDiff];
|
|
|
|
const difficultyOptions: Option[] = DIFFICULTIES.map(level => ({
|
|
label: level,
|
|
value: level
|
|
}));
|
|
const [specificDiff, setSpecificDiff] = useState(randomDiff);
|
|
|
|
const generateScript = useCallback((scriptSectionId: number) => {
|
|
const queryParams: {
|
|
difficulty: string[];
|
|
first_topic?: string;
|
|
second_topic?: string;
|
|
topic?: string;
|
|
} = { difficulty };
|
|
|
|
if (scriptSectionId === 1) {
|
|
if (localSettings.speakingTopic) {
|
|
queryParams['first_topic'] = localSettings.speakingTopic;
|
|
}
|
|
if (localSettings.speakingSecondTopic) {
|
|
queryParams['second_topic'] = localSettings.speakingSecondTopic;
|
|
}
|
|
} else {
|
|
if (localSettings.speakingTopic) {
|
|
queryParams['topic'] = localSettings.speakingTopic;
|
|
}
|
|
}
|
|
generate(
|
|
level ? section.sectionId! : focusedSection,
|
|
"speaking",
|
|
`${id ? `${id}-` : ''}speakingScript`,
|
|
{
|
|
method: 'GET',
|
|
queryParams
|
|
},
|
|
(data: any) => {
|
|
switch (level ? section.sectionId! : focusedSection) {
|
|
case 1:
|
|
return [{
|
|
prompts: data.questions,
|
|
first_topic: data.first_topic,
|
|
second_topic: data.second_topic,
|
|
difficulty: specificDiff.length == 2 ? specificDiff : difficulty,
|
|
}];
|
|
case 2:
|
|
return [{
|
|
topic: data.topic,
|
|
question: data.question,
|
|
prompts: data.prompts,
|
|
suffix: data.suffix,
|
|
difficulty: specificDiff.length == 2 ? specificDiff : difficulty,
|
|
}];
|
|
case 3:
|
|
return [{
|
|
title: data.topic,
|
|
prompts: data.questions,
|
|
difficulty: specificDiff.length == 2 ? specificDiff : difficulty,
|
|
}];
|
|
default:
|
|
return [data];
|
|
}
|
|
},
|
|
sectionId,
|
|
level
|
|
);
|
|
|
|
}, [difficulty, level, section.sectionId, focusedSection, id, sectionId, localSettings.speakingTopic, localSettings.speakingSecondTopic, specificDiff]);
|
|
|
|
const onTopicChange = useCallback((speakingTopic: string) => {
|
|
updateLocalAndScheduleGlobal({ speakingTopic });
|
|
}, [updateLocalAndScheduleGlobal]);
|
|
|
|
const onSecondTopicChange = useCallback((speakingSecondTopic: string) => {
|
|
updateLocalAndScheduleGlobal({ speakingSecondTopic });
|
|
}, [updateLocalAndScheduleGlobal]);
|
|
|
|
const canGenerate = useCanGenerate({
|
|
section,
|
|
sections,
|
|
id,
|
|
focusedSection
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!canGenerate) {
|
|
updateLocalAndScheduleGlobal({ isGenerateVideoOpen: false }, false);
|
|
}
|
|
}, [canGenerate, updateLocalAndScheduleGlobal]);
|
|
|
|
const generateVideoCallback = useCallback((sectionId: number) => {
|
|
if (level) {
|
|
dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: "level", field: "levelGenerating", value: [...state!.levelGenerating, `${id ? `${id}-` : ''}video`] } })
|
|
} else {
|
|
dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId: focusedSection, module: "speaking", field: "generating", value: "video" } })
|
|
}
|
|
|
|
generateVideos(
|
|
section as InteractiveSpeakingExercise | SpeakingExercise,
|
|
level ? section.sectionId! : focusedSection,
|
|
selectedAvatar,
|
|
speakingAvatars
|
|
).then((results) => {
|
|
switch (level ? section.sectionId! : focusedSection) {
|
|
case 1:
|
|
case 3: {
|
|
const interactiveSection = section as InteractiveSpeakingExercise;
|
|
const updatedPrompts = interactiveSection.prompts.map((prompt, index) => ({
|
|
...prompt,
|
|
video_url: results[index].url || ''
|
|
}));
|
|
if (level) {
|
|
dispatch({
|
|
type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
|
|
sectionId, field: "levelGenResults", value: [...state!.levelGenResults,
|
|
{ generating: `${id ? `${id}-` : ''}video`, result: [{ prompts: updatedPrompts }] }], module: "level"
|
|
}
|
|
})
|
|
} else {
|
|
dispatch({
|
|
type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
|
|
sectionId: focusedSection, module: "speaking", field: "genResult", value:
|
|
{ generating: "video", result: [{ prompts: updatedPrompts }], module: module }
|
|
}
|
|
})
|
|
}
|
|
break;
|
|
}
|
|
case 2: {
|
|
if (results[0]?.url) {
|
|
if (level) {
|
|
dispatch({
|
|
type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
|
|
sectionId, field: "levelGenResults", value: [...state!.levelGenResults,
|
|
{ generating: `${id ? `${id}-` : ''}video`, result: [{ video_url: results[0].url }] }], module: "level"
|
|
}
|
|
})
|
|
} else {
|
|
dispatch({
|
|
type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
|
|
sectionId: focusedSection, module, field: "genResult", value:
|
|
{ generating: 'video', result: [{ video_url: results[0].url }], module: "speaking" }
|
|
}
|
|
})
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}).catch((error) => {
|
|
toast.error("Failed to generate the video, try again later!")
|
|
});
|
|
|
|
}, [level, section, focusedSection, selectedAvatar, speakingAvatars, dispatch, module, state, id]);
|
|
|
|
const secId = level ? section.sectionId! : focusedSection;
|
|
|
|
return (
|
|
<>
|
|
<Dropdown
|
|
title="Generate Script"
|
|
module="speaking"
|
|
open={localSettings.isSpeakingTopicOpen}
|
|
setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isSpeakingTopicOpen: isOpen }, false)}
|
|
contentWrapperClassName={level ? `border border-ielts-speaking` : ''}
|
|
>
|
|
|
|
<div className="gap-4 px-2 pb-4 flex flex-col w-full">
|
|
<div className="flex flex-col flex-grow gap-4 px-2">
|
|
<label className="font-normal text-base text-mti-gray-dim">{`${secId === 1 ? "First Topic" : "Topic"}`} (Optional)</label>
|
|
<Input
|
|
key={`section-${secId}`}
|
|
type="text"
|
|
placeholder="Topic"
|
|
name="category"
|
|
onChange={onTopicChange}
|
|
roundness="xl"
|
|
value={localSettings.speakingTopic}
|
|
thin
|
|
/>
|
|
</div>
|
|
{secId === 1 &&
|
|
<div className="flex flex-col flex-grow gap-4 px-2">
|
|
<label className="font-normal text-base text-mti-gray-dim">Second Topic (Optional)</label>
|
|
<Input
|
|
key={`section-${secId}`}
|
|
type="text"
|
|
placeholder="Topic"
|
|
name="category"
|
|
onChange={onSecondTopicChange}
|
|
roundness="xl"
|
|
value={localSettings.speakingSecondTopic}
|
|
thin
|
|
/>
|
|
</div>
|
|
}
|
|
<div className="flex flex-col gap-2 px-2">
|
|
<label className="block font-normal text-base text-mti-gray-dim mb-2">Difficulty (Optional)</label>
|
|
<ReactSelect
|
|
options={difficultyOptions}
|
|
value={difficultyOptions.find(opt => opt.value === specificDiff)}
|
|
onChange={(value) => setSpecificDiff(value!.value as Difficulty)}
|
|
menuPortalTarget={document?.body}
|
|
components={{
|
|
IndicatorSeparator: null,
|
|
ValueContainer: ({ children, ...props }) => (
|
|
<components.ValueContainer {...props}>
|
|
<div className="flex flex-row gap-2 items-center pl-4">
|
|
<MdSignalCellularAlt size={14} className="text-gray-600" />
|
|
{children}
|
|
</div>
|
|
</components.ValueContainer>
|
|
)
|
|
}}
|
|
styles={{
|
|
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
|
|
control: (styles) => ({
|
|
...styles,
|
|
minHeight: '50px',
|
|
border: '1px solid #e5e7eb',
|
|
borderRadius: '0.5rem',
|
|
boxShadow: 'none',
|
|
backgroundColor: 'white',
|
|
cursor: 'pointer',
|
|
'&:hover': {
|
|
border: '1px solid #e5e7eb',
|
|
}
|
|
}),
|
|
valueContainer: (styles) => ({
|
|
...styles,
|
|
padding: '0 8px',
|
|
display: 'flex',
|
|
alignItems: 'center'
|
|
}),
|
|
input: (styles) => ({
|
|
...styles,
|
|
margin: '0',
|
|
padding: '0'
|
|
}),
|
|
dropdownIndicator: (styles) => ({
|
|
...styles,
|
|
padding: '8px'
|
|
}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}}
|
|
className="text-sm"
|
|
/>
|
|
</div>
|
|
<div className="flex h-16 mb-1 justify-center mt-4">
|
|
<GenerateBtn
|
|
module="speaking"
|
|
genType={`${id ? `${id}-` : ''}speakingScript`}
|
|
sectionId={focusedSection}
|
|
generateFnc={generateScript}
|
|
level={level}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Dropdown>
|
|
<Dropdown
|
|
title="Generate Video"
|
|
module="speaking"
|
|
open={localSettings.isGenerateVideoOpen}
|
|
disabled={!canGenerate}
|
|
setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isGenerateVideoOpen: isOpen }, false)}
|
|
contentWrapperClassName={level ? `border border-ielts-speaking` : ''}
|
|
>
|
|
<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 (Optional)</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="speaking"
|
|
genType={`${id ? `${id}-` : ''}video`}
|
|
sectionId={focusedSection}
|
|
generateFnc={generateVideoCallback}
|
|
level={level}
|
|
/>
|
|
</div>
|
|
</Dropdown>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SpeakingComponents;
|