@nualang/nualang-ui-components 0.1.1254 → 0.1.1256

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -79,33 +79,51 @@ function CreateAssignmentDialog({
     exercises: submittedExercises,
     ...initialData
   });
-  const classroomQuery = _Queries.classrooms.useClassroom(async classroomId => {
-    const allClassroomsCourses = [];
-    await Promise.all(classroomId.map(async cId => {
-      if (!cId) return;
-      const response = await getClassroom(cId);
-      allClassroomsCourses.push(response?.Item?.courses || []);
-    }));
-    const flatClassrooms = allClassroomsCourses.flat();
-    const seen = new Set();
-    const uniqueClassroomsCourses = flatClassrooms.filter(classR => {
-      if (seen.has(classR)) return false;
-      seen.add(classR);
-      return true;
-    });
-    return uniqueClassroomsCourses;
-  }, {
-    classroomId: assignment?.classroomId
-  }, {
-    enabled: !!(assignment.classroomId.length > 0)
+  const classroomQuery = useQueries({
+    queries: (Array.isArray(assignment.classroomId) ? assignment.classroomId : [assignment.classroomId]).map(cId => ({
+      queryKey: _Queries.classrooms.classroomKeys.item(cId, username),
+      queryFn: () => getClassroom(cId, filters),
+      queryOptions: {
+        enabled: !!(Array.isArray(assignment.classroomId) ? assignment.classroomId.length > 0 : assignment.classroomId)
+      }
+    })),
+    combine: results => {
+      const normalizedData = results.map(result => {
+        const data = result.data;
+        if (data?.classroomId) {
+          return data;
+        }
+        if (data?.Item?.classroomId) {
+          return data.Item;
+        }
+        return null;
+      }).filter(Boolean);
+      return {
+        data: normalizedData,
+        pending: results.some(result => result.isPending)
+      };
+    }
   });
-  const selectedClassroom = (0, _react.useMemo)(() => classroomQuery.isSuccess && classroomQuery.data ? classroomQuery.data : {}, [classroomQuery.data, classroomQuery.isSuccess]);
+  const selectedClassroomCourses = (0, _react.useMemo)(() => {
+    if (!classroomQuery.pending && classroomQuery.data.length > 0) {
+      const allCourses = classroomQuery.data.flatMap(classroom => classroom.courses || []);
+      const seen = new Set();
+      const uniqueCourses = allCourses.filter(courseId => {
+        if (seen.has(courseId)) return false;
+        seen.add(courseId);
+        return true;
+      });
+      return uniqueCourses;
+    } else {
+      return [];
+    }
+  }, [classroomQuery.data, classroomQuery.pending]);
   const coursesQuery = _Queries.courses.useCourses(async filters => {
     const response = await getCourses(filters);
     return response;
   }, {
     filters: {
-      courseIds: selectedClassroom?.toString()
+      courseIds: selectedClassroomCourses?.toString()
     }
   }, {
     enabled: !!assignment.classroomId
@@ -122,17 +140,22 @@ function CreateAssignmentDialog({
       }
     })),
     combine: results => {
+      const allMembers = results.flatMap(result => {
+        if (Array.isArray(result?.data?.Items)) {
+          return result.data.Items;
+        }
+        return [];
+      });
       return {
-        data: results.map(result => result.data),
+        data: allMembers,
         pending: results.some(result => result.isPending)
       };
     }
   });
