@nualang/nualang-ui-components 0.1.1413 → 0.1.1415

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -30,7 +30,8 @@ const AssignmentCardsList = ({
   isLoadingAssignments,
   isChallengeModeStudent,
   isReadWriteModeStudent,
-  scrollableTarget = null
+  scrollableTarget = null,
+  openSnackbar
 }) => {
   const [lastClickedExerciseId, setLastClickedExerciseId] = useState(null);
   const [filter, setFilter] = useState("all");
@@ -355,7 +356,8 @@ const AssignmentCardsList = ({
         handleViewProgress: handleViewProgress,
         assignedStudents: assignmentMembersById[assignment.assignmentId] || [],
         isChallengeModeStudent: isChallengeModeStudent,
-        isReadWriteModeStudent: isReadWriteModeStudent
+        isReadWriteModeStudent: isReadWriteModeStudent,
+        openSnackbar: openSnackbar
       }, assignment.assignmentId))
     })]
   });

package/dist/Cards/Course/Course.js

@@ -2,8 +2,10 @@ import { useState, memo } from "react";
 import PropTypes from "prop-types";
 import { useInView } from "react-intersection-observer";
 // Mui
-import { Button, Box, Typography, IconButton, Menu, MenuItem, Checkbox, Tooltip, CardActions, CardActionArea, Divider } from "@mui/material";
+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 { tooltipClasses } from "@mui/material/Tooltip";
 import Group from "@mui/icons-material/Group";
 import ExitToApp from "@mui/icons-material/ExitToApp";
 import Close from "@mui/icons-material/Close";
@@ -159,6 +161,141 @@ function OverflowMenu({
     })]
   });
 }
