@nualang/nualang-ui-components 0.1.1412 → 0.1.1414

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/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/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

@@ -1,10 +1,14 @@
-import { useState, useEffect, forwardRef, useMemo, createElement } from "react";
-import { TextField, MenuItem, ListSubheader, Box, Paper, Typography } from "@mui/material";
-import { ForumRounded, QuizRounded, ImageRounded, SentimentSatisfiedRounded, CheckRounded } from "@mui/icons-material";
+import { useState, useEffect, forwardRef, createElement } from "react";
+import { TextField, MenuItem, ListSubheader, Box, Paper, Typography, Grid, Button, Avatar } from "@mui/material";
+import { ForumRounded, QuizRounded, ImageRounded, SentimentSatisfiedRounded, CheckRounded, Person } from "@mui/icons-material";
 import { useTheme, alpha } from "@mui/material/styles";
 import { keyframes } from "@emotion/react";
 import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
 import ChatbotNualaAnimation from "../../Misc/QuickCreateNualaAnimations/ChatbotNualaAnimation";
+import VoiceSelector from "../../Forms/VoiceSelector/VoiceSelector";
+import { findVoice, pickRandomVoice } from "../../utils/voices";
+import { makeStyles } from "tss-react/mui";
+import AvatarSelector from "../../Misc/AvatarSelector/AvatarSelector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const BOT_NAME_MAX_LENGTH = 100;
 const peekAnimation = keyframes`
@@ -14,6 +18,18 @@ const peekAnimation = keyframes`
   67%  { transform: translateX(-150px) rotate(75deg); }
   100% { transform: translateX(-150px) rotate(75deg); }
 `;
+const useStyles = makeStyles()(theme => ({
+  avatar: {
+    width: 70,
+    height: 70,
+    marginBottom: theme.spacing(2),
+    cursor: "pointer"
+  },
+  avatarIcon: {
+    width: "80%",
+    height: "80%"
+  }
+}));
 const ChatbotDialogPaper = /*#__PURE__*/forwardRef(function ChatbotDialogPaper({
   children,
   className,
@@ -378,7 +394,11 @@ export default function QuickCreateChatbotDialog({
   topicDifficulty,
   topicPicture,
   defaultNumberOfQuestions = 5,
-  voices = []
+  voices = [],
+  handleSpeak,
+  isUserInternal = false,
+  avatars,
+  learnLang
 }) {
   const [botTitle, setBotTitle] = useState("");
   const [difficulty, setDifficulty] = useState(topicDifficulty || "");
@@ -387,6 +407,14 @@ export default function QuickCreateChatbotDialog({
   const [riveFile, setRiveFile] = useState("");
   const [numberOfQuestions, setNumberOfQuestions] = useState(defaultNumberOfQuestions);
   const [isLoading, setIsLoading] = useState(false);
+  const [selectedVoice, setSelectedVoice] = useState(null);
+  const [selectedVoiceLanguageCode, setSelectedVoiceLanguageCode] = useState(null);
+  const [selectedVoicePitch, setSelectedVoicePitch] = useState(null);
+  const [botPicture, setBotPicture] = useState("");
+  const [avatarSelector, setAvatarSelector] = useState(false);
+  const {
+    classes
+  } = useStyles();
 
   // Keep the questions field in sync if the default changes while closed.
   useEffect(() => {
@@ -408,31 +436,31 @@ export default function QuickCreateChatbotDialog({
     setTemplateId("");
     setNumberOfQuestions(defaultNumberOfQuestions);
     handleClose();
+    // Cleared so the next open seeds a fresh random voice.
+    setSelectedVoice(null);
+    setSelectedVoiceLanguageCode(null);
+    setSelectedVoicePitch(null);
+    setBotPicture("");
+    setAvatarSelector(false);
+  };
+  const handleAvatarSelection = value => {
+    setBotPicture(value);
+    setAvatarSelector(false);
   };
-  const voicesArray = useMemo(() => {
-    return Object.entries(voices).flatMap(([key, dialect]) => {
-      if (!dialect?.voiceOptions || !Array.isArray(dialect.voiceOptions)) {
-        return [];
-      }
-      return dialect.voiceOptions.filter(voice => voice?.name) // Validate required properties
-      .map(voice => ({
-        voice,
-        dialect,
-        key
-      }));
-    });
-  }, [voices]);
 
-  // exclude legacy for random selection
-  const nonLegacyVoicePool = voicesArray.filter(v => !v.voice?.legacy && !v.legacy);
-  const voicePool = nonLegacyVoicePool.length > 0 ? nonLegacyVoicePool : voicesArray;
-  const randomIndex = Math.floor(Math.random() * voicePool.length);
-  const randomVoiceObj = voicePool[randomIndex] || {};
-  const {
-    voice: randomVoice,
-    dialect
-  } = randomVoiceObj;
-  const hasAvailableVoice = Boolean(randomVoice?.name && dialect?.languageCode);
+  // ActorForm assigns each actor a random voice on mount; standalone, the same
+  // seeding happens here each time the dialog opens with nothing chosen yet.
+  useEffect(() => {
+    if (!open || selectedVoice) return;
+    const picked = pickRandomVoice(voices);
+    if (!picked) return;
+    setSelectedVoice(picked.voice.name);
+    setSelectedVoiceLanguageCode(picked.dialect.languageCode);
+    setSelectedVoicePitch(null);
+    setBotPicture(picked.voice.userImage || "");
+  }, [open, selectedVoice, voices]);
+  const selectedVoiceOption = findVoice(voices, selectedVoice)?.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 () => {
     if (!isValid) return;
@@ -449,10 +477,11 @@ export default function QuickCreateChatbotDialog({
         selectedTemplate: templateId,
         numberOfQuestions: Number(numberOfQuestions),
         courseSectionTopicId: `${courseId}|${sectionId}|${topicId}`,
-        voice: randomVoice.name,
-        voiceLanguageCode: dialect.languageCode,
-        name: randomVoice.name,
-        botAvatar: randomVoice.userImage,
+        voice: selectedVoice,
+        voiceLanguageCode: selectedVoiceLanguageCode,
+        name: selectedVoice,
+        voicePitch: selectedVoicePitch,
+        botAvatar: botPicture,
         isChallengeBot: false,
         isDynamicResponsesEnabled: "enable",
         picture: topicPicture || template.picture
@@ -467,7 +496,7 @@ export default function QuickCreateChatbotDialog({
       setIsLoading(false);
     }
   };
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
+  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
     open: open,
     handleClose: isLoading ? undefined : resetAndClose,
     handleSubmit: handleSubmit,
@@ -476,7 +505,7 @@ export default function QuickCreateChatbotDialog({
     closeText: t("cancel") || "Cancel",
     submitText: t("create") || "Create",
     PaperComponent: ChatbotDialogPaper,
-    children: /*#__PURE__*/_jsxs(Box, {
+    children: [/*#__PURE__*/_jsxs(Box, {
       display: "flex",
       flexDirection: "column",
       gap: 1,
@@ -537,7 +566,90 @@ export default function QuickCreateChatbotDialog({
         },
         onKeyDown: e => e.key === "Enter" && handleSubmit(),
         margin: "normal"
+      }), /*#__PURE__*/_jsxs(Grid, {
+        size: 12,
+        sx: {
+          mt: 1
+        },
+        children: [botPicture ? /*#__PURE__*/_jsx(Avatar, {
+          "aria-label": selectedVoiceOption?.name,
+          src: botPicture,
+          className: classes.avatar,
+          onClick: () => setAvatarSelector(true),
+          alt: ""
+        }) : /*#__PURE__*/_jsx(Avatar, {
+          "aria-label": selectedVoiceOption?.name,
+          sx: theme => ({
+            backgroundColor: theme.palette.mode === "dark" ? "white" : "",
+            color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
+          }),
+          className: classes.avatar,
+          onClick: () => setAvatarSelector(true),
+          alt: "",
+          children: /*#__PURE__*/_jsx(Person, {
+            className: classes.avatarIcon
+          })
+        }), /*#__PURE__*/_jsx(Button, {
+          color: "primary",
+          component: "span",
+          onClick: () => setAvatarSelector(true),
+          children: t("choose_avatar")
+        }), /*#__PURE__*/_jsx(VoiceSelector, {
+          id: "voiceSelector",
+          "data-cy": "voiceSelector",
+          name: "voiceSelector",
+          label: t("bot_voice"),
+          value: selectedVoice || "",
+          margin: "normal",
+          variant: "outlined",
+          fullWidth: true,
+          required: learnLang !== "irish",
+          t: t,
+          voices: voices,
+          onChange: e => {
+            if (e && e.target && e.target.value) {
+              const selectedVoice = e.target.value;
+              const languageCode = e.target.languageCode;
+              setSelectedVoice(selectedVoice);
+              handleSpeak?.({
+                text: selectedVoice,
+                learnLanguage: learnLang,
+                voiceName: selectedVoice,
+                languageCode
+              });
+              setSelectedVoiceLanguageCode(languageCode);
+              setSelectedVoicePitch(null);
+              setBotPicture(e.target.picture);
+            }
+          },
+          onVoicePitchChange: e => {
+            if (e && e.target) {
+              setSelectedVoicePitch(e.target.value);
+              handleSpeak?.({
+                text: selectedVoiceLanguageCode ? t("voice_pitch_example", {
+                  name: selectedVoice,
+                  lng: selectedVoiceLanguageCode?.substring(0, 2)
+                }) : selectedVoice,
+                learnLanguage: learnLang,
+                voiceName: selectedVoice,
+                languageCode: selectedVoiceLanguageCode,
+                pitch: e.target.value
+              });
+            }
+          },
+          voicePitch: selectedVoicePitch,
+          isUserInternal: isUserInternal,
+          handleSpeak: handleSpeak,
+          learnLang: learnLang
+        })]
       })]
-    })
+    }), /*#__PURE__*/_jsx(AvatarSelector, {
+      t: t,
+      open: avatarSelector,
+      avatars: avatars,
+      picture: botPicture,
+      handleClose: () => setAvatarSelector(false),
+      handleSubmit: value => handleAvatarSelection(value)
+    })]
   });
 }

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/QuickCreateScenarioDialog/QuickCreateScenarioDialog.js

@@ -330,7 +330,6 @@ export default function QuickCreateScenarioDialog({
             isUserInternal: isUserInternal,
             handleSpeak: handleSpeak,
             avatars: avatars,
-            hidePitch: true,
             disabled: isLoading
           })
         }), /*#__PURE__*/_jsx(Grid, {

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

@@ -770,7 +770,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 +792,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, {

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

@@ -36,7 +36,8 @@ function BotDesigner(props) {
     handleUpdateAllVariables,
     handleUploadBotExerciseImage,
     botId,
-    handleOnBlur
+    handleOnBlur,
+    openSnackbar
   } = props;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [rivescriptJSON && rivescriptJSON.begin.var && /*#__PURE__*/_jsx(VarList, {
@@ -49,7 +50,8 @@ function BotDesigner(props) {
       handleUploadBotExerciseImage: handleUploadBotExerciseImage,
       botId: botId,
       handleOnBlur: handleOnBlur,
-      handleUpdateVariable: handleUpdateVariable
+      handleUpdateVariable: handleUpdateVariable,
+      openSnackbar: openSnackbar
     }), rivescriptJSON && rivescriptJSON.begin.array && /*#__PURE__*/_jsx(AlternativesList, {
       t: t,
       alternatives: rivescriptJSON.begin.array,

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

@@ -26,7 +26,8 @@ function VarListItem({
   handleOnBlur,
   handleUploadBotExerciseImage,
   verificationStatus,
-  botId
+  botId,
+  openSnackbar
 }) {
   const [selectedImage, setSelectedImage] = useState("");
   if (varValue && markdownImageLinkRegex.test(varValue)) {
@@ -72,6 +73,7 @@ function VarListItem({
           handleChange: handleImageChange,
           cropCompletedCallback: cropCompletedCallback,
           verificationStatus: verificationStatus,
+          openSnackbar: openSnackbar,
           autoGenerateDefault: false
           // fileSizeLimit={fileSizeLimit}
           ,
@@ -256,7 +258,8 @@ function VarList({
   handleSelectCurrentInput,
   handleUploadBotExerciseImage,
   botId,
-  handleOnBlur
+  handleOnBlur,
+  openSnackbar
 }) {
   const [open, setOpen] = useState(true);
   const [varUploader, setVarUploader] = useState(false);
@@ -276,7 +279,8 @@ function VarList({
       handleUploadBotExerciseImage: handleUploadBotExerciseImage,
       handleOnBlur: handleOnBlur,
       botId: botId,
-      handleUpdateVariable: handleUpdateVariable
+      handleUpdateVariable: handleUpdateVariable,
+      openSnackbar: openSnackbar
     }));
   }
   return /*#__PURE__*/_jsxs(List, {

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

@@ -93,7 +93,8 @@ function Editor({
   sectionId,
   topicId,
   initialTopicGoal,
-  verificationStatus
+  verificationStatus,
+  openSnackbar
 }) {
   const [formattingOptionsAnchorEl, setFormattingOptionsAnchorEl] = useState(null);
   const isFormattingOptionsOpen = Boolean(formattingOptionsAnchorEl);
@@ -566,7 +567,8 @@ function Editor({
         handleUpdateAlternatives: handleUpdateAlternatives,
         handleUploadBotExerciseImage: handleUploadBotExerciseImage,
         botId: bot.botId,
-        handleUpdateVariable: handleUpdateVariable
+        handleUpdateVariable: handleUpdateVariable,
+        openSnackbar: openSnackbar
       }), /*#__PURE__*/_jsx(TriggerDialog, {
         t: t,
         open: isTriggerModalOpen,
@@ -602,7 +604,8 @@ function Editor({
         botId: bot.botId,
         handleUploadBotExerciseImage: handleUploadBotExerciseImage,
         handleAddImage: handleAddImage,
-        verificationStatus: verificationStatus
+        verificationStatus: verificationStatus,
+        openSnackbar: openSnackbar
       }), /*#__PURE__*/_jsx(AddLinkModal, {
         classes: {},
         t: t,

package/dist/Editors/PhraseList/PhraseList.js

@@ -96,7 +96,8 @@ function PhraseList({
   otherPhraseLists,
   otherPhraseListsLoading,
   handleTransferPhrase,
-  handleCreatePhraseListFromSelection
+  handleCreatePhraseListFromSelection,
+  openSnackbar
 }) {
   const theme = useTheme();
   const {
@@ -357,7 +358,8 @@ function PhraseList({
           isGeneratePhrasesDialogOpen: isGeneratePhrasesDialogOpen,
           setIsGeneratePhrasesDialogOpen: setIsGeneratePhrasesDialogOpen,
           mode: mode,
-          scriptDownloadRef: scriptDownloadRef
+          scriptDownloadRef: scriptDownloadRef,
+          openSnackbar: openSnackbar
         })
       }) : null, tabValue === 1 ? /*#__PURE__*/_jsx(Box, {
         sx: {
@@ -378,7 +380,8 @@ function PhraseList({
           onSubmitExerciseSettings: onSubmitExerciseSettings,
           handleSpeak: handleSpeak,
           fileSizeLimit: fileSizeLimit,
-          verificationStatus: verificationStatus
+          verificationStatus: verificationStatus,
+          openSnackbar: openSnackbar
         })
       }) : null]
     })