@nualang/nualang-ui-components 0.1.1419 → 0.1.1420

package/dist/Dialogs/ResponsiveDialog/ResponsiveDialog.js

@@ -28,6 +28,10 @@ const Transition = /*#__PURE__*/forwardRef(function Transition(props, ref) {
 export default function ResponsiveDialog({
   open,
   handleClose,
+  // Backdrop-click / Escape handler. Defaults to `handleClose`, but can be
+  // supplied on its own so a dialog can be dismissable without rendering the
+  // built-in footer Close button (which `handleClose` drives).
+  onClose,
   handleSubmit,
   t = text => text,
   submitText,
@@ -62,7 +66,7 @@ export default function ResponsiveDialog({
     fullWidth: fullWidth,
     maxWidth: maxWidth,
     open: open,
-    onClose: handleClose,
+    onClose: onClose || handleClose,
     "aria-label": dialogTitle,
     transitionDuration: transitionDuration,
     keepMounted: keepDialogMounted,

package/dist/Dialogs/SelectExercise/SelectExercise.js

@@ -1,46 +1,421 @@
-import { useState } from "react";
+import { useState, useMemo, useEffect } from "react";
+import { Box, Typography, Button } from "@mui/material";
+import { makeStyles } from "tss-react/mui";
+import MenuBookIcon from "@mui/icons-material/MenuBook";
+import ForumIcon from "@mui/icons-material/Forum";
+import PlaylistAddCheckIcon from "@mui/icons-material/PlaylistAddCheck";
+import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
+import HearingIcon from "@mui/icons-material/Hearing";
+import ExtensionIcon from "@mui/icons-material/Extension";
+import EditNoteIcon from "@mui/icons-material/EditNote";
+import LiveTvIcon from "@mui/icons-material/LiveTv";
+import AutoStoriesIcon from "@mui/icons-material/AutoStories";
 import CourseSelection from "../../Lists/CourseSelection/CourseSelection";
 import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import { Box } from "@mui/system";
-import { DialogContentText } from "@mui/material";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  content: {
+    padding: 0
+  }
+}));
+const GAME_TYPES = [{
+  id: "translation",
+  labelKey: "translation",
+  Icon: SwapHorizIcon,
+  needsDefinitions: false
+}, {
+  id: "listening",
+  labelKey: "listening",
+  Icon: HearingIcon,
+  needsDefinitions: false
+}, {
+  id: "meaning",
+  labelKey: "meaning",
+  Icon: ExtensionIcon,
+  needsDefinitions: true
+}, {
+  id: "meaning-read-and-write",
+  labelKey: "meaning_read_write",
+  Icon: EditNoteIcon,
+  needsDefinitions: true
+}];
+
+// The single game mode for scenarios, shown in the footer like the phrase-list
+// exercise toggle.
+const STORY_GAME_TYPE = {
+  id: "roleplay-story",
+  labelKey: "roleplay-story",
+  Icon: AutoStoriesIcon
+};
+
+// Fisher-Yates in-place shuffle (inlined to avoid pulling the utils barrel,
+// which imports RiveScript, into the dialog bundle).
+function shuffleInPlace(array) {
+  for (let i = array.length - 1; i > 0; i -= 1) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+// Merge every selected list's phrases into one pool, tagging each phrase with
+// its source list so the game can later draw evenly across lists, and dropping
+// exact-duplicate phrase strings.
+function dedupeMergedPhrases(lists) {
+  const seen = new Set();
+  const out = [];
+  lists.forEach(list => {
+    (list.phrases || []).forEach(p => {
+      const key = (p?.phrase || "").trim().toLowerCase();
+      if (key && seen.has(key)) return;
+      if (key) seen.add(key);
+      out.push({
+        ...p,
+        sourceListId: list.phraseListId
+      });
+    });
+  });
+  return out;
+}
+function mergePhrases(lists) {
+  // Shuffle the merged pool by default so lists interleave rather than play in
+  // per-list blocks (the waiting-room game start reshuffles too).
+  return shuffleInPlace(dedupeMergedPhrases(lists));
+}
 function SelectExercise({
   t = text => text,
   open,
   handleClose,
-  courses,
+  courses = [],
   getCourseSections,
-  getRoleplays,
   getPhraseLists,
   handleCreateGame,
   username,
-  courseSectionTopicId = ""
+  courseSectionTopicId = "",
+  initialSourceType = "phrases"
 }) {
-  const [isExerciseSelected, setIsExerciseSelected] = useState(false);
+  const {
+    classes
+  } = useStyles();
+  const [sourceType, setSourceType] = useState(initialSourceType);
+  // Map<phraseListId, enrichedList> — keeps the phrase counts and definition
+  // flags without re-fetching, order-independent (the pool is shuffled anyway).
+  const [selectedLists, setSelectedLists] = useState(() => new Map());
+  const [selectedScenario, setSelectedScenario] = useState(null);
+  const [gameType, setGameType] = useState("translation");
+
+  // Selection is one-off per game; reset every time the dialog opens.
+  useEffect(() => {
+    if (open) {
+      setSourceType(initialSourceType);
+      setSelectedLists(new Map());
+      setSelectedScenario(null);
+      setGameType("translation");
+    }
+  }, [open]);
+  const isPhrases = sourceType === "phrases";
+  const togglePhraseList = list => {
+    setSelectedLists(prev => {
+      const next = new Map(prev);
+      if (next.has(list.phraseListId)) next.delete(list.phraseListId);else next.set(list.phraseListId, list);
+      return next;
+    });
+  };
+  const toggleTopicAll = lists => {
+    setSelectedLists(prev => {
+      const next = new Map(prev);
+      const allSelected = lists.every(l => next.has(l.phraseListId));
+      lists.forEach(l => {
+        if (allSelected) next.delete(l.phraseListId);else next.set(l.phraseListId, l);
+      });
+      return next;
+    });
+  };
+  const selectedListsArr = useMemo(() => [...selectedLists.values()], [selectedLists]);
+  // Count the deduped merged pool (matching what actually gets played) when the
+  // phrases are loaded; otherwise fall back to the sum of the lists' counts.
+  const totalPhrases = useMemo(() => {
+    const allHavePhrases = selectedListsArr.every(l => Array.isArray(l.phrases));
+    return allHavePhrases ? dedupeMergedPhrases(selectedListsArr).length : selectedListsArr.reduce((n, l) => n + (l.phraseCount || 0), 0);
+  }, [selectedListsArr]);
+  const allHaveDefinitions = selectedListsArr.length > 0 && selectedListsArr.every(l => l.hasDefinitions);
+  const availableGameTypes = GAME_TYPES.filter(g => !g.needsDefinitions || allHaveDefinitions);
+  const effectiveGameType = availableGameTypes.some(g => g.id === gameType) ? gameType : availableGameTypes[0]?.id;
+
+  // Footer exercise segments + count are mode-aware: phrase lists show the game
+  // types and "n lists · n phrases"; scenarios show a single Story mode and the
+  // selected scenario's message count.
+  const footerGameTypes = isPhrases ? availableGameTypes : [STORY_GAME_TYPE];
+  const activeFooterGameType = isPhrases ? effectiveGameType : STORY_GAME_TYPE.id;
+  const canPlay = isPhrases ? selectedListsArr.length > 0 : !!selectedScenario;
+  const handlePlay = () => {
+    if (!canPlay) return;
+    if (isPhrases) {
+      const first = selectedListsArr[0];
+      handleCreateGame({
+        courseId: first.courseId,
+        courseSectionTopicId: first.courseSectionTopicId,
+        exercise: effectiveGameType,
+        phraseListIds: selectedListsArr.map(l => l.phraseListId),
+        // Hydrated list metadata for the waiting room's source strip.
+        phraseLists: selectedListsArr.map(l => ({
+          phraseListId: l.phraseListId,
+          phraseListName: l.phraseListName,
+          picture: l.picture || null,
+          phraseCount: l.phraseCount,
+          topicName: l.topicName ?? "",
+          courseSectionTopicId: l.courseSectionTopicId ?? null,
+          topicVideoUrl: l.topicVideoUrl ?? null
+        })),
+        phrases: mergePhrases(selectedListsArr),
+        shuffle: true,
+        timer: 30,
+        answerOption: 0,
+        topicName: first.topicName ?? ""
+      });
+    } else {
+      handleCreateGame({
+        courseSectionTopicId: selectedScenario.courseSectionTopicId,
+        exercise: "roleplay-story",
+        roleplayId: selectedScenario.roleplayId,
+        timer: 30,
+        answerOption: 0,
+        topicName: selectedScenario.topicName ?? ""
+      });
+    }
+  };
+  const sourceTab = active => ({
+    display: "flex",
+    alignItems: "center",
+    gap: 0.75,
+    px: 2,
+    py: 1,
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: "pointer",
+    ...(active ? {
+      color: "primary.contrastText",
+      backgroundColor: "primary.main"
+    } : {
+      color: "text.secondary",
+      backgroundColor: "background.paper"
+    })
+  });
+  const countLabel = isPhrases ? selectedListsArr.length ? t("lists_and_phrases_selected", {
+    lists: selectedListsArr.length,
+    phrases: totalPhrases,
+    count: selectedListsArr.length
+  }) : t("no_lists_selected") : selectedScenario ? t("scenario_selected") : t("no_scenario_selected");
   return /*#__PURE__*/_jsxs(ResponsiveDialog, {
     open: open,
-    handleClose: handleClose,
+    onClose: handleClose,
     dialogTitle: t("play_live"),
     maxWidth: "md",
-    children: [/*#__PURE__*/_jsx(DialogContentText, {
-      children: t("live_dialog_description")
+    dialogContentClassName: classes.content,
+    children: [/*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 3,
+        flexWrap: "wrap",
+        px: 3,
+        pt: 1
+      },
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "flex",
+          border: "1px solid",
+          borderColor: "divider",
+          borderRadius: 1,
+          overflow: "hidden",
+          flex: "none"
+        },
+        children: [/*#__PURE__*/_jsxs(Box, {
+          role: "button",
+          tabIndex: 0,
+          "aria-pressed": isPhrases,
+          onClick: () => setSourceType("phrases"),
+          onKeyDown: e => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setSourceType("phrases");
+            }
+          },
+          sx: sourceTab(isPhrases),
+          children: [/*#__PURE__*/_jsx(MenuBookIcon, {
+            sx: {
+              fontSize: 18
+            }
+          }), t("source_type_phrase_lists")]
+        }), /*#__PURE__*/_jsxs(Box, {
+          role: "button",
+          tabIndex: 0,
+          "aria-pressed": !isPhrases,
+          onClick: () => setSourceType("scenarios"),
+          onKeyDown: e => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setSourceType("scenarios");
+            }
+          },
+          sx: sourceTab(!isPhrases),
+          children: [/*#__PURE__*/_jsx(ForumIcon, {
+            sx: {
+              fontSize: 18
+            }
+          }), t("source_type_scenarios")]
+        })]
+      })
     }), /*#__PURE__*/_jsx(Box, {
       sx: {
-        mt: 1
+        mt: 2,
+        px: 3,
+        pb: 2.5,
+        minHeight: 280
       },
       children: /*#__PURE__*/_jsx(CourseSelection, {
         courses: courses,
         getCourseSections: getCourseSections,
-        getRoleplays: getRoleplays,
         getPhraseLists: getPhraseLists,
         username: username,
-        handleCreateGame: handleCreateGame,
         t: t,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
         isDialogOpen: open,
+        sourceType: sourceType,
+        selectedListIds: selectedLists,
+        onTogglePhraseList: togglePhraseList,
+        onToggleTopicAll: toggleTopicAll,
+        selectedScenarioId: selectedScenario?.roleplayId || null,
+        onSelectScenario: setSelectedScenario,
         courseSectionTopicId: courseSectionTopicId
       })
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        position: "sticky",
+        bottom: 0,
+        borderTop: "1px solid",
+        borderColor: "divider",
+        backgroundColor: "background.default",
+        px: 3,
+        py: 1.5,
+        display: "flex",
+        flexDirection: "column",
+        gap: 1.5,
+        zIndex: 1
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          flexWrap: "wrap"
+        },
+        children: [/*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1
+          },
+          children: [isPhrases ? /*#__PURE__*/_jsx(PlaylistAddCheckIcon, {
+            sx: {
+              fontSize: 20,
+              color: "primary.main"
+            }
+          }) : /*#__PURE__*/_jsx(ForumIcon, {
+            sx: {
+              fontSize: 20,
+              color: "primary.main"
+            }
+          }), /*#__PURE__*/_jsx(Typography, {
+            sx: {
+              fontSize: 14,
+              fontWeight: 600,
+              color: "text.primary"
+            },
+            children: countLabel
+          })]
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            border: "1px solid",
+            borderColor: "divider",
+            borderRadius: 1,
+            overflow: "hidden",
+            backgroundColor: "background.paper"
+          },
+          children: footerGameTypes.map(g => {
+            const active = activeFooterGameType === g.id;
+            const {
+              Icon
+            } = g;
+            return /*#__PURE__*/_jsxs(Box, {
+              onClick: () => isPhrases && setGameType(g.id),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.75,
+                px: 1.5,
+                py: 1,
+                fontSize: 14,
+                cursor: isPhrases ? "pointer" : "default",
+                transition: "background-color 200ms cubic-bezier(0.4,0,0.2,1)",
+                ...(active ? {
+                  color: "primary.contrastText",
+                  backgroundColor: "primary.main",
+                  fontWeight: 600,
+                  ...(isPhrases ? {
+                    "&:hover": {
+                      backgroundColor: "primary.dark"
+                    }
+                  } : {})
+                } : {
+                  color: "text.secondary",
+                  "&:hover": {
+                    backgroundColor: "action.hover"
+                  }
+                })
+              },
+              children: [/*#__PURE__*/_jsx(Icon, {
+                sx: {
+                  fontSize: 18
+                }
+              }), t(g.labelKey)]
+            }, g.id);
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          gap: 1
+        },
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: handleClose,
+          color: "primary",
+          sx: {
+            fontWeight: 600
+          },
+          children: t("close")
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "contained",
+          onClick: handlePlay,
+          disabled: !canPlay,
+          startIcon: /*#__PURE__*/_jsx(LiveTvIcon, {}),
+          "data-cy": "play-live",
+          sx: {
+            fontWeight: 600,
+            borderRadius: "25px",
+            px: 2.25,
+            backgroundColor: "secondary.main",
+            "&:hover": {
+              backgroundColor: "secondary.dark"
+            }
+          },
+          children: t("play_live")
+        })]
+      })]
     })]
   });
 }

