@nualang/nualang-ui-components 0.1.1352 → 0.1.1353

package/dist/Dialogs/GenerateDefinitions/GenerateDefinitions.js

@@ -101,6 +101,7 @@ function GenerateDefinitions({
     }
   };
   const handleCancel = () => {
+    handleClose();
     setGeneratedDefinitions([]);
     setErrorMessage(null);
   };

package/dist/Dialogs/GeneratePhrases/GeneratePhrases.js

@@ -1,7 +1,7 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
 import { AutoFixHigh } from "@mui/icons-material";
-import { Alert, Grid, InputAdornment, LinearProgress, MenuItem, Slider, TextField, Tooltip, Typography, ListItem, ListItemText, useMediaQuery } from "@mui/material";
+import { Alert, Grid, InputAdornment, LinearProgress, MenuItem, Slider, TextField, Tooltip, Typography, ListItem, ListItemText, useMediaQuery, FormControlLabel, Switch, Box } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { Link } from "react-router";
 import InfoIcon from "@mui/icons-material/Info";
@@ -115,6 +115,7 @@ function GeneratePhrases({
   const [errorMessage, setErrorMessage] = useState(null);
   const [phraseType, setPhraseType] = useState("words");
   const [generatedPhrases, setGeneratedPhrases] = useState([]);
+  const [generateDefinitions, setGenerateDefinitions] = useState(true);
   const isPhrases = currentPhrases && currentPhrases.length > 0;
   const phrases = isPhrases ? currentPhrases.map(({
     phrase,
@@ -188,7 +189,8 @@ function GeneratePhrases({
           difficulty,
           phraseType,
           isPhrases,
-          phrases
+          phrases,
+          generateDefinitions
         }
       });
       const phrasesArray = chatGptResponse.result;
@@ -217,6 +219,9 @@ function GeneratePhrases({
   const handleCancel = () => {
     setGeneratedPhrases([]);
   };
+  useEffect(() => {
+    setGenerateDefinitions(phraseType === 'words');
+  }, [phraseType]);
   return /*#__PURE__*/_jsxs(ResponsiveDialog, {
     open: open,
     closeText: generatedPhrases.length > 0 ? t("cancel") : t("close"),
@@ -353,6 +358,31 @@ function GeneratePhrases({
             min: 4,
             max: 16
           })]
+        }), /*#__PURE__*/_jsxs(Grid, {
+          size: 12,
+          children: [/*#__PURE__*/_jsx(Typography, {
+            children: /*#__PURE__*/_jsx(Box, {
+              children: t("generate_definitions")
+            })
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            label: "",
+            control: /*#__PURE__*/_jsx(_Fragment, {
+              children: /*#__PURE__*/_jsx("span", {
+                children: /*#__PURE__*/_jsx(Switch, {
+                  checked: generateDefinitions,
+                  onChange: e => {
+                    setGenerateDefinitions(e.target.checked);
+                  },
+                  inputProps: {
+                    "aria-label": "controlled"
+                  },
+                  sx: {
+                    marginLeft: 0.5
+                  }
+                })
+              })
+            })
+          })]
         })]
       }), generatedPhrases.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Typography, {

package/dist/Dialogs/UploadPhrases/UploadPhrases.js

@@ -1,11 +1,13 @@
 import { useState, useRef, useEffect } from "react";
 import { CSVLink } from "react-csv";
-import { Box, DialogContentText, Typography, Alert, TextField, Divider } from "@mui/material";
+import { Box, DialogContentText, Typography, Alert, TextField, Divider, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
 import FileCopyIcon from "@mui/icons-material/FileCopy";
 import DownloadIcon from "@mui/icons-material/Download";
+import FrontHandIcon from '@mui/icons-material/FrontHand';
+import WavingHandIcon from '@mui/icons-material/WavingHand';
+import BadgeIcon from '@mui/icons-material/Badge';
 import PhraseList from "../../Lists/Phrases/Phrases";
-import ExampleCSVImage from "./upload-phrases-csv.png";
 import ParseScriptErrors from "../../Lists/ParseScriptErrors/ParseScriptErrors";
 import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
 import CSVUploader from "../../Misc/CSVUploader/CSVUploader";
@@ -19,7 +21,6 @@ import DialogContent from "@mui/material/DialogContent";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/material/styles";
 import Popper from "@mui/material/Popper";
-import Paper from "@mui/material/Paper";
 import Grow from "@mui/material/Grow";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import MenuItem from "@mui/material/MenuItem";
@@ -29,14 +30,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 const phrasesData = [{
   phrase: "Hello",
   translation: "hola",
+  definitions: "a greeting",
   image: "https://images.nualang.com/eyJidWNrZXQiOiJudWFsYW5nLWltYWdlcy1wcm9kIiwia2V5IjoicGhyYXNlcy9EYTNXcThzUUktMTYwMzg4Nzg3MjU2NS53ZWJwIn0="
 }, {
   phrase: "Goodbye",
   translation: "adios",
+  definitions: "a farewell",
   image: "https://images.nualang.com/eyJidWNrZXQiOiJudWFsYW5nLWltYWdlcy1wcm9kIiwia2V5IjoicGhyYXNlcy9RbXBFcWZYdHItMTYwMzg4Nzk2MjAzMC53ZWJwIn0="
 }, {
   phrase: "My name is",
   translation: "mi nombre es | me llamo",
+  definitions: "used to introduce yourself",
   image: "https://images.nualang.com/eyJidWNrZXQiOiJudWFsYW5nLWltYWdlcy1wcm9kIiwia2V5IjoicGhyYXNlcy9hREFmczhFeTEtMTYwMzg5MDM2MjAxNy53ZWJwIn0="
 }];
 const phrasesHeaders = [{
@@ -45,6 +49,9 @@ const phrasesHeaders = [{
 }, {
   label: "translations",
   key: "translation"
+}, {
+  label: "definitions",
+  key: "definitions"
 }, {
   label: "image",
   key: "image"
@@ -54,6 +61,22 @@ const PhrasesCsvLink = {
   data: phrasesData,
   filename: "phrases_template.csv"
 };
+const csvStructureExampleRows = [{
+  phrase: "hello",
+  translations: "hola",
+  definitions: "A word used to greet someone",
+  image: FrontHandIcon
+}, {
+  phrase: "goodbye",
+  translations: "adios",
+  definitions: "A word used when leaving someone",
+  image: WavingHandIcon
+}, {
+  phrase: "my name is",
+  translations: "mi nombre es | me llamo",
+  definitions: "A phrase used to tell someone your name",
+  image: BadgeIcon
+}];
 const useStyles = makeStyles()(theme => ({
   parseErrorsBox: {
     marginTop: theme.spacing()
@@ -65,10 +88,6 @@ const useStyles = makeStyles()(theme => ({
   dialog: {
     marginBottom: "15px"
   },
-  image: {
-    height: "auto",
-    width: "100%"
-  },
   csvButton: {
     textDecoration: "none"
   },
@@ -92,6 +111,7 @@ function parsePhraseWithAlternatives(phraseString) {
  * - phrase: Primary phrase with optional alternatives separated by '|'
  *   Example: "Hello|Hi|Hey"
  * - translations: Multiple translations separated by '|'
+ * - definitions: Multiple definitions separated by '|'
  * - image: Optional image URL
  */
 
@@ -135,10 +155,12 @@ function UploadPhrases({
           alternatives
         } = parsePhraseWithAlternatives(data.phrase);
         const formattedTranslations = data.translations.split("|").map(t => t.trim().replace(/^"|"$/g, "").trim());
+        const formattedDefinitions = data.definitions ? data.definitions.split("|").map(d => d.trim().replace(/^"|"$/g, "").trim()).filter(Boolean) : [];
         return {
           phrase: primary,
           alternativeVersions: alternatives,
           translations: formattedTranslations,
+          definitions: formattedDefinitions,
           image: data.image ? data.image.trim() : "",
           voices: [],
           idx: index
@@ -175,8 +197,6 @@ function UploadPhrases({
       setErrorMessage("File must be in the .csv format");
       return;
     } else if (results.errors && results.errors.length) {
-      // formats errors coming from CSVReader into common error format
-      // used for validating rows
       const formattedErrors = results.errors.reduce((acc, cur) => {
         acc.push({
           row: cur.row,
@@ -212,10 +232,51 @@ function UploadPhrases({
       children: t("upload_phrases_desc")
     }), /*#__PURE__*/_jsx(Box, {
       py: 1,
-      children: /*#__PURE__*/_jsx("img", {
-        className: classes.image,
-        src: ExampleCSVImage,
-        alt: ""
+      children: /*#__PURE__*/_jsx(TableContainer, {
+        component: Paper,
+        variant: "outlined",
+        children: /*#__PURE__*/_jsxs(Table, {
+          size: "small",
+          "aria-label": "CSV structure example",
+          children: [/*#__PURE__*/_jsx(TableHead, {
+            children: /*#__PURE__*/_jsxs(TableRow, {
+              children: [/*#__PURE__*/_jsx(TableCell, {
+                children: /*#__PURE__*/_jsx("strong", {
+                  children: t("phrase")
+                })
+              }), /*#__PURE__*/_jsx(TableCell, {
+                children: /*#__PURE__*/_jsx("strong", {
+                  children: t("translations")
+                })
+              }), /*#__PURE__*/_jsx(TableCell, {
+                children: /*#__PURE__*/_jsx("strong", {
+                  children: t("definitions")
+                })
+              }), /*#__PURE__*/_jsx(TableCell, {
+                children: /*#__PURE__*/_jsx("strong", {
+                  children: t("image")
+                })
+              })]
+            })
+          }), /*#__PURE__*/_jsx(TableBody, {
+            children: csvStructureExampleRows.map((row, index) => {
+              const ImageIcon = row.image;
+              return /*#__PURE__*/_jsxs(TableRow, {
+                children: [/*#__PURE__*/_jsx(TableCell, {
+                  children: row.phrase
+                }), /*#__PURE__*/_jsx(TableCell, {
+                  children: row.translations
+                }), /*#__PURE__*/_jsx(TableCell, {
+                  children: row.definitions
+                }), /*#__PURE__*/_jsx(TableCell, {
+                  children: /*#__PURE__*/_jsx(ImageIcon, {
+                    fontSize: "small"
+                  })
+                })]
+              }, `${row.phrase}-${index}`);
+            })
+          })]
+        })
       })
     }), /*#__PURE__*/_jsxs(Box, {
       pb: 2,
@@ -257,7 +318,7 @@ function UploadPhrases({
         id: "csvDataInput",
         name: "csvDataInput",
         label: t("paste_your_csv_data"),
-        placeholder: `phrase, translations\n"Hola", "Hello | Hi"\n"Adios", "Goodbye"`,
+        placeholder: `phrase, translations, definitions\n"Hola", "Hello | Hi", "a greeting"\n"Adios", "Goodbye", "a farewell"`,
         value: csvDataInput,
         fullWidth: true,
         multiline: true,

package/dist/Editors/Phrases/Phrases.js

@@ -315,7 +315,8 @@ function PhrasesEditor(props) {
         ...r,
         phrase: r.phrase.split("|")[0].trim() || "",
         alternativeVersions: updatedAlternativeVersions,
-        translations: (r.translations || "").split("|").map(t => t.trim()).filter(Boolean)
+        translations: (r.translations || "").split("|").map(t => t.trim()).filter(Boolean),
+        definitions: (r.definitions || "").split("|").map(d => d.trim()).filter(Boolean)
       };
     });
   };
@@ -405,7 +406,22 @@ function PhrasesEditor(props) {
         onChange: onFieldChange(row.id, "translations")
       });
     },
-    width: 30
+    width: 25
+  }, {
+    id: "definitions",
+    title: () => /*#__PURE__*/_jsx(Typography, {
+      children: t("definitions")
+    }),
+    value: (row, {
+      focus
+    }) => {
+      return /*#__PURE__*/_jsx(Input, {
+        value: row.definitions,
+        focus: focus,
+        onChange: onFieldChange(row.id, "definitions")
+      });
+    },
+    width: 25
   }, {
     id: "image",
     title: () => /*#__PURE__*/_jsx(Typography, {
@@ -475,7 +491,7 @@ function PhrasesEditor(props) {
         phrase: [row.phrase || "", ...(row.alternativeVersions || [])].filter(Boolean).join(" | ")
       }));
       const parser = new Parser({
-        fields: ["phrase", "translations", "image"],
+        fields: ["phrase", "translations", "definitions", "image"],
         defaultValue: ""
       });
       const csv = parser.parse(formattedRows);

package/dist/Lists/Phrases/Phrases.js

@@ -70,6 +70,11 @@ const useStyles = makeStyles()(theme => ({
     overflow: "hidden",
     whiteSpace: "nowrap",
     textOverflow: "ellipsis"
+  },
+  actionButton: {
+    marginTop: theme.spacing(0.5),
+    marginBottom: theme.spacing(0.5),
+    marginRight: theme.spacing()
   }
 }));
 function Phrase(props) {
@@ -144,11 +149,6 @@ function Phrase(props) {
       return;
     }
   };
-  console.log("Phrase render", {
-    phrase,
-    translations,
-    alternativeVersions
-  });
   const handleCloseMenu = () => {
     setAnchorEl(null);
   };
@@ -593,6 +593,7 @@ function PhraseList({
               color: "primary",
               onClick: () => handleDeletePhrases(),
               startIcon: isLargeScreen ? /*#__PURE__*/_jsx(DeleteIcon, {}) : null,
+              className: classes.actionButton,
               style: {
                 marginLeft: "10px"
               },
@@ -601,6 +602,7 @@ function PhraseList({
               disabled: selectedPhrases.length === 0,
               variant: "contained",
               color: "secondary",
+              className: classes.actionButton,
               "aria-label": t("generate_definitions"),
               onClick: () => setIsGenerateDefinitionsOpen(true),
               startIcon: isLargeScreen ? /*#__PURE__*/_jsx(AutoFixHighIcon, {}) : null,
@@ -705,10 +707,12 @@ function PhraseList({
             style: {
               marginLeft: "10px"
             },
+            className: classes.actionButton,
             children: isLargeScreen ? t("Remove Phrases") : /*#__PURE__*/_jsx(DeleteIcon, {})
           }), /*#__PURE__*/_jsx(Button, {
             variant: "contained",
             color: "secondary",
+            className: classes.actionButton,
             disabled: selectedPhrases.length === 0,
             "aria-label": t("generate_definitions"),
             onClick: () => setIsGenerateDefinitionsOpen(true),

package/dist/Misc/ChatBubble/ChatBubble.js

@@ -5,7 +5,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   grid: {
     backgroundColor: theme.palette.background.paper,
-    padding: 15,
     marginTop: 5,
     marginBottom: 10,
     marginRight: 5,
@@ -41,9 +40,14 @@ function ChatBubble({
   const {
     classes
   } = useStyles();
+  const showPhonetics = learnLang === "chinese" || learnLang === "japanese";
   return /*#__PURE__*/_jsx(Grid, {
     className: classes.grid,
     id: id,
+    sx: {
+      padding: "15px",
+      paddingTop: showPhonetics ? "30px" : "15px"
+    },
     children: /*#__PURE__*/_jsx(HoverText, {
       handleTranslate: handleTranslate,
       handleSpeak: handleSpeak,
@@ -59,7 +63,8 @@ function ChatBubble({
       isMessage: isMessage,
       muteSound: muteSound,
       t: t,
-      languageTag: languageTag
+      languageTag: languageTag,
+      showPhonetics: showPhonetics
     })
   });
 }

package/dist/Misc/HoverText/HoverText.js

@@ -3,9 +3,11 @@ import { Typography, Tooltip } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import ReactMarkdown from "react-markdown";
 import { removeExtraWhiteSpaces } from "../../utils";
+import { usePhonetics } from "../../hooks/usePhonetics";
+import RubyText from "../RubyText/RubyText";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function wordTextPropsAreEqual(prevProps, nextProps) {
-  return prevProps.value === nextProps.value && prevProps.disableTranslation === nextProps.disableTranslation && prevProps.learnLang === nextProps.learnLang && prevProps.forLang === nextProps.forLang && prevProps.voice === nextProps.voice && prevProps.voicePitch === nextProps.voicePitch && prevProps.voiceSpeed === nextProps.voiceSpeed && prevProps.muteSound === nextProps.muteSound && prevProps.disableHover === nextProps.disableHover;
+  return prevProps.value === nextProps.value && prevProps.disableTranslation === nextProps.disableTranslation && prevProps.learnLang === nextProps.learnLang && prevProps.forLang === nextProps.forLang && prevProps.voice === nextProps.voice && prevProps.voicePitch === nextProps.voicePitch && prevProps.voiceSpeed === nextProps.voiceSpeed && prevProps.muteSound === nextProps.muteSound && prevProps.disableHover === nextProps.disableHover && prevProps.showPhonetics === nextProps.showPhonetics;
 }
 const isOnlyUnderscore = str => /^([_])\1+$/.test(str);
 const WordText = /*#__PURE__*/memo(props => {
@@ -20,7 +22,8 @@ const WordText = /*#__PURE__*/memo(props => {
     voicePitch,
     voiceSpeed,
     muteSound,
-    disableHover
+    disableHover,
+    showPhonetics
   } = props;
   const [translationWord, setTranslationWord] = useState({
     translatedText: ""
@@ -28,6 +31,8 @@ const WordText = /*#__PURE__*/memo(props => {
   const {
     translatedText
   } = translationWord;
+  const isPhoneticLanguage = learnLang === "chinese" || learnLang === "japanese";
+  const phoneticSegments = usePhonetics(showPhonetics && isPhoneticLanguage ? value?.trim() : null, learnLang);
   const translateWord = async word => {
     try {
       const translationResult = await handleTranslate(word, learnLang, forLang);
@@ -73,6 +78,9 @@ const WordText = /*#__PURE__*/memo(props => {
       children: value
     });
   }
+  const displayContent = showPhonetics && phoneticSegments ? /*#__PURE__*/_jsx(RubyText, {
+    segments: phoneticSegments
+  }) : value;
   return /*#__PURE__*/_jsx(Tooltip, {
     onOpen: () => handleHover(value),
     enterDelay: 500,
@@ -82,7 +90,7 @@ const WordText = /*#__PURE__*/memo(props => {
     children: /*#__PURE__*/_jsx("span", {
       translate: "no",
       "data-text": value.trim(),
-      children: value
+      children: displayContent
     })
   });
 }, wordTextPropsAreEqual);
@@ -113,7 +121,8 @@ function HoverText({
   muteSound,
   disableHover,
   t,
-  languageTag
+  languageTag,
+  showPhonetics
 }) {
   const theme = useTheme();
   let formattedSource = formatUnderscores ? detectAndFormatUnderscores(source) : source;
@@ -163,7 +172,8 @@ function HoverText({
                 voicePitch: voicePitch,
                 voiceSpeed: voiceSpeed,
                 muteSound: muteSound,
-                disableHover: disableHover
+                disableHover: disableHover,
+                showPhonetics: showPhonetics
               }, index);
             }
             return word;
@@ -233,7 +243,8 @@ function HoverText({
         voice: voice,
         voicePitch: voicePitch,
         voiceSpeed: voiceSpeed,
-        muteSound: muteSound
+        muteSound: muteSound,
+        showPhonetics: showPhonetics
       }, index)), formattedSource && /*#__PURE__*/_jsx(ReactMarkdown, {
         components: components,
         children: formattedSource
@@ -242,6 +253,6 @@ function HoverText({
   });
 }
 function hoverTextPropsAreEqual(prevProps, nextProps) {
-  return prevProps.source === nextProps.source && prevProps.wordList === nextProps.wordList && prevProps.disableTranslation === nextProps.disableTranslation && prevProps.learnLang === nextProps.learnLang && prevProps.forLang === nextProps.forLang && prevProps.voice === nextProps.voice && prevProps.voicePitch === nextProps.voicePitch && prevProps.voiceSpeed === nextProps.voiceSpeed && prevProps.isMessage === nextProps.isMessage && prevProps.gutterBottom === nextProps.gutterBottom && prevProps.muteSound === nextProps.muteSound && prevProps.disableHover === nextProps.disableHover;
+  return prevProps.source === nextProps.source && prevProps.wordList === nextProps.wordList && prevProps.disableTranslation === nextProps.disableTranslation && prevProps.learnLang === nextProps.learnLang && prevProps.forLang === nextProps.forLang && prevProps.voice === nextProps.voice && prevProps.voicePitch === nextProps.voicePitch && prevProps.voiceSpeed === nextProps.voiceSpeed && prevProps.isMessage === nextProps.isMessage && prevProps.gutterBottom === nextProps.gutterBottom && prevProps.muteSound === nextProps.muteSound && prevProps.disableHover === nextProps.disableHover && prevProps.showPhonetics === nextProps.showPhonetics;
 }
 export default /*#__PURE__*/memo(HoverText, hoverTextPropsAreEqual);

package/dist/Misc/RubyText/RubyText.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function RubyText({
+  segments
+}) {
+  if (!segments) return null;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: segments.map((seg, i) => seg.phonetic ? /*#__PURE__*/_jsxs("ruby", {
+      style: {
+        rubyAlign: "center"
+      },
+      children: [seg.text, /*#__PURE__*/_jsx("rp", {
+        children: "("
+      }), /*#__PURE__*/_jsx("rt", {
+        style: {
+          fontSize: "0.6em",
+          opacity: 0.75
+        },
+        children: seg.phonetic
+      }), /*#__PURE__*/_jsx("rp", {
+        children: ")"
+      })]
+    }, i) : /*#__PURE__*/_jsx("span", {
+      children: seg.text
+    }, i))
+  });
+}
+export default RubyText;

package/dist/Screens/Courses/ViewCourse/ViewTopic/ViewTopic.js

@@ -23,11 +23,9 @@ import PhraseList from "../../../../Lists/Phrases/Phrases";
 import UpdateTopic from "../../../../Forms/UpdateTopic/UpdateTopic";
 import UpgradeSubscription from "../../../../Dialogs/UpgradeSubscription/UpgradeSubscription";
 import ShareDrawer from "../../../../Misc/ShareButton/ShareDrawer";
-import Notes from "../../../../Misc/Notes/Notes";
 import { randomId } from "../../../../utils/index";
 import PlaceholderImages from "../../../../utils/placeholder-images/index";
 import useConfirm from "../../../../hooks/useConfirm";
-import PhrasesEditor from "../../../../Editors/Phrases/Phrases";
 import ProgressiveCardMedia from "../../../../Misc/ProgressiveCardMedia/ProgressiveCardMedia";
 import CreatorNotSubscribed from "../../../../Dialogs/CreatorNotSubscribed/CreatorNotSubscribed";
 import Overlay from "../../../../Misc/Overlay/Overlay";
@@ -520,8 +518,6 @@ function Topic({
   const [isViewPdfOpen, setIsViewPdfOpen] = useState(false);
   const handleOpenViewPDF = () => setIsViewPdfOpen(true);
   const handleCloseViewPdf = () => setIsViewPdfOpen(false);
-  const [isCreatePhraseDialogOpen, setIsCreatePhraseDialogOpen] = useState(false);
-  const [isUploadPhrasesDialogOpen, setIsUploadPhrasesDialogOpen] = useState(false);
   const topicCompletion = useMemo(() => {
     if (isMember && topic?.topicId && topic?.completions?.length) {
       return calcTopicCompletions(topic, topic.completions, false, null, isChallengeModeStudent).completion;
@@ -653,34 +649,6 @@ function Topic({
     bannerXs,
     difficulty
   } = topic;
-  const handleAddPhrase = async values => {
-    try {
-      const response = await handleCreatePhrase(courseId, sectionId, topicId, values);
-      if (response) {
-        setIsCreatePhraseDialogOpen(false);
-        return response;
-      }
-      return null;
-    } catch (error) {
-      console.error(error);
-      return null;
-    }
-  };
-  const updatePhrase = async (index, updatedPhrase) => {
-    try {
-      const response = await handleUpdatePhrase(courseId, sectionId, topicId, index, updatedPhrase);
-      return response;
-    } catch (error) {
-      console.error(error);
-    }
-  };
-  const updatePhrases = async phrases => {
-    try {
-      handleUpdatePhrases(courseId, sectionId, topicId, phrases);
-    } catch (error) {
-      console.error(error);
-    }
-  };
   const updateRoleplays = async roleplays => {
     try {
       handleUpdateRoleplays(courseId, sectionId, topicId, roleplays);
@@ -740,13 +708,6 @@ function Topic({
     }), t("confirmDeletionText"));
     if (confirmed) handleDeleteTopic(topic);
   };
-  const handleRemovePhrase = async phraseId => {
-    try {
-      await handleDeletePhrase(courseId, sectionId, topicId, phraseId);
-    } catch (error) {
-      console.error(error);
-    }
-  };
   const deletePDF = async () => {
     const confirmed = await confirm(t("delete_pdf"), t("delete_pdf_confirmation"));
     if (confirmed) {
@@ -1061,56 +1022,6 @@ function Topic({
           buttonText: !authenticated ? t("sign_in") : t("join"),
           onClick: !authenticated ? handleSignIn : handleJoin
         })]
-      }), /*#__PURE__*/_jsx(Box, {
-        py: 1,
-        children: /*#__PURE__*/_jsx(Paper, {
-          children: /*#__PURE__*/_jsx(Box, {
-            py: 1,
-            children: /*#__PURE__*/_jsx(PhrasesEditor, {
-              t: t,
-              phrases: phrases,
-              isCreator: isCreator,
-              isMember: isMember,
-              handleTranslate: handleTranslate,
-              handleUpdatePhrase: updatePhrase,
-              handleRemovePhrase: handleRemovePhrase,
-              uploadAudio: uploadAudio,
-              handleSpeak: handleSpeak,
-              updatePhrases: updatePhrases,
-              learnLang: learnLang,
-              forLang: forLang,
-              voices: voices,
-              userAttributes: userAttributes,
-              disablePadding: true,
-              forLangCharacters: forLangCharacters,
-              learnLangCharacters: learnLangCharacters,
-              fileSizeLimit: fileSizeLimit,
-              handleSpreadsheetSaveChanges: handleSpreadsheetSaveChanges,
-              isUploadPhrasesDialogOpen: isUploadPhrasesDialogOpen,
-              setIsUploadPhrasesDialogOpen: setIsUploadPhrasesDialogOpen,
-              isCreatePhraseDialogOpen: isCreatePhraseDialogOpen,
-              setIsCreatePhraseDialogOpen: setIsCreatePhraseDialogOpen,
-              handleAddPhrase: handleAddPhrase,
-              topicName: topicName,
-              validatePhraseRecognition: validatePhraseRecognition,
-              siteLanguage: siteLanguage,
-              makeChatGptApiRequest: makeChatGptApiRequest,
-              difficulty: difficulty,
-              subscription: subscription,
-              topicGoal: topicGoal,
-              verificationStatus: verificationStatus
-            })
-          })
-        })
-      }), /*#__PURE__*/_jsx(Box, {
-        py: 1,
-        children: /*#__PURE__*/_jsx(Notes, {
-          t: t,
-          isCreator: isCreator,
-          initialValues: topic,
-          onSubmit: handleUpdateTopic,
-          handleNotesImageUpload: handleNotesImageUpload
-        })
       }), isCreator && /*#__PURE__*/_jsx(Box, {
         py: 1,
         children: /*#__PURE__*/_jsx(UpdateTopic, {