-  const selectedMembers = (0, _react.useMemo)(() => {
-    if (!classroomMembersQueries.pending && Array.isArray(classroomMembersQueries.data[0].Items) && classroomMembersQueries.data[0].Items.length) {
-      const flatMembers = classroomMembersQueries.data[0].Items.flat();
+  const uniqueClassroomMembers = (0, _react.useMemo)(() => {
+    if (!classroomMembersQueries.pending && classroomMembersQueries.data.length > 0) {
       const seen = new Set();
-      const uniqueMembers = flatMembers.filter(member => {
+      const uniqueMembers = classroomMembersQueries.data.filter(member => {
         if (seen.has(member.memberId)) return false;
         seen.add(member.memberId);
         return true;
@@ -160,13 +183,13 @@ function CreateAssignmentDialog({
       courses: filteredCourses
     });
   }, [selectedCourses, submittedExercises]);
-  const classroomMembers = async selectedMembers => {
-    const formattedMembers = await getMemberDetails(selectedMembers);
+  const classroomMembers = async uniqueClassroomMembers => {
+    const formattedMembers = await getMemberDetails(uniqueClassroomMembers);
     setMembers(formattedMembers);
   };
   (0, _react.useEffect)(() => {
-    classroomMembers(selectedMembers);
-  }, [selectedMembers]);
+    classroomMembers(uniqueClassroomMembers);
+  }, [uniqueClassroomMembers]);
   (0, _react.useEffect)(() => {
     setAssignment(prev => ({
       ...prev,
@@ -227,7 +250,7 @@ function CreateAssignmentDialog({
   const handleCreateAssignment = async () => {
     try {
       await Promise.all(assignment.classroomId.map(async cId => {
-        const selectedClassroomMembers = selectedMembers.filter(member => member.classroomId === cId).map(student => student.memberId).filter(studentId => assignment?.assignedStudents.includes(studentId));
+        const selectedClassroomMembers = uniqueClassroomMembers.filter(member => member.classroomId === cId).map(student => student.memberId).filter(studentId => assignment?.assignedStudents.includes(studentId));
         const formattedAssignment = {
           ...assignment,
           classroomId: cId,

package/dist/Cards/SubscriptionPlan/SubscriptionPlan.js

@@ -108,18 +108,6 @@ const PlanButton = (0, _system.styled)(_material.Button)(({
     border: bgPrimary ? `1px solid ${theme.palette.primary.dark}` : null
   }
 }));
-const Badge = (0, _system.styled)(_material.Typography)(({
-  theme
-}) => ({
-  backgroundColor: theme.palette.common.white,
-  color: theme.palette.common.black,
-  fontSize: theme.typography.pxToRem(10),
-  borderRadius: "9px",
-  padding: theme.spacing(0.25, 1),
-  display: "flex",
-  alignItems: "center",
-  marginBottom: "2px"
-}));
 const Plus = (0, _system.styled)("img")(({
   theme
 }) => ({
@@ -239,8 +227,7 @@ function SubscriptionPlan({
             variant: "h3",
             priceSmall: displayPlan.priceSmall,
             children: displayPlan.price ? displayPlan.price : displayPrice
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
-            direction: "column",
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
             sx: {
               display: "flex",
               justifyContent: "center"
@@ -253,8 +240,18 @@ function SubscriptionPlan({
                   children: t(displayPlan.footnote)
                 })
               }),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Badge, {
-                component: "div",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                  fontSize: theme => theme.typography.pxToRem(10),
+                  backgroundColor: "common.white",
+                  color: "common.black",
+                  borderRadius: "9px",
+                  py: 0.25,
+                  px: 1,
+                  display: "flex",
+                  alignItems: "center",
+                  mb: "2px"
+                },
                 children: t(displayPlan.badge)
               })
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {}), priceInfo && priceInfo.interval && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {

package/dist/Dialogs/CreatePhrase/CreatePhrase.js

@@ -208,7 +208,7 @@ function CreatePhrase({
   };
 
   // // translation
-  // const generateTranslation = async () => {
+  // const generateTranslations = async () => {
   //   const translatedText = await handleTranslate(phrase, learnLang, forLang);
   //   if (translatedText && translatedText !== "") {
   //     setAutoTranslatedText(translatedText);
@@ -221,19 +221,35 @@ function CreatePhrase({
   //   }
   // };
 
-  const generateTranslation = async () => {
+  function validateResponse(response) {
+    if (!Array.isArray(response)) {
+      return false;
+    }
+    for (const item of response) {
+      if (item === null || Array.isArray(item)) {
+        return false;
+      }
+      if (typeof item !== "string" || item.trim() === "") {
+        return false;
+      }
+    }
+    return true;
+  }
+  const generateTranslations = async () => {
     try {
       let chatGptResponse = await makeChatGptApiRequest({
         model: "gpt-4o-mini",
-        promptKey: "generateTranslation",
+        promptKey: "generateTranslations",
         promptVariables: {
           learnLang,
           forLang,
           phrase
         }
       });
-      chatGptResponse = chatGptResponse.replaceAll("```", '').replaceAll("json", '');
-      const translations = JSON.parse(chatGptResponse);
+      const translations = chatGptResponse.translations;
+      if (!validateResponse(translations)) {
+        throw new Error("Invalid AI response");
+      }
       setTranslationList(prevTranslationList => {
         const newTranslations = translations.filter(text => !prevTranslationList.includes(text));
         return [...prevTranslationList, ...newTranslations];
@@ -409,7 +425,7 @@ function CreatePhrase({
           children: t("add_alternative_version")
         })
       }), learnLang !== forLang && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultColourButton.default, {
-        onClick: generateTranslation,
+        onClick: generateTranslations,
         disabled: !phrase || Array.isArray(translationList) && translationList.includes(autoTranslatedText),
         size: "sm",
         className: classes.alternativeVersionButton,

package/dist/Dialogs/GenerateBot/GenerateBot.js

@@ -17,6 +17,26 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 //components
 
+function validateResponse(response) {
+  if (!Array.isArray(response)) {
+    return false;
+  }
+  for (const item of response) {
+    if (typeof item !== "object" || item === null || Array.isArray(item)) {
+      return false;
+    }
+    if (!Object.hasOwn(item, "question") || !Object.hasOwn(item, "answer")) {
+      return false;
+    }
+    if (typeof item.question !== "string" || item.question.trim() === "") {
+      return false;
+    }
+    if (typeof item.answer !== "string" || item.answer.trim() === "") {
+      return false;
+    }
+  }
+  return true;
+}
 function GenerateBotDialog({
   t = text => text,
   isGenerateBotDialogOpen,
@@ -69,39 +89,42 @@ function GenerateBotDialog({
   const handleCloseDialog = () => {
     setIsGenerateBotDialogOpen(false);
   };
-  const removeExtraTextFromChatGptResponse = response => {
-    let stack = [];
-    let startIndex = -1;
-    let endIndex = -1;
-    for (let i = 0; i < response.length; i++) {
-      if (response[i] === "[") {
-        if (stack.length === 0) {
-          startIndex = i;
-        }
-        stack.push("[");
-      } else if (response[i] === "]") {
-        stack.pop();
-        if (stack.length === 0) {
-          endIndex = i;
-          break;
-        }
-      }
-    }
-    if (startIndex !== -1 && endIndex !== -1) {
-      return response.substring(startIndex, endIndex + 1);
-    }
-    return "";
-  };
-  function fixMissingComma(jsonString) {
-    const fixedJsonString = jsonString.replace(/}\s*{/g, "},{");
-    try {
-      const jsonObject = JSON.parse(fixedJsonString);
-      return jsonObject;
-    } catch (error) {
-      console.error("Invalid JSON after attempting to fix:", error);
-      return null;
-    }
-  }
+
+  // const removeExtraTextFromChatGptResponse = (response) => {
+  //   let stack = [];
+  //   let startIndex = -1;
+  //   let endIndex = -1;
+  //   for (let i = 0; i < response.length; i++) {
+  //     if (response[i] === "[") {
+  //       if (stack.length === 0) {
+  //         startIndex = i;
+  //       }
+  //       stack.push("[");
+  //     } else if (response[i] === "]") {
+  //       stack.pop();
+  //       if (stack.length === 0) {
+  //         endIndex = i;
+  //         break;
+  //       }
+  //     }
+  //   }
+  //   if (startIndex !== -1 && endIndex !== -1) {
+  //     return response.substring(startIndex, endIndex + 1);
+  //   }
+  //   return "";
+  // };
+
+  // function fixMissingComma(jsonString) {
+  //   const fixedJsonString = jsonString.replace(/}\s*{/g, "},{");
+  //   try {
+  //     const jsonObject = JSON.parse(fixedJsonString);
+  //     return jsonObject;
+  //   } catch (error) {
+  //     console.error("Invalid JSON after attempting to fix:", error);
+  //     return null;
+  //   }
+  // }
+
   const sampleQuestionArray = [{
     question: "What day comes after Monday? ",
     answer: "(Tuesday)"
@@ -137,7 +160,6 @@ function GenerateBotDialog({
     try {
       setIsBotGenerating(true);
       setErrorMessage("");
-      let response;
       let chatGptResponse = await makeChatGptApiRequest({
         model: "gpt-4o-mini",
         promptKey: "generateBot",
@@ -154,9 +176,10 @@ function GenerateBotDialog({
           usePhrasesContext: usePhrasesContext
         }
       });
-      response = chatGptResponse;
-      const jsonResponse = removeExtraTextFromChatGptResponse(response);
-      const botScript = fixMissingComma(jsonResponse);
+      const botScript = chatGptResponse.result;
+      if (!validateResponse(botScript)) {
+        throw new Error("Invalid AI response");
+      }
       setIsBotGenerating(false);
       return botScript;
     } catch (error) {

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,
@@ -56,29 +113,6 @@ function GeneratePhrases({
       [name]: value
     }));
   };
-  const extractPhrasesArray = response => {
-    let stack = [];
-    let startIndex = -1;
-    let endIndex = -1;
-    for (let i = 0; i < response.length; i++) {
-      if (response[i] === "[") {
-        if (stack.length === 0) {
-          startIndex = i;
-        }
-        stack.push("[");
-      } else if (response[i] === "]") {
-        stack.pop();
-        if (stack.length === 0) {
-          endIndex = i;
-          break;
-        }
-      }
-    }
-    if (startIndex !== -1 && endIndex !== -1) {
-      return response.substring(startIndex, endIndex + 1);
-    }
-    return "";
-  };
   function validateResponse(response) {
     if (!Array.isArray(response)) {
       return false;
@@ -127,25 +161,32 @@ function GeneratePhrases({
           phrases
         }
       });
-      const phrasesArray = extractPhrasesArray(chatGptResponse);
-      const parsedPhrases = JSON.parse(phrasesArray);
-      if (!validateResponse(parsedPhrases)) {
-        throw new Error("Invalid response from GPT-3.5");
+      const phrasesArray = chatGptResponse.result;
+      if (!validateResponse(phrasesArray)) {
+        throw new Error("Invalid AI response");
       }
-      handleAppendPhrases(parsedPhrases);
+      setGeneratedPhrases(phrasesArray);
       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 +211,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/Dialogs/GenerateQuestion/GenerateQuestion.js

@@ -87,7 +87,7 @@ function GenerateQuestion({
     try {
       setIsMessageGenerating(true);
       setErrorMessage(null);
-      const chatGptResponse = await makeChatGptApiRequest({
+      const newQuestion = await makeChatGptApiRequest({
         model: "gpt-4o-mini",
         promptKey: "generateAnswer",
         promptVariables: {
@@ -100,8 +100,6 @@ function GenerateQuestion({
           questionLanguage
         }
       });
-      const jsonResponse = extractJsonObject(chatGptResponse);
-      const newQuestion = JSON.parse(jsonResponse);
       if (!validateResponse(newQuestion)) {
         throw new Error("Invalid response from GPT-3.5");
       }

package/dist/Dialogs/GenerateRoleplay/GenerateRoleplay.js

@@ -231,25 +231,37 @@ function GenerateRoleplayDialog({
           }
         });
         let isComplete = false;
+        let fullResult = [];
         while (!isComplete) {
-          if (chatGptResponse.endsWith("...") || chatGptResponse.trim().endsWith(",")) {
+          let parsed;
+          try {
+            parsed = typeof chatGptResponse === "string" ? JSON.parse(chatGptResponse) : chatGptResponse;
+          } catch (e) {
+            console.warn("Failed to parse response – assuming truncation");
+            parsed = {
+              result: []
+            }; // fallback
+          }
+          if (Array.isArray(parsed.result)) {
+            fullResult = [...fullResult, ...parsed.result];
+          }
+          // Check last item for signs of truncation
+          const lastItem = parsed.result?.[parsed.result.length - 1];
+          const endsSuspiciously = lastItem?.text?.trim?.().endsWith("...") || lastItem?.text?.trim?.().endsWith(",");
+          if (endsSuspiciously) {
+            const continuationPrompt = `Continue the following in the same JSON format:\n\n${JSON.stringify(parsed.result, null, 2)}`;
             const continuationResponse = await makeChatGptApiRequest({
               model: "gpt-4o-mini",
-              prompt: "Continue: " + chatGptResponse
+              prompt: continuationPrompt
             });
-            chatGptResponse += continuationResponse;
+            chatGptResponse = continuationResponse;
           } else {
             isComplete = true;
           }
         }
-        response = chatGptResponse;
+        response = fullResult;
       }
-
-      // Log the full response for debugging
-
-      const jsonResponse = removeExtraTextFromChatGptResponse(response);
-      const roleplayScript = fixMissingComma(jsonResponse);
-      if (validateScript(roleplayScript)) {
+      if (validateScript(response)) {
         const generatedRoleplay = {
           roleplayId: (0, _utils.randomId)(),
           roleplayName: values.roleplayTopic,
@@ -260,7 +272,7 @@ function GenerateRoleplayDialog({
           learnLang: learnLang,
           translationEnabled: "enable",
           repliesEnabled: "enable",
-          script: roleplayScript,
+          script: response,
           actor1: {
             name: getAllVoices()[0].name,
             voice: getAllVoices()[0].name,

package/dist/Editors/Bot/Editor/Editor.js

@@ -88,8 +88,7 @@ const useStyles = (0, _mui.makeStyles)()((theme, {
     color: theme.palette.text.secondary
   },
   characterDropdown: {
-    margin: theme.spacing(1),
-    marginTop: "26px"
+    margin: theme.spacing(1)
   },
   formattingOptionsButton: {
     backgroundColor: isFormattingOptionsOpen ? theme.palette.action.selected : null

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

@@ -1423,7 +1423,7 @@ function Classroom({
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveTabs.default, {
       t: t,
       tabs: tabs,
-      fabs: isCreator && isVideoChatEnabled && isVideoChatEnabledInSettings && !isArchived ? courses?.length ? fabs : [[vchatFab]] : isCreator && courses?.length && !isArchived ? [[fabs[0][0]]] : [],
+      fabs: isCreator && isVideoChatEnabled && isVideoChatEnabledInSettings && !isArchived ? courses?.length ? fabs : [[vchatFab]] : isCreator && courses?.length && !isArchived ? [[fabs[0][0], assignmentsFab]] : [],
       centered: true,
       scrollable: true,
       hasNewAssignments: hasNewAssignments,
@@ -1480,7 +1480,7 @@ function Classroom({
       open: isInviteDialogOpen,
       handleClose: handleCloseInviteDialog,
       onSubmit: handleInvites,
-      inviteLink: `${window.location.href}?plan=learn&learnlang=${classroom.learnLang}`,
+      inviteLink: `${window.location.origin}/classrooms/${classroomId}?plan=learn&learnlang=${classroom.learnLang}`,
       enrolmentKey: classroom.visibility === "private" ? classroom.enrolmentKey : "",
       inviteType: "classroom",
       attributes: attributes,

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

@@ -960,7 +960,7 @@ function Course({
       open: isInviteDialogOpen,
       handleClose: handleCloseInviteDialog,
       onSubmit: handleInvites,
-      inviteLink: `${window.location.href}?plan=learn&learnlang=${course.learnLang}`,
+      inviteLink: `${window.location.origin}/courses/${courseId}?plan=learn&learnlang=${course.learnLang}`,
       enrolmentKey: course.visibility === "private" ? course.enrolmentKey : "",
       inviteType: "course",
       attributes: attributes,

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

@@ -75,7 +75,7 @@ const RecordingListCards = (0, _mui.withStyles)(({
         variant: "headline",
         color: "inherit",
         fontSize: 24,
-        children: t("recordings")
+        children: t("submissions")
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes.grow

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.1256",
   "main": "dist/index.js",
   "files": [
     "dist",