@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Dialogs/CreatePhrase/CreatePhrase.js

@@ -1,733 +0,0 @@
-import { useState, useEffect, useRef, Fragment } from "react";
-import { makeStyles } from "tss-react/mui";
-import DialogContentText from "@mui/material/DialogContentText";
-import Grid from "@mui/material/Grid";
-import { Box } from "@mui/material";
-import Tooltip from "@mui/material/Tooltip";
-import IconButton from "@mui/material/IconButton";
-import CloseIcon from "@mui/icons-material/Close";
-import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
-import ImageSelector from "../../Forms/ImageSelector/ImageSelector";
-import CheckIcon from "@mui/icons-material/Check";
-import WarningIcon from "@mui/icons-material/Warning";
-import CircularProgress from "@mui/material/CircularProgress";
-import HelpIcon from "@mui/icons-material/Help";
-import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
-import { convertNumberToText } from "../../utils/languageHelpers";
-import { removeAllSymbols, localeCompare } from "../../utils/index";
-import LinearProgress from "@mui/material/LinearProgress";
-// components
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
-import { capitalize } from "../../utils/index";
-import InputHelper from "../../Forms/InputHelper/InputHelper";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  alternativeVersionItem: {
-    marginBottom: theme.spacing(2)
-  },
-  alternativeVersionButton: {
-    textTransform: "initial",
-    marginLeft: theme.spacing(2),
-    color: theme.palette.text.secondary
-  },
-  translationItem: {
-    marginBottom: theme.spacing(2)
-  },
-  tooltip: {
-    fontSize: theme.typography.fontSize,
-    fontWeight: "bold"
-  }
-}));
-function CreatePhrase({
-  t = text => text,
-  open,
-  handleClose,
-  handleTranslate,
-  learnLang = "",
-  forLang = "",
-  onSubmit,
-  update = false,
-  image = "",
-  forLangCharacters,
-  learnLangCharacters,
-  fileSizeLimit,
-  siteLanguage,
-  validatePhraseRecognition,
-  verificationStatus,
-  makeChatGptApiRequest,
-  difficulty,
-  ...otherProps
-}) {
-  const translationInputRef = useRef();
-  const {
-    classes
-  } = useStyles();
-  const initialSelectedImagestate = {
-    image: image,
-    imageSelectionMethod: "default_image"
-  };
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [selectedImage, setSelectedImage] = useState(initialSelectedImagestate);
-  const [phrase, setPhrase] = useState(otherProps.phrase || "");
-  const [alternativeVersion, setAlternativeVersion] = useState("");
-  const [alternativeVersions, setAlternativeVersions] = useState(otherProps.alternativeVersions || []);
-  const [translation, setTranslation] = useState("");
-  const [englishTranslation, setEnglishTranslation] = useState("");
-  const [autoSuggestedImages, setAutoSuggestedImages] = useState([]);
-  const [translationList, setTranslationList] = useState(otherProps.translations || []);
-  const [definition, setDefinition] = useState("");
-  const [definitionList, setDefinitionList] = useState(otherProps.definitions || []);
-  const [autoTranslatedText, setAutoTranslatedText] = useState(false);
-  const [autoGeneratedDefinitions, setAutoGeneratedDefinitions] = useState(false);
-  const [checkingRecogniton, setCheckingRecogniton] = useState(false);
-  const [recognised, setRecognised] = useState(false);
-  const [notRecognised, setNotRecognised] = useState(false);
-  const [recognisedPhrase, setRecognisedPhrase] = useState("");
-
-  // Keep definitionList in sync when editing an existing phrase in update mode
-  // (e.g. switching between different phrases while dialog stays mounted)
-  useEffect(() => {
-    setDefinitionList(otherProps.definitions || []);
-  }, [otherProps.definitions, otherProps.definition, open]);
-  const handleEditDefinition = (event, index) => {
-    const {
-      target: {
-        value
-      }
-    } = event;
-    const tempArray = definitionList.slice();
-    tempArray[index] = value;
-    setDefinitionList([...tempArray]);
-  };
-  useEffect(() => {
-    if (open) {
-      setPhrase(otherProps.phrase || "");
-      setAlternativeVersions(otherProps.alternativeVersions || []);
-      setTranslationList(otherProps.translations || []);
-      setDefinitionList(otherProps.definitions || []);
-      setSelectedImage({
-        image: image || "",
-        imageSelectionMethod: "default_image"
-      });
-    }
-  }, [open, otherProps.phrase, otherProps.alternativeVersions, otherProps.translations, otherProps.definitions, image]);
-  const handleAddDefinition = () => {
-    setDefinitionList(prev => {
-      const trimmed = definition ? definition.trim() : "";
-      if (trimmed && !prev.includes(trimmed)) return [...prev, trimmed];
-      return prev;
-    });
-    setDefinition("");
-  };
-  const handleRemoveDefinition = index => {
-    setDefinitionList(prev => prev.filter((_, i) => i !== index));
-  };
-  const checkIsPronunciationCorrect = (finalTranscript, alternativeTranscripts, alternativeVersions) => {
-    let stringMatch;
-    if (alternativeTranscripts && alternativeTranscripts.length > 0) {
-      for (let index = 0; index < alternativeTranscripts.length; index++) {
-        const alternativeVersion = alternativeTranscripts[index].transcript;
-        const words = alternativeVersion.split(" ");
-        const isSingleWord = words.length === 1;
-        stringMatch = localeCompare(removeAllSymbols(finalTranscript), removeAllSymbols(alternativeVersion));
-        if (stringMatch === 0) {
-          return true;
-        }
-        for (let index = 0; index < alternativeVersions.length; index++) {
-          stringMatch = localeCompare(removeAllSymbols(alternativeVersions[index]), removeAllSymbols(alternativeVersion));
-          if (stringMatch === 0) {
-            return true;
-          }
-        }
-        if (isSingleWord && /^\d+$/.test(alternativeVersion)) {
-          const numberToText = convertNumberToText(alternativeVersion, learnLang);
-          stringMatch = localeCompare(removeAllSymbols(numberToText), removeAllSymbols(finalTranscript));
-          if (stringMatch === 0) {
-            return true;
-          }
-        } else if (!isSingleWord) {
-          let newStringArray = words;
-          words.map((word, index) => {
-            if (/^\d+$/.test(word)) {
-              const numberToText = convertNumberToText(word, learnLang);
-              newStringArray[index] = numberToText;
-            }
-          });
-          stringMatch = localeCompare(removeAllSymbols(newStringArray.join(" ")), removeAllSymbols(finalTranscript));
-          if (stringMatch === 0) {
-            return true;
-          }
-        }
-      }
-    }
-    return false;
-  };
-  const handleCheckRecognition = async () => {
-    setCheckingRecogniton(true);
-    const alternativeTranscriptsArray = await validatePhraseRecognition(phrase);
-    const alternativeTranscripts = alternativeTranscriptsArray && alternativeTranscriptsArray[0] || [];
-    setRecognisedPhrase(alternativeTranscripts[0]?.transcript || "");
-    const isCorrectRecognition = checkIsPronunciationCorrect(phrase.trim(), alternativeTranscripts, alternativeVersions);
-    if (isCorrectRecognition) {
-      setRecognised(true);
-    } else {
-      setNotRecognised(true);
-    }
-    setCheckingRecogniton(false);
-  };
-  let endIcon;
-  if (recognised) {
-    endIcon = /*#__PURE__*/_jsx(CheckIcon, {
-      color: "success"
-    });
-  } else if (notRecognised) {
-    endIcon = /*#__PURE__*/_jsx(WarningIcon, {
-      color: "error"
-    });
-  }
-  useEffect(() => {
-    if (image) {
-      setSelectedImage(selectedImage => {
-        if (image !== selectedImage.image) {
-          return {
-            ...selectedImage,
-            image
-          };
-        }
-        return selectedImage;
-      });
-    }
-  }, [image]);
-
-  // reset form state whenever the dialog is closed
-  useEffect(() => {
-    if (!open) {
-      resetPhraseState();
-    }
-  }, [open]);
-  const handleEditAlternative = (event, index) => {
-    const {
-      target: {
-        value
-      }
-    } = event;
-    const tempArray = alternativeVersions.slice();
-    tempArray[index] = value;
-    setAlternativeVersions([...tempArray]);
-  };
-  const handleAddAlternative = alternative => {
-    const alternativeAns = alternative || alternativeVersion.trim();
-    setAlternativeVersions(prevAlternativeVersions => {
-      return [...prevAlternativeVersions, alternativeAns];
-    });
-    setAlternativeVersion("");
-  };
-  const handleRemoveAlternative = index => {
-    setAlternativeVersions(prevAlternativeVersions => prevAlternativeVersions.filter((t, i) => i !== index));
-  };
-  function validateResponse(response) {
-    if (!Array.isArray(response)) {
-      return false;
-    }
-    for (const item of response) {
-      if (item === null || Array.isArray(item)) {
-        return false;
-      }
-      if (typeof item !== "string" || item.trim() === "") {
-        return false;
-      }
-    }
-    return true;
-  }
-  const generateTranslations = async () => {
-    try {
-      setIsSubmitting(true);
-      let chatGptResponse = await makeChatGptApiRequest({
-        model: "gpt-4o",
-        promptKey: "generateTranslations",
-        promptVariables: {
-          learnLang,
-          forLang,
-          phrase
-        }
-      });
-      const translations = chatGptResponse.translations;
-      if (!validateResponse(translations)) {
-        throw new Error("Invalid AI response");
-      }
-      setTranslationList(prevTranslationList => {
-        const newTranslations = translations.filter(text => !prevTranslationList.includes(text));
-        return [...prevTranslationList, ...newTranslations];
-      });
-      setAutoTranslatedText(translations[0]);
-    } catch (error) {
-      console.error("Error fetching translations from OpenAI:", error.message);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-  const generateDefinitions = async () => {
-    try {
-      setIsSubmitting(true);
-      let chatGptResponse = await makeChatGptApiRequest({
-        model: "gpt-4o",
-        promptKey: "generateDefinitions",
-        promptVariables: {
-          learnLang,
-          forLang,
-          siteLanguage,
-          difficulty,
-          phrases: [{
-            phrase,
-            translations: translationList
-          }],
-          generateDefinitions: true
-        }
-      });
-      const definitions = chatGptResponse?.result?.[0]?.definitions;
-      if (!validateResponse(definitions)) {
-        throw new Error("Invalid AI response");
-      }
-      setAutoGeneratedDefinitions(definitions[0]);
-      setDefinitionList(prevDefinitionList => {
-        const newDefinitions = definitions.filter(text => !prevDefinitionList.includes(text));
-        return [...prevDefinitionList, ...newDefinitions];
-      });
-    } catch (error) {
-      console.error("Error fetching definitions from OpenAI:", error.message);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-  const handleEditTranslation = (event, index) => {
-    const {
-      target: {
-        value
-      }
-    } = event;
-    const tempArray = translationList.slice();
-    tempArray[index] = value;
-    setTranslationList([...tempArray]);
-  };
-  const handleAddTranslation = () => {
-    setTranslationList(prevTranslationList => {
-      const trimmed = translation ? translation.trim() : "";
-      if (trimmed && !prevTranslationList.includes(trimmed)) {
-        return [...prevTranslationList, trimmed];
-      }
-      return prevTranslationList;
-    });
-    setTranslation("");
-  };
-  const handleRemoveTranslation = index => {
-    setTranslationList(prevTranslationList => prevTranslationList.filter((_, i) => i !== index));
-  };
-  const resetPhraseState = () => {
-    setPhrase("");
-    setAlternativeVersion("");
-    setAlternativeVersions([]);
-    setTranslation("");
-    setTranslationList([]);
-    setDefinition("");
-    setDefinitionList([]);
-    setSelectedImage(initialSelectedImagestate);
-    setAutoTranslatedText("");
-    setAutoGeneratedDefinitions("");
-  };
-  const removePhraseImage = () => {
-    setSelectedImage({
-      image: "",
-      imageSelectionMethod: "default_image"
-    });
-  };
-  const handleSubmit = async () => {
-    const finalTranslation = translation ? translation.trim() : "";
-    let finalTranslationList = translationList;
-    let finalAlternativeVersionsList = alternativeVersions.filter(str => str.replace(/\s/g, "").length);
-
-    // If a user has entered the translation but hasn't clicked the button, add it to the list
-    if (finalTranslation !== "" && !finalTranslationList.includes(finalTranslation)) {
-      finalTranslationList = [...finalTranslationList, finalTranslation];
-    }
-
-    // Same idea for the alternative versions
-    if (alternativeVersion !== "" && !finalAlternativeVersionsList.includes(alternativeVersion)) {
-      finalAlternativeVersionsList = [...finalAlternativeVersionsList, alternativeVersion];
-    }
-
-    // Definitions: add pending input if not submitted via Enter
-    let finalDefinitionList = definitionList;
-    const finalDefinitionInput = definition ? definition.trim() : "";
-    if (finalDefinitionInput !== "" && !finalDefinitionList.includes(finalDefinitionInput)) {
-      finalDefinitionList = [...finalDefinitionList, finalDefinitionInput];
-    }
-    const response = await onSubmit({
-      phrase: phrase.trim(),
-      definitions: finalDefinitionList,
-      translations: finalTranslationList,
-      alternativeVersions: finalAlternativeVersionsList,
-      image: selectedImage.image,
-      selectionMethod: selectedImage.imageSelectionMethod
-    });
-    if (!update && response) {
-      resetPhraseState();
-    }
-    setAutoSuggestedImages([]);
-    setIsSubmitting(false);
-  };
-  const handleImageSelection = event => {
-    const {
-      name,
-      value
-    } = event.target;
-    setSelectedImage(prevSelectedImage => ({
-      ...prevSelectedImage,
-      [name]: value
-    }));
-  };
-  const phraseEnglishTranslation = async () => {
-    const englishTransation = await handleTranslate(phrase, learnLang, "english");
-    setEnglishTranslation(englishTransation);
-  };
-  useEffect(() => {
-    if (open && phrase) {
-      phraseEnglishTranslation();
-    }
-  }, [phrase, open, translationList]);
-  const pickPhraseImage = () => {
-    const apiUrl = import.meta.env.REACT_APP_PIXABAY_HANDLER_URL || "https://api.dev-1.nualang.com/services/pixabay";
-    const params = {
-      q: englishTranslation.replace(/[^\w\s]/gi, ""),
-      category: "",
-      image_type: "photo",
-      pretty: true,
-      safesearch: true,
-      min_width: 1280,
-      per_page: 50
-    };
-    const encodedParams = encodeURIComponent(JSON.stringify(params));
-    fetch(`${apiUrl}/?q=${encodedParams}`).then(res => res.json()).then(data => {
-      if (data.hits.length > 0) {
-        const topImages = data.hits.slice(0, 3);
-        setAutoSuggestedImages(topImages);
-      }
-    }).catch(err => {
-      console.error("Error fetching images:", err);
-    });
-  };
-  useEffect(() => {
-    if (open && phrase && englishTranslation && translationList.length > 0) {
-      pickPhraseImage();
-    }
-  }, [phrase, englishTranslation, open, translationList]);
-  const title = update ? t("update_phrase") : t("add_phrase");
-  const desc = update ? t("update_phrase_desc") : t("add_phrase_desc", {
-    language: ["en", "en-US", "ga", "de"].includes(siteLanguage) ? capitalize(t(learnLang.toLowerCase())) : t(learnLang.toLowerCase()).toLowerCase()
-  });
-  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    handleSubmit: () => {
-      setIsSubmitting(true);
-      handleSubmit();
-    },
-    submitText: title,
-    dialogTitle: title,
-    isSubmitDisabled: isSubmitting,
-    children: [/*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      sx: {
-        width: "100%"
-      },
-      children: [/*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        sx: {
-          textAlign: "center",
-          mx: 2,
-          ...(!isSubmitting && {
-            display: "none"
-          })
-        },
-        children: /*#__PURE__*/_jsx(NualaCreating, {})
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        sx: {
-          mt: 2,
-          ...(!isSubmitting && {
-            display: "none"
-          })
-        },
-        children: /*#__PURE__*/_jsx(LinearProgress, {})
-      })]
-    }), !isSubmitting && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(DialogContentText, {
-        children: desc
-      }), /*#__PURE__*/_jsx(InputHelper, {
-        t: t,
-        value: phrase,
-        onChange: e => {
-          setPhrase(e.target.value);
-          if (notRecognised || recognised) {
-            setNotRecognised(false);
-            setRecognised(false);
-          }
-        },
-        onKeyDown: e => {
-          if (e.key === "Enter" && translationInputRef?.current) {
-            translationInputRef.current.focus();
-          }
-        },
-        margin: "normal",
-        autoFocus: true,
-        id: "phrase",
-        name: "phrase",
-        label: t("language_phrase", {
-          language: capitalize(t(learnLang.toLowerCase()))
-        }),
-        type: "text",
-        variant: "outlined",
-        fullWidth: true,
-        characters: learnLangCharacters ? learnLangCharacters : null
-      }), phrase && phrase.trim() !== "" && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Tooltip, {
-          title: t(`add_alternative_version_explanation`),
-          classes: {
-            tooltip: classes.tooltip
-          },
-          children: /*#__PURE__*/_jsx(DefaultButton, {
-            onClick: () => handleAddAlternative(phrase),
-            disabled: !phrase,
-            size: "sm",
-            className: classes.alternativeVersionButton,
-            children: t("add_alternative_version")
-          })
-        }), learnLang !== forLang && /*#__PURE__*/_jsx(DefaultButton, {
-          onClick: generateTranslations,
-          disabled: !phrase || Array.isArray(translationList) && translationList.includes(autoTranslatedText),
-          size: "sm",
-          className: classes.alternativeVersionButton,
-          startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
-          children: t("auto_generate_phrase_translation")
-        }), learnLang !== forLang && /*#__PURE__*/_jsx(DefaultButton, {
-          onClick: generateDefinitions,
-          disabled: !phrase || Array.isArray(definitionList) && definitionList.includes(autoGeneratedDefinitions),
-          size: "sm",
-          className: classes.alternativeVersionButton,
-          startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
-          children: t("auto_generate_definitions")
-        }), learnLang !== forLang && (import.meta.env.REACT_APP_STAGE === "dev" || window.location.host === "localhost:9009") && /*#__PURE__*/_jsx(Box, {
-          sx: {
-            display: "inline-flex",
-            alignItems: "center"
-          },
-          children: /*#__PURE__*/_jsx(Box, {
-            sx: {
-              position: "relative"
-            },
-            children: notRecognised ? /*#__PURE__*/_jsx(Tooltip, {
-              title: recognisedPhrase !== "" ? t("speech_recognition_error_info", {
-                phrase: `"${phrase}"`,
-                recognisedPhrase: `"${recognisedPhrase}"`
-              }) : t("speech_recognition_error_info_no_phrase"),
-              classes: {
-                tooltip: classes.tooltip
-              },
-              children: /*#__PURE__*/_jsx(Box, {
-                children: /*#__PURE__*/_jsx(DefaultButton, {
-                  size: "sm",
-                  className: classes.alternativeVersionButton,
-                  startIcon: /*#__PURE__*/_jsx(WarningIcon, {
-                    color: "error"
-                  }),
-                  disabled: true,
-                  children: t("phrase_not_recognised")
-                })
-              })
-            }) : /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsxs(DefaultButton, {
-                size: "sm",
-                className: classes.alternativeVersionButton,
-                onClick: handleCheckRecognition,
-                disabled: checkingRecogniton || recognised || notRecognised,
-                startIcon: endIcon,
-                children: [recognised ? t("phrase_recognised") : null, checkingRecogniton ? t("checking_recognition") : null, !checkingRecogniton && !recognised && !notRecognised ? t("check_recognition") : null]
-              }), !checkingRecogniton && !recognised && !notRecognised ? /*#__PURE__*/_jsx(Tooltip, {
-                title: t("speech_recognition_info"),
-                classes: {
-                  tooltip: classes.tooltip
-                },
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  sx: {
-                    padding: 0
-                  },
-                  children: /*#__PURE__*/_jsx(HelpIcon, {
-                    fontSize: "small"
-                  })
-                })
-              }) : null, checkingRecogniton && /*#__PURE__*/_jsx(CircularProgress, {
-                size: 24,
-                sx: {
-                  position: "absolute",
-                  top: "50%",
-                  left: "50%",
-                  marginTop: "-12px",
-                  marginLeft: "-12px"
-                }
-              })]
-            })
-          })
-        })]
-      }), phrase && /*#__PURE__*/_jsx(Grid, {
-        container: true,
-        direction: "row",
-        sx: {
-          justifyContent: "center",
-          alignItems: "flex-end"
-        },
-        children: alternativeVersions?.map((alternativeAns, idx) => /*#__PURE__*/_jsxs(Fragment, {
-          children: [/*#__PURE__*/_jsx(Grid, {
-            className: classes.alternativeVersionItem,
-            size: 10,
-            children: /*#__PURE__*/_jsx(InputHelper, {
-              t: t,
-              name: `alternativeVersion${idx}`,
-              value: alternativeAns,
-              onChange: e => handleEditAlternative(e, idx),
-              margin: "none",
-              autoFocus: true,
-              type: "text",
-              fullWidth: true,
-              characters: learnLangCharacters ? learnLangCharacters : null
-            })
-          }), /*#__PURE__*/_jsx(Grid, {
-            className: classes.alternativeVersionItem,
-            size: 1,
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => handleRemoveAlternative(idx),
-              size: "large",
-              "aria-label": "Remove Alternative",
-              children: /*#__PURE__*/_jsx(CloseIcon, {})
-            })
-          })]
-        }, `alternative_answers_${idx}`))
-      }), learnLang !== forLang && /*#__PURE__*/_jsx(InputHelper, {
-        inputRef: translationInputRef,
-        t: t,
-        value: translation,
-        onChange: e => setTranslation(e.target.value),
-        onKeyDown: e => {
-          if (e.key === "Enter") handleAddTranslation();
-        },
-        margin: "normal",
-        id: "translation",
-        name: "translation",
-        label: t("language_translation", {
-          language: capitalize(t(forLang.toLowerCase()))
-        }),
-        helperText: translation && translation.trim() !== "" ? t("language_translation_helper_text") : "",
-        type: "text",
-        variant: "outlined",
-        fullWidth: true,
-        characters: forLangCharacters ? forLangCharacters : null
-      }), /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        direction: "row",
-        sx: {
-          justifyContent: "center",
-          alignItems: "flex-end"
-        },
-        children: [translationList?.map((translationItem, idx) => /*#__PURE__*/_jsxs(Fragment, {
-          children: [/*#__PURE__*/_jsx(Grid, {
-            className: classes.translationItem,
-            size: 10,
-            children: /*#__PURE__*/_jsx(InputHelper, {
-              t: t,
-              value: translationItem,
-              onChange: e => handleEditTranslation(e, idx),
-              margin: "none",
-              type: "text",
-              fullWidth: true,
-              characters: forLangCharacters ? forLangCharacters : null,
-              inputProps: {
-                "data-translation-index": idx
-              }
-            })
-          }), /*#__PURE__*/_jsx(Grid, {
-            className: classes.translationItem,
-            size: 1,
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => handleRemoveTranslation(idx),
-              size: "large",
-              "aria-label": "Remove Translation",
-              children: /*#__PURE__*/_jsx(CloseIcon, {})
-            })
-          })]
-        }, `translist_${idx}`)), learnLang !== forLang && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Grid, {
-            size: 12,
-            children: /*#__PURE__*/_jsx(InputHelper, {
-              t: t,
-              value: definition,
-              onChange: e => setDefinition(e.target.value),
-              onKeyDown: e => {
-                if (e.key === "Enter") handleAddDefinition();
-              },
-              margin: "normal",
-              id: "definition",
-              name: "definition",
-              label: t("phrase_definition"),
-              helperText: definition && definition.trim() !== "" ? t("phrase_definition_helper_text") : "",
-              type: "text",
-              variant: "outlined",
-              fullWidth: true,
-              characters: forLangCharacters ? forLangCharacters : null
-            })
-          }), definitionList?.map((def, idx) => /*#__PURE__*/_jsxs(Fragment, {
-            children: [/*#__PURE__*/_jsx(Grid, {
-              className: classes.translationItem,
-              size: 10,
-              children: /*#__PURE__*/_jsx(InputHelper, {
-                t: t,
-                value: def,
-                onChange: e => handleEditDefinition(e, idx),
-                margin: "none",
-                type: "text",
-                fullWidth: true,
-                characters: forLangCharacters ? forLangCharacters : null,
-                inputProps: {
-                  "data-definition-index": idx
-                }
-              })
-            }), /*#__PURE__*/_jsx(Grid, {
-              className: classes.translationItem,
-              size: 1,
-              children: /*#__PURE__*/_jsx(IconButton, {
-                onClick: () => handleRemoveDefinition(idx),
-                size: "large",
-                "aria-label": "Remove Definition",
-                children: /*#__PURE__*/_jsx(CloseIcon, {})
-              })
-            })]
-          }, `deflist_${idx}`))]
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(ImageSelector, {
-            t: t,
-            name: "image",
-            value: selectedImage.image,
-            handleChange: handleImageSelection,
-            fileSizeLimit: fileSizeLimit,
-            removeImage: removePhraseImage,
-            autoCrop: true,
-            autoSuggest: true,
-            autoSuggestedImages: autoSuggestedImages,
-            selectedImage: selectedImage,
-            verificationStatus: verificationStatus
-          })
-        })]
-      })]
-    })]
-  });
-}
-export default CreatePhrase;