@nualang/nualang-ui-components 0.1.1304 → 0.1.1306

package/dist/Assignments/AssignmentCourseSelection/AssignmentCourseSelection.js

@@ -31,7 +31,6 @@ function Course({
   lastClickedExerciseId,
   handleRemoveExercise,
   isPreview,
-  isChallengeModeEnabled = false,
   isChallengeModeStudent
 }) {
   const numOfIds = lastClickedExerciseId ? lastClickedExerciseId.split("|") : [];
@@ -88,7 +87,7 @@ function Course({
       }
     });
     if (courseSections && memberCourseCompletions && selectedExercises) {
-      const sectionsWithProgress = calcCompletions(courseSections.filter(section => assignedSectionIds.has(section.sectionId)), memberCourseCompletions, selectedExercises, true);
+      const sectionsWithProgress = calcCompletions(courseSections.filter(section => assignedSectionIds.has(section.sectionId)), memberCourseCompletions, selectedExercises, isChallengeModeStudent);
       const percentCompletion = calcPercentageCompletion(sectionsWithProgress);
       setCourseSectionCompletion(percentCompletion);
     }
@@ -177,7 +176,6 @@ function Course({
             progressHelpers: progressHelpers,
             memberCourseCompletions: memberCourseCompletions,
             lastClickedExerciseId: lastClickedExerciseId,
-            isChallengeModeEnabled: isChallengeModeEnabled,
             isChallengeModeStudent: isChallengeModeStudent
           })
         })
@@ -208,7 +206,6 @@ function Course({
         course: course,
         handleRemoveExercise: handleRemoveExercise,
         isPreview: isPreview,
-        isChallengeModeEnabled: isChallengeModeEnabled,
         isChallengeModeStudent: isChallengeModeStudent
       })
     })
@@ -236,7 +233,6 @@ function AssignmentCourseSelection({
   lastClickedExerciseId,
   handleRemoveExercise,
   isPreview,
-  isChallengeModeEnabled = false,
   isChallengeModeStudent,
   ...otherProps
 }) {
@@ -264,7 +260,6 @@ function AssignmentCourseSelection({
       lastClickedExerciseId: lastClickedExerciseId,
       handleRemoveExercise: handleRemoveExercise,
       isPreview: isPreview,
-      isChallengeModeEnabled: isChallengeModeEnabled,
       isChallengeModeStudent: isChallengeModeStudent
     }, course.courseId || index))
   });

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -48,7 +48,6 @@ function Exercise({
   lastClickedExerciseId,
   isPreview,
   handleRemoveExercise = null,
-  isChallengeModeEnabled = false,
   isChallengeModeStudent
 }) {
   const [listeningHidden, setListeningHidden] = useState(false);
@@ -269,8 +268,7 @@ function Exercise({
           isCreator: isCreator,
           lastClickedExerciseId: lastClickedExerciseId,
           handleRemoveExercise: handleRemoveExercise,
-          isPreview: isPreview,
-          isChallengeModeEnabled: isChallengeModeEnabled
+          isPreview: isPreview
         })
       })
     }), name.toLowerCase() === "bots" && /*#__PURE__*/_jsx(Collapse, {
@@ -298,7 +296,6 @@ function Exercise({
           lastClickedExerciseId: lastClickedExerciseId,
           handleRemoveExercise: handleRemoveExercise,
           isPreview: isPreview,
-          isChallengeModeEnabled: isChallengeModeEnabled,
           isChallengeModeStudent: isChallengeModeStudent
         })
       })
