@nualang/nualang-ui-components 0.1.1254 → 0.1.1255

package/dist/Dialogs/GeneratePhrases/GeneratePhrases.js

@@ -8,12 +8,68 @@ var _react = require("react");
 var _ResponsiveDialog = _interopRequireDefault(require("../ResponsiveDialog/ResponsiveDialog"));
 var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
 var _reactRouterDom = require("react-router-dom");
 var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
 var _NualaCreating = _interopRequireDefault(require("../../Misc/NualaCreating/NualaCreating"));
 var _InputHelper = _interopRequireDefault(require("../../Forms/InputHelper/InputHelper"));
+var _mui = require("tss-react/mui");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const useStyles = (0, _mui.makeStyles)()(theme => ({
+  phraseText: {
+    width: "80%",
+    wordBreak: "break-all"
+  },
+  phraseTextSmall: {
+    width: "60%",
+    wordBreak: "break-all"
+  },
+  avatar: {
+    cursor: "pointer",
+    margin: theme.spacing()
+  },
+  avatarNoClick: {
+    margin: theme.spacing()
+  }
+}));
+function Phrase({
+  alternativeVersions,
+  translations,
+  phrase
+}) {
+  const theme = (0, _styles.useTheme)();
+  const {
+    classes
+  } = useStyles();
+  const isLargeScreen = (0, _material.useMediaQuery)(theme.breakpoints.up("sm"));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
+    "data-cy": "phrase-list-item",
+    children: isLargeScreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+      container: true,
+      sx: {
+        width: "100%"
+      },
+      className: classes.phraseText,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+        className: classes.phrases,
+        primary: `${phrase}${Array.isArray(alternativeVersions) && alternativeVersions.length ? " - " : ""}${(alternativeVersions || []).join(", ")}`,
+        secondary: (translations || []).join(", ")
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+      container: true,
+      sx: {
+        width: "100%"
+      },
+      className: classes.phraseTextSmall,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+        className: classes.phrases,
+        primary: `${phrase}${Array.isArray(alternativeVersions) && alternativeVersions.length ? " - " : ""}${(alternativeVersions || []).join(", ")}`,
+        secondary: (translations || []).join(", ")
+      })
+    })
+  });
+}
 function GeneratePhrases({
   t,
   open,
@@ -31,6 +87,7 @@ function GeneratePhrases({
   const [values, setValues] = (0, _react.useState)(initialValues);
   const [errorMessage, setErrorMessage] = (0, _react.useState)(null);
   const [phraseType, setPhraseType] = (0, _react.useState)("words");
+  const [generatedPhrases, setGeneratedPhrases] = (0, _react.useState)([]);
   const isPhrases = currentPhrases && currentPhrases.length > 0;
   const phrases = isPhrases ? currentPhrases.map(({
     phrase,
@@ -130,22 +187,30 @@ function GeneratePhrases({
       const phrasesArray = extractPhrasesArray(chatGptResponse);
       const parsedPhrases = JSON.parse(phrasesArray);
       if (!validateResponse(parsedPhrases)) {
-        throw new Error("Invalid response from GPT-3.5");
+        throw new Error("Invalid response from GPT-4o-mini");
       }
-      handleAppendPhrases(parsedPhrases);
+      setGeneratedPhrases(parsedPhrases);
       setIsGenerating(false);
-      handleClose();
     } catch (error) {
       console.error(error);
       setIsGenerating(false);
       setErrorMessage("There was a problem generating phrases. Please try again.");
     }
   };
+  const handleConfirm = () => {
+    handleAppendPhrases(generatedPhrases);
+    setGeneratedPhrases([]);
+    handleClose();
+  };
+  const handleCancel = () => {
+    setGeneratedPhrases([]);
+    handleClose();
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveDialog.default, {
     open: open,
-    handleClose: handleClose,
-    handleSubmit: handleGeneratePhrases,
-    submitText: t("generate_phrases"),
+    handleClose: handleCancel,
+    handleSubmit: generatedPhrases.length > 0 ? handleConfirm : handleGeneratePhrases,
+    submitText: generatedPhrases.length > 0 ? t("confirm") : t("generate_phrases"),
     dialogTitle: isGenerating ? t("generating_phrases") : t("generate_phrases"),
     isSubmitDisabled: isGenerating,
     isExperimentalFeature: true,
@@ -170,111 +235,119 @@ function GeneratePhrases({
       size: 12,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.LinearProgress, {})
     }), !isGenerating && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        fontSize: 14,
-        sx: {
-          opacity: 0.8,
-          marginBottom: 1
-        },
-        children: t("required_field")
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        size: 12,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Alert, {
-          severity: "info",
-          children: [t("experimental_feature_desc_phrases"), " -", " ", /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.Link, {
-            to: "/contact",
-            children: [t("contact_form"), "."]
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        size: 12,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputHelper.default, {
-          t: t,
-          id: "phrasesTopic",
-          name: "phrasesTopic",
-          "data-cy": "phrasesTopic",
-          label: t("choose_topic_for_phrases"),
-          value: values.phrasesTopic,
-          type: "text",
-          margin: "normal",
-          variant: "outlined",
-          fullWidth: true,
-          required: true,
-          onChange: handleChange,
-          multiline: true,
-          rows: 3
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        mb: 2,
-        size: 12,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
-          id: "topicGoal",
-          name: "topicGoal",
-          "data-cy": "topicGoal",
-          label: t("topic_goal"),
-          placeholder: t("topic_goal_placeholder"),
-          value: values.topicGoal,
-          type: "text",
-          margin: "normal",
-          variant: "outlined",
-          fullWidth: true,
-          onChange: handleChange,
-          InputProps: {
-            endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
-              position: "end",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-                title: t("topic_goal_info_text"),
-                placement: "top",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Info.default, {
-                  fontSize: "small",
-                  style: {
-                    color: "lightgrey"
-                  }
+      children: [generatedPhrases.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          fontSize: 14,
+          sx: {
+            opacity: 0.8,
+            marginBottom: 1
+          },
+          children: t("required_field")
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          size: 12,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Alert, {
+            severity: "info",
+            children: [t("experimental_feature_desc_phrases"), " -", " ", /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.Link, {
+              to: "/contact",
+              children: [t("contact_form"), "."]
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          size: 12,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputHelper.default, {
+            t: t,
+            id: "phrasesTopic",
+            name: "phrasesTopic",
+            "data-cy": "phrasesTopic",
+            label: t("choose_topic_for_phrases"),
+            value: values.phrasesTopic,
+            type: "text",
+            margin: "normal",
+            variant: "outlined",
+            fullWidth: true,
+            required: true,
+            onChange: handleChange,
+            multiline: true,
+            rows: 3
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          mb: 2,
+          size: 12,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+            id: "topicGoal",
+            name: "topicGoal",
+            "data-cy": "topicGoal",
+            label: t("topic_goal"),
+            placeholder: t("topic_goal_placeholder"),
+            value: values.topicGoal,
+            type: "text",
+            margin: "normal",
+            variant: "outlined",
+            fullWidth: true,
+            onChange: handleChange,
+            InputProps: {
+              endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+                position: "end",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+                  title: t("topic_goal_info_text"),
+                  placement: "top",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Info.default, {
+                    fontSize: "small",
+                    style: {
+                      color: "lightgrey"
+                    }
+                  })
                 })
               })
+            }
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          mb: 2,
+          size: 12,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TextField, {
+            select: true,
+            label: t("phrase_type"),
+            value: phraseType,
+            onChange: e => setPhraseType(e.target.value),
+            fullWidth: true,
+            variant: "outlined",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+              value: "words",
+              children: t("words")
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+              value: "sentences",
+              children: t("sentences")
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+          size: 12,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            id: "input-slider",
+            gutterBottom: true,
+            children: t("how_many_phrases", {
+              phraseAmount: values.phraseAmount
             })
-          }
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        mb: 2,
-        size: 12,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TextField, {
-          select: true,
-          label: t("phrase_type"),
-          value: phraseType,
-          onChange: e => setPhraseType(e.target.value),
-          fullWidth: true,
-          variant: "outlined",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
-            value: "words",
-            children: t("words")
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
-            value: "sentences",
-            children: t("sentences")
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Slider, {
+            "aria-label": "Number of phrases",
+            defaultValue: values.phraseAmount,
+            valueLabelDisplay: "auto",
+            value: values.phraseAmount,
+            onChange: (e, value) => setValues({
+              ...values,
+              phraseAmount: value
+            }),
+            step: 2,
+            marks: true,
+            min: 4,
+            max: 16
           })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
-        size: 12,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          id: "input-slider",
-          gutterBottom: true,
-          children: t("how_many_phrases", {
-            phraseAmount: values.phraseAmount
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Slider, {
-          "aria-label": "Number of phrases",
-          defaultValue: values.phraseAmount,
-          valueLabelDisplay: "auto",
-          value: values.phraseAmount,
-          onChange: (e, value) => setValues({
-            ...values,
-            phraseAmount: value
-          }),
-          step: 2,
-          marks: true,
-          min: 4,
-          max: 16
         })]
+      }), generatedPhrases.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          children: t("generated_phrases")
+        }), generatedPhrases.map((phrase, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Phrase, {
+          ...phrase
+        }, index))]
       }), errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
         mt: 2,
         size: 12,

package/dist/Tables/Progress/ProgressTable.js

@@ -346,10 +346,10 @@ function AssignmentCellData({
     if (filter === "percentage_complete" && data.percentComplete) {
       cellData = data.percentComplete;
       cellData.type = "percent";
-    } else if (filter === "correct_answer_percentage" && data.percentCorrect) {
+    } else if (filter === "correct_answer_percentage" && data.percentCorrect !== null) {
       cellData = data.percentCorrect;
       cellData.type = "correct";
-    } else if (filter === "avg_pronunciation_score" && data.avgPronunciationScore) {
+    } else if (filter === "avg_pronunciation_score" && data.avgPronunciationScore !== null) {
       cellData = data.avgPronunciationScore;
       cellData.type = "avgPronuc";
     }

package/dist/Tables/Progress/utils.js

@@ -89,25 +89,16 @@ const formatMemberCourseCompletions = (courses = [], completions = [], assignmen
 };
 exports.formatMemberCourseCompletions = formatMemberCourseCompletions;
 const formatMemberAssignmentCompletions = (assignments = [], courses = [], completions = []) => {
-  const stats = assignments.reduce((obj, v) => {
-    const assignmentCourseCompletions = formatMemberCourseCompletions(courses, completions, v?.exercises);
-    const result = Object.values(assignmentCourseCompletions).reduce((a, course) => {
-      if (a && course && course.percentComplete) {
-        a.percentComplete.completed += course.percentComplete.completed;
-        a.percentComplete.total += course.percentComplete.total;
-        a.percentComplete.percentage = Math.floor(a.percentComplete.completed / a.percentComplete.total * 100);
-      }
-      if (a && course && course.percentCorrect) {
-        a.percentCorrect.completed += course.percentCorrect.completed;
-        a.percentCorrect.total += course.percentCorrect.total;
-        a.percentCorrect.percentage = Math.floor(a.percentCorrect.completed / a.percentCorrect.total * 100);
-      }
-      if (a && course && course.avgPronunciationScore && course.avgPronunciationScore.percentage > 0) {
-        a.avgPronunciationScore.total += 1;
-        a.avgPronunciationScore.percentage = Math.floor(course.avgPronunciationScore.percentage / a.avgPronunciationScore.total);
-      }
-      return a;
-    }, {
+  const stats = assignments.reduce((obj, assignment) => {
+    const assignmentCompletions = completions.filter(completion => assignment.exercises?.some(e => {
+      if (e.name && completion.exercise !== e.name) return false;
+      if (e.roleplayId && completion.roleplayId !== e.roleplayId) return false;
+      if (e.botId && completion.botId !== e.botId) return false;
+      if (e.courseSectionTopicId && `${completion.courseSectionId}|${completion.topicId}` !== e.courseSectionTopicId) return false;
+      return true;
+    }));
+    const assignmentCourseCompletions = formatMemberCourseCompletions(courses, assignmentCompletions, assignment?.exercises);
+    const accumulator = {
       percentComplete: {
         completed: 0,
         total: 0,
@@ -120,10 +111,35 @@ const formatMemberAssignmentCompletions = (assignments = [], courses = [], compl
       },
       avgPronunciationScore: {
         total: 0,
+        sum: 0,
         percentage: 0
       }
+    };
+    Object.values(assignmentCourseCompletions).forEach(course => {
+      if (course?.percentComplete) {
+        accumulator.percentComplete.completed += course.percentComplete.completed || 0;
+        accumulator.percentComplete.total += course.percentComplete.total || 0;
+      }
+      if (course?.percentCorrect) {
+        accumulator.percentCorrect.completed += course.percentCorrect.completed || 0;
+        accumulator.percentCorrect.total += course.percentCorrect.total || 0;
+      }
+      if (course?.avgPronunciationScore && course.avgPronunciationScore.percentage >= 0) {
+        accumulator.avgPronunciationScore.total += 1;
+        accumulator.avgPronunciationScore.sum += course.avgPronunciationScore.percentage;
+      }
     });
-    obj[v.assignmentId] = result;
+    if (accumulator.percentComplete.total > 0) {
+      accumulator.percentComplete.percentage = Math.floor(accumulator.percentComplete.completed / accumulator.percentComplete.total * 100);
+    }
+    if (accumulator.percentCorrect.total > 0) {
+      accumulator.percentCorrect.percentage = Math.floor(accumulator.percentCorrect.completed / accumulator.percentCorrect.total * 100);
+    }
+    if (accumulator.avgPronunciationScore.total > 0) {
+      accumulator.avgPronunciationScore.percentage = Math.floor(accumulator.avgPronunciationScore.sum / accumulator.avgPronunciationScore.total);
+    }
+    delete accumulator.avgPronunciationScore.sum;
+    obj[assignment.assignmentId] = accumulator;
     return obj;
   }, {});
   return stats;

package/dist/utils/index.js

@@ -144,7 +144,15 @@ const getScoreValues = (type, id, completions) => {
   percentCorrect.total = totalAnswers;
   percentCorrect.percentage = totalAnswers > 0 ? Math.floor(totalAnswersCorrect / totalAnswers * 100) : 0;
   const avgPronunciationScore = pronunciationScoreCount > 0 ? Math.floor(totalPronunciationScore / pronunciationScoreCount) : -1;
-  return [percentCorrect, avgPronunciationScore];
+  if (totalAnswers > 0) {
+    return [percentCorrect, avgPronunciationScore];
+  } else {
+    return [{
+      completed: 0,
+      total: 0,
+      percentage: 0
+    }, avgPronunciationScore];
+  }
 };
 exports.getScoreValues = getScoreValues;
 const calcTopicCompletions = (topic, completions = [], isSectionHidden, assignmentExercises) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1254",
+  "version": "0.1.1255",
   "main": "dist/index.js",
   "files": [
     "dist",