@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Dialogs/GenerateRoleplay/GenerateRoleplay.js

@@ -1,735 +0,0 @@
-import { useState, useEffect } from "react";
-import { Link } from "react-router";
-import { jsonrepair } from "jsonrepair";
-import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined";
-import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
-import InfoIcon from "@mui/icons-material/Info";
-import { Grid, Button, Box, TextField, MenuItem, IconButton, FormControlLabel, Switch, Typography, Tooltip, Slider, InputAdornment, Checkbox, ListItemText, OutlinedInput, Select, InputLabel, FormControl } from "@mui/material";
-import LoadingButton from "@mui/lab/LoadingButton";
-import Alert from "@mui/material/Alert";
-import LinearProgress from "@mui/material/LinearProgress";
-
-// components
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import RoleplayPreview from "../RoleplayPreview/RoleplayPreview";
-import InputHelper from "../../Forms/InputHelper/InputHelper";
-import { randomId } from "../../utils";
-import Nuala from "../../Misc/NualaCreating/NualaCreating";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function GenerateRoleplayDialog({
-  t = text => text,
-  isGenerateRoleplayDialogOpen,
-  setIsGenerateRoleplayDialogOpen,
-  handleTranslate,
-  handleSpeak,
-  handleSelectRoleplay,
-  hideRoleplayLengthOptions = true,
-  makeChatGptApiRequest,
-  learnLang,
-  forLang,
-  getAllVoices,
-  i18nLanguage,
-  initialValues = {
-    roleplayTopic: "",
-    roleplayDifficulty: "A1",
-    roleplayLengthNumber: 8,
-    questionsAmount: 0,
-    roleplayLength: "",
-    actor1: {
-      name: "Carla",
-      voice: "Carla",
-      picture: "https://randomuser.me/api/portraits/women/0.jpg"
-    },
-    actor2: {
-      name: "Giorgio",
-      voice: "Giorgio",
-      picture: "https://randomuser.me/api/portraits/men/71.jpg"
-    }
-  },
-  autoSelect,
-  currentUser,
-  pdfDetails,
-  makeCandooAIQuery,
-  pdfVectorStoreCreationStatus,
-  siteLanguage,
-  phrases,
-  phraseLists,
-  topicId,
-  initialTopicGoal
-}) {
-  const [isPreviewDialogOpen, setIsPreviewDialogOpen] = useState(false);
-  const [usePdfContext, setUsePdfContext] = useState(false);
-  const [usePhrasesContext, setUsePhrasesContext] = useState(phrases && phrases.length > 0);
-  const [selectedPhraseListIds, setSelectedPhraseListIds] = useState(["all"]);
-  const [topicGoal, setTopicGoal] = useState("");
-  const [isRoleplayGenerating, setIsRoleplayGenerating] = useState(false);
-  const [generatedRoleplay, setGeneratedRoleplay] = useState([]);
-  const [previewMessages, setPreviewMessages] = useState([]);
-  const [values, setValues] = useState(initialValues);
-  const [errorMessage, setErrorMessage] = useState(null);
-  const [generateQuestions, setGenerateQuestions] = useState(false);
-  const [questionLang, setQuestionLang] = useState(learnLang);
-  const finalForLang = forLang ? forLang.charAt(0).toUpperCase() + forLang.slice(1) : siteLanguage;
-  useEffect(() => {
-    if (initialTopicGoal && initialTopicGoal.trim() !== "") {
-      setTopicGoal(initialTopicGoal);
-    }
-  }, [initialTopicGoal]);
-  const roleplayLengthOptionsArray = ["short", "medium", "long"];
-  const roleplayLengthOptions = roleplayLengthOptionsArray.map((d, idx) => /*#__PURE__*/_jsx(MenuItem, {
-    value: d,
-    children: t(d)
-  }, idx));
-  const handleClosePreviewDialog = () => {
-    setIsPreviewDialogOpen(false);
-  };
-  const handleChange = e => {
-    if (errorMessage) {
-      setErrorMessage("");
-    }
-    const {
-      name,
-      value
-    } = e.target;
-    setValues(prevValues => ({
-      ...prevValues,
-      [name]: value
-    }));
-  };
-  const handleCloseDialog = () => {
-    setIsGenerateRoleplayDialogOpen(false);
-  };
-  const getActorName = isA1 => {
-    return isA1 ? generatedRoleplay.actor1 && generatedRoleplay.actor1.name ? generatedRoleplay.actor1.name : t("actor", {
-      number: "1"
-    }) : generatedRoleplay.actor2 && generatedRoleplay.actor2.name ? generatedRoleplay.actor2.name : t("actor", {
-      number: "2"
-    });
-  };
-  useEffect(() => {
-    if (generatedRoleplay && generatedRoleplay.script) {
-      const tempMessages = generatedRoleplay.script.filter(l => !l?.question).map(line => {
-        const isActor1 = line.actor === 1;
-        return {
-          ...line,
-          text: line.text,
-          isMyMessage: !isActor1,
-          name: getActorName(isActor1),
-          userImage: isActor1 ? generatedRoleplay.actor1 && generatedRoleplay.actor1.picture ? generatedRoleplay.actor1.picture : null : generatedRoleplay.actor2 && generatedRoleplay.actor2.picture ? generatedRoleplay.actor2.picture : null,
-          voice: isActor1 ? generatedRoleplay.actor1 && generatedRoleplay.actor1.voice ? generatedRoleplay.actor1.voice : null : generatedRoleplay.actor2 && generatedRoleplay.actor2.voice ? generatedRoleplay.actor2.voice : null
-        };
-      });
-      setPreviewMessages(tempMessages);
-    }
-  }, [generatedRoleplay, generatedRoleplay.script, isGenerateRoleplayDialogOpen]);
-  const removeExtraTextFromChatGptResponse = response => {
-    let stack = [];
-    let startIndex = -1;
-    let endIndex = -1;
-    for (let i = 0; i < response.length; i++) {
-      if (response[i] === "[") {
-        if (stack.length === 0) {
-          startIndex = i;
-        }
-        stack.push("[");
-      } else if (response[i] === "]") {
-        stack.pop();
-        if (stack.length === 0) {
-          endIndex = i;
-          break;
-        }
-      }
-    }
-    if (startIndex !== -1 && endIndex !== -1) {
-      return response.substring(startIndex, endIndex + 1);
-    }
-    return "";
-  };
-  function fixMissingComma(jsonString) {
-    const fixedJsonString = jsonString.replace(/}\s*{/g, "},{");
-    try {
-      const jsonObject = JSON.parse(fixedJsonString);
-      return jsonObject;
-    } catch (error) {
-      console.error("Invalid JSON after attempting to fix:", error);
-      return null;
-    }
-  }
-  const validateScript = script => {
-    if (Array.isArray(script) && script.length > 0) {
-      for (let index = 0; index < script.length; index++) {
-        const scriptLine = script[index];
-        if (!((scriptLine.actor === 1 || scriptLine.actor === 2) && script[0].text) && !(scriptLine.question && Array.isArray(scriptLine.answers) && scriptLine.answers.some(answer => answer.correct === true))) {
-          return false;
-        }
-      }
-      return true;
-    } else {
-      return false;
-    }
-  };
-  const handleGenerateRoleplayScript = async () => {
-    try {
-      setIsRoleplayGenerating(true);
-      setPreviewMessages([]);
-      setGeneratedRoleplay([]);
-      setErrorMessage("");
-      let response;
-      const roleplayDifficulty = values.roleplayDifficulty;
-      const basePrompt = usePdfContext ? `Create an informative conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}. The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(roleplayDifficulty)}.'` : `Create a conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2?.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}. The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(roleplayDifficulty)}.'`;
-      const topicGoalPrompt = topicGoal ? ` The conversation should be guided by the following goal: '${topicGoal}'.` : "";
-      const promptWithPhrases = usePhrasesContext ? ` Additionally, use the following phrases as part of the conversation, where appropriate to the topic '${values.roleplayTopic}': ${effectivePhrases.map(phrase => phrase.phrase).join(", ")}. Only use these phrases if they fit naturally into the conversation.` : "";
-      const finalPrompt = `${basePrompt}${topicGoalPrompt}${promptWithPhrases}`;
-
-      // Add explicit JSON formatting instructions with roleplay length
-      const promptWithoutQuestions = usePdfContext ? `${finalPrompt} The conversation should be returned as a single JSON array. The array must contain exactly ${values.roleplayLengthNumber} exchanges (lines). Each piece of dialogue should be represented as an object with the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. Please ensure the entire output is formatted as a single, well-formed JSON array.` : `${finalPrompt} The conversation should be returned as a single JSON array. The array must contain exactly ${values.roleplayLengthNumber} exchanges (lines). Each piece of dialogue should be represented as an object with the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. Please ensure the entire output is formatted as a single, well-formed JSON array.`;
-      const promptWithQuestions = usePdfContext ? `${finalPrompt} The conversation should be returned as a single JSON array. The array must contain exactly ${values.roleplayLengthNumber} exchanges (lines), followed by ${values?.questionsAmount} comprehension questions related to the conversation, the question should be generated in ${questionLang}. Each piece of dialogue should be represented as an object with the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. Each comprehension question should also be represented as an object within the same array, with the keys 'question' and 'answers'. The 'answers' key should be an array of 3 objects, each containing 'text', 'correct' (true or false), and 'type' ('correct' or 'incorrect'), the answers should be generated in ${questionLang}. Please ensure the entire output is formatted as a single, well-formed JSON array.` : `${finalPrompt} The conversation should be returned as a single JSON array. The array must contain exactly ${values.roleplayLengthNumber} exchanges (lines), followed by ${values?.questionsAmount} comprehension questions related to the conversation, the question should be generated in ${questionLang}. Each piece of dialogue should be represented as an object with the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. Each comprehension question should also be represented as an object within the same array, with the keys 'question' and 'answers'. The 'answers' key should be an array of 3 objects, each containing 'text', 'correct' (true or false), and 'type' ('correct' or 'incorrect'), the answers should be generated in ${questionLang}. Please ensure the entire output is formatted as a single, well-formed JSON array.`;
-      const activePrompt = generateQuestions ? promptWithQuestions : promptWithoutQuestions;
-      if (usePdfContext) {
-        const getAiQueryResponse = await makeCandooAIQuery({
-          modelName: "gpt-4",
-          customString: activePrompt,
-          createdBy: currentUser.Username,
-          email: currentUser.UserAttributes.email,
-          source: "nualang",
-          contentType: "roleplay",
-          resourceUrls: [{
-            fileName: pdfDetails.fileName,
-            hashKey: pdfDetails.hashKey
-          }]
-        });
-        const responseObject = getAiQueryResponse.answer;
-        const responseKey = Object.keys(responseObject)[0];
-        const {
-          text
-        } = responseObject[responseKey][0];
-        response = jsonrepair(text);
-      } else {
-        let chatGptResponse = await makeChatGptApiRequest({
-          model: "gpt-4o",
-          promptKey: "generateRoleplay",
-          promptVariables: {
-            learnLang: learnLang,
-            i18nLanguage: i18nLanguage,
-            roleplayDifficulty: t(values.roleplayDifficulty),
-            usePdfContext: usePdfContext,
-            topicGoal: topicGoal,
-            usePhrasesContext: usePhrasesContext,
-            phrases: effectivePhrases,
-            questionLang: questionLang,
-            generateQuestions: generateQuestions,
-            actor1: values.actor1,
-            actor2: values.actor2,
-            roleplayTopic: values.roleplayTopic,
-            roleplayLengthNumber: values.roleplayLengthNumber,
-            questionsAmount: values.questionsAmount
-          }
-        });
-        let isComplete = false;
-        let fullResult = [];
-        while (!isComplete) {
-          let parsed;
-          try {
-            parsed = typeof chatGptResponse === "string" ? JSON.parse(chatGptResponse) : chatGptResponse;
-          } catch (e) {
-            console.warn("Failed to parse response – assuming truncation");
-            parsed = {
-              result: []
-            }; // fallback
-          }
-          if (Array.isArray(parsed.result)) {
-            fullResult = [...fullResult, ...parsed.result];
-          }
-          // Check last item for signs of truncation
-          const lastItem = parsed.result?.[parsed.result.length - 1];
-          const endsSuspiciously = lastItem?.text?.trim?.().endsWith("...") || lastItem?.text?.trim?.().endsWith(",");
-          if (endsSuspiciously) {
-            const continuationPrompt = `Continue the following in the same JSON format:\n\n${JSON.stringify(parsed.result, null, 2)}`;
-            const continuationResponse = await makeChatGptApiRequest({
-              model: "gpt-4o",
-              prompt: continuationPrompt
-            });
-            chatGptResponse = continuationResponse;
-          } else {
-            isComplete = true;
-          }
-        }
-        response = fullResult;
-      }
-      if (validateScript(response)) {
-        const generatedRoleplay = {
-          roleplayId: randomId(),
-          roleplayName: values.roleplayTopic,
-          description: t("chatgpt_roleplay_description", {
-            topic: values.roleplayTopic
-          }),
-          visibility: "private",
-          learnLang: learnLang,
-          translationEnabled: "enable",
-          repliesEnabled: "enable",
-          script: response,
-          actor1: {
-            name: getAllVoices()[0].name,
-            voice: getAllVoices()[0].name,
-            picture: getAllVoices()[0].userImage
-          },
-          actor2: {
-            name: getAllVoices()[1].name,
-            voice: getAllVoices()[1].name,
-            picture: getAllVoices()[1].userImage
-          }
-        };
-        if (autoSelect) {
-          handleSelectRoleplay(generatedRoleplay);
-          handleCloseDialog();
-          setIsRoleplayGenerating(false);
-        } else {
-          setGeneratedRoleplay(generatedRoleplay);
-          setIsRoleplayGenerating(false);
-        }
-      } else {
-        throw new Error("Roleplay not formatted correctly");
-      }
-    } catch (error) {
-      setIsRoleplayGenerating(false);
-      console.error(error);
-      setErrorMessage("There was a problem generating the roleplay, please try again.");
-      setGeneratedRoleplay(`Error: ${error}`);
-    }
-  };
-  const handleSubmit = () => {
-    if (autoSelect) {
-      handleGenerateRoleplayScript(autoSelect);
-    } else {
-      handleSelectRoleplay(generatedRoleplay);
-      handleCloseDialog();
-    }
-  };
-  let isSubmitDisabled;
-  if (autoSelect) {
-    isSubmitDisabled = !values.roleplayTopic || isRoleplayGenerating;
-  } else {
-    isSubmitDisabled = !(generatedRoleplay.length !== 0 && !isRoleplayGenerating && previewMessages.length > 1);
-  }
-  const isPhrasesSwitchDisabled = !topicId || !phrases || phrases.length === 0 || !phraseLists || phraseLists.length === 0 || !phrases.some(p => phraseLists.some(pl => pl.id === p.phraseListId));
-  const effectivePhrases = !phraseLists || phraseLists.length === 0 || selectedPhraseListIds.includes("all") ? phrases : phrases.filter(p => selectedPhraseListIds.includes(p.phraseListId));
-  const handlePhraseListChange = event => {
-    const newValue = event.target.value;
-    if (newValue[newValue.length - 1] === "all") {
-      setSelectedPhraseListIds(["all"]);
-    } else if (newValue.filter(v => v !== "all").length === 0) {
-      setSelectedPhraseListIds(["all"]);
-    } else {
-      setSelectedPhraseListIds(newValue.filter(v => v !== "all"));
-    }
-  };
-  useEffect(() => {
-    if (!generateQuestions) {
-      setValues(prevValues => ({
-        ...prevValues,
-        questionsAmount: 0
-      }));
-    } else {
-      setValues(prevValues => ({
-        ...prevValues,
-        questionsAmount: prevValues.questionsAmount || Math.floor(prevValues.roleplayLengthNumber / 2)
-      }));
-    }
-  }, [generateQuestions]);
-  useEffect(() => {
-    if (isPhrasesSwitchDisabled) {
-      setUsePhrasesContext(false);
-    }
-  }, [isPhrasesSwitchDisabled]);
-  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
-    open: isGenerateRoleplayDialogOpen,
-    handleClose: handleCloseDialog,
-    handleSubmit: handleSubmit,
-    submitText: autoSelect ? t("generate_roleplay") : t("select_roleplay"),
-    dialogTitle: isRoleplayGenerating ? t("generating_roleplay") : t("generate_roleplay"),
-    isSubmitDisabled: isSubmitDisabled,
-    startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
-    isGenerating: true,
-    children: [/*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      sx: {
-        width: "100%"
-      },
-      children: [/*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        sx: {
-          textAlign: "center",
-          mx: 2,
-          ...(!isRoleplayGenerating && {
-            display: "none"
-          })
-        },
-        children: /*#__PURE__*/_jsx(Nuala, {})
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        sx: {
-          mt: 2,
-          ...(!isRoleplayGenerating && {
-            display: "none"
-          })
-        },
-        children: /*#__PURE__*/_jsx(LinearProgress, {})
-      }), !isRoleplayGenerating && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Typography, {
-          sx: {
-            fontSize: 14,
-            opacity: 0.8,
-            marginBottom: 1
-          },
-          children: t("required_field")
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsxs(Alert, {
-            severity: "info",
-            children: [t("experimental_feature_desc"), " -", " ", /*#__PURE__*/_jsxs(Link, {
-              to: "/contact",
-              children: [t("contact_form"), "."]
-            })]
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(InputHelper, {
-            t: t,
-            id: "roleplayTopic",
-            name: "roleplayTopic",
-            "data-cy": "roleplayTopic",
-            label: usePdfContext ? t("choose_topic_from_pdf_for_roleplay") : t("choose_topic_for_roleplay"),
-            value: values.roleplayTopic,
-            type: "text",
-            margin: "normal",
-            variant: "outlined",
-            fullWidth: true,
-            required: true,
-            onChange: handleChange,
-            multiline: true,
-            rows: 3
-            // maxLength={300}
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(TextField, {
-            id: "topicGoal",
-            name: "topicGoal",
-            label: t("topic_goal"),
-            placeholder: t("topic_goal_placeholder"),
-            value: topicGoal,
-            type: "text",
-            margin: "normal",
-            variant: "outlined",
-            multiline: true,
-            fullWidth: true,
-            sx: {
-              marginBottom: 5
-            },
-            onChange: e => setTopicGoal(e.target.value),
-            slotProps: {
-              input: {
-                endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
-                  position: "end",
-                  children: /*#__PURE__*/_jsx(Tooltip, {
-                    title: t("topic_goal_info_text"),
-                    placement: "top",
-                    children: /*#__PURE__*/_jsx(InfoIcon, {
-                      fontSize: "small",
-                      style: {
-                        color: "lightgrey"
-                      }
-                    })
-                  })
-                })
-              }
-            }
-          })
-        })]
-      }), !hideRoleplayLengthOptions && !isRoleplayGenerating && /*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        children: /*#__PURE__*/_jsx(TextField, {
-          select: true,
-          id: "roleplayLength",
-          name: "roleplayLength",
-          "data-cy": "roleplayLength",
-          label: t("choose_length_of_roleplay"),
-          value: values.roleplayLength,
-          onChange: handleChange,
-          margin: "normal",
-          variant: "outlined",
-          fullWidth: true,
-          children: roleplayLengthOptions
-        })
-      }), !isRoleplayGenerating && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs(Grid, {
-          size: 12,
-          children: [/*#__PURE__*/_jsx(Typography, {
-            id: "input-slider",
-            gutterBottom: true,
-            children: t("number_of_interactions") + ": " + values.roleplayLengthNumber
-          }), /*#__PURE__*/_jsx(Slider, {
-            "aria-label": "Number of Interactions",
-            defaultValue: 8,
-            valueLabelDisplay: "auto",
-            value: values.roleplayLengthNumber,
-            onChange: (e, newValue) => {
-              const maxQuestions = Math.floor(newValue / 2);
-              setValues(prevValues => ({
-                ...prevValues,
-                roleplayLengthNumber: newValue,
-                questionsAmount: Math.min(prevValues.questionsAmount, maxQuestions)
-              }));
-            },
-            step: 2,
-            marks: true,
-            min: 4,
-            max: 12
-          })]
-        }), /*#__PURE__*/_jsxs(Grid, {
-          size: 12,
-          sx: {
-            marginBottom: 1
-          },
-          children: [/*#__PURE__*/_jsx(Typography, {
-            children: /*#__PURE__*/_jsxs(Box, {
-              sx: {
-                pt: 2,
-                display: "flex",
-                alignItems: "center"
-              },
-              children: [t("generate_questions"), /*#__PURE__*/_jsx(Tooltip, {
-                title: t("enable_gen_questions"),
-                placement: "top",
-                children: /*#__PURE__*/_jsx(InfoIcon, {
-                  fontSize: "small",
-                  style: {
-                    marginLeft: 4,
-                    color: "lightgrey"
-                  }
-                })
-              })]
-            })
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            label: "",
-            control: /*#__PURE__*/_jsx(Switch, {
-              checked: generateQuestions,
-              onChange: e => setGenerateQuestions(e.target.checked),
-              color: "primary",
-              slotProps: {
-                input: {
-                  "aria-label": "Generate Questions"
-                }
-              }
-            })
-          })]
-        }), generateQuestions && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [finalForLang !== learnLang.charAt(0).toUpperCase() + learnLang.slice(1) && /*#__PURE__*/_jsx(Grid, {
-            size: 12,
-            sx: {
-              mb: 2
-            },
-            children: /*#__PURE__*/_jsxs(TextField, {
-              select: true,
-              fullWidth: true,
-              label: t("question_language"),
-              value: questionLang,
-              onChange: e => setQuestionLang(e.target.value),
-              variant: "outlined",
-              children: [/*#__PURE__*/_jsx(MenuItem, {
-                value: learnLang,
-                children: t(learnLang)
-              }), /*#__PURE__*/_jsx(MenuItem, {
-                value: finalForLang,
-                children: t(finalForLang)
-              })]
-            })
-          }), /*#__PURE__*/_jsxs(Grid, {
-            size: 12,
-            children: [/*#__PURE__*/_jsx(Typography, {
-              id: "input-slider",
-              gutterBottom: true,
-              children: t("number_of_questions") + ": " + values.questionsAmount
-            }), /*#__PURE__*/_jsx(Slider, {
-              "aria-label": "Number of Questions",
-              defaultValue: Math.floor(values?.roleplayLengthNumber / 2),
-              valueLabelDisplay: "auto",
-              value: values?.questionsAmount,
-              onChange: (e, newValue) => setValues({
-                ...values,
-                questionsAmount: newValue
-              }),
-              step: 1,
-              marks: true,
-              min: 1,
-              max: Math.floor(values?.roleplayLengthNumber / 2)
-            })]
-          })]
-        }), topicId && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsxs(Grid, {
-            size: 12,
-            sx: {
-              marginBottom: 1
-            },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              children: /*#__PURE__*/_jsxs(Box, {
-                sx: {
-                  pt: 2,
-                  display: "flex",
-                  alignItems: "center"
-                },
-                children: [t("use_topic_phrases"), /*#__PURE__*/_jsx(Tooltip, {
-                  title: isPhrasesSwitchDisabled ? t("add_phrase_context") : t("enable_phrase_context"),
-                  placement: "top",
-                  children: /*#__PURE__*/_jsx(InfoIcon, {
-                    fontSize: "small",
-                    style: {
-                      marginLeft: 4,
-                      color: "lightgrey"
-                    }
-                  })
-                })]
-              })
-            }), /*#__PURE__*/_jsx(FormControlLabel, {
-              label: "",
-              control: /*#__PURE__*/_jsx(Switch, {
-                checked: usePhrasesContext,
-                onChange: e => setUsePhrasesContext(e.target.checked),
-                color: "primary",
-                disabled: isPhrasesSwitchDisabled,
-                slotProps: {
-                  input: {
-                    "aria-label": "Use context from topic phrases"
-                  }
-                }
-              })
-            })]
-          }), usePhrasesContext && phraseLists && phraseLists.length > 0 && /*#__PURE__*/_jsx(Grid, {
-            size: 12,
-            sx: {
-              mb: 2,
-              mt: 2
-            },
-            children: /*#__PURE__*/_jsxs(FormControl, {
-              fullWidth: true,
-              size: "small",
-              children: [/*#__PURE__*/_jsx(InputLabel, {
-                children: t("phrase_lists")
-              }), /*#__PURE__*/_jsxs(Select, {
-                multiple: true,
-                value: selectedPhraseListIds,
-                onChange: handlePhraseListChange,
-                input: /*#__PURE__*/_jsx(OutlinedInput, {
-                  label: t("phrase_lists")
-                }),
-                renderValue: selected => selected.includes("all") ? t("all") : phraseLists.filter(pl => selected.includes(pl.id)).map(pl => pl.name).join(", "),
-                children: [/*#__PURE__*/_jsxs(MenuItem, {
-                  value: "all",
-                  children: [/*#__PURE__*/_jsx(Checkbox, {
-                    checked: selectedPhraseListIds.includes("all")
-                  }), /*#__PURE__*/_jsx(ListItemText, {
-                    primary: t("all")
-                  })]
-                }), phraseLists.map(pl => /*#__PURE__*/_jsxs(MenuItem, {
-                  value: pl.id,
-                  children: [/*#__PURE__*/_jsx(Checkbox, {
-                    checked: selectedPhraseListIds.includes(pl.id)
-                  }), /*#__PURE__*/_jsx(ListItemText, {
-                    primary: pl.name
-                  })]
-                }, pl.id))]
-              })]
-            })
-          })]
-        })]
-      }), import.meta.env.REACT_APP_STAGE === "dev" && !isRoleplayGenerating && pdfDetails && pdfVectorStoreCreationStatus === "CREATION_COMPLETE" && /*#__PURE__*/_jsxs(Grid, {
-        size: 12,
-        children: [/*#__PURE__*/_jsx(Typography, {
-          children: /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              pt: 2
-            },
-            children: [t("use_context_from_course_pdf"), /*#__PURE__*/_jsx(Tooltip, {
-              title: t("use_context_from_course_pdf_info"),
-              placement: "top-end",
-              sx: {
-                fontWeight: "bold"
-              },
-              children: /*#__PURE__*/_jsx(IconButton, {
-                children: /*#__PURE__*/_jsx(InfoIcon, {
-                  fontSize: "small"
-                })
-              })
-            })]
-          })
-        }), /*#__PURE__*/_jsx(FormControlLabel, {
-          label: "",
-          control: /*#__PURE__*/_jsx(_Fragment, {
-            children: /*#__PURE__*/_jsx(Switch, {
-              checked: usePdfContext,
-              onChange: e => {
-                setUsePdfContext(e.target.checked);
-              },
-              sx: {
-                marginLeft: 0.5
-              },
-              slotProps: {
-                input: {
-                  "aria-label": "controlled"
-                }
-              }
-            })
-          })
-        })]
-      }), !isRoleplayGenerating && !autoSelect && /*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        sx: {
-          mt: 2
-        },
-        children: /*#__PURE__*/_jsx(LoadingButton, {
-          variant: "outlined",
-          onClick: handleGenerateRoleplayScript,
-          disabled: !values.roleplayTopic || isRoleplayGenerating,
-          loading: isRoleplayGenerating,
-          loadingPosition: "start",
-          startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
-          children: t("generate_roleplay")
-        })
-      }), !autoSelect && generatedRoleplay.length !== 0 && !isRoleplayGenerating && previewMessages.length > 1 && /*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        sx: {
-          mt: 2
-        },
-        children: /*#__PURE__*/_jsx(Button, {
-          onClick: () => setIsPreviewDialogOpen(true),
-          color: "primary",
-          variant: "contained",
-          startIcon: /*#__PURE__*/_jsx(RemoveRedEyeOutlinedIcon, {}),
-          disabled: isRoleplayGenerating,
-          children: t("show_preview")
-        })
-      }), errorMessage && /*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        sx: {
-          mt: 2
-        },
-        children: /*#__PURE__*/_jsx(Alert, {
-          severity: "warning",
-          children: errorMessage
-        })
-      })]
-    }), /*#__PURE__*/_jsx(RoleplayPreview, {
-      open: isPreviewDialogOpen,
-      handleClose: handleClosePreviewDialog,
-      t: t,
-      translationEnabled: generatedRoleplay.translationEnabled,
-      currentMessages: previewMessages,
-      handleTranslate: handleTranslate,
-      handleSpeak: handleSpeak,
-      learnLang: generatedRoleplay.learnLang,
-      forLang: generatedRoleplay.forLang,
-      roleplay: generatedRoleplay
-    })]
-  });
-}
-export default GenerateRoleplayDialog;