@@ -885,19 +882,16 @@ function SectionList({
   course,
   handleRemoveExercise,
   isPreview,
-  isChallengeModeEnabled = false,
   isChallengeModeStudent,
   ...otherProps
 }) {
   const [courseSectionWithProgress, setCourseSectionWithProgress] = useState([]);
   useEffect(() => {
     if (sections && memberCourseCompletions && selectedExercises) {
-      const sectionsWithProgress = calcCompletions(sections, memberCourseCompletions, selectedExercises, {
-        includeChallengeBots: isChallengeModeEnabled
-      });
+      const sectionsWithProgress = calcCompletions(sections, memberCourseCompletions, selectedExercises, isChallengeModeStudent);
       setCourseSectionWithProgress(sectionsWithProgress);
     }
-  }, [sections, memberCourseCompletions, selectedExercises, isChallengeModeEnabled]);
+  }, [sections, memberCourseCompletions, selectedExercises, isChallengeModeStudent]);
   const courseSections = courseSectionWithProgress && courseSectionWithProgress.length ? courseSectionWithProgress : sections;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: courseSections.length > 0 ? courseSections.map((section, index) => {

package/dist/Assignments/AssignmentExerciseSelector/AssignmentExerciseSelector.js

@@ -20,7 +20,6 @@ function AssignmentExerciseSelector({
   lastClickedExerciseId,
   handleRemoveExercise,
   isPreview,
-  isChallengeModeEnabled = false,
   isChallengeModeStudent
 }) {
   return /*#__PURE__*/_jsx(Box, {
@@ -43,7 +42,6 @@ function AssignmentExerciseSelector({
       lastClickedExerciseId: lastClickedExerciseId,
       handleRemoveExercise: handleRemoveExercise,
       isPreview: isPreview,
-      isChallengeModeEnabled: isChallengeModeEnabled,
       isChallengeModeStudent: isChallengeModeStudent
     })
   });

package/dist/Assignments/AssignmentSelectExercise/AssignmentSelectExercise.js

@@ -20,7 +20,6 @@ function AssignmentSelectExercise({
   preferred_username,
   progressHelpers,
   memberCourseCompletions,
-  isChallengeModeEnabled = false,
   isChallengeModeStudent
 }) {
   const [isExerciseSelected, setIsExerciseSelected] = useState(false);
@@ -94,7 +93,6 @@ function AssignmentSelectExercise({
         preferred_username: preferred_username,
         progressHelpers: progressHelpers,
         memberCourseCompletions: memberCourseCompletions,
-        isChallengeModeEnabled: isChallengeModeEnabled,
         isChallengeModeStudent: isChallengeModeStudent
       })
     })]

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -50,8 +50,7 @@ export default function CreateAssignmentDialog({
   initialData = {},
   dialogTitle,
   userEmail = "",
-  assignedStudents,
-  isChallengeModeEnabled = false
+  assignedStudents
 }) {
   const {
     classes
@@ -447,8 +446,7 @@ export default function CreateAssignmentDialog({
             viewOnly: true,
             useCase: "assignment-view",
             handleRemoveExercise: handleRemoveExercise,
-            isPreview: true,
-            isChallengeModeEnabled: isChallengeModeEnabled
+            isPreview: true
           })]
         })
       }), /*#__PURE__*/_jsx(Card, {
@@ -637,8 +635,7 @@ export default function CreateAssignmentDialog({
       useCase: "assignment-select",
       selectedExercises: selectedExercises,
       setSelectedExercises: setSelectedExercises,
-      setSubmittedExercises: setSubmittedExercises,
-      isChallengeModeEnabled: isChallengeModeEnabled
+      setSubmittedExercises: setSubmittedExercises
     })]
   });
 }

package/dist/Cards/FeedbackCard/FeedbackCard.js

