@nualang/nualang-ui-components 0.1.1327 → 0.1.1329

package/dist/Cards/FeedbackCard/FeedbackCard.js

@@ -4,6 +4,8 @@ import { grey, green } from "@mui/material/colors";
 import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import TrendingUpIcon from "@mui/icons-material/TrendingUp";
+import TrendingDownIcon from "@mui/icons-material/TrendingDown";
 import { Formik } from "formik";
 import * as Yup from "yup";
 import RecordingDialog from "../../Dialogs/RecordingDialog/RecordingDialog";
@@ -14,6 +16,38 @@ 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";
+const getPerformanceLevel = (student, aiGrade) => {
+  if (!aiGrade || Object.keys(aiGrade).length === 0) return null;
+  const keyVariants = [student.username, `${student.username}Student`, student.username?.replace(/\s+/g, "")];
+  const aiData = keyVariants.map(k => aiGrade?.[k]).find(v => v && typeof v === "object") || null;
+  return aiData?.LevelPerformance || null;
+};
+const getPerformanceChipProps = (level, t) => {
+  switch (level?.toLowerCase()) {
+    case 'above':
+      return {
+        label: t('above_level'),
+        color: 'success',
+        icon: /*#__PURE__*/_jsx(TrendingUpIcon, {
+          sx: {
+            fontSize: 16
+          }
+        })
+      };
+    case 'below':
+      return {
+        label: t('below_level'),
+        color: 'warning',
+        icon: /*#__PURE__*/_jsx(TrendingDownIcon, {
+          sx: {
+            fontSize: 16
+          }
+        })
+      };
+    default:
+      return null;
+  }
+};
 export default function FeedbackCard({
   t = x => x,
   discussionData = {},
@@ -82,18 +116,21 @@ export default function FeedbackCard({
       attendedMembers.forEach(student => {
         const existingStudentFeedback = existingFeedback[student.memberId];
         feedbackData[student.memberId] = {
-          feedbackText: existingStudentFeedback?.feedbackText || ""
+          feedbackText: existingStudentFeedback?.feedbackText || "",
+          levelPerformance: existingStudentFeedback?.levelPerformance || null
         };
       });
       notAttendedMembers.forEach(student => {
         feedbackData[student.memberId] = {
-          feedbackText: existingFeedback[student.memberId]?.feedbackText || t("not_present")
+          feedbackText: existingFeedback[student.memberId]?.feedbackText || t("not_present"),
+          levelPerformance: existingFeedback[student.memberId]?.levelPerformance || null
         };
       });
     } else {
       selectedMembers.forEach(student => {
         feedbackData[student.memberId] = {
-          feedbackText: existingFeedback[student.memberId]?.feedbackText || ""
+          feedbackText: existingFeedback[student.memberId]?.feedbackText || "",
+          levelPerformance: existingFeedback[student.memberId]?.levelPerformance || null
         };
       });
     }
@@ -133,6 +170,9 @@ export default function FeedbackCard({
       if (aiData?.Feedback) {
         formik.setFieldValue(`feedbackData.${student.memberId}.feedbackText`, aiData.Feedback);
       }
+      if (aiData?.LevelPerformance) {
+        formik.setFieldValue(`feedbackData.${student.memberId}.levelPerformance`, aiData.LevelPerformance);
+      }
     });
     setHasBeenEdited(true);
     setIsSubmitted(false);
@@ -190,9 +230,18 @@ export default function FeedbackCard({
           const feedbackDataWithAbsent = {
             ...values.feedbackData
           };
+          selectedMembers.forEach(student => {
+            const existingLevel = feedbackDataWithAbsent[student.memberId]?.levelPerformance;
+            const aiLevel = getPerformanceLevel(student, aiGrade);
+            feedbackDataWithAbsent[student.memberId] = {
+              ...feedbackDataWithAbsent[student.memberId],
+              levelPerformance: existingLevel ?? aiLevel ?? null
+            };
+          });
           notAttendedMembers.forEach(student => {
             feedbackDataWithAbsent[student.memberId] = {
-              feedbackText: t("not_present")
+              feedbackText: t("not_present"),
+              levelPerformance: feedbackDataWithAbsent[student.memberId]?.levelPerformance ?? null
             };
           });
           await onSubmitFeedback({
@@ -314,6 +363,8 @@ export default function FeedbackCard({
                   const isAbsent = hasSubmission && !joinedMembers.includes(student.memberId);
                   const disabled = !hasSubmission || isAbsent;
                   const studentFeedback = values.feedbackData[student.memberId] || {};
+                  const perfLevel = studentFeedback.levelPerformance || getPerformanceLevel(student, aiGrade);
+                  const chipProps = getPerformanceChipProps(perfLevel, t);
                   return /*#__PURE__*/_jsx(Box, {
                     sx: {
                       py: 2
@@ -330,7 +381,7 @@ export default function FeedbackCard({
                         children: /*#__PURE__*/_jsxs(Box, {
                           display: "flex",
                           alignItems: "center",
-                          gap: 2,
+                          gap: 1.5,
                           children: [/*#__PURE__*/_jsx(Avatar, {
                             alt: student.username,
                             src: student.userImage,
@@ -339,12 +390,65 @@ export default function FeedbackCard({
                               height: 48,
                               filter: isAbsent ? "grayscale(100%)" : "none"
                             }
-                          }), /*#__PURE__*/_jsx(Typography, {
-                            fontWeight: 600,
-                            sx: {
-                              color: isAbsent ? grey[500] : "text.primary"
-                            },
-                            children: student.username
+                          }), /*#__PURE__*/_jsxs(Box, {
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: 0.5,
+                            children: [/*#__PURE__*/_jsx(Typography, {
+                              fontWeight: 600,
+                              sx: {
+                                color: isAbsent ? grey[500] : "text.primary"
+                              },
+                              children: student.username
+                            }), chipProps && hasSubmission && !isAbsent && /*#__PURE__*/_jsx(Tooltip, {
+                              title: /*#__PURE__*/_jsxs(Box, {
+                                sx: {
+                                  p: 0.5
+                                },
+                                children: [/*#__PURE__*/_jsx(Typography, {
+                                  variant: "body2",
+                                  fontWeight: "bold",
+                                  sx: {
+                                    mb: 0.5
+                                  },
+                                  children: t('ai_performance_assessment')
+                                }), /*#__PURE__*/_jsx(Typography, {
+                                  variant: "caption",
+                                  sx: {
+                                    display: 'block',
+                                    mb: 0.5
+                                  },
+                                  children: t('performance_chip_tooltip')
+                                }), /*#__PURE__*/_jsx(Typography, {
+                                  variant: "caption",
+                                  sx: {
+                                    fontStyle: 'italic',
+                                    opacity: 0.9
+                                  },
+                                  children: t('performance_chip_note')
+                                })]
+                              }),
+                              placement: "top",
+                              children: /*#__PURE__*/_jsx(Chip, {
+                                label: chipProps.label,
+                                color: chipProps.color,
+                                size: "small",
+                                icon: chipProps.icon,
+                                sx: {
+                                  width: 'fit-content',
+                                  fontWeight: 600,
+                                  fontSize: '0.7rem',
+                                  height: '22px',
+                                  '& .MuiChip-label': {
+                                    paddingLeft: '8px',
+                                    paddingRight: '8px'
+                                  },
+                                  '&:hover': {
+                                    opacity: 0.9
+                                  }
+                                }
+                              })
+                            })]
                           })]
                         })
                       }), /*#__PURE__*/_jsx(Grid, {

package/dist/Dialogs/GenerateBot/GenerateBot.js

@@ -261,7 +261,8 @@ function GenerateBotDialog({
             required: true,
             onChange: handleChange,
             multiline: true,
-            rows: 3
+            rows: 3,
+            autoFocus: true
             // maxLength={200}
           })
         }), /*#__PURE__*/_jsx(Grid, {

package/dist/Dialogs/GroupedFeedbackDialog/GroupedFeedbackDialog.js

@@ -122,8 +122,23 @@ export default function GroupFeedbackDialog({
   const progress = totalDiscussions > 0 ? Math.round(submittedCount / totalDiscussions * 100) : 0;
   const ratio = totalDiscussions > 0 ? submittedCount / totalDiscussions : 0;
   const ringColor = ratio === 0 ? grey[500] : ratio > 0 && ratio <= 1 / 3 ? red[600] : ratio > 1 / 3 && ratio <= 2 / 3 ? orange[600] : ratio > 2 / 3 && ratio < 1 ? green[600] : green[600];
+  const getJoinedMembersNames = (joinedMemberIds, userData) => {
+    if (!joinedMemberIds || !Array.isArray(joinedMemberIds)) {
+      return [];
+    }
+    return joinedMemberIds.map(memberId => {
+      const user = userData.find(u => u.memberId === memberId);
+      return {
+        memberId: memberId,
+        name: user?.username || user?.createdByName || 'Unknown',
+        username: user?.username,
+        createdByName: user?.createdByName
+      };
+    }).filter(member => member.name !== 'Unknown');
+  };
   const handleGenerateFeedback = async discussionData => {
     if (handleBatchGradeConversations) {
+      const joinedMembersWithNames = getJoinedMembersNames(discussionData.joinedMembers || [], userData);
       await handleBatchGradeConversations([{
         meetingId: discussionData.meetingId || discussionData.meetingID,
         extMeetingId: discussionData.extMeetingId,
@@ -131,7 +146,9 @@ export default function GroupFeedbackDialog({
         meetingCreator: discussionData.meetingCreator,
         conversation: discussionData.conversation,
         meetingPrompt: discussionData.meetingPrompt,
-        learnLang: learnLang
+        learnLang: learnLang,
+        joinedMembers: discussionData.joinedMembers || [],
+        joinedMembersNames: joinedMembersWithNames
       }]);
     }
   };
@@ -144,13 +161,17 @@ export default function GroupFeedbackDialog({
     }).map(discussion => {
       const discMeetingId = discussion.meetingID || discussion.meetingId;
       const submissionForThisDiscussion = submissionsByMeetingId[discMeetingId];
+      const joinedMembersWithNames = getJoinedMembersNames(submissionForThisDiscussion.joinedMembers || [], userData);
       return {
         meetingId: submissionForThisDiscussion.meetingId || submissionForThisDiscussion.meetingID,
         extMeetingId: submissionForThisDiscussion.extMeetingId,
         creator: submissionForThisDiscussion.creator,
         meetingCreator: submissionForThisDiscussion.meetingCreator,
         conversation: submissionForThisDiscussion.conversation || [],
-        meetingPrompt: discussion.meetingPrompt || submissionForThisDiscussion.meetingPrompt
+        meetingPrompt: discussion.meetingPrompt || submissionForThisDiscussion.meetingPrompt,
+        learnLang: learnLang,
+        joinedMembers: submissionForThisDiscussion.joinedMembers || [],
+        joinedMembersNames: joinedMembersWithNames
       };
     });
     if (conversationsToGrade.length > 0 && handleBatchGradeConversations) {
@@ -189,6 +210,7 @@ export default function GroupFeedbackDialog({
           selectedAttendee: studentId,
           selectedAttendeeName: student?.username || student?.createdByName,
           feedbackText: feedbackData[studentId]?.feedbackText || "",
+          levelPerformance: feedbackData[studentId]?.levelPerformance || "",
           gradingOption: "Individual Grade"
         };
         await handleCreateFeedback(values, recordingData);
@@ -205,12 +227,14 @@ export default function GroupFeedbackDialog({
       const meetingId = submission.meetingId || submission.meetingID;
       const userId = submission.userId || submission.selectedAttendee;
       const feedbackText = submission.feedbackText || "";
+      const levelPerformance = submission.levelPerformance || null;
       if (meetingId && userId) {
         if (!feedbackMap[meetingId]) {
           feedbackMap[meetingId] = {};
         }
         feedbackMap[meetingId][userId] = {
-          feedbackText: feedbackText
+          feedbackText: feedbackText,
+          levelPerformance: levelPerformance
         };
       }
     });

package/dist/Exercises/Listener/Listener.js

@@ -863,7 +863,8 @@ function Listener({
                 fullWidth: true,
                 multiline: true,
                 autoComplete: "off",
-                characters: learnLangCharacters ? learnLangCharacters : null
+                characters: learnLangCharacters ? learnLangCharacters : null,
+                autoFocus: true
               })
             })
           }), isWordBankEnabled && /*#__PURE__*/_jsx(Grid, {

package/dist/Exercises/Translator/Translator.js

@@ -896,7 +896,8 @@ function Translator({
                 multiline: true,
                 fullWidth: true,
                 autoComplete: "off",
-                characters: forLangCharacters ? forLangCharacters : null
+                characters: forLangCharacters ? forLangCharacters : null,
+                autoFocus: true
               })]
             })
           }), isWordBankEnabled && /*#__PURE__*/_jsx(Grid, {

package/dist/Forms/AppContact/AppContact.js

@@ -30,7 +30,8 @@ function AppContact({
   };
   const {
     email,
-    message
+    message,
+    jobTitle
   } = values;
   const isGenerated = checkIsGeneratedEmail(authEmail);
   return /*#__PURE__*/_jsx("form", {
@@ -97,6 +98,23 @@ function AppContact({
               },
               required: true
             })
+          }), /*#__PURE__*/_jsx(Grid, {
+            size: 12,
+            children: /*#__PURE__*/_jsx(TextField, {
+              name: "jobTitle",
+              value: jobTitle || "",
+              onChange: handleChange,
+              autoComplete: "off",
+              tabIndex: -1,
+              sx: {
+                position: "absolute",
+                left: "-10000px",
+                top: "auto",
+                width: "1px",
+                height: "1px",
+                overflow: "hidden"
+              }
+            })
           }), /*#__PURE__*/_jsx(Grid, {
             size: 12,
             children: /*#__PURE__*/_jsx(Button, {

package/dist/Forms/InputHelper/InputHelper.js

@@ -172,7 +172,7 @@ function InputHelper(props) {
     margin,
     inputRef,
     maxLength,
-    autofocus,
+    autoFocus,
     learnLang
   } = props;
   const textInput = useRef(null);
@@ -214,7 +214,7 @@ function InputHelper(props) {
       startAdornment: adornmentPosition === "start" ? adornment : null,
       endAdornment: adornmentPosition === "end" ? adornment : null,
       inputRef: activeRef,
-      autoFocus: autofocus,
+      autoFocus: autoFocus,
       inputProps: {
         maxLength
       },
@@ -226,7 +226,7 @@ function InputHelper(props) {
       endAdornment: adornmentPosition === "end" ? adornment : null,
       labelWidth: 150,
       inputRef: activeRef,
-      autoFocus: autofocus,
+      autoFocus: autoFocus,
       inputProps: {
         maxLength
       },

package/dist/Live/LiveListener/LiveListener.js

@@ -409,7 +409,7 @@ function LiveListener({
             fullWidth: true,
             multiline: true,
             autoComplete: "off",
-            autofocus: "true",
+            autoFocus: true,
             characters: learnLangCharacters ? learnLangCharacters : null
           })
         }), !isWordBankHidden && !isCreator && wordBankEnabled && keyboardEnabled && /*#__PURE__*/_jsx(Grid, {

package/dist/Live/LiveTranslator/LiveTranslator.js

@@ -609,7 +609,8 @@ function LiveTranslator({
                   multiline: true,
                   fullWidth: true,
                   autoComplete: "off",
-                  characters: forLangCharacters ? forLangCharacters : null
+                  characters: forLangCharacters ? forLangCharacters : null,
+                  autoFocus: true
                 })]
               }), !isWordBankHidden && wordBankEnabled && keyboardEnabled && /*#__PURE__*/_jsx(Grid, {
                 children: /*#__PURE__*/_jsx(Tooltip, {

package/dist/Misc/NualaCreating/NualaCreating.js

@@ -1,16 +1,15 @@
 import { useState } from "react";
 import { Box } from "@mui/material";
-import Nuala from "./Nuala1";
 import Nuala2 from "./Nuala2";
 import Nuala3 from "./Nuala3";
 import "./styles.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function NualaCreating() {
-  // Create an array with the three components
-  const images = [/*#__PURE__*/_jsx(Nuala, {}), /*#__PURE__*/_jsx(Nuala2, {}), /*#__PURE__*/_jsx(Nuala3, {})];
+  // Store the component references, not elements
+  const images = [Nuala2, Nuala3];
 
-  // Use useState to pick a random image only once on mount
-  const [randomImage] = useState(() => {
+  // Pick a random component on mount
+  const [RandomImage] = useState(() => {
     return images[Math.floor(Math.random() * images.length)];
   });
   return /*#__PURE__*/_jsx(Box, {
@@ -19,6 +18,6 @@ export default function NualaCreating() {
       marginLeft: "auto",
       marginRight: "auto"
     },
-    children: randomImage
+    children: /*#__PURE__*/_jsx(RandomImage, {})
   });
 }

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

@@ -567,6 +567,11 @@ function Classroom({
     searchParams = new URLSearchParams(location.search);
     courseSectionTopicId = searchParams.get("courseSectionTopicId") || "";
   }
+  const removeCourseSectionTopicIdFromUrl = () => {
+    const url = new URL(window.location);
+    url.searchParams.delete('courseSectionTopicId');
+    window.history.replaceState({}, '', url);
+  };
   useEffect(() => {
     if (createLiveGame && isNualangLiveEnabled) {
       handleOpenSelectExercise();
@@ -1598,10 +1603,14 @@ function Classroom({
       t: t,
       stage: import.meta.env.REACT_APP_STAGE,
       imageLoading: imageLoading,
-      handleClose: () => setIsCreateMeetingDialogOpen(false),
+      handleClose: () => {
+        setIsCreateMeetingDialogOpen(false);
+        removeCourseSectionTopicIdFromUrl();
+      },
       handleSubmit: async props => {
         await formattedScheduleMeeting(props);
         setIsCreateMeetingDialogOpen(false);
+        removeCourseSectionTopicIdFromUrl();
       },
       values: {
         members: classroomMembers,

package/dist/Tables/Progress/Progress.js

@@ -35,7 +35,8 @@ const TableToolbar = ({
   reportTypes,
   setReportType,
   reportType,
-  currentView
+  currentView,
+  memberId
 }) => {
   const {
     useQueryClient
@@ -94,7 +95,7 @@ const TableToolbar = ({
         },
         children: reportFilterOptions
       })
-    }), reportType !== "discuss" && /*#__PURE__*/_jsx(Grid, {
+    }), reportType !== "discuss" && !memberId && /*#__PURE__*/_jsx(Grid, {
       mt: 0.5,
       mr: 1,
       children: /*#__PURE__*/_jsx(SelectMembers, {
@@ -105,7 +106,7 @@ const TableToolbar = ({
       })
     }), /*#__PURE__*/_jsx(Box, {
       flexGrow: 1
-    }), reportType !== "discuss" && /*#__PURE__*/_jsx(Grid, {
+    }), reportType !== "discuss" && !memberId && /*#__PURE__*/_jsx(Grid, {
       children: /*#__PURE__*/_jsxs(Grid, {
         container: true,
         spacing: 1,
@@ -177,7 +178,8 @@ function Progress({
   const reportFilters = ["percentage_complete", "correct_answer_percentage", "avg_pronunciation_score"];
   const [filter, setFilter] = useState(reportFilters[0]);
   const reportTypes = isVideoChatEnabled ? ["courses", "assignments", "discuss"] : ["courses", "assignments"];
-  const [reportType, setReportType] = useState(reportTypes[0]);
+  const availableReportTypes = memberId ? ["courses", "assignments"] : reportTypes;
+  const [reportType, setReportType] = useState(availableReportTypes[0]);
   useEffect(() => {
     if (selectedTopic) {
       setRoleplays(selectedTopic?.roleplays);
@@ -233,7 +235,7 @@ function Progress({
   useEffect(() => {
     if ("URLSearchParams" in window) {
       const searchParams = searchStringToObj(window.location.search);
-      if (searchParams.reportType && searchParams.reportType !== reportTypes[0] && reportTypes.includes(searchParams.reportType) && reportType !== searchParams.reportType) {
+      if (searchParams.reportType && searchParams.reportType !== availableReportTypes[0] && availableReportTypes.includes(searchParams.reportType) && reportType !== searchParams.reportType) {
         setReportType(searchParams.reportType);
       }
     }
@@ -277,7 +279,7 @@ function Progress({
   useEffect(() => {
     if ("URLSearchParams" in window) {
       const searchParams = searchStringToObj(window.location.search);
-      if (reportType && reportType !== reportTypes[0]) {
+      if (reportType && reportType !== availableReportTypes[0]) {
         searchParams["reportType"] = reportType;
       } else {
         delete searchParams["reportType"];
@@ -520,7 +522,7 @@ function Progress({
   }
   if (isSmallScreen) {
     return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [!memberId && /*#__PURE__*/_jsx(TableToolbar, {
+      children: [/*#__PURE__*/_jsx(TableToolbar, {
         t: t,
         members: members,
         selectedMembers: selectedMembers,
@@ -529,10 +531,11 @@ function Progress({
         reportFilters: reportFilters,
         filter: filter,
         setFilter: setFilter,
-        reportTypes: reportTypes,
+        reportTypes: availableReportTypes,
         setReportType: setReportType,
         reportType: reportType,
-        currentView: currentView
+        currentView: currentView,
+        memberId: memberId
       }), reportType === "discuss" ? /*#__PURE__*/_jsxs(Grid, {
         container: true,
         spacing: 2,
@@ -593,7 +596,7 @@ function Progress({
     });
   }
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [!memberId && /*#__PURE__*/_jsx(TableToolbar, {
+    children: [/*#__PURE__*/_jsx(TableToolbar, {
       t: t,
       members: members,
       selectedMembers: selectedMembers,
@@ -602,10 +605,11 @@ function Progress({
       reportFilters: reportFilters,
       filter: filter,
       setFilter: setFilter,
-      reportTypes: reportTypes,
+      reportTypes: availableReportTypes,
       setReportType: setReportType,
       reportType: reportType,
-      currentView: currentView
+      currentView: currentView,
+      memberId: memberId
     }), reportType === "discuss" ? /*#__PURE__*/_jsxs(Grid, {
       container: true,
       spacing: 2,

package/package.json

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