@nualang/nualang-ui-components 0.1.1172 → 0.1.1174

package/dist/Dialogs/FeedbackDialog/FeedbackDialog.js

@@ -24,7 +24,6 @@ const StyledDiv = (0, _material.styled)("div")(() => ({
 }));
 function CreateFeedbackDialog({
   handleSubmit = () => {},
-  attendees = [],
   attendeesData = [],
   data = {},
   handleGradeConversation = () => {},
@@ -95,7 +94,6 @@ function CreateFeedbackDialog({
     handleGradeConversation: handleGradeConversation,
     aiGrade: aiGrade,
     attendeesData: attendeesData,
-    attendees: attendees,
     handleClosefeedbackForm: handleClosefeedbackForm,
     handleSubmit: handleSubmit,
     initialValues: values,
@@ -119,7 +117,6 @@ CreateFeedbackDialog.propTypes = {
   saveTranscript: _propTypes.default.func,
   attendeesData: _propTypes.default.array,
   t: _propTypes.default.func,
-  attendees: _propTypes.default.object,
   data: _propTypes.default.object,
   handleGradeConversation: _propTypes.default.func,
   aiGrade: _propTypes.default.string,

package/dist/Dialogs/RecordingDialog/RecordingDialog.js

@@ -78,7 +78,6 @@ function RecordingDialog({
   open,
   handleClose,
   meetingID,
-  attendees,
   meetingPrompt,
   isTeacher,
   goToTimestamp,
@@ -95,7 +94,7 @@ function RecordingDialog({
   handleCreateFeedback,
   attendeesData
 }) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ResponsiveDialog.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, attendeesData.length > 0 && /*#__PURE__*/_react.default.createElement(_ResponsiveDialog.default, {
     open: open,
     handleClose: handleClose,
     maxWidth: 1,
@@ -145,16 +144,15 @@ function RecordingDialog({
   }, /*#__PURE__*/_react.default.createElement(_RecordingInfo.default, {
     t: t,
     meetingID: meetingID,
-    attendees: attendees,
     attendeesData: attendeesData,
     meetingPrompt: meetingPrompt,
-    meetingTopic: meetingTopic
+    meetingTopic: meetingTopic,
+    isTeacher: isTeacher
   }), isTeacher ? /*#__PURE__*/_react.default.createElement(_FeedbackDialog.default, {
     t: t,
     loading: loading,
     saveTranscript: saveTranscript,
     attendeesData: attendeesData,
-    attendees: attendees,
     data: selectedRecording,
     selectedRecording: selectedRecording,
     handleGradeConversation: handleGradeConversation,
@@ -172,8 +170,7 @@ RecordingDialog.propTypes = {
   open: _propTypes.default.bool,
   handleClose: _propTypes.default.func,
   meetingID: _propTypes.default.string,
-  attendees: _propTypes.default.object,
-  attendeesData: _propTypes.default.object,
+  attendeesData: _propTypes.default.array,
   meetingTopic: _propTypes.default.string,
   meetingPrompt: _propTypes.default.string,
   isTeacher: _propTypes.default.bool,

package/dist/Forms/FeedbackForm/FeedbackForm.js

@@ -744,9 +744,9 @@ FeedbackForm.propTypes = {
   handleChange: _propTypes.default.func,
   handleBlur: _propTypes.default.func,
   handleSubmit: _propTypes.default.func,
-  attendees: _propTypes.default.object,
   aiGrade: _propTypes.default.object,
-  t: _propTypes.default.func
+  t: _propTypes.default.func,
+  attendeesData: _propTypes.default.array
 };
 function CreateFeedbackForm({
   initialValues = {
@@ -780,7 +780,6 @@ function CreateFeedbackForm({
   },
   handleSubmit: handleSubmitFeedback,
   enableReinitialize,
-  attendees,
   attendeesData,
   handleGradeConversation,
   aiGrade = {},
@@ -839,7 +838,6 @@ function CreateFeedbackForm({
         handleClosefeedbackForm: handleClosefeedbackForm,
         handleChange: handleChange,
         values: values,
-        attendees: attendees,
         attendeesData: attendeesData,
         handleGradeConversation: handleGradeConversation,
         conversation: conversation,
@@ -869,7 +867,7 @@ CreateFeedbackForm.propTypes = {
   onSubmit: _propTypes.default.func,
   handleSubmit: _propTypes.default.func,
   handleGradeConversation: _propTypes.default.func,
-  attendees: _propTypes.default.object,
   aiGrade: _propTypes.default.object,
-  conversation: _propTypes.default.object
+  conversation: _propTypes.default.object,
+  attendeesData: _propTypes.default.array
 };

package/dist/Forms/RecordingInfo/RecordingInfo.js

@@ -4,19 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = RecordingInfo;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _FeedbackInfoDialog = _interopRequireDefault(require("../../Dialogs/FeedbackInfoDialog/FeedbackInfoDialog"));
 var _material = require("@mui/material");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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; }
 // eslint-disable-next-line no-unused-vars
 
 function RecordingInfo({
   meetingPrompt = "",
   meetingTopic = "",
   t = text => text,
-  attendeesData
+  attendeesData,
+  isTeacher
 }) {
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+  const [viewFeedbackOpen, setViewFeedbackOpen] = (0, _react.useState)(false);
+  const [recordingFeedback, setRecordingFeedback] = (0, _react.useState)({});
+  const theme = (0, _material.useTheme)();
+  const isLgUp = (0, _material.useMediaQuery)(theme.breakpoints.up("lg"));
+  const handleCloseViewFeedback = () => {
+    setViewFeedbackOpen(false);
+  };
+  const handleViewFeedbackOpen = attendee => {
+    setRecordingFeedback(attendee.feedback);
+    setViewFeedbackOpen(true);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
     p: 3
   }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     fontWeight: "bold",
@@ -30,31 +45,71 @@ function RecordingInfo({
     variant: "h6"
   }, t("discussion_prompt")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "body1"
-  }, meetingPrompt)), /*#__PURE__*/_react.default.createElement(_material.Box, {
-    mt: 3
+  }, meetingPrompt)), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    spacing: 1,
+    sx: {
+      mt: 2
+    },
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     fontWeight: "bold",
     variant: "h6"
-  }, t("attendees")), /*#__PURE__*/_react.default.createElement(_material.List, null, [attendeesData].flat()?.map((attendee, index) => /*#__PURE__*/_react.default.createElement(_material.Box, {
-    key: attendee?.memberId,
+  }, t("attendees"))), [attendeesData].flat()?.map((attendee, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: attendee.memberId
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    lg: isTeacher ? 4 : 12
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
     display: "flex",
     alignItems: "center",
-    sx: {
-      marginBottom: 2
-    }
+    sx: isLgUp || !isTeacher ? {
+      mb: 2
+    } : {}
   }, /*#__PURE__*/_react.default.createElement(_material.Avatar, {
-    alt: attendee?.username,
-    src: attendee?.userImage
+    alt: attendee.username,
+    src: attendee.userImage
   }), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     sx: {
       marginLeft: 2
     }
-  }, attendee?.username))))));
+  }, attendee.username))), isTeacher && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    lg: 8,
+    sx: isLgUp ? {
+      display: "flex",
+      justifyContent: "flex-end",
+      alignItems: "center"
+    } : {}
+  }, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+    title: Object.keys(attendee.feedback).length === 0 ? t("no_feedback") : "",
+    placement: "top",
+    arrow: true
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_material.Button, {
+    "aria-label": t("view_feedback"),
+    variant: "outlined",
+    onClick: () => handleViewFeedbackOpen(attendee),
+    disabled: Object.keys(attendee.feedback).length === 0,
+    sx: isLgUp ? {
+      mb: 2
+    } : {
+      mb: 1
+    }
+  }, t("view_feedback"))))))))), /*#__PURE__*/_react.default.createElement(_FeedbackInfoDialog.default, {
+    feedbackOpen: viewFeedbackOpen,
+    feedbackHandleClose: handleCloseViewFeedback,
+    recordingFeedback: recordingFeedback,
+    t: t
+  }));
 }
 RecordingInfo.propTypes = {
   meetingPrompt: _propTypes.default.string,
   meetingTopic: _propTypes.default.string,
-  meetingID: _propTypes.default.string,
-  attendees: _propTypes.default.array,
-  t: _propTypes.default.func
+  t: _propTypes.default.func,
+  attendeesData: _propTypes.default.array
 };