@@ -0,0 +1,365 @@
+import { useState, useEffect, useRef } from "react";
+import { Card, CardContent, CardActions, Typography, Avatar, Box, Button, TextField, Chip, Grid } from "@mui/material";
+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 { Formik } from "formik";
+import * as Yup from "yup";
+import RecordingDialog from "../../Dialogs/RecordingDialog/RecordingDialog";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function FeedbackCard({
+  t = x => x,
+  discussionData = {},
+  userData = [],
+  hasSubmission = false,
+  aiGrade = {},
+  onGenerateFeedback = () => {},
+  onSubmitFeedback = () => {},
+  setSelectedRecording = () => {},
+  s3Url = "",
+  conversation = {},
+  existingFeedback = {}
+}) {
+  const [isRecordingDialogOpen, setIsRecordingDialogOpen] = useState(false);
+  const [hasBeenEdited, setHasBeenEdited] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [aiJustGenerated, setAiJustGenerated] = useState(false);
+  const formikRef = useRef(null);
+  const initialValuesRef = useRef(null);
+  const selectedMembers = userData.filter(u => [discussionData?.meetingMembers || discussionData?.userIds].flat().includes(u?.memberId));
+  const joinedMembers = discussionData?.joinedMembers || [];
+  let attendedMembers = [];
+  let notAttendedMembers = [];
+  if (hasSubmission) {
+    attendedMembers = selectedMembers.filter(m => joinedMembers.includes(m?.memberId));
+    notAttendedMembers = selectedMembers.filter(m => !joinedMembers.includes(m?.memberId));
+  }
+  const hasFeedbackSubmitted = hasSubmission && attendedMembers.every(member => {
+    const feedback = existingFeedback[member.memberId];
+    return feedback && feedback.feedbackText && feedback.feedbackText.trim() !== "";
+  });
+  const getInitialValues = () => {
+    const feedbackData = {};
+    if (hasSubmission) {
+      attendedMembers.forEach(student => {
+        const existingStudentFeedback = existingFeedback[student.memberId];
+        feedbackData[student.memberId] = {
+          feedbackText: existingStudentFeedback?.feedbackText || ""
+        };
+      });
+      notAttendedMembers.forEach(student => {
+        feedbackData[student.memberId] = {
+          feedbackText: existingFeedback[student.memberId]?.feedbackText || t("not_present")
+        };
+      });
+    } else {
+      selectedMembers.forEach(student => {
+        feedbackData[student.memberId] = {
+          feedbackText: existingFeedback[student.memberId]?.feedbackText || ""
+        };
+      });
+    }
+    return {
+      feedbackData
+    };
+  };
+  const attendeesInThisDiscussion = userData.filter(user => [discussionData?.meetingMembers || discussionData?.userIds].flat().includes(user?.memberId));
+  const handleOpenRecordingDialog = () => {
+    if (hasSubmission) {
+      setSelectedRecording({
+        meetingId: discussionData?.meetingId,
+        extMeetingId: discussionData?.extMeetingId,
+        creator: discussionData?.creator || discussionData?.userId,
+        meetingCreator: discussionData?.meetingCreator
+      });
+      setIsRecordingDialogOpen(true);
+    }
+  };
+  useEffect(() => {
+    const initialVals = getInitialValues();
+    const previous = initialValuesRef.current;
+    const hasChanged = JSON.stringify(previous) !== JSON.stringify(initialVals);
+    if (hasChanged) {
+      initialValuesRef.current = initialVals;
+      setIsSubmitted(false);
+    }
+  }, [existingFeedback, hasSubmission, selectedMembers, attendedMembers, notAttendedMembers, t]);
+  useEffect(() => {
+    const formik = formikRef.current;
+    if (!formik) return;
+    if (!hasSubmission || !aiGrade || Object.keys(aiGrade).length === 0) return;
+    if (!aiJustGenerated) return;
+    userData.forEach(student => {
+      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;
+      if (aiData?.Feedback) {
+        formik.setFieldValue(`feedbackData.${student.memberId}.feedbackText`, aiData.Feedback);
+      }
+    });
+    setHasBeenEdited(true);
+    setIsSubmitted(false);
+    setAiJustGenerated(false);
+  }, [aiGrade, hasSubmission, userData, aiJustGenerated]);
+  const handleGenerateAI = async () => {
+    setAiJustGenerated(true);
+    await onGenerateFeedback(discussionData);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Formik, {
+      innerRef: formikRef,
+      initialValues: getInitialValues(),
+      validationSchema: getFeedbackValidationSchema(attendedMembers.map(m => m.memberId)),
+      onSubmit: async (values, {
+        setSubmitting
+      }) => {
+        setSubmitting(true);
+        try {
+          const allStudents = selectedMembers.map(m => m.memberId);
+          const feedbackDataWithAbsent = {
+            ...values.feedbackData
+          };
+          notAttendedMembers.forEach(student => {
+            feedbackDataWithAbsent[student.memberId] = {
+              feedbackText: t("not_present")
+            };
+          });
+          await onSubmitFeedback({
+            feedbackData: feedbackDataWithAbsent,
+            selectedAttendee: allStudents,
+            discussionData
+          });
+          initialValuesRef.current = JSON.parse(JSON.stringify(values));
+          setHasBeenEdited(false);
+          setIsSubmitted(true);
+        } catch (error) {
+          console.error("Error submitting feedback:", error);
+        } finally {
+          setSubmitting(false);
+        }
+      },
+      enableReinitialize: false,
+      children: ({
+        values,
+        handleSubmit,
+        setFieldValue,
+        isSubmitting
+      }) => {
+        const isFormValid = () => {
+          if (!hasSubmission) return false;
+          return attendedMembers.every(member => {
+            const feedback = values.feedbackData[member.memberId];
+            return feedback?.feedbackText && feedback.feedbackText.trim() !== "";
+          });
+        };
+        const hasChanges = () => {
+          if (!initialValuesRef.current) return false;
+          return attendedMembers.some(member => {
+            const current = values.feedbackData[member.memberId]?.feedbackText || "";
+            const initial = initialValuesRef.current.feedbackData[member.memberId]?.feedbackText || "";
+            return current !== initial;
+          });
+        };
+        const canSubmit = hasSubmission && !isSubmitting && isFormValid() && (hasChanges() || hasBeenEdited) && !isSubmitted;
+        return /*#__PURE__*/_jsx("form", {
+          onSubmit: handleSubmit,
+          children: /*#__PURE__*/_jsxs(Card, {
+            sx: {
+              mb: 3,
+              borderRadius: 3,
+              boxShadow: 3,
+              overflow: "hidden"
+            },
+            children: [/*#__PURE__*/_jsx(Box, {
+              sx: {
+                px: 3,
+                pt: 2,
+                pb: 1,
+                fontWeight: 600,
+                color: "text.secondary"
+              },
+              children: /*#__PURE__*/_jsxs(Grid, {
+                container: true,
+                alignItems: "center",
+                spacing: 3,
+                children: [/*#__PURE__*/_jsx(Grid, {
+                  size: {
+                    xs: 12,
+                    md: 2.5
+                  },
+                  children: /*#__PURE__*/_jsx(Typography, {
+                    variant: "subtitle2",
+                    children: t("student")
+                  })
+                }), /*#__PURE__*/_jsx(Grid, {
+                  size: {
+                    xs: 12,
+                    md: 9.5
+                  },
+                  children: /*#__PURE__*/_jsx(Typography, {
+                    variant: "subtitle2",
+                    children: t("feedback")
+                  })
+                })]
+              })
+            }), /*#__PURE__*/_jsx(CardContent, {
+              sx: {
+                px: 3,
+                pt: 1
+              },
+              children: [...selectedMembers].sort((a, b) => {
+                const aJoined = joinedMembers.includes(a.memberId);
+                const bJoined = joinedMembers.includes(b.memberId);
+                return aJoined === bJoined ? 0 : aJoined ? -1 : 1;
+              }).map(student => {
+                const isAbsent = hasSubmission && !joinedMembers.includes(student.memberId);
+                const disabled = !hasSubmission || isAbsent;
+                const studentFeedback = values.feedbackData[student.memberId] || {};
+                return /*#__PURE__*/_jsx(Box, {
+                  sx: {
+                    py: 2
+                  },
+                  children: /*#__PURE__*/_jsxs(Grid, {
+                    container: true,
+                    alignItems: "flex-start",
+                    spacing: 3,
+                    children: [/*#__PURE__*/_jsx(Grid, {
+                      size: {
+                        xs: 12,
+                        md: 2.5
+                      },
+                      children: /*#__PURE__*/_jsxs(Box, {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 2,
+                        children: [/*#__PURE__*/_jsx(Avatar, {
+                          alt: student.username,
+                          src: student.userImage,
+                          sx: {
+                            width: 48,
+                            height: 48,
+                            filter: isAbsent ? "grayscale(100%)" : "none"
+                          }
+                        }), /*#__PURE__*/_jsx(Typography, {
+                          fontWeight: 600,
+                          sx: {
+                            color: isAbsent ? grey[500] : "text.primary"
+                          },
+                          children: student.username
+                        })]
+                      })
+                    }), /*#__PURE__*/_jsx(Grid, {
+                      size: {
+                        xs: 12,
+                        md: 9.5
+                      },
+                      children: /*#__PURE__*/_jsx(TextField, {
+                        variant: "outlined",
+                        fullWidth: true,
+                        multiline: true,
+                        disabled: disabled,
+                        value: studentFeedback.feedbackText || "",
+                        onChange: e => {
+                          setFieldValue(`feedbackData.${student.memberId}.feedbackText`, e.target.value);
+                          setHasBeenEdited(true);
+                          setIsSubmitted(false);
+                        },
+                        placeholder: t("Write your feedback here")
+                      })
+                    })]
+                  })
+                }, student.memberId);
+              })
+            }), /*#__PURE__*/_jsxs(CardActions, {
+              sx: {
+                px: 3,
+                py: 2,
+                justifyContent: "space-between",
+                alignItems: "center",
+                flexWrap: "wrap",
+                gap: 1.5
+              },
+              children: [/*#__PURE__*/_jsxs(Box, {
+                sx: {
+                  display: "flex",
+                  gap: 1.5
+                },
+                children: [!hasSubmission && /*#__PURE__*/_jsx(Chip, {
+                  label: t("group_not_submitted"),
+                  color: "warning",
+                  variant: "filled",
+                  icon: /*#__PURE__*/_jsx(ErrorOutlineIcon, {}),
+                  sx: {
+                    fontWeight: 500,
+                    borderRadius: "20px"
+                  }
+                }), hasFeedbackSubmitted && /*#__PURE__*/_jsx(Chip, {
+                  label: t("feedback_submitted"),
+                  color: "success",
+                  variant: "filled",
+                  icon: /*#__PURE__*/_jsx(CheckCircleIcon, {}),
+                  sx: {
+                    fontWeight: 500,
+                    borderRadius: "20px",
+                    bgcolor: green[600]
+                  }
+                })]
+              }), /*#__PURE__*/_jsxs(Box, {
+                sx: {
+                  display: "flex",
+                  gap: 1.5,
+                  ml: "auto"
+                },
+                children: [/*#__PURE__*/_jsx(Button, {
+                  variant: "outlined",
+                  disabled: !hasSubmission,
+                  onClick: handleOpenRecordingDialog,
+                  children: t("view_recording")
+                }), /*#__PURE__*/_jsx(Button, {
+                  variant: "contained",
+                  color: "secondary",
+                  disabled: !hasSubmission,
+                  onClick: handleGenerateAI,
+                  endIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
+                  children: t("generate_feedback")
+                }), /*#__PURE__*/_jsx(Button, {
+                  type: "submit",
+                  variant: "contained",
+                  disabled: !canSubmit,
+                  children: isSubmitting ? t("submitting") : t("submit_feedback")
+                })]
+              })]
+            })]
+          })
+        });
+      }
+    }), /*#__PURE__*/_jsx(RecordingDialog, {
+      t: t,
+      open: isRecordingDialogOpen,
+      handleClose: () => setIsRecordingDialogOpen(false),
+      meetingID: discussionData?.meetingID || discussionData?.meetingId,
+      meetingPrompt: discussionData?.meetingPrompt,
+      meetingTopic: discussionData?.meetingTopic,
+      isTeacher: true,
+      attendeesData: attendeesInThisDiscussion,
+      conversation: conversation,
+      s3Url: s3Url,
+      playerRef: {
+        current: null
+      },
+      aiGrade: aiGrade,
+      hasBadLanguage: discussionData?.hasBadLanguage || false
+    })]
+  });
+}
+const getFeedbackValidationSchema = attendedMemberIds => {
+  return Yup.object().shape({
+    feedbackData: Yup.object().test("all-attended-filled", "All attended students must have feedback", function (value) {
+      if (!attendedMemberIds || attendedMemberIds.length === 0) return true;
+      return attendedMemberIds.every(memberId => {
+        const feedback = value?.[memberId];
+        return feedback?.feedbackText && feedback.feedbackText.trim() !== "";
+      });
+    })
+  });
+};