@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Editors/Bot/Bot.js

@@ -1,843 +0,0 @@
-import { useState, useEffect } from "react";
-import { Joyride, STATUS } from "react-joyride";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@mui/material/styles";
-import { makeStyles } from "tss-react/mui";
-import { Slide, IconButton, Button, Dialog, AppBar, Toolbar, Typography } from "@mui/material";
-import LightbulbIcon from "@mui/icons-material/Lightbulb";
-import CloseIcon from "@mui/icons-material/Close";
-import InfoOutlined from "@mui/icons-material/InfoOutlined";
-import { Tabs, Tab, Box, Tooltip } from "@mui/material";
-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 Help from "@mui/icons-material/Help";
-import RiveScript from "@nualang/rivescript";
-import ResponsiveDialog from "../../Dialogs/ResponsiveDialog/ResponsiveDialog";
-import ReactMarkdown from "react-markdown";
-import BotNualaImage from "../../img/bot-error.svg";
-
-// components
-import Chat from "../../Chat/Chat";
-import UpdateBot from "../../Forms/UpdateBot/UpdateBot";
-import Tutorial from "./Tutorial";
-import Editor from "./Editor/Editor";
-
-// utils
-import { jsonToRivescript, rivescriptToJson } from "../../utils/index";
-import useDebounce from "../../hooks/useDebounce";
-import useRecognition from "../../hooks/useRecognition";
-import { botErrorMessage } from "../../utils/constants";
-import useExerciseState from "../../hooks/useExerciseState";
-import { randomId } from "../../utils/index";
-
-// The RiveScript bot instance, on the window scope so it can be debugged.
-window.rs = null;
-import config from "../../config";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  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
-  },
-  button: {
-    margin: theme.spacing(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"
-  }
-}));
-function Transition(props) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "up",
-    ...props
-  });
-}
-function Bot({
-  t = text => text,
-  open,
-  handleClose,
-  initialValues,
-  avatars = [],
-  learnLang,
-  forLang,
-  handleSpeak,
-  handleStopSpeaking,
-  handleTranslate,
-  onSubmit,
-  userAttributes,
-  openSnackbar,
-  learnLangCharacters,
-  voices = {},
-  searchParams = {},
-  addSearchParams,
-  removeSearchParams,
-  handlePlayBot,
-  handleShareBot,
-  fileSizeLimit,
-  handleUploadBotExerciseImage,
-  subscription,
-  handleBotInstructionsImageUpload,
-  makeChatGptApiRequest,
-  handleUpdateBot,
-  generateRiveFile,
-  siteLanguage,
-  topicPhrases,
-  phraseLists,
-  courseId,
-  sectionId,
-  topicId,
-  initialTopicGoal,
-  isUserInternal,
-  verificationStatus,
-  handleMessageBot
-}) {
-  const {
-    recognitionState,
-    toggleListen,
-    stopListening,
-    resetTranscript,
-    browserSupportsSpeechRecognition
-  } = useRecognition({
-    openSnackbar
-  });
-  const {
-    interimTranscript,
-    finalTranscript,
-    recognizing
-  } = recognitionState;
-  const [bot, setBot] = useState(initialValues);
-  const [isDynamicResponsesEnabled, setIsDynamicResponsesEnabled] = useState("disable");
-  const languageInformation = config.languages[learnLang];
-  const languageTag = languageInformation.Code;
-  const exerciseState = useExerciseState({
-    t,
-    open: false,
-    handleClose,
-    handleSpeak,
-    handleStopSpeaking,
-    learnLang,
-    isDynamicResponsesEnabled,
-    isUserInternal,
-    resetTranscript,
-    openSnackbar,
-    bot,
-    aiChatbotConversationHistory: [],
-    handleMessageBot
-  });
-  const {
-    speak,
-    stopSpeaking,
-    isSpeaking,
-    isSpeakingTextContainer,
-    handleSubmitBotMessage,
-    botMessages,
-    setBotMessages,
-    setBotText,
-    botText,
-    resetConversationHistory
-  } = exerciseState;
-  const handleMic = () => {
-    const {
-      phrasesToBoost
-    } = bot;
-    const speechContexts = phrasesToBoost ? [{
-      phrases: [...phrasesToBoost],
-      boost: 10
-    }] : null;
-    const model = phrasesToBoost ? "default" : "latest_long";
-    toggleListen(learnLang, speechContexts, model);
-  };
-  const [isHelpOpen, setIsHelpOpen] = useState(searchParams.help === "open" ? true : false);
-  const handleClickOpenHelp = () => {
-    addSearchParams({
-      help: "open"
-    });
-    setIsHelpOpen(true);
-  };
-  const handleCloseHelp = () => {
-    removeSearchParams(["help"]);
-    setIsHelpOpen(false);
-  };
-  const [creatorInstructionsDialogOpen, setCreatorInstructionDialogOpen] = useState(searchParams.instructions === "creator" ? true : false);
-  const theme = useTheme();
-  const {
-    classes
-  } = useStyles();
-  const [text, setText] = useState("");
-  const [botJSON, setBotJSON] = useState(null);
-  const [debug] = useState(false);
-  const [utf8] = useState(true);
-  const [isBotRunning, setIsBotRunning] = useState(false);
-  const [messages, setMessages] = useState([]);
-  const [hidden, setHidden] = useState(false);
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
-  const tabVariant = isSmallScreen ? "fullWidth" : null;
-  const [tabValue, setTabValue] = useState(0);
-  const [disableInput, setDisableInput] = useState(true);
-  const {
-    voice
-  } = bot;
-  const joyrideSteps = [{
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("bot_editor_welcome")
-    }),
-    placement: "center",
-    target: "body"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("bot_editor_sidebar")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("bot_editor_sidebar_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#editorSidebar"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("bot_editor_flow_chart")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("bot_editor_flow_chart_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#editorFlowChart"
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("bot_editor_share")
-    }),
-    spotlightPadding: 8,
-    target: "#share"
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("bot_editor_play")
-    }),
-    spotlightPadding: 8,
-    target: "#play"
-  }];
-  const [joyrideState, setJoyrideState] = useState({
-    run: false,
-    steps: joyrideSteps
-  });
-  const {
-    translationEnabled
-  } = initialValues;
-  const handleClickOpenCreatorInstructions = () => {
-    addSearchParams({
-      instructions: "creator",
-      action: "edit"
-    });
-    setCreatorInstructionDialogOpen(true);
-  };
-  const handleCloseCreatorInstructions = () => {
-    removeSearchParams(["instructions"]);
-    setCreatorInstructionDialogOpen(false);
-  };
-  useEffect(() => {
-    if (open && !localStorage.getItem("bot-editor-tour-completed")) {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: true
-      }));
-    }
-  }, [open]);
-  useEffect(() => {
-    if (initialValues && initialValues.botId) {
-      setBot(initialValues);
-    }
-  }, [initialValues]);
-  useEffect(() => {
-    if (open && bot.creatorInstructions && bot.creatorInstructions !== "") {
-      handleClickOpenCreatorInstructions();
-    }
-  }, [open]);
-  useEffect(() => {
-    if (isBotRunning) {
-      setText(`${interimTranscript}${finalTranscript}`);
-    }
-  }, [isBotRunning, finalTranscript]);
-  useEffect(() => {
-    if (open) {
-      if (finalTranscript || interimTranscript) {
-        setBotText(`${finalTranscript || ""} ${interimTranscript || ""}`);
-      } else if (botText !== "") {
-        setBotText("");
-      }
-    }
-  }, [open, finalTranscript, interimTranscript]);
-  useEffect(() => {
-    if (!open && isBotRunning) {
-      teardownBot();
-    }
-  }, [open]);
-  useEffect(() => {
-    if (tabValue !== 0) {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: false
-      }));
-    }
-    if (tabValue === 0 && !localStorage.getItem(`bot-editor-tour-completed`)) {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: true
-      }));
-    }
-  }, [tabValue]);
-  const handleChangeTab = (event, newValue) => {
-    if (isBotRunning) {
-      teardownBot();
-    }
-    setTabValue(newValue);
-  };
-  useEffect(() => {
-    setIsDynamicResponsesEnabled(bot?.isDynamicResponsesEnabled);
-  }, [bot]);
-
-  // Debounce rivefile so that it only gives us latest value ...
-  // ... if rivefile has not been updated within last 3000ms.
-  // The goal is to only have the API call fire when user stops typing ...
-  // ... so that we aren't hitting our API rapidly.
-  const debouncedRiveFile = useDebounce(bot.riveFile, 3000);
-
-  // Effect for API call
-  useEffect(() => {
-    if (debouncedRiveFile !== initialValues.riveFile) {
-      handleSaveBot();
-    }
-  }, [debouncedRiveFile] // Only call effect if debounced rive file changes
-  );
-
-  // Debounce botJSON so that it only gives us latest value ...
-  // ... if botJSON has not been updated within last 3000ms.
-  // The goal is to only have the bot flow chart fire when user stops typing ...
-
-  useEffect(() => {
-    if (!isSmallScreen && tabValue === 2) {
-      setTabValue(0);
-    }
-  }, [isSmallScreen]); // Only run when screen changes
-
-  useEffect(() => {
-    if (bot.riveFile === true) {
-      bot.riveFile = "";
-    }
-    updateRivescriptJSON(bot.riveFile);
-  }, []); // Only run on mount
-
-  useEffect(() => {
-    if (bot.introMessage && isBotRunning) {
-      const message = {
-        isMyMessage: false,
-        name: bot && bot.name ? bot.name : "Bot",
-        text: bot.introMessage,
-        datetime: new Date()
-      };
-      setMessages(prevState => [...prevState, message]);
-    } else {
-      setMessages([]);
-    }
-  }, [isBotRunning]);
-  useEffect(() => {
-    if (isBotRunning) {
-      setDisableInput(false);
-    } else {
-      setDisableInput(true);
-    }
-  }, [isBotRunning]);
-  const onError = error => {
-    if (error.includes(`Invalid format for !Definition line: must be '! type name = value' OR '! type = value' at stream()`)) {
-      openSnackbar("Syntax Error: Text field cannot be empty", "error");
-    } else {
-      openSnackbar(error, "error");
-    }
-  };
-
-  // Catch debug messages from the bot to add to the debug log.
-  const onDebug = () => {
-    if (debug) {
-      // handle debug
-    }
-  };
-  const initBot = async () => {
-    try {
-      const {
-        riveFile
-      } = bot;
-      if (riveFile.length === 0) {
-        openSnackbar("You didn't enter any RiveScript code to run!", "error");
-        return;
-      }
-      // Initialize the RiveScript bot.
-      window.rs = new RiveScript({
-        debug: debug,
-        utf8: utf8,
-        forceCase: true,
-        onDebug: onDebug
-      });
-
-      // Override the punctuation characters that get stripped from the
-      // user's message.
-      window.rs.unicodePunctuation = new RegExp(/[.,!¡¿?;:]/g);
-
-      // load rive
-      const codeParsed = window.rs.stream(riveFile, onError);
-      if (codeParsed) {
-        window.rs.sortReplies();
-        setIsBotRunning(true);
-      } else {
-        teardownBot();
-      }
-    } catch (error) {
-      console.error(error);
-      //this.props.openSnackbar("Error in your RiveScript code", "error");
-      teardownBot();
-    }
-  };
-  const teardownBot = () => {
-    window.rs = null;
-    setIsBotRunning(false);
-    handleReset();
-  };
-  useEffect(() => {
-    return teardownBot();
-  }, []); // Only run once
-
-  const handleBot = async () => {
-    if (isBotRunning) {
-      teardownBot();
-    } else {
-      await initBot();
-    }
-  };
-  const handleInputChange = event => {
-    const target = event.target;
-    const value = target.type === "checkbox" ? target.checked : target.value;
-    const name = target.name;
-    if (name === "botText") {
-      setText(value);
-      setBotText(value);
-    }
-    if (name === "riveFile") {
-      setBot(prevState => ({
-        ...prevState,
-        riveFile: value
-      }));
-      updateRivescriptJSON(value);
-    }
-  };
-  const handleReset = () => {
-    stopListening();
-    resetTranscript();
-    setBotMessages([]);
-    resetConversationHistory();
-  };
-  const updateRivescriptJSON = rs => {
-    const riveFileJSON = rivescriptToJson(rs, {
-      debug: debug,
-      utf8: utf8,
-      onDebug: onDebug
-    });
-    if (riveFileJSON) {
-      setBotJSON(riveFileJSON);
-    }
-  };
-  const updateRivescriptText = json => {
-    const newRiveFile = jsonToRivescript(json, {
-      debug: debug,
-      utf8: utf8,
-      forceCase: true,
-      onDebug: onDebug
-    });
-    if (newRiveFile !== bot.riveFile) {
-      setBot(prevState => ({
-        ...prevState,
-        riveFile: newRiveFile
-      }));
-    }
-  };
-  const handleBotJSONChange = json => {
-    setBotJSON(prevState => ({
-      ...prevState,
-      ...json
-    }));
-    updateRivescriptText(json);
-  };
-  const addMessage = (text, isMyMessage, playAudio, isErrorMsg = false) => {
-    if (!text) {
-      return;
-    }
-    const voice = initialValues.voice;
-    const message = {
-      isMyMessage: isMyMessage,
-      userImage: isErrorMsg ? BotNualaImage : isMyMessage ? userAttributes && userAttributes.picture ? userAttributes.picture : null : bot && bot.botAvatar ? bot.botAvatar : null,
-      name: isErrorMsg ? "Bot" : isMyMessage ? userAttributes && userAttributes.preferred_username ? userAttributes.preferred_username : "Me" : bot && bot.name ? bot.name : "Bot",
-      text: text,
-      datetime: new Date()
-    };
-    setMessages(prevState => [...prevState, message]);
-    if (playAudio !== false && learnLang !== "irish") {
-      speak(message.text, voice, false, `#message${messages.length + 1}`
-      //voiceLanguageCode
-      );
-    }
-  };
-  const handleSubmitText = async () => {
-    try {
-      if (text.length === 0) {
-        return;
-      }
-      if (window.rs === null) {
-        // No bot? Weird.
-        console.error("Weird error: no RiveScript bot is currently active.");
-        return;
-      }
-      addMessage(text, true, false);
-
-      // Get the reply.
-      // Save their original message as the uservar origMessage for
-      // object macros to have access to.
-      await window.rs.setUservar("web-user", "origMessage", text);
-      const reply = await window.rs.reply("web-user", text);
-      if (reply) {
-        setText("");
-        if (reply.includes(botErrorMessage)) {
-          addMessage(t("bot_editor_preview_error"), false, false, true); // XXX
-        } else {
-          addMessage(reply, false, true);
-        }
-      }
-    } catch (error) {
-      console.error(error);
-      //this.props.openSnackbar("There was a problem getting reply", "error");
-    }
-  };
-  const handleSaveBot = async () => {
-    try {
-      // Initialize the RiveScript bot.
-      window.rs = new RiveScript({
-        debug: debug,
-        utf8: utf8,
-        forceCase: true,
-        onDebug: onDebug
-      });
-
-      // Override the punctuation characters that get stripped from the
-      // user's message.
-      window.rs.unicodePunctuation = new RegExp(/[.,!¡¿?;:]/g);
-
-      // load rive
-      const codeParsed = window.rs.stream(bot.riveFile, onError);
-      if (codeParsed) {
-        await onSubmit({
-          riveFile: bot.riveFile,
-          editorMode: "simplified"
-        });
-      } else {
-        teardownBot();
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  };
-  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(`bot-editor-tour-completed`, "true");
-    }
-  };
-  const topBarActions = /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(Button, {
-      onClick: handleBot,
-      "data-cy": "startBot",
-      disabled: !bot.riveFile,
-      variant: "contained",
-      color: isBotRunning ? "secondary" : "primary",
-      children: isBotRunning ? t("stop") : t("start")
-    })
-  });
-  const BotPreview = /*#__PURE__*/_jsx(Chat, {
-    languageTag: languageTag,
-    t: t,
-    translationEnabled: translationEnabled,
-    topBarActions: topBarActions,
-    topbarTitle: t(`preview`),
-    handleInputChange: handleInputChange,
-    inputName: "botText",
-    inputValue: isDynamicResponsesEnabled === "enable" ? botText : text,
-    handleTranslate: handleTranslate,
-    handleSend: isDynamicResponsesEnabled === "enable" ? handleSubmitBotMessage : handleSubmitText,
-    isListening: recognizing,
-    browserSupportsSpeechRecognition: browserSupportsSpeechRecognition,
-    handleRecord: browserSupportsSpeechRecognition && isBotRunning && learnLang !== "irish" ? () => handleMic() : null,
-    learnLang: learnLang,
-    forLang: forLang,
-    characters: learnLangCharacters,
-    handleKeyPress: e => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        isDynamicResponsesEnabled === "enable" ? handleSubmitBotMessage() : handleSubmitText();
-      }
-    },
-    speak: speak,
-    stopSpeaking: stopSpeaking,
-    isSpeaking: isSpeaking,
-    isSpeakingTextContainer: isSpeakingTextContainer,
-    voice: voice,
-    messages: isDynamicResponsesEnabled === "enable" ? botMessages : messages,
-    setBotMessages: isDynamicResponsesEnabled === "enable" ? setBotMessages : null,
-    disableInput: disableInput
-  });
-  const tabs = [{
-    label: t("editor")
-  }, {
-    label: t("preview")
-  }, {
-    label: t("settings")
-  }];
-  const {
-    run,
-    steps
-  } = joyrideState;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(Dialog, {
-      fullScreen: true,
-      open: open,
-      onClose: handleClose,
-      "data-cy": "bot-editor-dialog",
-      sx: theme => ({
-        "& .MuiDialog-paper": {
-          backgroundColor: theme.palette.mode === "light" ? theme.palette.grey[200] : null
-        }
-      }),
-      slots: {
-        transition: Transition
-      },
-      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",
-            component: "h2",
-            className: classes.flex,
-            noWrap: true,
-            sx: {
-              color: "inherit"
-            },
-            children: bot.botName
-          }), /*#__PURE__*/_jsx("div", {
-            className: "grow-1"
-          }), /*#__PURE__*/_jsx(Tooltip, {
-            title: t("Rewatch tutorial"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              color: "inherit",
-              onClick: () => setJoyrideState({
-                ...joyrideState,
-                run: true
-              }),
-              size: "large",
-              children: /*#__PURE__*/_jsx(LightbulbIcon, {})
-            })
-          }), /*#__PURE__*/_jsx(Tooltip, {
-            title: t("help"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              color: "inherit",
-              onClick: handleClickOpenHelp,
-              id: "help",
-              size: "large",
-              children: /*#__PURE__*/_jsx(Help, {})
-            })
-          }), handleShareBot && /*#__PURE__*/_jsx(Tooltip, {
-            title: t("share"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              color: "inherit",
-              onClick: () => handleShareBot(bot),
-              id: "share",
-              size: "large",
-              children: /*#__PURE__*/_jsx(Share, {})
-            })
-          }), handlePlayBot ? /*#__PURE__*/_jsx(Tooltip, {
-            title: t("play_bot"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              color: "inherit",
-              onClick: () => handlePlayBot(bot),
-              id: "play",
-              size: "large",
-              children: /*#__PURE__*/_jsx(PlayCircleFilledIcon, {})
-            })
-          }) : null, bot.creatorInstructions && bot.creatorInstructions !== "" ? /*#__PURE__*/_jsx(Tooltip, {
-            title: t("instructions"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              color: "inherit",
-              onClick: handleClickOpenCreatorInstructions,
-              edge: "end",
-              size: "large",
-              children: /*#__PURE__*/_jsx(InfoOutlined, {})
-            })
-          }) : null]
-        }), /*#__PURE__*/_jsx("div", {
-          children: /*#__PURE__*/_jsxs(Tabs, {
-            value: tabValue,
-            onChange: handleChangeTab,
-            variant: tabVariant,
-            centered: true,
-            textColor: "inherit",
-            indicatorColor: "secondary",
-            children: [tabs.map(({
-              label,
-              disabled,
-              hidden
-            }, i) => {
-              const keyId = `botedit_${randomId()}${i}`;
-              return !hidden ? /*#__PURE__*/_jsx(Tab, {
-                id: keyId,
-                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"
-                    })
-                  }
-                }
-              }, keyId) : 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(Editor, {
-        t: t,
-        bot: bot,
-        botJSON: botJSON,
-        learnLangCharacters: learnLangCharacters,
-        handleBotJSONChange: handleBotJSONChange,
-        hidden: hidden,
-        handleUploadBotExerciseImage: handleUploadBotExerciseImage,
-        makeChatGptApiRequest: makeChatGptApiRequest,
-        handleUpdateBot: handleUpdateBot,
-        generateRiveFile: generateRiveFile,
-        learnLang: learnLang,
-        siteLanguage: siteLanguage,
-        topicPhrases: topicPhrases,
-        phraseLists: phraseLists,
-        updateRivescriptJSON: updateRivescriptJSON,
-        courseId: courseId,
-        sectionId: sectionId,
-        topicId: topicId,
-        initialTopicGoal: initialTopicGoal
-      }) : null, tabValue === 1 ? /*#__PURE__*/_jsx(Box, {
-        className: hidden ? classes.paneFull : classes.pane,
-        children: BotPreview
-      }) : null, tabValue === 2 ? /*#__PURE__*/_jsx(Box, {
-        className: classes.settings,
-        sx: {
-          p: 2
-        },
-        children: /*#__PURE__*/_jsx(UpdateBot, {
-          t: t,
-          voices: voices,
-          avatars: avatars,
-          learnLang: learnLang,
-          handleSpeak: handleSpeak,
-          initialValues: initialValues,
-          fileSizeLimit: fileSizeLimit,
-          onSubmit: onSubmit,
-          subscription: subscription,
-          handleBotInstructionsImageUpload: handleBotInstructionsImageUpload,
-          isUserInternal: isUserInternal,
-          verificationStatus: verificationStatus
-        })
-      }) : null]
-    }), /*#__PURE__*/_jsx(ResponsiveDialog, {
-      open: creatorInstructionsDialogOpen,
-      handleClose: handleCloseCreatorInstructions,
-      dialogTitle: t("instruction_message"),
-      children: /*#__PURE__*/_jsx("div", {
-        className: "content",
-        children: /*#__PURE__*/_jsx(ReactMarkdown, {
-          children: bot.creatorInstructions
-        })
-      })
-    }), /*#__PURE__*/_jsx(ResponsiveDialog, {
-      open: isHelpOpen,
-      handleClose: handleCloseHelp,
-      children: /*#__PURE__*/_jsx(Tutorial, {})
-    }), /*#__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']
-      }
-    })]
-  });
-}
-Bot.propTypes = {};
-export default Bot;