package/dist/Forms/RecordingInfo/RecordingInfo.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.props = exports.default = exports.Default = void 0;
+exports.props = exports.default = exports.Teacher = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _RecordingInfo = _interopRequireDefault(require("./RecordingInfo"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -11,8 +11,58 @@ const Template = args => /*#__PURE__*/_react.default.createElement(_RecordingInf
 const props = exports.props = {
   meetingTopic: "The Beach",
   meetingPrompt: "Going to the beach with friends",
-  emails: ["aaron.cullen@fathomtech.io", "connor.cawley@fathomtech.io", "stephen.kelly@fathomtech.io"],
-  meetingID: "abcdef123456"
+  attendeesData: [{
+    classroomId: "test-classroom",
+    createdAt: 1719919556228,
+    createdBy: "user1",
+    memberId: "user1",
+    role: "student",
+    updatedAt: 1719919556228,
+    username: "Diego Maradona",
+    feedback: {
+      feedback1: [{
+        feedbackLevel: 0,
+        feedbackLevelName: "Novice Low",
+        methodCheck: "Teacher"
+      }],
+      feedback2: [{
+        feedbackLevel: 1,
+        feedbackLevelName: "Novice Mid",
+        methodCheck: "Teacher"
+      }],
+      feedback3: [{
+        feedbackLevel: 2,
+        feedbackLevelName: "Novice High",
+        methodCheck: "Teacher"
+      }],
+      feedback4: [{
+        feedbackLevel: 3,
+        feedbackLevelName: "Intermediate Low",
+        methodCheck: "Teacher"
+      }],
+      feedback5: [{
+        feedbackLevel: 3,
+        feedbackLevelName: "Intermediate Low",
+        methodCheck: "Teacher"
+      }],
+      feedback6: [{
+        feedbackLevel: 0,
+        feedbackLevelName: "Not Applicable",
+        fromTeacher: true
+      }],
+      feedbackText: "You did great!",
+      gradingOption: "Individual Grade"
+    }
+  }, {
+    classroomId: "test-classroom",
+    createdAt: 1719919556229,
+    createdBy: "user2",
+    memberId: "user2",
+    role: "student",
+    updatedAt: 1719919556229,
+    username: "Cristiano Ronaldofsdfsfsfsfdsfsdfds",
+    feedback: {}
+  }]
 };
 var _default = exports.default = {
   title: "Forms/RecordingInfo",
@@ -24,4 +74,10 @@ Default.args = {
   ...props,
   loading: false
 };
-Default.storyName = "default";
+Default.storyName = "default";
+const Teacher = exports.Teacher = Template.bind({});
+Teacher.args = {
+  ...props,
+  isTeacher: true
+};
+Teacher.storyName = "teacher";

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/Classrooms/ViewClassroom/ViewClassroom.js

@@ -374,7 +374,8 @@ function Classroom({
     handleEditDiscussion,
     editBackgroundImages,
     editMeetingImages,
-    setSelectedDiscussion
+    setSelectedDiscussion,
+    meetingRecsData
   } = vchatProps;
   const isSmallScreen = (0, _useMediaQuery.default)("(max-width:410px)");
   const {
@@ -837,7 +838,8 @@ function Classroom({
       getMeeting: getMeeting,
       getRecordings: getRecordings,
       selectedRecording: selectedRecording,
-      setSelectedRecording: setSelectedRecording
+      setSelectedRecording: setSelectedRecording,
+      meetingRecsData: meetingRecsData
     }))), discussions?.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
       id: "discussScheduled"
     }, /*#__PURE__*/_react.default.createElement(_ScheduleListCards.default, {

package/dist/Screens/Dashboard/Dashboard.js

@@ -14,8 +14,6 @@ var _Forum = _interopRequireDefault(require("@mui/icons-material/Forum"));
 var _BubbleChart = _interopRequireDefault(require("@mui/icons-material/BubbleChart"));
 var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
 var _Courses = _interopRequireDefault(require("../../Lists/Courses"));
-var _Roleplays = _interopRequireDefault(require("../../Lists/Roleplays"));
-var _Bots = _interopRequireDefault(require("../../Lists/Bots"));
 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; }
@@ -50,24 +48,12 @@ function Dashboard({
   t = text => text,
   completions = [],
   avatars = [],
-  newRoleplays = [],
-  handleSelectRoleplay,
-  newBots = [],
-  handleSelectBot,
-  handleShareBot,
-  handlePlayBot,
-  handleShareRoleplay,
-  handlePlayRoleplay,
   newCourses = [],
   recommendedCourses = [],
   popularCourses = [],
   isNewCoursesLoading,
   isRecommendedCoursesLoading,
-  isNewRoleplaysLoading,
-  isNewBotsLoading,
   isPopularCoursesLoading,
-  handleDuplicateBot,
-  handleDuplicateRoleplay,
   singleLineGrid = true,
   singleLineGridCols = 4,
   handleStartCourse,
@@ -91,7 +77,6 @@ function Dashboard({
   getCourseMember,
   getCourseMembers,
   username,
-  subscription,
   memberId,
   handleDuplicateCourse
 }) {
@@ -317,98 +302,5 @@ function Dashboard({
     handleDuplicateCourse: handleDuplicateCourse
   })), /*#__PURE__*/_react.default.createElement(_material.Box, {
     pb: 2
-  }, /*#__PURE__*/_react.default.createElement(_material.Divider, null))) : null, isNewRoleplaysLoading || newRoleplays.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
-    pb: 2
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.header
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.headerText
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    variant: "h5",
-    component: "h2"
-  }, newRoleplays.length > 0 ? t("new_roleplays") : /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
-    variant: "rectangular",
-    height: 32,
-    width: 250
-  }))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("find_roleplay")
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: handleSearchRoleplays,
-    "aria-label": t("find_roleplay"),
-    color: "inherit",
-    "data-cy": "search-roleplay-fab",
-    size: "large",
-    role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("create_roleplay")
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: handleCreateRoleplay,
-    "aria-label": t("create_roleplay"),
-    color: "inherit",
-    "data-cy": "add-roleplay-fab",
-    size: "large",
-    role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))), /*#__PURE__*/_react.default.createElement(_Roleplays.default, {
-    t: t,
-    roleplays: Array.isArray(newRoleplays) && newRoleplays.length ? newRoleplays : null,
-    handleSelectRoleplay: handleSelectRoleplay,
-    handlePlayRoleplay: handlePlayRoleplay,
-    handleShareRoleplay: handleShareRoleplay,
-    selectText: "play",
-    avatars: avatars,
-    handleDuplicateRoleplay: handleDuplicateRoleplay,
-    singleLineGrid: singleLineGrid,
-    singleLineGridCols: singleLineGridCols,
-    handleViewUserProfile: handleViewUserProfile,
-    subscription: subscription
-  })), /*#__PURE__*/_react.default.createElement(_material.Box, {
-    pb: 2
-  }, /*#__PURE__*/_react.default.createElement(_material.Divider, null))) : null, isNewBotsLoading || newBots.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
-    pb: 2
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.header
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.headerText
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    variant: "h5",
-    component: "h2"
-  }, newBots.length > 0 ? t("new_bots") : /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
-    variant: "rectangular",
-    height: 32,
-    width: 250
-  }))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("find_bot")
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: handleSearchBots,
-    "aria-label": t("find_bot"),
-    color: "inherit",
-    "data-cy": "search-bot-fab",
-    size: "large",
-    role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("create_bot")
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: handleCreateBot,
-    "aria-label": t("create_bot"),
-    color: "inherit",
-    "data-cy": "add-bot-fab",
-    size: "large",
-    role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))), /*#__PURE__*/_react.default.createElement(_Bots.default, {
-    t: t,
-    bots: Array.isArray(newBots) && newBots.length ? newBots : null,
-    handleSelectBot: handleSelectBot,
-    handlePlayBot: handlePlayBot,
-    handleShareBot: handleShareBot,
-    selectText: "play",
-    avatars: avatars,
-    handleDuplicateBot: handleDuplicateBot,
-    singleLineGrid: singleLineGrid,
-    singleLineGridCols: singleLineGridCols,
-    handleViewUserProfile: handleViewUserProfile,
-    subscription: subscription,
-    disablePreview: true
-  })), /*#__PURE__*/_react.default.createElement(_material.Box, {
-    pb: 2
   }, /*#__PURE__*/_react.default.createElement(_material.Divider, null))) : null);
 }

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/dist/Tables/SubmissionsTableCards/SubmissionsTableCards.js

