@nualang/nualang-ui-components 0.1.1336 → 0.1.1337

package/dist/Cards/Course/Course.js

@@ -16,7 +16,7 @@ import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
 import DifficultyIcon from "@mui/icons-material/School";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
-import DeleteIcon from '@mui/icons-material/Delete';
+import DeleteIcon from "@mui/icons-material/Delete";
 
 // components
 import MembersDialog from "../../Dialogs/Members/Members";

package/dist/Cards/FeedbackCard/FeedbackCard.js

@@ -25,20 +25,20 @@ const getPerformanceLevel = (student, aiGrade) => {
 };
 const getPerformanceChipProps = (level, t) => {
   switch (level?.toLowerCase()) {
-    case 'above':
+    case "above":
       return {
-        label: t('above_level'),
-        color: 'success',
+        label: t("above_level"),
+        color: "success",
         icon: /*#__PURE__*/_jsx(TrendingUpIcon, {
           sx: {
             fontSize: 16
           }
         })
       };
-    case 'below':
+    case "below":
       return {
-        label: t('below_level'),
-        color: 'warning',
+        label: t("below_level"),
+        color: "warning",
         icon: /*#__PURE__*/_jsx(TrendingDownIcon, {
           sx: {
             fontSize: 16
@@ -448,21 +448,21 @@ export default function FeedbackCard({
                                   sx: {
                                     mb: 0.5
                                   },
-                                  children: t('ai_performance_assessment')
+                                  children: t("ai_performance_assessment")
                                 }), /*#__PURE__*/_jsx(Typography, {
                                   variant: "caption",
                                   sx: {
-                                    display: 'block',
+                                    display: "block",
                                     mb: 0.5
                                   },
-                                  children: t('performance_chip_tooltip')
+                                  children: t("performance_chip_tooltip")
                                 }), /*#__PURE__*/_jsx(Typography, {
                                   variant: "caption",
                                   sx: {
-                                    fontStyle: 'italic',
+                                    fontStyle: "italic",
                                     opacity: 0.9
                                   },
-                                  children: t('performance_chip_note')
+                                  children: t("performance_chip_note")
                                 })]
                               }),
                               placement: "top",
@@ -472,15 +472,15 @@ export default function FeedbackCard({
                                 size: "small",
                                 icon: chipProps.icon,
                                 sx: {
-                                  width: 'fit-content',
+                                  width: "fit-content",
                                   fontWeight: 600,
-                                  fontSize: '0.7rem',
-                                  height: '22px',
-                                  '& .MuiChip-label': {
-                                    paddingLeft: '8px',
-                                    paddingRight: '8px'
+                                  fontSize: "0.7rem",
+                                  height: "22px",
+                                  "& .MuiChip-label": {
+                                    paddingLeft: "8px",
+                                    paddingRight: "8px"
                                   },
-                                  '&:hover': {
+                                  "&:hover": {
                                     opacity: 0.9
                                   }
                                 }

package/dist/Cards/RecordingCard/RecordingCard.js

@@ -8,10 +8,10 @@ import { Card, CardActionArea, Divider, Button, Tooltip, IconButton } from "@mui
 import PropTypes from "prop-types";
 import dayjs from "dayjs";
 import PDFViewer from "../../Dialogs/PDFViewer/PDFViewer";
-import level1Rubric from '../../Dialogs/PDFViewer/rubrics/level1Rubric.pdf';
-import level2Rubric from '../../Dialogs/PDFViewer/rubrics/level2Rubric.pdf';
-import level3Rubric from '../../Dialogs/PDFViewer/rubrics/level3Rubric.pdf';
-import level4Rubric from '../../Dialogs/PDFViewer/rubrics/level4Rubric.pdf';
+import level1Rubric from "../../Dialogs/PDFViewer/rubrics/level1Rubric.pdf";
+import level2Rubric from "../../Dialogs/PDFViewer/rubrics/level2Rubric.pdf";
+import level3Rubric from "../../Dialogs/PDFViewer/rubrics/level3Rubric.pdf";
+import level4Rubric from "../../Dialogs/PDFViewer/rubrics/level4Rubric.pdf";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function RecordingCard({

package/dist/Chat/Chat.js

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 import { makeStyles } from "tss-react/mui";
 import TopBar from "./TopBar/TopBar";
 import Messages from "./Messages/Messages";
@@ -106,7 +106,7 @@ function Chat({
       setIsMessageLoading(false);
       return;
     }
-    const hasLoadingMessage = messages.some(message => typeof message === 'object' && message?.isLoading === true);
+    const hasLoadingMessage = messages.some(message => typeof message === "object" && message?.isLoading === true);
     setIsMessageLoading(hasLoadingMessage);
   }, [messages]);
   return /*#__PURE__*/_jsxs("div", {

package/dist/Chat/ChatLoading/ChatLoading.js

@@ -151,7 +151,7 @@ export default function ChatLoading({
     children: /*#__PURE__*/_jsxs("div", {
       className: classes.message,
       children: [userImage ? /*#__PURE__*/_jsx(_Fragment, {
-        children: !isMyMessage && isDynamicResponsesEnabled === 'enable' ? /*#__PURE__*/_jsxs("div", {
+        children: !isMyMessage && isDynamicResponsesEnabled === "enable" ? /*#__PURE__*/_jsxs("div", {
           style: {
             position: "relative",
             display: "inline-block"
@@ -161,7 +161,7 @@ export default function ChatLoading({
             src: userImage,
             alt: ""
           }), /*#__PURE__*/_jsx(AiExperienceIcon, {
-            aiExperienceInfoText: t('ai_chatbot_message_generating_info'),
+            aiExperienceInfoText: t("ai_chatbot_message_generating_info"),
             sx: {
               bottom: isSmallScreen ? "23px" : "23px",
               right: isSmallScreen ? "-11px" : "-21px",

package/dist/Chat/Messages/Message/Message.js

@@ -379,7 +379,7 @@ export default function Message({
     children: /*#__PURE__*/_jsxs("div", {
       className: classes.message,
       children: [userImage ? /*#__PURE__*/_jsx(_Fragment, {
-        children: !isMyMessage && isDynamicResponsesEnabled === 'enable' ? /*#__PURE__*/_jsxs("div", {
+        children: !isMyMessage && isDynamicResponsesEnabled === "enable" ? /*#__PURE__*/_jsxs("div", {
           style: {
             position: "relative",
             display: "inline-block"
@@ -389,7 +389,7 @@ export default function Message({
             src: userImage,
             alt: ""
           }), /*#__PURE__*/_jsx(AiExperienceIcon, {
-            aiExperienceInfoText: t('ai_chatbot_message_info'),
+            aiExperienceInfoText: t("ai_chatbot_message_info"),
             isCurrentMessagePlaying: isCurrentMessagePlaying,
             sx: {
               bottom: isSmallScreen ? "23px" : "23px",

package/dist/Dialogs/AvatarDialog/AvatarDialog.js

@@ -355,11 +355,11 @@ export default function AvatarDialog({
       console.error("Avatar ref is not attached to a DOM node.");
       return;
     }
-    /*
-      We should switch this but we need to 
-      have the Avatar component pass the ref to DOM
-      so we can grab the outerHTML
-      const svgNode = avatarRef.current;
+    /*
+      We should switch this but we need to 
+      have the Avatar component pass the ref to DOM
+      so we can grab the outerHTML
+      const svgNode = avatarRef.current;
     */
     const canvas = canvasRef.current;
     const ctx = canvas.getContext("2d");

package/dist/Dialogs/GenerateBot/GenerateBot.js

@@ -18,7 +18,7 @@ function validateResponse(response, template) {
     if (typeof item !== "object" || item === null || Array.isArray(item)) {
       return false;
     }
-    if (template === 'nualang.quiz.0.0.1') {
+    if (template === "nualang.quiz.0.0.1") {
       if (!Object.hasOwn(item, "question") || !Object.hasOwn(item, "answer")) {
         return false;
       }
@@ -29,7 +29,7 @@ function validateResponse(response, template) {
         return false;
       }
     }
-    if (template === 'nualang.open-ended.0.0.1' && !Object.hasOwn(item, "text")) {
+    if (template === "nualang.open-ended.0.0.1" && !Object.hasOwn(item, "text")) {
       return false;
     }
   }

package/dist/Dialogs/GroupedFeedbackDialog/GroupedFeedbackDialog.js

@@ -130,11 +130,11 @@ export default function GroupFeedbackDialog({
       const user = userData.find(u => u.memberId === memberId);
       return {
         memberId: memberId,
-        name: user?.username || user?.createdByName || 'Unknown',
+        name: user?.username || user?.createdByName || "Unknown",
         username: user?.username,
         createdByName: user?.createdByName
       };
-    }).filter(member => member.name !== 'Unknown');
+    }).filter(member => member.name !== "Unknown");
   };
   const handleGenerateFeedback = async discussionData => {
     if (handleBatchGradeConversations) {

package/dist/Dialogs/SelectClassroom/SelectClassroom.js

@@ -55,7 +55,7 @@ function SelectClassroom({
           component: RouterLink,
           to: path,
           sx: {
-            color: 'inherit'
+            color: "inherit"
           },
           children: [/*#__PURE__*/_jsx(ListItemAvatar, {
             children: picture ? /*#__PURE__*/_jsx(Avatar, {

package/dist/Dialogs/UploadBotVars/UploadBotVars.js

@@ -90,14 +90,14 @@ function UploadBotVars({
   useEffect(() => {
     const handleUploadCsvDataText = async () => {
       setErrors([]);
-      const lines = csvDataInput.trim().split('\n');
-      const headers = lines[0].split(',').map(h => h.trim());
+      const lines = csvDataInput.trim().split("\n");
+      const headers = lines[0].split(",").map(h => h.trim());
       const rows = lines.slice(1);
       const jsonArray = rows.map(row => {
-        const values = row.match(/(".*?"|[^",\n]+)(?=\s*,|\s*$)/g).map(v => v.replace(/^"|"$/g, '').trim());
+        const values = row.match(/(".*?"|[^",\n]+)(?=\s*,|\s*$)/g).map(v => v.replace(/^"|"$/g, "").trim());
         const entry = {};
         headers.forEach((header, i) => {
-          entry[header] = values[i] ?? '';
+          entry[header] = values[i] ?? "";
         });
         return entry;
       });

package/dist/Dialogs/UploadPhrases/UploadPhrases.js

@@ -87,12 +87,12 @@ function parsePhraseWithAlternatives(phraseString) {
   };
 }
 
-/**
- * Processes CSV data with the following format:
- * - phrase: Primary phrase with optional alternatives separated by '|'
- *   Example: "Hello|Hi|Hey"
- * - translations: Multiple translations separated by '|'
- * - image: Optional image URL
+/**
+ * Processes CSV data with the following format:
+ * - phrase: Primary phrase with optional alternatives separated by '|'
+ *   Example: "Hello|Hi|Hey"
+ * - translations: Multiple translations separated by '|'
+ * - image: Optional image URL
  */
 
 function UploadPhrases({
@@ -134,7 +134,7 @@ function UploadPhrases({
           primary,
           alternatives
         } = parsePhraseWithAlternatives(data.phrase);
-        const formattedTranslations = data.translations.split("|").map(t => t.trim().replace(/^"|"$/g, '').trim());
+        const formattedTranslations = data.translations.split("|").map(t => t.trim().replace(/^"|"$/g, "").trim());
         return {
           phrase: primary,
           alternativeVersions: alternatives,
@@ -150,14 +150,14 @@ function UploadPhrases({
   useEffect(() => {
     const handleUploadCsvDataText = async () => {
       setErrors([]);
-      const lines = csvDataInput.trim().split('\n');
-      const headers = lines[0].split(',').map(h => h.trim());
+      const lines = csvDataInput.trim().split("\n");
+      const headers = lines[0].split(",").map(h => h.trim());
       const rows = lines.slice(1);
       const jsonArray = rows.map(row => {
-        const values = row.match(/(".*?"|[^",\n]+)(?=\s*,|\s*$)/g).map(v => v.replace(/^"|"$/g, '').trim());
+        const values = row.match(/(".*?"|[^",\n]+)(?=\s*,|\s*$)/g).map(v => v.replace(/^"|"$/g, "").trim());
         const entry = {};
         headers.forEach((header, i) => {
-          entry[header] = values[i] ?? '';
+          entry[header] = values[i] ?? "";
         });
         return entry;
       });

package/dist/Dialogs/UploadRoleplayScript/UploadRoleplayScript.js

@@ -62,8 +62,8 @@ function UploadRoleplayScript({
     const row = index + 2;
     let parseErrors = [];
 
-    /**
-     * Checks if row is an actor or question
+    /**
+     * Checks if row is an actor or question
      */
     if (!Object.prototype.hasOwnProperty.call(data, "actor") && !Object.prototype.hasOwnProperty.call(data, "question")) {
       parseErrors.push({
@@ -72,10 +72,10 @@ function UploadRoleplayScript({
       });
     }
 
-    /**
-     * Checks if a actor text object has the following:
-     * - text exists
-     * - actor attribute is a number e.g. actor1, actor2
+    /**
+     * Checks if a actor text object has the following:
+     * - text exists
+     * - actor attribute is a number e.g. actor1, actor2
      */
     if (Object.prototype.hasOwnProperty.call(data, "actor")) {
       if (!data.text) {
@@ -92,11 +92,11 @@ function UploadRoleplayScript({
       }
     }
 
-    /**
-     * Checks if a question object has the following:
-     * - question text
-     * - answers exists
-     * - correct answer(s) exists
+    /**
+     * Checks if a question object has the following:
+     * - question text
+     * - answers exists
+     * - correct answer(s) exists
      */
     if (Object.prototype.hasOwnProperty.call(data, "question")) {
       if (!data?.question) {
@@ -190,14 +190,14 @@ function UploadRoleplayScript({
   useEffect(() => {
     const handleUploadCsvDataText = async () => {
       setErrors([]);
-      const lines = csvDataInput.trim().split('\n');
-      const headers = lines[0].split(',').map(h => h.trim());
+      const lines = csvDataInput.trim().split("\n");
+      const headers = lines[0].split(",").map(h => h.trim());
       const rows = lines.slice(1);
       const jsonArray = rows.map(row => {
-        const values = row.match(/(".*?"|[^",\n]+)(?=\s*,|\s*$)/g).map(v => v.replace(/^"|"$/g, '').trim());
+        const values = row.match(/(".*?"|[^",\n]+)(?=\s*,|\s*$)/g).map(v => v.replace(/^"|"$/g, "").trim());
         const entry = {};
         headers.forEach((header, i) => {
-          entry[header] = values[i] ?? '';
+          entry[header] = values[i] ?? "";
         });
         return entry;
       });

package/dist/Editors/Phrases/Phrases.js

@@ -265,8 +265,8 @@ function PhrasesEditor(props) {
     setSpreadsheetPhrases(JSON.parse(phrasesJson));
   }, [phrasesJson]);
 
-  /**
-   * Validates each row for missing phrase or translation
+  /**
+   * Validates each row for missing phrase or translation
    */
   const validateRow = useCallback((phrase, translation, index) => {
     const row = index + 1;

package/dist/Exercises/Bot/Bot.js

@@ -413,9 +413,9 @@ function Bot({
     navigate(`/classrooms/${classroomId}#Assignments`);
   };
 
-  /**
-   * searchParams not showing new results so instruction dialog won't open
-   * when bot opens
+  /**
+   * searchParams not showing new results so instruction dialog won't open
+   * when bot opens
    */
   // useEffect(() => {
   //   console.log('in use effect [searchParams.botId, searchParams.instructions]', searchParams);

package/dist/Exercises/Roleplay/Games/ActItOutGame/package.json

@@ -1,6 +1,6 @@
-{
-  "name": "ActItOutGame",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./ActItOutGame.jsx"
-}
+{
+  "name": "ActItOutGame",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./ActItOutGame.jsx"
+}

package/dist/Exercises/Roleplay/Games/ActItOutGameListening/package.json

@@ -1,6 +1,6 @@
-{
-  "name": "ActItOutGameListening",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./ActItOutGameListening.jsx"
-}
+{
+  "name": "ActItOutGameListening",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./ActItOutGameListening.jsx"
+}

package/dist/Forms/CreateClassroom/CreateClassroom.js

@@ -30,7 +30,7 @@ function CreateClassroom({
       visibility: "private",
       vchatEnabled: true,
       vchatEnabledInSettings: true,
-      isDynamicResponsesEnabled: 'enabled',
+      isDynamicResponsesEnabled: "enabled",
       enrolmentKey: "",
       allowedDomains: [],
       collaborators: [],

package/dist/Forms/CreateClassroom/Steps/ClassroomSettings/ClassroomSettings.js

@@ -308,18 +308,18 @@ function ClassroomSettings({
             row: true,
             "aria-label": "isDynamicResponsesEnabled",
             name: "isDynamicResponsesEnabled",
-            value: isDynamicResponsesEnabled || 'enabled',
+            value: isDynamicResponsesEnabled || "enabled",
             onChange: handleChange,
             onBlur: handleBlur,
             helperText: touched.isDynamicResponsesEnabled ? errors.isDynamicResponsesEnabled : "",
             error: touched.isDynamicResponsesEnabled && Boolean(errors.isDynamicResponsesEnabled),
             children: [/*#__PURE__*/_jsx(FormControlLabel, {
-              value: 'enabled',
+              value: "enabled",
               control: /*#__PURE__*/_jsx(Radio, {}),
               label: t("enabled"),
               "data-cy": "enable-dynamic-responses-in-settings"
             }), /*#__PURE__*/_jsx(FormControlLabel, {
-              value: 'disabled',
+              value: "disabled",
               control: /*#__PURE__*/_jsx(Radio, {}),
               label: t("disabled"),
               "data-cy": "disable-dynamic-responses-in-settings"

package/dist/Forms/CreateClassroom/Steps/CourseSettings/CourseSettings.js

@@ -194,7 +194,7 @@ function Settings({
           row: true,
           "aria-label": "Dynamic Responses",
           name: `courseSettings.${courseId}.isDynamicResponsesEnabled`,
-          value: classroomIsDynamicResponsesEnabled === 'disabled' ? 'disabled' : thisCoursesSettings.isDynamicResponsesEnabled || "default",
+          value: classroomIsDynamicResponsesEnabled === "disabled" ? "disabled" : thisCoursesSettings.isDynamicResponsesEnabled || "default",
           onChange: event => {
             const newCourseSettings = {
               ...courseSettings,
@@ -212,7 +212,7 @@ function Settings({
             value: "default",
             control: /*#__PURE__*/_jsx(Radio, {}),
             label: t("course_default"),
-            disabled: classroomIsDynamicResponsesEnabled === 'disabled'
+            disabled: classroomIsDynamicResponsesEnabled === "disabled"
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "disabled",
             control: /*#__PURE__*/_jsx(Radio, {}),

package/dist/Forms/CreateMeetingMultiStepForm/GroupAssignment.js

@@ -20,7 +20,7 @@ import { DndContext, DragOverlay, closestCenter, KeyboardSensor, PointerSensor,
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const accentColors = ['#6366f1', '#8b5cf6', '#06b6d4', '#22c55e', '#f97316', '#ec4899'];
+const accentColors = ["#6366f1", "#8b5cf6", "#06b6d4", "#22c55e", "#f97316", "#ec4899"];
 const MAX_GROUP_SIZE = 4;
 const groupByN = (n, arr) => {
   arr = arr.sort(() => Math.random() - 0.5);
@@ -206,7 +206,7 @@ function NewGroupDropZone({
   const {
     setNodeRef
   } = useDroppable({
-    id: 'new-group-drop-zone'
+    id: "new-group-drop-zone"
   });
   return /*#__PURE__*/_jsx(Card, {
     ref: setNodeRef,
@@ -515,14 +515,14 @@ function GroupAssignment({
       setOverNewGroup(false);
       return;
     }
-    if (over.id === 'new-group-drop-zone') {
+    if (over.id === "new-group-drop-zone") {
       setOverNewGroup(true);
       setOverGroupIndex(null);
       return;
     }
     setOverNewGroup(false);
-    const activeMemberIndex = parseInt(active.id.replace('member-', ''));
-    const overMemberIndex = parseInt(over.id.replace('member-', ''));
+    const activeMemberIndex = parseInt(active.id.replace("member-", ""));
+    const overMemberIndex = parseInt(over.id.replace("member-", ""));
     const activeGroupIndex = findGroupIndex(activeMemberIndex);
     const overGroupIdx = findGroupIndex(overMemberIndex);
     if (activeGroupIndex !== overGroupIdx && overGroupIdx !== -1) {
@@ -540,8 +540,8 @@ function GroupAssignment({
     setOverGroupIndex(null);
     setOverNewGroup(false);
     if (!over) return;
-    const activeMemberIndex = parseInt(active.id.replace('member-', ''));
-    if (over.id === 'new-group-drop-zone') {
+    const activeMemberIndex = parseInt(active.id.replace("member-", ""));
+    if (over.id === "new-group-drop-zone") {
       const sourceGroupIndex = findGroupIndex(activeMemberIndex);
       if (sourceGroupIndex === -1) return;
       const newGroups = [...groups];
@@ -558,7 +558,7 @@ function GroupAssignment({
       });
       return;
     }
-    const overMemberIndex = parseInt(over.id.replace('member-', ''));
+    const overMemberIndex = parseInt(over.id.replace("member-", ""));
     const sourceGroupIndex = findGroupIndex(activeMemberIndex);
     const destGroupIndex = findGroupIndex(overMemberIndex);
     if (sourceGroupIndex === -1 || destGroupIndex === -1) return;
@@ -615,7 +615,7 @@ function GroupAssignment({
   };
   const getActiveMember = () => {
     if (!activeId) return null;
-    const memberIndex = parseInt(activeId.replace('member-', ''));
+    const memberIndex = parseInt(activeId.replace("member-", ""));
     return members[memberIndex];
   };
   return /*#__PURE__*/_jsxs(DndContext, {
@@ -666,7 +666,7 @@ function GroupAssignment({
                 variant: "outlined",
                 size: "small",
                 sx: {
-                  minWidth: '100%'
+                  minWidth: "100%"
                 },
                 children: [/*#__PURE__*/_jsx(InputLabel, {
                   id: "pref-group-label",
@@ -724,7 +724,7 @@ function GroupAssignment({
               value,
               index,
               username: members[index]?.username
-            })).sort((a, b) => (a.username || '').localeCompare(b.username || '')).map(({
+            })).sort((a, b) => (a.username || "").localeCompare(b.username || "")).map(({
               value,
               index
             }) => {
@@ -792,10 +792,10 @@ function GroupAssignment({
         },
         sx: {
           display: {
-            xs: 'none',
-            md: 'flex'
+            xs: "none",
+            md: "flex"
           },
-          justifyContent: 'center'
+          justifyContent: "center"
         },
         children: /*#__PURE__*/_jsx(Divider, {
           orientation: "vertical",

package/dist/Forms/UpdateClassroom/UpdateClassroom.js

@@ -27,7 +27,7 @@ export default function UpdateClassroom({
     tags: [],
     picture: null,
     courseSettings: {},
-    isDynamicResponsesEnabled: 'enabled'
+    isDynamicResponsesEnabled: "enabled"
   },
   onSubmit,
   enableReinitialize,

package/dist/Misc/AxiosRestExample/AxiosRestExample.js

@@ -1,8 +1,8 @@
 import Axios from "axios";
 import { ReactQuery } from "@nualang/nualang-api-and-queries/Queries";
-/**
- * Component to demonstrate how to mock data (GET request) with react-query and axios
- *
+/**
+ * Component to demonstrate how to mock data (GET request) with react-query and axios
+ *
  */
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const {

package/dist/Misc/AxiosRestExample/AxiosRestPostExample.js

@@ -6,9 +6,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   useMutation
 } = ReactQuery;
-/**
- * function to send something to the url
- * @param {String} textValue
+/**
+ * function to send something to the url
+ * @param {String} textValue
  */
 async function SendMessage({
   textValue
@@ -25,9 +25,9 @@ async function SendMessage({
   }
 }
 
-/**
- * Component to demonstrate how to mock data (POST request) with react-query and axios
- * @param {String} initialvalue a dummy prop for the component
+/**
+ * Component to demonstrate how to mock data (POST request) with react-query and axios
+ * @param {String} initialvalue a dummy prop for the component
  */
 const AxiosRestPostExample = ({
   initialvalue = "Ricky Sanchez"

package/dist/Misc/DiscussionTopicSelector/package.json

@@ -1,7 +1,6 @@
-{
-    "name": "TopicSelector",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./TopicSelector.js"
-  }
-  
+{
+  "name": "TopicSelector",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./TopicSelector.js"
+}

package/dist/Misc/ExerciseBottomBar/ExerciseBottomBar.js

@@ -10,7 +10,7 @@ const useStyles = makeStyles()(theme => ({
     width: "100%",
     position: "sticky",
     bottom: 0,
-    backgroundColor: theme.palette.mode === 'dark' ? "#525252" : "white"
+    backgroundColor: theme.palette.mode === "dark" ? "#525252" : "white"
   }
 }));
 function ExerciseBottomBar({

package/dist/Misc/HtmlTooltipComponent/package.json

@@ -1,7 +1,6 @@
-{
-    "name": "HtmlTooltipComponent",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./HtmlTooltipComponent.js"
-  }
-  
+{
+  "name": "HtmlTooltipComponent",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./HtmlTooltipComponent.js"
+}

package/dist/Screens/Activity/Exercise/Attempt/Attempt.js

@@ -491,7 +491,7 @@ export default function Attempt({
         cursor: "pointer" // make it look clickable
       },
       onClick: scrollToMessages,
-      children: ["\u26A0 ", t('student_sent_inappropriate_messages')]
+      children: ["\u26A0 ", t("student_sent_inappropriate_messages")]
     }), (picture || topicName || description) && /*#__PURE__*/_jsxs("div", {
       className: classes.header,
       children: [picture ? /*#__PURE__*/_jsx(Avatar, {

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

@@ -580,8 +580,8 @@ function Classroom({
   }
   const removeCourseSectionTopicIdFromUrl = () => {
     const url = new URL(window.location);
-    url.searchParams.delete('courseSectionTopicId');
-    window.history.replaceState({}, '', url);
+    url.searchParams.delete("courseSectionTopicId");
+    window.history.replaceState({}, "", url);
   };
   useEffect(() => {
     if (createLiveGame && isNualangLiveEnabled) {

package/dist/Tables/MeetingPrompstList/MeetingPromptsList.js

@@ -263,8 +263,8 @@ const MeetingPromptsList = withStyles(({
           src: TeacherCreate,
           alt: "teacher-create",
           style: {
-            width: '100%',
-            height: 'auto'
+            width: "100%",
+            height: "auto"
           }
         })
       })]

package/dist/Tables/Progress/ProgressList.js

@@ -56,9 +56,9 @@ function LinearProgressWithLabel(props) {
   });
 }
 LinearProgressWithLabel.propTypes = {
-  /**
-   * The value of the progress indicator for the determinate and buffer variants.
-   * Value between 0 and 100.
+  /**
+   * The value of the progress indicator for the determinate and buffer variants.
+   * Value between 0 and 100.
    */
   value: PropTypes.number.isRequired
 };

package/dist/Tables/Progress/ProgressTable.js

@@ -197,6 +197,7 @@ function DataCell({
         variant: "outlined",
         sx: theme => ({
           color: theme.palette.common.black,
+          borderColor: theme.palette.common.black,
           fontWeight: "bold"
         }),
         size: "small",
@@ -229,6 +230,7 @@ function ExerciseCell({
         variant: "outlined",
         sx: theme => ({
           color: theme.palette.common.black,
+          borderColor: theme.palette.common.black,
           fontWeight: "bold"
         }),
         size: "small",
@@ -529,7 +531,8 @@ function ExerciseCellData({
   botId,
   index,
   isChallengeModeStudent = false,
-  botIsChallengeModeOnly = false
+  botIsChallengeModeOnly = false,
+  assignmentDueDateMs = null
 }) {
   let icon = null;
   let type = null;
@@ -537,10 +540,6 @@ function ExerciseCellData({
   let memberActivityLink = null;
   let submittedLate = false;
   let daysLate = null;
-  if (data?.submittedLate.isLate === true) {
-    submittedLate = true;
-    daysLate = data.submittedLate.daysLate;
-  }
   if (isLoading) {
     return /*#__PURE__*/_jsx(DataCell, {
       t: t,
@@ -607,6 +606,14 @@ function ExerciseCellData({
         memberActivityLink = `../../courses/${courseId}/${sectionId}/${topicId}/activity/${exercise}/${memberId}/${completions[0].createdAt}`;
       }
     }
+    if (assignmentDueDateMs && completions && completions.length > 0) {
+      const lateCompletion = completions.find(c => c.createdAt > assignmentDueDateMs);
+      if (lateCompletion) {
+        submittedLate = true;
+        const daysDiff = (lateCompletion.createdAt - assignmentDueDateMs) / (1000 * 60 * 60 * 24);
+        daysLate = Math.max(1, Math.ceil(daysDiff));
+      }
+    }
   }
   return /*#__PURE__*/_jsx(ExerciseCell, {
     t: t,
@@ -886,7 +893,8 @@ function TableRow({
         sectionId: sectionId,
         topicId: selectedTopic.topicId,
         memberId: memberId,
-        index: index * 2 * tableExercises.length + i * 2 + 1
+        index: index * 2 * tableExercises.length + i * 2 + 1,
+        assignmentDueDateMs: selectedAssignment?.dueDate ? new Date(selectedAssignment.dueDate).getTime() : null
       }, `student-progress-data-cell-${i}`);
     }), (currentView === "topic" || currentView === "assignment-topic") && tableRoleplays.map((roleplay, i) => {
       const [courseId, sectionId] = selectedTopic.courseSectionId.split("|");
@@ -903,7 +911,8 @@ function TableRow({
         topicId: selectedTopic.topicId,
         memberId: memberId,
         roleplayId: roleplay.roleplayId,
-        index: index * 2 * tableRoleplays.length + i * 2 + 1
+        index: index * 2 * tableRoleplays.length + i * 2 + 1,
+        assignmentDueDateMs: selectedAssignment?.dueDate ? new Date(selectedAssignment.dueDate).getTime() : null
       }, `student-progress-data-cell-${i}`);
     }), (currentView === "topic" || currentView === "assignment-topic") && tableBots.map((bot, i) => {
       const [courseId, sectionId] = selectedTopic.courseSectionId.split("|");
@@ -922,7 +931,8 @@ function TableRow({
         botId: bot.botId,
         botIsChallengeModeOnly: bot?.isChallengeBot,
         isChallengeModeStudent: isChallengeModeStudent,
-        index: index * 2 * tableBots.length + i * 2 + 1
+        index: index * 2 * tableBots.length + i * 2 + 1,
+        assignmentDueDateMs: selectedAssignment?.dueDate ? new Date(selectedAssignment.dueDate).getTime() : null
       }, `student-progress-data-cell-${i}`);
     }), (currentView === "roleplay" || currentView === "assignment-roleplay") && tableRoleplayGames.map((roleplay, i) => {
       const [courseId, sectionId] = selectedTopic.courseSectionId.split("|");

package/dist/Tables/Progress/utils.js

@@ -134,6 +134,7 @@ export const formatMemberCourseCompletions = (courses = [], completions = [], as
 export const formatMemberAssignmentCompletions = (assignments = [], courses = [], completions = [], isChallengeModeStudent = false) => {
   const stats = assignments.reduce((obj, assignment) => {
     const assignmentCompletions = completions.filter(completion => assignment.exercises?.some(e => {
+      if (!e.name && !e.roleplayId && !e.botId && !e.courseSectionTopicId) return false;
       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;

package/dist/Tables/RecordingListCards/RecordingListCards.js

@@ -32,7 +32,7 @@ const RecordingListCards = withStyles(({
   const [feedbackOpen, setFeedbackOpen] = useState(false);
   const [cardsToShow, setCardsToShow] = useState(3);
   const [recordingIdFromUrl, setRecordingIdFromUrl, clearRecordingIdFromUrl] = useUrlQueryParam("meetingId", {
-    hash: 'Discuss'
+    hash: "Discuss"
   });
   useEffect(() => {
     if (recordingIdFromUrl && recordingsTableData.length > 0) {

package/dist/hooks/useExerciseState.js

@@ -1540,7 +1540,7 @@ export default function useExerciseState({
   };
   const handleSubmitBotMessage = async () => {
     try {
-      if (botText && botText.trim() !== '') {
+      if (botText && botText.trim() !== "") {
         const method = `${finalTranscript || ""} ${interimTranscript || ""}`.trim() === botText.trim() ? "voice" : "text";
         addBotMessage(botText, true, false, method, false, finalTranscript);
         resetTranscript();

package/dist/hooks/useRecognition.js

@@ -98,8 +98,8 @@ export default function useRecognition(props = {}) {
     };
   }, []);
 
-  /**
-   * Stops recording and closes everything down. Runs on error or on stop.
+  /**
+   * Stops recording and closes everything down. Runs on error or on stop.
    */
   function closeAll(keepSocketAlive) {
     // Clear the listeners (prevents issue if opening and closing repeatedly)
@@ -140,10 +140,10 @@ export default function useRecognition(props = {}) {
     }
   }
 
-  /**
-   * @param {object} gcloudParams Params for gcloud
-   * @param {function} onData Callback to run on data each time it's received
-   * @param {function} onError Callback to run on an error if one is emitted.
+  /**
+   * @param {object} gcloudParams Params for gcloud
+   * @param {function} onData Callback to run on data each time it's received
+   * @param {function} onError Callback to run on an error if one is emitted.
    */
   const initRecording = async (gcloudParams, onData, onError) => {
     try {

package/dist/hooks/useSpreadsheetState.js

@@ -1,12 +1,12 @@
 import { useEffect, useState } from "react";
 
-/**
- * Custom hook to manage the state and handlers of spreadsheet in react-spreadsheet-grid component
- * @param data
- * @param rowTemplate
- * @param initColumns
- * @param isRowEmpty
- * @returns {{onCellClick: (function(*): void), setRows: (value: (((prevState: *[]) => *[]) | *[])) => void, columns: unknown, onColumnResize: onColumnResize, selectedRow: unknown, rows: *[], onFieldChange: (function(*, *): function(*): void), isRowEmpty, setSelectedRow: (value: unknown) => void, deleteSelectedRow: deleteSelectedRow}}
+/**
+ * Custom hook to manage the state and handlers of spreadsheet in react-spreadsheet-grid component
+ * @param data
+ * @param rowTemplate
+ * @param initColumns
+ * @param isRowEmpty
+ * @returns {{onCellClick: (function(*): void), setRows: (value: (((prevState: *[]) => *[]) | *[])) => void, columns: unknown, onColumnResize: onColumnResize, selectedRow: unknown, rows: *[], onFieldChange: (function(*, *): function(*): void), isRowEmpty, setSelectedRow: (value: unknown) => void, deleteSelectedRow: deleteSelectedRow}}
  */
 export default function useSpreadsheetState({
   data = [],

package/dist/utils/canvasUtils.js

@@ -9,11 +9,11 @@ function getRadianAngle(degreeValue) {
   return degreeValue * Math.PI / 180;
 }
 
-/**
- * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
- * @param {File} image - Image File url
- * @param {Object} pixelCrop - pixelCrop Object provided by react-easy-crop
- * @param {number} rotation - optional rotation parameter
+/**
+ * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
+ * @param {File} image - Image File url
+ * @param {Object} pixelCrop - pixelCrop Object provided by react-easy-crop
+ * @param {number} rotation - optional rotation parameter
  */
 export async function getCroppedImg(imageSrc, pixelCrop, rotation = 0) {
   const image = await createImage(imageSrc);

package/dist/utils/index.js

@@ -389,14 +389,14 @@ export const calcPercentageCompletion = (sections = []) => {
   return result;
 };
 
-/**
- * Compares an array from old and new props between renders. Used as the validation
- * function when using `memo()` on a component
- * @param prevProps
- * @param nextProps
- * @param key The array to compare props e.g. roleplays, courses
- * @param idField The unique object ID of an object e.g. courseId, roleplayId
- * @returns {this is *[]|boolean}
+/**
+ * Compares an array from old and new props between renders. Used as the validation
+ * function when using `memo()` on a component
+ * @param prevProps
+ * @param nextProps
+ * @param key The array to compare props e.g. roleplays, courses
+ * @param idField The unique object ID of an object e.g. courseId, roleplayId
+ * @returns {this is *[]|boolean}
  */
 export const propsAreEqual = (prevProps, nextProps, key, idField) => {
   const oldPropsArray = prevProps[key] || [];

package/package.json

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