+const DIFFICULTY_ORDER = ["A1", "A2", "B1", "B2", "C1", "C2"];
+const MAX_VISIBLE_DIFFICULTIES = 2;
+const DifficultyOverflowTooltip = styled(({
+  className,
+  ...props
+}) => /*#__PURE__*/_jsx(Tooltip, {
+  ...props,
+  classes: {
+    popper: className
+  }
+}))(({
+  theme
+}) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    boxShadow: theme.shadows[4],
+    padding: theme.spacing(1.5, 2),
+    minWidth: 160,
+    maxWidth: 260
+  }
+}));
+function normalizeDifficulties(difficulty) {
+  const values = Array.isArray(difficulty) ? difficulty : difficulty ? [difficulty] : [];
+  return DIFFICULTY_ORDER.filter(level => values.includes(level));
+}
+function difficultyChipSx(theme, compact) {
+  return {
+    height: compact ? 20 : 24,
+    backgroundColor: theme.palette.action.selected,
+    color: theme.palette.text.secondary,
+    "& .MuiChip-label": {
+      fontSize: compact ? "0.7rem" : "0.75rem",
+      px: 0.75
+    }
+  };
+}
+function CourseDifficulty({
+  t,
+  difficulty,
+  compact
+}) {
+  const levels = normalizeDifficulties(difficulty);
+  if (levels.length === 0) {
+    return null;
+  }
+  const levelLabels = levels.map(level => t(`card_${level}`));
+  const visibleLabels = levelLabels.slice(0, MAX_VISIBLE_DIFFICULTIES);
+  const overflowLabels = levelLabels.slice(MAX_VISIBLE_DIFFICULTIES);
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "span",
+    role: "group",
+    "aria-label": `${t("difficulty")}: ${levelLabels.join(", ")}`,
+    sx: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 0.5
+    },
+    "data-cy": "course-difficulty",
+    children: [/*#__PURE__*/_jsx(DifficultyIcon, {
+      sx: {
+        ...classes.infoIcon,
+        fontSize: compact ? 18 : undefined
+      },
+      fontSize: "small"
+    }), visibleLabels.map((label, index) => /*#__PURE__*/_jsx(Chip, {
+      label: label,
+      size: "small",
+      "data-cy": `course-difficulty-chip-${index}`,
+      sx: theme => difficultyChipSx(theme, compact)
+    }, label)), overflowLabels.length > 0 && /*#__PURE__*/_jsx(DifficultyOverflowTooltip, {
+      placement: "bottom-start",
+      title: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          minWidth: 140
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          sx: {
+            display: "block",
+            color: "text.secondary",
+            fontWeight: 700,
+            letterSpacing: 0.5,
+            textTransform: "uppercase",
+            pb: 1,
+            borderBottom: "1px solid",
+            borderColor: "divider"
+          },
+          children: t("difficulties")
+        }), levelLabels.map((label, index) => /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            py: 0.75,
+            borderBottom: index < levelLabels.length - 1 ? "1px solid" : "none",
+            borderColor: "divider"
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            component: "span",
+            sx: {
+              color: "text.disabled",
+              fontSize: "1.3rem",
+              lineHeight: 1
+            },
+            children: "\u2022"
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.primary"
+            },
+            children: label
+          })]
+        }, label))]
+      }),
+      children: /*#__PURE__*/_jsx(Chip, {
+        label: `+${overflowLabels.length}`,
+        size: "small",
+        "aria-label": `${t("difficulty")}: ${levelLabels.join(", ")}`,
+        "data-cy": "course-difficulty-overflow",
+        sx: theme => ({
+          ...difficultyChipSx(theme, compact),
+          fontWeight: 600
+        })
+      })
+    })]
+  });
+}
+CourseDifficulty.propTypes = {
+  t: PropTypes.func.isRequired,
+  difficulty: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  compact: PropTypes.bool
+};
 function CourseLoading({
   compact = false
 }) {
@@ -278,7 +415,7 @@ function CourseCard({
       limit: 1000
     }
   }, {
-    enabled: !!course?.courseId && isOutlineOpen
+    enabled: !!course?.courseId && (isOutlineOpen || visible)
   });
   const {
     membersQuery,
@@ -356,6 +493,7 @@ function CourseCard({
     handleLeaveCourse(courseId);
   };
   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 () => {
     const confirmed = await confirm(t("delete_course"), t("delete_course_confirmation"), "", true, t("course_deletion_note", {
       sectionCount: courseSections ? courseSections.length : 0
@@ -497,16 +635,10 @@ function CourseCard({
           columnGap: 1.5,
           rowGap: 0.5
         },
-        children: [course?.difficulty && /*#__PURE__*/_jsxs(CardInfoSectionItem, {
-          variant: "caption",
-          component: "span",
-          children: [/*#__PURE__*/_jsx(DifficultyIcon, {
-            sx: {
-              ...classes.infoIcon,
-              fontSize: compact ? 18 : undefined
-            },
-            fontSize: "small"
-          }), t(`card_${course.difficulty}`)]
+        children: [/*#__PURE__*/_jsx(CourseDifficulty, {
+          t: t,
+          difficulty: topicDifficulties.length > 0 ? topicDifficulties : course?.difficulty,
+          compact: compact
         }), (course?.pdf || course.topicsWithPdf && Object.keys(course?.topicsWithPdf)?.length > 0) && /*#__PURE__*/_jsxs(CardInfoSectionItem, {
           variant: "caption",
           component: "span",
@@ -673,7 +805,7 @@ MemoizedCourse.propTypes = {
   courseId: PropTypes.string.isRequired,
   courseName: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
-  difficulty: PropTypes.string,
+  difficulty: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   picture: PropTypes.string.isRequired,
   learnLang: PropTypes.string.isRequired,
   forLang: PropTypes.string.isRequired,

package/dist/Chat/Messages/Message/Message.js

@@ -272,6 +272,7 @@ export default function Message({
   speak,
   stopSpeaking,
   voice,
+  voiceLanguageCode,
   voicePitch,
   voiceSpeed,
   handleEditMessage,
@@ -471,6 +472,7 @@ export default function Message({
             forLang: forLang,
             handleSpeak: handleSpeak,
             voice: voice,
+            voiceLanguageCode: voiceLanguageCode,
             voicePitch: voicePitch,
             voiceSpeed: voiceSpeed,
             disableTranslation: disableTranslation,
@@ -538,6 +540,7 @@ export default function Message({
               forLang: forLang,
               handleSpeak: handleSpeak,
               voice: voice,
+              voiceLanguageCode: voiceLanguageCode,
               voicePitch: voicePitch,
               voiceSpeed: voiceSpeed,
               disableTranslation: disableTranslation,
@@ -623,7 +626,7 @@ export default function Message({
                   children: /*#__PURE__*/_jsx(IconButton, {
                     color: "inherit",
                     disabled: isSpeaking || recognizing || muteSound || isMessagePlaying || showTranslation,
-                    onClick: () => speak(text, voice, false, messageContainerIdSelector, null, false, voicePitch),
+                    onClick: () => speak(text, voice, false, messageContainerIdSelector, voiceLanguageCode, false, voicePitch),
                     size: "small",
                     "aria-label": messageIndex !== -1 ? accessibilityText ? accessibilityText : `Speak message ${messageIndex + 1}` : accessibilityText ? accessibilityText : `Speak message`,
                     sx: {

package/dist/Chat/Messages/Message/Message.test.js

@@ -0,0 +1,55 @@
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import Message from "./Message";
+
+// Messages spreads each message over these props, so a roleplay message carries
+// its own actor's voice and accent; a bot chat supplies one voice for the
+// whole chat. Replaying must use whichever applies, not the language default.
+import { jsx as _jsx } from "react/jsx-runtime";
+const renderMessage = (overrides = {}) => {
+  const theme = createTheme();
+  const speak = vi.fn();
+  render(/*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: /*#__PURE__*/_jsx(Message, {
+      t: k => k,
+      text: "Kia ora",
+      speak: speak,
+      messageIndex: 0,
+      index: 0,
+      messageCount: 1,
+      messages: [{
+        text: "Kia ora"
+      }],
+      ...overrides
+    })
+  }));
+  return speak;
+};
+describe("Message replay", () => {
+  afterEach(cleanup);
+  it("speaks with the accent the message carries", () => {
+    const speak = renderMessage({
+      voice: "Aria",
+      voiceLanguageCode: "en-NZ"
+    });
+    fireEvent.click(screen.getByRole("button", {
+      name: /Speak message/i
+    }));
+
+    // 5th positional argument of speak() is the accent.
+    expect(speak).toHaveBeenCalled();
+    expect(speak.mock.calls[0][1]).toBe("Aria");
+    expect(speak.mock.calls[0][4]).toBe("en-NZ");
+  });
+  it("sends no accent when nothing supplies one", () => {
+    const speak = renderMessage({
+      voice: "Joanna"
+    });
+    fireEvent.click(screen.getByRole("button", {
+      name: /Speak message/i
+    }));
+    expect(speak.mock.calls[0][4]).toBeUndefined();
+  });
+});

package/dist/Containers/App/App.js

@@ -386,16 +386,20 @@ function App({
           startIcon: /*#__PURE__*/_jsx(Add, {}),
           color: "secondary",
           id: "appbar-create-button",
+          disabled: !subscription?.isSubscriptionLoaded,
           children: t("create")
         }) : /*#__PURE__*/_jsx(Tooltip, {
           title: t("create"),
           enterDelay: 300,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            color: "inherit",
-            "aria-label": t("create"),
-            "aria-haspopup": "true",
-            onClick: handleClickCreate,
-            children: /*#__PURE__*/_jsx(Add, {})
+          children: /*#__PURE__*/_jsx("span", {
+            children: /*#__PURE__*/_jsx(IconButton, {
+              color: "inherit",
+              "aria-label": t("create"),
+              "aria-haspopup": "true",
+              onClick: handleClickCreate,
+              disabled: !subscription?.isSubscriptionLoaded,
+              children: /*#__PURE__*/_jsx(Add, {})
+            })
           })
         })), isLgScreen && /*#__PURE__*/_jsx(WhatsNew, {
           t: t,

package/dist/Dialogs/CreatePhrase/CreatePhrase.js

@@ -57,6 +57,7 @@ function CreatePhrase({
   verificationStatus,
   makeChatGptApiRequest,
   difficulty,
+  openSnackbar,
   ...otherProps
 }) {
   const translationInputRef = useRef();
@@ -723,7 +724,8 @@ function CreatePhrase({
             autoSuggest: true,
             autoSuggestedImages: autoSuggestedImages,
             selectedImage: selectedImage,
-            verificationStatus: verificationStatus
+            verificationStatus: verificationStatus,
+            openSnackbar: openSnackbar
           })
         })]
       })]

package/dist/Dialogs/CreatePhraseGroupDialog/CreatePhraseGroupDialog.js

@@ -71,7 +71,8 @@ export default function CreatePhraseGroupDialog({
   onCreated,
   t = text => text,
   fileSizeLimit,
-  verificationStatus
+  verificationStatus,
+  openSnackbar
 }) {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
@@ -180,7 +181,8 @@ export default function CreatePhraseGroupDialog({
           autoCrop: true,
           autoSuggest: false,
           selectedImage: selectedImage,
-          verificationStatus: verificationStatus
+          verificationStatus: verificationStatus,
+          openSnackbar: openSnackbar
         })
       })]
     })

package/dist/Dialogs/GenerateRoleplay/GenerateRoleplay.js

@@ -110,13 +110,16 @@ function GenerateRoleplayDialog({
     if (generatedRoleplay && generatedRoleplay.script) {
       const tempMessages = generatedRoleplay.script.filter(l => !l?.question).map(line => {
         const isActor1 = line.actor === 1;
+        const actor = (isActor1 ? generatedRoleplay.actor1 : generatedRoleplay.actor2) || {};
         return {
           ...line,
           text: line.text,
           isMyMessage: !isActor1,
           name: getActorName(isActor1),
-          userImage: isActor1 ? generatedRoleplay.actor1 && generatedRoleplay.actor1.picture ? generatedRoleplay.actor1.picture : null : generatedRoleplay.actor2 && generatedRoleplay.actor2.picture ? generatedRoleplay.actor2.picture : null,
-          voice: isActor1 ? generatedRoleplay.actor1 && generatedRoleplay.actor1.voice ? generatedRoleplay.actor1.voice : null : generatedRoleplay.actor2 && generatedRoleplay.actor2.voice ? generatedRoleplay.actor2.voice : null
+          userImage: actor.picture || null,
+          voice: actor.voice || null,
+          voiceLanguageCode: actor.voiceLanguageCode || null,
+          voicePitch: actor.voicePitch || null
         };
       });
       setPreviewMessages(tempMessages);

package/dist/Dialogs/ImageBuilder/ImageBuilderDialog.js

@@ -7,13 +7,8 @@ import ImageBuilderControls from "./ImageBuilderControls";
 import ImageBuilderPreview from "./ImageBuilderPreview";
 import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
 import { PRESET_COLORS, ICON_KEYS } from "./iconPaths";
-import { generatePatternCanvas, getCenterCropDataUrl, getOptimalIconOpacity, shouldUseDarkIcons } from "./imageBuilderUtils";
-
-// Matches placeholder SVG ratio (21144 x 4890), scaled down 10x
+import { generateBuilderImages, getOptimalIconOpacity, shouldUseDarkIcons } from "./imageBuilderUtils";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const BANNER_W = 2114;
-const BANNER_H = 489;
-const CARD_SIZE = 489;
 const useStyles = makeStyles()(theme => ({
   body: {
     display: "flex",
@@ -51,19 +46,13 @@ export default function ImageBuilderDialog({
         cardDataUrl: null
       };
     }
-    const canvas = generatePatternCanvas({
+    return generateBuilderImages({
       color,
       iconKey,
       density: "dense",
       iconOpacity,
-      darkIcons,
-      width: BANNER_W,
-      height: BANNER_H
+      darkIcons
     });
-    return {
-      bannerDataUrl: canvas.toDataURL("image/png"),
-      cardDataUrl: getCenterCropDataUrl(canvas, CARD_SIZE)
-    };
   }, [color, iconKey, iconOpacity, darkIcons]);
 
   // Reset state when dialog opens

package/dist/Dialogs/ImageBuilder/imageBuilderUtils.js

@@ -4,6 +4,19 @@ const DENSITY_COLS = {
   medium: 10,
   dense: 14
 };
+
+// Base (logical) dimensions of a builder image. Matches placeholder SVG ratio
+// (21144 x 4890), scaled down 10x. The card is a centre-cropped square.
+export const BANNER_W = 2114;
+export const BANNER_H = 489;
+export const CARD_SIZE = 489;
+
+// Supersampling factor applied to the generated pixel dimensions so the stored
+// image stays crisp when scaled up on large / HiDPI screens. Device-independent
+// on purpose — the image is persisted and shared across devices, so we must not
+// bake window.devicePixelRatio into it. Tune this single knob to trade payload
+// size against sharpness.
+export const OUTPUT_SCALE = 2;
 function hexToRgb(hex) {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result ? {
@@ -87,6 +100,7 @@ export function generatePatternCanvas({
   canvas.width = width;
   canvas.height = height;
   const ctx = canvas.getContext("2d");
+  ctx.imageSmoothingQuality = "high";
 
   // 1. Solid background
   ctx.fillStyle = color;
@@ -107,10 +121,18 @@ export function generatePatternCanvas({
   };
   const maxDim = Math.max(vb.width, vb.height);
   const scale = iconSize / maxDim;
+
+  // Rasterise the stamp at its final on-canvas size by filling the vector paths
+  // through a scaled context. Previously the stamp was drawn at the raw viewBox
+  // size (e.g. 24px) and then upscaled ~4x when blitted onto the pattern canvas,
+  // which baked a blurry raster upscale into the source image. Filling from
+  // vectors at the target size keeps icons crisp while preserving the single
+  // stamp (so overlapping sub-paths don't double-composite at globalAlpha < 1).
   const stampCanvas = document.createElement("canvas");
-  stampCanvas.width = vb.width;
-  stampCanvas.height = vb.height;
+  stampCanvas.width = Math.ceil(vb.width * scale);
+  stampCanvas.height = Math.ceil(vb.height * scale);
   const stampCtx = stampCanvas.getContext("2d");
+  stampCtx.scale(scale, scale);
   stampCtx.fillStyle = darkIcons ? "#000" : "#fff";
   const path2Ds = iconData.paths.map(d => new Path2D(d));
   for (const p of path2Ds) {
@@ -131,9 +153,8 @@ export function generatePatternCanvas({
       ctx.save();
       ctx.translate(x, y);
       ctx.rotate(rotation);
-      ctx.scale(scale, scale);
-      ctx.translate(-vb.width / 2, -vb.height / 2);
-      ctx.drawImage(stampCanvas, 0, 0);
+      // Draw the pre-scaled stamp 1:1 (centred) — no upscaling here.
+      ctx.drawImage(stampCanvas, -stampCanvas.width / 2, -stampCanvas.height / 2);
       ctx.restore();
     }
   }
@@ -156,4 +177,25 @@ export function getCenterCropDataUrl(source, size) {
   const sx = (source.width - source.height) / 2;
   ctx.drawImage(source, sx, 0, source.height, source.height, 0, 0, size, size);
   return cropCanvas.toDataURL("image/png");
+}
+
+/**
+ * Generate the builder images (banner + centre-cropped card) at the shared
+ * supersampled output resolution. Single source of truth for the builder
+ * dimensions so callers don't duplicate the magic numbers.
+ *
+ * @param {Object} opts – forwarded to generatePatternCanvas (color, iconKey,
+ *   density, iconOpacity, darkIcons, seed)
+ * @returns {{ bannerDataUrl: string, cardDataUrl: string }}
+ */
+export function generateBuilderImages(opts) {
+  const canvas = generatePatternCanvas({
+    ...opts,
+    width: BANNER_W * OUTPUT_SCALE,
+    height: BANNER_H * OUTPUT_SCALE
+  });
+  return {
+    bannerDataUrl: canvas.toDataURL("image/png"),
+    cardDataUrl: getCenterCropDataUrl(canvas, CARD_SIZE * OUTPUT_SCALE)
+  };
 }

package/dist/Dialogs/QuickCreateChatbotDialog/QuickCreateChatbotDialog.js

@@ -459,7 +459,7 @@ export default function QuickCreateChatbotDialog({
     setSelectedVoicePitch(null);
     setBotPicture(picked.voice.userImage || "");
   }, [open, selectedVoice, voices]);
-  const selectedVoiceOption = findVoice(voices, selectedVoice)?.voice;
+  const selectedVoiceOption = findVoice(voices, selectedVoice, selectedVoiceLanguageCode)?.voice;
   const hasAvailableVoice = Boolean(selectedVoice && selectedVoiceLanguageCode);
   const isValid = Boolean(botTitle.trim()) && Boolean(difficulty) && Boolean(templateId) && Boolean(template && template.botId === templateId) && Number(numberOfQuestions) > 0 && hasAvailableVoice;
   const handleSubmit = async () => {
@@ -600,6 +600,7 @@ export default function QuickCreateChatbotDialog({
           name: "voiceSelector",
           label: t("bot_voice"),
           value: selectedVoice || "",
+          valueLanguageCode: selectedVoiceLanguageCode,
           margin: "normal",
           variant: "outlined",
           fullWidth: true,

package/dist/Dialogs/QuickCreateClassroomDialog/QuickCreateClassroomDialog.js

@@ -80,7 +80,8 @@ export default function QuickCreateClassroomDialog({
   userImage,
   forLang,
   languages,
-  forLanguages
+  forLanguages,
+  openSnackbar
 }) {
   const [classroomName, setClassroomName] = useState("");
   const [classroomDescription, setClassroomDescription] = useState("");
@@ -275,7 +276,8 @@ export default function QuickCreateClassroomDialog({
           autoSuggest: false,
           selectedImage: selectedImage,
           verificationStatus: verificationStatus,
-          onBuilderSettingsChange: setBuilderSettings
+          onBuilderSettingsChange: setBuilderSettings,
+          openSnackbar: openSnackbar
         })
       })]
     })

package/dist/Dialogs/QuickCreateCourseDialog/QuickCreateCourseDialog.js

@@ -83,7 +83,8 @@ export default function QuickCreateCourseDialog({
   difficulties = ["A1", "A2", "B1", "B2", "C1", "C2"],
   fileSizeLimit,
   verificationStatus,
-  userImage
+  userImage,
+  openSnackbar
 }) {
   const defaultSelectedImage = {
     image: "",
@@ -289,7 +290,8 @@ export default function QuickCreateCourseDialog({
           autoSuggest: false,
           selectedImage: selectedImage,
           verificationStatus: verificationStatus,
-          onBuilderSettingsChange: setBuilderSettings
+          onBuilderSettingsChange: setBuilderSettings,
+          openSnackbar: openSnackbar
         })
       })]
     })

package/dist/Dialogs/QuickCreateTopicDialog/QuickCreateTopicDialog.js

@@ -83,7 +83,8 @@ export default function QuickCreateTopicDialog({
   userImage,
   coursePicture,
   coursePictureBuilderColor,
-  coursePictureBuilderIcon
+  coursePictureBuilderIcon,
+  openSnackbar
 }) {
   // Only inherit the parent course image when it's a real user-set image.
   // If the course has no image, or its image was itself generated by the image
@@ -274,7 +275,8 @@ export default function QuickCreateTopicDialog({
           autoSuggest: false,
           selectedImage: selectedImage,
           verificationStatus: verificationStatus,
-          onBuilderSettingsChange: setBuilderSettings
+          onBuilderSettingsChange: setBuilderSettings,
+          openSnackbar: openSnackbar
         })
       })]
     })

package/dist/Editors/Bot/Bot.js

@@ -486,18 +486,20 @@ function Bot({
       return;
     }
     const voice = initialValues.voice;
+    const voiceLanguageCode = initialValues.voiceLanguageCode;
     const message = {
       isMyMessage: isMyMessage,
       userImage: isErrorMsg ? BotNualaImage : isMyMessage ? userAttributes && userAttributes.picture ? userAttributes.picture : null : bot && bot.botAvatar ? bot.botAvatar : null,
       name: isErrorMsg ? "Bot" : isMyMessage ? userAttributes && userAttributes.preferred_username ? userAttributes.preferred_username : "Me" : bot && bot.name ? bot.name : "Bot",
       text: text,
-      datetime: new Date()
+      datetime: new Date(),
+      // Recorded so the replay button reproduces what was spoken.
+      voice: voice,
+      voiceLanguageCode: voiceLanguageCode
     };
     setMessages(prevState => [...prevState, message]);
     if (playAudio !== false && learnLang !== "irish") {
-      speak(message.text, voice, false, `#message${messages.length + 1}`
-      //voiceLanguageCode
-      );
+      speak(message.text, voice, false, `#message${messages.length + 1}`, voiceLanguageCode);
     }
   };
   const handleSubmitText = async () => {
@@ -770,7 +772,8 @@ function Bot({
         courseId: courseId,
         sectionId: sectionId,
         topicId: topicId,
-        initialTopicGoal: initialTopicGoal
+        initialTopicGoal: initialTopicGoal,
+        openSnackbar: openSnackbar
       }) : null, tabValue === 1 ? /*#__PURE__*/_jsx(Box, {
         className: hidden ? classes.paneFull : classes.pane,
         children: BotPreview
@@ -791,7 +794,8 @@ function Bot({
           subscription: subscription,
           handleBotInstructionsImageUpload: handleBotInstructionsImageUpload,
           isUserInternal: isUserInternal,
-          verificationStatus: verificationStatus
+          verificationStatus: verificationStatus,
+          openSnackbar: openSnackbar
         })
       }) : null]
     }), /*#__PURE__*/_jsx(ResponsiveDialog, {

package/dist/Editors/Bot/Editor/BotDesigner/AddImageModal/AddImageModal.js

@@ -14,7 +14,8 @@ function AddImageModal(props) {
     open,
     handleUploadBotExerciseImage,
     botId,
-    verificationStatus
+    verificationStatus,
+    openSnackbar
   } = props;
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
@@ -76,7 +77,8 @@ function AddImageModal(props) {
         name: "image",
         value: selectedImage.image,
         handleChange: handleImageChange,
-        verificationStatus: verificationStatus
+        verificationStatus: verificationStatus,
+        openSnackbar: openSnackbar
       })]
     }), /*#__PURE__*/_jsxs(DialogActions, {
       children: [/*#__PURE__*/_jsx(Button, {