@nualang/nualang-ui-components 0.1.1272 → 0.1.1273

package/dist/Assignments/AssignmentBotSelection/AssignmentBotSelection.js

@@ -136,6 +136,9 @@ function Bot({
             }
           })]
         }), useCase === "assignment-select" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+          sx: {
+            marginRight: "15px"
+          },
           checked: isSelected,
           onClick: e => {
             e.stopPropagation();

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -57,14 +57,33 @@ const AssignmentCardsList = ({
         },
         display: "flex",
         flexDirection: "column",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          variant: "h5",
-          fontWeight: "bold",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          display: "flex",
+          alignItems: "center",
           sx: {
-            textAlign: "center",
-            flexGrow: 1
+            width: "100%"
           },
-          children: t("no_assignments")
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+              flexGrow: 1,
+              textAlign: "center",
+              marginLeft: 5
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "h5",
+              fontWeight: "bold",
+              children: t("no_assignments")
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            placement: "left",
+            title: t("refresh_assignments"),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+              onClick: refreshAssignments,
+              "aria-label": "refresh",
+              size: "large",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Refresh.default, {})
+            })
+          })]
         }), !isCreator ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
             textAlign: "center",

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -195,8 +195,14 @@ function Exercise({
           secondary: t(description)
         })
       }), name.toLowerCase() === "roleplays" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+        sx: {
+          marginRight: "15px"
+        },
         children: roleplaysOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})
       }), name.toLowerCase() === "bots" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+        sx: {
+          marginRight: "15px"
+        },
         children: botsOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})
       }), (name.toLowerCase() === "listening" || name.toLowerCase() === "translation" || name.toLowerCase() === "pronunciation") && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemIcon, {
         children: [useCase === "assignment-select" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {

package/dist/Cards/Classroom/Classroom.js

@@ -221,6 +221,10 @@ function ClassroomCard({
           visibility: visibility
         })]
       }), userImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardAvatar, {
+        sx: theme => ({
+          backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
+          color: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd"
+        }),
         "aria-label": `${t("go_to")} ${createdByName || `${classroomName} ${t("creator")}`} ${t("profile")}`,
         title: createdByName || `${classroomName} creator`,
         src: userImage,

package/dist/Cards/Course/Course.js

@@ -380,6 +380,10 @@ function CourseCard({
           isCourseHidden: isCourseHidden
         })]
       }), userImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardAvatar, {
+        sx: theme => ({
+          backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
+          color: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd"
+        }),
         "aria-label": `${t("go_to")} ${createdByName || `${courseName} ${t("creator")}`} ${t("profile")}`,
         title: createdByName || `${courseName} creator`,
         src: userImage,
@@ -398,7 +402,7 @@ function CourseCard({
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardAvatar, {
         sx: theme => ({
           backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
-          color: theme.palette.mode === "dark" ? theme.palette.background.default : "white"
+          color: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd"
         }),
         "aria-label": `${t("go_to")} ${createdByName || `${courseName} ${t("creator")}`} ${t("profile")}`,
         title: createdByName || `${courseName} creator`,
@@ -506,7 +510,7 @@ function CourseCard({
         disabled: checked,
         "aria-label": "Select Course",
         children: checked ? t("selected") : t("select")
-      }), isCreator && !isMember && !selectable && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      }), (isCreator || isCollaborator && !isMember) && !selectable && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [!isClassroomArchived && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
           onClick: viewCourse,
           color: "primary",

package/dist/Chat/Chat.js

@@ -98,7 +98,8 @@ function Chat({
   siteLanguage,
   answerCounts,
   noAnswerCounts,
-  isDynamicResponsesEnabled
+  isDynamicResponsesEnabled,
+  isUserInternal
 }) {
   const {
     classes
@@ -162,7 +163,8 @@ function Chat({
       siteLanguage: siteLanguage,
       answerCounts: answerCounts,
       noAnswerCounts: noAnswerCounts,
-      isDynamicResponsesEnabled: isDynamicResponsesEnabled
+      isDynamicResponsesEnabled: isDynamicResponsesEnabled,
+      isUserInternal: isUserInternal
     }), !hideBottomBar && !viewAttemptMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BottomBar.default, {
       t: t,
       inputName: inputName,

package/dist/Chat/ChatLoading/ChatLoading.js

@@ -138,7 +138,8 @@ function ChatLoading({
   hideAvatar,
   messages = [],
   index,
-  isDynamicResponsesEnabled
+  isDynamicResponsesEnabled,
+  isUserInternal
 }) {
   const theme = (0, _styles.useTheme)();
   const isSmallScreen = (0, _useMediaQuery.default)(theme.breakpoints.down("sm"));
@@ -157,7 +158,7 @@ function ChatLoading({
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classes.message,
       children: [userImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: !isMyMessage && isDynamicResponsesEnabled === 'enable' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: !isMyMessage && isDynamicResponsesEnabled === 'enable' && isUserInternal ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           style: {
             position: "relative",
             display: "inline-block"

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

@@ -300,7 +300,8 @@ function Message({
   siteLanguage,
   provided,
   isEdited = false,
-  isDynamicResponsesEnabled
+  isDynamicResponsesEnabled,
+  isUserInternal
 }) {
   const theme = (0, _styles.useTheme)();
   const messageContainerId = `message${messageIndex}`;
@@ -372,7 +373,7 @@ function Message({
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classes.message,
       children: [userImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: !isMyMessage && isDynamicResponsesEnabled === 'enable' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: !isMyMessage && isDynamicResponsesEnabled === 'enable' && isUserInternal ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           style: {
             position: "relative",
             display: "inline-block"

package/dist/Chat/Messages/Messages.js

@@ -62,6 +62,7 @@ function Messages({
   moveScriptItem,
   voice,
   isDynamicResponsesEnabled,
+  isUserInternal,
   ...otherProps
 }) {
   const {
@@ -228,6 +229,7 @@ function Messages({
               index: i,
               messages: messages,
               isDynamicResponsesEnabled: isDynamicResponsesEnabled,
+              isUserInternal: isUserInternal,
               ...m,
               ...otherProps
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default, {
@@ -251,6 +253,7 @@ function Messages({
               isLivePlayer: isLivePlayer,
               siteLanguage: siteLanguage,
               isDynamicResponsesEnabled: isDynamicResponsesEnabled,
+              isUserInternal: isUserInternal,
               ...m,
               ...otherProps
             }, `messy_${i}`))]

package/dist/Dialogs/InviteDialog/InviteDialog.js

@@ -338,8 +338,7 @@ function InviteDialog({
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.List, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
               children: t("or_invite_via")
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-              button: true,
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
               disableGutters: true,
               onClick: toggleQRCodeDisplay,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
@@ -354,8 +353,7 @@ function InviteDialog({
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
                 primary: "QR Code"
               })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-              button: true,
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
               disableGutters: true,
               onClick: () => openWindow(`mailto:?subject=${t("invite_email_subject")} ${inviteTypeState.toLowerCase()}&body=${studentInstructionsEmailBody()}`),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
@@ -370,8 +368,7 @@ function InviteDialog({
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
                 primary: "Email"
               })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-              button: true,
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
               disableGutters: true,
               onClick: () => openWindow(googleClassroomLink),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
@@ -386,8 +383,7 @@ function InviteDialog({
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
                 primary: "Google Classroom"
               })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-              button: true,
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
               disableGutters: true,
               onClick: () => openWindow(facebookLink),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
@@ -402,8 +398,7 @@ function InviteDialog({
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
                 primary: "Facebook"
               })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-              button: true,
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
               disableGutters: true,
               onClick: () => openWindow(twitterLink),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
@@ -464,14 +459,13 @@ function InviteDialog({
             picture,
             courses
           } = c;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
             onClick: async () => {
               if (courses && Array.isArray(courses) && courses.includes(itemId)) {
                 setInviteStateType("classroom");
                 setSelectedClassroomId(classroomId);
               }
             },
-            button: true,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
               children: picture ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
                 src: picture,
@@ -579,8 +573,7 @@ function InviteDialog({
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.List, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
               children: t("or_invite_via")
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-              button: true,
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
               disableGutters: true,
               onClick: toggleQRCodeDisplay,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
@@ -595,8 +588,7 @@ function InviteDialog({
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
                 primary: "QR Code"
               })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-              button: true,
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
               disableGutters: true,
               onClick: () => openWindow(`mailto:?subject=${t("invite_email_subject")} ${inviteTypeState.toLowerCase()}&body=${studentInstructionsEmailBody()}`),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
@@ -611,8 +603,7 @@ function InviteDialog({
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
                 primary: "Email"
               })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-              button: true,
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
               disableGutters: true,
               onClick: () => openWindow(googleClassroomLink),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
@@ -627,8 +618,7 @@ function InviteDialog({
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
                 primary: "Google Classroom"
               })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-              button: true,
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
               disableGutters: true,
               onClick: () => openWindow(facebookLink),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
@@ -643,8 +633,7 @@ function InviteDialog({
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
                 primary: "Facebook"
               })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-              button: true,
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
               disableGutters: true,
               onClick: () => openWindow(twitterLink),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {

package/dist/Dialogs/UploadBotVars/UploadBotVars.js

@@ -15,6 +15,7 @@ var _material = require("@mui/material");
 var _mui = require("tss-react/mui");
 var _ParseScriptErrors = _interopRequireDefault(require("../../Lists/ParseScriptErrors/ParseScriptErrors"));
 var _CSVUploader = _interopRequireDefault(require("../../Misc/CSVUploader"));
+var _useDebounce = _interopRequireDefault(require("../../hooks/useDebounce"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // components
@@ -35,6 +36,8 @@ function UploadBotVars({
   } = useStyles();
   const [vars, setVars] = (0, _react.useState)([]);
   const [errors, setErrors] = (0, _react.useState)([]);
+  const [csvDataInput, setCsvDataInput] = (0, _react.useState)("");
+  const debouncedCsvDataInput = (0, _useDebounce.default)(csvDataInput, 2000);
   const SpreadSheetImg = (0, _styles.styled)("img")(() => ({
     display: "block",
     maxHeight: "200px"
@@ -76,6 +79,42 @@ function UploadBotVars({
     }
     handleClose();
   };
+  const formatBotVars = botVars => {
+    let varArray = {};
+    botVars.forEach((data, index) => {
+      if (!data.name || !data.value) {
+        setErrors(prevState => [...prevState, {
+          row: index + 1,
+          errorMessage: "Missing variable name or value"
+        }]);
+      } else {
+        varArray[data.name] = data.value;
+      }
+    });
+    setVars(varArray);
+    return varArray;
+  };
+  (0, _react.useEffect)(() => {
+    const handleUploadCsvDataText = async () => {
+      setErrors([]);
+      const lines = csvDataInput.trim().split('\n');
+      const headers = lines[0].split(',').map(h => h.trim());
+      const rows = lines.slice(1);
+      const jsonArray = rows.map(row => {
+        const values = row.match(/(".*?"|[^",\n]+)(?=\s*,|\s*$)/g).map(v => v.replace(/^"|"$/g, '').trim());
+        const entry = {};
+        headers.forEach((header, i) => {
+          entry[header] = values[i] ?? '';
+        });
+        return entry;
+      });
+      const formattedBotVars = formatBotVars(jsonArray);
+      setVars(formattedBotVars);
+    };
+    if (debouncedCsvDataInput !== "debouncedCsvDataInput") {
+      handleUploadCsvDataText();
+    }
+  }, [debouncedCsvDataInput]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveDialog.default, {
     open: open,
     handleClose: () => {
@@ -111,6 +150,23 @@ function UploadBotVars({
         t: t,
         handleUploadAccepted: handleUploadAccepted
       })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+      sx: {
+        my: 2
+      },
+      children: "OR"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+        id: "csvDataInput",
+        name: "csvDataInput",
+        label: t("paste_your_csv_data"),
+        placeholder: `name, value\ntext1, "What is your favorite color?"\ntext2, "What is your favorite food?"`,
+        value: csvDataInput,
+        fullWidth: true,
+        multiline: true,
+        rows: 4,
+        onChange: e => setCsvDataInput(e.target.value)
+      })
     }), errors && errors.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       className: classes.parseErrorsBox,
       py: 1,

package/dist/Dialogs/UploadPhrases/UploadPhrases.js

@@ -30,6 +30,7 @@ var _Grow = _interopRequireDefault(require("@mui/material/Grow"));
 var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
+var _useDebounce = _interopRequireDefault(require("../../hooks/useDebounce"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const phrasesData = [{
@@ -122,6 +123,58 @@ function UploadPhrases({
   const [errors, setErrors] = (0, _react.useState)([]);
   const [isError, setisError] = (0, _react.useState)(false);
   const [errorMessage, setErrorMessage] = (0, _react.useState)("");
+  const [csvDataInput, setCsvDataInput] = (0, _react.useState)("");
+  const debouncedCsvDataInput = (0, _useDebounce.default)(csvDataInput, 2000);
+  const formatPhrases = phrases => {
+    return phrases.map((data, index) => {
+      const rowErrors = validateRow(data.phrase, data.translations, index);
+      if (index !== phrases.length - 1 && !isRowEmpty(data)) {
+        if (rowErrors) {
+          setErrors(prevState => [...prevState, ...rowErrors]);
+        }
+      }
+      if (data.phrase) {
+        if (learnLang === forLang && (!data.translations || data.translations.trim() === "")) {
+          data.translations = data.phrase;
+        }
+        const {
+          primary,
+          alternatives
+        } = parsePhraseWithAlternatives(data.phrase);
+        const formattedTranslations = data.translations.split("|").map(t => t.trim().replace(/^"|"$/g, '').trim());
+        return {
+          phrase: primary,
+          alternativeVersions: alternatives,
+          translations: formattedTranslations,
+          image: data.image ? data.image.trim() : "",
+          voices: [],
+          idx: index
+        };
+      }
+      return null;
+    }).filter(phrase => !!phrase);
+  };
+  (0, _react.useEffect)(() => {
+    const handleUploadCsvDataText = async () => {
+      setErrors([]);
+      const lines = csvDataInput.trim().split('\n');
+      const headers = lines[0].split(',').map(h => h.trim());
+      const rows = lines.slice(1);
+      const jsonArray = rows.map(row => {
+        const values = row.match(/(".*?"|[^",\n]+)(?=\s*,|\s*$)/g).map(v => v.replace(/^"|"$/g, '').trim());
+        const entry = {};
+        headers.forEach((header, i) => {
+          entry[header] = values[i] ?? '';
+        });
+        return entry;
+      });
+      const formattedPhrases = formatPhrases(jsonArray);
+      setPhrases(formattedPhrases);
+    };
+    if (debouncedCsvDataInput !== "debouncedCsvDataInput") {
+      handleUploadCsvDataText();
+    }
+  }, [debouncedCsvDataInput]);
   const handleUploadAccepted = async (results, file) => {
     setErrors([]);
     if (file.type !== "text/csv") {
@@ -141,33 +194,7 @@ function UploadPhrases({
       setErrors(prevState => [...prevState, ...formattedErrors]);
       return;
     } else {
-      const formattedPhrases = results.data.map((data, index) => {
-        const rowErrors = validateRow(data.phrase, data.translations, index);
-        if (index !== results.data.length - 1 && !isRowEmpty(data)) {
-          if (rowErrors) {
-            setErrors(prevState => [...prevState, ...rowErrors]);
-          }
-        }
-        if (data.phrase) {
-          if (learnLang === forLang && (!data.translations || data.translations.trim() === "")) {
-            data.translations = data.phrase;
-          }
-          const {
-            primary,
-            alternatives
-          } = parsePhraseWithAlternatives(data.phrase);
-          const formattedTranslations = data.translations.split("|").map(t => t.trim());
-          return {
-            phrase: primary,
-            alternativeVersions: alternatives,
-            translations: formattedTranslations,
-            image: data.image ? data.image.trim() : "",
-            voices: [],
-            idx: index
-          };
-        }
-        return null;
-      }).filter(phrase => !!phrase);
+      const formattedPhrases = formatPhrases(results.data);
       setPhrases(formattedPhrases);
     }
   };
@@ -227,6 +254,23 @@ function UploadPhrases({
         t: t,
         handleUploadAccepted: handleUploadAccepted
       })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+      sx: {
+        my: 2
+      },
+      children: "OR"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+        id: "csvDataInput",
+        name: "csvDataInput",
+        label: t("paste_your_csv_data"),
+        placeholder: `phrase, translations\n"Hola", "Hello | Hi"\n"Adios", "Goodbye"`,
+        value: csvDataInput,
+        fullWidth: true,
+        multiline: true,
+        rows: 4,
+        onChange: e => setCsvDataInput(e.target.value)
+      })
     }), errors.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
       className: classes.parseErrorsBox,
       py: 1,

package/dist/Dialogs/UploadRoleplayScript/UploadRoleplayScript.js

@@ -15,6 +15,7 @@ var _material = require("@mui/material");
 var _mui = require("tss-react/mui");
 var _ParseScriptErrors = _interopRequireDefault(require("../../Lists/ParseScriptErrors/ParseScriptErrors"));
 var _CSVUploader = _interopRequireDefault(require("../../Misc/CSVUploader"));
+var _useDebounce = _interopRequireDefault(require("../../hooks/useDebounce"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // components
@@ -35,6 +36,8 @@ function UploadRoleplayScript({
   } = useStyles();
   const [script, setScript] = (0, _react.useState)([]);
   const [errors, setErrors] = (0, _react.useState)([]);
+  const [csvDataInput, setCsvDataInput] = (0, _react.useState)("");
+  const debouncedCsvDataInput = (0, _useDebounce.default)(csvDataInput, 2000);
   const formatData = data => {
     if (data.Type && data.Type.toLowerCase().includes("actor")) {
       const actorNumber = data.Type.substr(data.Type.length - 1);
@@ -171,6 +174,47 @@ function UploadRoleplayScript({
     }
     handleClose();
   };
+  const formatRoleplayScript = roleplayScipt => {
+    let varArray = [];
+    roleplayScipt.forEach((data, index) => {
+      if (!data.Type || !data["Text/Question"]) {
+        setErrors(prevState => [...prevState, {
+          row: index + 1,
+          errorMessage: "Missing Type or Text/Question"
+        }]);
+      } else {
+        const actor = data.Type === "Actor1" ? 1 : data.Type === "Actor2" ? 2 : null;
+        if (actor) {
+          varArray.push({
+            actor: actor,
+            text: data["Text/Question"]
+          });
+        }
+      }
+    });
+    return varArray;
+  };
+  (0, _react.useEffect)(() => {
+    const handleUploadCsvDataText = async () => {
+      setErrors([]);
+      const lines = csvDataInput.trim().split('\n');
+      const headers = lines[0].split(',').map(h => h.trim());
+      const rows = lines.slice(1);
+      const jsonArray = rows.map(row => {
+        const values = row.match(/(".*?"|[^",\n]+)(?=\s*,|\s*$)/g).map(v => v.replace(/^"|"$/g, '').trim());
+        const entry = {};
+        headers.forEach((header, i) => {
+          entry[header] = values[i] ?? '';
+        });
+        return entry;
+      });
+      const formattedRoleplayScript = formatRoleplayScript(jsonArray);
+      setScript(formattedRoleplayScript);
+    };
+    if (debouncedCsvDataInput !== "debouncedCsvDataInput") {
+      handleUploadCsvDataText();
+    }
+  }, [debouncedCsvDataInput]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveDialog.default, {
     open: open,
     handleClose: () => {
@@ -205,6 +249,23 @@ function UploadRoleplayScript({
         t: t,
         handleUploadAccepted: handleUploadAccepted
       })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+      sx: {
+        my: 2
+      },
+      children: "OR"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+        id: "csvDataInput",
+        name: "csvDataInput",
+        label: t("paste_your_csv_data"),
+        placeholder: `Type, Text/Question\nActor1, "How are you?"\nActor2, "I am fine, thank you!"`,
+        value: csvDataInput,
+        fullWidth: true,
+        multiline: true,
+        rows: 4,
+        onChange: e => setCsvDataInput(e.target.value)
+      })
     }), errors && errors.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       className: classes.parseErrorsBox,
       py: 1,

package/dist/Editors/Bot/Bot.js

@@ -203,7 +203,7 @@ function Bot({
   const isSmallScreen = (0, _useMediaQuery.default)(theme.breakpoints.down("md"));
   const tabVariant = isSmallScreen ? "fullWidth" : null;
   const [tabValue, setTabValue] = (0, _react.useState)(0);
-  const [simplified, setSimplified] = (0, _react.useState)(initialValues.editorMode === "advanced" ? false : true);
+  const [simplified, setSimplified] = (0, _react.useState)(true);
   const [disableInput, setDisableInput] = (0, _react.useState)(true);
   const {
     voice
@@ -563,7 +563,7 @@ function Bot({
       if (codeParsed) {
         await onSubmit({
           riveFile: bot.riveFile,
-          editorMode: simplified ? "simplified" : "advanced"
+          editorMode: "simplified"
         });
       } else {
         teardownBot();

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

@@ -75,8 +75,7 @@ function AlternativesList({
     component: "nav",
     "aria-label": "nested-list-subheader",
     disablePadding: true,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-      button: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
       onClick: handleClick,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
         primary: t("alternatives"),
@@ -86,8 +85,7 @@ function AlternativesList({
       in: open,
       timeout: "auto",
       unmountOnExit: true,
-      children: [!simplified && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-        button: true,
+      children: [!simplified && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
         className: classes.nested,
         onClick: handleOpenAlternativesModal,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {

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

@@ -73,8 +73,7 @@ function SubList({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.List, {
     component: "nav",
     disablePadding: true,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-      button: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
       onClick: handleClick,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
         primary: t("substitutions"),
@@ -84,8 +83,7 @@ function SubList({
       in: open,
       timeout: "auto",
       unmountOnExit: true,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-        button: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
         className: classes.nested,
         onClick: handleOpenSubstitutionModal,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {

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

@@ -126,9 +126,8 @@ function TopicListItem({
     }
   }, [open, selectedNode, topicName]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
       className: classes.nested,
-      button: true,
       onClick: handleClick,
       selected: selectedNode && selectedNode.startsWith(`node${topicName}`),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
@@ -155,8 +154,7 @@ function TopicListItem({
           className: classes.nested2,
           children: t("triggers")
         }),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-          button: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
           className: classes.nested2,
           onClick: e => {
             setTopicName(topicName);
@@ -250,8 +248,7 @@ function TopicList({
     disablePadding: true,
     ref: topicsRef,
     id: "topics",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-      button: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
       onClick: handleClick,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
         primary: t("topics"),
@@ -261,8 +258,7 @@ function TopicList({
       in: open,
       timeout: "auto",
       unmountOnExit: true,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-        button: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
         className: classes.nested,
         onClick: handleOpenTopicModal,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {

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

@@ -172,8 +172,7 @@ function VarListItem({
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
           my: 1,
           width: "100%",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-            button: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
             onClick: e => {
               e.target.value = `(${[...options, ""].join("|")})`;
               e.target.name = varName;
@@ -255,8 +254,7 @@ function VarList({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.List, {
     component: "nav",
     disablePadding: true,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-      button: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
       onClick: handleClick,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
         primary: t("variables"),
@@ -266,8 +264,7 @@ function VarList({
       in: open,
       timeout: "auto",
       unmountOnExit: true,
-      children: [!simplified && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-        button: true,
+      children: [!simplified && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
         className: classes.nested,
         onClick: handleOpenVariableModal,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
@@ -277,8 +274,7 @@ function VarList({
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
           primary: t("add_new")
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-        button: true,
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
         className: classes.nested,
         onClick: handleOpenVariableUpload,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
@@ -286,8 +282,7 @@ function VarList({
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
           primary: t("upload")
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-        button: true,
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
         className: classes.nested,
         onClick: () => {
           (0, _handleBotVarsDownload.default)(varEntries, botName);

package/dist/Exercises/Bot/Bot.js

@@ -637,7 +637,8 @@ function Bot({
         stopSpeaking: stopSpeaking,
         isSpeaking: isSpeaking,
         isSpeakingTextContainer: isSpeakingTextContainer,
-        isDynamicResponsesEnabled: isDynamicResponsesClassroomEnabled
+        isDynamicResponsesEnabled: isDynamicResponsesClassroomEnabled,
+        isUserInternal: isUserInternal
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveDialog.default, {
         open: instructionDialogOpen,
         handleClose: handleCloseInstructions,

package/dist/Forms/UpdateBot/UpdateBot.js

@@ -44,7 +44,8 @@ function UpdateBot({
     studentInstructions: "",
     tags: [],
     phrasesToBoost: [],
-    isDynamicResponsesEnabled: "enable"
+    isDynamicResponsesEnabled: "enable",
+    isAdvancedBot: false
   },
   verificationStatus,
   onSubmit,
@@ -81,7 +82,8 @@ function UpdateBot({
     introMessage,
     tags,
     phrasesToBoost,
-    isDynamicResponsesEnabled
+    isDynamicResponsesEnabled,
+    isAdvancedBot
   } = initialValues;
   const difficultyOptions = difficulties.map((d, idx) => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
@@ -175,7 +177,8 @@ function UpdateBot({
         visibility,
         translationEnabled,
         picture,
-        isDynamicResponsesEnabled
+        isDynamicResponsesEnabled,
+        isAdvancedBot
       },
       enableReinitialize: enableReinitialize,
       validationSchema: _Steps.BotSettings.validationSchema,

package/dist/Lists/Exercises/Exercises.js

@@ -671,7 +671,7 @@ function BotListItem({
             onClick: markBotAsAdvanced,
             "aria-label": isBotAdvanced ? "Unmark bot as advanced" : "Mark bot as advanced",
             disabled: isCreator ? false : true,
-            children: isBotAdvanced ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlashOff.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlashOn.default, {})
+            children: isBotAdvanced ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlashOn.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlashOff.default, {})
           })
         }) : null, isCreator && isLargeScreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
           title: t("move_bot"),

package/dist/Lists/Phrases/Phrases.js

@@ -21,6 +21,7 @@ var _utils = require("../../utils");
 var _styles = require("@mui/material/styles");
 var _useConfirm = _interopRequireDefault(require("../../hooks/useConfirm"));
 var _sortable = require("@dnd-kit/sortable");
+var _DragHandle = _interopRequireDefault(require("@mui/icons-material/DragHandle"));
 var _dragAndDrop = require("../../utils/dragAndDrop/dragAndDrop");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -79,9 +80,7 @@ function Phrase(props) {
     siteLanguage,
     selectedPhrases,
     handleSelectPhrase,
-    verificationStatus,
-    isDragDisabled,
-    setDisableDrag
+    verificationStatus
   } = props;
   const {
     phrase = "",
@@ -113,7 +112,6 @@ function Phrase(props) {
   const handleClickOpenListener = () => {
     if (isbrowserSupported) {
       setIsListenerOpen(true);
-      setDisableDrag(true);
     } else {
       setbrowserSupported(false);
       window.alert("Native microphone recording is only supported in https. Please use localhost for testing purposes");
@@ -125,15 +123,12 @@ function Phrase(props) {
   };
   const handleCloseListener = () => {
     setIsListenerOpen(false);
-    setDisableDrag(false);
   };
   const handleClickOpenUpdate = () => {
     setIsUpdateOpen(true);
-    setDisableDrag(true);
   };
   const handleCloseUpdate = () => {
     setIsUpdateOpen(false);
-    setDisableDrag(false);
   };
   const combinedVoices = props.phrase.voices && props.phrase.voices.length > 0 ? [{
     label: "Uploaded",
@@ -275,18 +270,6 @@ function Phrase(props) {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {})
               })
             })
-          }), !disableDragAndDrop && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-            title: t("move_phrase"),
-            enterDelay: 300,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
-              style: {
-                cursor: "move"
-              },
-              "aria-label": "Move phrase",
-              disabled: isDragDisabled || disableDragAndDrop,
-              size: "large",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DragIndicator.default, {})
-            })
           })]
         })]
       })]
@@ -359,7 +342,6 @@ function PhraseList({
   const [confirm] = (0, _useConfirm.default)(t);
   const [phrasesArray, setPhrasesArray] = (0, _react.useState)([]);
   const [selectedPhrases, setSelectedPhrases] = (0, _react.useState)([]);
-  const [disableDrag, setDisableDrag] = (0, _react.useState)(false);
 
   // Used for useEffect as dependency to check for a phrase
   // update in array.
@@ -441,7 +423,7 @@ function PhraseList({
       }, index))
     });
   }
-  return !disableDrag ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dragAndDrop.SortableDndContextWrapper, {
+  return !isDragDisabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dragAndDrop.SortableDndContextWrapper, {
     onDragEnd: onDragEnd,
     items: phrasesArray.map(phrase => `phrase-${phrase.phraseId}`),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
@@ -494,24 +476,50 @@ function PhraseList({
           })]
         })]
       }),
-      children: phrasesArray.map((phrase, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_dragAndDrop.Sortable, {
-        disabled: isDragDisabled,
+      children: phrasesArray.map((phrase, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_dragAndDrop.SortableHandleOnly, {
         sortId: `phrase-${phrase.phraseId}`,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Phrase, {
-          t: t,
-          phraseIndex: index,
-          phrase: phrase,
-          isCreator: isCreator,
-          disableGutters: disableGutters,
-          disableActions: disableActions,
-          disableDragAndDrop: disableDragAndDrop,
-          selectedPhrases: selectedPhrases,
-          handleSelectPhrase: handleSelectPhrase,
-          handleRemovePhrase: handleRemovePhrase,
-          handleDeletePhrases: handleDeletePhrases,
-          isDragDisabled: isDragDisabled,
-          setDisableDrag: setDisableDrag,
-          ...otherProps
+        index: phrase.phraseId,
+        renderHandle: ({
+          setActivatorNodeRef,
+          listeners
+        }) => isCreator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+          title: t("move_phrase"),
+          enterDelay: 300,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+            size: "large",
+            "aria-label": "Drag Answer",
+            ref: setActivatorNodeRef,
+            ...listeners,
+            disabled: isDragDisabled || disableDragAndDrop,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DragHandle.default, {})
+          })
+        }),
+        children: ({
+          renderHandle
+        }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            flexGrow: 1,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Phrase, {
+              t: t,
+              phraseIndex: index,
+              phrase: phrase,
+              isCreator: isCreator,
+              disableGutters: disableGutters,
+              disableActions: disableActions,
+              disableDragAndDrop: disableDragAndDrop,
+              selectedPhrases: selectedPhrases,
+              handleSelectPhrase: handleSelectPhrase,
+              handleRemovePhrase: handleRemovePhrase,
+              handleDeletePhrases: handleDeletePhrases,
+              ...otherProps
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            ml: isCreator ? -2 : undefined,
+            children: renderHandle && renderHandle()
+          })]
         })
       }, `phrase-${phrase.phraseId}`))
     })
@@ -565,24 +573,50 @@ function PhraseList({
         })]
       })]
     }),
-    children: phrasesArray.map((phrase, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_dragAndDrop.Sortable, {
-      disabled: isDragDisabled,
+    children: phrasesArray.map((phrase, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_dragAndDrop.SortableHandleOnly, {
       sortId: `phrase-${phrase.phraseId}`,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Phrase, {
-        t: t,
-        phraseIndex: index,
-        phrase: phrase,
-        isCreator: isCreator,
-        disableGutters: disableGutters,
-        disableActions: disableActions,
-        disableDragAndDrop: disableDragAndDrop,
-        selectedPhrases: selectedPhrases,
-        handleSelectPhrase: handleSelectPhrase,
-        handleRemovePhrase: handleRemovePhrase,
-        handleDeletePhrases: handleDeletePhrases,
-        isDragDisabled: isDragDisabled,
-        setDisableDrag: setDisableDrag,
-        ...otherProps
+      index: phrase.phraseId,
+      renderHandle: ({
+        setActivatorNodeRef,
+        listeners
+      }) => isCreator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: t("move_phrase"),
+        enterDelay: 300,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          size: "large",
+          "aria-label": "Drag Answer",
+          ref: setActivatorNodeRef,
+          ...listeners,
+          disabled: isDragDisabled || disableDragAndDrop,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DragHandle.default, {})
+        })
+      }),
+      children: ({
+        renderHandle
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          flexGrow: 1,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Phrase, {
+            t: t,
+            phraseIndex: index,
+            phrase: phrase,
+            isCreator: isCreator,
+            disableGutters: disableGutters,
+            disableActions: disableActions,
+            disableDragAndDrop: disableDragAndDrop,
+            selectedPhrases: selectedPhrases,
+            handleSelectPhrase: handleSelectPhrase,
+            handleRemovePhrase: handleRemovePhrase,
+            handleDeletePhrases: handleDeletePhrases,
+            ...otherProps
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          ml: isCreator ? -2 : undefined,
+          children: renderHandle && renderHandle()
+        })]
       })
     }, `phrase-${phrase.phraseId}`))
   });

package/dist/Misc/ImageLibrary/ImageLibrary.js

@@ -247,8 +247,7 @@ function ImageLibrary({
           className: classes.list,
           component: "nav",
           disablePadding: true,
-          children: categories.map((category, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
-            button: true,
+          children: categories.map((category, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemButton, {
             selected: selectedCategory === category,
             onClick: () => handleCategoryClick(category),
             className: classes.listItem,

package/dist/Misc/ShareButton/ShareDrawer.js

@@ -191,8 +191,7 @@ function ShareDrawer({
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
           primary: "Google Classroom"
         })]
-      }), subscription?.isPaidUser && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
-        button: true,
+      }), subscription?.isPaidUser && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
         onClick: () => openWindow(googleClassroomLink),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {

package/dist/Misc/SignOut/SignOut.js

@@ -46,7 +46,7 @@ function SignOut({
         alt: ""
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
         sx: theme => ({
-          backgroundColor: theme.palette.mode === "dark" ? "white" : "",
+          backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
           color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
         }),
         alt: "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1272",
+  "version": "0.1.1273",
   "main": "dist/index.js",
   "files": [
     "dist",