@nualang/nualang-ui-components 0.1.1173 → 0.1.1174

package/dist/Forms/VoiceSelector/VoiceSelector.js

@@ -78,12 +78,14 @@ function VoiceSelector(props) {
     value = "",
     onVoicePitchChange,
     voicePitch,
+    generateAudio = false,
+    csv = false,
     ...otherProps
   } = props;
   const voiceAccents = Object.values(voices);
   const voicesArray = voiceAccents.flatMap(voiceOption => voiceOption.voiceOptions);
   const selectedVoice = (voicesArray || []).find(v => v.name === value);
-  const devOrStorybook = process.env.REACT_APP_STAGE === "dev" || window.location.host === "localhost:9009";
+  const audioOrStorybook = generateAudio || window.location.host === "localhost:9009";
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.TextField, _extends({
     select: true,
     value: value
@@ -106,11 +108,11 @@ function VoiceSelector(props) {
     alt: ""
   }))), /*#__PURE__*/_react.default.createElement(_material.Grid, _extends({
     item: true
-  }, devOrStorybook ? {
+  }, audioOrStorybook ? {
     sx: {
       flexGrow: 1
     }
-  } : {}), voiceOption.isChild && voiceOption.isChild === true ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", `${voiceOption.name} (${t("child")}) `, " ") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, voiceOption.name)), devOrStorybook && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  } : {}), voiceOption.isChild && voiceOption.isChild === true ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", `${voiceOption.name} (${t("child")}) `, " ") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, voiceOption.name)), audioOrStorybook && /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     sx: {
       mr: 2,
@@ -122,7 +124,7 @@ function VoiceSelector(props) {
   }) : /*#__PURE__*/_react.default.createElement("img", {
     src: _aws.default,
     alt: "AWS Icon"
-  }))))])])), value && /*#__PURE__*/_react.default.createElement(_material.Box, {
+  }))))])])), value && !csv && /*#__PURE__*/_react.default.createElement(_material.Box, {
     sx: {
       width: "100%",
       px: 1,

package/dist/Screens/GenerateAudio/GenerateAudio.js

@@ -14,6 +14,16 @@ var _AvatarSelector = _interopRequireDefault(require("../../Misc/AvatarSelector/
 var _InputHelper = _interopRequireDefault(require("../../Forms/InputHelper/InputHelper"));
 var _utils = require("../../utils");
 var _AudioNuala = _interopRequireDefault(require("../../img/AudioNuala.svg"));
+var _papaparse = _interopRequireDefault(require("papaparse"));
+var _PlayArrow = _interopRequireDefault(require("@mui/icons-material/PlayArrow"));
+var _jszip = _interopRequireDefault(require("jszip"));
+var _fileSaver = require("file-saver");
+var _lab = require("@mui/lab");
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+var _Download = _interopRequireDefault(require("@mui/icons-material/Download"));
+var _FileUpload = _interopRequireDefault(require("@mui/icons-material/FileUpload"));
+var _ResponsiveDialog = _interopRequireDefault(require("../../Dialogs/ResponsiveDialog/ResponsiveDialog"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -97,7 +107,8 @@ function ActorForm({
   filteredVoices,
   setFieldValue,
   setCheckAudioUrl,
-  formik
+  formik,
+  csv = false
 }) {
   const [avatarSelector, setAvatarSelector] = (0, _react.useState)(false);
   const handleAvatarSelection = value => {
@@ -149,7 +160,9 @@ function ActorForm({
     helperText: touched?.actor?.voice && errors?.actor?.voice,
     error: touched?.actor?.voice && Boolean(errors?.actor?.voice),
     voicePitch: actor.voicePitch,
-    onVoicePitchChange: handleVoicePitchChange
+    onVoicePitchChange: handleVoicePitchChange,
+    csv: csv,
+    generateAudio: true
   }), /*#__PURE__*/_react.default.createElement(_AvatarSelector.default, {
     t: t,
     open: avatarSelector,
@@ -157,7 +170,7 @@ function ActorForm({
     picture: actor.picture,
     handleClose: () => setAvatarSelector(false),
     handleSubmit: handleAvatarSelection
-  }), formik.values.actor.voice && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
+  }), formik.values.actor.voice && !csv && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
     sx: {
       width: "100%",
       px: 1,
@@ -180,6 +193,193 @@ function ActorForm({
     learnLang: learnLang
   }))));
 }
+function getVoiceLanguageCode(voice, languages) {
+  for (const languageCode in languages) {
+    const voicesObject = languages[languageCode].Voices;
+    if (voicesObject) {
+      for (const langKey in voicesObject) {
+        const voiceOptions = voicesObject[langKey].voiceOptions;
+        const matchingVoice = voiceOptions?.find(option => option.name === voice);
+        if (matchingVoice) {
+          return langKey;
+        }
+      }
+    }
+  }
+  return null;
+}
+function AddPhraseDialog({
+  t,
+  open,
+  onClose,
+  handleAddPhrase,
+  languages,
+  avatars,
+  handleSpeak,
+  langChar
+}) {
+  const [checkAudioUrl, setCheckAudioUrl] = (0, _react.useState)(false);
+  const [filteredVoices, setFilteredVoices] = (0, _react.useState)([]);
+  const [learnLang, setLearnLang] = (0, _react.useState)("english");
+  const formik = (0, _formik.useFormik)({
+    initialValues: {
+      learnLang: "english",
+      actor: {
+        voice: "",
+        voiceLanguageCode: "",
+        voicePitch: "",
+        picture: ""
+      },
+      phraseToSpeak: "",
+      voiceSpeed: "",
+      fileName: ""
+    },
+    validationSchema: Yup.object({
+      actor: Yup.object().shape({
+        voice: Yup.string().nullable(),
+        voiceLanguageCode: Yup.string().nullable(),
+        voicePitch: Yup.string().nullable(),
+        picture: Yup.string().nullable()
+      }),
+      phraseToSpeak: Yup.string().required("Required"),
+      fileName: Yup.string()
+    }),
+    onSubmit: values => {
+      const phraseToAdd = {
+        phrase: values.phraseToSpeak,
+        actor: values.actor,
+        fileName: values.fileName
+      };
+      handleAddPhrase(phraseToAdd);
+      formik.resetForm();
+      onClose();
+    }
+  });
+  (0, _react.useEffect)(() => {
+    setCheckAudioUrl(true);
+  }, [formik.values.phraseToSpeak]);
+  (0, _react.useEffect)(() => {
+    if (learnLang) {
+      const voicesForLang = languages[learnLang]?.Voices || [];
+      setFilteredVoices(voicesForLang);
+    }
+  }, [learnLang, languages]);
+  const handleLanguageChange = e => {
+    const selectedLang = e.target.value;
+    setLearnLang(selectedLang);
+    formik.setFieldValue("actor.voice", "");
+    setCheckAudioUrl(true);
+  };
+  return /*#__PURE__*/_react.default.createElement(_ResponsiveDialog.default, {
+    open: open,
+    onClose: onClose,
+    maxWidth: "80%"
+  }, /*#__PURE__*/_react.default.createElement(_material.DialogTitle, null, t("add_phrase")), /*#__PURE__*/_react.default.createElement(_material.DialogContent, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    spacing: 2
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    marginTop: 2
+  }, /*#__PURE__*/_react.default.createElement(_LanguageSelector.default, {
+    id: "learnLang",
+    name: "learnLang",
+    label: t("language"),
+    fullWidth: true,
+    required: true,
+    t: t,
+    languages: languages,
+    value: learnLang,
+    onChange: handleLanguageChange,
+    onBlur: formik.handleBlur
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(ActorForm, {
+    t: t,
+    actor: formik.values.actor,
+    handleBlur: formik.handleBlur,
+    touched: formik.touched,
+    errors: formik.errors,
+    learnLang: learnLang,
+    filteredVoices: filteredVoices,
+    handleSpeak: handleSpeak,
+    avatars: avatars,
+    langChar: langChar,
+    setFieldValue: formik.setFieldValue,
+    formik: formik,
+    setCheckAudioUrl: setCheckAudioUrl,
+    csv: true
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
+    id: "fileName",
+    "data-cy": "fileName",
+    name: "fileName",
+    label: t("file_name"),
+    value: formik.values.fileName,
+    onChange: formik.handleChange,
+    onBlur: formik.handleBlur,
+    type: "text",
+    margin: "normal",
+    variant: "outlined",
+    fullWidth: true,
+    helperText: formik.touched.fileName && formik.errors.fileName,
+    error: formik.touched.fileName && Boolean(formik.errors.fileName),
+    InputProps: {
+      endAdornment: /*#__PURE__*/_react.default.createElement(_material.InputAdornment, {
+        position: "end"
+      }, ".mp3")
+    }
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    marginTop: -1
+  }, /*#__PURE__*/_react.default.createElement(_InputHelper.default, {
+    t: t,
+    id: "phraseToSpeak",
+    "data-cy": "phraseToSpeak",
+    name: "phraseToSpeak",
+    label: t("phrase_to_speak"),
+    value: formik.values.phraseToSpeak,
+    onChange: formik.handleChange,
+    onBlur: formik.handleBlur,
+    type: "text",
+    margin: "normal",
+    variant: "outlined",
+    fullWidth: true,
+    required: true,
+    multiline: true,
+    characters: langChar,
+    learnLang: learnLang,
+    helperText: formik.touched.phraseToSpeak && formik.errors.phraseToSpeak,
+    error: formik.touched.phraseToSpeak && Boolean(formik.errors.phraseToSpeak)
+  })))), /*#__PURE__*/_react.default.createElement(_material.DialogActions, null, /*#__PURE__*/_react.default.createElement(_material.Button, {
+    onClick: onClose
+  }, t("close")), /*#__PURE__*/_react.default.createElement(_material.Button, {
+    variant: "outlined",
+    color: "primary",
+    disabled: formik.values.phraseToSpeak === "" || !formik.values.actor.voice,
+    onClick: () => handleSpeak({
+      text: formik.values.phraseToSpeak,
+      learnLanguage: learnLang,
+      voiceName: formik.values.actor.voice,
+      mute: false,
+      callback: () => {},
+      textContainer: null,
+      languageCode: formik.values.actor.voiceLanguageCode,
+      isHoverText: false,
+      pitch: formik.values.actor.voicePitch,
+      voiceSpeed: formik.values.voiceSpeed
+    })
+  }, t("play_audio")), /*#__PURE__*/_react.default.createElement(_material.Button, {
+    variant: "contained",
+    onClick: formik.handleSubmit,
+    color: "primary",
+    disabled: formik.values.phraseToSpeak === "" || !formik.values.actor.voice
+  }, t("add_phrase"))));
+}
 function GenerateAudio({
   t,
   handleSpeak,
@@ -187,12 +387,18 @@ function GenerateAudio({
   languages,
   langChar,
   downloadAudio,
-  audioUrl
+  audioUrl,
+  openSnackbar
 }) {
   const [learnLang, setLearnLang] = (0, _react.useState)("english");
   const [filteredVoices, setFilteredVoices] = (0, _react.useState)([]);
   const [checkAudioUrl, setCheckAudioUrl] = (0, _react.useState)(false);
   const [voiceSpeed, setVoiceSpeed] = (0, _react.useState)(50);
+  const [showCSV, setShowCSV] = (0, _react.useState)(false);
+  const [csvData, setCsvData] = (0, _react.useState)([]);
+  const [csvHeaders, setCsvHeaders] = (0, _react.useState)(["phrase", "fileName", "voice"]);
+  const [isGenerating, setIsGenerating] = (0, _react.useState)(false);
+  const [dialogOpen, setDialogOpen] = (0, _react.useState)(false);
   const formik = (0, _formik.useFormik)({
     initialValues: {
       actor: {
@@ -216,7 +422,7 @@ function GenerateAudio({
       phraseToSpeak: Yup.string().required("Required").test("noSpecialChars", "No special characters", value => !(0, _utils.containsInvalidSymbols)(value))
     }),
     onSubmit: values => {
-      handleSpeak(values.phraseToSpeak, learnLang, values.actor.voice);
+      handleSpeak(values.phraseToSpeak, values.actor.voice);
     }
   });
   (0, _react.useEffect)(() => {
@@ -237,6 +443,187 @@ function GenerateAudio({
   const handleSpeedChange = (event, newValue) => {
     setVoiceSpeed(newValue);
   };
+  const playPhraseAudio = (phrase, rowVoice) => {
+    const voiceToUse = rowVoice || formik.values.actor.voice || "Joey";
+    handleSpeak({
+      text: phrase,
+      learnLanguage: formik.values.learnLang || "english",
+      voiceName: voiceToUse,
+      mute: false,
+      callback: () => {},
+      textContainer: null,
+      languageCode: getVoiceLanguageCode(voiceToUse, languages),
+      isHoverText: false,
+      pitch: null,
+      voiceSpeed: null
+    });
+  };
+  const languagesContainsVoice = voice => {
+    for (const languageCode in languages) {
+      const voicesObject = languages[languageCode].Voices;
+      if (voicesObject) {
+        for (const langKey in voicesObject) {
+          const voiceOptions = voicesObject[langKey].voiceOptions;
+          if (voiceOptions?.find(option => option.name === voice)) {
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  };
+  const handleAddPhrase = newPhrase => {
+    csvHeaders.length === 0 && setCsvHeaders(["phrase", "fileName", "voice"]);
+    const fileName = `audio_${csvData.length + 1}_${new Date().toISOString().replace(/:/g, "-").slice(0, 19)}.mp3`;
+    if (newPhrase.fileName && !newPhrase.fileName.endsWith(".mp3")) {
+      newPhrase.fileName = `${newPhrase.fileName}.mp3`;
+    }
+    const phraseWithDefaults = {
+      phrase: newPhrase.phrase,
+      fileName: newPhrase.fileName || fileName,
+      voice: newPhrase.actor.voice || "Joey"
+    };
+    setCsvData([...csvData, phraseWithDefaults]);
+  };
+  const downloadCSVTemplate = () => {
+    const csvTemplate = "phrase,fileName,voice\nThis is a test phrase,Test.mp3,Joey\n";
+    downloadCSV(csvTemplate, "template.csv");
+  };
+  const handleCSVUpload = event => {
+    const file = event.target.files[0];
+    if (file) {
+      _papaparse.default.parse(file, {
+        header: true,
+        skipEmptyLines: true,
+        complete: function (results) {
+          let headers = results.meta.fields || [];
+
+          // Ensure 'phrase' is present in the headers
+          if (headers.includes("phrase")) {
+            if (!headers.includes("fileName")) {
+              headers.push("fileName");
+            }
+            if (!headers.includes("voice")) {
+              headers.push("voice");
+            }
+            const data = results.data.map((row, index) => {
+              if (!row.phrase) {
+                openSnackbar(`Row ${index + 1} is missing a phrase.`, "error");
+                return null; // Invalid row, will be filtered out
+              }
+              if (!row.fileName) {
+                row.fileName = `audio_${index + 1}_${new Date().toISOString().replace(/:/g, "-").slice(0, 19)}.mp3`;
+              } else {
+                row.fileName = row.fileName.endsWith(".mp3") ? row.fileName : `${row.fileName}.mp3`;
+              }
+              row.voice = languagesContainsVoice(row.voice) ? row.voice : "Joey";
+              return row;
+            }).filter(Boolean);
+            setCsvData(csvData.length > 0 ? [...csvData, ...data] : data);
+            setCsvHeaders(csvHeaders.length > 0 ? csvHeaders : headers);
+          } else {
+            openSnackbar("CSV must contain 'phrase' header.", "error");
+            removeCSVFile();
+          }
+        },
+        error: function (error) {
+          console.error("Error parsing CSV: ", error);
+        }
+      });
+    }
+  };
+  const removeCSVFile = () => {
+    setCsvData([]);
+    setCsvHeaders([]);
+  };
+  const handleDeleteRow = rowIndex => {
+    const updatedCsvData = csvData.filter((_, index) => index !== rowIndex);
+    setCsvData(updatedCsvData);
+  };
+  const handleChange = (event, newValue) => {
+    setShowCSV(newValue);
+  };
+  const downloadCSV = (text, filename) => {
+    const element = document.createElement("a");
+    const file = new Blob([text], {
+      type: "text/plain"
+    });
+    element.href = URL.createObjectURL(file);
+    element.download = filename;
+    document.body.appendChild(element); // Required for this to work in FireFox
+    element.click();
+  };
+  const generateAudioForCSV = async () => {
+    const zip = new _jszip.default();
+    const timestamp = new Date().toISOString().replace(/:/g, "-").slice(0, 19);
+    const folder = zip.folder(`audio_files_${timestamp}`);
+    setIsGenerating(true);
+    const fileNameCount = {};
+    try {
+      for (const row of csvData) {
+        const phrase = row.phrase;
+        let fileName = row.fileName || `audio_${new Date().toISOString().replace(/:/g, "-").slice(0, 19)}`;
+        const rowVoice = row.voice || formik.values.actor.voice;
+        if (!phrase) {
+          openSnackbar("Invalid CSV data: 'phrase' column is required", "error");
+          continue;
+        }
+        try {
+          const result = await handleSpeak({
+            text: phrase,
+            learnLanguage: learnLang,
+            voiceName: rowVoice,
+            mute: true,
+            callback: () => {},
+            textContainer: null,
+            languageCode: getVoiceLanguageCode(rowVoice, languages),
+            isHoverText: false,
+            pitch: null,
+            voiceSpeed: null
+          });
+          const audioUrl = result ? result.audioUrl : null;
+          if (!audioUrl) continue;
+          const response = await fetch(audioUrl);
+          if (!response.ok) {
+            openSnackbar(`Failed to fetch audio for phrase: "${phrase}"`, "error");
+            continue;
+          }
+          const blob = await response.blob();
+          let fileNameWithExtension = fileName.endsWith(".mp3") ? fileName : `${fileName}.mp3`;
+          const contentType = blob.type;
+          const allowedAudioTypes = ["audio/mpeg", "audio/wav", "audio/ogg", "application/octet-stream"];
+          if (!allowedAudioTypes.includes(contentType)) {
+            openSnackbar(`Unsupported audio type for phrase: "${phrase}"`, "error");
+            continue;
+          }
+          if (fileNameCount[fileNameWithExtension]) {
+            fileNameCount[fileNameWithExtension] += 1;
+            const baseName = fileNameWithExtension.replace(".mp3", "");
+            fileNameWithExtension = `${baseName}_${fileNameCount[fileNameWithExtension]}.mp3`;
+          } else {
+            fileNameCount[fileNameWithExtension] = 1;
+          }
+          folder.file(fileNameWithExtension, blob);
+        } catch (error) {
+          console.error(`Error generating audio for ${fileName}: ${error.message}`);
+        }
+      }
+
+      // Prepare CSV data with updated headers and rows
+      const csvContent = [csvHeaders.join(","), ...csvData.map(row => csvHeaders.map(header => row[header]).join(","))].join("\n");
+
+      // Add CSV file to zip
+      zip.file(`updated_data_${timestamp}.csv`, csvContent);
+      const zipBlob = await zip.generateAsync({
+        type: "blob"
+      });
+      (0, _fileSaver.saveAs)(zipBlob, `audio_files_${timestamp}.zip`);
+    } catch (error) {
+      console.error(`Error generating audio files: ${error.message}`);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement("form", {
     onSubmit: formik.handleSubmit
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
@@ -248,16 +635,43 @@ function GenerateAudio({
     }
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
-    xs: 12,
+    xs: 6,
+    md: 4,
     style: {
-      textAlign: "center"
+      textAlign: "center",
+      marginTop: "15px"
     }
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: _AudioNuala.default,
     alt: "Audio Nuala",
     style: {
-      maxWidth: "400px",
-      marginTop: "15px"
+      maxWidth: "300px"
+    }
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 6,
+    md: 4,
+    style: {
+      textAlign: "left"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "h5",
+    fontWeight: "bold"
+  }, t("text_studio")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "body1",
+    gutterBottom: true
+  }, t("text_studio_description"))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    md: 8,
+    marginTop: 2,
+    marginBottom: 1,
+    style: {
+      textAlign: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Divider, {
+    sx: {
+      borderBottomWidth: 4
     }
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
@@ -268,9 +682,28 @@ function GenerateAudio({
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12,
-    md: 6,
-    paddingRight: 1
-  }, /*#__PURE__*/_react.default.createElement(_LanguageSelector.default, {
+    md: 12,
+    marginTop: 2,
+    marginBottom: 1.5
+  }, /*#__PURE__*/_react.default.createElement(_material.ToggleButtonGroup, {
+    color: "primary",
+    value: showCSV,
+    exclusive: true,
+    onChange: handleChange,
+    "aria-label": "Platform",
+    sx: {
+      marginLeft: "auto",
+      height: "30px"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.ToggleButton, {
+    value: false
+  }, t("single_phrase")), /*#__PURE__*/_react.default.createElement(_material.ToggleButton, {
+    value: true
+  }, t("list_of_phrases")))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    md: 12
+  }, !showCSV && /*#__PURE__*/_react.default.createElement(_LanguageSelector.default, {
     id: "learnLang",
     name: "learnLang",
     "data-cy": "learnLang",
@@ -287,9 +720,8 @@ function GenerateAudio({
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12,
-    md: 6,
-    paddingLeft: 1
-  }, /*#__PURE__*/_react.default.createElement(ActorForm, {
+    md: 12
+  }, !showCSV && /*#__PURE__*/_react.default.createElement(ActorForm, {
     t: t,
     actor: formik.values.actor,
     handleBlur: formik.handleBlur,
@@ -311,7 +743,7 @@ function GenerateAudio({
     xs: 12,
     md: 12,
     marginBottom: 2
-  }, /*#__PURE__*/_react.default.createElement(_InputHelper.default, {
+  }, !showCSV ? /*#__PURE__*/_react.default.createElement(_InputHelper.default, {
     t: t,
     id: "phraseToSpeak",
     "data-cy": "phraseToSpeak",
@@ -330,7 +762,144 @@ function GenerateAudio({
     learnLang: learnLang,
     helperText: formik.touched.phraseToSpeak && formik.errors.phraseToSpeak,
     error: formik.touched.phraseToSpeak && Boolean(formik.errors.phraseToSpeak)
+  }) : /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    item: true,
+    xs: 12,
+    md: 12,
+    spacing: 1,
+    marginTop: 0.5,
+    marginBottom: 1,
+    sx: {
+      display: "flex",
+      justifyContent: "left",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Button, {
+    startIcon: /*#__PURE__*/_react.default.createElement(_Add.default, null),
+    onClick: () => setDialogOpen(true),
+    variant: "contained",
+    sx: {
+      marginBottom: 2
+    }
+  }, t("add_phrase"))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "upload-csv"
+  }, /*#__PURE__*/_react.default.createElement(_material.Button, {
+    variant: "contained",
+    component: "span",
+    startIcon: /*#__PURE__*/_react.default.createElement(_FileUpload.default, null),
+    sx: {
+      marginBottom: 2
+    }
+  }, t("upload_csv"))), /*#__PURE__*/_react.default.createElement("input", {
+    id: "upload-csv",
+    type: "file",
+    accept: ".csv",
+    onChange: handleCSVUpload,
+    style: {
+      display: "none"
+    }
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Button, {
+    variant: "outlined",
+    startIcon: /*#__PURE__*/_react.default.createElement(_Download.default, null),
+    onClick: downloadCSVTemplate,
+    sx: {
+      marginBottom: 2
+    }
+  }, t("download_csv_template"))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    sx: {
+      justifyContent: "left"
+    }
+  }, csvData.length === 0 && /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "body1",
+    sx: {
+      marginTop: 1
+    }
+  }, t("no_phrases_yet"))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    item: true,
+    xs: 12,
+    md: 12,
+    spacing: 1,
+    marginBottom: 1
+  }, csvData.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_material.TableContainer, {
+    component: _material.Paper
+  }, /*#__PURE__*/_react.default.createElement(_material.Table, {
+    sx: {
+      minWidth: 650
+    },
+    "aria-label": "csv table"
+  }, /*#__PURE__*/_react.default.createElement(_material.TableHead, null, /*#__PURE__*/_react.default.createElement(_material.TableRow, null, csvHeaders.map((header, index) => /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    key: index,
+    align: "center"
+  }, /*#__PURE__*/_react.default.createElement("strong", null, header))), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    align: "center"
+  }, /*#__PURE__*/_react.default.createElement("strong", null, t("play_audio"))), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    align: "center"
+  }, /*#__PURE__*/_react.default.createElement("strong", null, t("delete")), " "))), /*#__PURE__*/_react.default.createElement(_material.TableBody, null, csvData.map((row, rowIndex) => /*#__PURE__*/_react.default.createElement(_material.TableRow, {
+    key: rowIndex
+  }, csvHeaders.map((header, colIndex) => /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    key: colIndex,
+    align: "center"
+  }, row[header] || null)), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    align: "center"
+  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    onClick: () => playPhraseAudio(row.phrase, row.voice),
+    "aria-label": "play"
+  }, /*#__PURE__*/_react.default.createElement(_PlayArrow.default, null))), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    align: "center"
+  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    onClick: () => handleDeleteRow(rowIndex) // Call the row deletion function
+    ,
+    "aria-label": "delete"
+  }, /*#__PURE__*/_react.default.createElement(_Delete.default, null))))))))))), csvData.length > 0 && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    sx: {
+      display: "flex",
+      justifyContent: "left",
+      alignItems: "center",
+      marginTop: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_lab.LoadingButton, {
+    variant: "contained",
+    onClick: generateAudioForCSV,
+    loading: isGenerating,
+    startIcon: /*#__PURE__*/_react.default.createElement(_Download.default, null),
+    sx: {
+      marginBottom: 2
+    }
+  }, t("download_audio")))), /*#__PURE__*/_react.default.createElement(AddPhraseDialog, {
+    t: t,
+    open: dialogOpen,
+    onClose: () => setDialogOpen(false),
+    handleAddPhrase: handleAddPhrase,
+    initialValues: {
+      learnLang: "english",
+      actor: {
+        voice: "",
+        voiceLanguageCode: "",
+        voicePitch: "",
+        picture: ""
+      },
+      phraseToSpeak: "",
+      voiceSpeed: 50
+    },
+    languages: languages,
+    avatars: avatars,
+    handleSpeak: handleSpeak
+  })), !showCSV && /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     item: true,
     xs: 12,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1173",
+  "version": "0.1.1174",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -41,6 +41,7 @@
     "easymde": "2.18.0",
     "emoji-mart": "5.5.2",
     "export-to-csv": "^1.3.0",
+    "file-saver": "^2.0.5",
     "formik": "^2.2.9",
     "fs": "^0.0.1-security",
     "immutability-helper": "^3.0",
@@ -48,6 +49,7 @@
     "json-2-csv": "^5.5.1",
     "jsonlint": "^1.6.3",
     "jsonrepair": "^3.6.0",
+    "jszip": "^3.10.1",
     "luxon": "^3.3.0",
     "moment": "^2.29.4",
     "n2words": "^1.21.0",