@nualang/nualang-ui-components 0.1.1434 → 0.1.1435

package/dist/Cards/Bot/Bot.js

@@ -138,7 +138,7 @@ function Bot({
           sx: classes.media
         })
       }), /*#__PURE__*/_jsx(CardHeader, {
-        action: /*#__PURE__*/_jsx(IconButton, {
+        action: compact ? undefined : /*#__PURE__*/_jsx(IconButton, {
           disabled: true,
           size: "large",
           value: "More",

package/dist/Cards/Course/Course.js

@@ -4,7 +4,7 @@ import { useInView } from "react-intersection-observer";
 // Mui
 import { Button, Box, Typography, IconButton, Menu, MenuItem, Checkbox, Tooltip, CardActions, CardActionArea, Divider, Chip } from "@mui/material";
 import Skeleton from "@mui/material/Skeleton";
-import { styled } from "@mui/material/styles";
+import { styled, alpha } from "@mui/material/styles";
 import { tooltipClasses } from "@mui/material/Tooltip";
 import Group from "@mui/icons-material/Group";
 import ExitToApp from "@mui/icons-material/ExitToApp";
@@ -16,9 +16,16 @@ import CopyIcon from "@mui/icons-material/FileCopy";
 import OndemandVideoIcon from "@mui/icons-material/OndemandVideo";
 import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
 import DifficultyIcon from "@mui/icons-material/School";
+import BubbleChart from "@mui/icons-material/BubbleChart";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import DeleteIcon from "@mui/icons-material/Delete";
+import FolderOpen from "@mui/icons-material/FolderOpen";
+import Face from "@mui/icons-material/Face";
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import ListAlt from "@mui/icons-material/ListAlt";
+import Forum from "@mui/icons-material/Forum";
+import RecordVoiceOver from "@mui/icons-material/RecordVoiceOver";
 
 // components
 import MembersDialog from "../../Dialogs/Members/Members";
@@ -32,7 +39,201 @@ import ProgressiveCardMedia from "../../Misc/ProgressiveCardMedia/ProgressiveCar
 import { classes, CardContainer, CardAvatar, CardHeader, CardTitle, CardSubheader, CardInfoSection, CardDescription, CardTop, CardContent, CardMenuIcon, CardInfoSectionItem, CardVisibility } from "../CardElements";
 import { courses as courseQuerys } from "@nualang/nualang-api-and-queries/Queries";
 import useConfirm from "../../hooks/useConfirm";
+import primaryPalette from "../../theme/colors/primary";
+
+// Per-type presentation for the type badge, meta row and action buttons.
+// `course` is the default and keeps the existing card behaviour untouched.
+// Type icons mirror the in-course exercise list: chatbots use Face, roleplays
+// (scenarios) use Forum. Course keeps School (consistent with the nav); topic
+// has no exercise-list equivalent and keeps FolderOpen.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const TYPE_META = {
+  course: {
+    Icon: BubbleChart,
+    labelKey: "course",
+    actionKey: "start_course"
+  },
+  // A topic is a container of activities, so its primary action opens it
+  // ("View topic") rather than starting a single activity.
+  topic: {
+    Icon: FolderOpen,
+    labelKey: "topic",
+    actionKey: "view_topic"
+  },
+  chatbot: {
+    Icon: Face,
+    labelKey: "chatbot",
+    actionKey: "view_chatbot"
+  },
+  scenario: {
+    Icon: Forum,
+    labelKey: "scenario",
+    actionKey: "view_scenario"
+  }
+};
+
+// White pill over the media, top-left. Required for non-course result types.
+function TypeBadge({
+  t,
+  type
+}) {
+  const meta = TYPE_META[type];
+  if (!meta) {
+    return null;
+  }
+  const {
+    Icon,
+    labelKey
+  } = meta;
+  return /*#__PURE__*/_jsx(Chip, {
+    icon: /*#__PURE__*/_jsx(Icon, {
+      sx: {
+        fontSize: 16
+      }
+    }),
+    label: t(labelKey),
+    sx: theme => ({
+      position: "absolute",
+      bottom: theme.spacing(1),
+      right: theme.spacing(1),
+      height: 28,
+      fontSize: 13,
+      fontWeight: 600,
+      color: theme.palette.primary.main,
+      backgroundColor: theme.palette.background.paper,
+      boxShadow: theme.shadows[1],
+      pointerEvents: "none",
+      "& .MuiChip-icon": {
+        color: theme.palette.primary.main
+      }
+    })
+  });
+}
+
+// Type-specific meta shown in the info row (activities / conversation / turns).
+function TypeMetaItem({
+  t,
+  type,
+  activitiesCount = 0,
+  turns = 0
+}) {
+  if (type === "topic") {
+    return /*#__PURE__*/_jsxs(CardInfoSectionItem, {
+      variant: "caption",
+      component: "span",
+      children: [/*#__PURE__*/_jsx(ListAlt, {
+        sx: {
+          ...classes.infoIcon
+        },
+        fontSize: "small"
+      }), t("n_activities", {
+        number: activitiesCount
+      })]
+    });
+  }
+  if (type === "chatbot") {
+    return /*#__PURE__*/_jsxs(CardInfoSectionItem, {
+      variant: "caption",
+      component: "span",
+      children: [/*#__PURE__*/_jsx(Face, {
+        sx: {
+          ...classes.infoIcon
+        },
+        fontSize: "small"
+      }), t("conversation")]
+    });
+  }
+  if (type === "scenario") {
+    return /*#__PURE__*/_jsxs(CardInfoSectionItem, {
+      variant: "caption",
+      component: "span",
+      children: [/*#__PURE__*/_jsx(RecordVoiceOver, {
+        sx: {
+          ...classes.infoIcon
+        },
+        fontSize: "small"
+      }), t("roleplay_turns", {
+        number: turns
+      })]
+    });
+  }
+  return null;
+}
+
+// Full-width "From course" link shown directly above the action buttons.
+function FromCourseLink({
+  t,
+  parentCourse,
+  onClick,
+  compact = false
+}) {
+  if (!parentCourse?.id) {
+    return null;
+  }
+  const navigate = event => {
+    event.stopPropagation();
+    onClick(parentCourse.id);
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "a",
+    role: "link",
+    tabIndex: 0,
+    "aria-label": t("from_course_named", {
+      title: parentCourse.title
+    }),
+    onClick: navigate,
+    onKeyDown: event => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        navigate(event);
+      }
+    },
+    sx: theme => ({
+      display: "flex",
+      alignItems: "center",
+      gap: 0.75,
+      cursor: "pointer",
+      textDecoration: "none",
+      margin: compact ? "0 12px 8px" : "0 16px 8px",
+      padding: compact ? "4px 6px 4px 8px" : "6px 8px 6px 10px",
+      borderRadius: "8px",
+      // Light grey pill on light surfaces; a subtle translucent-white raise
+      // on dark ones (grey.100 would be a bright block on a dark card).
+      backgroundColor: theme.palette.mode === "dark" ? alpha(theme.palette.common.white, 0.08) : theme.palette.grey[100],
+      transition: "background-color 0.2s",
+      // Nualang primary 50 tint (#F4E4F5) in light mode; a translucent primary
+      // fill in dark mode where the flat tint would be unreadable.
+      "&:hover, &:focus-visible": {
+        backgroundColor: theme.palette.mode === "dark" ? alpha(theme.palette.primary.main, 0.16) : primaryPalette[50]
+      }
+    }),
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "caption",
+      sx: {
+        color: "text.secondary",
+        flexShrink: 0
+      },
+      children: t("from_course")
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "caption",
+      sx: {
+        fontWeight: 600,
+        color: "primary.main",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        flexGrow: 1
+      },
+      children: parentCourse.title
+    }), /*#__PURE__*/_jsx(ChevronRight, {
+      sx: {
+        fontSize: 18,
+        color: "text.secondary",
+        flexShrink: 0
+      }
+    })]
+  });
+}
 function OverflowMenu({
   t,
   courseId,
@@ -317,7 +518,8 @@ function CourseInfoSection({
   course,
   topicDifficulties,
   isPlaysVisible,
-  exerciseStartTotal
+  exerciseStartTotal,
+  type = "course"
 }) {
   const iconSx = compact ? {
     ...classes.infoIcon,
@@ -332,6 +534,11 @@ function CourseInfoSection({
       t: t,
       difficulty: topicDifficulties.length > 0 ? topicDifficulties : course?.difficulty,
       compact: compact
+    }), type !== "course" && /*#__PURE__*/_jsx(TypeMetaItem, {
+      t: t,
+      type: type,
+      activitiesCount: course?.activitiesCount,
+      turns: course?.turns
     }), (course?.pdf || course.topicsWithPdf && Object.keys(course?.topicsWithPdf)?.length > 0) && /*#__PURE__*/_jsxs(CardInfoSectionItem, {
       variant: "caption",
       component: "span",
@@ -517,6 +724,11 @@ function CourseCard({
   isClassroomCreator = null,
   handleDeleteCourse,
   compact = false,
+  type = "course",
+  parentCourse,
+  handleViewParentCourse,
+  handleStartItem,
+  showTypeBadge = false,
   // Compact-only: this course is already in the classroom this dialog is
   // adding to, so its selection is locked on and can't be toggled off here.
   alreadyAdded = false
@@ -538,18 +750,18 @@ function CourseCard({
       limit: 1000
     }
   }, {
-    // Compact cards (the Find Courses picker) never open the outline and
-    // don't need per-section topic difficulty aggregation - course.difficulty
-    // already covers the meta row's single level chip, and this dialog never
-    // wires up getCourseSections either.
-    enabled: !compact && !!course?.courseId && (isOutlineOpen || visible)
+    // Fetch sections when the outline is actually opened (any layout). For the
+    // eager preload (difficulty aggregation on scroll into view) stay
+    // non-compact only — compact cards fall back to course.difficulty and only
+    // pay for sections on demand when the user opens the outline.
+    enabled: type === "course" && !!course?.courseId && (isOutlineOpen || !compact && visible)
   });
   const {
     membersQuery,
     memberQuery,
     isMember
   } = useCourseState({
-    courseId: course && course.courseId ? course.courseId : null,
+    courseId: type === "course" && course && course.courseId ? course.courseId : null,
     username,
     getCourseSections,
     getCourseMember,
@@ -590,15 +802,6 @@ function CourseCard({
     setChecked(!checked);
     handleClickCourse(course.courseId, value);
   };
-
-  // Compact cards (the Find Courses picker) mirror Topic.jsx's compact card:
-  // both the media and the header/content are wrapped in their own
-  // CardActionArea, each disabled (not just non-interactive) when the course
-  // is already in the classroom.
-  const handleCompactCardClick = () => {
-    setChecked(!checked);
-    handleClickCourse(course.courseId, !checked);
-  };
   const {
     courseId,
     courseName,
@@ -638,6 +841,27 @@ function CourseCard({
   const leaveCourse = () => {
     handleLeaveCourse(courseId);
   };
+
+  // Non-course result types (topic/chatbot/scenario) reuse the course handlers
+  // when a type-specific one is not supplied.
+  const startItem = () => {
+    if (handleStartItem) {
+      handleStartItem(course);
+    } else if (handleStartCourse) {
+      handleStartCourse(course);
+    }
+  };
+  const viewParentCourse = () => {
+    const parentId = parentCourse?.id;
+    if (!parentId) {
+      return;
+    }
+    if (handleViewParentCourse) {
+      handleViewParentCourse(parentId);
+    } else if (handleViewCourse) {
+      handleViewCourse(parentId);
+    }
+  };
   const courseSections = sectionsQuery.isSuccess ? sectionsQuery.data.Items : [];
   const topicDifficulties = sectionsQuery.isSuccess ? [...new Set(courseSections.flatMap(section => section.topics || []).map(topic => topic.difficulty).filter(Boolean))] : [];
   const deleteCourse = async () => {
@@ -649,6 +873,12 @@ function CourseCard({
     }
   };
   const handleClickImage = () => {
+    // Non-course results open the item itself (matching the primary button),
+    // not the course-join flow.
+    if (type !== "course" && !selectable) {
+      startItem();
+      return;
+    }
     if (isCreator || isMember || isAdmin) {
       viewCourse();
     } else {
@@ -656,21 +886,44 @@ function CourseCard({
     }
   };
 
+  // Compact cards: the Find Courses picker selects on click; everywhere else
+  // (e.g. search results) the whole card navigates, exactly like the media
+  // click — courses open/join, content types open the item.
+  const handleCompactCardClick = () => {
+    if (selectable) {
+      setChecked(!checked);
+      handleClickCourse(course.courseId, !checked);
+      return;
+    }
+    handleClickImage();
+  };
+
   // const memberCount = membersQuery.isSuccess ? membersQuery.data.Items.length : 0;
 
   const isPlaysVisible = !disablePlays && exerciseStartTotal > -1;
   const isCollaborator = Array.isArray(course.collaborators) && course.collaborators.some(collab => (typeof collab === "string" ? collab : collab?.S) === email);
   const canDuplicateCourse = isCreator || course.isShareable === "everyone" || course.isShareable === "collaborators" && isCollaborator;
+
+  // The type badge (Course/Topic/Chatbot/Scenario) sits bottom-right over the
+  // media. In search results it replaces the visibility chip (results are
+  // already public), so the two never render together.
+  const showTypeChip = type !== "course" || showTypeBadge;
+  // Compact whole-card link label: the item action for content types, else the
+  // picker select label.
+  const compactActionLabel = type !== "course" ? `${t(TYPE_META[type]?.actionKey || "start_course")}: ${courseName}` : selectable ? `${checked ? t("selected") : t("select")} ${courseName}` : `${ariaText} ${courseName}`.trim();
   const titleNode = /*#__PURE__*/_jsx(CardTitle, {
     title: courseName,
     component: cardTitleComponent,
     compact: compact
   });
+  // Courses describe the language pair; content types (topic/chatbot/scenario)
+  // show their creator instead — "learn X for speakers of Y" reads as course
+  // chrome on an individual item (matches the dedicated Bot card convention).
   const subheaderNode = /*#__PURE__*/_jsx(CardSubheader, {
-    subheader: t("learn_for_speakers_of", {
+    subheader: type === "course" ? t("learn_for_speakers_of", {
       learnLang: capitalize(t(learnLang)),
       forLang: capitalize(t(forLang))
-    }),
+    }) : createdByName || capitalize(t(learnLang)),
     compact: compact
   });
   return /*#__PURE__*/_jsxs(CardContainer, {
@@ -684,7 +937,7 @@ function CourseCard({
           onClick: handleCompactCardClick,
           disabled: alreadyAdded,
           role: "link",
-          "aria-label": `${checked ? t("selected") : t("select")} ${courseName}`,
+          "aria-label": compactActionLabel,
           children: /*#__PURE__*/_jsx(CourseCardMedia, {
             visible: visible,
             cardPicture: cardPicture,
@@ -692,7 +945,7 @@ function CourseCard({
             pictureXs: pictureXs,
             placeholderRef: placeholderRef
           })
-        }), (isClassroomCreator ?? isCreator) && /*#__PURE__*/_jsx(CardVisibility, {
+        }), !showTypeChip && (isClassroomCreator ?? isCreator) && /*#__PURE__*/_jsx(CardVisibility, {
           t: t,
           visibility: visibility,
           isCourseHidden: isCourseHidden,
@@ -714,11 +967,14 @@ function CourseCard({
           picture: picture,
           pictureXs: pictureXs,
           placeholderRef: placeholderRef
-        }), (isClassroomCreator ?? isCreator) && /*#__PURE__*/_jsx(CardVisibility, {
+        }), !showTypeChip && (isClassroomCreator ?? isCreator) && /*#__PURE__*/_jsx(CardVisibility, {
           t: t,
           visibility: visibility,
           isCourseHidden: isCourseHidden
         })]
+      }), showTypeChip && /*#__PURE__*/_jsx(TypeBadge, {
+        t: t,
+        type: type
       }), userImage ? /*#__PURE__*/_jsx(CardAvatar, {
         compact: compact,
         sx: theme => ({
@@ -797,8 +1053,8 @@ function CourseCard({
         subheader: subheaderNode,
         sx: {
           alignItems: "flex-start",
-          pt: "14px",
-          pb: 1.5,
+          pt: "10px",
+          pb: 1,
           pl: "12px",
           pr: 1
         }
@@ -807,13 +1063,21 @@ function CourseCard({
           borderColor: "rgba(0, 0, 0, 0.12)"
         }
       }), /*#__PURE__*/_jsxs(CardContent, {
+        sx: {
+          pt: 1,
+          pb: 1,
+          "&:last-child": {
+            pb: 1
+          }
+        },
         children: [/*#__PURE__*/_jsx(CourseInfoSection, {
           t: t,
           compact: true,
           course: course,
           topicDifficulties: topicDifficulties,
           isPlaysVisible: isPlaysVisible,
-          exerciseStartTotal: exerciseStartTotal
+          exerciseStartTotal: exerciseStartTotal,
+          type: type
         }), /*#__PURE__*/_jsx(Tooltip, {
           title: description,
           disableHoverListener: !isDescriptionTruncated,
@@ -841,7 +1105,7 @@ function CourseCard({
           children: [selectable && /*#__PURE__*/_jsx(Checkbox, {
             checked: checked,
             onChange: handleCheckboxClick
-          }), !disableActions && !isClassroomArchived && /*#__PURE__*/_jsx(Tooltip, {
+          }), type === "course" && !disableActions && !isClassroomArchived && /*#__PURE__*/_jsx(Tooltip, {
             title: `${courseName} ${t("more_options")}`,
             children: /*#__PURE__*/_jsx(IconButton, {
               onClick: handleClickOpenMenu,
@@ -865,7 +1129,8 @@ function CourseCard({
           course: course,
           topicDifficulties: topicDifficulties,
           isPlaysVisible: isPlaysVisible,
-          exerciseStartTotal: exerciseStartTotal
+          exerciseStartTotal: exerciseStartTotal,
+          type: type
         }), /*#__PURE__*/_jsx(CardDescription, {
           variant: "body2",
           color: "textSecondary",
@@ -873,7 +1138,26 @@ function CourseCard({
           children: description
         })]
       })]
-    }), !compact && /*#__PURE__*/_jsxs(CardActions, {
+    }), parentCourse?.id && /*#__PURE__*/_jsx(FromCourseLink, {
+      t: t,
+      parentCourse: parentCourse,
+      onClick: viewParentCourse,
+      compact: compact
+    }), !(compact && selectable) && /*#__PURE__*/_jsxs(CardActions, {
+      sx: compact ? {
+        flexWrap: "wrap",
+        gap: 0.5,
+        pt: 0,
+        px: 1.25,
+        pb: 1.25,
+        "& .MuiButton-root": {
+          fontSize: 12,
+          paddingTop: "2px",
+          paddingBottom: "2px",
+          paddingLeft: "12px",
+          paddingRight: "12px"
+        }
+      } : undefined,
       children: [selectable && /*#__PURE__*/_jsx(Button, {
         onClick: viewCourse,
         color: "primary",
@@ -881,7 +1165,19 @@ function CourseCard({
         disabled: checked,
         "aria-label": "Select Course",
         children: checked ? t("selected") : t("select")
-      }), (isCreator || isCollaborator && !isMember) && !selectable && /*#__PURE__*/_jsxs(_Fragment, {
+      }), type !== "course" && !selectable &&
+      /*#__PURE__*/
+      // Only the "Start …" action here — course navigation is handled by
+      // the "From course" link above the buttons, so a separate "View
+      // course" button would be redundant.
+      _jsx(Button, {
+        onClick: startItem,
+        color: "primary",
+        variant: "outlined",
+        disabled: disableActions,
+        "aria-label": `${t(TYPE_META[type]?.actionKey || "start_course")}: ${courseName}`,
+        children: t(TYPE_META[type]?.actionKey || "start_course")
+      }), type === "course" && (isCreator || isCollaborator && !isMember) && !selectable && /*#__PURE__*/_jsxs(_Fragment, {
         children: [!isClassroomArchived && /*#__PURE__*/_jsx(Button, {
           onClick: viewCourse,
           color: "primary",
@@ -896,7 +1192,7 @@ function CourseCard({
           "aria-label": `View Outline: ${courseName}`,
           children: t("view_outline")
         })]
-      }), !isCreator && isMember && !selectable && !isClassroomArchived && /*#__PURE__*/_jsxs(_Fragment, {
+      }), type === "course" && !isCreator && isMember && !selectable && !isClassroomArchived && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Button, {
           onClick: viewCourse,
           color: "primary",
@@ -911,7 +1207,7 @@ function CourseCard({
           "aria-label": `View Progress: ${courseName}`,
           children: t("view_progress")
         })]
-      }), !isCreator && !isMember && !isAdmin && !selectable && /*#__PURE__*/_jsxs(_Fragment, {
+      }), type === "course" && !isCreator && !isMember && !isAdmin && !selectable && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Button, {
           onClick: startCourse,
           color: "primary",
@@ -988,6 +1284,19 @@ function Course(props) {
 }
 const MemoizedCourse = /*#__PURE__*/memo(Course);
 MemoizedCourse.propTypes = {
+  // Result type. Defaults to "course" so existing usages are unaffected.
+  type: PropTypes.oneOf(["course", "topic", "chatbot", "scenario"]),
+  // Parent course for non-course result types (topic/chatbot/scenario).
+  parentCourse: PropTypes.shape({
+    id: PropTypes.string,
+    title: PropTypes.string
+  }),
+  // Navigates to the parent course from the "From course" link / action.
+  handleViewParentCourse: PropTypes.func,
+  // Starts a non-course item (topic/chatbot/scenario).
+  handleStartItem: PropTypes.func,
+  // Force the type badge to render for courses too (e.g. in search results).
+  showTypeBadge: PropTypes.bool,
   courseId: PropTypes.string.isRequired,
   courseName: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,