@nualang/nualang-ui-components 0.1.1295 → 0.1.1297

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -116,7 +116,7 @@ const AssignmentCardsList = ({
       }, idx))]
     });
   }
-  if (assignments.length === 0) {
+  if (!assignments || assignments.length === 0) {
     return /*#__PURE__*/_jsx(Box, {
       mb: 1,
       children: /*#__PURE__*/_jsxs(Box, {

package/dist/Assignments/AssignmentCourseSelection/AssignmentCourseSelection.js

@@ -21,7 +21,7 @@ function Course({
   handleSelectExercise,
   selectedExercises,
   useCase,
-  assignment,
+  assignment = {},
   handleStartExercise,
   isCreator,
   viewOnly,
@@ -34,7 +34,12 @@ function Course({
   isChallengeModeStudent
 }) {
   const numOfIds = lastClickedExerciseId ? lastClickedExerciseId.split("|") : [];
-  const [open, setOpen] = useState(lastClickedExerciseId && (numOfIds.length === 4 && lastClickedExerciseId.endsWith(`|${assignment.assignmentId}`) || numOfIds.length === 5 && lastClickedExerciseId.split("|")[3] === assignment.assignmentId));
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (lastClickedExerciseId && (numOfIds.length === 4 && lastClickedExerciseId.endsWith(`|${assignment?.assignmentId}`) || numOfIds.length === 5 && lastClickedExerciseId.split("|")[3] === assignment?.assignmentId)) {
+      setOpen(true);
+    }
+  }, [lastClickedExerciseId, assignment.assignmentId]);
   const [selectedSectionIds, setSelectedSectionIds] = useState([]);
   const [filteredSections, setFilteredSections] = useState([]);
   const [courseSectionCompletion, setCourseSectionCompletion] = useState(null);

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -21,7 +21,6 @@ import { ProgressBadge, InProgressBadge } from "../../Lists/Exercises/Exercises"
 import ColorLinearProgress from "../../Misc/ColorLinearProgress/ColorLinearProgress";
 import { calcCompletions } from "../../utils";
 import AssignmentBotSelection from "../AssignmentBotSelection/AssignmentBotSelection";
-import { Clear } from "@mui/icons-material";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function Exercise({
   name,
@@ -130,18 +129,13 @@ function Exercise({
     setBotsOpen(!botsOpen);
   };
   useEffect(() => {
-    section.topics.forEach(topic => {
-      if (topic.hiddenExercises && topic.hiddenExercises.includes("listening")) {
-        setListeningHidden(true);
-      }
-      if (topic.hiddenExercises && topic.hiddenExercises.includes("translation")) {
-        setTranslationHidden(true);
-      }
-      if (topic.hiddenExercises && topic.hiddenExercises.includes("pronunciation")) {
-        setPronunciationHidden(true);
-      }
-    });
-  }, [section]);
+    const currentTopicId = courseSectionTopicId.split("|")[2];
+    const currentTopic = section?.topics?.find(t => t.topicId === currentTopicId) || {};
+    const hidden = (currentTopic.hiddenExercises || []).map(x => String(x).toLowerCase());
+    setListeningHidden(hidden.includes("listening"));
+    setTranslationHidden(hidden.includes("translation"));
+    setPronunciationHidden(hidden.includes("pronunciation"));
+  }, [section, courseSectionTopicId]);
   const isValidExercise = phrases.length >= 2 || name.toLowerCase() === "roleplays" || name.toLowerCase() === "bots";
   if (name.toLowerCase() === "listening" && listeningHidden || name.toLowerCase() === "translation" && translationHidden || name.toLowerCase() === "pronunciation" && pronunciationHidden) {
     return null;
@@ -418,72 +412,66 @@ function Topic({
   const theme = useTheme();
   const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
   const topicRef = useRef(null);
-  const [lasClickedTopicId, lastClickedAssignmentId] = lastClickedExerciseId?.split("|") || [];
-  const [isExerciseListOpen, setExerciseListOpen] = useState(lasClickedTopicId === topicId && lastClickedAssignmentId === assignment.assignmentId);
+  const numOfIds = lastClickedExerciseId ? lastClickedExerciseId.split("|") : [];
+
+  // Define a single variable for clarity
+  const matchesLastClickedExercise = lastClickedExerciseId && (numOfIds.length === 4 && lastClickedExerciseId.endsWith(`|${assignment.assignmentId}`) && numOfIds[2] === topicId || numOfIds.length === 5 && numOfIds[3] === assignment.assignmentId && numOfIds[2] === topicId);
+  const [isExerciseListOpen, setExerciseListOpen] = useState(false);
+  useEffect(() => {
+    if (matchesLastClickedExercise) {
+      setExerciseListOpen(true);
+    }
+  }, [matchesLastClickedExercise]);
   const [isWholeTopicSelected, setIsWholeTopicSelected] = useState(false);
   useEffect(() => {
-    if (lasClickedTopicId === topicId && topicRef.current && lastClickedAssignmentId === assignment.assignmentId) {
+    if (matchesLastClickedExercise && topicRef.current) {
       topicRef.current.scrollIntoView({
         behavior: "smooth",
         block: "start"
       });
     }
-  }, []);
+  }, [matchesLastClickedExercise, topicRef]);
+  const currentTopic = (section?.topics || []).find(t => t.topicId === topicId) || {};
+  const hidden = new Set((currentTopic.hiddenExercises || []).map(x => String(x).toLowerCase()));
+  const baseRegular = [{
+    name: "translation",
+    description: "translation_exercise_desc"
+  }, {
+    name: "listening",
+    description: "listening_exercise_desc"
+  }, {
+    name: "pronunciation",
+    description: "pronunciation_exercise_desc"
+  }].filter(e => !hidden.has(e.name));
   let exercises;
   switch (useCase) {
     case "assignment-select":
-      exercises = [{
-        name: "translation",
-        description: `translation_exercise_desc`
-      }, {
-        name: "listening",
-        description: `listening_exercise_desc`
-      }, {
-        name: "pronunciation",
-        description: `pronunciation_exercise_desc`
-      }, {
+      exercises = [...baseRegular, {
         name: "roleplays",
-        description: `roleplay_exercise_desc`
+        description: "roleplay_exercise_desc"
       }, {
         name: "bots",
-        description: `chatbot_exercise_desc`
+        description: "chatbot_exercise_desc"
       }];
       break;
     case "assignment-view":
-      exercises = [{
-        name: "translation",
-        description: `translation_exercise_desc`
-      }, {
-        name: "listening",
-        description: `listening_exercise_desc`
-      }, {
-        name: "pronunciation",
-        description: `pronunciation_exercise_desc`
-      }, {
+      exercises = [...baseRegular, {
         name: "roleplays",
-        description: `roleplay_exercise_desc`
+        description: "roleplay_exercise_desc"
       }, {
         name: "bots",
-        description: `chatbot_exercise_desc`
+        description: "chatbot_exercise_desc"
       }].filter(exercise => selectedExercises?.some(e => e.name === exercise.name || exercise.name === "roleplays" && e.roleplayId || exercise.name === "bots" && e.botId));
       break;
     case "assignment-start":
-      exercises = [{
-        name: "translation",
-        description: `translation_exercise_desc`
-      }, {
-        name: "listening",
-        description: `listening_exercise_desc`
-      }, {
-        name: "pronunciation",
-        description: `pronunciation_exercise_desc`
-      }, {
+      exercises = [...baseRegular, {
         name: "roleplays",
-        description: `roleplay_exercise_desc`
+        description: "roleplay_exercise_desc"
       }, {
         name: "bots",
-        description: `chatbot_exercise_desc`
+        description: "chatbot_exercise_desc"
       }].filter(exercise => selectedExercises?.some(e => e.name === exercise.name || exercise.name === "roleplays" && e.roleplayId || exercise.name === "bots" && e.botId));
+      exercises = exercises.filter(ex => !["translation", "listening", "pronunciation"].includes(ex.name) || !hidden.has(ex.name));
       break;
     default:
       exercises = [];
@@ -504,7 +492,8 @@ function Topic({
     const expectedRoleplayCount = roleplays?.length * games?.length || 0;
     const expectedBotCount = bots?.length || 0;
     const totalExpected = (exercises?.filter(e => e.name !== "roleplays").length || 0) + expectedRoleplayCount + expectedBotCount;
-    const selectedRegular = selectedExercises?.filter(exercise => !exercise.roleplayId && !exercise.botId && exercise.courseSectionTopicId === `${courseId}|${sectionId}|${topicId}`).length || 0;
+    const regularNames = new Set(baseRegular.map(e => e.name));
+    const selectedRegular = selectedExercises?.filter(e => e.courseSectionTopicId === courseSectionTopicId && !e.roleplayId && !e.botId && regularNames.has(e.name)).length || 0;
     const selectedRoleplays = selectedExercises?.filter(exercise => exercise.roleplayId && roleplays?.some(roleplay => roleplay.roleplayId === exercise.roleplayId)).length || 0;
     const selectedBots = selectedExercises?.filter(exercise => exercise.botId && bots?.some(bot => bot.botId === exercise.botId)).length || 0;
     const totalSelected = selectedRegular + selectedRoleplays + selectedBots;
@@ -517,10 +506,10 @@ function Topic({
       handleSelectExercise(removeExercises);
     } else {
       let exercisesToAdd = [];
-      exercises?.filter(e => e.name !== "roleplays" && e.name !== "bots").forEach(exercise => {
+      baseRegular.forEach(exercise => {
         if (!selectedExercises?.some(e => e.courseSectionTopicId === courseSectionTopicId && e.name === exercise.name)) {
           exercisesToAdd.push({
-            courseSectionTopicId: courseSectionTopicId,
+            courseSectionTopicId,
             name: exercise.name
           });
         }
@@ -557,7 +546,7 @@ function Topic({
   const selectedRoleplays = selectedExercises?.filter(e => e.courseSectionTopicId === courseSectionTopicId && e.roleplayId).length || 0;
   const selectedBots = selectedExercises?.filter(e => e.courseSectionTopicId === courseSectionTopicId && e.botId).length || 0;
   const selectedCount = selectedRegular + selectedRoleplays + selectedBots;
-  const totalRegular = 3;
+  const totalRegular = baseRegular.length;
   const totalRoleplays = (roleplays?.length || 0) * (games?.length || 0);
   const totalBots = bots?.length || 0;
   const totalCount = totalRegular + totalRoleplays + totalBots;

package/dist/Dialogs/AvatarDialog/AvatarDialog.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import Avatar, { Piece } from "@nualang/avatars";
+import AvatarMod, { Piece } from "@nualang/avatars";
 import AvatarSwitcher from "../../Misc/AvatarSwitcher/AvatarSwitcher";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
@@ -24,6 +24,7 @@ import options from "./options";
 import PropTypes from "prop-types";
 import { useDropzone } from "react-dropzone";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const Avatar = AvatarMod.default || AvatarMod;
 const getColor = (props, theme) => {
   if (props.isDragAccept) {
     return theme.palette.success.main;

package/dist/Forms/CreateBot/Steps/BotSettings/BotSettings.js

@@ -120,16 +120,24 @@ function BotSettings({
             className: classes.group,
             name: "isChallengeBot",
             value: isChallengeBot,
-            onChange: handleChange,
+            onChange: e => {
+              const value = e.target.value === "true";
+              handleChange({
+                target: {
+                  name: "isChallengeBot",
+                  value
+                }
+              });
+            },
             onBlur: handleBlur,
             helperText: touched.isChallengeBot ? errors.isChallengeBot : "",
             error: touched.isChallengeBot && Boolean(errors.isChallengeBot),
             children: [/*#__PURE__*/_jsx(FormControlLabel, {
-              value: true,
+              value: "true",
               control: /*#__PURE__*/_jsx(Radio, {}),
               label: t("enabled")
             }), /*#__PURE__*/_jsx(FormControlLabel, {
-              value: false,
+              value: "false",
               control: /*#__PURE__*/_jsx(Radio, {}),
               label: t("disabled")
             })]

package/dist/Lists/CourseOutline/CourseOutline.js

@@ -1,9 +1,8 @@
 import { useEffect, useState, useCallback, useRef } from "react";
 import { Link as RouterLink, useNavigate, useParams } from "react-router-dom";
-import { ListSubheader, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, ListItemSecondaryAction, IconButton, Button, Collapse, Typography, Box, Tooltip, LinearProgress, Menu, MenuItem, Avatar } from "@mui/material";
-import { useTheme, alpha } from "@mui/material/styles";
+import { ListSubheader, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, ListItemSecondaryAction, IconButton, Button, Collapse, Typography, Box, Tooltip, Menu, MenuItem, Avatar } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";
-import { withStyles } from "tss-react/mui";
 import CheckBox from "@mui/icons-material/CheckBox";
 import CheckBoxOutlineBlank from "@mui/icons-material/CheckBoxOutlineBlank";
 import AddCircle from "@mui/icons-material/AddCircle";
@@ -26,7 +25,7 @@ import ImageSearchIcon from "@mui/icons-material/ImageSearch";
 import Skeleton from "@mui/material/Skeleton";
 import OndemandVideoIcon from "@mui/icons-material/OndemandVideo";
 import ColorLinearProgress from "../../Misc/ColorLinearProgress/ColorLinearProgress";
-import { randomId, calcCompletions, calcPercentageCompletion } from "../../utils/index";
+import { calcCompletions, calcPercentageCompletion } from "../../utils/index";
 import SelectClassroom from "../../Dialogs/SelectClassroom/SelectClassroom";
 import { CardInfoSectionItem } from "../../Cards/CardElements";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -142,7 +141,7 @@ function ExerciseList({
       })
     }),
     children: exercises.map((exercise, i) => {
-      const keyId = `exerc_${randomId()}${i}`;
+      const keyId = `exerc_${exercise.name}${i}`;
       return /*#__PURE__*/_jsx(Exercise, {
         t: t,
         ...exercise,
@@ -1152,7 +1151,14 @@ function CourseOutline({
   classroomId,
   ...otherProps
 }) {
-  const [sects, setSects] = useState(calcCompletions(sections, completions));
+  const [sects, setSects] = useState([]);
+  useEffect(() => {
+    if (isMember) {
+      setSects(calcCompletions(sections, completions));
+    } else {
+      setSects(sections);
+    }
+  }, [isMember, sections?.length, completions?.length]);
   const moveSection = useCallback((dragIndex, hoverIndex) => {
     const dragSection = sects[dragIndex];
     const newSections = update(sects, {

package/dist/Lists/Exercises/Exercises.js

@@ -1064,19 +1064,10 @@ function Exercises(props) {
       }
     });
   }
-  const [roleplaysArray, setRoleplaysArray] = useState([]);
-  const roleplaysStringified = JSON.stringify(roleplays);
+  const [roleplaysArray, setRoleplaysArray] = useState(roleplays);
   const onDropRoleplay = () => {
     updateRoleplays(roleplaysArray);
   };
-  useEffect(() => {
-    if (roleplays && Array.isArray(roleplays) && roleplays.length && roleplays.length > 0) {
-      const sortedRoleplays = [...roleplays].sort((a, b) => a.idx - b.idx);
-      setRoleplaysArray(sortedRoleplays);
-    } else if (roleplays && Array.isArray(roleplays)) {
-      setRoleplaysArray(roleplays);
-    }
-  }, [roleplays, roleplaysStringified]);
   const moveRoleplay = useCallback((dragIndex, hoverIndex) => {
     const dragRoleplay = roleplaysArray[dragIndex];
     const newRoleplays = update(roleplaysArray, {
@@ -1087,24 +1078,15 @@ function Exercises(props) {
     });
     setRoleplaysArray(newRoleplays);
   }, [roleplaysArray]);
-  const [botsArray, setBotsArray] = useState([]);
-  const botsStringified = JSON.stringify(bots);
+  const [botsArray, setBotsArray] = useState(() => {
+    if (!isChallengeModeStudent && !isCreator && !parentClassroom?.isCreator) {
+      return bots.filter(bot => !bot.isChallengeBot || bot.isChallengeBot === false);
+    }
+    return bots;
+  });
   const onDropBot = () => {
     updateBots(botsArray);
   };
-  useEffect(() => {
-    if (bots && Array.isArray(bots) && bots.length && bots.length > 0) {
-      const sortedBots = [...bots].sort((a, b) => a.idx - b.idx);
-      setBotsArray(sortedBots);
-    } else if (bots && Array.isArray(bots)) {
-      setBotsArray(bots);
-    }
-  }, [bots, botsStringified]);
-  useEffect(() => {
-    if (!isChallengeModeStudent && !isCreator && !parentClassroom?.isCreator) {
-      setBotsArray(bots.filter(bot => !bot.isChallengeBot || bot.isChallengeBot === false));
-    }
-  }, [bots, isChallengeModeStudent, isCreator]);
   const moveBot = useCallback((dragIndex, hoverIndex) => {
     const dragBot = botsArray[dragIndex];
     const newBots = update(botsArray, {

package/dist/Misc/AvatarSwitcher/AvatarSwitcher.js

@@ -1,9 +1,10 @@
 import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import Avatar from "@nualang/avatars";
 import sample from "lodash/sample";
 import options from "../../Dialogs/AvatarDialog/options";
+import AvatarMod from "@nualang/avatars";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const Avatar = AvatarMod.default || AvatarMod;
 function AvatarSwitcher({
   style = null
 }) {

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

@@ -1,9 +1,8 @@
-import { useState, useEffect } from "react";
+import { useState, useMemo } from "react";
 import "regenerator-runtime/runtime";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme, alpha } from "@mui/material/styles";
+import { useTheme } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";
-import { withStyles } from "tss-react/mui";
 import { Link as RouterLink, useParams, useNavigate } from "react-router-dom";
 import { Typography, Avatar, Box, Menu, MenuItem, Button, Paper, Tooltip, Card, Grid, CardActionArea, CardContent } from "@mui/material";
 import LiveTvIcon from "@mui/icons-material/LiveTv";
@@ -102,140 +101,6 @@ const useStyles = makeStyles()(theme => ({
     position: "relative"
   }
 }));
-const calcCompletions = (topic = {}, completions = [], _bots = [], _roleplays = []) => {
-  let isRoleplaysHidden;
-  let isPronunciationHidden;
-  let isBotsHidden;
-  let isListeningHidden;
-  let isTranslationHidden;
-  let isPhrases;
-  let completedExerciseCount = 0;
-  let totalExercises = 0;
-  if (topic.phrases && topic.phrases.length > 0) {
-    isPhrases = true;
-  }
-  if (topic.isTopicHidden) {
-    isRoleplaysHidden = true;
-    isBotsHidden = true;
-    isPronunciationHidden = true;
-    isListeningHidden = true;
-    isTranslationHidden = true;
-  } else if (topic && topic.hiddenExercises) {
-    topic.hiddenExercises.forEach(exercise => {
-      if (exercise === "roleplays") {
-        isRoleplaysHidden = true;
-      }
-      if (exercise === "chatbots") {
-        isBotsHidden = true;
-      }
-      if (exercise === "pronunciation") {
-        isPronunciationHidden = true;
-      }
-      if (exercise === "listening") {
-        isListeningHidden = true;
-      }
-      if (exercise === "translation") {
-        isTranslationHidden = true;
-      }
-    });
-  }
-  if (isPhrases) {
-    if (!isPronunciationHidden) {
-      totalExercises += 1;
-    }
-    if (!isListeningHidden) {
-      totalExercises += 1;
-    }
-    if (!isTranslationHidden) {
-      totalExercises += 1;
-    }
-  }
-  const completedPronunciation = completions.filter(c => c.topicId === topic.topicId && c.exercise === "pronunciation").length;
-  const completedTranslation = completions.filter(c => c.topicId === topic.topicId && c.exercise === "translation").length;
-  const completedListening = completions.filter(c => c.topicId === topic.topicId && c.exercise === "listening").length;
-  completedExerciseCount += !isPronunciationHidden && completedPronunciation > 0 ? 1 : 0;
-  completedExerciseCount += !isTranslationHidden && completedTranslation > 0 ? 1 : 0;
-  completedExerciseCount += !isListeningHidden && completedListening > 0 ? 1 : 0;
-  let completedRoleplays = 0;
-  let completedBots = 0;
-  const roleplays = _roleplays.map(roleplay => {
-    if (isRoleplaysHidden || roleplay.isRoleplayHidden || topic.isTopicHidden) {
-      return {
-        ...roleplay,
-        completedCount: 0
-      };
-    } else {
-      const completedCount = completions.reduce((acc, completion) => {
-        if (completion && completion.topicId === topic.topicId && completion.exercise.startsWith("roleplay") && completion.roleplayId === roleplay.roleplayId) {
-          acc += 1;
-        }
-        return acc;
-      }, 0);
-      if (completedCount > 0) {
-        completedRoleplays += 1;
-        completedExerciseCount += 1;
-      }
-      totalExercises += 1;
-      return {
-        ...roleplay,
-        completedCount: completedCount
-      };
-    }
-  });
-  const bots = _bots.map(bot => {
-    if (isBotsHidden || bot.isBotHidden || topic.isTopicHidden) {
-      return {
-        ...bot,
-        completedCount: 0
-      };
-    } else {
-      const completedCount = completions.reduce((acc, completion) => {
-        if (completion && completion.exercise === "bot" && completion.botId === bot.botId) {
-          acc += 1;
-        }
-        return acc;
-      }, 0);
-      if (completedCount > 0) {
-        completedBots += 1;
-        completedExerciseCount += 1;
-      }
-      totalExercises += 1;
-      return {
-        ...bot,
-        completedCount: completedCount
-      };
-    }
-  });
-  return {
-    ...topic,
-    roleplays: roleplays,
-    bots: bots,
-    completion: {
-      completed: completedExerciseCount,
-      total: totalExercises,
-      percentage: completedExerciseCount / totalExercises * 100,
-      pronunciation: {
-        completedCount: completedPronunciation
-      },
-      translation: {
-        completedCount: completedTranslation
-      },
-      listening: {
-        completedCount: completedListening
-      },
-      roleplays: {
-        completed: completedRoleplays,
-        total: roleplays.length,
-        percentage: completedRoleplays / roleplays.length * 100
-      },
-      bots: {
-        completed: completedBots,
-        total: bots.length,
-        percentage: completedBots / bots.length * 100
-      }
-    }
-  };
-};
 function OverflowMenu({
   t,
   topicId,
@@ -664,14 +529,16 @@ function Topic({
   };
   const [isCreatePhraseDialogOpen, setIsCreatePhraseDialogOpen] = useState(false);
   const [isUploadPhrasesDialogOpen, setIsUploadPhrasesDialogOpen] = useState(false);
-  let topicCompletion = {
-    completed: 0,
-    total: 0,
-    percentage: 0
-  };
-  if (isMember && topic && topic.completion) {
-    topicCompletion = calcTopicCompletions(topic, topic.completion, false).completion;
-  }
+  const topicCompletion = useMemo(() => {
+    if (isMember && topic?.topicId && topic?.completions?.length) {
+      return calcTopicCompletions(topic, topic.completions, false).completion;
+    }
+    return {
+      completed: 0,
+      total: 0,
+      percentage: 0
+    };
+  }, [isMember, topic?.topicId, topic?.completions?.length]);
   const {
     percentage,
     completed,
@@ -697,7 +564,9 @@ function Topic({
   } else {
     initialTabValue = 0;
   }
-  if (!topic) {
+
+  //  if (!topic) {
+  if (topic && Object.keys(topic).length === 0) {
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("div", {
         className: classes.cardTop,
@@ -1437,7 +1306,8 @@ export default function ViewTopic({
       children: /*#__PURE__*/_jsx(Topic, {
         t: t,
         isLoading: isLoading,
-        courseSettings: courseSettings
+        courseSettings: courseSettings,
+        ...otherProps
       })
     }), !isLoading && topic && Object.keys(topic).length && /*#__PURE__*/_jsx(_Fragment, {
       children: /*#__PURE__*/_jsx(Topic, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1295",
+  "version": "0.1.1297",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -21,7 +21,7 @@
     "@hookform/resolvers": "^3.6.0",
     "@json2csv/plainjs": "^7.0.1",
     "@nualang/avatars": "2.0.3",
-    "@nualang/nualang-api-and-queries": "^1.1.22",
+    "@nualang/nualang-api-and-queries": "^1.1.23",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.2",
     "ajv-keywords": "^3.5.2",
@@ -129,11 +129,13 @@
     "globals": "^16.0.0",
     "intersection-observer": "^0.12.0",
     "jsdom": "^27.0.0",
-    "msw": "^2.10.5",
+    "msw": "^2.11.3",
+    "msw-storybook-addon": "^2.0.5",
     "prettier": "^3.2.5",
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "react-router-dom": "^6.30.0",
+    "rimraf": "^6.0.1",
     "storybook": "^9.1.3",
     "vitest": "^3.1.1",
     "zx": "^8.5.4"
@@ -169,7 +171,9 @@
     ]
   },
   "msw": {
-    "workerDirectory": "public"
+    "workerDirectory": [
+      "public"
+    ]
   },
   "overrrides": {
     "@emotion/react": "$@emotion/react",