@@ -34,11 +34,13 @@ const SubmissionsTableCards = (0, _mui.withStyles)(({
   selectedRecording,
   setSelectedRecording,
   saveTranscript = () => {},
+  meetingRecsData,
   t = text => text
 }) => {
   const [open, setOpen] = (0, _react.useState)(false);
   const [feedbackOpen, setFeedbackOpen] = (0, _react.useState)(false);
   const [cardsToShow, setCardsToShow] = (0, _react.useState)(3);
+  const [attendeesData, setAttendeesData] = (0, _react.useState)([]);
 
   // const handleRefresh = async () => {
   //     await getRecordings();
@@ -48,26 +50,23 @@ const SubmissionsTableCards = (0, _mui.withStyles)(({
     setSelectedRecording(recording);
     setOpen(true);
   };
-  const handleFeedbackJoin = recording => {
-    setSelectedRecording(recording);
-    setFeedbackOpen(true);
-  };
-  const attendeeUsernames = [];
-  userData.forEach(user => {
-    [selectedRecording?.attendees].flat().forEach(attendee => {
-      if (user.memberId === attendee) {
-        attendeeUsernames.push(user?.username);
-      }
-    });
-  });
-  const attendeesData = [];
-  userData.forEach(user => {
-    [selectedRecording?.attendees].flat().forEach(attendee => {
-      if (user.memberId === attendee) {
-        attendeesData.push(user);
-      }
-    });
-  });
+  (0, _react.useEffect)(() => {
+    if (open && meetingRecsData) {
+      const attendees = [selectedRecording?.attendees].flat();
+      const newAttendeesData = userData.filter(user => attendees.includes(user.memberId)).map(user => {
+        const recordingFeedback = meetingRecsData.find(rec => rec.userId === user.memberId);
+        return {
+          ...user,
+          feedback: recordingFeedback ? {
+            ...recordingFeedback,
+            userId: undefined
+          } : {}
+        };
+      });
+      setAttendeesData(newAttendeesData);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, meetingRecsData]);
   const uniqueMeetingIds = [];
   const uniqueSubmissions = submissionsTableData.filter(row => {
     const meetingId = row.meetingId;
@@ -77,6 +76,10 @@ const SubmissionsTableCards = (0, _mui.withStyles)(({
     }
     return false;
   });
+  const handleClose = () => {
+    setOpen(false);
+    setAttendeesData([]);
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
     sx: {
       marginBottom: 2
@@ -89,19 +92,11 @@ const SubmissionsTableCards = (0, _mui.withStyles)(({
     className: classes.grow
   }), loading ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_LoadingCard.default, null), /*#__PURE__*/_react.default.createElement(_LoadingCard.default, null)) : uniqueSubmissions && uniqueSubmissions.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, uniqueSubmissions.slice(0, cardsToShow).map(row => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SubmissionsCard.default, {
     t: t,
-    userData: userData,
     submissionsTableData: row,
     handleView: () => handleJoin(row),
-    handleViewFeedback: () => handleFeedbackJoin(row),
-    selectedRecording: selectedRecording,
-    setSelectedRecording: setSelectedRecording,
-    open: open,
-    handleClose: () => setOpen(false),
-    feedbackOpen: feedbackOpen,
-    feedbackHandleClose: () => setFeedbackOpen(false)
+    userData: userData
   }), /*#__PURE__*/_react.default.createElement(_RecordingDialog.default, {
     t: t,
-    attendees: attendeeUsernames,
     attendeesData: attendeesData,
     open: open,
     row: row,
@@ -112,7 +107,7 @@ const SubmissionsTableCards = (0, _mui.withStyles)(({
     handleGradeConversation: handleGradeConversation,
     aiGrade: aiGrade,
     s3EventsUrl: s3EventsUrl,
-    handleClose: () => setOpen(false),
+    handleClose: handleClose,
     emails: row?.attendees,
     meetingID: selectedRecording?.meetingId,
     meetingPrompt: selectedRecording?.meetingPrompt,
@@ -120,10 +115,10 @@ const SubmissionsTableCards = (0, _mui.withStyles)(({
     isTeacher: true,
     goToTimestamp: goToTimestamp,
     conversation: conversation,
-    handleCreateFeedback: handleCreateFeedback
+    handleCreateFeedback: handleCreateFeedback,
+    meetingRecsData: meetingRecsData
   }), /*#__PURE__*/_react.default.createElement(_FeedbackInfoDialog.default, {
     t: t,
-    attendees: attendeeUsernames,
     feedbackOpen: feedbackOpen,
     handleCreateFeedback: handleCreateFeedback,
     feedbackHandleClose: () => setFeedbackOpen(false),
@@ -167,6 +162,7 @@ SubmissionsTableCards.propTypes = {
   })),
   classes: _propTypes.default.object.isRequired,
   propsPageChange: _propTypes.default.func,
-  propsRowChange: _propTypes.default.func
+  propsRowChange: _propTypes.default.func,
+  attendeesData: _propTypes.default.array
 };
 var _default = exports.default = SubmissionsTableCards;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1172",
+  "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",