@nualang/nualang-ui-components 0.1.1432 → 0.1.1433

package/dist/Assignments/AssignmentBotSelection/AssignmentBotSelection.js

@@ -1,16 +1,30 @@
-import { useState, useEffect, Fragment } from "react";
-import { Box, ListItemText, ListItemButton, Avatar, Checkbox, ListItemIcon, Badge, IconButton, Chip, Typography } from "@mui/material";
+import { useState } from "react";
+import { Box, ListItemText, ListItemButton, Avatar, Checkbox, ListItemIcon, Badge, IconButton, Chip, Typography, Collapse, Tooltip } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ForumIcon from "@mui/icons-material/Forum";
+import HeadsetIcon from "@mui/icons-material/Headset";
 import { Done, Timelapse } from "@mui/icons-material";
 import { useNavigate, useParams } from "react-router";
 import HtmlTooltipComponent from "../../Misc/HtmlTooltipComponent/HtmlTooltipComponent";
+import { getBotContentTemplateType } from "../../utils";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const sxGreenColor = theme => ({
-  color: theme.palette.success ? theme.palette.success.dark : ""
+  color: theme.palette.success ? theme.palette.success.dark : "",
+  marginTop: theme.spacing(2),
+  marginRight: theme.spacing(2),
+  marginBottom: theme.spacing(2)
 });
 const sxInfoColor = theme => ({
-  color: theme.palette.info ? theme.palette.info.main : ""
+  color: theme.palette.info ? theme.palette.info.main : "",
+  marginTop: theme.spacing(2),
+  marginRight: theme.spacing(2),
+  marginBottom: theme.spacing(2)
 });
