@nualang/nualang-ui-components 0.1.1352 → 0.1.1354

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

@@ -101,6 +101,7 @@ function GenerateDefinitions({
     }
   };
   const handleCancel = () => {
+    handleClose();
     setGeneratedDefinitions([]);
     setErrorMessage(null);
   };

package/dist/Dialogs/GeneratePhrases/GeneratePhrases.js

@@ -1,7 +1,7 @@
-import { useState } from "react";
+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 } from "@mui/material";
+import { Alert, Grid, InputAdornment, LinearProgress, MenuItem, Slider, TextField, Tooltip, Typography, ListItem, ListItemText, useMediaQuery, FormControlLabel, Switch, Box } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { Link } from "react-router";
 import InfoIcon from "@mui/icons-material/Info";
@@ -115,6 +115,7 @@ function GeneratePhrases({
   const [errorMessage, setErrorMessage] = useState(null);
   const [phraseType, setPhraseType] = useState("words");
   const [generatedPhrases, setGeneratedPhrases] = useState([]);
+  const [generateDefinitions, setGenerateDefinitions] = useState(true);
   const isPhrases = currentPhrases && currentPhrases.length > 0;
   const phrases = isPhrases ? currentPhrases.map(({
     phrase,
@@ -188,7 +189,8 @@ function GeneratePhrases({
           difficulty,
           phraseType,
           isPhrases,
-          phrases
+          phrases,
+          generateDefinitions
         }
       });
       const phrasesArray = chatGptResponse.result;
@@ -217,6 +219,9 @@ function GeneratePhrases({
   const handleCancel = () => {
     setGeneratedPhrases([]);
   };
+  useEffect(() => {
+    setGenerateDefinitions(phraseType === 'words');
+  }, [phraseType]);
   return /*#__PURE__*/_jsxs(ResponsiveDialog, {
     open: open,
     closeText: generatedPhrases.length > 0 ? t("cancel") : t("close"),
@@ -353,6 +358,31 @@ function GeneratePhrases({
             min: 4,
             max: 16
           })]
+        }), /*#__PURE__*/_jsxs(Grid, {
+          size: 12,
+          children: [/*#__PURE__*/_jsx(Typography, {
+            children: /*#__PURE__*/_jsx(Box, {
+              children: t("generate_definitions")
+            })
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            label: "",
+            control: /*#__PURE__*/_jsx(_Fragment, {
+              children: /*#__PURE__*/_jsx("span", {
+                children: /*#__PURE__*/_jsx(Switch, {
+                  checked: generateDefinitions,
+                  onChange: e => {
+                    setGenerateDefinitions(e.target.checked);
+                  },
+                  inputProps: {
+                    "aria-label": "controlled"
+                  },
+                  sx: {
+                    marginLeft: 0.5
+                  }
+                })
+              })
+            })
+          })]
         })]
       }), generatedPhrases.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Typography, {

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/Dialogs/UploadPhrases/UploadPhrases.js

@@ -1,11 +1,13 @@
 import { useState, useRef, useEffect } from "react";
 import { CSVLink } from "react-csv";
-import { Box, DialogContentText, Typography, Alert, TextField, Divider } from "@mui/material";
+import { Box, DialogContentText, Typography, Alert, TextField, Divider, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
 import FileCopyIcon from "@mui/icons-material/FileCopy";
 import DownloadIcon from "@mui/icons-material/Download";
+import FrontHandIcon from '@mui/icons-material/FrontHand';
+import WavingHandIcon from '@mui/icons-material/WavingHand';
+import BadgeIcon from '@mui/icons-material/Badge';
 import PhraseList from "../../Lists/Phrases/Phrases";
-import ExampleCSVImage from "./upload-phrases-csv.png";
 import ParseScriptErrors from "../../Lists/ParseScriptErrors/ParseScriptErrors";
 import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
 import CSVUploader from "../../Misc/CSVUploader/CSVUploader";
@@ -19,7 +21,6 @@ import DialogContent from "@mui/material/DialogContent";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/material/styles";
 import Popper from "@mui/material/Popper";
-import Paper from "@mui/material/Paper";
 import Grow from "@mui/material/Grow";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import MenuItem from "@mui/material/MenuItem";
@@ -29,14 +30,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 const phrasesData = [{
   phrase: "Hello",
   translation: "hola",
+  definitions: "a greeting",
   image: "https://images.nualang.com/eyJidWNrZXQiOiJudWFsYW5nLWltYWdlcy1wcm9kIiwia2V5IjoicGhyYXNlcy9EYTNXcThzUUktMTYwMzg4Nzg3MjU2NS53ZWJwIn0="
 }, {
   phrase: "Goodbye",
   translation: "adios",
+  definitions: "a farewell",
   image: "https://images.nualang.com/eyJidWNrZXQiOiJudWFsYW5nLWltYWdlcy1wcm9kIiwia2V5IjoicGhyYXNlcy9RbXBFcWZYdHItMTYwMzg4Nzk2MjAzMC53ZWJwIn0="
 }, {
   phrase: "My name is",
   translation: "mi nombre es | me llamo",
+  definitions: "used to introduce yourself",
   image: "https://images.nualang.com/eyJidWNrZXQiOiJudWFsYW5nLWltYWdlcy1wcm9kIiwia2V5IjoicGhyYXNlcy9hREFmczhFeTEtMTYwMzg5MDM2MjAxNy53ZWJwIn0="
 }];
 const phrasesHeaders = [{
@@ -45,6 +49,9 @@ const phrasesHeaders = [{
 }, {
   label: "translations",
   key: "translation"
+}, {
+  label: "definitions",
+  key: "definitions"
 }, {
   label: "image",
   key: "image"
@@ -54,6 +61,22 @@ const PhrasesCsvLink = {
   data: phrasesData,
   filename: "phrases_template.csv"
 };
+const csvStructureExampleRows = [{
+  phrase: "hello",
+  translations: "hola",
+  definitions: "A word used to greet someone",
+  image: FrontHandIcon
+}, {
+  phrase: "goodbye",
+  translations: "adios",
+  definitions: "A word used when leaving someone",
+  image: WavingHandIcon
+}, {
+  phrase: "my name is",
+  translations: "mi nombre es | me llamo",
+  definitions: "A phrase used to tell someone your name",
+  image: BadgeIcon
+}];
 const useStyles = makeStyles()(theme => ({
   parseErrorsBox: {
     marginTop: theme.spacing()
@@ -65,10 +88,6 @@ const useStyles = makeStyles()(theme => ({
   dialog: {
     marginBottom: "15px"
   },
-  image: {
-    height: "auto",
-    width: "100%"
-  },
   csvButton: {
     textDecoration: "none"
   },
@@ -92,6 +111,7 @@ function parsePhraseWithAlternatives(phraseString) {
  * - phrase: Primary phrase with optional alternatives separated by '|'
  *   Example: "Hello|Hi|Hey"
  * - translations: Multiple translations separated by '|'
+ * - definitions: Multiple definitions separated by '|'
  * - image: Optional image URL
  */
 
@@ -135,10 +155,12 @@ function UploadPhrases({
           alternatives
         } = parsePhraseWithAlternatives(data.phrase);
         const formattedTranslations = data.translations.split("|").map(t => t.trim().replace(/^"|"$/g, "").trim());
+        const formattedDefinitions = data.definitions ? data.definitions.split("|").map(d => d.trim().replace(/^"|"$/g, "").trim()).filter(Boolean) : [];
         return {
           phrase: primary,
           alternativeVersions: alternatives,
           translations: formattedTranslations,
+          definitions: formattedDefinitions,
           image: data.image ? data.image.trim() : "",
           voices: [],
           idx: index
@@ -175,8 +197,6 @@ function UploadPhrases({
       setErrorMessage("File must be in the .csv format");
       return;
     } else if (results.errors && results.errors.length) {
-      // formats errors coming from CSVReader into common error format
-      // used for validating rows
       const formattedErrors = results.errors.reduce((acc, cur) => {
         acc.push({
           row: cur.row,
@@ -212,10 +232,51 @@ function UploadPhrases({
       children: t("upload_phrases_desc")
     }), /*#__PURE__*/_jsx(Box, {
       py: 1,
-      children: /*#__PURE__*/_jsx("img", {
-        className: classes.image,
-        src: ExampleCSVImage,
-        alt: ""
+      children: /*#__PURE__*/_jsx(TableContainer, {
+        component: Paper,
+        variant: "outlined",
+        children: /*#__PURE__*/_jsxs(Table, {
+          size: "small",
+          "aria-label": "CSV structure example",
+          children: [/*#__PURE__*/_jsx(TableHead, {
+            children: /*#__PURE__*/_jsxs(TableRow, {
+              children: [/*#__PURE__*/_jsx(TableCell, {
+                children: /*#__PURE__*/_jsx("strong", {
+                  children: t("phrase")
+                })
+              }), /*#__PURE__*/_jsx(TableCell, {
+                children: /*#__PURE__*/_jsx("strong", {
+                  children: t("translations")
+                })
+              }), /*#__PURE__*/_jsx(TableCell, {
+                children: /*#__PURE__*/_jsx("strong", {
+                  children: t("definitions")
+                })
+              }), /*#__PURE__*/_jsx(TableCell, {
+                children: /*#__PURE__*/_jsx("strong", {
+                  children: t("image")
+                })
+              })]
+            })
+          }), /*#__PURE__*/_jsx(TableBody, {
+            children: csvStructureExampleRows.map((row, index) => {
+              const ImageIcon = row.image;
+              return /*#__PURE__*/_jsxs(TableRow, {
+                children: [/*#__PURE__*/_jsx(TableCell, {
+                  children: row.phrase
+                }), /*#__PURE__*/_jsx(TableCell, {
+                  children: row.translations
+                }), /*#__PURE__*/_jsx(TableCell, {
+                  children: row.definitions
+                }), /*#__PURE__*/_jsx(TableCell, {
+                  children: /*#__PURE__*/_jsx(ImageIcon, {
+                    fontSize: "small"
+                  })
+                })]
+              }, `${row.phrase}-${index}`);
+            })
+          })]
+        })
       })
     }), /*#__PURE__*/_jsxs(Box, {
       pb: 2,
@@ -257,7 +318,7 @@ function UploadPhrases({
         id: "csvDataInput",
         name: "csvDataInput",
         label: t("paste_your_csv_data"),
-        placeholder: `phrase, translations\n"Hola", "Hello | Hi"\n"Adios", "Goodbye"`,
+        placeholder: `phrase, translations, definitions\n"Hola", "Hello | Hi", "a greeting"\n"Adios", "Goodbye", "a farewell"`,
         value: csvDataInput,
         fullWidth: true,
         multiline: true,