@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Forms/FeedbackForm/FeedbackForm.js

@@ -1,1036 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-import { useEffect, useState } from "react";
-import { Skeleton, Divider, Button, Grid, TextField, CardActions, CardContent, FormControl, InputLabel, Select, MenuItem, Typography, Slider, Dialog, DialogTitle, DialogContent, DialogActions, Tooltip, IconButton, ListItemSecondaryAction, Checkbox, FormControlLabel, Avatar, Box } from "@mui/material";
-import HelpOutlinedIcon from "@mui/icons-material/HelpOutlined";
-import { Formik } from "formik";
-import * as Yup from "yup";
-import PropTypes from "prop-types";
-import NualaSVG from "../../img/stars1.svg";
-import Nuala2SVG from "../../img/stars2.svg";
-import PDFViewer from "../../Dialogs/PDFViewer/PDFViewer";
-import { blue } from "@mui/material/colors";
-import { useTheme } from "@mui/material/styles";
-
-// CreateCustomerForm tab for settings component
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function FeedbackForm({
-  values = {},
-  errors,
-  touched,
-  handleChange,
-  handleBlur,
-  handleSubmit = () => {},
-  attendeesData,
-  aiGrade,
-  handleBatchGradeConversations,
-  conversation,
-  pdfUrl,
-  pageNumber,
-  setPageNumber,
-  scale,
-  setScale,
-  loading,
-  handleClosefeedbackForm,
-  saveTranscript,
-  t = x => x
-}) {
-  const {
-    feedbackText,
-    selectedAttendee,
-    selectedAttendeeName,
-    feedback1,
-    feedback2,
-    feedback3,
-    feedback4,
-    feedback5,
-    feedback6
-  } = values;
-  const theme = useTheme();
-  const [allSelected, setAllSelected] = useState("false");
-  const handleAttendeeChange = event => {
-    if (event.target.value === t("All")) {
-      setAllSelected(true);
-      handleChange({
-        target: {
-          name: "selectedAttendee",
-          value: attendeesData.map(attendee => attendee.memberId)
-        }
-      });
-      handleChange({
-        target: {
-          name: "selectedAttendeeName",
-          value: attendeesData.map(attendee => attendee.username)
-        }
-      });
-      handleChange({
-        target: {
-          name: "gradingOption",
-          value: "Group Grade"
-        }
-      });
-    } else {
-      const selectedMemberId = event.target.value;
-      setAllSelected(false);
-      handleChange({
-        target: {
-          name: "selectedAttendee",
-          value: selectedMemberId.memberId
-        }
-      });
-      handleChange({
-        target: {
-          name: "selectedAttendeeName",
-          value: selectedMemberId.username
-        }
-      });
-      handleChange({
-        target: {
-          name: "gradingOption",
-          value: "Individual Grade"
-        }
-      });
-    }
-  };
-  const checkForManualChanges = async () => {
-    let changeDetected = false;
-    if (aiGrade && Object.keys(aiGrade).length > 0) {
-      const grades = allSelected ? aiGrade["All"] || {} : aiGrade[selectedAttendeeName] || {};
-      Object.keys(grades).forEach((category, i) => {
-        const selectedMark = marks.find(mark => {
-          return grades[category].toUpperCase() === mark.label.toUpperCase();
-        });
-        if (selectedMark) {
-          if (values[`feedbackLevel${i + 1}`] && values[`feedbackLevel${i + 1}`] !== parseInt(selectedMark.value)) {
-            changeDetected = true;
-          }
-        }
-      });
-    }
-    if (changeDetected) {
-      await saveTranscript(conversation);
-    }
-  };
-  useEffect(() => {
-    if (aiGrade) {
-      const grades = allSelected ? aiGrade["All"] || {} : aiGrade[selectedAttendeeName] || {};
-      Object.keys(grades).forEach((category, i) => {
-        const selectedMark = marks.find(mark => {
-          return grades[category].toUpperCase() === mark.label.toUpperCase();
-        });
-        let feedbackArray = [];
-        if (selectedMark) {
-          feedbackArray.push({
-            feedbackLevel: parseInt(selectedMark.value),
-            feedbackLevelName: selectedMark.label,
-            methodCheck: "Nuala AI"
-          });
-        }
-        handleChange({
-          target: {
-            name: `feedback${i + 1}`,
-            value: feedbackArray
-          }
-        });
-        if (selectedMark) {
-          handleChange({
-            target: {
-              name: `feedbackLevel${i + 1}`,
-              value: parseInt(selectedMark.value)
-            }
-          });
-          handleChange({
-            target: {
-              name: `feedbackLevel${i + 1}Name`,
-              value: selectedMark.label
-            }
-          });
-        }
-      });
-      if (grades.Feedback) {
-        handleChange({
-          target: {
-            name: "feedbackText",
-            value: grades.Feedback
-          }
-        });
-      }
-    }
-  }, [aiGrade]);
-  useEffect(() => {
-    const initialSliders = {
-      feedback1: [{
-        feedbackLevel: 0,
-        feedbackLevelName: "Novice Low"
-      }],
-      feedback2: [{
-        feedbackLevel: 0,
-        feedbackLevelName: "Novice Low"
-      }],
-      feedback3: [{
-        feedbackLevel: 0,
-        feedbackLevelName: "Novice Low"
-      }],
-      feedback4: [{
-        feedbackLevel: 0,
-        feedbackLevelName: "Novice Low"
-      }],
-      feedback5: [{
-        feedbackLevel: 0,
-        feedbackLevelName: "Novice Low"
-      }],
-      feedback6: [{
-        feedbackLevel: 0,
-        feedbackLevelName: "Novice Low"
-      }],
-      feedbackText: ""
-    };
-    Object.entries(initialSliders).forEach(([field, value]) => {
-      handleChange({
-        target: {
-          name: field,
-          value
-        }
-      });
-    });
-  }, [selectedAttendeeName]);
-  const marks = [{
-    value: 0,
-    label: "Novice Low"
-  }, {
-    value: 1,
-    label: "Novice Mid"
-  }, {
-    value: 2,
-    label: "Novice High"
-  }, {
-    value: 3,
-    label: "Intermediate Low"
-  }
-  // { value: 4, label: 'Intermediate Mid' },
-  // { value: 5, label: 'Intermediate High' },
-  ];
-  const [isCheckboxChecked, setIsCheckboxChecked] = useState({
-    checkbox1: false,
-    checkbox2: false,
-    checkbox3: false,
-    checkbox4: false,
-    checkbox5: false,
-    checkbox6: false
-  });
-  const handleFeedbackTextChange = event => {
-    handleChange({
-      target: {
-        name: "feedbackText",
-        value: event.target.value
-      }
-    });
-  };
-  const handleFeedbackLevel = (event, value, level, isCheckboxChecked) => {
-    const selectedMark = marks.find(mark => mark.value === value);
-    let feedbackArray = [];
-    if (isCheckboxChecked) {
-      feedbackArray.push({
-        feedbackLevel: 0,
-        feedbackLevelName: "Not Applicable",
-        fromTeacher: true
-      });
-    } else if (selectedMark) {
-      feedbackArray.push({
-        feedbackLevel: selectedMark.value,
-        feedbackLevelName: selectedMark.label,
-        methodCheck: "Teacher"
-      });
-    }
-    if (isCheckboxChecked) {
-      handleChange({
-        target: {
-          name: `feedbackLevel${level}`,
-          value: 0
-        }
-      });
-    }
-    handleChange({
-      target: {
-        name: `feedback${level}`,
-        value: feedbackArray
-      }
-    });
-  };
-  const [openPDF, setOpenPDF] = useState(false);
-  const handleOpenPDF = () => {
-    setOpenPDF(true);
-  };
-  const handleClosePDF = () => {
-    setOpenPDF(false);
-  };
-  const [openDialog, setOpenDialog] = useState(false);
-  const handleOpenDialog = () => {
-    setOpenDialog(true);
-  };
-  const handleCloseDialog = () => {
-    setOpenDialog(false);
-  };
-  const handleGrade = () => {
-    handleBatchGradeConversations([conversation]);
-    handleCloseDialog();
-  };
-  const checkFeedbackmethodCheck = feedback => {
-    return feedback && feedback.length > 0 && feedback[0].methodCheck === "Nuala AI" ? blue[700] : theme.palette.primary.main;
-  };
-  return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
-    spacing: 2,
-    sx: {
-      justifyContent: "center",
-      width: "100%"
-    },
-    children: [/*#__PURE__*/_jsx(Grid, {
-      size: {
-        xs: 10,
-        md: 10
-      },
-      children: /*#__PURE__*/_jsxs(FormControl, {
-        fullWidth: true,
-        variant: "outlined",
-        children: [/*#__PURE__*/_jsx(InputLabel, {
-          id: "studentLabel",
-          children: "Students"
-        }), /*#__PURE__*/_jsx(Select, {
-          labelId: "studentLabel",
-          id: "selectedAttendeeName",
-          name: "selectedAttendeeName",
-          value: selectedAttendeeName,
-          onChange: handleAttendeeChange,
-          onBlur: handleBlur,
-          label: "Student",
-          disabled: attendeesData?.length < 1,
-          children: [{
-            username: t("All")
-          }, ...attendeesData].map((attendee, index) => /*#__PURE__*/_jsx(MenuItem, {
-            value: index === 0 ? "All" : attendeesData[index - 1],
-            children: /*#__PURE__*/_jsxs(Box, {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                marginBottom: 1,
-                marginTop: 1
-              },
-              children: [index !== 0 && /*#__PURE__*/_jsx(Avatar, {
-                alt: attendee,
-                src: attendee.userImage,
-                sx: {
-                  width: 40,
-                  height: 40,
-                  marginRight: "8px"
-                }
-              }), attendee.username, index === 0 &&
-              /*#__PURE__*/
-              // Add help icon only for "All" option
-              _jsx(ListItemSecondaryAction, {
-                sx: {
-                  marginRight: 2
-                },
-                children: /*#__PURE__*/_jsx(Tooltip, {
-                  title: t("feedback_all_info"),
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    size: "small",
-                    edge: "end",
-                    color: "primary",
-                    "aria-label": "help",
-                    children: /*#__PURE__*/_jsx(HelpOutlinedIcon, {})
-                  })
-                })
-              })]
-            }, attendee?.memberId)
-          }, index))
-        })]
-      })
-    }), selectedAttendee && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        spacing: 2,
-        sx: {
-          alignItems: "center",
-          width: "100%"
-        },
-        children: [/*#__PURE__*/_jsxs(Grid, {
-          container: true,
-          direction: "row",
-          sx: {
-            alignItems: "center",
-            justifyContent: "center",
-            paddingTop: "50px",
-            marginLeft: 3,
-            paddingBottom: 5,
-            width: "100%"
-          },
-          children: [/*#__PURE__*/_jsx(Grid, {
-            size: {
-              xs: 4,
-              md: 4
-            },
-            sx: {
-              textAlign: "right"
-            },
-            children: /*#__PURE__*/_jsx("img", {
-              style: {
-                maxWidth: "100%",
-                maxHeight: "100px"
-              },
-              src: NualaSVG,
-              alt: "",
-              "aria-hidden": "true"
-            })
-          }), /*#__PURE__*/_jsx(Grid, {
-            size: {
-              xs: 3.5,
-              md: 3.5
-            },
-            sx: {
-              textAlign: "center"
-            },
-            children: /*#__PURE__*/_jsx(Button, {
-              "aria-label": t("nuala_performance_rating"),
-              disabled: !conversation,
-              onClick: handleOpenDialog,
-              variant: "contained",
-              children: t("nuala_performance_rating")
-            })
-          }), /*#__PURE__*/_jsx(Grid, {
-            size: {
-              xs: 4,
-              md: 4
-            },
-            sx: {
-              textAlign: "left"
-            },
-            children: /*#__PURE__*/_jsx("img", {
-              style: {
-                maxWidth: "100%",
-                maxHeight: "100px"
-              },
-              src: Nuala2SVG,
-              alt: "",
-              "aria-hidden": "true"
-            })
-          })]
-        }), /*#__PURE__*/_jsxs(Dialog, {
-          role: "dialog",
-          open: openDialog,
-          onClose: handleCloseDialog,
-          "aria-labelledby": "dialog-title",
-          children: [/*#__PURE__*/_jsx(DialogTitle, {
-            id: "dialog-title",
-            children: t("warning")
-          }), /*#__PURE__*/_jsx(DialogContent, {
-            children: /*#__PURE__*/_jsxs(Typography, {
-              children: [t("using_nuala_performance"), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), t("are_you_sure_nuala_performance")]
-            })
-          }), /*#__PURE__*/_jsxs(DialogActions, {
-            children: [/*#__PURE__*/_jsx(Button, {
-              "aria-label": t("cancel"),
-              onClick: handleCloseDialog,
-              color: "primary",
-              children: t("cancel")
-            }), /*#__PURE__*/_jsx(Button, {
-              "aria-label": t("confirm"),
-              onClick: handleGrade,
-              variant: "contained",
-              color: "primary",
-              children: t("confirm")
-            })]
-          })]
-        }), /*#__PURE__*/_jsx(Grid, {
-          sx: {
-            textAlign: "right"
-          },
-          size: 12,
-          children: /*#__PURE__*/_jsx(Tooltip, {
-            title: t("rubric_info_desc"),
-            children: /*#__PURE__*/_jsx(Button, {
-              onClick: handleOpenPDF,
-              color: "primary",
-              "aria-label": t("rubric_info"),
-              startIcon: /*#__PURE__*/_jsx(HelpOutlinedIcon, {}),
-              children: t("rubric_info")
-            })
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(Typography, {
-            id: "feedbackLevelLabel",
-            gutterBottom: true,
-            sx: {
-              fontWeight: "bold"
-            },
-            children: t("quality_of_interaction")
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 0.5
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 1,
-          children: /*#__PURE__*/_jsx(FormControlLabel, {
-            control: /*#__PURE__*/_jsx(Checkbox, {
-              id: "feedbackLevel",
-              name: "feedbackLevel",
-              checked: isCheckboxChecked.checkbox1,
-              value: feedback1[0]?.feedbackLevel,
-              onChange: (e, v) => {
-                setIsCheckboxChecked(prev => ({
-                  ...prev,
-                  checkbox1: !prev.checkbox1
-                }));
-                handleFeedbackLevel(e, v, 1, !isCheckboxChecked.checkbox1);
-              }
-            }),
-            label: t("not_applicable"),
-            labelPlacement: "bottom"
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 0.5
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 9,
-          children: /*#__PURE__*/_jsx(Slider, {
-            id: "feedbackLevel",
-            name: "feedbackLevel",
-            value: feedback1[0]?.feedbackLevel,
-            onChange: (e, v) => handleFeedbackLevel(e, v, 1, isCheckboxChecked.checkbox1),
-            onBlur: handleBlur,
-            "aria-labelledby": "feedbackLevelLabel",
-            step: 1,
-            marks: marks,
-            min: 0,
-            max: 3,
-            disabled: isCheckboxChecked.checkbox1,
-            sx: {
-              color: checkFeedbackmethodCheck(values?.feedback1)
-            }
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 0.5
-      }), /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        spacing: 2,
-        sx: {
-          alignItems: "left",
-          width: "100%"
-        },
-        children: [/*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(Typography, {
-            id: "feedbackLevelLabel",
-            gutterBottom: true,
-            sx: {
-              fontWeight: "bold"
-            },
-            children: t("vocabulary_in_context")
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 0.5
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 1,
-          children: /*#__PURE__*/_jsx(FormControlLabel, {
-            control: /*#__PURE__*/_jsx(Checkbox, {
-              id: "feedbackLevel",
-              name: "feedbackLevel",
-              checked: isCheckboxChecked.checkbox2,
-              value: feedback2[0]?.feedbackLevel,
-              onChange: (e, v) => {
-                setIsCheckboxChecked(prev => ({
-                  ...prev,
-                  checkbox2: !prev.checkbox2
-                }));
-                handleFeedbackLevel(e, v, 2, !isCheckboxChecked.checkbox2);
-              }
-            }),
-            label: t("not_applicable"),
-            labelPlacement: "bottom"
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 0.5
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 9,
-          children: /*#__PURE__*/_jsx(Slider, {
-            id: "feedbackLevel",
-            name: "feedbackLevel",
-            value: feedback2[0]?.feedbackLevel,
-            onChange: (e, v) => handleFeedbackLevel(e, v, 2, isCheckboxChecked.checkbox2),
-            onBlur: handleBlur,
-            "aria-labelledby": "feedbackLevelLabel",
-            step: 1,
-            marks: marks,
-            min: 0,
-            max: 3,
-            disabled: isCheckboxChecked.checkbox2,
-            sx: {
-              color: checkFeedbackmethodCheck(values?.feedback2)
-            }
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 0.5
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 0.5
-      }), /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        spacing: 2,
-        sx: {
-          alignItems: "left",
-          width: "100%"
-        },
-        children: [/*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(Typography, {
-            id: "feedbackLevelLabel",
-            gutterBottom: true,
-            sx: {
-              fontWeight: "bold"
-            },
-            children: t("function_and_text_type")
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 0.5
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 1,
-          children: /*#__PURE__*/_jsx(FormControlLabel, {
-            control: /*#__PURE__*/_jsx(Checkbox, {
-              id: "feedbackLevel",
-              name: "feedbackLevel",
-              checked: isCheckboxChecked.checkbox3,
-              value: feedback3[0]?.feedbackLevel,
-              onChange: (e, v) => {
-                setIsCheckboxChecked(prev => ({
-                  ...prev,
-                  checkbox3: !prev.checkbox3
-                }));
-                handleFeedbackLevel(e, v, 3, !isCheckboxChecked.checkbox3);
-              }
-            }),
-            label: t("not_applicable"),
-            labelPlacement: "bottom"
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 0.5
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 9,
-          children: /*#__PURE__*/_jsx(Slider, {
-            id: "feedbackLevel",
-            name: "feedbackLevel",
-            value: feedback3[0]?.feedbackLevel
-            // defaultValue={values.feedbackLevel3}
-            ,
-            onChange: (e, v) => handleFeedbackLevel(e, v, 3, isCheckboxChecked.checkbox3),
-            onBlur: handleBlur,
-            "aria-labelledby": "feedbackLevelLabel",
-            step: 1,
-            marks: marks,
-            min: 0,
-            max: 3,
-            disabled: isCheckboxChecked.checkbox3,
-            sx: {
-              color: checkFeedbackmethodCheck(values?.feedback3)
-            }
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 0.5
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 0.5
-      }), /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        spacing: 2,
-        sx: {
-          alignItems: "left",
-          width: "100%"
-        },
-        children: [/*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(Typography, {
-            id: "feedbackLevelLabel",
-            gutterBottom: true,
-            sx: {
-              fontWeight: "bold"
-            },
-            children: t("comprehensibility")
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 0.5
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 1,
-          children: /*#__PURE__*/_jsx(FormControlLabel, {
-            control: /*#__PURE__*/_jsx(Checkbox, {
-              id: "feedbackLevel",
-              name: "feedbackLevel",
-              checked: isCheckboxChecked.checkbox4,
-              value: feedback4[0]?.feedbackLevel,
-              onChange: (e, v) => {
-                setIsCheckboxChecked(prev => ({
-                  ...prev,
-                  checkbox4: !prev.checkbox4
-                }));
-                handleFeedbackLevel(e, v, 4, !isCheckboxChecked.checkbox4);
-              }
-            }),
-            label: t("not_applicable"),
-            labelPlacement: "bottom"
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 0.5
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 9,
-          children: /*#__PURE__*/_jsx(Slider, {
-            id: "feedbackLevel",
-            name: "feedbackLevel",
-            value: feedback4[0]?.feedbackLevel
-            // defaultValue={feedbackLevel4}
-            ,
-            onChange: (e, v) => handleFeedbackLevel(e, v, 4, isCheckboxChecked.checkbox4),
-            onBlur: handleBlur,
-            "aria-labelledby": "feedbackLevelLabel",
-            step: 1,
-            marks: marks,
-            min: 0,
-            max: 3,
-            disabled: isCheckboxChecked.checkbox4,
-            sx: {
-              color: checkFeedbackmethodCheck(values?.feedback4)
-            }
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 0.5
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 0.5
-      }), /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        spacing: 2,
-        sx: {
-          alignItems: "left",
-          width: "100%"
-        },
-        children: [/*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(Typography, {
-            id: "feedbackLevelLabel",
-            gutterBottom: true,
-            sx: {
-              fontWeight: "bold"
-            },
-            children: t("comprehension")
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 0.5
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 1,
-          children: /*#__PURE__*/_jsx(FormControlLabel, {
-            control: /*#__PURE__*/_jsx(Checkbox, {
-              id: "feedbackLevel",
-              name: "feedbackLevel",
-              checked: isCheckboxChecked.checkbox5,
-              value: feedback5[0]?.feedbackLevel,
-              onChange: (e, v) => {
-                setIsCheckboxChecked(prev => ({
-                  ...prev,
-                  checkbox5: !prev.checkbox5
-                }));
-                handleFeedbackLevel(e, v, 5, !isCheckboxChecked.checkbox5);
-              }
-            }),
-            label: t("not_applicable"),
-            labelPlacement: "bottom"
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 0.5
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 9,
-          children: /*#__PURE__*/_jsx(Slider, {
-            id: "feedbackLevel",
-            name: "feedbackLevel",
-            value: feedback5[0]?.feedbackLevel
-            // defaultValue={values.feedbackLevel5}
-            ,
-            onChange: (e, v) => handleFeedbackLevel(e, v, 5, isCheckboxChecked.checkbox5),
-            onBlur: handleBlur,
-            "aria-labelledby": "feedbackLevelLabel",
-            step: 1,
-            marks: marks,
-            min: 0,
-            max: 3,
-            disabled: isCheckboxChecked.checkbox5,
-            sx: {
-              color: checkFeedbackmethodCheck(values?.feedback5)
-            }
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 0.5
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 0.5
-      }), /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        spacing: 2,
-        sx: {
-          alignItems: "left",
-          width: "100%"
-        },
-        children: [/*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(Typography, {
-            id: "feedbackLevelLabel",
-            gutterBottom: true,
-            sx: {
-              fontWeight: "bold"
-            },
-            children: t("interculturality")
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 0.5
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 1,
-          children: /*#__PURE__*/_jsx(FormControlLabel, {
-            control: /*#__PURE__*/_jsx(Checkbox, {
-              id: "feedbackLevel",
-              name: "feedbackLevel",
-              checked: isCheckboxChecked.checkbox6,
-              value: feedback6[0]?.feedbackLevel,
-              onChange: (e, v) => {
-                setIsCheckboxChecked(prev => ({
-                  ...prev,
-                  checkbox6: !prev.checkbox6
-                }));
-                handleFeedbackLevel(e, v, 6, !isCheckboxChecked.checkbox6);
-              }
-            }),
-            label: t("not_applicable"),
-            labelPlacement: "bottom"
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 0.5
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 9,
-          children: /*#__PURE__*/_jsx(Slider, {
-            id: "feedbackLevel",
-            name: "feedbackLevel",
-            value: feedback6[0]?.feedbackLevel
-            // defaultValue={values.feedbackLevel6}
-            ,
-            onChange: (e, v) => handleFeedbackLevel(e, v, 6, isCheckboxChecked.checkbox6),
-            onBlur: handleBlur,
-            "aria-labelledby": "feedbackLevelLabel",
-            step: 1,
-            marks: marks,
-            min: 0,
-            max: 3,
-            disabled: isCheckboxChecked.checkbox6,
-            sx: {
-              color: checkFeedbackmethodCheck(values?.feedback6)
-            }
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 0.5
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: {
-          xs: 12,
-          md: 12
-        },
-        children: feedbackText !== "Unknown" ? /*#__PURE__*/_jsx(TextField, {
-          multiline: true,
-          rows: 3,
-          id: "feedbackText",
-          name: "feedbackText",
-          label: t("feedback_text"),
-          value: feedbackText,
-          onChange: handleFeedbackTextChange,
-          onBlur: handleBlur,
-          helperText: touched.feedbackText ? errors.feedbackText : "",
-          error: touched.feedbackText && Boolean(errors.feedbackText),
-          type: "string",
-          variant: "outlined",
-          fullWidth: true,
-          required: true
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            height: 50,
-            width: "50%"
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            height: 30
-          })]
-        })
-      }), /*#__PURE__*/_jsx(Button, {
-        disabled: loading,
-        "data-cy": "save_settings_button",
-        type: "submit",
-        onClick: async () => {
-          handleSubmit(values);
-          handleClosefeedbackForm();
-          await checkForManualChanges();
-        },
-        "aria-label": t("submit_feedback"),
-        color: "primary",
-        variant: "contained",
-        sx: {
-          marginTop: 4,
-          marginLeft: 2
-        },
-        children: t("submit_feedback")
-      }), /*#__PURE__*/_jsx(PDFViewer, {
-        open: openPDF,
-        handleClose: handleClosePDF,
-        pdfUrl: pdfUrl,
-        pageNumber: pageNumber,
-        setPageNumber: setPageNumber,
-        scale: scale,
-        setScale: setScale,
-        t: t
-      })]
-    })]
-  });
-}
-FeedbackForm.propTypes = {
-  values: PropTypes.object,
-  errors: PropTypes.object,
-  touched: PropTypes.object,
-  handleChange: PropTypes.func,
-  handleBlur: PropTypes.func,
-  handleSubmit: PropTypes.func,
-  aiGrade: PropTypes.object,
-  t: PropTypes.func,
-  attendeesData: PropTypes.array
-};
-export default function CreateFeedbackForm({
-  initialValues = {
-    t: x => x,
-    feedbackText: "",
-    selectedAttendee: "",
-    // Add this line to the initial values
-    feedbackLevel1: 0,
-    // Add this line to the initial values
-    feedbackLevel1Name: "Novice Low",
-    // Add this line to the initial values
-    feedbackLevel2: 0,
-    // Add this line to the initial values
-    feedbackLevel2Name: "Novice Low",
-    // Add this line to the initial values
-    feedbackLevel3: 0,
-    // Add this line to the initial values
-    feedbackLevel3Name: "Novice Low",
-    // Add this line to the initial values
-    feedbackLevel4: 0,
-    // Add this line to the initial values
-    feedbackLevel4Name: "Novice Low",
-    // Add this line to the initial values
-    feedbackLevel5: 0,
-    // Add this line to the initial values
-    feedbackLevel5Name: "Novice Low",
-    // Add this line to the initial values
-    feedbackLevel6: 0,
-    // Add this line to the initial values
-    feedbackLevel6Name: "Novice Low" // Add this line to the initial values
-  },
-  handleSubmit: handleSubmitFeedback,
-  enableReinitialize,
-  attendeesData,
-  handleBatchGradeConversations,
-  aiGrade = {},
-  conversation = {},
-  t = text => text,
-  pdfUrl,
-  pageNumber,
-  setPageNumber,
-  scale,
-  setScale,
-  loading,
-  handleClosefeedbackForm,
-  saveTranscript = () => {}
-}) {
-  return /*#__PURE__*/_jsx("div", {
-    children: /*#__PURE__*/_jsx(Formik, {
-      initialValues: initialValues,
-      enableReinitialize: enableReinitialize,
-      validationSchema: CreateFeedbackForm.validationSchema
-      //causees submit to be called twice, commenting out for now
-
-      // onSubmit={(values, { setSubmitting }) => {
-      //   // console.log('values in onsubmit', values);
-      //   const result = diff(initialValues, values);
-      //   handleSubmitFeedback(result, { setSubmitting });
-      // }}
-      ,
-      render: ({
-        handleChange,
-        handleSubmit,
-        values,
-        ...otherProps
-      }) => {
-        return /*#__PURE__*/_jsx("form", {
-          onSubmit: handleSubmit,
-          children: /*#__PURE__*/_jsx(Grid, {
-            container: true,
-            spacing: 3,
-            sx: {
-              justifyContent: "center",
-              alignItems: "center"
-            },
-            children: /*#__PURE__*/_jsxs(Grid, {
-              size: {
-                xs: 12,
-                md: 12,
-                lg: 12,
-                xl: 9
-              },
-              children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(CardContent, {
-                sx: {
-                  p: 3
-                },
-                children: /*#__PURE__*/_jsx(FeedbackForm, {
-                  t: t,
-                  loading: loading,
-                  saveTranscript: saveTranscript,
-                  handleSubmit: handleSubmitFeedback,
-                  aiGrade: aiGrade,
-                  handleClosefeedbackForm: handleClosefeedbackForm,
-                  handleChange: handleChange,
-                  values: values,
-                  attendeesData: attendeesData,
-                  handleBatchGradeConversations: handleBatchGradeConversations,
-                  conversation: conversation,
-                  pdfUrl: pdfUrl,
-                  pageNumber: pageNumber,
-                  setPageNumber: setPageNumber,
-                  scale: scale,
-                  setScale: setScale,
-                  ...otherProps
-                })
-              }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(CardActions, {
-                sx: {
-                  py: 2,
-                  px: 3
-                }
-              })]
-            })
-          })
-        });
-      }
-    })
-  });
-}
-CreateFeedbackForm.validationSchema = Yup.object().shape({
-  feedbackText: Yup.string().required("Required")
-});
-CreateFeedbackForm.propTypes = {
-  initialValues: PropTypes.object,
-  t: PropTypes.func,
-  saveTranscript: PropTypes.func,
-  enableReinitialize: PropTypes.bool,
-  touched: PropTypes.object,
-  onSubmit: PropTypes.func,
-  handleSubmit: PropTypes.func,
-  handleBatchGradeConversations: PropTypes.func,
-  aiGrade: PropTypes.object,
-  conversation: PropTypes.object,
-  attendeesData: PropTypes.array
-};