+const botModes = ["bot", "bot-listen-and-speak"];
+const getModeIcon = mode => mode === "bot" ? /*#__PURE__*/_jsx(ForumIcon, {}) : /*#__PURE__*/_jsx(HeadsetIcon, {});
+const getModeLabel = (mode, t) => mode === "bot" ? t("choose_mode_text_option") : t("audio_only_mode");
 export function ProgressBadge({
   completions
 }) {
@@ -55,7 +69,7 @@ function Bot({
   } = params;
   const [courseId, sectionId, topicId] = courseSectionTopicId ? courseSectionTopicId.split("|") : "";
   const [lastClickedAssignmentId, lastClickedBotId] = lastClickedExerciseId?.split("|").slice(-2) || [];
-  const addSearchParams = () => {
+  const addSearchParams = mode => {
     if (!classroomId || !courseId || !sectionId || !topicId || !bot?.botId) {
       console.error("Missing required parameters for navigation");
       return;
@@ -64,55 +78,103 @@ function Bot({
       courseSectionTopicId: `${courseSectionTopicId}|${assignment.assignmentId}|${bot.botId}`
     };
     localStorage.setItem("lastClickedExercise", JSON.stringify(lastClickedExercise));
-    navigate(`/classrooms/${classroomId}/${courseId}/${sectionId}/${topicId}/bots/${bot?.botId}?assignmentId=${assignment.assignmentId}`);
+    const modeParam = mode ? `&mode=${encodeURIComponent(mode)}` : "";
+    navigate(`/classrooms/${classroomId}/${courseId}/${sectionId}/${topicId}/bots/${bot?.botId}?assignmentId=${assignment.assignmentId}${modeParam}`);
   };
   const [open, setOpen] = useState(lastClickedBotId === bot.botId && lastClickedAssignmentId === assignment.assignmentId);
-  const [isSelected, setIsSelected] = useState(false);
-  useEffect(() => {
-    // Check if this exercise is selected
-    const exerciseSelected = selectedExercises?.some(exercise => exercise.botId === bot.botId);
-    setIsSelected(exerciseSelected);
-  }, [selectedExercises, bot.botId]);
-  const handleClick = () => {
-    setIsSelected(!isSelected);
-    const exercise = {
-      botId: bot.botId,
-      courseSectionTopicId
-    };
-    handleSelectExercise([exercise]);
+  const botTemplateType = getBotContentTemplateType(bot.selectedTemplate);
+  const isPictureOrEmojiQuizBot = botTemplateType === "picture-quiz" || botTemplateType === "emoji-quiz";
+  // Picture/emoji quiz bots have no spoken content to listen to, so Listen &
+  // Speak is never a valid mode for them - only Chat can be assigned/played.
+  const availableModes = isPictureOrEmojiQuizBot ? ["bot"] : botModes;
+  const allModesValue = isPictureOrEmojiQuizBot ? "bot" : "all";
+  const selectedExercise = selectedExercises?.find(exercise => exercise.botId === bot.botId && exercise.courseSectionTopicId === courseSectionTopicId);
+  const isBotSelectedForAssignment = !!selectedExercise;
+  const effectiveMode = selectedExercise?.mode || "all";
+  const isAllModesSelected = isBotSelectedForAssignment && effectiveMode === allModesValue;
+  const isIndeterminate = isBotSelectedForAssignment && effectiveMode !== allModesValue;
+  const isModeSelected = mode => isBotSelectedForAssignment && (effectiveMode === "all" || effectiveMode === mode);
+  const handleToggleMode = mode => {
+    const otherMode = mode === "bot" ? "bot-listen-and-speak" : "bot";
+    const modeChecked = isModeSelected(mode);
+    const otherChecked = availableModes.includes(otherMode) && isModeSelected(otherMode);
+    if (modeChecked) {
+      if (otherChecked) {
+        handleSelectExercise([{
+          botId: bot.botId,
+          courseSectionTopicId,
+          mode: otherMode,
+          updateModeOnly: true
+        }]);
+      } else {
+        handleSelectExercise([{
+          botId: bot.botId,
+          courseSectionTopicId
+        }]);
+      }
+    } else if (otherChecked) {
+      handleSelectExercise([{
+        botId: bot.botId,
+        courseSectionTopicId,
+        mode: "all",
+        updateModeOnly: true
+      }]);
+    } else {
+      handleSelectExercise([{
+        botId: bot.botId,
+        courseSectionTopicId,
+        mode
+      }]);
+    }
+  };
+  const handleSelectAllModes = () => {
+    if (isAllModesSelected) {
+      handleSelectExercise([{
+        botId: bot.botId,
+        courseSectionTopicId
+      }]);
+    } else if (isBotSelectedForAssignment) {
+      handleSelectExercise([{
+        botId: bot.botId,
+        courseSectionTopicId,
+        mode: allModesValue,
+        updateModeOnly: true
+      }]);
+    } else {
+      handleSelectExercise([{
+        botId: bot.botId,
+        courseSectionTopicId,
+        mode: allModesValue
+      }]);
+    }
   };
-  const getBotCompletion = () => {
+  const getBotCompletion = mode => {
     if (!Array.isArray(memberCourseCompletions) || memberCourseCompletions.length === 0) {
       return 0;
     }
-    const botCompletion = memberCourseCompletions.filter(completion => completion.botId === bot.botId);
+    const botCompletion = memberCourseCompletions.filter(completion => completion.botId === bot.botId && (!mode || completion.exercise === mode));
     return botCompletion.length;
   };
-  const getBotProgress = () => {
-    const progress = topicProgress?.filter(progress => progress.botId === bot.botId && progress.existingMessages && progress.existingMessages !== null);
+  const getBotProgress = mode => {
+    const progress = topicProgress?.filter(progress => progress.botId === bot.botId && (!mode || progress.exercise === mode) && progress.existingMessages && progress.existingMessages !== null);
     return progress?.length || 0;
   };
-  return /*#__PURE__*/_jsx("div", {
-    children: /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx("div", {
       children: /*#__PURE__*/_jsxs(ListItemButton, {
-        onClick: () => {
-          if (useCase === "assignment-start") {
-            addSearchParams();
-          } else if (handleSelectExercise) {
-            handleClick();
-          }
-        },
+        onClick: () => setOpen(!open),
         sx: {
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
-          flexDirection: {
-            xs: "column",
-            sm: "row"
-          },
+          flexDirection: "row",
           marginLeft: {
             sm: "0px",
             md: "60px"
+          },
+          gap: {
+            xs: 1,
+            sm: 2
           }
         },
         children: [/*#__PURE__*/_jsxs(Box, {
@@ -171,39 +233,131 @@ function Bot({
             }),
             secondary: bot.description
           })]
-        }), useCase === "assignment-select" && /*#__PURE__*/_jsx(Checkbox, {
+        }), /*#__PURE__*/_jsxs(Box, {
           sx: {
-            marginRight: "15px"
+            display: "flex",
+            alignItems: "center",
+            gap: 1
           },
-          checked: isSelected,
-          onClick: e => {
-            e.stopPropagation();
-            handleClick();
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            onClick: e => {
+              e.stopPropagation();
+              setOpen(!open);
+            },
+            sx: {
+              ml: 2
+            },
+            children: open ? /*#__PURE__*/_jsx(ExpandLessIcon, {
+              sx: {
+                color: "#757575"
+              }
+            }) : /*#__PURE__*/_jsx(ExpandMoreIcon, {
+              sx: {
+                color: "#757575"
+              }
+            })
+          }), useCase === "assignment-select" && /*#__PURE__*/_jsx(Tooltip, {
+            title: t("select_all"),
+            placement: "top",
+            children: /*#__PURE__*/_jsx(Checkbox, {
+              checked: isAllModesSelected,
+              indeterminate: isIndeterminate,
+              onChange: handleSelectAllModes,
+              onClick: event => {
+                event.stopPropagation();
+              },
+              sx: {
+                mr: 2
+              }
+            })
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Collapse, {
+      in: open,
+      timeout: "auto",
+      unmountOnExit: true,
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          ml: {
+            sm: 0,
+            md: 3.5
           }
-        }), useCase === "assignment-view" && isPreview && /*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(IconButton, {
+        },
+        children: [useCase === "assignment-select" && availableModes.map(mode => /*#__PURE__*/_jsxs(ListItemButton, {
+          onClick: () => handleToggleMode(mode),
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            flexDirection: "row",
+            marginLeft: {
+              sm: "0px",
+              md: "95px"
+            }
+          },
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            sx: {
+              display: {
+                xs: "none",
+                sm: "flex"
+              }
+            },
+            children: getModeIcon(mode)
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            primary: getModeLabel(mode, t),
+            secondary: t(mode === "bot" ? "choose_mode_text_option_desc" : "audio_only_subtitle")
+          }), /*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(Checkbox, {
+              checked: isModeSelected(mode)
+            })
+          })]
+        }, mode)), (useCase === "assignment-view" || useCase === "assignment-start") && availableModes.map(mode => isModeSelected(mode) && /*#__PURE__*/_jsxs(ListItemButton, {
+          "data-cy": `assignment-bot-mode-${mode}`,
+          onClick: () => {
+            if (useCase === "assignment-start") addSearchParams(mode);
+          },
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            flexDirection: "row",
+            marginLeft: {
+              sm: "0px",
+              md: "95px"
+            }
+          },
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            sx: {
+              display: {
+                xs: "none",
+                sm: "flex"
+              }
+            },
+            children: getModeIcon(mode)
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            primary: getModeLabel(mode, t),
+            secondary: t(mode === "bot" ? "choose_mode_text_option_desc" : "audio_only_subtitle")
+          }), useCase === "assignment-start" && /*#__PURE__*/_jsxs(ListItemIcon, {
+            children: [/*#__PURE__*/_jsx(InProgressBadge, {
+              progressCount: getBotProgress(mode)
+            }), /*#__PURE__*/_jsx(ProgressBadge, {
+              completions: getBotCompletion(mode)
+            })]
+          }), useCase === "assignment-view" && isPreview && /*#__PURE__*/_jsx(IconButton, {
             edge: "end",
-            "aria-label": "remove-bot",
+            "aria-label": "remove-bot-mode",
             onClick: e => {
               e.stopPropagation();
-              const exerciseToRemove = selectedExercises.find(ex => ex.botId === bot.botId && ex.courseSectionTopicId === courseSectionTopicId);
-              if (exerciseToRemove) {
-                handleRemoveExercise(exerciseToRemove);
-              }
+              handleToggleMode(mode);
             },
             children: /*#__PURE__*/_jsx(ClearIcon, {
               fontSize: "small"
             })
-          })
-        }), useCase === "assignment-start" && /*#__PURE__*/_jsxs(ListItemIcon, {
-          children: [/*#__PURE__*/_jsx(InProgressBadge, {
-            progressCount: getBotProgress()
-          }), /*#__PURE__*/_jsx(ProgressBadge, {
-            completions: getBotCompletion()
           })]
-        })]
+        }, mode))]
       })
-    })
+    })]
   });
 }
 function AssignmentBotSelection({

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -17,7 +17,7 @@ import { progress as progressQuerys } from "@nualang/nualang-api-and-queries/Que
 import { useNavigate, useParams } from "react-router";
 import { ProgressBadge, InProgressBadge } from "../../Lists/Exercises/Exercises";
 import ColorLinearProgress from "../../Misc/ColorLinearProgress/ColorLinearProgress";
-import { calcCompletions } from "../../utils";
+import { calcCompletions, getBotContentTemplateType } from "../../utils";
 import AssignmentBotSelection from "../AssignmentBotSelection/AssignmentBotSelection";
 import AssignmentPhraseListSelection from "../AssignmentPhraseListSelection/AssignmentPhraseListSelection";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -508,9 +508,12 @@ function Topic({
       });
       bots?.forEach(bot => {
         if (!selectedExercises?.some(e => e.botId === bot.botId)) {
+          const botTemplateType = getBotContentTemplateType(bot.selectedTemplate);
+          const isPictureOrEmojiQuizBot = botTemplateType === "picture-quiz" || botTemplateType === "emoji-quiz";
           exercisesToAdd.push({
             botId: bot.botId,
-            courseSectionTopicId: courseSectionTopicId
+            courseSectionTopicId: courseSectionTopicId,
+            mode: isPictureOrEmojiQuizBot ? "bot" : "all"
           });
         }
       });

package/dist/Assignments/AssignmentSelectExercise/AssignmentSelectExercise.js

@@ -50,11 +50,22 @@ function AssignmentSelectExercise({
           }
         } else if (isBot) {
           // For bots
-          const exists = updatedExercises.some(e => e.botId === exercise.botId && e.courseSectionTopicId === exercise.courseSectionTopicId);
-          if (exists) {
-            updatedExercises = updatedExercises.filter(e => e.botId !== exercise.botId || e.courseSectionTopicId !== exercise.courseSectionTopicId);
+          const existingIndex = updatedExercises.findIndex(e => e.botId === exercise.botId && e.courseSectionTopicId === exercise.courseSectionTopicId);
+          if (existingIndex > -1) {
+            if (exercise.updateModeOnly) {
+              updatedExercises[existingIndex] = {
+                ...updatedExercises[existingIndex],
+                mode: exercise.mode
+              };
+            } else {
+              updatedExercises = updatedExercises.filter((_, index) => index !== existingIndex);
+            }
           } else {
-            updatedExercises.push(exercise);
+            const newExercise = {
+              ...exercise
+            };
+            delete newExercise.updateModeOnly;
+            updatedExercises.push(newExercise);
           }
         } else {
           // Unknown type — just push without unsafe undefined matching