@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Editors/Roleplay/Roleplay.js

@@ -1,955 +0,0 @@
-import { useState, useEffect } from "react";
-import { Joyride, STATUS } from "react-joyride";
-import { useTheme } from "@mui/material/styles";
-import { makeStyles } from "tss-react/mui";
-import { Slide, Button, IconButton, Dialog, AppBar, Toolbar, Tabs, Tab, Box, Typography, Avatar, Tooltip, useMediaQuery, SpeedDial, SpeedDialAction, SpeedDialIcon } from "@mui/material";
-import LightbulbIcon from "@mui/icons-material/Lightbulb";
-import CloseIcon from "@mui/icons-material/Close";
-import Person from "@mui/icons-material/Person";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
-import PlayCircleFilledIcon from "@mui/icons-material/PlayCircleFilled";
-import Share from "@mui/icons-material/Share";
-import PublishIcon from "@mui/icons-material/Publish";
-import GetAppIcon from "@mui/icons-material/GetApp";
-import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
-import CreateIcon from "@mui/icons-material/Create";
-
-// components
-import Chat from "../../Chat/Chat";
-import UpdateRoleplay from "../../Forms/UpdateRoleplay/UpdateRoleplay";
-import CreateQuestionDialog from "../../Dialogs/CreateQuestion/CreateQuestion";
-import GenerateRoleplayDialog from "../../Dialogs/GenerateRoleplay/GenerateRoleplay";
-import useDebounce from "../../hooks/useDebounce";
-import useRecognition from "../../hooks/useRecognition";
-import useExerciseState from "../../hooks/useExerciseState";
-import useConfirm from "../../hooks/useConfirm";
-import { handleScriptDownload } from "../../hooks/handleScriptDownload";
-import { formatMarkdownNewlines } from "../../utils";
-import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
-import { removeExtraWhiteSpaces } from "../../utils/index";
-import GenerateQuestion from "../../Dialogs/GenerateQuestion/GenerateQuestion";
-import UploadRoleplayScript from "../../Dialogs/UploadRoleplayScript/UploadRoleplayScript";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()((theme, {
-  option
-}) => ({
-  appBar: {
-    position: "relative",
-    paddingTop: `env(safe-area-inset-top)`,
-    paddingRight: `env(safe-area-inset-right)`,
-    paddingLeft: `env(safe-area-inset-left)`
-  },
-  flex: {
-    marginLeft: theme.spacing(1),
-    flex: 1
-  },
-  pane: {
-    height: "calc(100vh - 104px)",
-    [theme.breakpoints.up("sm")]: {
-      height: "calc(100vh - 112px)"
-    }
-  },
-  paneFull: {
-    height: "calc(100%)",
-    [theme.breakpoints.up("sm")]: {
-      height: "calc(100vh - 48px)"
-    }
-  },
-  settings: {
-    backgroundColor: theme.palette.background.default,
-    overflow: "scroll"
-  },
-  toolBarHidden: {
-    display: "none"
-  },
-  creationOptions: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    marginBottom: theme.spacing(2)
-  },
-  options: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: theme.spacing(2)
-  },
-  avatar: {
-    height: 60,
-    width: 60,
-    marginRight: 0,
-    marginBottom: theme.spacing(1)
-  },
-  option: {
-    marginLeft: theme.spacing(2),
-    marginRight: theme.spacing(2),
-    cursor: "pointer",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center"
-  },
-  option1Avatar: {
-    color: option === 1 ? theme.palette.primary.main : null,
-    boxShadow: option === 1 ? "rgb(255, 255, 255) 0px 0px 0px 2.5px, 0px 0px 0px 4.5px" : "none"
-  },
-  option2Avatar: {
-    color: option === 2 ? theme.palette.primary.main : null,
-    boxShadow: option === 2 ? "rgb(255, 255, 255) 0px 0px 0px 2.5px, 0px 0px 0px 4.5px" : "none"
-  },
-  createQuestion: {
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.mode === "dark" ? "black" : "white",
-    "&:hover": {
-      backgroundColor: theme.palette.primary.dark
-    }
-  },
-  generateQuestion: {
-    backgroundColor: theme.palette.secondary.main,
-    color: theme.palette.mode === "dark" ? "black" : "white",
-    "&:hover": {
-      backgroundColor: theme.palette.secondary.dark
-    }
-  }
-}));
-function Transition(props) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "up",
-    ...props
-  });
-}
-function CreationOptions({
-  t,
-  classes,
-  handleSelectOption,
-  roleplay,
-  option,
-  handleClickOpenCreateQuestion,
-  setIsGenerateQuestionDialogOpen,
-  handleClose,
-  subscription
-}) {
-  const handleClickOpenGenerateQuestion = () => {
-    setIsGenerateQuestionDialogOpen(true);
-    handleClose();
-  };
-  const handleClickCreateQuestion = () => {
-    handleClickOpenCreateQuestion();
-    handleClose();
-  };
-  const actions = [{
-    icon: /*#__PURE__*/_jsx(CreateIcon, {}),
-    name: "Create Question",
-    onClick: handleClickCreateQuestion,
-    class: classes.createQuestion
-  }, {
-    icon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
-    name: "Generate Question",
-    onClick: handleClickOpenGenerateQuestion,
-    class: classes.generateQuestion,
-    disabled: !subscription?.isPaidUser
-  }];
-  return /*#__PURE__*/_jsxs("div", {
-    className: classes.creationOptions,
-    id: "creationOptions",
-    children: [/*#__PURE__*/_jsx(Typography, {
-      variant: "h5",
-      children: t("add_new")
-    }), /*#__PURE__*/_jsxs("div", {
-      className: classes.options,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: classes.option,
-        onClick: () => handleSelectOption(1),
-        children: [roleplay && roleplay.actor1 && roleplay.actor1.picture ? /*#__PURE__*/_jsx(Avatar, {
-          className: `${classes.avatar} ${classes.option1Avatar}`,
-          src: roleplay.actor1.picture,
-          "data-cy": "roleplay_actor1",
-          alt: ""
-        }) : /*#__PURE__*/_jsx(Avatar, {
-          className: `${classes.avatar} ${classes.option1Avatar}`,
-          "data-cy": "roleplay_actor1",
-          sx: theme => ({
-            backgroundColor: theme.palette.mode === "dark" ? "white" : "",
-            color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
-          }),
-          alt: "",
-          children: /*#__PURE__*/_jsx(Person, {
-            fontSize: "large"
-          })
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          color: option === 1 ? "primary" : "",
-          children: roleplay.actor1.name ? roleplay.actor1.name : t("actor", {
-            number: "1"
-          })
-        })]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: `${classes.option}`,
-        onClick: () => handleSelectOption(2),
-        children: [roleplay && roleplay.actor2 && roleplay.actor2.picture ? /*#__PURE__*/_jsx(Avatar, {
-          className: `${classes.avatar} ${classes.option2Avatar}`,
-          src: roleplay.actor2.picture,
-          "data-cy": "roleplay_actor2",
-          alt: "Roleplay Actor 2"
-        }) : /*#__PURE__*/_jsx(Avatar, {
-          className: `${classes.avatar} ${classes.option2Avatar}`,
-          "data-cy": "roleplay_actor2",
-          sx: theme => ({
-            backgroundColor: theme.palette.mode === "dark" ? "white" : "",
-            color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
-          }),
-          alt: "Roleplay Actor 1",
-          children: /*#__PURE__*/_jsx(Person, {
-            fontSize: "large"
-          })
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          color: option === 2 ? "primary" : "",
-          children: roleplay.actor2.name ? roleplay.actor2.name : t("actor", {
-            number: "2"
-          })
-        })]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: `${classes.option}`,
-        children: [/*#__PURE__*/_jsx(SpeedDial, {
-          className: `${classes.avatar}`,
-          FabProps: {
-            color: "primary",
-            sx: {
-              minWidth: 60,
-              minHeight: 60
-            }
-          },
-          ariaLabel: "Add question",
-          icon: /*#__PURE__*/_jsx(SpeedDialIcon, {}),
-          children: actions.map(action => /*#__PURE__*/_jsx(SpeedDialAction, {
-            icon: action.icon,
-            tooltipTitle: action.name,
-            onClick: action.onClick,
-            classes: {
-              fab: action.class
-            },
-            disabled: action.disabled,
-            tooltipPlacement: "right"
-          }, action.name))
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          color: option === 3 ? "primary" : "",
-          children: t("question")
-        })]
-      })]
-    })]
-  });
-}
-const initialUpdateState = {
-  status: false,
-  index: null
-};
-function Roleplay({
-  t = text => text,
-  open,
-  handleClose,
-  initialValues,
-  avatars = [],
-  learnLang,
-  forLang,
-  handleSpeak,
-  handleStopSpeaking,
-  handleTranslate,
-  onSubmit,
-  learnLangCharacters,
-  forLangCharacters,
-  voices = [],
-  handlePlayRoleplay,
-  handleShareRoleplay,
-  fileSizeLimit,
-  subscription,
-  i18nLanguage,
-  translate,
-  getAllVoices,
-  makeChatGptApiRequest,
-  currentUser,
-  pdfDetails,
-  pdfVectorStoreCreationStatus,
-  makeCandooAIQuery,
-  siteLanguage,
-  phrases,
-  phraseLists,
-  topicId,
-  initialTopicGoal,
-  isUserInternal,
-  verificationStatus
-}) {
-  // console.log("Edit Roleplay -> phrases", phrases);
-  const [isGenerateRoleplayDialogOpen, setIsGenerateRoleplayDialogOpen] = useState(false);
-  const [isGenerateQuestionDialogOpen, setIsGenerateQuestionDialogOpen] = useState(false);
-  const {
-    recognitionState,
-    toggleListen,
-    browserSupportsSpeechRecognition
-  } = useRecognition();
-  const {
-    interimTranscript,
-    finalTranscript,
-    recognizing
-  } = recognitionState;
-  const exerciseState = useExerciseState({
-    t,
-    open: false,
-    handleClose,
-    handleSpeak,
-    handleStopSpeaking,
-    learnLang
-  });
-  const {
-    speak,
-    stopSpeaking,
-    isSpeaking,
-    isSpeakingTextContainer
-  } = exerciseState;
-  const handleMic = expectedTranscript => {
-    const speechContexts = expectedTranscript ? [{
-      phrases: [...(expectedTranscript.length < 100 ? [removeExtraWhiteSpaces(expectedTranscript)] : removeExtraWhiteSpaces(expectedTranscript).split(" "))],
-      boost: 10
-    }] : null;
-    const model = expectedTranscript && expectedTranscript.length < 50 ? "latest_short" : "default";
-    toggleListen(learnLang, speechContexts, model);
-  };
-  const theme = useTheme();
-  const [option, setOption] = useState(null);
-  const [text, setText] = useState("");
-  const [roleplay, setRoleplay] = useState(initialValues);
-  const [isUpdatingScriptLine, setIsUpdatingScriptLine] = useState(initialUpdateState);
-  const [isUpdatingQuestion, setIsUpdatingQuestion] = useState(initialUpdateState);
-  const [focusInput, setFocusInput] = useState(false);
-  const [hidden, setHidden] = useState(false);
-  const [confirm] = useConfirm(t);
-  const [uploadRoleplayScript, setUploadRoleplayScript] = useState(false);
-  const handleClickOpenUploadRoleplayScript = () => {
-    setUploadRoleplayScript(true);
-  };
-  const joyrideSteps = [{
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("roleplay_editor_welcome")
-    }),
-    placement: "center",
-    target: "body"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("roleplay_editor_options")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("roleplay_editor_options_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#creationOptions"
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("roleplay_editor_share")
-    }),
-    spotlightPadding: 8,
-    target: "#share"
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("roleplay_editor_play")
-    }),
-    spotlightPadding: 8,
-    target: "#play"
-  }];
-  const [joyrideState, setJoyrideState] = useState({
-    run: false,
-    steps: joyrideSteps
-  });
-  const {
-    classes
-  } = useStyles({
-    option: option
-  });
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
-  const tabVariant = isSmallScreen ? "fullWidth" : null;
-  const [tabValue, setTabValue] = useState(0);
-  const {
-    translationEnabled
-  } = initialValues;
-
-  // Reinitialise initial values
-  useEffect(() => {
-    if (initialValues && initialValues.roleplayId) {
-      setRoleplay(initialValues);
-    }
-  }, [initialValues]);
-  useEffect(() => {
-    if (tabValue !== 0) {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: false
-      }));
-    }
-    if (tabValue === 0 && !localStorage.getItem(`roleplay-editor-tour-completed`)) {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: true
-      }));
-    }
-  }, [tabValue]);
-  useEffect(() => {
-    if (open && !localStorage.getItem(`roleplay-editor-tour-completed`)) {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: true
-      }));
-    }
-  }, [open]);
-
-  // Reinitialise initial values if the roleplayId changes
-  useEffect(() => {
-    if (focusInput) {
-      setTimeout(() => {
-        setFocusInput(false);
-      }, 3000);
-    }
-  }, [focusInput]);
-  useEffect(() => {
-    setText(`${finalTranscript || ""} ${interimTranscript || ""}`);
-  }, [open, finalTranscript, interimTranscript]);
-
-  // Debounce script so that it only gives us latest value ...
-  // ... if script has not been updated within last 1000ms.
-  // The goal is to only have the API call fire when user stops typing ...
-  // ... so that we aren't hitting our API rapidly.
-  const debouncedScript = useDebounce(JSON.stringify(roleplay.script), 1000);
-  const handleChangeTab = (event, newValue) => {
-    setTabValue(newValue);
-  };
-  const handleInputChange = event => {
-    const target = event.target;
-    const value = target.type === "checkbox" ? target.checked : target.value;
-    const name = target.name;
-    if (name === "text") {
-      setText(value);
-    }
-  };
-  const handleSelectOption = opt => {
-    if (opt) {
-      setIsUpdatingScriptLine(initialUpdateState);
-      setIsUpdatingQuestion(initialUpdateState);
-      setText("");
-      const messagesElement = document.getElementById("messages");
-      if (messagesElement) {
-        setTimeout(() => {
-          messagesElement.scrollTo({
-            top: messagesElement.scrollHeight,
-            behavior: "smooth"
-          });
-        }, 0);
-      }
-    }
-    setOption(opt);
-  };
-  const handleAddScriptLine = () => {
-    setRoleplay(prevRoleplay => {
-      if (text && text !== "" && (option === 1 || option === 2)) {
-        const scriptLine = {
-          text: formatMarkdownNewlines(text),
-          actor: option
-        };
-        setText("");
-        handleSelectOption(option === 1 ? 2 : 1);
-        return {
-          ...prevRoleplay,
-          script: [...prevRoleplay.script, scriptLine]
-        };
-      } else {
-        return prevRoleplay;
-      }
-    });
-  };
-  const handleClickEditScriptLine = index => {
-    handleSelectOption(null);
-    setFocusInput(true);
-    setIsUpdatingScriptLine({
-      status: true,
-      index: index
-    });
-    const scriptLine = roleplay.script[index];
-    setText(scriptLine.text);
-  };
-  const handleEditScriptLine = () => {
-    setRoleplay(prevRoleplay => {
-      const newScript = prevRoleplay.script;
-      newScript[isUpdatingScriptLine.index].text = text;
-      return {
-        ...prevRoleplay,
-        script: newScript
-      };
-    });
-    setIsUpdatingScriptLine(initialUpdateState);
-    setText("");
-    handleSaveRoleplay();
-  };
-  const handleRemoveScriptLine = async index => {
-    const confirmed = await confirm(t("delete_script_item"), t("delete_script_item_confirmation"));
-    if (confirmed) {
-      setRoleplay(prevRoleplay => {
-        const newScript = prevRoleplay.script;
-        if (newScript && newScript[index]) {
-          newScript.splice(index, 1);
-        }
-        return {
-          ...prevRoleplay,
-          script: newScript
-        };
-      });
-      handleSaveRoleplay();
-    }
-  };
-  const moveScriptItem = (from, to) => {
-    setRoleplay(prevRoleplay => {
-      const newScript = prevRoleplay.script;
-      // remove `from` item and store it
-      const f = newScript.splice(from, 1)[0];
-      // insert stored item into position `to`
-      newScript.splice(to, 0, f);
-      return {
-        ...prevRoleplay,
-        script: newScript
-      };
-    });
-    handleSaveRoleplay();
-  };
-  const handleClickEditQuestion = index => {
-    handleSelectOption(null);
-    setIsUpdatingQuestion({
-      status: true,
-      index: index
-    });
-  };
-  const handleCloseEditQuestion = () => {
-    setIsUpdatingQuestion(initialUpdateState);
-  };
-  const handleSaveRoleplay = async () => {
-    try {
-      await onSubmit({
-        script: roleplay.script || []
-      });
-    } catch (error) {
-      console.error(error);
-    }
-  };
-  const handleEditQuestion = values => {
-    setRoleplay(prevRoleplay => {
-      const newScript = prevRoleplay.script;
-      newScript[isUpdatingQuestion.index] = {
-        ...newScript[isUpdatingQuestion.index],
-        ...values
-      };
-      return {
-        ...prevRoleplay,
-        script: newScript
-      };
-    });
-    setIsUpdatingQuestion({
-      status: false,
-      index: null
-    });
-    handleSaveRoleplay();
-  };
-  const [isCreateQuestionOpen, setIsCreateQuestionOpen] = useState(false);
-  const handleClickOpenCreateQuestion = () => {
-    setIsCreateQuestionOpen(true);
-  };
-  const handleCloseCreateQuestion = () => {
-    setIsCreateQuestionOpen(false);
-  };
-  const handleAddQuestion = values => {
-    handleCloseCreateQuestion();
-    setRoleplay(prevRoleplay => {
-      return {
-        ...prevRoleplay,
-        script: [...prevRoleplay.script, values]
-      };
-    });
-  };
-  const handleJoyrideCallback = data => {
-    const {
-      status,
-      action
-    } = data;
-    const finishedStatuses = [STATUS.FINISHED, STATUS.SKIPPED];
-    if (finishedStatuses.includes(status) || action === "close") {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: false
-      }));
-      localStorage.setItem(`roleplay-editor-tour-completed`, "true");
-    }
-  };
-
-  // Effect for API call
-  useEffect(() => {
-    if (debouncedScript !== JSON.stringify(initialValues.script)) {
-      handleSaveRoleplay();
-    }
-  }, [debouncedScript] // Only call effect if debounced script changes
-  );
-  const handleOpenGenerateRoleplay = async () => {
-    if (roleplay && roleplay.script && roleplay.script.length > 0) {
-      const confirmed = await confirm(t("generate_roleplay"), t("generate_roleplay_existing_script_confirmation"));
-      if (confirmed) {
-        setIsGenerateRoleplayDialogOpen(true);
-      }
-    } else {
-      setIsGenerateRoleplayDialogOpen(true);
-    }
-  };
-  const handleSelectGeneratedRoleplay = generatedRoleplay => {
-    if (roleplay.script && roleplay.script.length > 0) {
-      setRoleplay(prevRoleplay => {
-        return {
-          ...prevRoleplay,
-          script: generatedRoleplay.script
-        };
-      });
-    } else {
-      setRoleplay(prevRoleplay => {
-        return {
-          ...prevRoleplay,
-          script: generatedRoleplay.script
-        };
-      });
-    }
-  };
-  const currentMessages = (roleplay && roleplay.script ? roleplay.script : []).map(line => {
-    const isActor1 = line.actor === 1;
-    return {
-      ...line,
-      text: line.text && formatMarkdownNewlines(line.text),
-      isMyMessage: !isActor1,
-      name: isActor1 ? roleplay.actor1 && roleplay.actor1.name ? roleplay.actor1.name : t("actor", {
-        number: "1"
-      }) : roleplay.actor2 && roleplay.actor2.name ? roleplay.actor2.name : t("actor", {
-        number: "2"
-      }),
-      userImage: isActor1 ? roleplay.actor1 && roleplay.actor1.picture ? roleplay.actor1.picture : null : roleplay.actor2 && roleplay.actor2.picture ? roleplay.actor2.picture : null,
-      voice: isActor1 ? roleplay.actor1 && roleplay.actor1.voice ? roleplay.actor1.voice : null : roleplay.actor2 && roleplay.actor2.voice ? roleplay.actor2.voice : null
-    };
-  });
-  const afterElements = /*#__PURE__*/_jsx("div", {
-    children: /*#__PURE__*/_jsx(CreationOptions, {
-      t: t,
-      classes: classes,
-      roleplay: roleplay,
-      handleSelectOption: handleSelectOption,
-      option: option,
-      handleClickOpenCreateQuestion: handleClickOpenCreateQuestion,
-      setIsGenerateQuestionDialogOpen: setIsGenerateQuestionDialogOpen,
-      subscription: subscription
-    })
-  });
-  const tabs = [{
-    label: t("editor")
-  }, {
-    label: t("settings")
-  }];
-  const {
-    run,
-    steps
-  } = joyrideState;
-  const topBarActions = /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(Box, {
-      children: [subscription?.isPaidUser && /*#__PURE__*/_jsx(Button, {
-        sx: {
-          marginRight: 1
-        },
-        onClick: handleOpenGenerateRoleplay,
-        color: "secondary",
-        variant: "contained",
-        startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
-        children: t("generate_roleplay")
-      }), /*#__PURE__*/_jsx(DefaultButton, {
-        sx: {
-          marginRight: 1
-        },
-        variant: "contained",
-        onClick: handleClickOpenUploadRoleplayScript,
-        endIcon: /*#__PURE__*/_jsx(PublishIcon, {}),
-        children: "Upload"
-      }), /*#__PURE__*/_jsx(DefaultButton, {
-        variant: "contained",
-        onClick: () => handleScriptDownload(roleplay.script, roleplay.roleplayName, t),
-        endIcon: /*#__PURE__*/_jsx(GetAppIcon, {}),
-        children: "Download"
-      }), /*#__PURE__*/_jsx(UploadRoleplayScript, {
-        t: t,
-        open: uploadRoleplayScript,
-        handleClose: () => setUploadRoleplayScript(false),
-        onSubmit: onSubmit
-      })]
-    })
-  });
-  return /*#__PURE__*/_jsxs(Dialog, {
-    fullScreen: true,
-    open: open,
-    onClose: handleClose,
-    "data-cy": "roleplay-editor-dialog",
-    slots: {
-      transition: Transition
-    },
-    children: [/*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsxs(AppBar, {
-        className: classes.appBar,
-        children: [/*#__PURE__*/_jsxs(Toolbar, {
-          className: hidden ? classes.toolBarHidden : "",
-          children: [/*#__PURE__*/_jsx(IconButton, {
-            "data-cy": "close-dialog",
-            edge: "start",
-            color: "inherit",
-            onClick: handleClose,
-            "aria-label": "Close",
-            size: "large",
-            children: /*#__PURE__*/_jsx(CloseIcon, {})
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: "h6",
-            className: classes.flex,
-            noWrap: true,
-            sx: {
-              color: "inherit"
-            },
-            children: roleplay.roleplayName
-          }), /*#__PURE__*/_jsx(Tooltip, {
-            title: t("Rewatch tutorial"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              color: "inherit",
-              onClick: () => setJoyrideState({
-                ...joyrideState,
-                run: true
-              }),
-              size: "large",
-              children: /*#__PURE__*/_jsx(LightbulbIcon, {})
-            })
-          }), handleShareRoleplay && /*#__PURE__*/_jsx(Tooltip, {
-            title: t("share"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              color: "inherit",
-              onClick: () => handleShareRoleplay(roleplay),
-              id: "share",
-              size: "large",
-              children: /*#__PURE__*/_jsx(Share, {})
-            })
-          }), handlePlayRoleplay ? /*#__PURE__*/_jsx(Tooltip, {
-            title: t("play_roleplay"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              color: "inherit",
-              onClick: () => handlePlayRoleplay(roleplay),
-              edge: "end",
-              id: "play",
-              size: "large",
-              children: /*#__PURE__*/_jsx(PlayCircleFilledIcon, {})
-            })
-          }) : null]
-        }), /*#__PURE__*/_jsxs(Tabs, {
-          value: tabValue,
-          onChange: handleChangeTab,
-          variant: tabVariant,
-          centered: true,
-          textColor: "inherit",
-          indicatorColor: "secondary",
-          children: [tabs.map(({
-            label,
-            disabled,
-            hidden
-          }, i) => !hidden ? /*#__PURE__*/_jsx(Tab, {
-            id: i,
-            label: label,
-            disabled: disabled,
-            sx: {
-              color: "#fff !important",
-              "&.Mui-selected": {
-                color: "#fff !important"
-              },
-              "&:hover": {
-                ...(theme.palette.mode === "light" && {
-                  backgroundColor: "rgba(144, 238, 144, 0.20) !important"
-                })
-              }
-            }
-          }, i) : null), /*#__PURE__*/_jsx(Tooltip, {
-            title: hidden ? t("show_menu") : t("hide_menu"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => setHidden(!hidden),
-              size: "large",
-              children: hidden ? /*#__PURE__*/_jsx(ArrowDropDownIcon, {}) : /*#__PURE__*/_jsx(ArrowDropUpIcon, {})
-            })
-          })]
-        })]
-      })
-    }), tabValue === 0 ? /*#__PURE__*/_jsx(Box, {
-      className: hidden ? classes.paneFull : classes.pane,
-      children: /*#__PURE__*/_jsx(Chat, {
-        t: t,
-        topBarActions: topBarActions,
-        messages: currentMessages,
-        translationEnabled: translationEnabled,
-        topbarTitle: t(`script`),
-        handleInputChange: handleInputChange,
-        inputName: "text",
-        inputValue: text,
-        focusInput: focusInput,
-        handleTranslate: handleTranslate,
-        browserSupportsSpeechRecognition: browserSupportsSpeechRecognition,
-        handleRecord: browserSupportsSpeechRecognition && learnLang !== "irish" ? () => handleMic() : null,
-        isListening: recognizing,
-        handleAdd: !isUpdatingScriptLine.status ? handleAddScriptLine : null,
-        handleUpdate: isUpdatingScriptLine.status ? handleEditScriptLine : null,
-        handleRemoveMessage: handleRemoveScriptLine,
-        handleEditMessage: handleClickEditScriptLine,
-        handleEditQuestion: handleClickEditQuestion,
-        hidden: hidden,
-        moveScriptItem: moveScriptItem,
-        learnLang: learnLang,
-        forLang: forLang,
-        characters: learnLangCharacters,
-        isPrimaryColor: false
-        // Remove handleKeyPress to enable multiline editing
-        ,
-        handleKeyPress: e => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-            isUpdatingScriptLine.status ? handleEditScriptLine() : handleAddScriptLine();
-          }
-        },
-        afterElements: afterElements,
-        hideBottomBar: (!option || option > 2) && !isUpdatingScriptLine.status,
-        speak: speak,
-        stopSpeaking: stopSpeaking,
-        isSpeaking: isSpeaking,
-        isSpeakingTextContainer: isSpeakingTextContainer,
-        siteLanguage: siteLanguage
-      })
-    }) : null, tabValue === 1 ? /*#__PURE__*/_jsx(Box, {
-      className: classes.settings,
-      sx: {
-        p: 2
-      },
-      children: /*#__PURE__*/_jsx(UpdateRoleplay, {
-        t: t,
-        voices: voices,
-        avatars: avatars,
-        handleSpeak: handleSpeak,
-        learnLang: learnLang,
-        initialValues: initialValues,
-        onSubmit: onSubmit,
-        fileSizeLimit: fileSizeLimit,
-        subscription: subscription,
-        isUserInternal: isUserInternal,
-        verificationStatus: verificationStatus
-      })
-    }) : null, /*#__PURE__*/_jsx(CreateQuestionDialog, {
-      t: t,
-      learnLang: learnLang,
-      forLang: forLang,
-      forLangCharacters: forLangCharacters,
-      learnLangCharacters: learnLangCharacters,
-      open: isCreateQuestionOpen,
-      handleClose: handleCloseCreateQuestion,
-      handleTranslate: handleTranslate,
-      onSubmit: handleAddQuestion,
-      script: roleplay.script,
-      makeChatGptApiRequest: makeChatGptApiRequest,
-      values: {
-        actor1: roleplay.actor1,
-        actor2: roleplay.actor2
-      },
-      disableRestoreFocus: true
-    }), isUpdatingQuestion.status && /*#__PURE__*/_jsx(CreateQuestionDialog, {
-      t: t,
-      learnLang: learnLang,
-      forLang: forLang,
-      forLangCharacters: forLangCharacters,
-      learnLangCharacters: learnLangCharacters,
-      open: isUpdatingQuestion.status,
-      handleClose: handleCloseEditQuestion,
-      handleTranslate: handleTranslate,
-      onSubmit: handleEditQuestion,
-      question: roleplay.script[isUpdatingQuestion.index]?.question,
-      answers: roleplay.script[isUpdatingQuestion.index].answers,
-      update: true
-    }), /*#__PURE__*/_jsx(GenerateQuestion, {
-      t: t,
-      open: isGenerateQuestionDialogOpen,
-      handleClose: () => {
-        setIsGenerateQuestionDialogOpen(false);
-      },
-      script: roleplay.script,
-      values: {
-        actor1: roleplay.actor1,
-        actor2: roleplay.actor2
-      },
-      makeChatGptApiRequest: makeChatGptApiRequest,
-      onSubmit: handleAddQuestion,
-      learnLang: learnLang,
-      forLang: forLang,
-      siteLanguage: siteLanguage,
-      disableRestoreFocus: true
-    }), isGenerateRoleplayDialogOpen && /*#__PURE__*/_jsx(GenerateRoleplayDialog, {
-      t: t,
-      isGenerateRoleplayDialogOpen: isGenerateRoleplayDialogOpen,
-      setIsGenerateRoleplayDialogOpen: setIsGenerateRoleplayDialogOpen,
-      handleTranslate: translate,
-      handleSpeak: handleSpeak,
-      hideRoleplayDifficultyOptions: false,
-      hideRoleplayLenghtOptions: true,
-      handleSelectRoleplay: handleSelectGeneratedRoleplay,
-      makeChatGptApiRequest: makeChatGptApiRequest,
-      currentUser: currentUser,
-      pdfDetails: pdfDetails,
-      pdfVectorStoreCreationStatus: pdfVectorStoreCreationStatus,
-      makeCandooAIQuery: makeCandooAIQuery,
-      getAllVoices: getAllVoices,
-      learnLang: learnLang,
-      forLang: forLang,
-      i18nLanguage: i18nLanguage,
-      siteLanguage: siteLanguage,
-      initialValues: {
-        roleplayTopic: roleplay.roleplayName,
-        roleplayDifficulty: roleplay.difficulty,
-        roleplayLength: "",
-        questionsAmount: 0,
-        roleplayLengthNumber: 8,
-        actor1: roleplay.actor1,
-        actor2: roleplay.actor2
-      },
-      phrases: phrases,
-      phraseLists: phraseLists,
-      topicId: topicId,
-      initialTopicGoal: initialTopicGoal,
-      autoSelect: true
-    }), /*#__PURE__*/_jsx(Joyride, {
-      onEvent: handleJoyrideCallback,
-      continuous: true,
-      run: run,
-      scrollToFirstStep: true,
-      steps: steps,
-      locale: {
-        back: t("back"),
-        close: t("close"),
-        last: t("last"),
-        next: t("next"),
-        skip: t("skip")
-      },
-      options: {
-        showProgress: true,
-        zIndex: 10000,
-        arrowColor: theme.palette.background.paper,
-        backgroundColor: theme.palette.background.paper,
-        primaryColor: theme.palette.primary.main,
-        textColor: theme.palette.text.primary,
-        buttons: ['back', 'close', 'primary', 'skip']
-      }
-    })]
-  });
-}
-Roleplay.propTypes = {};
-export default Roleplay;