@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Lists/Exercises/Exercises.js

@@ -1,1630 +0,0 @@
-import { useState, useEffect, useRef, useCallback } from "react";
-import { useLocation, useNavigate, useParams } from "react-router";
-import CopyIcon from "@mui/icons-material/FileCopy";
-import Typography from "@mui/material/Typography";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { Avatar, AvatarGroup, ListItem, ListItemButton } from "@mui/material";
-import SelectClassroom from "../../Dialogs/SelectClassroom/SelectClassroom";
-import PlaceholderImages from "../../utils/placeholder-images/index";
-import { useDrag, useDrop } from "react-dnd";
-import update from "immutability-helper";
-import { searchStringToObj, objToSearchString } from "../../utils";
-import FlashOnIcon from "@mui/icons-material/FlashOn";
-import FlashOffIcon from "@mui/icons-material/FlashOff";
-import MenuBookIcon from "@mui/icons-material/MenuBook";
-import { Collapse, ListItemText, ListItemIcon, List, ListItemAvatar, IconButton, Badge, Tooltip, Box, Chip, LinearProgress } from "@mui/material";
-import Add from "@mui/icons-material/Add";
-import Face from "@mui/icons-material/Face";
-import ForumIcon from "@mui/icons-material/Forum";
-import ExpandLess from "@mui/icons-material/ExpandLess";
-import ExpandMore from "@mui/icons-material/ExpandMore";
-import Delete from "@mui/icons-material/Delete";
-import Create from "@mui/icons-material/Create";
-import Done from "@mui/icons-material/Done";
-import DragHandle from "@mui/icons-material/DragHandle";
-import Visibility from "@mui/icons-material/Visibility";
-import VisibilityOff from "@mui/icons-material/VisibilityOff";
-import Timeline from "@mui/icons-material/Timeline";
-import Timelapse from "@mui/icons-material/Timelapse";
-import HtmlTooltipComponent from "../../Misc/HtmlTooltipComponent/HtmlTooltipComponent";
-import CreatePhraseGroupDialog from "../../Dialogs/CreatePhraseGroupDialog/CreatePhraseGroupDialog";
-import PhraseListEditorDialog from "../../Editors/PhraseList/PhraseList";
-import { exercises as PHRASE_GAMES, meaningGames as MEANING_GAMES, roleplayGames as ALL_ROLEPLAY_GAMES } from "../../Tables/Progress/constants";
-import { useTheme } from "@mui/material/styles";
-import { styled } from "@mui/system";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const sxRoot = () => ({
-  width: "100%"
-});
-const sxNested = theme => ({
-  paddingLeft: theme.spacing(9)
-});
-const sxGreenColor = theme => ({
-  color: theme.palette.success ? theme.palette.success.dark : ""
-});
-const sxGreenColorWithMargin = theme => ({
-  color: theme.palette.success ? theme.palette.success.dark : "",
-  marginTop: theme.spacing(2),
-  marginRight: theme.spacing(2),
-  marginBottom: theme.spacing(2)
-});
-const sxInfoColorWithMargin = theme => ({
-  color: theme.palette.info ? theme.palette.info.main : "",
-  marginTop: theme.spacing(2),
-  marginRight: theme.spacing(2),
-  marginBottom: theme.spacing(2)
-});
-const sxDescriptionWrapper = () => ({
-  maxWidth: "70%"
-});
-function OverflowMenu({
-  children,
-  anchorEl,
-  handleClose
-}) {
-  return /*#__PURE__*/_jsx(Menu, {
-    anchorEl: anchorEl,
-    keepMounted: true,
-    open: Boolean(anchorEl),
-    onClose: handleClose,
-    children: children
-  });
-}
-const getRoleplayExerciseState = (topicProgress, roleplayId) => {
-  const idx = topicProgress.findIndex(p => p.roleplayId === roleplayId);
-  if (idx > -1) {
-    return {
-      existingMessages: topicProgress[idx].existingMessages,
-      existingAnswerAttempts: topicProgress[idx].answerAttempts,
-      selectedActor: topicProgress[idx].selectedActor,
-      exerciseStartTime: topicProgress[idx].exerciseStartTime
-    };
-  }
-  return {
-    existingMessages: null,
-    existingAnswerAttempts: null,
-    selectedActor: null,
-    exerciseStartTime: null
-  };
-};
-const getBotProgress = (topicProgress, botId) => {
-  const idx = topicProgress.findIndex(p => p.botId === botId);
-  if (idx > -1) {
-    return {
-      existingMessages: topicProgress[idx].existingMessages,
-      existingVars: topicProgress[idx].existingVars,
-      exerciseStartTime: topicProgress[idx].exerciseStartTime
-    };
-  }
-  return {
-    existingMessages: null,
-    existingVars: null,
-    exerciseStartTime: null
-  };
-};
-export function ProgressBadge({
-  completions
-}) {
-  return completions > 0 ? /*#__PURE__*/_jsx(Badge, {
-    sx: sxGreenColorWithMargin,
-    badgeContent: completions,
-    color: "default",
-    children: /*#__PURE__*/_jsx(Done, {})
-  }) : null;
-}
-export function InProgressBadge({
-  progressCount
-}) {
-  return progressCount > 0 ? /*#__PURE__*/_jsx(Badge, {
-    sx: sxInfoColorWithMargin,
-    color: "default",
-    children: /*#__PURE__*/_jsx(Timelapse, {})
-  }) : null;
-}
-const isHiddenValue = val => val === true || val === "true";
-const ROLEPLAY_HIDDEN_KEYS = {
-  "fill-in-the-blanks": "isFillInTheBlanksHidden",
-  "act-it-out": "isActItOutHidden",
-  "act-it-out-listening": "isActItOutListeningHidden",
-  "act-it-out-speaking": "isActItOutSpeakingHidden",
-  "act-it-out-listening-speaking": "isActItOutListeningSpeakingHidden"
-};
-const ROLEPLAY_READ_WRITE_EXCLUSIONS = new Set(["act-it-out-listening", "act-it-out-speaking", "act-it-out-listening-speaking"]);
-const getPhraseListProgress = (completions, phraseList) => {
-  const hasPhraseDefinitions = (phraseList.phrases || []).some(p => p.definitions?.length > 0);
-  const coreEnabled = PHRASE_GAMES.filter(g => !MEANING_GAMES.includes(g) && !isHiddenValue(phraseList.hiddenPhraseGroupGames?.[g]));
-  const meaningEnabled = hasPhraseDefinitions ? MEANING_GAMES.filter(g => !isHiddenValue(phraseList.hiddenPhraseGroupGames?.[g])) : [];
-  const enabled = [...coreEnabled, ...meaningEnabled];
-  const total = enabled.length;
-  if (total === 0) return {
-    completed: 0,
-    total: 0
-  };
-  const completedSet = new Set((completions || []).filter(c => enabled.includes(c.exercise) && (c.phraseListId === phraseList.phraseListId || !c.phraseListId && phraseList.phraseListId?.startsWith("leg-"))).map(c => c.exercise));
-  return {
-    completed: completedSet.size,
-    total
-  };
-};
-const getRoleplayProgress = (completions, roleplay, isReadWriteModeStudent = false) => {
-  const enabled = ALL_ROLEPLAY_GAMES.filter(g => {
-    if (isReadWriteModeStudent && ROLEPLAY_READ_WRITE_EXCLUSIONS.has(g)) return false;
-    return !ROLEPLAY_HIDDEN_KEYS[g] || !isHiddenValue(roleplay[ROLEPLAY_HIDDEN_KEYS[g]]);
-  });
-  const total = enabled.length;
-  if (total === 0) return {
-    completed: 0,
-    total: 0
-  };
-  const completedGameIds = new Set((completions || []).filter(c => c.exercise?.startsWith("roleplay") && c.roleplayId === roleplay.roleplayId).map(c => c.exercise === "roleplay" ? "story" : c.exercise.replace("roleplay-", "")));
-  const completed = enabled.filter(g => completedGameIds.has(g)).length;
-  return {
-    completed,
-    total
-  };
-};
-function ItemProgressBar({
-  completed,
-  total
-}) {
-  const pct = total > 0 ? Math.round(completed / total * 100) : 0;
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      display: "flex",
-      alignItems: "center",
-      gap: 1
-    },
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        width: 160
-      },
-      children: /*#__PURE__*/_jsx(LinearProgress, {
-        variant: "determinate",
-        value: pct,
-        sx: {
-          height: 6,
-          borderRadius: 3
-        }
-      })
-    }), /*#__PURE__*/_jsx(Typography, {
-      variant: "caption",
-      sx: {
-        color: "text.secondary",
-        whiteSpace: "nowrap"
-      },
-      children: `${completed} / ${total}`
-    })]
-  });
-}
-const ExerciseAvatarGroup = styled(AvatarGroup)(() => ({
-  justifyContent: "start",
-  "& .MuiAvatarGroup-avatar": {
-    width: 24,
-    height: 24,
-    fontSize: "12px",
-    fontWeight: "bold"
-  }
-}));
-function PhraseListRow({
-  t,
-  phraseList,
-  completions,
-  numberOfPhraseListCompletions,
-  handleDeletePhraseList,
-  handleUpdatePhraseList,
-  isCreator,
-  isMember,
-  isLargeScreen,
-  courseId,
-  sectionId,
-  topicId,
-  handleDuplicatePhraseList,
-  handleOpenPhraseList,
-  handleEditPhraseList,
-  teachClassrooms,
-  phraseListIndex,
-  movePhraseList,
-  onDropPhraseList
-}) {
-  const params = useParams();
-  const {
-    classroomId
-  } = params;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [isPhraseListHiddenState, setIsPhraseListHiddenState] = useState(phraseList.isPhraseListHidden);
-  const navigate = useNavigate();
-  const ref = useRef(null);
-  const [{
-    handlerId
-  }, drop] = useDrop({
-    accept: "phraseList",
-    hover(item, monitor) {
-      if (!ref.current) return;
-      const dragIndex = item.index;
-      const hoverIndex = phraseListIndex;
-      if (dragIndex === hoverIndex) return;
-      const hoverBoundingRect = ref.current.getBoundingClientRect();
-      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-      const clientOffset = monitor.getClientOffset();
-      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) return;
-      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) return;
-      movePhraseList(dragIndex, hoverIndex);
-      item.index = hoverIndex;
-    }
-  });
-  const [{
-    isDragging
-  }, drag] = useDrag({
-    type: "phraseList",
-    canDrag: isCreator && isLargeScreen,
-    item: {
-      index: phraseListIndex,
-      primary: phraseList,
-      secondary: phraseList.description,
-      image: phraseList.picture
-    },
-    collect: monitor => ({
-      isDragging: monitor.isDragging()
-    }),
-    end: () => onDropPhraseList()
-  });
-  const opacity = isDragging ? 0 : 1;
-  drag(drop(ref));
-  useEffect(() => {
-    setIsPhraseListHiddenState(phraseList.isPhraseListHidden);
-  }, [phraseList]);
-  const [isSelectClassroomDialogOpen, setIsSelectClassroomDialogOpen] = useState(false);
-  const handleClickMenu = e => setAnchorEl(e.currentTarget);
-  const handleCloseMenu = () => setAnchorEl(null);
-  const {
-    isPhraseListHidden
-  } = phraseList;
-  const phraseListCompletions = numberOfPhraseListCompletions(completions, phraseList.phraseListId);
-  const phraseListProgress = getPhraseListProgress(completions, phraseList);
-  const updatePhraseListVisibility = async () => {
-    setIsPhraseListHiddenState(!isPhraseListHidden);
-    await handleUpdatePhraseList(phraseList.phraseListId, {
-      isPhraseListHidden: !isPhraseListHidden
-    });
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [(!isPhraseListHiddenState || isCreator) && /*#__PURE__*/_jsx(ListItem, {
-      ref: ref,
-      style: {
-        opacity
-      },
-      disablePadding: true,
-      secondaryAction: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [!isCreator && isLargeScreen && /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            gap: 1
-          },
-          children: [phraseListCompletions > 0 && classroomId && /*#__PURE__*/_jsx(Tooltip, {
-            title: t("view_activity"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => navigate(`/classrooms/${classroomId}?courseId=${courseId}&sectionId=${sectionId}&topicId=${topicId}&phraseListId=${phraseList.phraseListId || ""}#Progress`),
-              children: /*#__PURE__*/_jsx(Timeline, {})
-            })
-          }), /*#__PURE__*/_jsx(ItemProgressBar, {
-            completed: phraseListProgress.completed,
-            total: phraseListProgress.total
-          })]
-        }), isCreator && isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("edit_phrase_list") || "Edit",
-          children: /*#__PURE__*/_jsx(IconButton, {
-            onClick: () => handleEditPhraseList(phraseList),
-            children: /*#__PURE__*/_jsx(Create, {})
-          })
-        }), isCreator && isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-          title: isPhraseListHiddenState ? t("show_phrase_list") || "Show" : t("hide_phrase_list") || "Hide",
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: updatePhraseListVisibility,
-              children: isPhraseListHiddenState ? /*#__PURE__*/_jsx(VisibilityOff, {}) : /*#__PURE__*/_jsx(Visibility, {})
-            })
-          })
-        }), isCreator && isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("move_phrase_list") || "Move",
-          children: /*#__PURE__*/_jsx(IconButton, {
-            "data-handler-id": handlerId,
-            style: {
-              cursor: "move"
-            },
-            size: "large",
-            children: /*#__PURE__*/_jsx(DragHandle, {})
-          })
-        }), isCreator && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("more_options"),
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: handleClickMenu,
-              "aria-expanded": Boolean(anchorEl),
-              children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-            })
-          })
-        })]
-      }),
-      children: /*#__PURE__*/_jsxs(ListItemButton, {
-        id: phraseList.phraseListId,
-        sx: sxNested,
-        onClick: () => handleOpenPhraseList(phraseList),
-        disabled: !(isMember || isCreator),
-        children: [isLargeScreen && /*#__PURE__*/_jsx(ListItemAvatar, {
-          children: /*#__PURE__*/_jsx(Avatar, {
-            src: phraseList.picture || PlaceholderImages.roleplay,
-            alt: ""
-          })
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: isLargeScreen ? phraseList.phraseListName || "" : /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Box, {
-              sx: {
-                mb: 1
-              },
-              children: /*#__PURE__*/_jsx(Avatar, {
-                src: phraseList.picture || PlaceholderImages.roleplay,
-                alt: ""
-              })
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "body1",
-              children: phraseList.phraseListName || ""
-            })]
-          }),
-          secondary: isLargeScreen ? /*#__PURE__*/_jsx(Box, {
-            sx: isCreator ? sxDescriptionWrapper : null,
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              component: "p",
-              color: "textSecondary",
-              children: phraseList.description || ""
-            })
-          }) : !isCreator && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              component: "p",
-              color: "textSecondary",
-              children: phraseList.description || ""
-            }), /*#__PURE__*/_jsx(ItemProgressBar, {
-              completed: phraseListProgress.completed,
-              total: phraseListProgress.total
-            })]
-          })
-        })]
-      })
-    }), /*#__PURE__*/_jsxs(OverflowMenu, {
-      anchorEl: anchorEl,
-      handleClose: handleCloseMenu,
-      children: [/*#__PURE__*/_jsxs(MenuItem, {
-        onClick: () => setIsSelectClassroomDialogOpen(true),
-        disabled: !isCreator && !(phraseListCompletions > 0),
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(Timeline, {})
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: t(isCreator ? "view_activity" : "show_progress")
-        })]
-      }), !isLargeScreen && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs(MenuItem, {
-          onClick: () => handleEditPhraseList(phraseList),
-          disabled: !isCreator,
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(Create, {})
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: t("edit_phrase_list") || "Edit"
-          })]
-        }), /*#__PURE__*/_jsxs(MenuItem, {
-          onClick: updatePhraseListVisibility,
-          disabled: !isCreator,
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: isPhraseListHiddenState ? /*#__PURE__*/_jsx(VisibilityOff, {}) : /*#__PURE__*/_jsx(Visibility, {})
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: isPhraseListHiddenState ? t("show_phrase_list") || "Show" : t("hide_phrase_list") || "Hide"
-          })]
-        })]
-      }), isCreator && handleDuplicatePhraseList && /*#__PURE__*/_jsxs(MenuItem, {
-        onClick: () => handleDuplicatePhraseList(phraseList),
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(CopyIcon, {})
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: t("create_duplicate")
-        })]
-      }), /*#__PURE__*/_jsxs(MenuItem, {
-        onClick: () => handleDeletePhraseList(phraseList.phraseListId),
-        disabled: !isCreator,
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(Delete, {})
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: t("remove_phrase_list") || "Remove"
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(SelectClassroom, {
-      t: t,
-      open: isSelectClassroomDialogOpen,
-      handleClose: () => setIsSelectClassroomDialogOpen(false),
-      title: t("select_a_classroom"),
-      teachClassrooms: teachClassrooms || [],
-      type: "phraseList",
-      courseId: courseId,
-      sectionId: sectionId,
-      topicId: topicId,
-      phraseListId: phraseList.phraseListId
-    })]
-  });
-}
-
-// ─── RoleplayListItem ─────────────────────────────────────────────────────────
-
-function RoleplayListItem({
-  t,
-  roleplay,
-  completions,
-  numberOfRoleplayCompletions,
-  handleRemoveRoleplay,
-  handleUpdateRoleplay,
-  isCreator,
-  isMember,
-  topicProgress,
-  isLargeScreen,
-  courseId,
-  sectionId,
-  topicId,
-  handleDuplicateRoleplay,
-  handlePlayRoleplay,
-  handleEditRoleplay,
-  teachClassrooms,
-  roleplayIndex,
-  moveRoleplay,
-  onDropRoleplay,
-  parentClassroom,
-  isReadWriteModeStudent,
-  ...otherProps
-}) {
-  const params = useParams();
-  const {
-    classroomId
-  } = params;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [isRoleplayHiddenState, setIsRoleplayHiddenState] = useState(roleplay.isRoleplayHidden);
-  const navigate = useNavigate();
-  const ref = useRef(null);
-  const [{
-    handlerId
-  }, drop] = useDrop({
-    accept: "roleplay",
-    hover(item, monitor) {
-      if (!ref.current) return;
-      const dragIndex = item.index;
-      const hoverIndex = roleplayIndex;
-      if (dragIndex === hoverIndex) return;
-      const hoverBoundingRect = ref.current.getBoundingClientRect();
-      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-      const clientOffset = monitor.getClientOffset();
-      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) return;
-      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) return;
-      moveRoleplay(dragIndex, hoverIndex);
-      item.index = hoverIndex;
-    }
-  });
-  const [{
-    isDragging
-  }, drag] = useDrag({
-    type: "roleplay",
-    canDrag: isCreator && isLargeScreen,
-    item: {
-      index: roleplayIndex,
-      primary: roleplay,
-      secondary: roleplay.description,
-      image: roleplay.picture
-    },
-    collect: monitor => ({
-      isDragging: monitor.isDragging()
-    }),
-    end: () => onDropRoleplay()
-  });
-  drag(drop(ref));
-  useEffect(() => {
-    setIsRoleplayHiddenState(roleplay.isRoleplayHidden);
-  }, [roleplay]);
-  const [isSelectClassroomDialogOpen, setIsSelectClassroomDialogOpen] = useState(false);
-  const handleClickMenu = e => setAnchorEl(e.currentTarget);
-  const handleCloseMenu = () => setAnchorEl(null);
-  const roleplayExerciseState = getRoleplayExerciseState(topicProgress, roleplay.roleplayId);
-  const {
-    existingMessages
-  } = roleplayExerciseState;
-  const {
-    isRoleplayHidden
-  } = roleplay;
-  const opacity = isDragging ? 0 : 1;
-  const updateRoleplayVisibility = async () => {
-    setIsRoleplayHiddenState(!isRoleplayHidden);
-    await handleUpdateRoleplay(roleplay, {
-      isRoleplayHidden: !isRoleplayHidden
-    });
-  };
-  const roleplayCompletions = numberOfRoleplayCompletions(completions, roleplay.roleplayId);
-  const roleplayProgress = getRoleplayProgress(completions, roleplay, isReadWriteModeStudent);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [(!isRoleplayHiddenState || isCreator) && /*#__PURE__*/_jsx(ListItem, {
-      ref: ref,
-      style: {
-        opacity
-      },
-      disablePadding: true,
-      secondaryAction: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [!isCreator && isLargeScreen && /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            gap: 1
-          },
-          children: [roleplayCompletions > 0 && classroomId && /*#__PURE__*/_jsx(Tooltip, {
-            title: t("view_activity"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => navigate(`/classrooms/${classroomId}?courseId=${courseId}&sectionId=${sectionId}&topicId=${topicId}&roleplayId=${roleplay.roleplayId || ""}#Progress`),
-              children: /*#__PURE__*/_jsx(Timeline, {})
-            })
-          }), /*#__PURE__*/_jsx(ItemProgressBar, {
-            completed: roleplayProgress.completed,
-            total: roleplayProgress.total
-          })]
-        }), isCreator && isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("edit_roleplay"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            "data-cy": "edit-roleplay",
-            onClick: () => handleEditRoleplay(roleplay),
-            children: /*#__PURE__*/_jsx(Create, {})
-          })
-        }), isCreator && isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-          title: isRoleplayHiddenState ? t("show_roleplay") : t("hide_roleplay"),
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: updateRoleplayVisibility,
-              children: isRoleplayHiddenState ? /*#__PURE__*/_jsx(VisibilityOff, {}) : /*#__PURE__*/_jsx(Visibility, {})
-            })
-          })
-        }), isCreator && isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("move_roleplay"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            "data-handler-id": handlerId,
-            style: {
-              cursor: "move"
-            },
-            size: "large",
-            children: /*#__PURE__*/_jsx(DragHandle, {})
-          })
-        }), isCreator && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("more_options"),
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: handleClickMenu,
-              "aria-expanded": Boolean(anchorEl),
-              children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-            })
-          })
-        })]
-      }),
-      children: /*#__PURE__*/_jsxs(ListItemButton, {
-        id: roleplay.roleplayId,
-        sx: sxNested,
-        onClick: () => handlePlayRoleplay(roleplay),
-        disabled: !(isMember || isCreator),
-        children: [isLargeScreen && /*#__PURE__*/_jsx(ListItemAvatar, {
-          children: /*#__PURE__*/_jsx(Avatar, {
-            src: roleplay.picture || roleplay.actor1?.picture || roleplay.actor2?.picture || PlaceholderImages.roleplay,
-            alt: ""
-          })
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: isLargeScreen ? roleplay.roleplayName || "" : /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Box, {
-              sx: {
-                mb: 1
-              },
-              children: /*#__PURE__*/_jsx(Avatar, {
-                src: roleplay.picture || roleplay.actor1?.picture || roleplay.actor2?.picture || PlaceholderImages.roleplay,
-                alt: ""
-              })
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "body1",
-              children: roleplay.roleplayName || ""
-            })]
-          }),
-          secondary: isLargeScreen ? /*#__PURE__*/_jsx(Box, {
-            sx: isCreator ? sxDescriptionWrapper : null,
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              component: "p",
-              color: "textSecondary",
-              children: roleplay.description || ""
-            })
-          }) : !isCreator && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              component: "p",
-              color: "textSecondary",
-              children: roleplay.description || ""
-            }), /*#__PURE__*/_jsx(ItemProgressBar, {
-              completed: roleplayProgress.completed,
-              total: roleplayProgress.total
-            })]
-          })
-        })]
-      })
-    }), /*#__PURE__*/_jsxs(OverflowMenu, {
-      anchorEl: anchorEl,
-      handleClose: handleCloseMenu,
-      children: [/*#__PURE__*/_jsxs(MenuItem, {
-        onClick: () => setIsSelectClassroomDialogOpen(true),
-        disabled: !isCreator && !(roleplayCompletions > 0),
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(Timeline, {})
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: t(isCreator ? "view_activity" : "show_progress")
-        })]
-      }), !isLargeScreen && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs(MenuItem, {
-          "data-cy": "menu-edit-roleplay",
-          onClick: () => handleEditRoleplay(roleplay),
-          disabled: !isCreator,
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(Create, {})
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: t("edit_roleplay")
-          })]
-        }), /*#__PURE__*/_jsxs(MenuItem, {
-          onClick: updateRoleplayVisibility,
-          disabled: !isCreator,
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: isRoleplayHiddenState ? /*#__PURE__*/_jsx(VisibilityOff, {}) : /*#__PURE__*/_jsx(Visibility, {})
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: isRoleplayHiddenState ? t("show_roleplay") : t("hide_roleplay")
-          })]
-        })]
-      }), isCreator && handleDuplicateRoleplay && /*#__PURE__*/_jsxs(MenuItem, {
-        "data-cy": "duplicate-roleplay",
-        onClick: () => handleDuplicateRoleplay(roleplay),
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(CopyIcon, {})
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: t("create_duplicate")
-        })]
-      }), /*#__PURE__*/_jsxs(MenuItem, {
-        onClick: () => handleRemoveRoleplay(roleplay),
-        disabled: !isCreator,
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(Delete, {})
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: t("remove_roleplay")
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(SelectClassroom, {
-      t: t,
-      open: isSelectClassroomDialogOpen,
-      handleClose: () => setIsSelectClassroomDialogOpen(false),
-      title: t("select_a_classroom"),
-      teachClassrooms: teachClassrooms || [],
-      type: "roleplay",
-      courseId: courseId,
-      sectionId: sectionId,
-      topicId: topicId,
-      roleplayId: roleplay.roleplayId
-    })]
-  });
-}
-
-// ─── BotListItem ──────────────────────────────────────────────────────────────
-
-function BotListItem({
-  t,
-  bot,
-  completions,
-  numberOfBotCompletions,
-  handleRemoveBot,
-  handleUpdateBot,
-  isCreator,
-  isMember,
-  handleDuplicateBot,
-  topicProgress,
-  isLargeScreen,
-  courseId,
-  sectionId,
-  topicId,
-  handleEditBot,
-  handlePlayBot,
-  teachClassrooms,
-  botIndex,
-  moveBot,
-  onDropBot,
-  parentClassroom,
-  ...otherProps
-}) {
-  const params = useParams();
-  const {
-    classroomId
-  } = params;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [isBotHiddenState, setIsBotHiddenState] = useState(bot.isBotHidden);
-  const [isBotChallenge, setIsBotChallenge] = useState(bot.isChallengeBot || false);
-  const [isSelectClassroomDialogOpen, setIsSelectClassroomDialogOpen] = useState(false);
-  const navigate = useNavigate();
-  useEffect(() => {
-    setIsBotChallenge(bot.isChallengeBot);
-  }, [bot.isChallengeBot]);
-  const ref = useRef(null);
-  const [{
-    handlerId
-  }, drop] = useDrop({
-    accept: "bot",
-    hover(item, monitor) {
-      if (!ref.current) return;
-      const dragIndex = item.index;
-      const hoverIndex = botIndex;
-      if (dragIndex === hoverIndex) return;
-      const hoverBoundingRect = ref.current.getBoundingClientRect();
-      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-      const clientOffset = monitor.getClientOffset();
-      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) return;
-      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) return;
-      moveBot(dragIndex, hoverIndex);
-      item.index = hoverIndex;
-    }
-  });
-  const [{
-    isDragging
-  }, drag] = useDrag({
-    type: "bot",
-    canDrag: isCreator && isLargeScreen,
-    item: {
-      index: botIndex,
-      primary: bot,
-      secondary: bot.description,
-      image: bot.picture
-    },
-    collect: monitor => ({
-      isDragging: monitor.isDragging()
-    }),
-    end: () => onDropBot()
-  });
-  drag(drop(ref));
-  const handleClickMenu = e => setAnchorEl(e.currentTarget);
-  const handleCloseMenu = () => setAnchorEl(null);
-  const botProgress = getBotProgress(topicProgress, bot.botId);
-  const {
-    existingMessages
-  } = botProgress;
-  const {
-    isBotHidden
-  } = bot;
-  const opacity = isDragging ? 0 : 1;
-  const updateBotVisibility = async () => {
-    setIsBotHiddenState(!isBotHiddenState);
-    await handleUpdateBot(bot, {
-      isBotHidden: !isBotHidden
-    });
-  };
-  const markBotAsChallenge = async () => {
-    await handleUpdateBot(bot, {
-      isChallengeBot: !isBotChallenge
-    });
-    setIsBotChallenge(!isBotChallenge);
-  };
-  const botCompletions = numberOfBotCompletions(completions, bot.botId);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [(!isBotHiddenState || isCreator) && /*#__PURE__*/_jsx(ListItem, {
-      ref: ref,
-      style: {
-        opacity
-      },
-      disablePadding: true,
-      secondaryAction: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [!isCreator && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [isLargeScreen && /*#__PURE__*/_jsx(InProgressBadge, {
-            progressCount: existingMessages?.length || 0
-          }), isLargeScreen && /*#__PURE__*/_jsx(ProgressBadge, {
-            completions: botCompletions
-          })]
-        }), isLargeScreen && !isCreator && botCompletions > 0 && classroomId && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("view_activity"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            onClick: () => navigate(`/classrooms/${classroomId}?courseId=${courseId}&sectionId=${sectionId}&topicId=${topicId}#Progress`),
-            children: /*#__PURE__*/_jsx(Timeline, {})
-          })
-        }), isCreator && isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("edit_bot"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            "data-cy": "edit-bot",
-            onClick: () => handleEditBot(bot),
-            children: /*#__PURE__*/_jsx(Create, {})
-          })
-        }), isCreator && isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-          title: isBotHiddenState ? t("show_bot") : t("hide_bot"),
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: updateBotVisibility,
-              children: isBotHiddenState ? /*#__PURE__*/_jsx(VisibilityOff, {}) : /*#__PURE__*/_jsx(Visibility, {})
-            })
-          })
-        }), isCreator && isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-          title: isBotChallenge ? t("unmark_as_challenge_bot") : t("mark_as_challenge_bot"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            "data-cy": "mark_challenge_bot",
-            onClick: markBotAsChallenge,
-            children: isBotChallenge ? /*#__PURE__*/_jsx(FlashOnIcon, {}) : /*#__PURE__*/_jsx(FlashOffIcon, {})
-          })
-        }), isCreator && isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("move_bot"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            "data-handler-id": handlerId,
-            style: {
-              cursor: "move"
-            },
-            size: "large",
-            children: /*#__PURE__*/_jsx(DragHandle, {})
-          })
-        }), isCreator && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("more_options"),
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: handleClickMenu,
-              "aria-expanded": Boolean(anchorEl),
-              "data-cy": `${bot.botName}-more-options`,
-              children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-            })
-          })
-        })]
-      }),
-      children: /*#__PURE__*/_jsxs(ListItemButton, {
-        id: bot.botId,
-        sx: sxNested,
-        onClick: () => handlePlayBot(bot),
-        disabled: !(isMember || isCreator),
-        children: [isLargeScreen && /*#__PURE__*/_jsx(ListItemAvatar, {
-          children: /*#__PURE__*/_jsx(Avatar, {
-            src: bot.picture || bot.botAvatar || PlaceholderImages.bot,
-            alt: ""
-          })
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: isLargeScreen ? !isBotChallenge ? bot.botName || "" : /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: "8px"
-            },
-            children: [bot.botName || "", isCreator || parentClassroom?.isCreator ? /*#__PURE__*/_jsx(HtmlTooltipComponent, {
-              titleBold: t("challenge_mode"),
-              titleDesc: t("challenge_bot_desc"),
-              placement: "right",
-              children: /*#__PURE__*/_jsx(Chip, {
-                label: t("challenge_mode"),
-                size: "small",
-                variant: "outlined",
-                color: "primary"
-              })
-            }) : /*#__PURE__*/_jsx(Chip, {
-              label: t("challenge_mode"),
-              size: "small",
-              variant: "outlined",
-              color: "primary"
-            })]
-          }) : /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Box, {
-              sx: {
-                mb: 1
-              },
-              children: /*#__PURE__*/_jsx(Avatar, {
-                src: bot.picture || bot.botAvatar || PlaceholderImages.bot,
-                alt: ""
-              })
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "body1",
-              children: bot.botName || ""
-            }), isBotChallenge && (isCreator || parentClassroom?.isCreator ? /*#__PURE__*/_jsx(HtmlTooltipComponent, {
-              titleBold: t("challenge_mode"),
-              titleDesc: t("challenge_bot_desc"),
-              placement: "right",
-              children: /*#__PURE__*/_jsx(Chip, {
-                label: t("challenge_mode"),
-                size: "small",
-                variant: "outlined",
-                color: "primary"
-              })
-            }) : /*#__PURE__*/_jsx(Chip, {
-              label: t("challenge_mode"),
-              size: "small",
-              variant: "outlined",
-              color: "primary"
-            }))]
-          }),
-          secondary: isLargeScreen ? /*#__PURE__*/_jsx(Box, {
-            sx: isCreator ? sxDescriptionWrapper : null,
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              component: "p",
-              color: "textSecondary",
-              children: bot.description || ""
-            })
-          }) : !isCreator && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              component: "p",
-              color: "textSecondary",
-              children: bot.description || ""
-            }), /*#__PURE__*/_jsx(InProgressBadge, {
-              progressCount: existingMessages?.length || 0
-            }), /*#__PURE__*/_jsx(ProgressBadge, {
-              completions: botCompletions
-            })]
-          })
-        })]
-      })
-    }), /*#__PURE__*/_jsxs(OverflowMenu, {
-      anchorEl: anchorEl,
-      handleClose: handleCloseMenu,
-      children: [/*#__PURE__*/_jsxs(MenuItem, {
-        onClick: () => setIsSelectClassroomDialogOpen(true),
-        disabled: !isCreator && !(botCompletions > 0),
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(Timeline, {})
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: t(isCreator ? "view_activity" : "show_progress")
-        })]
-      }), !isLargeScreen && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs(MenuItem, {
-          "data-cy": "edit-bot",
-          onClick: () => handleEditBot(bot),
-          disabled: !isCreator,
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(Create, {})
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: t("edit_bot")
-          })]
-        }), /*#__PURE__*/_jsxs(MenuItem, {
-          onClick: updateBotVisibility,
-          disabled: !isCreator,
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: isBotHiddenState ? /*#__PURE__*/_jsx(VisibilityOff, {}) : /*#__PURE__*/_jsx(Visibility, {})
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: isBotHiddenState ? t("show_bot") : t("hide_bot")
-          })]
-        })]
-      }), isCreator && handleDuplicateBot && /*#__PURE__*/_jsxs(MenuItem, {
-        "data-cy": "duplicate-bot",
-        onClick: () => handleDuplicateBot(bot),
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(CopyIcon, {})
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: t("create_duplicate")
-        })]
-      }), /*#__PURE__*/_jsxs(MenuItem, {
-        onClick: () => handleRemoveBot(bot),
-        disabled: !isCreator,
-        "data-cy": `${bot.botName}-remove-bot`,
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(Delete, {})
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: t("remove_bot")
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(SelectClassroom, {
-      t: t,
-      open: isSelectClassroomDialogOpen,
-      handleClose: () => setIsSelectClassroomDialogOpen(false),
-      title: t("select_a_classroom"),
-      teachClassrooms: teachClassrooms || [],
-      type: "bot",
-      courseId: courseId,
-      sectionId: sectionId,
-      topicId: topicId,
-      botId: bot.botId
-    })]
-  });
-}
-
-// ─── Exercises ────────────────────────────────────────────────────────────────
-
-function Exercises(props) {
-  const {
-    t = text => text,
-    isLoading,
-    phrases = [],
-    completions = [],
-    roleplays = [],
-    bots = [],
-    voices = [],
-    avatars = [],
-    hiddenExercises = [],
-    isMember,
-    isCreator,
-    courseId,
-    sectionId,
-    topicId,
-    handleCreateRoleplay,
-    handleCreateBot,
-    handleCreatePhraseList,
-    handleOpenPhraseList,
-    handleEditPhraseList,
-    handleUpdatePhraseList,
-    handleDeletePhraseList,
-    handleDuplicatePhraseList,
-    isBotHidden,
-    disablePadding,
-    topicProgress = [],
-    handleDuplicateBot,
-    handleToggleExerciseVisibility,
-    handleDuplicateRoleplay,
-    handleEditBot,
-    handlePlayBot,
-    handleShareRoleplay,
-    handleShareBot,
-    handleEditRoleplay,
-    handleUploadBotExerciseImage,
-    handleReportProblem,
-    teachClassrooms,
-    updateRoleplays,
-    handleUpdateRoleplay,
-    updateBots,
-    updatePhraseLists,
-    courseSettings,
-    parentClassroom,
-    isChallengeModeStudent,
-    topicInfo
-  } = props;
-  const params = useParams();
-  const {
-    classroomId
-  } = params;
-  const navigate = useNavigate();
-  const location = useLocation();
-  const searchParams = searchStringToObj(location.search);
-  const assignmentId = searchParams.assignmentId;
-  const theme = useTheme();
-  const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
-  const [showPhrasesOverflowMenu, setShowPhrasesOverflowMenu] = useState(null);
-  const [showRoleplaysOverflowMenu, setShowRoleplaysOverflowMenu] = useState(null);
-  const [showBotsOverflowMenu, setShowBotsOverflowMenu] = useState(null);
-  const [hiddenExercisesState, setHiddenExercisesState] = useState(hiddenExercises);
-  const [isCreatePhraseListOpen, setIsCreatePhraseListOpen] = useState(false);
-  // Opens the editor immediately after a phrase list is created (standalone mode only)
-  const [newlyCreatedPhraseList, setNewlyCreatedPhraseList] = useState(null);
-  const [isPhrasesDropdownOpen, setIsPhrasesDropdownOpen] = useState(true);
-  const [isRoleplayDropdownOpen, setIsRoleplayDropdownOpen] = useState(true);
-  const [isChatbotDropdownOpen, setIsChatbotDropdownOpen] = useState(true);
-  const [isSelectClassroomDialogOpen, setIsSelectClassroomDialogOpen] = useState(false);
-  const [type, setType] = useState("");
-  const addSearchParams = newParams => {
-    navigate({
-      ...location,
-      search: objToSearchString({
-        ...searchParams,
-        ...newParams
-      })
-    });
-  };
-  const removeSearchParams = (keys = []) => {
-    for (const key of keys) {
-      key in searchParams && delete searchParams[key];
-    }
-    navigate({
-      ...location,
-      search: objToSearchString(searchParams)
-    });
-  };
-  const isEmptyArray = arr => !Array.isArray(arr) || !arr.length;
-  const numberOfRoleplayCompletions = (completions, roleplayId) => {
-    if (isEmptyArray(completions)) return 0;
-    return completions.filter(c => c.exercise.startsWith("roleplay") && c.roleplayId === roleplayId).length;
-  };
-  const numberOfBotCompletions = (completions, botId) => {
-    if (isEmptyArray(completions)) return 0;
-    return completions.filter(c => c.exercise === "bot" && c.botId === botId).length;
-  };
-  const numberOfPhraseListCompletions = (completions, phraseListId) => {
-    if (isEmptyArray(completions)) return 0;
-    return completions.filter(c => ["translation", "listening", "pronunciation"].includes(c.exercise) && (c.phraseListId === phraseListId || !c.phraseListId && phraseListId?.startsWith('leg-'))).length;
-  };
-
-  // ── phraseLists drag state ──
-  const [phraseListsArray, setPhraseListsArray] = useState([]);
-  useEffect(() => {
-    if (topicInfo?.phraseLists && Array.isArray(topicInfo.phraseLists)) {
-      setPhraseListsArray([...topicInfo.phraseLists].sort((a, b) => (a.idx || 0) - (b.idx || 0)));
-    }
-  }, [JSON.stringify(topicInfo?.phraseLists)]);
-  const onDropPhraseList = () => {
-    if (updatePhraseLists) updatePhraseLists(phraseListsArray);
-  };
-  const movePhraseList = useCallback((dragIndex, hoverIndex) => {
-    const dragItem = phraseListsArray[dragIndex];
-    setPhraseListsArray(update(phraseListsArray, {
-      $splice: [[dragIndex, 1], [hoverIndex, 0, {
-        ...dragItem,
-        idx: hoverIndex
-      }]]
-    }));
-  }, [phraseListsArray]);
-
-  // ── roleplays drag state ──
-  const [roleplaysArray, setRoleplaysArray] = useState([]);
-  useEffect(() => {
-    if (roleplays && Array.isArray(roleplays)) {
-      setRoleplaysArray([...roleplays].sort((a, b) => a.idx - b.idx));
-    }
-  }, [JSON.stringify(roleplays)]);
-  const onDropRoleplay = () => updateRoleplays(roleplaysArray);
-  const moveRoleplay = useCallback((dragIndex, hoverIndex) => {
-    const dragRoleplay = roleplaysArray[dragIndex];
-    setRoleplaysArray(update(roleplaysArray, {
-      $splice: [[dragIndex, 1], [hoverIndex, 0, {
-        ...dragRoleplay,
-        idx: hoverIndex
-      }]]
-    }));
-  }, [roleplaysArray]);
-
-  // ── bots drag state ──
-  const [botsArray, setBotsArray] = useState([]);
-  useEffect(() => {
-    if (bots && Array.isArray(bots)) {
-      let sorted = [...bots].sort((a, b) => a.idx - b.idx);
-      if (!isChallengeModeStudent && !isCreator && !parentClassroom?.isCreator) {
-        sorted = sorted.filter(bot => !bot.isChallengeBot);
-      }
-      setBotsArray(sorted);
-    }
-  }, [JSON.stringify(bots), isChallengeModeStudent, isCreator, parentClassroom?.isCreator]);
-  const onDropBot = () => updateBots(botsArray);
-  const moveBot = useCallback((dragIndex, hoverIndex) => {
-    const dragBot = botsArray[dragIndex];
-    setBotsArray(update(botsArray, {
-      $splice: [[dragIndex, 1], [hoverIndex, 0, {
-        ...dragBot,
-        idx: hoverIndex
-      }]]
-    }));
-  }, [botsArray]);
-  const handleSetHiddenExercisesState = (exercise, action) => {
-    const next = action === "hide" ? [...hiddenExercisesState, exercise] : hiddenExercisesState.filter(e => e !== exercise);
-    setHiddenExercisesState(next);
-  };
-  const renderExerciseButtons = (exercise, tooltipShowText, tooltipHideText, iconLabel) => {
-    if (!isCreator) return null;
-    const exerciseIsHidden = hiddenExercisesState?.includes(exercise);
-    const action = exerciseIsHidden ? "show" : "hide";
-    return /*#__PURE__*/_jsx(Tooltip, {
-      title: exerciseIsHidden ? t(tooltipShowText) : t(tooltipHideText),
-      children: /*#__PURE__*/_jsx("span", {
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: () => {
-            handleSetHiddenExercisesState(exercise, action);
-            handleToggleExerciseVisibility(exercise, action);
-          },
-          "aria-label": iconLabel,
-          disabled: !isCreator,
-          children: exerciseIsHidden ? /*#__PURE__*/_jsx(VisibilityOff, {}) : /*#__PURE__*/_jsx(Visibility, {})
-        })
-      })
-    });
-  };
-  const renderMenuButton = (exercise, tooltipShowText, tooltipHideText, iconLabel) => {
-    if (!isCreator || isLargeScreen) return null;
-    const exerciseIsHidden = hiddenExercisesState.includes(exercise);
-    const action = exerciseIsHidden ? "show" : "hide";
-    return /*#__PURE__*/_jsxs(MenuItem, {
-      onClick: () => {
-        handleSetHiddenExercisesState(exercise, action);
-        handleToggleExerciseVisibility(exercise, action);
-      },
-      "aria-label": iconLabel,
-      disabled: !isCreator,
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: exerciseIsHidden ? /*#__PURE__*/_jsx(VisibilityOff, {}) : /*#__PURE__*/_jsx(Visibility, {})
-      }), /*#__PURE__*/_jsx(ListItemText, {
-        children: exerciseIsHidden ? t(tooltipShowText) : t(tooltipHideText)
-      })]
-    });
-  };
-  const renderCollapseButton = (open, loading, onToggle, label) => /*#__PURE__*/_jsx(Tooltip, {
-    title: open ? t("hide") : t("expand"),
-    children: /*#__PURE__*/_jsx(IconButton, {
-      disabled: loading,
-      onClick: onToggle,
-      "aria-expanded": open,
-      "aria-label": `${label} Dropdown Button`,
-      children: open ? /*#__PURE__*/_jsx(ExpandLess, {
-        sx: {
-          fontSize: "larger"
-        }
-      }) : /*#__PURE__*/_jsx(ExpandMore, {
-        sx: {
-          fontSize: "larger"
-        }
-      })
-    })
-  });
-  const hasPhrasesContent = phraseListsArray.length > 0;
-  const renderPhrasesExerciseItem = () => {
-    if (!isCreator && hiddenExercisesState.includes("phrases")) return null;
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(ListItem, {
-        disablePadding: true,
-        secondaryAction: /*#__PURE__*/_jsxs(_Fragment, {
-          children: [isLargeScreen && renderExerciseButtons("phrases", "show_phrases_exercise", "hide_phrases_exercise", "Toggle Phrases Exercise Visibility"), isCreator && !isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-            title: t("more_options"),
-            children: /*#__PURE__*/_jsx("span", {
-              children: /*#__PURE__*/_jsx(IconButton, {
-                onClick: e => setShowPhrasesOverflowMenu(e.currentTarget),
-                "aria-expanded": Boolean(showPhrasesOverflowMenu),
-                children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-              })
-            })
-          }), (isCreator || hasPhrasesContent) && renderCollapseButton(isPhrasesDropdownOpen, isLoading, () => setIsPhrasesDropdownOpen(v => !v), "Phrases")]
-        }),
-        children: /*#__PURE__*/_jsxs(ListItemButton, {
-          "data-cy": "phrases-exercise",
-          "aria-expanded": isPhrasesDropdownOpen,
-          disabled: !isCreator && !hasPhrasesContent,
-          onClick: () => {
-            if (!isCreator && !hasPhrasesContent) return;
-            setIsPhrasesDropdownOpen(v => !v);
-          },
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(MenuBookIcon, {})
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: t("phrases") || "Phrases",
-            secondary: /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(Typography, {
-                variant: "body2",
-                gutterBottom: !isPhrasesDropdownOpen && hasPhrasesContent,
-                children: t("phrases_exercise_desc") || "Practice key phrases you'll use in conversations."
-              }), !isPhrasesDropdownOpen && hasPhrasesContent && /*#__PURE__*/_jsx(Collapse, {
-                in: true,
-                children: /*#__PURE__*/_jsx(ExerciseAvatarGroup, {
-                  max: 3,
-                  children: phraseListsArray.filter(pl => !pl.isPhraseListHidden).map((pl, idx) => /*#__PURE__*/_jsx(Avatar, {
-                    alt: "",
-                    src: pl.picture || PlaceholderImages.roleplay
-                  }, idx))
-                })
-              })]
-            })
-          })]
-        })
-      }), /*#__PURE__*/_jsx(OverflowMenu, {
-        anchorEl: showPhrasesOverflowMenu,
-        handleClose: () => setShowPhrasesOverflowMenu(null),
-        children: renderMenuButton("phrases", "show_phrases_exercise", "hide_phrases_exercise", "Toggle Phrases Exercise Visibility")
-      }), /*#__PURE__*/_jsx(Collapse, {
-        component: "li",
-        in: isPhrasesDropdownOpen,
-        timeout: "auto",
-        unmountOnExit: true,
-        children: /*#__PURE__*/_jsxs(List, {
-          disablePadding: true,
-          children: [phraseListsArray.map((phraseList, idx) => /*#__PURE__*/_jsx(PhraseListRow, {
-            phraseList: phraseList,
-            completions: completions,
-            numberOfPhraseListCompletions: numberOfPhraseListCompletions,
-            handleDeletePhraseList: handleDeletePhraseList,
-            handleUpdatePhraseList: handleUpdatePhraseList,
-            handleDuplicatePhraseList: handleDuplicatePhraseList,
-            handleOpenPhraseList: handleOpenPhraseList,
-            handleEditPhraseList: handleEditPhraseList,
-            isCreator: isCreator,
-            isMember: isMember,
-            topicProgress: topicProgress,
-            isLargeScreen: isLargeScreen,
-            courseId: courseId,
-            sectionId: sectionId,
-            topicId: topicId,
-            teachClassrooms: teachClassrooms,
-            phraseListIndex: idx,
-            movePhraseList: movePhraseList,
-            onDropPhraseList: onDropPhraseList,
-            t: t
-          }, phraseList.phraseListId || idx)), isCreator && /*#__PURE__*/_jsxs(ListItemButton, {
-            "data-cy": "add-phrase-list",
-            id: "create-phrase-list",
-            sx: sxNested,
-            onClick: () => setIsCreatePhraseListOpen(true),
-            role: "link",
-            children: [/*#__PURE__*/_jsx(ListItemIcon, {
-              children: /*#__PURE__*/_jsx(Add, {
-                sx: sxGreenColor
-              })
-            }), /*#__PURE__*/_jsx(ListItemText, {
-              primary: t("add_new")
-            })]
-          })]
-        })
-      }), /*#__PURE__*/_jsx(CreatePhraseGroupDialog, {
-        open: isCreatePhraseListOpen,
-        handleClose: () => setIsCreatePhraseListOpen(false),
-        handleCreate: async ({
-          phraseGroupName,
-          description
-        }) => await handleCreatePhraseList({
-          phraseListName: phraseGroupName,
-          description
-        }),
-        onCreated: async (phraseList, picture) => {
-          setIsCreatePhraseListOpen(false);
-          if (!phraseList) return;
-          if (picture && handleUpdatePhraseList) {
-            await handleUpdatePhraseList(phraseList.phraseListId, {
-              picture
-            });
-          }
-          if (handleEditPhraseList) {
-            handleEditPhraseList({
-              ...phraseList,
-              picture
-            });
-          } else {
-            setNewlyCreatedPhraseList({
-              ...phraseList,
-              picture
-            });
-          }
-        },
-        t: t,
-        fileSizeLimit: props.fileSizeLimit,
-        verificationStatus: props.verificationStatus
-      }), !handleOpenPhraseList && /*#__PURE__*/_jsx(PhraseListEditorDialog, {
-        open: Boolean(newlyCreatedPhraseList),
-        handleClose: () => setNewlyCreatedPhraseList(null),
-        initialValues: newlyCreatedPhraseList || {},
-        t: t,
-        phrases: phrases,
-        isCreator: isCreator,
-        isMember: isMember,
-        courseId: courseId,
-        sectionId: sectionId,
-        topicId: topicId,
-        learnLang: props.learnLang,
-        forLang: props.forLang,
-        voices: voices,
-        handleSpeak: props.handleSpeak,
-        handleTranslate: props.handleTranslate,
-        userAttributes: props.userAttributes,
-        learnLangCharacters: props.learnLangCharacters,
-        forLangCharacters: props.forLangCharacters,
-        fileSizeLimit: props.fileSizeLimit,
-        subscription: props.subscription,
-        makeChatGptApiRequest: props.makeChatGptApiRequest,
-        siteLanguage: props.siteLanguage,
-        isUserInternal: props.isUserInternal,
-        verificationStatus: props.verificationStatus,
-        uploadAudio: props.uploadAudio,
-        handleSpreadsheetSaveChanges: props.handleSpreadsheetSaveChanges,
-        topicName: props.topicName,
-        validatePhraseRecognition: props.validatePhraseRecognition,
-        difficulty: props.difficulty,
-        topicGoal: props.topicGoal,
-        handleUpdatePhrases: props.handleUpdatePhrases,
-        onSubmit: (values, helpers) => handleUpdatePhraseList && handleUpdatePhraseList(newlyCreatedPhraseList?.phraseListId, values, helpers)
-      })]
-    });
-  };
-  const renderRoleplaysExerciseItem = () => {
-    if (!isCreator && hiddenExercisesState.includes("roleplays")) return null;
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(ListItem, {
-        disablePadding: true,
-        secondaryAction: /*#__PURE__*/_jsxs(_Fragment, {
-          children: [isLargeScreen && renderExerciseButtons("roleplays", "show_roleplays_exercise", "hide_roleplays_exercise", "Toggle Roleplays"), isCreator && !isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-            title: t("more_options"),
-            children: /*#__PURE__*/_jsx("span", {
-              children: /*#__PURE__*/_jsx(IconButton, {
-                onClick: e => setShowRoleplaysOverflowMenu(e.currentTarget),
-                "aria-expanded": Boolean(showRoleplaysOverflowMenu),
-                children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-              })
-            })
-          }), (isCreator || roleplays.length > 0) && renderCollapseButton(isRoleplayDropdownOpen, isLoading, () => setIsRoleplayDropdownOpen(v => !v), "Roleplays")]
-        }),
-        children: /*#__PURE__*/_jsxs(ListItemButton, {
-          "data-cy": "roleplay-exercise",
-          "aria-expanded": isRoleplayDropdownOpen,
-          disabled: !isCreator && roleplays.length === 0,
-          onClick: () => {
-            if (!isCreator && roleplays.length === 0) return;
-            setIsRoleplayDropdownOpen(v => !v);
-          },
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(ForumIcon, {})
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: t("roleplays"),
-            secondary: /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(Typography, {
-                variant: "body2",
-                gutterBottom: !isRoleplayDropdownOpen && roleplays.length > 0,
-                children: t("roleplay_exercise_desc")
-              }), !isRoleplayDropdownOpen && roleplays.length > 0 && /*#__PURE__*/_jsx(Collapse, {
-                in: true,
-                children: /*#__PURE__*/_jsx(ExerciseAvatarGroup, {
-                  max: 3,
-                  children: roleplays.filter(r => !r.isRoleplayHidden).map((roleplay, idx) => /*#__PURE__*/_jsx(Avatar, {
-                    alt: "",
-                    src: roleplay.picture || roleplay.actor1?.picture || roleplay.actor2?.picture || PlaceholderImages.roleplay
-                  }, idx))
-                })
-              })]
-            })
-          })]
-        })
-      }), /*#__PURE__*/_jsx(OverflowMenu, {
-        anchorEl: showRoleplaysOverflowMenu,
-        handleClose: () => setShowRoleplaysOverflowMenu(null),
-        children: renderMenuButton("roleplays", "show_roleplays_exercise", "hide_roleplays_exercise", "Toggle Roleplays")
-      }), /*#__PURE__*/_jsx(Collapse, {
-        component: "li",
-        in: isRoleplayDropdownOpen,
-        timeout: "auto",
-        unmountOnExit: true,
-        children: /*#__PURE__*/_jsxs(List, {
-          disablePadding: true,
-          children: [roleplaysArray.map((roleplay, idx) => /*#__PURE__*/_jsx(RoleplayListItem, {
-            handleDuplicateRoleplay: handleDuplicateRoleplay,
-            roleplay: roleplay,
-            numberOfRoleplayCompletions: numberOfRoleplayCompletions,
-            voices: voices,
-            avatars: avatars,
-            addSearchParams: addSearchParams,
-            removeSearchParams: removeSearchParams,
-            searchParams: searchParams,
-            isLargeScreen: isLargeScreen,
-            handleShareRoleplay: handleShareRoleplay,
-            handleEditRoleplay: handleEditRoleplay,
-            handleReportProblem: handleReportProblem,
-            roleplayIndex: idx,
-            moveRoleplay: moveRoleplay,
-            onDropRoleplay: onDropRoleplay,
-            handleUpdateRoleplay: handleUpdateRoleplay,
-            classroomId: classroomId,
-            assignment: assignmentId,
-            parentClassroom: parentClassroom,
-            ...props
-          }, roleplay.roleplayId)), isCreator && /*#__PURE__*/_jsxs(ListItemButton, {
-            "data-cy": "add-roleplay-exercise",
-            id: "create-roleplay",
-            sx: sxNested,
-            onClick: handleCreateRoleplay,
-            role: "link",
-            children: [/*#__PURE__*/_jsx(ListItemIcon, {
-              children: /*#__PURE__*/_jsx(Add, {
-                sx: sxGreenColor
-              })
-            }), /*#__PURE__*/_jsx(ListItemText, {
-              primary: t("add_new")
-            })]
-          })]
-        })
-      })]
-    });
-  };
-  const renderChatbotsExerciseItem = () => {
-    if (!isCreator && hiddenExercisesState.includes("chatbots")) return null;
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(ListItem, {
-        disablePadding: true,
-        secondaryAction: /*#__PURE__*/_jsxs(_Fragment, {
-          children: [isLargeScreen && renderExerciseButtons("chatbots", "show_chatbots_exercise", "hide_chatbots_exercise", "Toggle Chatbots"), isCreator && !isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-            title: t("more_options"),
-            children: /*#__PURE__*/_jsx("span", {
-              children: /*#__PURE__*/_jsx(IconButton, {
-                onClick: e => setShowBotsOverflowMenu(e.currentTarget),
-                "aria-expanded": Boolean(showBotsOverflowMenu),
-                children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-              })
-            })
-          }), (isCreator || bots.length > 0) && renderCollapseButton(isChatbotDropdownOpen, isLoading, () => setIsChatbotDropdownOpen(v => !v), "Chatbots")]
-        }),
-        children: /*#__PURE__*/_jsxs(ListItemButton, {
-          "data-cy": "bot-exercise",
-          "aria-expanded": isChatbotDropdownOpen,
-          disabled: !isCreator && bots.length === 0,
-          onClick: () => {
-            if (!isCreator && bots.length === 0) return;
-            setIsChatbotDropdownOpen(v => !v);
-          },
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(Face, {})
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: t("chatbots"),
-            secondary: /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(Typography, {
-                variant: "body2",
-                gutterBottom: !isChatbotDropdownOpen && bots.length > 0,
-                children: t("chatbot_exercise_desc")
-              }), !isChatbotDropdownOpen && bots.length > 0 && /*#__PURE__*/_jsx(Collapse, {
-                in: true,
-                children: /*#__PURE__*/_jsx(ExerciseAvatarGroup, {
-                  max: 3,
-                  children: botsArray.filter(b => !b.isBotHidden).map((bot, idx) => /*#__PURE__*/_jsx(Avatar, {
-                    src: bot.picture || bot.botAvatar || PlaceholderImages.bot,
-                    alt: "",
-                    "aria-label": bot.botName
-                  }, idx))
-                })
-              })]
-            })
-          })]
-        })
-      }), /*#__PURE__*/_jsx(OverflowMenu, {
-        anchorEl: showBotsOverflowMenu,
-        handleClose: () => setShowBotsOverflowMenu(null),
-        children: renderMenuButton("chatbots", "show_chatbots_exercise", "hide_chatbots_exercise", "Toggle Chatbots")
-      }), /*#__PURE__*/_jsx(Collapse, {
-        component: "li",
-        in: isChatbotDropdownOpen,
-        timeout: "auto",
-        unmountOnExit: true,
-        children: /*#__PURE__*/_jsxs(List, {
-          disablePadding: true,
-          children: [botsArray.map((bot, idx) => /*#__PURE__*/_jsx(BotListItem, {
-            bot: bot,
-            handleDuplicateBot: handleDuplicateBot,
-            isBotHidden: isBotHidden,
-            numberOfBotCompletions: numberOfBotCompletions,
-            voices: voices,
-            avatars: avatars,
-            addSearchParams: addSearchParams,
-            removeSearchParams: removeSearchParams,
-            searchParams: searchParams,
-            isLargeScreen: isLargeScreen,
-            handleEditBot: handleEditBot,
-            handlePlayBot: handlePlayBot,
-            handleUploadBotExerciseImage: handleUploadBotExerciseImage,
-            handleReportProblem: handleReportProblem,
-            teachClassrooms: teachClassrooms,
-            botIndex: idx,
-            moveBot: moveBot,
-            onDropBot: onDropBot,
-            parentClassroom: parentClassroom,
-            ...props
-          }, bot.botId)), isCreator && /*#__PURE__*/_jsxs(ListItemButton, {
-            "data-cy": "add-bot-exercise",
-            id: "create-bot",
-            sx: sxNested,
-            onClick: handleCreateBot,
-            role: "link",
-            children: [/*#__PURE__*/_jsx(ListItemIcon, {
-              children: /*#__PURE__*/_jsx(Add, {
-                sx: sxGreenColor
-              })
-            }), /*#__PURE__*/_jsx(ListItemText, {
-              primary: t("add_new")
-            })]
-          })]
-        })
-      })]
-    });
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(List, {
-      component: "ul",
-      sx: sxRoot,
-      disablePadding: disablePadding,
-      children: [renderPhrasesExerciseItem(), renderRoleplaysExerciseItem(), renderChatbotsExerciseItem()]
-    }), /*#__PURE__*/_jsx(SelectClassroom, {
-      t: t,
-      open: isSelectClassroomDialogOpen,
-      handleClose: () => setIsSelectClassroomDialogOpen(false),
-      title: t("select_a_classroom"),
-      teachClassrooms: props.teachClassrooms || [],
-      type: type,
-      courseId: courseId,
-      sectionId: sectionId,
-      topicId: topicId
-    })]
-  });
-}
-Exercises.propTypes = {};
-export const UnStyledComponent = Exercises;
-export default Exercises;