@nualang/nualang-ui-components 0.1.1421 → 0.1.1422

package/dist/Exercises/Bot/Bot.js

@@ -101,7 +101,8 @@ function Bot({
   aiChatbotConversationHistory,
   isUserInternal,
   handleStudentMisuse,
-  username
+  username,
+  trackRecommendedEvent
 }) {
   const theme = useTheme();
   const {
@@ -121,6 +122,9 @@ function Bot({
     browserSupportsSpeechRecognition,
     clearAttemptAudio
   } = useRecognition({
+    trackRecommendedEvent,
+    exerciseName,
+    learnLang,
     openSnackbar
   });
   const {

package/dist/Lists/CourseOutline/CourseOutline.js

@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback, useRef } from "react";
 import { Link as RouterLink, useNavigate, useParams } from "react-router";
-import { ListSubheader, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, ListItemSecondaryAction, IconButton, Button, Collapse, Typography, Box, Tooltip, Menu, MenuItem, Avatar } from "@mui/material";
+import { ListSubheader, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, ListItemSecondaryAction, IconButton, Button, Collapse, Typography, Box, Tooltip, Menu, MenuItem, Avatar, Chip } from "@mui/material";
 import { useTheme, alpha } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";
 import CheckBox from "@mui/icons-material/CheckBox";
@@ -26,6 +26,7 @@ import CopyIcon from "@mui/icons-material/FileCopy";
 import ImageSearchIcon from "@mui/icons-material/ImageSearch";
 import Skeleton from "@mui/material/Skeleton";
 import OndemandVideoIcon from "@mui/icons-material/OndemandVideo";
+import DifficultyIcon from "@mui/icons-material/School";
 import ColorLinearProgress from "../../Misc/ColorLinearProgress/ColorLinearProgress";
 import { calcCompletions, calcPercentageCompletion } from "../../utils/index";
 import SelectClassroom from "../../Dialogs/SelectClassroom/SelectClassroom";
@@ -336,7 +337,10 @@ function Topic({
   sectionIndex,
   index,
   moveTopic,
+  moveTopicAcrossSections,
   onDropSection,
+  onMoveTopicToSection,
+  onCancelMove,
   disableDrag,
   classroomId,
   courseSettings,
@@ -376,14 +380,34 @@ function Topic({
   const [{
     handlerId
   }, drop] = useDrop({
-    type: `${sectionId}-topic`,
-    accept: `${sectionId}-topic`,
+    // A single shared type lets a topic be dropped into any section, not just
+    // its own. Cross-section vs within-section is disambiguated in `hover`.
+    accept: "topic",
+    collect: monitor => ({
+      handlerId: monitor.getHandlerId()
+    }),
     hover(item, monitor) {
       if (!ref.current) {
         return;
       }
-      const dragIndex = item.index;
       const hoverIndex = index;
+
+      // Cross-section move: the dragged topic originates in another section.
+      if (item.sectionIndex !== sectionIndex && moveTopicAcrossSections) {
+        // Insert before or after this topic depending on cursor position.
+        const hoverBoundingRect = ref.current.getBoundingClientRect();
+        const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+        const clientOffset = monitor.getClientOffset();
+        if (!clientOffset) return;
+        const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+        const targetIndex = hoverClientY < hoverMiddleY ? hoverIndex : hoverIndex + 1;
+        moveTopicAcrossSections(item.sectionIndex, item.topicId, sectionIndex, targetIndex);
+        item.sectionId = sectionId;
+        item.sectionIndex = sectionIndex;
+        item.index = targetIndex;
+        return;
+      }
+      const dragIndex = item.index;
       // Don't replace items with themselves
       if (dragIndex === hoverIndex) {
         return;
@@ -419,11 +443,18 @@ function Topic({
   const [{
     isDragging
   }, drag] = useDrag({
-    type: `${sectionId}-topic`,
-    canDrag: isCreator && isLargeScreen && !disableDrag ? true : false,
+    type: "topic",
+    // Touch is supported via react-dnd-multi-backend, so drag is not gated on
+    // screen size — only on being the course creator.
+    canDrag: isCreator && !disableDrag ? true : false,
     item: {
       topicId,
       index,
+      sectionId,
+      sectionIndex,
+      // Immutable origin, used on drop to detect a re-parent and to persist it.
+      originSectionId: sectionId,
+      originSectionIndex: sectionIndex,
       primary: topicName,
       secondary: description,
       image: picture
@@ -431,8 +462,23 @@ function Topic({
     collect: monitor => ({
       isDragging: monitor.isDragging()
     }),
-    end: (dropResult, monitor) => {
-      onDropSection();
+    end: (item, monitor) => {
+      // Dropped outside any section (or cancelled with Esc) — revert.
+      if (!monitor.didDrop()) {
+        if (onCancelMove) onCancelMove();
+        return;
+      }
+      if (item && item.originSectionId && item.originSectionId !== item.sectionId && onMoveTopicToSection) {
+        // The topic changed section during the drag — persist the re-parent.
+        onMoveTopicToSection({
+          sourceSectionId: item.originSectionId,
+          targetSectionId: item.sectionId,
+          topicId: item.topicId
+        });
+      } else {
+        // Same-section reorder — persist the new order.
+        onDropSection();
+      }
     }
   });
   const opacity = isDragging ? 0 : 1;
@@ -505,7 +551,35 @@ function Topic({
                 alignItems: "center",
                 mt: 1
               },
-              children: [topic?.pdf && /*#__PURE__*/_jsx(Box, {
+              children: [topic?.difficulty && /*#__PURE__*/_jsxs(Box, {
+                sx: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 0.5,
+                  mr: 1
+                },
+                role: "group",
+                "aria-label": `${t("difficulty")}: ${t(`card_${topic.difficulty}`)}`,
+                children: [/*#__PURE__*/_jsx(DifficultyIcon, {
+                  fontSize: "small",
+                  sx: {
+                    marginRight: 1,
+                    color: theme => theme.palette.text.secondary
+                  }
+                }), /*#__PURE__*/_jsx(Chip, {
+                  label: t(`card_${topic.difficulty}`),
+                  size: "small",
+                  sx: theme => ({
+                    height: 24,
+                    backgroundColor: theme.palette.action.selected,
+                    color: theme.palette.text.secondary,
+                    "& .MuiChip-label": {
+                      fontSize: "0.75rem",
+                      px: 0.75
+                    }
+                  })
+                })]
+              }), topic?.pdf && /*#__PURE__*/_jsx(Box, {
                 sx: {
                   display: "flex",
                   alignItems: "center"
@@ -789,6 +863,7 @@ function Section({
   isCommunityAccessRestricted = false,
   moveSection,
   moveTopic,
+  moveTopicAcrossSections,
   index,
   onDropSection,
   teachClassrooms,
@@ -922,8 +997,37 @@ function Section({
       onDropSection();
     }
   });
+
+  // Section-level drop target for topics. Positioning within a non-empty
+  // section is handled by the per-topic hover; this target handles dropping a
+  // topic onto an EMPTY section and drives the "valid drop target" highlight.
+  const [{
+    isTopicOver,
+    canDropTopic,
+    draggedTopicItem
+  }, dropTopicIntoSection] = useDrop({
+    accept: "topic",
+    hover(item, monitor) {
+      if (!monitor.isOver({
+        shallow: true
+      })) return;
+      if (item.sectionIndex === index) return;
+      if ((topics || []).length > 0) return; // non-empty: topic hover handles it
+      if (!moveTopicAcrossSections) return;
+      moveTopicAcrossSections(item.sectionIndex, item.topicId, index, 0);
+      item.sectionId = sectionId;
+      item.sectionIndex = index;
+      item.index = 0;
+    },
+    collect: monitor => ({
+      isTopicOver: monitor.isOver(),
+      canDropTopic: monitor.canDrop(),
+      draggedTopicItem: monitor.getItem()
+    })
+  });
+  const isTopicDropHighlight = isTopicOver && canDropTopic && draggedTopicItem && draggedTopicItem.originSectionId !== sectionId;
   const opacity = isDragging ? 0 : 1;
-  drag(drop(ref));
+  drag(dropTopicIntoSection(drop(ref)));
   const [anchorEl, setAnchorEl] = useState(null);
   const handleClickMenu = event => {
     setAnchorEl(event.currentTarget);
@@ -947,6 +1051,14 @@ function Section({
       style: {
         opacity
       },
+      "data-cy": "section-drop-zone",
+      sx: isTopicDropHighlight ? {
+        outline: theme => `2px dashed ${theme.palette.primary.main}`,
+        outlineOffset: "-4px",
+        borderRadius: 1,
+        backgroundColor: theme => alpha(theme.palette.primary.main, 0.06),
+        transition: "background-color 120ms ease"
+      } : undefined,
       component: "nav",
       "aria-labelledby": "section-list-subheader",
       subheader: /*#__PURE__*/_jsx(ListSubheader, {
@@ -1139,6 +1251,7 @@ function Section({
           handleUpdateSectionTopic: handleUpdateSectionTopic,
           handleDuplicateTopic: handleDuplicateTopic,
           moveTopic: moveTopic,
+          moveTopicAcrossSections: moveTopicAcrossSections,
           isMember: isMember,
           disableDrag: disableDrag,
           courseSettings: courseSettings,
@@ -1341,6 +1454,7 @@ function CourseOutline({
   handleUpdateSections,
   handleDeleteSectionVideo,
   handleUpdateTopics,
+  handleMoveTopic,
   isPublic,
   handleSwitchChange,
   isLoading,
@@ -1360,6 +1474,13 @@ function CourseOutline({
     percentage: 0
   });
   const [sects, setSects] = useState([]);
+
+  // Mirror `sects` into a ref so drop handlers can read the latest optimistic
+  // order without being re-created on every change.
+  const sectsRef = useRef(sects);
+  useEffect(() => {
+    sectsRef.current = sects;
+  }, [sects]);
   useEffect(() => {
     if (isMember) {
       const sectionsWithProgress = calcCompletions(sections, completions, null, isChallengeModeStudent, isReadWriteModeStudent);
@@ -1386,21 +1507,106 @@ function CourseOutline({
     setSects(newSections);
   }, [sects]);
   const moveTopic = useCallback((sectionIndex, dragIndex, hoverIndex) => {
-    const dragTopic = sects[sectionIndex].topics[dragIndex];
-    const newTopics = update(sects[sectionIndex].topics, {
-      $splice: [[dragIndex, 1], [hoverIndex, 0, {
-        ...dragTopic,
-        idx: hoverIndex
-      }]]
+    // Functional update so rapid successive hover events always build on the
+    // latest state and cannot clobber one another (which would desync the
+    // drag item's index from the actual source order).
+    setSects(current => {
+      const section = current[sectionIndex];
+      if (!section) return current;
+      const dragTopic = (section.topics || [])[dragIndex];
+      if (!dragTopic) return current;
+      const newTopics = update(section.topics, {
+        $splice: [[dragIndex, 1], [hoverIndex, 0, {
+          ...dragTopic,
+          idx: hoverIndex
+        }]]
+      });
+      return update(current, {
+        $splice: [[sectionIndex, 1], [sectionIndex, 0, {
+          ...section,
+          topics: newTopics
+        }]]
+      });
     });
-    const newSections = update(sects, {
-      $splice: [[sectionIndex, 1], [sectionIndex, 0, {
-        ...sects[sectionIndex],
-        topics: newTopics
-      }]]
+  }, []);
+
+  // Optimistically move a topic from one section to another at a given hover
+  // position, restamping its section reference and idx. Uses a functional
+  // update so repeated drag-hover events always build on the latest state.
+  const moveTopicAcrossSections = useCallback((fromSectionIndex, topicId, toSectionIndex, hoverIndex) => {
+    setSects(current => {
+      if (fromSectionIndex === toSectionIndex) return current;
+      const fromSection = current[fromSectionIndex];
+      const toSection = current[toSectionIndex];
+      if (!fromSection || !toSection) return current;
+      const fromTopics = fromSection.topics || [];
+      const toTopics = toSection.topics || [];
+      // Identify the dragged topic by its stable id, not by a positional
+      // index: the drag item's index can drift during a fast drag, which
+      // would otherwise re-parent the wrong (e.g. last) topic. Also makes
+      // repeated hover fires idempotent once the topic has already moved.
+      const movedTopic = fromTopics.find(tpc => tpc.topicId === topicId);
+      if (!movedTopic) return current;
+      const targetSectionId = toSection.sectionId;
+      const newFromTopics = fromTopics.filter(tpc => tpc.topicId !== topicId);
+      const clampedIndex = Math.max(0, Math.min(hoverIndex, toTopics.length));
+      const repositionedTopic = {
+        ...movedTopic,
+        sectionId: targetSectionId,
+        courseSectionId: `${courseId}|${targetSectionId}`,
+        idx: clampedIndex
+      };
+      const newToTopics = [...toTopics.slice(0, clampedIndex), repositionedTopic, ...toTopics.slice(clampedIndex)];
+      return current.map((s, i) => {
+        if (i === fromSectionIndex) return {
+          ...s,
+          topics: newFromTopics
+        };
+        if (i === toSectionIndex) return {
+          ...s,
+          topics: newToTopics
+        };
+        return s;
+      });
     });
-    setSects(newSections);
-  }, [sects]);
+  }, [courseId]);
+
+  // Revert the optimistic order back to the authoritative `sections` prop —
+  // used when a drag is cancelled / dropped outside any section.
+  const resetSects = useCallback(() => {
+    if (isMember) {
+      setSects(calcCompletions(sections, completions, null, isChallengeModeStudent, isReadWriteModeStudent));
+    } else {
+      setSects(sections);
+    }
+  }, [isMember, sections, completions, isChallengeModeStudent, isReadWriteModeStudent]);
+
+  // On drop of a re-parented topic, hand the source/target ordering to the
+  // page-level handler so it can persist the move + reindex both sections.
+  const dispatchMoveTopic = useCallback(({
+    sourceSectionId,
+    targetSectionId,
+    topicId
+  }) => {
+    if (typeof handleMoveTopic !== "function") {
+      resetSects();
+      return;
+    }
+    const current = sectsRef.current || [];
+    const targetSection = current.find(s => s.sectionId === targetSectionId);
+    const sourceSection = current.find(s => s.sectionId === sourceSectionId);
+    if (!targetSection) return;
+    const movedTopic = (targetSection.topics || []).find(topicItem => topicItem.topicId === topicId);
+    if (!movedTopic) return;
+    handleMoveTopic({
+      courseId,
+      sourceSectionId,
+      targetSectionId,
+      topic: movedTopic,
+      targetTopics: targetSection.topics || [],
+      sourceTopics: sourceSection ? sourceSection.topics || [] : []
+    });
+  }, [courseId, handleMoveTopic, resetSects]);
   const {
     percentage,
     completed,
@@ -1534,6 +1740,9 @@ function CourseOutline({
       isCreator: isCreator,
       moveSection: moveSection,
       moveTopic: moveTopic,
+      moveTopicAcrossSections: moveTopicAcrossSections,
+      onMoveTopicToSection: dispatchMoveTopic,
+      onCancelMove: resetSects,
       handleUpdateSections: handleUpdateSections,
       handleUpdateTopics: handleUpdateTopics,
       isPublic: isPublic,

package/dist/Lists/CourseOutline/CourseOutline.test.js

@@ -1,22 +1,88 @@
 import { render } from "@testing-library/react";
-import { describe, it } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import CourseOutline from "./CourseOutline";
 import { props } from "./CourseOutline.stories";
 import { DndProvider } from "react-dnd";
 import { TestBackend } from "react-dnd-test-backend";
 import { MemoryRouter } from "react-router";
+
+// Two sections — one populated, one empty — to exercise cross-section drag
+// wiring (drop zones, draggable topics, re-parent handler threading). Full
+// pointer-driven drag interaction is covered by the app-level Playwright spec,
+// since react-dnd hover geometry relies on getBoundingClientRect, which returns
+// zeros under jsdom.
 import { jsx as _jsx } from "react/jsx-runtime";
+const topic = (id, name, idx) => ({
+  topicId: id,
+  topicName: name,
+  idx,
+  sectionId: "section-a",
+  roleplays: [],
+  bots: [],
+  completions: []
+});
+const crossSectionProps = (overrides = {}) => ({
+  ...props,
+  isCreator: true,
+  isMember: false,
+  courseId: "course-1",
+  sections: [{
+    sectionId: "section-a",
+    sectionName: "Section A",
+    idx: 0,
+    topics: [topic("topic-1", "Topic 1", 0), topic("topic-2", "Topic 2", 1)]
+  }, {
+    sectionId: "section-b",
+    sectionName: "Section B",
+    idx: 1,
+    topics: []
+  }],
+  handleMoveTopic: vi.fn(),
+  ...overrides
+});
+const renderOutline = p => render(/*#__PURE__*/_jsx(MemoryRouter, {
+  children: /*#__PURE__*/_jsx(DndProvider, {
+    backend: TestBackend,
+    children: /*#__PURE__*/_jsx(CourseOutline, {
+      ...p
+    })
+  })
+}));
 describe("CourseOutline", () => {
   it("renders without crashing", () => {
     const {
       unmount
-    } = render(/*#__PURE__*/_jsx(MemoryRouter, {
-      children: /*#__PURE__*/_jsx(DndProvider, {
-        backend: TestBackend,
-        children: /*#__PURE__*/_jsx(CourseOutline, {
-          ...props
-        })
-      })
+    } = renderOutline(props);
+    unmount();
+  });
+  it("renders without crashing when cross-section drag handlers are provided", () => {
+    const {
+      unmount
+    } = renderOutline(crossSectionProps());
+    unmount();
+  });
+  it("renders a drop zone for every section so topics can be dropped between them", () => {
+    const {
+      container,
+      unmount
+    } = renderOutline(crossSectionProps());
+    // One drop zone per rendered section (source + target).
+    expect(container.querySelectorAll('[data-cy="section-drop-zone"]').length).toBe(2);
+    unmount();
+  });
+  it("renders each topic as a draggable list item for the course creator", () => {
+    const {
+      container,
+      unmount
+    } = renderOutline(crossSectionProps());
+    expect(container.querySelectorAll('[data-cy="topic-list-item"]').length).toBe(2);
+    unmount();
+  });
+  it("does not throw when handleMoveTopic is omitted (drag stays inert)", () => {
+    const {
+      unmount
+    } = renderOutline(crossSectionProps({
+      handleMoveTopic: undefined
     }));
     unmount();
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1421",
+  "version": "0.1.1422",
   "type": "module",
   "main": "dist/index.js",
   "files": [