@nualang/nualang-ui-components 0.1.1353 → 0.1.1355

package/dist/Dialogs/CreatePhrase/CreatePhrase.js

@@ -56,6 +56,7 @@ function CreatePhrase({
   validatePhraseRecognition,
   verificationStatus,
   makeChatGptApiRequest,
+  difficulty,
   ...otherProps
 }) {
   const translationInputRef = useRef();
@@ -78,6 +79,7 @@ function CreatePhrase({
   const [definition, setDefinition] = useState("");
   const [definitionList, setDefinitionList] = useState(otherProps.definitions || []);
   const [autoTranslatedText, setAutoTranslatedText] = useState(false);
+  const [autoGeneratedDefinitions, setAutoGeneratedDefinitions] = useState(false);
   const [checkingRecogniton, setCheckingRecogniton] = useState(false);
   const [recognised, setRecognised] = useState(false);
   const [notRecognised, setNotRecognised] = useState(false);
@@ -287,6 +289,39 @@ function CreatePhrase({
       setIsSubmitting(false);
     }
   };
+  const generateDefinitions = async () => {
+    try {
+      setIsSubmitting(true);
+      let chatGptResponse = await makeChatGptApiRequest({
+        model: "gpt-4o",
+        promptKey: "generateDefinitions",
+        promptVariables: {
+          learnLang,
+          forLang,
+          siteLanguage,
+          difficulty,
+          phrases: [{
+            phrase,
+            translations: translationList
+          }],
+          generateDefinitions: true
+        }
+      });
+      const definitions = chatGptResponse?.result?.[0]?.definitions;
+      if (!validateResponse(definitions)) {
+        throw new Error("Invalid AI response");
+      }
+      setAutoGeneratedDefinitions(definitions[0]);
+      setDefinitionList(prevDefinitionList => {
+        const newDefinitions = definitions.filter(text => !prevDefinitionList.includes(text));
+        return [...prevDefinitionList, ...newDefinitions];
+      });
+    } catch (error) {
+      console.error("Error fetching definitions from OpenAI:", error.message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
   const handleEditTranslation = (event, index) => {
     const {
       target: {
@@ -320,6 +355,7 @@ function CreatePhrase({
     setDefinitionList([]);
     setSelectedImage(initialSelectedImagestate);
     setAutoTranslatedText("");
+    setAutoGeneratedDefinitions("");
   };
   const removePhraseImage = () => {
     setSelectedImage({
@@ -495,6 +531,13 @@ function CreatePhrase({
           className: classes.alternativeVersionButton,
           startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
           children: t("auto_generate_phrase_translation")
+        }), learnLang !== forLang && /*#__PURE__*/_jsx(DefaultButton, {
+          onClick: generateDefinitions,
+          disabled: !phrase || Array.isArray(definitionList) && definitionList.includes(autoGeneratedDefinitions),
+          size: "sm",
+          className: classes.alternativeVersionButton,
+          startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
+          children: t("auto_generate_definitions")
         }), learnLang !== forLang && (import.meta.env.REACT_APP_STAGE === "dev" || window.location.host === "localhost:9009") && /*#__PURE__*/_jsx(Box, {
           sx: {
             display: "inline-flex",

package/dist/Dialogs/CreatePhraseGroupDialog/CreatePhraseGroupDialog.js

@@ -6,7 +6,6 @@ import Dialog from "@mui/material/Dialog";
 import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
-import CircularProgress from "@mui/material/CircularProgress";
 import Grid from "@mui/material/Grid";
 import ImageSelector from "../../Forms/ImageSelector/ImageSelector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -132,11 +131,7 @@ export default function CreatePhraseGroupDialog({
         color: "primary",
         variant: "contained",
         disabled: !name.trim() || isLoading,
-        startIcon: isLoading ? /*#__PURE__*/_jsx(CircularProgress, {
-          size: 16,
-          color: "inherit"
-        }) : null,
-        children: isLoading ? t("creating") || "Creating..." : t("create") || "Create"
+        children: t("create") || "Create"
       })]
     })]
   });

package/dist/Dialogs/GeneratePhrases/GeneratePhrases.js

@@ -1,12 +1,13 @@
 import { useState, useEffect } from "react";
 import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
 import { AutoFixHigh } from "@mui/icons-material";
-import { Alert, Grid, InputAdornment, LinearProgress, MenuItem, Slider, TextField, Tooltip, Typography, ListItem, ListItemText, useMediaQuery, FormControlLabel, Switch, Box } from "@mui/material";
+import { Alert, Grid, InputAdornment, LinearProgress, MenuItem, Slider, TextField, Tooltip, Typography, ListItem, useMediaQuery, FormControlLabel, Switch, Box, List } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { Link } from "react-router";
 import InfoIcon from "@mui/icons-material/Info";
 import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
 import InputHelper from "../../Forms/InputHelper/InputHelper";
+import PhraseDisplay from "../../Misc/PhraseDisplay/PhraseDisplay";
 import { makeStyles } from "tss-react/mui";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -19,80 +20,43 @@ const useStyles = makeStyles()(theme => ({
     width: "60%",
     wordBreak: "break-word",
     overflowWrap: "break-word"
-  },
-  avatar: {
-    cursor: "pointer",
-    margin: theme.spacing()
-  },
-  avatarNoClick: {
-    margin: theme.spacing()
   }
 }));
 function Phrase({
   alternativeVersions,
   translations,
   definitions,
-  phrase
+  phrase,
+  t
 }) {
   const theme = useTheme();
   const {
     classes
   } = useStyles();
   const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
-  const primary = `${phrase}${Array.isArray(alternativeVersions) && alternativeVersions.length ? " - " : ""}${(alternativeVersions || []).join(", ")}`;
-
-  // Show translations first, then definitions (if any) on a new line.
-  const secondaryParts = [];
-  if (Array.isArray(translations) && translations.length) {
-    secondaryParts.push((translations || []).join(", "));
-  }
-  if (Array.isArray(definitions) && definitions.length) {
-    secondaryParts.push((definitions || []).join(", "));
-  }
-  const secondary = secondaryParts.join("\n");
-  console.log({
-    primary,
-    secondary
-  });
-  console.log("Phrase render", {
-    phrase,
-    translations,
-    definitions,
-    alternativeVersions
-  });
-  return /*#__PURE__*/_jsx(ListItem, {
-    "data-cy": "phrase-list-item",
-    children: isLargeScreen ? /*#__PURE__*/_jsx(Grid, {
-      container: true,
-      sx: {
-        width: "100%"
-      },
-      className: classes.phraseText,
-      children: /*#__PURE__*/_jsx(ListItemText, {
-        className: classes.phrases,
-        primary: primary,
-        secondary: secondary,
-        secondaryTypographyProps: {
-          style: {
-            whiteSpace: "pre-line"
-          }
-        }
-      })
-    }) : /*#__PURE__*/_jsx(Grid, {
-      container: true,
+  return /*#__PURE__*/_jsx(List, {
+    dense: true,
+    disablePadding: true,
+    children: /*#__PURE__*/_jsx(ListItem, {
+      "data-cy": "phrase-list-item",
+      divider: true,
       sx: {
-        width: "100%"
+        flexDirection: "column",
+        alignItems: "flex-start",
+        py: 2
       },
-      className: classes.phraseTextSmall,
-      children: /*#__PURE__*/_jsx(ListItemText, {
-        className: classes.phrases,
-        primary: primary,
-        secondary: secondary,
-        secondaryTypographyProps: {
-          style: {
-            whiteSpace: "pre-line"
-          }
-        }
+      children: /*#__PURE__*/_jsx(Box, {
+        className: isLargeScreen ? classes.phraseText : classes.phraseTextSmall,
+        children: /*#__PURE__*/_jsx(PhraseDisplay, {
+          phrase: phrase,
+          translations: translations,
+          definitions: definitions,
+          alternativeVersions: alternativeVersions,
+          t: t,
+          variant: "body2",
+          showIcons: true,
+          showImage: false
+        })
       })
     })
   });
@@ -388,7 +352,8 @@ function GeneratePhrases({
         children: [/*#__PURE__*/_jsx(Typography, {
           children: t("generated_phrases")
         }), generatedPhrases.map((phrase, index) => /*#__PURE__*/_jsx(Phrase, {
-          ...phrase
+          ...phrase,
+          t: t
         }, index))]
       }), errorMessage && /*#__PURE__*/_jsx(Grid, {
         mt: 2,

package/dist/Dialogs/GroupedFeedbackDialog/GroupedFeedbackDialog.js

@@ -1,13 +1,22 @@
 import { useMemo, useEffect, useState, useRef, useCallback } from "react";
-import { Dialog, DialogContent, IconButton, Box, Typography, AppBar, Toolbar, CircularProgress, Button, Checkbox, Paper, Divider, Tooltip, Skeleton, Grid } from "@mui/material";
+import { Dialog, DialogContent, IconButton, Box, Typography, AppBar, Toolbar, CircularProgress, Button, Checkbox, Paper, Divider, Tooltip, Skeleton, Grid, TextField, LinearProgress, Alert } from "@mui/material";
+import { Link } from "react-router";
+import MuiLink from "@mui/material/Link";
 import CloseIcon from "@mui/icons-material/Close";
 import { red, orange, green, grey } from "@mui/material/colors";
 import FeedbackCard from "../../Cards/FeedbackCard/FeedbackCard";
 import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
 import NualaHeadphonesBackground from "../../img/NualaHeadphonesBackground.svg";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import { AutoFixHigh } from "@mui/icons-material";
 import useConfirm from "../../hooks/useConfirm";
 import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
+import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
+import PDFViewer from "../PDFViewer/PDFViewer";
+import level1Rubric from "../PDFViewer/rubrics/level1Rubric.pdf";
+import level2Rubric from "../PDFViewer/rubrics/level2Rubric.pdf";
+import level3Rubric from "../PDFViewer/rubrics/level3Rubric.pdf";
+import level4Rubric from "../PDFViewer/rubrics/level4Rubric.pdf";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function GroupFeedbackDialog({
   open = false,
@@ -44,7 +53,20 @@ export default function GroupFeedbackDialog({
   const [hasReachedBottom, setHasReachedBottom] = useState(false);
   const [isGeneratingAll, setIsGeneratingAll] = useState(false);
   const [isGeneratingIndividual, setIsGeneratingIndividual] = useState(false);
+  const [customFeedbackOpen, setCustomFeedbackOpen] = useState(false);
+  const [customFeedbackText, setCustomFeedbackText] = useState("");
+  const [openPDF, setOpenPDF] = useState(false);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [scale, setScale] = useState(1);
   const isAnyGenerating = isGeneratingAll || isGeneratingIndividual;
+  const pendingGenerateRef = useRef(null);
+  const rubricMap = {
+    1: level1Rubric,
+    2: level2Rubric,
+    3: level3Rubric,
+    4: level4Rubric
+  };
+  const pdfUrl = rubricMap[selectedRecording?.level] || level1Rubric;
   const [confirm] = useConfirm(t);
   const bottomRefCallback = useCallback(node => {
     if (node) {
@@ -59,6 +81,12 @@ export default function GroupFeedbackDialog({
       node._observer = observer;
     }
   }, []);
+  const handleOpenPDF = () => {
+    setOpenPDF(true);
+  };
+  const handleClosePDF = () => {
+    setOpenPDF(false);
+  };
   useEffect(() => {
     // dialog is shared between discussions, so reset when teacher selects another discussion
     setGenerateAllUsed(false);
@@ -69,7 +97,42 @@ export default function GroupFeedbackDialog({
     setCanSubmit({});
     setHasReachedBottom(false);
     setIsGeneratingAll(false);
+    pendingGenerateRef.current = null;
   }, [groupedId]);
+  const openCustomPromptForAll = () => {
+    pendingGenerateRef.current = {
+      type: "all"
+    };
+    setCustomFeedbackText("");
+    setCustomFeedbackOpen(true);
+  };
+  const openCustomPromptForSingle = discussionData => {
+    pendingGenerateRef.current = {
+      type: "single",
+      payload: discussionData
+    };
+    setCustomFeedbackText("");
+    setCustomFeedbackOpen(true);
+  };
+  const handleCustomPromptCancel = () => {
+    setCustomFeedbackOpen(false);
+    pendingGenerateRef.current = null;
+    setCustomFeedbackText("");
+  };
+  const handleCustomPromptContinue = async () => {
+    try {
+      const pending = pendingGenerateRef.current;
+      pendingGenerateRef.current = null;
+      if (!pending) return;
+      if (pending.type === "all") {
+        await handleGenerateFeedbackForAll();
+      } else if (pending.type === "single") {
+        await handleGenerateFeedback(pending.payload);
+      }
+    } finally {
+      setCustomFeedbackOpen(false);
+    }
+  };
   useEffect(() => {
     if (pendingSubmissions === 0 && submitTrigger !== null) {
       setCheckedSubmissions({});
@@ -137,7 +200,9 @@ export default function GroupFeedbackDialog({
     }).filter(member => member.name !== "Unknown");
   };
   const handleGenerateFeedback = async discussionData => {
-    if (handleBatchGradeConversations) {
+    if (!handleBatchGradeConversations) return;
+    setIsGeneratingIndividual(true);
+    try {
       const joinedMembersWithNames = getJoinedMembersNames(discussionData.joinedMembers || [], userData);
       await handleBatchGradeConversations([{
         meetingId: discussionData.meetingId || discussionData.meetingID,
@@ -148,8 +213,11 @@ export default function GroupFeedbackDialog({
         meetingPrompt: discussionData.meetingPrompt,
         learnLang: learnLang,
         joinedMembers: discussionData.joinedMembers || [],
-        joinedMembersNames: joinedMembersWithNames
+        joinedMembersNames: joinedMembersWithNames,
+        customFeedback: customFeedbackText
       }]);
+    } finally {
+      setIsGeneratingIndividual(false);
     }
   };
   const handleGenerateFeedbackForAll = async () => {
@@ -171,7 +239,8 @@ export default function GroupFeedbackDialog({
         meetingPrompt: discussion.meetingPrompt || submissionForThisDiscussion.meetingPrompt,
         learnLang: learnLang,
         joinedMembers: submissionForThisDiscussion.joinedMembers || [],
-        joinedMembersNames: joinedMembersWithNames
+        joinedMembersNames: joinedMembersWithNames,
+        customFeedback: customFeedbackText
       };
     });
     if (conversationsToGrade.length > 0 && handleBatchGradeConversations) {
@@ -478,7 +547,7 @@ export default function GroupFeedbackDialog({
               color: "secondary",
               endIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
               disabled: selectedCount === 0 || isGeneratingAll,
-              onClick: handleGenerateFeedbackForAll,
+              onClick: openCustomPromptForAll,
               sx: {
                 fontWeight: 600
               },
@@ -528,7 +597,7 @@ export default function GroupFeedbackDialog({
               hasSubmission: hasSubmission,
               aiGrade: aiGrade[discussionData.meetingId || discussionData.meetingID] || {},
               existingFeedback: feedbackByMeetingId[feedbackMeetingId] || {},
-              onGenerateFeedback: () => handleGenerateFeedback(discussionData),
+              onGenerateFeedback: () => openCustomPromptForSingle(discussionData),
               onSubmitFeedback: handleSubmitFeedback,
               setSelectedRecording: setSelectedRecording,
               selectedRecording: selectedRecording,
@@ -556,53 +625,83 @@ export default function GroupFeedbackDialog({
           })]
         })
       })]
-    }), /*#__PURE__*/_jsx(Dialog, {
-      open: isAnyGenerating,
+    }), /*#__PURE__*/_jsx(ResponsiveDialog, {
+      open: customFeedbackOpen,
+      handleClose: handleCustomPromptCancel,
+      handleSubmit: handleCustomPromptContinue,
+      submitText: t("generate_feedback"),
       maxWidth: "sm",
-      fullWidth: true,
-      PaperProps: {
-        sx: {
-          borderRadius: 3,
-          overflow: "visible"
-        }
-      },
-      children: /*#__PURE__*/_jsx(DialogContent, {
-        sx: {
-          p: 4
-        },
-        children: /*#__PURE__*/_jsx(Grid, {
-          container: true,
+      dialogTitle: isAnyGenerating ? t("generating_feedback") : t("generate_feedback"),
+      isSubmitDisabled: isAnyGenerating,
+      isExperimentalFeature: true,
+      startIcon: /*#__PURE__*/_jsx(AutoFixHigh, {}),
+      children: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Grid, {
+          textAlign: "center",
+          sx: {
+            ...(!isAnyGenerating && {
+              display: "none"
+            })
+          },
+          mx: 2,
+          size: 12,
+          children: /*#__PURE__*/_jsx(NualaCreating, {})
+        }), /*#__PURE__*/_jsx(Grid, {
           sx: {
-            width: "100%"
+            ...(!isAnyGenerating && {
+              display: "none"
+            })
           },
-          children: /*#__PURE__*/_jsxs(Grid, {
+          mt: 2,
+          size: 12,
+          children: /*#__PURE__*/_jsx(LinearProgress, {})
+        }), !isAnyGenerating && /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          spacing: 2,
+          children: [/*#__PURE__*/_jsx(Grid, {
             size: 12,
-            sx: {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              textAlign: "center",
-              gap: 3,
-              py: 2
+            children: /*#__PURE__*/_jsxs(Alert, {
+              severity: "info",
+              children: [t("experimental_feature_desc"), " - ", " ", /*#__PURE__*/_jsxs(Link, {
+                to: "/contact",
+                children: [t("contact_form"), "."]
+              })]
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            size: {
+              xs: 12
             },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "h5",
-              sx: {
-                fontWeight: 600,
-                color: "text.primary"
-              },
-              children: t("generating_feedback")
-            }), /*#__PURE__*/_jsx(Box, {
-              sx: {
-                maxWidth: 500,
-                width: "100%"
-              },
-              children: /*#__PURE__*/_jsx(NualaCreating, {})
-            })]
-          })
-        })
+            children: /*#__PURE__*/_jsxs(Typography, {
+              variant: "body2",
+              children: [t("generate_feedback_view_the"), " ", /*#__PURE__*/_jsx(MuiLink, {
+                component: "button",
+                variant: "body2",
+                onClick: handleOpenPDF,
+                children: t("generate_feedback_rubric_name")
+              }), ", ", t("generate_feedback_rubric_desc")]
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            size: 12,
+            children: /*#__PURE__*/_jsx(TextField, {
+              value: customFeedbackText,
+              onChange: e => setCustomFeedbackText(e.target.value),
+              placeholder: t("custom_feedback_placeholder"),
+              multiline: true,
+              minRows: 4,
+              fullWidth: true
+            })
+          })]
+        })]
       })
+    }), /*#__PURE__*/_jsx(PDFViewer, {
+      open: openPDF,
+      handleClose: handleClosePDF,
+      pdfUrl: pdfUrl,
+      pageNumber: pageNumber,
+      setPageNumber: setPageNumber,
+      scale: scale,
+      setScale: setScale,
+      t: t
     })]
   });
 }

package/dist/Dialogs/GroupedFeedbackDialog/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "grouped-feedback-dialog",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./GroupedFeedbackDialog.js"
+}

package/dist/Editors/PhraseList/PhraseList.js

@@ -86,7 +86,6 @@ function PhraseList({
   isCreatePhraseDialogOpen,
   setIsCreatePhraseDialogOpen,
   handleAddPhrase,
-  topicName,
   validatePhraseRecognition,
   difficulty,
   topicGoal,
@@ -107,12 +106,6 @@ function PhraseList({
   const handleChangeTab = (event, newValue) => {
     setTabValue(newValue);
   };
-  useEffect(() => {
-    if (!isSmallScreen && tabValue === 2) {
-      setTabValue(0);
-    }
-  }, [isSmallScreen]); // Only run when screen changes
-
   const updatePhrases = async phrases => {
     try {
       handleUpdatePhrases(courseId, sectionId, topicId, phrases);
@@ -208,41 +201,50 @@ function PhraseList({
             })]
           })
         })]
-      }), tabValue === 0 ? /*#__PURE__*/_jsx(PhrasesEditor, {
-        t: t,
-        phrases: phrases,
-        isCreator: isCreator,
-        isMember: isMember,
-        handleTranslate: handleTranslate,
-        handleUpdatePhrase: updatePhrase,
-        handleRemovePhrase: handleRemovePhrase,
-        uploadAudio: uploadAudio,
-        handleSpeak: handleSpeak,
-        updatePhrases: updatePhrases,
-        learnLang: learnLang,
-        forLang: forLang,
-        voices: voices,
-        userAttributes: userAttributes,
-        disablePadding: true,
-        forLangCharacters: forLangCharacters,
-        learnLangCharacters: learnLangCharacters,
-        fileSizeLimit: fileSizeLimit,
-        handleSpreadsheetSaveChanges: handleSpreadsheetSaveChanges,
-        isUploadPhrasesDialogOpen: isUploadPhrasesDialogOpen,
-        setIsUploadPhrasesDialogOpen: setIsUploadPhrasesDialogOpen,
-        isCreatePhraseDialogOpen: isCreatePhraseDialogOpen,
-        setIsCreatePhraseDialogOpen: setIsCreatePhraseDialogOpen,
-        handleAddPhrase: handleAddPhrase,
-        topicName: topicName,
-        validatePhraseRecognition: validatePhraseRecognition,
-        siteLanguage: siteLanguage,
-        makeChatGptApiRequest: makeChatGptApiRequest,
-        difficulty: difficulty,
-        subscription: subscription,
-        topicGoal: topicGoal,
-        verificationStatus: verificationStatus
+      }), tabValue === 0 ? /*#__PURE__*/_jsx(Box, {
+        className: hidden ? classes.paneFull : classes.pane,
+        sx: {
+          overflowY: "auto"
+        },
+        children: /*#__PURE__*/_jsx(PhrasesEditor, {
+          t: t,
+          phrases: phrases,
+          isCreator: isCreator,
+          isMember: isMember,
+          handleTranslate: handleTranslate,
+          handleUpdatePhrase: updatePhrase,
+          handleRemovePhrase: handleRemovePhrase,
+          uploadAudio: uploadAudio,
+          handleSpeak: handleSpeak,
+          updatePhrases: updatePhrases,
+          learnLang: learnLang,
+          forLang: forLang,
+          voices: voices,
+          userAttributes: userAttributes,
+          disablePadding: true,
+          forLangCharacters: forLangCharacters,
+          learnLangCharacters: learnLangCharacters,
+          fileSizeLimit: fileSizeLimit,
+          handleSpreadsheetSaveChanges: handleSpreadsheetSaveChanges,
+          isUploadPhrasesDialogOpen: isUploadPhrasesDialogOpen,
+          setIsUploadPhrasesDialogOpen: setIsUploadPhrasesDialogOpen,
+          isCreatePhraseDialogOpen: isCreatePhraseDialogOpen,
+          setIsCreatePhraseDialogOpen: setIsCreatePhraseDialogOpen,
+          handleAddPhrase: handleAddPhrase,
+          validatePhraseRecognition: validatePhraseRecognition,
+          siteLanguage: siteLanguage,
+          makeChatGptApiRequest: makeChatGptApiRequest,
+          difficulty: difficulty,
+          subscription: subscription,
+          topicGoal: topicGoal,
+          verificationStatus: verificationStatus,
+          phraseListName: initialValues.phraseListName
+        })
       }) : null, tabValue === 1 ? /*#__PURE__*/_jsx(Box, {
         className: hidden ? classes.paneFull : classes.pane,
+        sx: {
+          overflowY: "auto"
+        },
         children: /*#__PURE__*/_jsx(UpdatePhraseList, {
           t: t,
           touched: touched,