@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Editors/Bot/Editor/Editor.js

@@ -1,628 +0,0 @@
-import { useState, createRef } from "react";
-import { makeStyles } from "tss-react/mui";
-import { IconButton, Toolbar, Box, Tooltip, Popper, Paper, Button, useMediaQuery } from "@mui/material";
-// import AddCommentIcon from '@mui/icons-material/AddComment';
-// import ReplyIcon from '@mui/icons-material/Reply';
-import LinkIcon from "@mui/icons-material/Link";
-import FormatBoldIcon from "@mui/icons-material/FormatBold";
-import FormatItalicIcon from "@mui/icons-material/FormatItalic";
-import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
-// import AddTopicIcon from '@mui/icons-material/PostAdd';
-// import LinkTopicIcon from '@mui/icons-material/AccountTree';
-import TextFormatIcon from "@mui/icons-material/TextFormat";
-import { Adornment } from "../../../Forms/InputHelper/InputHelper";
-import AddImageModal from "../Editor/BotDesigner/AddImageModal/AddImageModal";
-import AddLinkModal from "../Editor/BotDesigner/AddLinkModal/AddLinkModal";
-import GenerateBotDialog from "../../../Dialogs/GenerateBot/GenerateBot";
-import BotDesigner from "./BotDesigner/BotDesigner";
-import TriggerDialog from "../../../Dialogs/Trigger/Trigger";
-import VariableDialog from "../../../Dialogs/Variable/Variable";
-import SubstitutionDialog from "../../../Dialogs/Substitution/Substitution";
-import AlternativesDialog from "../../../Dialogs/Alternatives/Alternatives";
-import TopicDialog from "../../../Dialogs/Topic/Topic";
-import useConfirm from "../../../hooks/useConfirm";
-import { multipleOptionsRegex } from "../../../utils/index";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const EditorMaxWidth = 750;
-const useStyles = makeStyles()((theme, {
-  isFormattingOptionsOpen
-}) => ({
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%"
-  },
-  editorToolbar: {
-    color: theme.palette.text.secondary,
-    backgroundColor: theme.palette.background.paper,
-    width: "100%",
-    maxWidth: EditorMaxWidth,
-    margin: "auto",
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2)
-  },
-  editorText: {
-    flexGrow: 1,
-    overflow: "auto",
-    width: "100%",
-    maxWidth: EditorMaxWidth,
-    margin: "auto",
-    backgroundColor: theme.palette.background.paper
-  },
-  popUpToolbar: {
-    zIndex: "5",
-    color: theme.palette.text.secondary
-  },
-  characterDropdown: {
-    margin: theme.spacing(1)
-  },
-  formattingOptionsButton: {
-    backgroundColor: isFormattingOptionsOpen ? theme.palette.action.selected : null
-  },
-  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)"
-    }
-  }
-}));
-function Editor({
-  t = text => text,
-  bot,
-  botJSON,
-  learnLangCharacters,
-  handleBotJSONChange,
-  hidden,
-  handleUploadBotExerciseImage,
-  makeChatGptApiRequest,
-  handleUpdateBot,
-  generateRiveFile,
-  siteLanguage,
-  learnLang,
-  topicPhrases,
-  phraseLists,
-  updateRivescriptJSON,
-  courseId,
-  sectionId,
-  topicId,
-  initialTopicGoal,
-  verificationStatus
-}) {
-  const [formattingOptionsAnchorEl, setFormattingOptionsAnchorEl] = useState(null);
-  const isFormattingOptionsOpen = Boolean(formattingOptionsAnchorEl);
-  const [currentInput, setCurrentInput] = useState(null);
-  const [imageModalOpen, setImageModalOpen] = useState(false);
-  const [linkModalOpen, setLinkModalOpen] = useState(false);
-  const [confirm] = useConfirm(t);
-  const editorScrollRef = /*#__PURE__*/createRef();
-  const {
-    classes
-  } = useStyles({
-    isFormattingOptionsOpen
-  });
-  const handleToggleFormattingOptions = event => {
-    setFormattingOptionsAnchorEl(formattingOptionsAnchorEl ? null : event.currentTarget);
-  };
-  const [isDisabled, setIsDisabled] = useState(true);
-  const [isButtonClicked, setIsButtonClicked] = useState(false);
-  const handleOnBlur = () => {
-    if (!isButtonClicked) {
-      setIsDisabled(true);
-    }
-  };
-  const handleSelectCurrentInput = event => {
-    setIsDisabled(false);
-    setIsButtonClicked(false);
-    const target = event.target.tagName === "DIV" ? event.target.querySelector("textarea") : event.target;
-    setCurrentInput(target);
-  };
-  const wrapTextSelection = (start, end, currentText, selectionStart, selectionEnd) => {
-    let newText = "";
-    if (selectionStart !== selectionEnd) {
-      const selectedText = currentText.slice(selectionStart, selectionEnd);
-      newText = [currentText.slice(0, selectionStart), `${start}${selectedText}${end}`, currentText.slice(selectionEnd)].join("");
-    } else {
-      newText = [currentText.slice(0, selectionStart), `${start}${t("")}${end}`, currentText.slice(selectionStart)].join("");
-    }
-    return newText;
-  };
-  const toggleAround = (start, end) => {
-    if (currentInput && currentInput.name) {
-      const {
-        name,
-        selectionStart,
-        selectionEnd,
-        dataset
-      } = currentInput;
-      const {
-        type,
-        optionIndex
-      } = dataset;
-      const newRivescriptJSON = botJSON;
-      if (["var", "sub", "array"].includes(type)) {
-        const currentText = newRivescriptJSON.begin[type][name];
-        if (multipleOptionsRegex.test(currentText)) {
-          // Multiple Options Variable
-          const options = currentText.match(multipleOptionsRegex)[1].split("|");
-          let currentOptionText = options[optionIndex];
-          const newText = wrapTextSelection(start, end, currentOptionText, selectionStart, selectionEnd);
-          options[optionIndex] = newText;
-          newRivescriptJSON.begin[type][name] = `(${options.join("|")})`;
-          handleBotJSONChange(newRivescriptJSON);
-        } else {
-          const newText = wrapTextSelection(start, end, currentText, selectionStart, selectionEnd);
-          newRivescriptJSON.begin[type][name] = newText;
-          handleBotJSONChange(newRivescriptJSON);
-        }
-      } else if (type === "trigger") {
-        const {
-          topicName,
-          triggerIndex
-        } = dataset;
-        const currentText = newRivescriptJSON.topics[topicName][triggerIndex].trigger;
-        const newText = wrapTextSelection(start, end, currentText, selectionStart, selectionEnd);
-        newRivescriptJSON.topics[topicName][triggerIndex].trigger = newText;
-        handleBotJSONChange(newRivescriptJSON);
-      } else if (type === "reply") {
-        const {
-          topicName,
-          triggerIndex,
-          replyIndex
-        } = dataset;
-        const currentText = newRivescriptJSON.topics[topicName][triggerIndex].reply[replyIndex];
-        const newText = wrapTextSelection(start, end, currentText, selectionStart, selectionEnd);
-        newRivescriptJSON.topics[topicName][triggerIndex].reply[replyIndex] = newText;
-        handleBotJSONChange(newRivescriptJSON);
-      }
-      currentInput.focus();
-    }
-  };
-  const handleOpenLinkModal = () => {
-    setLinkModalOpen(true);
-  };
-  const handleCloseLinkModal = () => {
-    setLinkModalOpen(false);
-    setIsDisabled(true);
-  };
-  const handleCloseImageModal = () => {
-    setImageModalOpen(false);
-    setIsDisabled(true);
-  };
-  const handleAddImage = ({
-    name,
-    value
-  }) => {
-    setImageModalOpen(false);
-    try {
-      toggleAround(`![${name}`, `](${value})`);
-    } catch (error) {
-      console.error("error", error);
-    }
-  };
-  const handleAddLink = ({
-    name,
-    value
-  }) => {
-    handleCloseLinkModal();
-    try {
-      toggleAround(`[${name}`, `](${value})`);
-    } catch (error) {
-      console.error("error", error);
-    }
-  };
-  const bold = () => {
-    toggleAround("**", "**");
-    handleToggleFormattingOptions();
-  };
-  const italicize = () => {
-    toggleAround("*", "*");
-    handleToggleFormattingOptions();
-  };
-
-  // const insertTopic = () => {
-  //   toggleAround('> topic topic_name\n', '\n< topic');
-  // }
-
-  // const insertTopicTrigger = () => {
-  //   toggleAround('{topic=', '}');
-  // }
-
-  //const insertTopicTriggerAndTopic = () => {
-  //topicTriggerAndTopic('{topic=', t('insert_text_here'), '} \n', '> topic topic_name \n', '+ \n', '- \n', '<topic')
-  // }
-
-  const specialCharacter = e => {
-    const character = e.target.value;
-    toggleAround("", character);
-  };
-
-  // const handleTopicTrigger = (e) => {
-  //   const character = e.target.value;
-  //   insertTopicTrigger();
-  //   if (character === 'Trigger & Topic') {
-  //     insertTopicTriggerAndTopic();
-  //   }
-  // }
-
-  // const icon = <LinkTopicIcon /
-
-  const [isVariableModalOpen, setIsVariableOpen] = useState(false);
-  const handleCloseVariableModal = () => setIsVariableOpen(false);
-  const [isSubstitutionModalOpen, setIsSubstitutionOpen] = useState(false);
-  const handleCloseSubstitutionModal = () => setIsSubstitutionOpen(false);
-  const [isAlternativesModalOpen, setIsAlternativesOpen] = useState(false);
-  const handleCloseAlternativesModal = () => setIsAlternativesOpen(false);
-  const [isTriggerModalOpen, setIsTriggerOpen] = useState(false);
-  const handleOpenTriggerModal = () => setIsTriggerOpen(true);
-  const handleCloseTriggerModal = () => setIsTriggerOpen(false);
-  const [isTopicModalOpen, setIsTopicOpen] = useState(false);
-  const handleCloseTopicModal = () => setIsTopicOpen(false);
-  const [topicName, setTopicName] = useState("random");
-  const handleTriggerSubmit = ({
-    topic,
-    userMessage,
-    replies
-  }) => {
-    let value = [""];
-    for (var i = 0; i < replies.length; i++) {
-      value[i] = JSON.parse(JSON.stringify(replies[i].text));
-    }
-    const trigger = {
-      trigger: userMessage.toLowerCase(),
-      reply: value,
-      condition: [],
-      previous: null,
-      redirect: null
-    };
-    handleAddTrigger(topic, trigger);
-    handleCloseTriggerModal();
-    setTopicName("random");
-  };
-  const handleVariableSubmit = ({
-    name,
-    value
-  }) => {
-    handleAddVariable({
-      name: name.toLowerCase(),
-      value
-    });
-    handleCloseVariableModal();
-  };
-  const handleTopicSubmit = ({
-    name
-  }) => {
-    handleAddTopic({
-      name
-    });
-    handleCloseTopicModal();
-    setTopicName(name);
-    handleOpenTriggerModal();
-  };
-  const handleSubstitutionSubmit = ({
-    name,
-    value
-  }) => {
-    handleAddSubstitution({
-      name,
-      value
-    });
-    handleCloseSubstitutionModal();
-  };
-  const handleAlternativesSubmit = ({
-    name,
-    value
-  }) => {
-    handleAddAlternatives({
-      name: name.toLowerCase(),
-      value
-    });
-    handleCloseAlternativesModal();
-  };
-  const handleUpdateAllVariables = varList => {
-    const newRivescriptJSON = botJSON;
-    newRivescriptJSON.begin.var = varList;
-    handleBotJSONChange(newRivescriptJSON);
-  };
-  const handleAddVariable = async ({
-    name,
-    value
-  }) => {
-    if (botJSON.begin.var[name]) {
-      const confirmation = await confirm(`'${name}' ${t("is_already_created_variable_overwrite")}`);
-      if (confirmation !== true) {
-        return;
-      }
-    }
-    const newRivescriptJSON = botJSON;
-    newRivescriptJSON.begin.var[name] = value;
-    handleBotJSONChange(newRivescriptJSON);
-  };
-  const handleUpdateVariable = ({
-    target: {
-      name,
-      value
-    }
-  }) => {
-    const newRivescriptJSON = botJSON;
-    newRivescriptJSON.begin.var[name] = value;
-    handleBotJSONChange(newRivescriptJSON);
-  };
-  const handleAddSubstitution = async ({
-    name,
-    value
-  }) => {
-    if (botJSON.begin.sub[name]) {
-      const confirmation = await confirm(`'${name}' ${t("is_already_created_substitution_overwrite")}`);
-      if (confirmation !== true) {
-        return;
-      }
-    }
-    const newRivescriptJSON = botJSON;
-    newRivescriptJSON.begin.sub[name] = value;
-    handleBotJSONChange(newRivescriptJSON);
-  };
-  const handleAddAlternatives = async ({
-    name,
-    value
-  }) => {
-    if (botJSON.begin.array[name]) {
-      const confirmation = await confirm(`'${name}' ${t("is_already_created_alternative_overwrite")}`);
-      if (confirmation !== true) {
-        return;
-      }
-    }
-    const newRivescriptJSON = botJSON;
-    newRivescriptJSON.begin.array[name] = value.split(",");
-    handleBotJSONChange(newRivescriptJSON);
-  };
-  const handleUpdateAlternatives = ({
-    target: {
-      name,
-      value
-    }
-  }) => {
-    const newRivescriptJSON = botJSON;
-    newRivescriptJSON.begin.array[name] = value.split(",");
-    handleBotJSONChange(newRivescriptJSON);
-  };
-  const handleAddTopic = async ({
-    name
-  }) => {
-    if (botJSON.topics[name]) {
-      const confirmation = await confirm(`'${name}' ${t("is_already_created_topic_overwrite")}`);
-      if (confirmation !== true) {
-        return;
-      }
-    }
-    const newRivescriptJSON = botJSON;
-    newRivescriptJSON.topics[name] = [];
-    handleBotJSONChange(newRivescriptJSON);
-  };
-  const handleAddTrigger = (topicName, trigger) => {
-    const newRivescriptJSON = botJSON;
-    newRivescriptJSON.topics[topicName] = [...newRivescriptJSON.topics[topicName], trigger];
-    handleBotJSONChange(newRivescriptJSON);
-  };
-  const [isGenerateBotDialogOpen, setIsGenerateBotDialogOpen] = useState(false);
-  const handleOpenGenerateBot = async () => {
-    if (bot && bot.riveFile) {
-      const confirmed = await confirm(t("generate_bot"), t("generate_bot_existing_script_confirmation"));
-      if (confirmed) {
-        setIsGenerateBotDialogOpen(true);
-      }
-    } else {
-      setIsGenerateBotDialogOpen(true);
-    }
-  };
-  const sidebar = /*#__PURE__*/_jsxs("div", {
-    className: classes.root,
-    id: "editorSidebar",
-    children: [/*#__PURE__*/_jsx(Popper, {
-      open: isFormattingOptionsOpen,
-      onClose: handleToggleFormattingOptions,
-      anchorEl: formattingOptionsAnchorEl,
-      placement: "left-start",
-      style: {
-        zIndex: 1400
-      },
-      disablePortal: true,
-      children: /*#__PURE__*/_jsx(Paper, {
-        children: /*#__PURE__*/_jsx(Toolbar, {
-          className: classes.popUpToolbar,
-          children: /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              display: "flex",
-              width: "100%"
-            },
-            children: [/*#__PURE__*/_jsx(Tooltip, {
-              title: t("insert_bold"),
-              children: /*#__PURE__*/_jsx(IconButton, {
-                color: "inherit",
-                "aria-label": t("insert_bold"),
-                onClick: bold,
-                size: "large",
-                children: /*#__PURE__*/_jsx(FormatBoldIcon, {})
-              })
-            }), /*#__PURE__*/_jsx(Tooltip, {
-              title: t("insert_italic"),
-              children: /*#__PURE__*/_jsx(IconButton, {
-                color: "inherit",
-                "aria-label": t("insert_italic"),
-                onClick: italicize,
-                size: "large",
-                children: /*#__PURE__*/_jsx(FormatItalicIcon, {})
-              })
-            })]
-          })
-        })
-      })
-    }), /*#__PURE__*/_jsx(Toolbar, {
-      className: classes.editorToolbar,
-      children: /*#__PURE__*/_jsxs(Box, {
-        style: {
-          overflowX: "auto",
-          overflowY: "hidden"
-        },
-        sx: {
-          display: "flex",
-          width: "100%"
-        },
-        children: [/*#__PURE__*/_jsx(Tooltip, {
-          title: isDisabled ? t("Please select a textfield") : t("formatting_options"),
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(IconButton, {
-              color: "inherit",
-              "aria-label": t("formatting_options"),
-              onClick: handleToggleFormattingOptions,
-              className: classes.formattingOptionsButton,
-              size: "large",
-              disabled: isDisabled,
-              onMouseDown: () => setIsButtonClicked(true),
-              children: /*#__PURE__*/_jsx(TextFormatIcon, {})
-            })
-          })
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: isDisabled ? t("Please select a textfield") : t("insert_link"),
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(IconButton, {
-              color: "inherit",
-              "aria-label": t("insert_link"),
-              onClick: handleOpenLinkModal,
-              size: "large",
-              disabled: isDisabled,
-              onMouseDown: () => setIsButtonClicked(true),
-              children: /*#__PURE__*/_jsx(LinkIcon, {})
-            })
-          })
-        }), /*#__PURE__*/_jsx("div", {
-          className: classes.characterDropdown,
-          children: /*#__PURE__*/_jsx(Adornment, {
-            t: t,
-            value: "",
-            emoji: true,
-            onChange: specialCharacter,
-            adornmentPosition: "",
-            iconButtonEdge: "",
-            isDisabled: isDisabled,
-            setIsButtonClicked: setIsButtonClicked,
-            setIsDisabled: setIsDisabled
-          })
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            flexGrow: 1
-          }
-        }), courseId && sectionId && topicId && bot.selectedTemplate && (`${bot.selectedTemplate}` === `nualang.open-ended.0.0.1` || `${bot.selectedTemplate}` === `nualang.quiz.0.0.1`) ? /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center"
-            },
-            children: /*#__PURE__*/_jsx(Button, {
-              size: "small",
-              sx: {
-                marginRight: 1
-              },
-              onClick: handleOpenGenerateBot,
-              color: "secondary",
-              variant: "contained",
-              startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
-              children: t("generate_bot")
-            })
-          }), /*#__PURE__*/_jsx(GenerateBotDialog, {
-            t: t,
-            isGenerateBotDialogOpen: isGenerateBotDialogOpen,
-            setIsGenerateBotDialogOpen: setIsGenerateBotDialogOpen,
-            makeChatGptApiRequest: makeChatGptApiRequest,
-            handleUpdateBot: handleUpdateBot,
-            generateRiveFile: generateRiveFile,
-            learnLang: learnLang,
-            bot: bot,
-            siteLanguage: siteLanguage,
-            topicPhrases: topicPhrases,
-            phraseLists: phraseLists,
-            updateRivescriptJSON: updateRivescriptJSON,
-            initialTopicGoal: initialTopicGoal
-          })]
-        }) : null]
-      })
-    }), /*#__PURE__*/_jsxs("div", {
-      ref: editorScrollRef,
-      className: classes.editorText,
-      children: [/*#__PURE__*/_jsx(BotDesigner, {
-        t: t,
-        botName: bot.name,
-        handleUpdateAllVariables: handleUpdateAllVariables,
-        rivescriptJSON: botJSON,
-        learnLangCharacters: learnLangCharacters,
-        handleSelectCurrentInput: handleSelectCurrentInput,
-        handleOnBlur: handleOnBlur,
-        handleUpdateAlternatives: handleUpdateAlternatives,
-        handleUploadBotExerciseImage: handleUploadBotExerciseImage,
-        botId: bot.botId,
-        handleUpdateVariable: handleUpdateVariable
-      }), /*#__PURE__*/_jsx(TriggerDialog, {
-        t: t,
-        open: isTriggerModalOpen,
-        onSubmit: handleTriggerSubmit,
-        handleClose: handleCloseTriggerModal,
-        botJSON: botJSON,
-        initialTopic: topicName
-      }), /*#__PURE__*/_jsx(VariableDialog, {
-        t: t,
-        open: isVariableModalOpen,
-        onSubmit: handleVariableSubmit,
-        handleClose: handleCloseVariableModal
-      }), /*#__PURE__*/_jsx(SubstitutionDialog, {
-        t: t,
-        open: isSubstitutionModalOpen,
-        onSubmit: handleSubstitutionSubmit,
-        handleClose: handleCloseSubstitutionModal
-      }), /*#__PURE__*/_jsx(AlternativesDialog, {
-        t: t,
-        open: isAlternativesModalOpen,
-        onSubmit: handleAlternativesSubmit,
-        handleClose: handleCloseAlternativesModal
-      }), /*#__PURE__*/_jsx(TopicDialog, {
-        t: t,
-        open: isTopicModalOpen,
-        onSubmit: handleTopicSubmit,
-        handleClose: handleCloseTopicModal
-      }), /*#__PURE__*/_jsx(AddImageModal, {
-        classes: {},
-        t: t,
-        open: imageModalOpen,
-        onClose: handleCloseImageModal,
-        botId: bot.botId,
-        handleUploadBotExerciseImage: handleUploadBotExerciseImage,
-        handleAddImage: handleAddImage,
-        verificationStatus: verificationStatus
-      }), /*#__PURE__*/_jsx(AddLinkModal, {
-        classes: {},
-        t: t,
-        open: linkModalOpen,
-        onClose: handleCloseLinkModal,
-        handleAddLink: handleAddLink,
-        verificationStatus: verificationStatus
-      })]
-    })]
-  });
-  const hiddenUp = useMediaQuery(theme => theme.breakpoints.up("md"));
-  const hiddenDown = useMediaQuery(theme => theme.breakpoints.down("md"));
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [hiddenUp ? null : /*#__PURE__*/_jsx(Box, {
-      className: hidden ? classes.paneFull : classes.pane,
-      children: sidebar
-    }), hiddenDown ? null : /*#__PURE__*/_jsx(Box, {
-      className: hidden ? classes.paneFull : classes.pane,
-      children: sidebar
-    })]
-  });
-}
-export default Editor;

package/dist/Editors/Bot/Editor/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Editor",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Editor.js"
-}