@nualang/nualang-ui-components 0.1.1313 → 0.1.1315

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -6,6 +6,8 @@ import Refresh from "@mui/icons-material/Refresh";
 import TeacherCreate from "../../img/teacher-create-2.svg";
 import Add from "@mui/icons-material/Add";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VISIBILITY_LEAD_MINUTES = 5; // how many minutes before scheduleDate it becomes visible to students
+
 const AssignmentCardsList = ({
   t = text => text,
   assignments = [],
@@ -31,8 +33,7 @@ const AssignmentCardsList = ({
   isChallengeModeStudent
 }) => {
   const [lastClickedExerciseId, setLastClickedExerciseId] = useState(null);
-  const [filter, setFilter] = useState("all"); // Filter state
-
+  const [filter, setFilter] = useState("all");
   useEffect(() => {
     const stored = localStorage.getItem("lastClickedExercise");
     if (stored) {
@@ -47,20 +48,27 @@ const AssignmentCardsList = ({
     }
   }, []);
   const now = new Date();
-  const filteredAssignments = assignments.filter(assignment => {
+  const safeAssignments = Array.isArray(assignments) ? assignments : [];
+  const filteredAssignments = safeAssignments.filter(assignment => {
     if (!isCreator) {
       if (Array.isArray(assignment.assignedStudents) && !assignment.assignedStudents.includes(memberId)) {
         return false;
       }
-      if (assignment.scheduleDate && new Date(assignment.scheduleDate) > now) {
-        return false;
+      if (assignment.scheduleDate) {
+        const scheduleDateObj = new Date(assignment.scheduleDate);
+        const visibleFrom = new Date(scheduleDateObj.getTime() - VISIBILITY_LEAD_MINUTES * 60 * 1000);
+        if (visibleFrom > now) {
+          return false;
+        }
       }
     }
     return true;
   }).filter(assignment => {
     if (filter === "all") return true;
     if (filter === "scheduled") {
-      return assignment.scheduleDate && new Date(assignment.scheduleDate) > now;
+      if (!assignment.scheduleDate) return false;
+      const scheduleDateObj = new Date(assignment.scheduleDate);
+      return scheduleDateObj > now;
     }
     if (filter === "pastDue") {
       return assignment.dueDate && new Date(assignment.dueDate) < now;
@@ -71,12 +79,12 @@ const AssignmentCardsList = ({
     return true;
   }).sort((a, b) => {
     if (filter === "dueNext") {
-      return new Date(a.dueDate) - new Date(b.dueDate);
+      return new Date(a.dueDate || 0) - new Date(b.dueDate || 0);
     }
     if (filter === "scheduled") {
-      return new Date(a.scheduleDate) - new Date(b.scheduleDate);
+      return new Date(a.scheduleDate || 0) - new Date(b.scheduleDate || 0);
     }
-    return new Date(b.createdAt) - new Date(a.createdAt);
+    return new Date(b.createdAt || 0) - new Date(a.createdAt || 0);
   });
   if (isLoadingAssignments) {
     return /*#__PURE__*/_jsxs(Box, {
@@ -150,7 +158,7 @@ const AssignmentCardsList = ({
       }, idx))]
     });
   }
-  if (!assignments || assignments.length === 0) {
+  if (!safeAssignments.length || filteredAssignments.length === 0) {
     return /*#__PURE__*/_jsx(Box, {
       mb: 1,
       children: /*#__PURE__*/_jsxs(Box, {
@@ -290,9 +298,6 @@ const AssignmentCardsList = ({
           onClick: refreshAssignments,
           "aria-label": "refresh",
           size: "large",
-          sx: {
-            size: "large"
-          },
           children: /*#__PURE__*/_jsx(Refresh, {
             fontSize: "inherit"
           })
@@ -325,8 +330,24 @@ AssignmentCardsList.propTypes = {
   t: PropTypes.func,
   assignments: PropTypes.array,
   isCreator: PropTypes.bool,
-  onRefresh: PropTypes.func,
+  handleCreateAssignment: PropTypes.func,
+  getCourses: PropTypes.func,
+  getCourseSections: PropTypes.func,
+  getRoleplays: PropTypes.func,
+  deleteAssignment: PropTypes.func,
+  handleEditAssignment: PropTypes.func,
+  refreshAssignments: PropTypes.func,
+  username: PropTypes.string,
+  preferred_username: PropTypes.string,
+  progressHelpers: PropTypes.object,
+  fetchMemberCourseCompletions: PropTypes.func,
+  memberId: PropTypes.string,
+  handleViewProgress: PropTypes.func,
+  lastAssignmentFetch: PropTypes.any,
+  assignmentMembersById: PropTypes.object,
   isLoadingAssignments: PropTypes.bool,
-  assignmentMembersById: PropTypes.object
+  members: PropTypes.array,
+  courses: PropTypes.array,
+  isChallengeModeStudent: PropTypes.bool
 };
 export default AssignmentCardsList;

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -62,7 +62,7 @@ export default function CreateAssignmentDialog({
   const [submittedExercises, setSubmittedExercises] = useState(initialData.exercises ? initialData.exercises : []);
   const [members, setMembers] = useState([]);
   const [assignment, setAssignment] = useState({
-    classroomId: classroom?.length > 0 ? [classroom] : [],
+    classroomId: classroom && classroom.length > 0 ? [classroom] : [],
     assignedStudents,
     title: initialData.title ? initialData.title : undefined,
     instructions: initialData.instructions ? initialData.instructions : t("default_assignment_instructions"),
@@ -174,7 +174,12 @@ export default function CreateAssignmentDialog({
     let filteredCourses = selectedCourses.filter(course => submittedExercises.some(exercise => exercise.courseSectionTopicId?.split("|")[0] === course.courseId));
     setAssignment(prev => ({
       ...prev,
-      courses: filteredCourses
+      courses: filteredCourses.map(course => ({
+        courseId: course.courseId,
+        courseName: course.courseName,
+        description: course.description,
+        picture: course.picture
+      }))
     }));
     const selectedTopicIds = new Set(submittedExercises.map(ex => ex.courseSectionTopicId));
     const topicNames = Array.from(new Set(filteredCourses.flatMap(course => course.sections?.flatMap(section => section.topics?.flatMap(topic => {
@@ -212,10 +217,12 @@ export default function CreateAssignmentDialog({
     }));
   }, [members]);
   useEffect(() => {
-    setAssignment(prev => ({
-      ...prev,
-      classroomId: [classroom]
-    }));
+    if (classroom && classroom.length > 0 && !assignment.classroomId?.includes(classroom)) {
+      setAssignment(prev => ({
+        ...prev,
+        classroomId: [classroom]
+      }));
+    }
   }, [classroom]);
   const [isSelectExerciseOpen, setIsSelectExerciseOpen] = useState(false);
   const handleCloseSelectExercise = () => {

package/dist/Cards/FeedbackCard/FeedbackCard.js

@@ -25,7 +25,12 @@ export default function FeedbackCard({
   setSelectedRecording = () => {},
   s3Url = "",
   conversation = {},
-  existingFeedback = {}
+  existingFeedback = {},
+  playerRef = {
+    current: null
+  },
+  goToTimestamp = () => {},
+  startTimes = {}
 }) {
   const [isRecordingDialogOpen, setIsRecordingDialogOpen] = useState(false);
   const [hasBeenEdited, setHasBeenEdited] = useState(false);
@@ -381,11 +386,11 @@ export default function FeedbackCard({
       attendeesData: attendeesInThisDiscussion,
       conversation: conversation,
       s3Url: s3Url,
-      playerRef: {
-        current: null
-      },
+      playerRef: playerRef,
       aiGrade: aiGrade,
-      hasBadLanguage: discussionData?.hasBadLanguage || false
+      hasBadLanguage: discussionData?.hasBadLanguage || false,
+      goToTimestamp: goToTimestamp,
+      videoStartTime: startTimes[0]
     }), /*#__PURE__*/_jsx(PDFViewer, {
       open: openPDF,
       handleClose: handleClosePDF,

package/dist/Dialogs/GroupedFeedbackDialog/GroupedFeedbackDialog.js

@@ -26,7 +26,9 @@ export default function GroupFeedbackDialog({
   handleCreateFeedback = () => {},
   onFeedbackSubmitted = () => {},
   editBackgroundImages,
-  editMeetingImages
+  editMeetingImages,
+  goToTimestamp = () => {},
+  startTimes = {}
 }) {
   const discussionsInGroup = scheduleListData.filter(item => item.groupedId === groupedId);
   const submissionsForGroup = submissionsTableData.filter(item => item.groupedId === groupedId);
@@ -290,7 +292,9 @@ export default function GroupFeedbackDialog({
             selectedRecording: selectedRecording,
             s3Url: s3Url,
             playerRef: playerRef,
-            conversation: conversation
+            conversation: conversation,
+            goToTimestamp: goToTimestamp,
+            startTimes: startTimes
           }, discussion.meetingId || discussion.meetingID || index);
         })]
       })

package/dist/Dialogs/RecordingDialog/RecordingDialog.js

@@ -10,12 +10,32 @@ import { red } from "@mui/material/colors";
 import { useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const dateDifferenceInSeconds = (date1, date2) => {
+  const d1 = new Date(date1);
+  const d2 = new Date(date2);
+  return Math.abs((d2 - d1) / 1000);
+};
+const formatTimestamp = (timestamp, videoStartTime) => {
+  if (!timestamp && timestamp !== 0) return "00:00";
+  if (!videoStartTime) return "00:00";
+  let numberString = timestamp.toString();
+  numberString = numberString.substring(0, 10);
+  const formattedTime = Number(numberString);
+  const dateObj = new Date(formattedTime * 1000);
+  const isoString = dateObj.toISOString();
+  const seconds = dateDifferenceInSeconds(videoStartTime, isoString);
+  if (isNaN(seconds) || seconds < 0) return "00:00";
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+};
 function TranscriptViewer({
   conversation = {},
   goToTimestamp = () => {},
   attendeesData,
   t = text => text,
-  loading = false
+  loading = false,
+  videoStartTime = null
 }) {
   return /*#__PURE__*/_jsx(Box, {
     sx: {
@@ -69,40 +89,66 @@ function TranscriptViewer({
         sx: theme => ({
           display: "flex",
           flexDirection: "column",
-          mb: 1,
+          mb: 1.5,
           cursor: "pointer",
-          p: 1,
-          borderRadius: 1,
+          p: 1.5,
+          borderRadius: 2,
+          transition: "all 0.2s ease-in-out",
+          border: "1px solid transparent",
           "&:hover": {
-            backgroundColor: theme.palette.mode === "dark" ? theme.palette.primary.main : "#f9f9f9"
+            backgroundColor: theme.palette.mode === "dark" ? theme.palette.primary.dark : theme.palette.primary.light + "15",
+            border: `1px solid ${theme.palette.primary.main}`,
+            transform: "translateX(4px)"
           }
         }),
         children: [/*#__PURE__*/_jsxs(Box, {
           sx: {
             display: "flex",
             alignItems: "center",
-            mb: 0.5
+            mb: 0.5,
+            gap: 1
           },
           children: [/*#__PURE__*/_jsx(Avatar, {
             alt: sentence?.username,
             src: userImage,
             sx: {
-              width: 24,
-              height: 24,
-              mr: 1
+              width: 28,
+              height: 28
             }
           }), sentence?.user && /*#__PURE__*/_jsx(Typography, {
             variant: "subtitle2",
             fontWeight: "bold",
             sx: {
-              whiteSpace: "nowrap"
+              whiteSpace: "nowrap",
+              flex: 1
             },
             children: sentence.user
+          }), (sentence.start_time !== undefined || sentence.end_time !== undefined) && videoStartTime && /*#__PURE__*/_jsx(Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5,
+              px: 1,
+              py: 0.25,
+              backgroundColor: theme => theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.06)",
+              borderRadius: 1
+            },
+            children: /*#__PURE__*/_jsx(Typography, {
+              variant: "caption",
+              sx: {
+                fontFamily: "monospace",
+                fontWeight: 500,
+                color: "text.secondary"
+              },
+              children: formatTimestamp(sentence.start_time, videoStartTime)
+            })
           })]
         }), /*#__PURE__*/_jsx(Typography, {
           variant: "body2",
           sx: {
-            ml: 4
+            ml: 4.5,
+            lineHeight: 1.6,
+            color: "text.primary"
           },
           children: sentence.text
         })]
@@ -117,7 +163,8 @@ TranscriptViewer.propTypes = {
   conversation: PropTypes.object,
   goToTimestamp: PropTypes.func,
   t: PropTypes.func,
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
+  videoStartTime: PropTypes.string
 };
 export default function RecordingDialog({
   open,
@@ -129,7 +176,8 @@ export default function RecordingDialog({
   playerRef,
   conversation,
   attendeesData,
-  hasBadLanguage
+  hasBadLanguage,
+  videoStartTime
 }) {
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
@@ -227,7 +275,8 @@ export default function RecordingDialog({
             attendeesData: attendeesData,
             conversation: conversation,
             goToTimestamp: goToTimestamp,
-            loading: loading
+            loading: loading,
+            videoStartTime: videoStartTime
           })
         })]
       })
@@ -254,5 +303,6 @@ RecordingDialog.propTypes = {
   s3Url: PropTypes.string,
   playerRef: PropTypes.object,
   conversation: PropTypes.array,
-  handleCreateFeedback: PropTypes.func
+  handleCreateFeedback: PropTypes.func,
+  videoStartTime: PropTypes.string
 };

package/dist/Forms/Settings/Settings.js

@@ -1,9 +1,9 @@
 import Box from "@mui/material/Box";
 import ResponsiveTabs from "../../Navigation/ResponsiveTabs/ResponsiveTabs";
-import General from "./Tabs/General";
-import Display from "./Tabs/Display";
-import Subscription from "./Tabs/Subscription";
-import EmailNotifications from "./Tabs/EmailNotifications";
+import General from "./Tabs/General/General";
+import Display from "./Tabs/Display/Display";
+import Subscription from "./Tabs/Subscription/Subscription";
+import EmailNotifications from "./Tabs/EmailNotifications/EmailNotifications";
 import { checkIsGeneratedEmail } from "../../utils";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function Settings({

package/dist/Live/Game/Game.js

@@ -12,12 +12,12 @@ import Joyride, { STATUS } from "react-joyride";
 import ExerciseProgressBar from "../../Misc/ExerciseProgressBar/ExerciseProgressBar";
 import VoiceSpeedSelector from "../../Misc/VoiceSpeed/VoiceSpeed";
 import Leaderboard from "../../Lists/Leaderboard/Leaderboard";
-import WaitingRoom from "../WaitingRoom";
-import LiveListener from "../LiveListener";
+import WaitingRoom from "../WaitingRoom/WaitingRoom";
+import LiveListener from "../LiveListener/LiveListener";
 import LiveTranslator from "../LiveTranslator/LiveTranslator";
-import LiveStory from "../LiveRoleplay/LiveStory";
-import HowToJoin from "../HowToJoin";
-import GameMembers from "../GameMembers";
+import LiveStory from "../LiveRoleplay/LiveStory/LiveStory";
+import HowToJoin from "../HowToJoin/HowToJoin";
+import GameMembers from "../GameMembers/GameMembers";
 import GameSettings from "../GameSettings/GameSettings";
 import FinalScoreDrawer from "../Misc/FinalScoreDrawer/FinalScoreDrawer";
 import RewardEarned from "../../Dialogs/RewardEarned/RewardEarned";

package/dist/Live/LiveRoleplay/LiveStory/LiveStory.js

@@ -5,7 +5,7 @@ import Chat from "../../../Chat/Chat";
 import BeforeElements from "../../../Exercises/Roleplay/Games/BeforeElements";
 import AnswerResult from "../../../Misc/AnswerResult/AnswerResult";
 import GameControls from "../../GameControls/GameControls";
-import GameQuestionResults from "../../GameQuestionResults";
+import GameQuestionResults from "../../GameQuestionResults/GameQuestionResults";
 import StudentAnswerDrawer from "../../Misc/StudentAnswerDrawer/StudentAnswerDrawer";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({

package/dist/Misc/ExerciseBottomBar/ExerciseBottomBar.js

@@ -9,7 +9,8 @@ const useStyles = makeStyles()(theme => ({
     borderTop: `2px solid ${theme.palette.grey[300]}`,
     width: "100%",
     position: "sticky",
-    bottom: 0
+    bottom: 0,
+    backgroundColor: theme.palette.mode === 'dark' ? "#525252" : "white"
   }
 }));
 function ExerciseBottomBar({

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

@@ -538,7 +538,8 @@ function Classroom({
     hasBadLanguage,
     handleArchiveSubmissions,
     isVideoChatEnabled,
-    isVideoChatEnabledInSettings
+    isVideoChatEnabledInSettings,
+    startTimes
   } = vchatProps;
   const isSmallScreen = useMediaQuery("(max-width:410px)");
   const {
@@ -1041,7 +1042,8 @@ function Classroom({
               setSelectedRecording: setSelectedRecording,
               meetingRecsData: meetingRecsData,
               hasBadLanguage: hasBadLanguage,
-              handleArchiveSubmissions: handleArchiveSubmissions
+              handleArchiveSubmissions: handleArchiveSubmissions,
+              startTimes: startTimes
             })
           })
         }), !isCreator && discussions?.length > 0 && /*#__PURE__*/_jsx(Box, {
@@ -1248,7 +1250,7 @@ function Classroom({
       }
     }
     return 0;
-  }, [isCreator.tabs?.length]); // only recompute if isCreator or tabs change
+  }, [isCreator, tabs?.length]); // only recompute if isCreator or tabs change
 
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {

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

@@ -176,7 +176,7 @@ function OverflowMenu({
         }), /*#__PURE__*/_jsx(Typography, {
           children: t("leave_course")
         })]
-      }), isCreator && verificationStatus === "approved" && /*#__PURE__*/_jsxs(MenuItem, {
+      }), isCreator && /*#__PURE__*/_jsxs(MenuItem, {
         onClick: subscription.isPaidUser ? () => {
           handleOpenInviteDialog();
           handleClose();

package/dist/Tables/MeetingPrompstList/MeetingPromptsList.js

@@ -36,7 +36,8 @@ const MeetingPromptsList = withStyles(({
   setSelectedRecording,
   selectedRecording,
   getMeeting,
-  getRecordings
+  getRecordings,
+  startTimes = {}
 }) => {
   const [selectedGroup, setSelectedGroup] = useState({});
   const [isDialogOpen, setDialogOpen] = useState(false);
@@ -392,7 +393,9 @@ const MeetingPromptsList = withStyles(({
       handleCreateFeedback: handleCreateFeedback,
       onFeedbackSubmitted: getRecordings,
       editBackgroundImages: editBackgroundImages[0],
-      editMeetingImages: editMeetingImages[0]
+      editMeetingImages: editMeetingImages[0],
+      goToTimestamp: goToTimestamp,
+      startTimes: startTimes
     }), /*#__PURE__*/_jsx(Dialog, {
       role: "dialog",
       open: isRecordingDialogOpen,

package/dist/hooks/useExerciseState.js

@@ -64,9 +64,7 @@ export default function useExerciseState({
   classroomId,
   i18nLanguage,
   isDynamicResponsesEnabled,
-  aiChatbotConversationHistory,
-  isUserInternal,
-  handleStudentMisuse
+  aiChatbotConversationHistory
 }) {
   const navigate = useNavigate();
   const [questions, setQuestions] = useState([]);
@@ -1669,28 +1667,6 @@ export default function useExerciseState({
       exerciseCompletion.description = description;
       const formattedBotMessages = await formatBotMessages(botMessages);
       exerciseCompletion.messages = formattedBotMessages;
-      const containsStudentInappropriate = formattedBotMessages.some(msg => msg?.studentInappropriate === true);
-      const exerciseLink = `${window.location.origin}/courses/${courseId}/${sectionId}/${topicId}/activity/bot?botId=${botId}`;
-      if (containsStudentInappropriate) {
-        const responseFromMisuse = await handleStudentMisuse({
-          params: {
-            exerciseLink,
-            exerciseName,
-            problemDescription: "Student has been acting inapprpriately within your exercise"
-          },
-          botId: bot.botId,
-          startTime,
-          courseId,
-          sectionId,
-          topicId,
-          exerciseLink
-        });
-        if (responseFromMisuse && responseFromMisuse.error) {
-          openSnackbar(responseFromMisuse.error, "error");
-        } else {
-          openSnackbar(t("student_misuse_reported"), "info");
-        }
-      }
     } else if (exerciseName === "roleplay") {
       const {
         picture,
@@ -1698,9 +1674,6 @@ export default function useExerciseState({
         description,
         roleplayId
       } = roleplay;
-      // temp disabled unanswered questions because was seeing answered questions appeaing in this array
-      // script.slice(roleplayMessages.length);
-      // const unansweredQuestions = script.filter(scriptLine => scriptLine.question && scriptLine.answers);
       exerciseCompletion.gameId = gameId;
       exerciseCompletion.selectedActor = isActorOne ? 1 : 2;
       exerciseCompletion.actor1 = roleplay.actor1;

package/dist/hooks/useRecognition.js

@@ -159,7 +159,8 @@ export default function useRecognition(props = {}) {
             speechContexts: gcloudParams.speechContexts,
             maxAlternatives: gcloudParams.maxAlternatives || 10,
             enableWordConfidence: gcloudParams.enableWordConfidence || false,
-            model: gcloudParams.model
+            model: gcloudParams.model,
+            enableAutomaticPunctuation: true
           },
           single_utterance: gcloudParams.single_utterance,
           interimResults: gcloudParams.interimResults // If you want interim results, set this to true

package/package.json

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