package/dist/Lists/CourseSelection/CourseSelection.js

@@ -3,27 +3,23 @@ import { List, ListItem, ListItemButton, ListItemText, Collapse, Avatar, Box, To
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import ExerciseSelection from "../ExerciseSelection/ExerciseSelection";
+import { topicHasScenario } from "../RoleplaySelection/RoleplaySelection";
 import { courses as courseQuerys } from "@nualang/nualang-api-and-queries/Queries";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Course({
   course,
   index,
   getCourseSections,
-  getRoleplays,
   getPhraseLists,
   username,
-  handleCreateGame,
   t,
-  isExerciseSelected,
-  setIsExerciseSelected,
   isDialogOpen,
-  handleSelectExercise,
-  selectedExercises,
-  useCase,
-  assignment,
-  handleStartExercise,
-  isAssignment,
-  isCreator,
+  sourceType,
+  selectedListIds,
+  onTogglePhraseList,
+  onToggleTopicAll,
+  selectedScenarioId,
+  onSelectScenario,
   courseSectionTopicId
 }) {
   const [open, setOpen] = useState(false);
@@ -32,7 +28,7 @@ function Course({
     return response;
   }, {
     courseId: course.courseId,
-    username: username,
+    username,
     filters: {
       limit: 1000
     }
@@ -40,12 +36,19 @@ function Course({
     enabled: !!course.courseId && isDialogOpen
   });
   useEffect(() => {
-    if (courseSectionTopicId.split("|")[0] === course.courseId) {
+    if (courseSectionTopicId?.split("|")[0] === course.courseId) {
       setOpen(true);
     }
   }, [courseSectionTopicId]);
   const courseSections = useMemo(() => sectionsQuery.isSuccess && Array.isArray(sectionsQuery.data.Items) && sectionsQuery.data.Items.length ? sectionsQuery.data.Items : [], [sectionsQuery.data, sectionsQuery.isSuccess]);
-  const isCourseEmpty = courseSections.length === 0 && !sectionsQuery.isLoading ? true : false;
+  const isCourseEmpty = courseSections.length === 0 && !sectionsQuery.isLoading;
+
+  // In scenarios mode, once this course's sections have loaded, hide the whole
+  // course if none of its topics have scenarios.
+  const hasScenarios = courseSections.some(sec => (sec.topics || []).some(tp => topicHasScenario(tp.roleplays)));
+  if (sourceType === "scenarios" && sectionsQuery.isSuccess && !hasScenarios) {
+    return null;
+  }
   return /*#__PURE__*/_jsxs(List, {
     disablePadding: true,
     children: [/*#__PURE__*/_jsx(Tooltip, {
@@ -54,7 +57,7 @@ function Course({
         disablePadding: true,
         children: /*#__PURE__*/_jsx(ListItemButton, {
           onClick: () => setOpen(!open),
-          disabled: isCourseEmpty || isExerciseSelected,
+          disabled: isCourseEmpty,
           children: /*#__PURE__*/_jsxs(Box, {
             sx: {
               display: "flex",
@@ -79,11 +82,11 @@ function Course({
               })]
             }), open ? /*#__PURE__*/_jsx(ExpandLessIcon, {
               sx: {
-                color: "#757575"
+                color: "text.secondary"
               }
             }) : /*#__PURE__*/_jsx(ExpandMoreIcon, {
               sx: {
-                color: "#757575"
+                color: "text.secondary"
               }
             })]
           })
@@ -95,25 +98,20 @@ function Course({
       unmountOnExit: true,
       children: /*#__PURE__*/_jsx(Box, {
         sx: {
-          ml: 3.5
+          ml: 7
         },
         children: /*#__PURE__*/_jsx(ExerciseSelection, {
           t: t,
           sections: courseSections,
           isLoading: sectionsQuery.isLoading,
-          handleCreateGame: handleCreateGame,
           courseId: course.courseId,
-          isExerciseSelected: isExerciseSelected,
-          setIsExerciseSelected: setIsExerciseSelected,
-          getRoleplays: getRoleplays,
           getPhraseLists: getPhraseLists,
-          handleSelectExercise: handleSelectExercise,
-          selectedExercises: selectedExercises,
-          useCase: useCase,
-          assignment: assignment,
-          handleStartExercise: handleStartExercise,
-          isAssignment: isAssignment,
-          isCreator: isCreator,
+          sourceType: sourceType,
+          selectedListIds: selectedListIds,
+          onTogglePhraseList: onTogglePhraseList,
+          onToggleTopicAll: onToggleTopicAll,
+          selectedScenarioId: selectedScenarioId,
+          onSelectScenario: onSelectScenario,
           courseSectionTopicId: courseSectionTopicId
         })
       })
@@ -121,44 +119,35 @@ function Course({
   }, index);
 }
 function CourseSelection({
-  courses,
+  courses = [],
   getCourseSections,
-  getRoleplays,
   getPhraseLists,
   username,
-  handleCreateGame,
   t,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  handleSelectExercise,
-  selectedExercises,
-  useCase,
-  assignment,
-  handleStartExercise,
-  isAssignment,
-  isCreator,
-  courseSectionTopicId,
-  ...otherProps
+  isDialogOpen,
+  sourceType,
+  selectedListIds,
+  onTogglePhraseList,
+  onToggleTopicAll,
+  selectedScenarioId,
+  onSelectScenario,
+  courseSectionTopicId
 }) {
   return /*#__PURE__*/_jsx("div", {
     children: courses.map((course, index) => /*#__PURE__*/_jsx(Course, {
       course: course,
       index: index,
       getCourseSections: getCourseSections,
-      getRoleplays: getRoleplays,
       getPhraseLists: getPhraseLists,
       username: username,
-      handleCreateGame: handleCreateGame,
       t: t,
-      isExerciseSelected: isExerciseSelected,
-      setIsExerciseSelected: setIsExerciseSelected,
-      handleSelectExercise: handleSelectExercise,
-      selectedExercises: selectedExercises,
-      useCase: useCase,
-      assignment: assignment,
-      handleStartExercise: handleStartExercise,
-      isAssignment: isAssignment,
-      isCreator: isCreator,
+      isDialogOpen: isDialogOpen,
+      sourceType: sourceType,
+      selectedListIds: selectedListIds,
+      onTogglePhraseList: onTogglePhraseList,
+      onToggleTopicAll: onToggleTopicAll,
+      selectedScenarioId: selectedScenarioId,
+      onSelectScenario: onSelectScenario,
       courseSectionTopicId: courseSectionTopicId
     }, course.courseId))
   });