@nualang/nualang-ui-components 0.1.1332 → 0.1.1333

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { Typography, Box, IconButton, Tooltip, Button, Skeleton, Select, MenuItem, FormControl, InputLabel } from "@mui/material";
+import { Typography, Box, IconButton, Tooltip, Skeleton, Select, MenuItem, FormControl, InputLabel } from "@mui/material";
 import AssignmentCard from "../AssignmentCard/AssignmentCard";
 import Refresh from "@mui/icons-material/Refresh";
 import TeacherCreate from "../../img/teacher-create-2.svg";
-import Add from "@mui/icons-material/Add";
+import InfiniteScroll from "../../Misc/InfiniteScroll/InfiniteScroll";
 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
 
@@ -12,7 +12,6 @@ const AssignmentCardsList = ({
   t = text => text,
   assignments = [],
   isCreator,
-  handleCreateAssignment,
   getCourses,
   getCourseSections,
   getRoleplays,
@@ -28,12 +27,13 @@ const AssignmentCardsList = ({
   lastAssignmentFetch,
   assignmentMembersById = {},
   isLoadingAssignments,
-  members,
-  courses,
-  isChallengeModeStudent
+  isChallengeModeStudent,
+  scrollableTarget = null
 }) => {
   const [lastClickedExerciseId, setLastClickedExerciseId] = useState(null);
   const [filter, setFilter] = useState("all");
+  const BATCH_SIZE = 6;
+  const [cardsToShow, setCardsToShow] = useState(BATCH_SIZE);
   useEffect(() => {
     const stored = localStorage.getItem("lastClickedExercise");
     if (stored) {
@@ -49,6 +49,10 @@ const AssignmentCardsList = ({
   }, []);
   const now = new Date();
   const safeAssignments = Array.isArray(assignments) ? assignments : [];
+  useEffect(() => {
+    setCardsToShow(BATCH_SIZE);
+    if (window.scrollY > 100) window.scrollTo(0, 0);
+  }, [filter, safeAssignments.length]);
   const filteredAssignments = safeAssignments.filter(assignment => {
     if (!isCreator) {
       if (Array.isArray(assignment.assignedStudents) && !assignment.assignedStudents.includes(memberId)) {
@@ -73,14 +77,8 @@ const AssignmentCardsList = ({
     if (filter === "pastDue") {
       return assignment.dueDate && new Date(assignment.dueDate) < now;
     }
-    if (filter === "dueNext") {
-      return assignment.dueDate && new Date(assignment.dueDate) >= now;
-    }
     return true;
   }).sort((a, b) => {
-    if (filter === "dueNext") {
-      return new Date(a.dueDate || 0) - new Date(b.dueDate || 0);
-    }
     if (filter === "scheduled") {
       return new Date(a.scheduleDate || 0) - new Date(b.scheduleDate || 0);
     }
@@ -159,99 +157,120 @@ const AssignmentCardsList = ({
     });
   }
   if (!safeAssignments.length || filteredAssignments.length === 0) {
-    return /*#__PURE__*/_jsx(Box, {
+    const getEmptyStateMessage = () => {
+      if (!safeAssignments.length) {
+        return {
+          title: t("no_assignments"),
+          description: isCreator ? t("assignments_description") : t("no_assignments_description")
+        };
+      }
+      switch (filter) {
+        case "scheduled":
+          return {
+            title: t("no_scheduled_assignments"),
+            description: null
+          };
+        case "pastDue":
+          return {
+            title: t("no_past_due_assignments"),
+            description: null
+          };
+        default:
+          return {
+            title: t("no_assignments"),
+            description: isCreator ? t("assignments_description") : t("no_assignments_description")
+          };
+      }
+    };
+    const emptyState = getEmptyStateMessage();
+    return /*#__PURE__*/_jsxs(Box, {
       mb: 1,
-      children: /*#__PURE__*/_jsxs(Box, {
+      children: [isCreator && /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        justifyContent: "space-between",
         alignItems: "center",
         sx: {
-          my: 2
+          mb: 3,
+          mt: "8px"
         },
-        display: "flex",
-        flexDirection: "column",
-        children: [/*#__PURE__*/_jsxs(Box, {
-          display: "flex",
-          alignItems: "center",
+        children: [/*#__PURE__*/_jsxs(FormControl, {
+          size: "large",
           sx: {
-            width: "100%"
+            minWidth: 140,
+            marginTop: 1
           },
-          children: [/*#__PURE__*/_jsx(Box, {
-            sx: {
-              flexGrow: 1,
-              textAlign: "center",
-              marginLeft: 5
-            },
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "h5",
-              fontWeight: "bold",
-              children: t("no_assignments")
-            })
-          }), /*#__PURE__*/_jsx(Tooltip, {
-            placement: "left",
-            title: t("refresh_assignments"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: refreshAssignments,
-              "aria-label": "refresh",
-              size: "large",
-              children: /*#__PURE__*/_jsx(Refresh, {})
-            })
+          children: [/*#__PURE__*/_jsx(InputLabel, {
+            children: t("view")
+          }), /*#__PURE__*/_jsxs(Select, {
+            value: filter,
+            onChange: e => setFilter(e.target.value),
+            label: t("view"),
+            autoWidth: true,
+            children: [/*#__PURE__*/_jsx(MenuItem, {
+              value: "all",
+              children: t("all")
+            }), /*#__PURE__*/_jsx(MenuItem, {
+              value: "pastDue",
+              children: t("past_due")
+            }), /*#__PURE__*/_jsx(MenuItem, {
+              value: "scheduled",
+              children: t("scheduled")
+            })]
           })]
-        }), !isCreator ? /*#__PURE__*/_jsx(Typography, {
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          placement: "left",
+          title: t("refresh_assignments"),
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: refreshAssignments,
+            "aria-label": "refresh",
+            size: "large",
+            children: /*#__PURE__*/_jsx(Refresh, {
+              fontSize: "inherit"
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(Box, {
+        alignItems: "center",
+        sx: {
+          my: 2
+        },
+        display: "flex",
+        flexDirection: "column",
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "h5",
+          fontWeight: "bold",
           sx: {
-            textAlign: "center",
-            mt: 2,
-            width: "70%"
+            textAlign: "center"
           },
-          children: t("no_assignments_description")
-        }) : /*#__PURE__*/_jsx(Typography, {
+          children: emptyState.title
+        }), /*#__PURE__*/_jsx(Typography, {
           sx: {
             textAlign: "center",
             mt: 2,
             width: "70%"
           },
-          children: t("assignments_description")
-        }), isCreator && (!members || members.length === 0 || !courses || courses.length === 0 ? /*#__PURE__*/_jsx(Tooltip, {
-          title: t("no_members_tooltip"),
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(Button, {
-              variant: "contained",
-              color: "primary",
-              sx: {
-                mt: 2,
-                textAlign: "center"
-              },
-              startIcon: /*#__PURE__*/_jsx(Add, {}),
-              onClick: handleCreateAssignment,
-              disabled: true,
-              children: t("create_assignment")
-            })
-          })
-        }) : /*#__PURE__*/_jsx(Button, {
-          variant: "contained",
-          color: "primary",
-          sx: {
-            mt: 2,
-            textAlign: "center"
-          },
-          startIcon: /*#__PURE__*/_jsx(Add, {}),
-          onClick: handleCreateAssignment,
-          children: t("create_assignment")
-        })), /*#__PURE__*/_jsx(Box, {
+          children: emptyState.description
+        }), /*#__PURE__*/_jsx(Box, {
           sx: {
             height: "100%",
             display: "flex",
             flexGrow: 1,
             alignItems: "center",
             justifyContent: "center",
-            maxWidth: "400px",
+            maxWidth: 300,
             marginRight: "40px",
             paddingTop: "20px"
           },
           children: /*#__PURE__*/_jsx("img", {
             src: TeacherCreate,
-            alt: "teacher-create"
+            alt: "teacher-create",
+            style: {
+              width: "100%",
+              height: "auto"
+            }
           })
         })]
-      })
+      })]
     });
   }
   return /*#__PURE__*/_jsxs(Box, {
@@ -280,9 +299,6 @@ const AssignmentCardsList = ({
           children: [/*#__PURE__*/_jsx(MenuItem, {
             value: "all",
             children: t("all")
-          }), /*#__PURE__*/_jsx(MenuItem, {
-            value: "dueNext",
-            children: t("due_next")
           }), /*#__PURE__*/_jsx(MenuItem, {
             value: "pastDue",
             children: t("past_due")
@@ -303,27 +319,33 @@ const AssignmentCardsList = ({
           })
         })
       })]
-    }), filteredAssignments.map((assignment, index) => /*#__PURE__*/_jsx(AssignmentCard, {
-      index: index,
-      lastAssignmentFetch: lastAssignmentFetch,
-      assignment: assignment,
-      t: t,
-      isCreator: isCreator,
-      getCourses: getCourses,
-      getCourseSections: getCourseSections,
-      getRoleplays: getRoleplays,
-      deleteAssignment: deleteAssignment,
-      handleEditAssignment: handleEditAssignment,
-      lastClickedExerciseId: lastClickedExerciseId,
-      progressHelpers: progressHelpers,
-      fetchMemberCourseCompletions: fetchMemberCourseCompletions,
-      username: username,
-      preferred_username: preferred_username,
-      memberId: memberId,
-      handleViewProgress: handleViewProgress,
-      assignedStudents: assignmentMembersById[assignment.assignmentId] || [],
-      isChallengeModeStudent: isChallengeModeStudent
-    }, assignment.assignmentId))]
+    }), /*#__PURE__*/_jsx(InfiniteScroll, {
+      dataLength: Math.min(cardsToShow, filteredAssignments.length),
+      loadMore: () => setCardsToShow(prev => prev + BATCH_SIZE),
+      hasMore: cardsToShow < filteredAssignments.length,
+      scrollableTarget: scrollableTarget,
+      children: filteredAssignments.slice(0, cardsToShow).map((assignment, index) => /*#__PURE__*/_jsx(AssignmentCard, {
+        index: index,
+        lastAssignmentFetch: lastAssignmentFetch,
+        assignment: assignment,
+        t: t,
+        isCreator: isCreator,
+        getCourses: getCourses,
+        getCourseSections: getCourseSections,
+        getRoleplays: getRoleplays,
+        deleteAssignment: deleteAssignment,
+        handleEditAssignment: handleEditAssignment,
+        lastClickedExerciseId: lastClickedExerciseId,
+        progressHelpers: progressHelpers,
+        fetchMemberCourseCompletions: fetchMemberCourseCompletions,
+        username: username,
+        preferred_username: preferred_username,
+        memberId: memberId,
+        handleViewProgress: handleViewProgress,
+        assignedStudents: assignmentMembersById[assignment.assignmentId] || [],
+        isChallengeModeStudent: isChallengeModeStudent
+      }, assignment.assignmentId))
+    })]
   });
 };
 AssignmentCardsList.propTypes = {
@@ -348,6 +370,7 @@ AssignmentCardsList.propTypes = {
   isLoadingAssignments: PropTypes.bool,
   members: PropTypes.array,
   courses: PropTypes.array,
-  isChallengeModeStudent: PropTypes.bool
+  isChallengeModeStudent: PropTypes.bool,
+  scrollableTarget: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
 };
 export default AssignmentCardsList;

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

@@ -441,7 +441,7 @@ export default function Message({
                   fontWeight: "bold",
                   align: "left",
                   children: name
-                }), studentInappropriate && /*#__PURE__*/_jsx(Tooltip, {
+                }), studentInappropriate && isMyMessage && /*#__PURE__*/_jsx(Tooltip, {
                   title: t("inappropriate_language_detected"),
                   children: /*#__PURE__*/_jsx(WarningAmberIcon, {
                     style: {
@@ -464,7 +464,6 @@ export default function Message({
               })
             })]
           }), !isListenOnly && /*#__PURE__*/_jsx(HoverText, {
-            studentInappropriate: studentInappropriate,
             handleTranslate: handleTranslate,
             learnLang: learnLang,
             forLang: forLang,
@@ -491,7 +490,7 @@ export default function Message({
             style: {
               position: "relative"
             },
-            children: [studentInappropriate && /*#__PURE__*/_jsx(Tooltip, {
+            children: [studentInappropriate && isMyMessage && /*#__PURE__*/_jsx(Tooltip, {
               title: t("inappropriate_language_detected"),
               children: /*#__PURE__*/_jsx(WarningAmberIcon, {
                 className: classes.inappropriateIcon,
@@ -528,7 +527,6 @@ export default function Message({
                 })
               })]
             }), !isListenOnly && /*#__PURE__*/_jsx(HoverText, {
-              studentInappropriate: studentInappropriate,
               handleTranslate: handleTranslate,
               learnLang: learnLang,
               forLang: forLang,

package/dist/Live/LiveListener/LiveListener.js

@@ -391,6 +391,11 @@ function LiveListener({
             onChange: handleInputChange,
             onKeyDown: e => {
               if (e.key === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                if ((!listeningText || listeningText.trim() === "") && (!listeningWords || listeningWords.length === 0)) {
+                  return;
+                }
                 setIsAnswered(true);
                 setCurrentAnswer(listeningText ? listeningText : listeningWords);
                 e.stopPropagation();

package/dist/Live/LiveTranslator/LiveTranslator.js

@@ -587,9 +587,13 @@ function LiveTranslator({
                   onChange: handleInputChange,
                   onKeyDown: e => {
                     if (e.key === "Enter") {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      if ((!translationText || translationText.trim() === "") && (!translationWords || translationWords.length === 0)) {
+                        return;
+                      }
                       setIsAnswered(true);
                       setCurrentAnswer(translationText ? translationText : translationWords);
-                      e.stopPropagation();
                     }
                   },
                   id: "translationText",

package/dist/Misc/LanguageSelector/LanguageSelector.js

@@ -54,6 +54,12 @@ function LanguageSelector({
   }, {
     value: "uk",
     label: "українська"
+  }, {
+    value: "zh",
+    label: "中文"
+  }, {
+    value: "ja",
+    label: "日本語"
   }]
 }) {
   const {

package/dist/Navigation/ResponsiveTabs/ResponsiveTabs.js

@@ -97,6 +97,26 @@ function ResponsiveTabs({
     sx: {
       "@media print": {
         display: "none"
+      },
+      "& .MuiTab-root": {
+        transition: theme.transitions.create(["background-color", "color"], {
+          duration: theme.transitions.duration.shorter
+        }),
+        "&:hover": {
+          backgroundColor: theme.palette.action.hover
+        },
+        "&.Mui-selected": {
+          color: theme.palette.primary.main,
+          "&:hover": {
+            backgroundColor: theme.palette.primary.light + "20"
+          }
+        },
+        "&.Mui-focusVisible": {
+          backgroundColor: theme.palette.action.focus
+        }
+      },
+      "& .MuiTabs-indicator": {
+        height: 3
       }
     },
     children: tabs.map(({

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

@@ -471,10 +471,17 @@ export default function Attempt({
     stop();
     setIsTranscriptPlaying(false);
   };
-  const hasInappropriate = useMemo(() => (messages || []).some(m => m.studentInappropriate), [messages]);
+  const hasInappropriate = useMemo(() => {
+    if (!messages || messages.length === 0) {
+      return false;
+    }
+    return (messages || []).some(m => {
+      return m?.studentInappropriate;
+    });
+  }, [messages]);
   return /*#__PURE__*/_jsxs("div", {
     className: classes.root,
-    children: [hasInappropriate && isCreator && /*#__PURE__*/_jsxs("div", {
+    children: [hasInappropriate && /*#__PURE__*/_jsxs("div", {
       style: {
         backgroundColor: "#ffcccc",
         padding: "10px",

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

@@ -318,6 +318,7 @@ function OverflowMenu({
   });
 }
 function ClassroomLoading({
+  isLoading,
   t = text => text
 }) {
   const {
@@ -409,9 +410,20 @@ function ClassroomLoading({
           t: t,
           courses: null
         })
-      }), /*#__PURE__*/_jsxs(Box, {
+      }), /*#__PURE__*/_jsx(Box, {
+        py: 1,
+        children: /*#__PURE__*/_jsx(AssignmentCardsList, {
+          isLoadingAssignments: true,
+          t: t,
+          assignments: null
+        })
+      }), /*#__PURE__*/_jsx(Box, {
         py: 1,
-        children: [t("loading"), "..."]
+        children: /*#__PURE__*/_jsx(ProgressTable, {
+          isLoading: isLoading,
+          t: t,
+          progress: null
+        })
       }), /*#__PURE__*/_jsx(Box, {
         py: 1,
         children: /*#__PURE__*/_jsx(MemberList, {
@@ -1024,7 +1036,7 @@ function Classroom({
             })
           })
         }), /*#__PURE__*/_jsx(_Fragment, {
-          children: isCreator && createdDiscussions?.length > 0 && /*#__PURE__*/_jsx("div", {
+          children: isCreator && /*#__PURE__*/_jsx("div", {
             id: "discussGroupedDiscussions",
             children: /*#__PURE__*/_jsx(GroupedDiscussions, {
               t: t,
@@ -1057,7 +1069,7 @@ function Classroom({
               learnLang: classroom?.learnLang
             })
           })
-        }), !isCreator && discussions?.length > 0 && /*#__PURE__*/_jsx(Box, {
+        }), !isCreator && /*#__PURE__*/_jsx(Box, {
           marginTop: "78px",
           children: /*#__PURE__*/_jsx("div", {
             id: "discussScheduled",
@@ -1071,7 +1083,7 @@ function Classroom({
               scheduleListData: discussions
             })
           })
-        }), !isCreator && recordingDiscussions?.length > 0 && /*#__PURE__*/_jsx("div", {
+        }), !isCreator && /*#__PURE__*/_jsx("div", {
           id: "discussRecorded",
           children: /*#__PURE__*/_jsx(RecordingListCards, {
             t: t,
@@ -1089,9 +1101,6 @@ function Classroom({
             s3EventsUrl: s3EventsUrl,
             userData: classroomMembers || []
           })
-        }), isNoVideoChatContent && /*#__PURE__*/_jsx(DiscussionNotFound, {
-          t: t,
-          placeholderImageUrl: placeholderImageUrl
         })]
       }, `tab-content-video-chat-member`) : isCreator && isVideoChatEnabled && /*#__PURE__*/_jsx("div", {
         className: classes.placeholder,
@@ -1657,9 +1666,10 @@ export default function ViewClassroom({
     className: classes.root,
     children: [isLoading && Object.keys(classroom).length === 0 && /*#__PURE__*/_jsx(_Fragment, {
       children: /*#__PURE__*/_jsx(ClassroomLoading, {
+        isLoading: isLoading,
         t: t
       })
-    }), !isLoading && classroom && Object.keys(classroom).length > 0 && /*#__PURE__*/_jsx(_Fragment, {
+    }), classroom && Object.keys(classroom).length > 0 && /*#__PURE__*/_jsx(_Fragment, {
       children: /*#__PURE__*/_jsx(Classroom, {
         t: t,
         isLoading: isLoading,

package/dist/Screens/Onboard/Onboard.js

@@ -42,7 +42,7 @@ function Onboard({
     img: "",
     role: "teach"
   }],
-  languages = ["spanish", "french", "english", "italian", "german", "portuguese"],
+  languages = ["spanish", "french", "english", "italian", "german", "portuguese", "chinese", "japanese"],
   preferred_username,
   learnlang
 }) {