@nualang/nualang-ui-components 0.1.1340 → 0.1.1350

package/dist/Dialogs/CreatePhrase/CreatePhrase.js

@@ -15,8 +15,10 @@ import CircularProgress from "@mui/material/CircularProgress";
 import HelpIcon from "@mui/icons-material/Help";
 import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
 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";
@@ -42,13 +44,10 @@ function CreatePhrase({
   open,
   handleClose,
   handleTranslate,
-  submitText,
-  dialogTitle,
   learnLang = "",
   forLang = "",
   onSubmit,
   update = false,
-  handleChange,
   image = "",
   forLangCharacters,
   learnLangCharacters,
@@ -76,11 +75,52 @@ function CreatePhrase({
   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 [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) {
@@ -179,6 +219,13 @@ function CreatePhrase({
       });
     }
   }, [image]);
+
+  // reset form state whenever the dialog is closed
+  useEffect(() => {
+    if (!open) {
+      resetPhraseState();
+    }
+  }, [open]);
   const handleEditAlternative = (event, index) => {
     const {
       target: {
@@ -199,21 +246,6 @@ function CreatePhrase({
   const handleRemoveAlternative = index => {
     setAlternativeVersions(prevAlternativeVersions => prevAlternativeVersions.filter((t, i) => i !== index));
   };
-
-  // // translation
-  // const generateTranslations = async () => {
-  //   const translatedText = await handleTranslate(phrase, learnLang, forLang);
-  //   if (translatedText && translatedText !== "") {
-  //     setAutoTranslatedText(translatedText);
-  //     setTranslationList((prevTranslationList) => {
-  //       if (!prevTranslationList.includes(translatedText)) {
-  //         return [...prevTranslationList, translatedText];
-  //       }
-  //       return prevTranslationList;
-  //     });
-  //   }
-  // };
-
   function validateResponse(response) {
     if (!Array.isArray(response)) {
       return false;
@@ -230,6 +262,7 @@ function CreatePhrase({
   }
   const generateTranslations = async () => {
     try {
+      setIsSubmitting(true);
       let chatGptResponse = await makeChatGptApiRequest({
         model: "gpt-4o",
         promptKey: "generateTranslations",
@@ -257,8 +290,7 @@ function CreatePhrase({
   const handleEditTranslation = (event, index) => {
     const {
       target: {
-        value,
-        dataset
+        value
       }
     } = event;
     const tempArray = translationList.slice();
@@ -267,15 +299,16 @@ function CreatePhrase({
   };
   const handleAddTranslation = () => {
     setTranslationList(prevTranslationList => {
-      if (translation && !prevTranslationList.includes(translation.trim())) {
-        return [...prevTranslationList, translation.trim()];
+      const trimmed = translation ? translation.trim() : "";
+      if (trimmed && !prevTranslationList.includes(trimmed)) {
+        return [...prevTranslationList, trimmed];
       }
       return prevTranslationList;
     });
     setTranslation("");
   };
   const handleRemoveTranslation = index => {
-    setTranslationList(prevTranslationList => prevTranslationList.filter((t, i) => i !== index));
+    setTranslationList(prevTranslationList => prevTranslationList.filter((_, i) => i !== index));
   };
   const resetPhraseState = () => {
     setPhrase("");
@@ -283,6 +316,8 @@ function CreatePhrase({
     setAlternativeVersions([]);
     setTranslation("");
     setTranslationList([]);
+    setDefinition("");
+    setDefinitionList([]);
     setSelectedImage(initialSelectedImagestate);
     setAutoTranslatedText("");
   };
@@ -296,16 +331,26 @@ function CreatePhrase({
     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,
@@ -376,123 +421,148 @@ function CreatePhrase({
     submitText: title,
     dialogTitle: title,
     isSubmitDisabled: isSubmitting,
-    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 && translationInputRef.current) {
-          translationInputRef.current.focus();
-        }
+    children: [/*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      sx: {
+        width: "100%"
       },
-      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(Grid, {
+        textAlign: "center",
+        sx: {
+          ...(!isSubmitting && {
+            display: "none"
+          })
         },
-        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 && (import.meta.env.REACT_APP_STAGE === "dev" || window.location.host === "localhost:9009") && /*#__PURE__*/_jsx(Box, {
+        mx: 2,
+        size: 12,
+        children: /*#__PURE__*/_jsx(NualaCreating, {})
+      }), /*#__PURE__*/_jsx(Grid, {
         sx: {
-          display: "inline-flex",
-          alignItems: "center"
+          ...(!isSubmitting && {
+            display: "none"
+          })
+        },
+        mt: 2,
+        size: 12,
+        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();
+          }
         },
-        children: /*#__PURE__*/_jsx(Box, {
+        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 && (import.meta.env.REACT_APP_STAGE === "dev" || window.location.host === "localhost:9009") && /*#__PURE__*/_jsx(Box, {
           sx: {
-            position: "relative"
+            display: "inline-flex",
+            alignItems: "center"
           },
-          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, {
+            sx: {
+              position: "relative"
             },
-            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"),
+            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(IconButton, {
-                sx: {
-                  padding: 0
-                },
-                children: /*#__PURE__*/_jsx(HelpIcon, {
-                  fontSize: "small"
+              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__*/_jsx(_Fragment, {}), checkingRecogniton && /*#__PURE__*/_jsx(CircularProgress, {
-              size: 24,
-              sx: {
-                position: "absolute",
-                top: "50%",
-                left: "50%",
-                marginTop: "-12px",
-                marginLeft: "-12px"
-              }
-            })]
+            }) : /*#__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",
-      justifyContent: "center",
-      alignItems: "flex-end",
-      children: alternativeVersions ? alternativeVersions.map((alternativeAns, idx) => {
-        return /*#__PURE__*/_jsxs(Fragment, {
+        })]
+      }), phrase && /*#__PURE__*/_jsx(Grid, {
+        container: true,
+        direction: "row",
+        justifyContent: "center",
+        alignItems: "flex-end",
+        children: alternativeVersions?.map((alternativeAns, idx) => /*#__PURE__*/_jsxs(Fragment, {
           children: [/*#__PURE__*/_jsx(Grid, {
             className: classes.alternativeVersionItem,
             size: 10,
@@ -500,9 +570,7 @@ function CreatePhrase({
               t: t,
               name: `alternativeVersion${idx}`,
               value: alternativeAns,
-              onChange: e => {
-                handleEditAlternative(e, idx);
-              },
+              onChange: e => handleEditAlternative(e, idx),
               margin: "none",
               autoFocus: true,
               type: "text",
@@ -513,53 +581,45 @@ function CreatePhrase({
             className: classes.alternativeVersionItem,
             size: 1,
             children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => {
-                handleRemoveAlternative(idx);
-              },
+              onClick: () => handleRemoveAlternative(idx),
               size: "large",
               "aria-label": "Remove Alternative",
               children: /*#__PURE__*/_jsx(CloseIcon, {})
             })
           })]
-        }, `alternative_answers_${idx}`);
-      }) : null
-    }), 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",
-      justifyContent: "center",
-      alignItems: "flex-end",
-      children: [translationList ? translationList.map((translation, idx) => {
-        return /*#__PURE__*/_jsxs(Fragment, {
+        }, `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",
+        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: translation,
-              onChange: e => {
-                handleEditTranslation(e, idx);
-              },
+              value: translationItem,
+              onChange: e => handleEditTranslation(e, idx),
               margin: "none",
               type: "text",
               fullWidth: true,
@@ -572,30 +632,75 @@ function CreatePhrase({
             className: classes.translationItem,
             size: 1,
             children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => {
-                handleRemoveTranslation(idx);
-              },
+              onClick: () => handleRemoveTranslation(idx),
               size: "large",
               "aria-label": "Remove Translation",
               children: /*#__PURE__*/_jsx(CloseIcon, {})
             })
           })]
-        }, `translist_${idx}`);
-      }) : null, /*#__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
-        })
+        }, `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
+          })
+        })]
       })]
     })]
   });

package/dist/Dialogs/GeneratePhrases/GeneratePhrases.js

@@ -12,11 +12,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 const useStyles = makeStyles()(theme => ({
   phraseText: {
     width: "80%",
-    wordBreak: "break-all"
+    wordBreak: "break-word",
+    overflowWrap: "break-word"
   },
   phraseTextSmall: {
     width: "60%",
-    wordBreak: "break-all"
+    wordBreak: "break-word",
+    overflowWrap: "break-word"
   },
   avatar: {
     cursor: "pointer",
@@ -29,6 +31,7 @@ const useStyles = makeStyles()(theme => ({
 function Phrase({
   alternativeVersions,
   translations,
+  definitions,
   phrase
 }) {
   const theme = useTheme();
@@ -36,6 +39,27 @@ function Phrase({
     classes
   } = useStyles();
   const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
+  const primary = `${phrase}${Array.isArray(alternativeVersions) && alternativeVersions.length ? " - " : ""}${(alternativeVersions || []).join(", ")}`;
+
+  // Show translations first, then definitions (if any) on a new line.
+  const secondaryParts = [];
+  if (Array.isArray(translations) && translations.length) {
+    secondaryParts.push((translations || []).join(", "));
+  }
+  if (Array.isArray(definitions) && definitions.length) {
+    secondaryParts.push((definitions || []).join(", "));
+  }
+  const secondary = secondaryParts.join("\n");
+  console.log({
+    primary,
+    secondary
+  });
+  console.log("Phrase render", {
+    phrase,
+    translations,
+    definitions,
+    alternativeVersions
+  });
   return /*#__PURE__*/_jsx(ListItem, {
     "data-cy": "phrase-list-item",
     children: isLargeScreen ? /*#__PURE__*/_jsx(Grid, {
@@ -46,8 +70,13 @@ function Phrase({
       className: classes.phraseText,
       children: /*#__PURE__*/_jsx(ListItemText, {
         className: classes.phrases,
-        primary: `${phrase}${Array.isArray(alternativeVersions) && alternativeVersions.length ? " - " : ""}${(alternativeVersions || []).join(", ")}`,
-        secondary: (translations || []).join(", ")
+        primary: primary,
+        secondary: secondary,
+        secondaryTypographyProps: {
+          style: {
+            whiteSpace: "pre-line"
+          }
+        }
       })
     }) : /*#__PURE__*/_jsx(Grid, {
       container: true,
@@ -57,8 +86,13 @@ function Phrase({
       className: classes.phraseTextSmall,
       children: /*#__PURE__*/_jsx(ListItemText, {
         className: classes.phrases,
-        primary: `${phrase}${Array.isArray(alternativeVersions) && alternativeVersions.length ? " - " : ""}${(alternativeVersions || []).join(", ")}`,
-        secondary: (translations || []).join(", ")
+        primary: primary,
+        secondary: secondary,
+        secondaryTypographyProps: {
+          style: {
+            whiteSpace: "pre-line"
+          }
+        }
       })
     })
   });
@@ -85,11 +119,13 @@ function GeneratePhrases({
   const phrases = isPhrases ? currentPhrases.map(({
     phrase,
     translations,
+    definitions,
     image,
     voices
   }) => ({
     phrase,
     translations,
+    definitions,
     image,
     voices
   })) : null;
@@ -114,6 +150,7 @@ function GeneratePhrases({
       if (typeof item !== "object" || item === null || Array.isArray(item)) {
         return false;
       }
+      // definitions is OPTIONAL and we do NOT validate it per your request
       if (!Object.hasOwn(item, "phrase") || !Object.hasOwn(item, "translations") || !Object.hasOwn(item, "image")) {
         return false;
       }
@@ -158,7 +195,13 @@ function GeneratePhrases({
       if (!validateResponse(phrasesArray)) {
         throw new Error("Invalid AI response");
       }
-      setGeneratedPhrases(phrasesArray);
+
+      // Ensure definitions exists as an array (assumed array; no validation)
+      const normalized = phrasesArray.map(p => ({
+        ...p,
+        definitions: Array.isArray(p.definitions) ? p.definitions : []
+      }));
+      setGeneratedPhrases(normalized);
       setIsGenerating(false);
     } catch (error) {
       console.error(error);
@@ -238,7 +281,6 @@ function GeneratePhrases({
             onChange: handleChange,
             multiline: true,
             rows: 3
-            // maxLength={300}
           })
         }), /*#__PURE__*/_jsx(Grid, {
           mb: 2,
@@ -254,9 +296,7 @@ function GeneratePhrases({
             margin: "normal",
             variant: "outlined",
             fullWidth: true,
-            onChange: handleChange
-            // inputProps={{ maxLength: 200 }}
-            ,
+            onChange: handleChange,
             InputProps: {
               endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
                 position: "end",

package/dist/Editors/Phrases/Phrases.js

@@ -61,7 +61,8 @@ const useStyles = makeStyles()(theme => ({
 }));
 const rowTemplate = {
   phrase: "",
-  translations: "",
+  translations: [],
+  definitions: [],
   image: "",
   voices: [],
   alternativeVersions: []

package/dist/Forms/InputHelper/InputHelper.js

@@ -9,8 +9,9 @@ import InputAdornment from "@mui/material/InputAdornment";
 import FormControl from "@mui/material/FormControl";
 import Translate from "@mui/icons-material/Translate";
 import Tooltip from "@mui/material/Tooltip";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
+import Popover from "@mui/material/Popover";
+import Box from "@mui/material/Box";
+import ButtonBase from "@mui/material/ButtonBase";
 import FormHelperText from "@mui/material/FormHelperText";
 import { Smile } from "react-feather";
 import Picker from "emoji-picker-react";
@@ -29,7 +30,6 @@ export function Adornment(props) {
     adornmentPosition = "end",
     iconButtonEdge = "end",
     icon = /*#__PURE__*/_jsx(Translate, {}),
-    width = 90,
     title = "accents_and_special_characters",
     activeRef,
     whiteIcon = false,
@@ -77,6 +77,24 @@ export function Adornment(props) {
       }
     }
   };
+  const cellSx = {
+    width: 40,
+    height: 40,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "1.15rem",
+    borderRadius: 1,
+    cursor: "pointer",
+    transition: "background-color 0.1s",
+    "&:hover": {
+      backgroundColor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.08)"
+    },
+    "&:focus-visible": {
+      outline: `2px solid ${theme.palette.primary.main}`,
+      outlineOffset: -2
+    }
+  };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs(InputAdornment, {
       position: adornmentPosition,
@@ -113,7 +131,7 @@ export function Adornment(props) {
             children: /*#__PURE__*/_jsx(Smile, {})
           })
         })]
-      }), characters && /*#__PURE__*/_jsxs(_Fragment, {
+      }), characters && characters.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Tooltip, {
           title: t(title),
           children: /*#__PURE__*/_jsx(IconButton, {
@@ -140,22 +158,35 @@ export function Adornment(props) {
             },
             children: icon
           })
-        }), /*#__PURE__*/_jsx(Menu, {
-          id: `char-menu-${name}`,
+        }), /*#__PURE__*/_jsx(Popover, {
+          id: `char-grid-${name}`,
           anchorEl: anchorEl,
-          keepMounted: true,
           open: Boolean(anchorEl),
           onClose: handleCloseAccents,
-          PaperProps: {
-            style: {
-              maxHeight: 48 * 4.5,
-              width: width
-            }
+          anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "center"
+          },
+          transformOrigin: {
+            vertical: "top",
+            horizontal: "center"
           },
-          children: characters.map(c => /*#__PURE__*/_jsx(MenuItem, {
-            onClick: () => handleClickOption(c),
-            children: c
-          }, c))
+          children: /*#__PURE__*/_jsx(Box, {
+            sx: {
+              display: "grid",
+              gridTemplateColumns: "repeat(7, 40px)",
+              gap: 0.25,
+              p: 1
+            },
+            role: "grid",
+            "aria-label": t(title),
+            children: characters.map(c => /*#__PURE__*/_jsx(ButtonBase, {
+              sx: cellSx,
+              onClick: () => handleClickOption(c),
+              "aria-label": c,
+              children: c
+            }, c))
+          })
         })]
       })]
     })
@@ -172,8 +203,7 @@ function InputHelper(props) {
     margin,
     inputRef,
     maxLength,
-    autoFocus,
-    learnLang
+    autoFocus
   } = props;
   const textInput = useRef(null);
   const activeRef = inputRef || textInput;
@@ -188,10 +218,9 @@ function InputHelper(props) {
       }
     }
   };
-  const adornment = characters ? /*#__PURE__*/_jsx(Adornment, {
+  const adornment = characters && characters.length > 0 ? /*#__PURE__*/_jsx(Adornment, {
     ...props,
     activeRef: activeRef,
-    learnLang: learnLang,
     id: `${id}-adornment`,
     role: "button",
     tabIndex: 0,

package/dist/Lists/Phrases/Phrases.js

@@ -7,9 +7,10 @@ import MoreVertIcon from "@mui/icons-material/MoreVert";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ImageSearchIcon from "@mui/icons-material/ImageSearch";
+import GTranslateIcon from "@mui/icons-material/GTranslate";
+import MenuBookIcon from '@mui/icons-material/MenuBook';
 import ListenerDialog from "../../Dialogs/Listener/Listener";
 import UpdatePhraseDialog from "../../Dialogs/CreatePhrase/CreatePhrase";
-import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 import ViewImageDialog from "../../Dialogs/ViewImageDialog/ViewImageDialog";
 import { propsAreEqual } from "../../utils";
 import { useTheme } from "@mui/material/styles";
@@ -22,6 +23,21 @@ const useStyles = makeStyles()(theme => ({
   root: {
     width: "100%"
   },
+  translationRow: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "6px",
+    lineHeight: 1.2
+  },
+  iconBeforeText: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 14,
+    height: 14,
+    color: theme.palette.text.secondary,
+    marginTop: 1
+  },
   phraseText: {
     width: "80%",
     wordBreak: "break-all"
@@ -31,15 +47,27 @@ const useStyles = makeStyles()(theme => ({
     wordBreak: "break-all"
   },
   avatar: {
-    // width: 50,
-    // height: 50,
     cursor: "pointer",
-    margin: theme.spacing()
+    margin: theme.spacing(),
+    marginRight: 20,
+    width: 55,
+    height: 55
   },
   avatarNoClick: {
-    // width: 50,
-    // height: 50,
-    margin: theme.spacing()
+    margin: theme.spacing(),
+    marginRight: 20,
+    width: 55,
+    height: 55
+  },
+  translationsText: {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis"
+  },
+  definitionsText: {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis"
   }
 }));
 function Phrase(props) {
@@ -61,7 +89,6 @@ function Phrase(props) {
     learnLang,
     handleSpeak,
     userAttributes,
-    disableDragAndDrop = false,
     handleUpdatePhrase,
     uploadAudio,
     voices = {},
@@ -77,10 +104,14 @@ function Phrase(props) {
   } = props;
   const {
     phrase = "",
-    translations,
+    translations = [],
+    definitions = [],
     alternativeVersions,
     image
   } = props.phrase || {};
+  const hasDefinitions = (definitions || []).length > 0;
+  const hasTranslations = (translations || []).length > 0;
+  const useCompactSecondary = hasDefinitions && hasTranslations;
   const handleImageOpen = () => {
     setImageOpen(true);
   };
@@ -111,6 +142,11 @@ function Phrase(props) {
       return;
     }
   };
+  console.log("Phrase render", {
+    phrase,
+    translations,
+    alternativeVersions
+  });
   const handleCloseMenu = () => {
     setAnchorEl(null);
   };
@@ -159,7 +195,51 @@ function Phrase(props) {
         children: /*#__PURE__*/_jsx(ListItemText, {
           className: classes.phrases,
           primary: `${phrase}${Array.isArray(alternativeVersions) && alternativeVersions.length ? " - " : ""}${(alternativeVersions || []).join(", ")}`,
-          secondary: (translations || []).join(", ")
+          secondary: /*#__PURE__*/_jsxs("div", {
+            children: [/*#__PURE__*/_jsxs(Box, {
+              mt: 0.25,
+              className: classes.translationRow,
+              children: [/*#__PURE__*/_jsx(Tooltip, {
+                title: t("translation") || "Translation",
+                children: /*#__PURE__*/_jsx("span", {
+                  className: classes.iconBeforeText,
+                  "aria-hidden": true,
+                  children: /*#__PURE__*/_jsx(GTranslateIcon, {
+                    fontSize: "small"
+                  })
+                })
+              }), /*#__PURE__*/_jsx(Tooltip, {
+                title: (translations || []).join(", "),
+                children: /*#__PURE__*/_jsx(Typography, {
+                  variant: "body2",
+                  color: "textSecondary",
+                  className: classes.translationsText,
+                  children: (translations || []).join(", ")
+                })
+              })]
+            }), (props.phrase.definitions || []).length > 0 && /*#__PURE__*/_jsxs(Box, {
+              mt: 0.25,
+              className: classes.translationRow,
+              children: [/*#__PURE__*/_jsx(Tooltip, {
+                title: t("definition") || "Definition",
+                children: /*#__PURE__*/_jsx("span", {
+                  className: classes.iconBeforeText,
+                  "aria-hidden": true,
+                  children: /*#__PURE__*/_jsx(MenuBookIcon, {
+                    fontSize: "small"
+                  })
+                })
+              }), /*#__PURE__*/_jsx(Tooltip, {
+                title: (props.phrase.definitions || []).join("; "),
+                children: /*#__PURE__*/_jsx(Typography, {
+                  variant: "body2",
+                  color: "textSecondary",
+                  className: `${useCompactSecondary ? classes.secondaryTextCompact : ""} ${classes.definitionsText}`,
+                  children: (props.phrase.definitions || []).join("; ")
+                })
+              })]
+            })]
+          })
         })
       }) : /*#__PURE__*/_jsx(Grid, {
         container: true,
@@ -170,7 +250,51 @@ function Phrase(props) {
         children: /*#__PURE__*/_jsx(ListItemText, {
           className: classes.phrases,
           primary: `${phrase}${Array.isArray(alternativeVersions) && alternativeVersions.length ? " - " : ""}${(alternativeVersions || []).join(", ")}`,
-          secondary: (translations || []).join(", ")
+          secondary: /*#__PURE__*/_jsxs("div", {
+            children: [/*#__PURE__*/_jsxs(Box, {
+              mt: 0.25,
+              className: classes.translationRow,
+              children: [/*#__PURE__*/_jsx(Tooltip, {
+                title: t("translation") || "Translation",
+                children: /*#__PURE__*/_jsx("span", {
+                  className: classes.iconBeforeText,
+                  "aria-hidden": true,
+                  children: /*#__PURE__*/_jsx(GTranslateIcon, {
+                    fontSize: "small"
+                  })
+                })
+              }), /*#__PURE__*/_jsx(Tooltip, {
+                title: (translations || []).join(", "),
+                children: /*#__PURE__*/_jsx(Typography, {
+                  variant: "body2",
+                  color: "textSecondary",
+                  className: classes.translationsText,
+                  children: (translations || []).join(", ")
+                })
+              })]
+            }), (props.phrase.definitions || []).length > 0 && /*#__PURE__*/_jsxs(Box, {
+              mt: 0.25,
+              className: classes.translationRow,
+              children: [/*#__PURE__*/_jsx(Tooltip, {
+                title: t("definition") || "Definition",
+                children: /*#__PURE__*/_jsx("span", {
+                  className: classes.iconBeforeText,
+                  "aria-hidden": true,
+                  children: /*#__PURE__*/_jsx(MenuBookIcon, {
+                    fontSize: "small"
+                  })
+                })
+              }), /*#__PURE__*/_jsx(Tooltip, {
+                title: (props.phrase.definitions || []).join("; "),
+                children: /*#__PURE__*/_jsx(Typography, {
+                  variant: "body2",
+                  color: "textSecondary",
+                  className: classes.definitionsText,
+                  children: (props.phrase.definitions || []).join("; ")
+                })
+              })]
+            })]
+          })
         })
       }), /*#__PURE__*/_jsxs(ListItemSecondaryAction, {
         children: [!disableActions && !isLargeScreen && isCreator && /*#__PURE__*/_jsxs("div", {
@@ -287,6 +411,7 @@ function Phrase(props) {
       image: props.phrase.image,
       translations: translations,
       alternativeVersions: props.phrase.alternativeVersions,
+      definitions: props.phrase.definitions,
       voices: props.phrase.voices,
       learnLang: learnLang,
       forLang: forLang,

package/dist/Screens/Classrooms/Classrooms.js

@@ -57,6 +57,7 @@ function Classrooms({
   handleViewUserProfile,
   featureFlags
 }) {
+  console.log("Classrooms render");
   const {
     classes
   } = useStyles();

package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js

@@ -1659,6 +1659,7 @@ export default function ViewClassroom({
   featureFlags,
   ...otherProps
 }) {
+  console.log("ViewClassroom render");
   const {
     classes
   } = useStyles();

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

@@ -102,6 +102,7 @@ const useStyles = makeStyles()(theme => ({
     position: "relative"
   }
 }));
+console.log("ViewTopic render");
 function OverflowMenu({
   t,
   topicId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1340",
+  "version": "0.1.1350",
   "type": "module",
   "main": "dist/index.js",
   "files": [