@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Dialogs/QuickCreateClassroomDialog/QuickCreateClassroomDialog.js

@@ -1,201 +0,0 @@
-import { useState, useEffect } from "react";
-import TextField from "@mui/material/TextField";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-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 Grid from "@mui/material/Grid";
-import ImageSelector from "../../Forms/ImageSelector/ImageSelector";
-import PlaceholderImages from "../../utils/placeholder-images/index";
-import LanguageSelector from "../../Forms/LanguageSelector/LanguageSelector";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function QuickCreateClassroomDialog({
-  open,
-  handleClose,
-  handleCreate,
-  onCreated,
-  t = text => text,
-  fileSizeLimit,
-  verificationStatus,
-  learnLang,
-  userImage,
-  forLang,
-  languages,
-  forLanguages
-}) {
-  const [name, setName] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const defaultSelectedImage = {
-    image: PlaceholderImages.classroom,
-    imageSelectionMethod: "default_image"
-  };
-  const [selectedImage, setSelectedImage] = useState(defaultSelectedImage);
-  const [picture, setPicture] = useState("");
-  const [classroomLearnLang, setClassroomLearnLang] = useState("");
-  const [classroomForLang, setClassroomForLang] = useState("");
-  useEffect(() => {
-    if (learnLang && classroomLearnLang === "") {
-      setClassroomLearnLang(learnLang);
-    }
-  }, [learnLang]);
-  useEffect(() => {
-    if (forLang && classroomForLang === "") {
-      setClassroomForLang(forLang);
-    }
-  }, [forLang]);
-  const handleImageSelection = event => {
-    const {
-      name,
-      value
-    } = event.target;
-    setSelectedImage(prev => ({
-      ...prev,
-      [name]: value
-    }));
-    setPicture(value);
-  };
-  const removeImage = () => {
-    setSelectedImage(defaultSelectedImage);
-    setPicture("");
-  };
-  const generateRandomEnrolmentKey = () => {
-    return String(Math.floor(Math.random() * 90000) + 10000);
-  };
-  const handleSubmit = async () => {
-    if (!name.trim()) return;
-    setIsLoading(true);
-    try {
-      const createdClassroom = await handleCreate({
-        classroomName: name.trim(),
-        description: `${t("first_classroom_description", {
-          learnLang: t(classroomLearnLang)
-        })}`,
-        learnLang: classroomLearnLang,
-        forLang: classroomForLang,
-        visibility: "private",
-        vchatEnabled: true,
-        vchatEnabledInSettings: true,
-        isDynamicResponsesEnabled: "enabled",
-        enrolmentKey: generateRandomEnrolmentKey(),
-        allowedDomains: [],
-        collaborators: [],
-        tags: [],
-        picture: picture || PlaceholderImages.classroom,
-        userImage: userImage
-      });
-      resetAndClose();
-      if (onCreated && createdClassroom) {
-        onCreated(createdClassroom, selectedImage.image || null);
-      }
-    } catch (error) {
-      console.error("Failed to create classroom:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  const resetAndClose = () => {
-    setName("");
-    setSelectedImage(defaultSelectedImage);
-    setPicture("");
-    setClassroomLearnLang(learnLang || "");
-    setClassroomForLang(forLang || "");
-    handleClose();
-  };
-  return /*#__PURE__*/_jsxs(Dialog, {
-    open: open,
-    onClose: isLoading ? undefined : resetAndClose,
-    maxWidth: "sm",
-    fullWidth: true,
-    children: [/*#__PURE__*/_jsx(DialogTitle, {
-      children: t("create_classroom") || "Create Classroom"
-    }), /*#__PURE__*/_jsx(DialogContent, {
-      children: /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        flexDirection: "column",
-        gap: 1,
-        pt: 1,
-        children: [/*#__PURE__*/_jsx(TextField, {
-          label: t("classroom_name") || "Classroom Name",
-          value: name,
-          onChange: e => setName(e.target.value),
-          fullWidth: true,
-          autoFocus: true,
-          required: true,
-          disabled: isLoading,
-          inputProps: {
-            maxLength: 100
-          },
-          onKeyDown: e => e.key === "Enter" && handleSubmit(),
-          margin: "normal"
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(LanguageSelector, {
-            id: "learnLang",
-            name: "learnLang",
-            "data-cy": "learnLang",
-            label: t("the_language_classroom_teach"),
-            margin: "normal",
-            variant: "outlined",
-            fullWidth: true,
-            required: true,
-            t: t,
-            languages: languages,
-            value: classroomLearnLang,
-            disabled: isLoading,
-            onChange: e => {
-              setClassroomLearnLang(e.target.value);
-            }
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(LanguageSelector, {
-            id: "forLang",
-            name: "forLang",
-            "data-cy": "forLang",
-            label: t("the_language_students_classroom_speak"),
-            margin: "normal",
-            variant: "outlined",
-            fullWidth: true,
-            required: true,
-            t: t,
-            languages: forLanguages,
-            value: classroomForLang,
-            disabled: isLoading,
-            onChange: e => {
-              setClassroomForLang(e.target.value);
-            }
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(ImageSelector, {
-            t: t,
-            name: "image",
-            value: selectedImage.image,
-            handleChange: handleImageSelection,
-            fileSizeLimit: fileSizeLimit,
-            removeImage: removeImage,
-            autoCrop: true,
-            autoSuggest: false,
-            selectedImage: selectedImage,
-            verificationStatus: verificationStatus
-          })
-        })]
-      })
-    }), /*#__PURE__*/_jsxs(DialogActions, {
-      children: [/*#__PURE__*/_jsx(Button, {
-        onClick: resetAndClose,
-        color: "primary",
-        disabled: isLoading,
-        children: t("cancel") || "Cancel"
-      }), /*#__PURE__*/_jsx(Button, {
-        onClick: handleSubmit,
-        color: "primary",
-        variant: "contained",
-        disabled: !name.trim() || isLoading,
-        children: t("create") || "Create"
-      })]
-    })]
-  });
-}

package/dist/Dialogs/QuickCreateCourseDialog/QuickCreateCourseDialog.js

@@ -1,215 +0,0 @@
-import { useState, useEffect } from "react";
-import TextField from "@mui/material/TextField";
-import MenuItem from "@mui/material/MenuItem";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-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 Grid from "@mui/material/Grid";
-import LanguageSelector from "../../Forms/LanguageSelector/LanguageSelector";
-import ImageSelector from "../../Forms/ImageSelector/ImageSelector";
-import PlaceholderImages from "../../utils/placeholder-images/index";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function QuickCreateCourseDialog({
-  open,
-  handleClose,
-  handleCreate,
-  onCreated,
-  t = text => text,
-  learnLang,
-  forLang,
-  languages,
-  forLanguages,
-  difficulties = ["A1", "A2", "B1", "B2", "C1", "C2"],
-  fileSizeLimit,
-  verificationStatus,
-  userImage
-}) {
-  const defaultSelectedImage = {
-    image: PlaceholderImages.course,
-    imageSelectionMethod: "default_image"
-  };
-  const [courseName, setCourseName] = useState("");
-  const [difficulty, setDifficulty] = useState("");
-  const [courseLearnLang, setCourseLearnLang] = useState("");
-  const [courseForLang, setCourseForLang] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [selectedImage, setSelectedImage] = useState(defaultSelectedImage);
-  const [picture, setPicture] = useState("");
-  useEffect(() => {
-    if (learnLang && courseLearnLang === "") {
-      setCourseLearnLang(learnLang);
-    }
-  }, [learnLang]);
-  useEffect(() => {
-    if (forLang && courseForLang === "") {
-      setCourseForLang(forLang);
-    }
-  }, [forLang]);
-  const handleImageSelection = event => {
-    const {
-      name,
-      value
-    } = event.target;
-    setSelectedImage(prev => ({
-      ...prev,
-      [name]: value
-    }));
-    setPicture(value);
-  };
-  const removeImage = () => {
-    setSelectedImage(defaultSelectedImage);
-    setPicture("");
-  };
-  const generateRandomEnrolmentKey = () => {
-    return String(Math.floor(Math.random() * 90000) + 10000);
-  };
-  const handleSubmit = async () => {
-    if (!courseName.trim() || !difficulty) return;
-    setIsLoading(true);
-    try {
-      const createdCourse = await handleCreate({
-        courseName: courseName.trim(),
-        description: `${t("course_description_default", {
-          learnLang: t(courseLearnLang)
-        })}`,
-        difficulty,
-        learnLang: courseLearnLang,
-        forLang: courseForLang,
-        picture: picture || PlaceholderImages.course,
-        visibility: "private",
-        enrolmentKey: generateRandomEnrolmentKey(),
-        allowedDomains: [],
-        tags: [],
-        collaborators: [],
-        userImage: userImage,
-        isShareable: "collaborators",
-        duplicated: false
-      });
-      resetAndClose();
-      if (onCreated && createdCourse) {
-        onCreated(createdCourse, selectedImage.image || null);
-      }
-    } catch (error) {
-      console.error("Failed to create course:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  const resetAndClose = () => {
-    setCourseName("");
-    setDifficulty("");
-    setCourseLearnLang(learnLang || "");
-    setCourseForLang(forLang || "");
-    setSelectedImage(defaultSelectedImage);
-    setPicture("");
-    handleClose();
-  };
-  const isSubmitDisabled = !courseName.trim() || !difficulty || isLoading;
-  return /*#__PURE__*/_jsxs(Dialog, {
-    open: open,
-    onClose: isLoading ? undefined : resetAndClose,
-    maxWidth: "sm",
-    fullWidth: true,
-    children: [/*#__PURE__*/_jsx(DialogTitle, {
-      children: t("create_course") || "Create Course"
-    }), /*#__PURE__*/_jsx(DialogContent, {
-      children: /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        flexDirection: "column",
-        gap: 1,
-        pt: 1,
-        children: [/*#__PURE__*/_jsx(TextField, {
-          label: t("course_name") || "Course Name",
-          value: courseName,
-          onChange: e => setCourseName(e.target.value),
-          fullWidth: true,
-          autoFocus: true,
-          required: true,
-          disabled: isLoading,
-          inputProps: {
-            maxLength: 200
-          },
-          onKeyDown: e => e.key === "Enter" && handleSubmit(),
-          margin: "normal"
-        }), /*#__PURE__*/_jsx(TextField, {
-          select: true,
-          label: t("difficulty") || "Difficulty",
-          value: difficulty,
-          onChange: e => setDifficulty(e.target.value),
-          fullWidth: true,
-          required: true,
-          disabled: isLoading,
-          margin: "normal",
-          children: difficulties.map(d => /*#__PURE__*/_jsx(MenuItem, {
-            value: d,
-            children: t(d)
-          }, d))
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(LanguageSelector, {
-            id: "learnLang",
-            name: "learnLang",
-            "data-cy": "learnLang",
-            label: t("the_language_course_teach"),
-            margin: "normal",
-            variant: "outlined",
-            fullWidth: true,
-            required: true,
-            t: t,
-            languages: languages,
-            value: courseLearnLang,
-            disabled: isLoading,
-            onChange: e => setCourseLearnLang(e.target.value)
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(LanguageSelector, {
-            id: "forLang",
-            name: "forLang",
-            "data-cy": "forLang",
-            label: t("the_language_students_course_speak"),
-            margin: "normal",
-            variant: "outlined",
-            fullWidth: true,
-            required: true,
-            t: t,
-            languages: forLanguages,
-            value: courseForLang,
-            disabled: isLoading,
-            onChange: e => setCourseForLang(e.target.value)
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(ImageSelector, {
-            t: t,
-            name: "image",
-            value: selectedImage.image,
-            handleChange: handleImageSelection,
-            fileSizeLimit: fileSizeLimit,
-            removeImage: removeImage,
-            autoCrop: true,
-            autoSuggest: false,
-            selectedImage: selectedImage,
-            verificationStatus: verificationStatus
-          })
-        })]
-      })
-    }), /*#__PURE__*/_jsxs(DialogActions, {
-      children: [/*#__PURE__*/_jsx(Button, {
-        onClick: resetAndClose,
-        color: "primary",
-        disabled: isLoading,
-        children: t("cancel") || "Cancel"
-      }), /*#__PURE__*/_jsx(Button, {
-        onClick: handleSubmit,
-        color: "primary",
-        variant: "contained",
-        disabled: isSubmitDisabled,
-        children: t("create") || "Create"
-      })]
-    })]
-  });
-}

package/dist/Dialogs/RecordingDialog/RecordingDialog.js

@@ -1,288 +0,0 @@
-/* eslint-disable react/prop-types */
-
-import ReactPlayer from "react-player";
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import Grid from "@mui/material/Grid";
-import PropTypes from "prop-types";
-import { Box, Typography, Divider, Avatar, Skeleton } from "@mui/material";
-import ErrorIcon from "@mui/icons-material/Error";
-import { red } from "@mui/material/colors";
-import { useMediaQuery } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const dateDifferenceInSeconds = (date1, date2) => {
-  const d1 = new Date(date1);
-  const d2 = new Date(date2);
-  return Math.abs((d2 - d1) / 1000);
-};
-const formatTimestamp = (timestamp, videoStartTime) => {
-  if (!timestamp && timestamp !== 0) return "00:00";
-  if (!videoStartTime) return "00:00";
-  let numberString = timestamp.toString();
-  numberString = numberString.substring(0, 10);
-  const formattedTime = Number(numberString);
-  const dateObj = new Date(formattedTime * 1000);
-  const isoString = dateObj.toISOString();
-  const seconds = dateDifferenceInSeconds(videoStartTime, isoString);
-  if (isNaN(seconds) || seconds < 0) return "00:00";
-  const mins = Math.floor(seconds / 60);
-  const secs = Math.floor(seconds % 60);
-  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
-};
-function TranscriptViewer({
-  conversation = {},
-  goToTimestamp = () => {},
-  attendeesData,
-  t = text => text,
-  loading = false,
-  videoStartTime = null
-}) {
-  return /*#__PURE__*/_jsx(Box, {
-    sx: {
-      overflowY: "auto",
-      height: "70vh",
-      wordBreak: "break-word",
-      padding: "10px",
-      marginTop: "20px",
-      width: "100%",
-      boxSizing: "border-box"
-    },
-    children: loading ? /*#__PURE__*/_jsx(Box, {
-      children: [1, 2, 3, 4, 5].map(item => /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          mb: 2,
-          p: 1
-        },
-        children: [/*#__PURE__*/_jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24,
-          sx: {
-            mr: 1
-          }
-        }), /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            flex: 1
-          },
-          children: [/*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            width: "20%",
-            height: 20,
-            sx: {
-              mb: 0.5
-            }
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            width: "90%",
-            height: 16
-          })]
-        })]
-      }, `skeleton-${item}`))
-    }) : conversation && Object.keys(conversation).length > 0 ? conversation.map((sentence, i) => {
-      const identifier = sentence.userId || sentence.username || sentence.user || sentence.speaker || sentence.name;
-      const attendee = attendeesData.find(item => item.memberId === identifier || item.username?.toLowerCase() === identifier?.toLowerCase());
-      const userImage = attendee?.userImage || null;
-      return /*#__PURE__*/_jsxs(Box, {
-        onClick: () => goToTimestamp(sentence.start_time, sentence.end_time),
-        sx: theme => ({
-          display: "flex",
-          flexDirection: "column",
-          mb: 1.5,
-          cursor: "pointer",
-          p: 1.5,
-          borderRadius: 2,
-          transition: "all 0.2s ease-in-out",
-          border: "1px solid transparent",
-          "&:hover": {
-            backgroundColor: theme.palette.mode === "dark" ? theme.palette.primary.dark : theme.palette.primary.light + "15",
-            border: `1px solid ${theme.palette.primary.main}`,
-            transform: "translateX(4px)"
-          }
-        }),
-        children: [/*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            mb: 0.5,
-            gap: 1
-          },
-          children: [/*#__PURE__*/_jsx(Avatar, {
-            alt: sentence?.username,
-            src: userImage,
-            sx: {
-              width: 28,
-              height: 28
-            }
-          }), sentence?.user && /*#__PURE__*/_jsx(Typography, {
-            variant: "subtitle2",
-            sx: {
-              fontWeight: "bold",
-              whiteSpace: "nowrap",
-              flex: 1
-            },
-            children: sentence.user
-          }), (sentence.start_time !== undefined || sentence.end_time !== undefined) && videoStartTime && /*#__PURE__*/_jsx(Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: 0.5,
-              px: 1,
-              py: 0.25,
-              backgroundColor: theme => theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.06)",
-              borderRadius: 1
-            },
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "caption",
-              sx: {
-                fontFamily: "monospace",
-                fontWeight: 500,
-                color: "text.secondary"
-              },
-              children: formatTimestamp(sentence.start_time, videoStartTime)
-            })
-          })]
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: "body2",
-          sx: {
-            ml: 4.5,
-            lineHeight: 1.6,
-            color: "text.primary"
-          },
-          children: sentence.text
-        })]
-      }, `conversation-${i}`);
-    }) : /*#__PURE__*/_jsx(Typography, {
-      variant: "body2",
-      children: t("no_conversation_available")
-    })
-  });
-}
-TranscriptViewer.propTypes = {
-  conversation: PropTypes.object,
-  goToTimestamp: PropTypes.func,
-  t: PropTypes.func,
-  loading: PropTypes.bool,
-  videoStartTime: PropTypes.string
-};
-export default function RecordingDialog({
-  open,
-  handleClose,
-  goToTimestamp,
-  t = text => text,
-  loading,
-  s3Url,
-  playerRef,
-  conversation,
-  attendeesData,
-  videoStartTime
-}) {
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: attendeesData.length > 0 && /*#__PURE__*/_jsx(ResponsiveDialog, {
-      open: open,
-      handleClose: handleClose,
-      maxWidth: 1,
-      dialogTitle: /*#__PURE__*/_jsx(Box, {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          gap: 2
-        },
-        children: /*#__PURE__*/_jsx(Typography, {
-          children: t("recording_info")
-        })
-      }),
-      children: /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        sx: {
-          width: "100%"
-        },
-        spacing: 2,
-        children: [/*#__PURE__*/_jsx(Grid, {
-          sx: {
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center"
-          },
-          size: {
-            xs: 12,
-            md: 7
-          },
-          children: loading || !s3Url ? /*#__PURE__*/_jsx(Box, {
-            sx: {
-              width: "100%",
-              height: "70vh",
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              alignItems: "center",
-              backgroundColor: "#f5f5f5",
-              borderRadius: 1
-            }
-          }) : /*#__PURE__*/_jsx(ReactPlayer, {
-            ref: playerRef,
-            controls: true,
-            src: s3Url,
-            width: "100%",
-            height: "70%",
-            config: {
-              file: {
-                attributes: {
-                  controlsList: "nodownload"
-                }
-              }
-            },
-            onContextMenu: e => e.preventDefault()
-          })
-        }), !isSmallScreen && /*#__PURE__*/_jsx(Divider, {
-          orientation: "vertical",
-          variant: "middle",
-          flexItem: true,
-          sx: {
-            paddingLeft: "20px"
-          }
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: {
-            sx: 12,
-            md: 4.5
-          },
-          children: /*#__PURE__*/_jsx(TranscriptViewer, {
-            t: t,
-            attendeesData: attendeesData,
-            conversation: conversation,
-            goToTimestamp: goToTimestamp,
-            loading: loading,
-            videoStartTime: videoStartTime
-          })
-        })]
-      })
-    })
-  });
-}
-RecordingDialog.propTypes = {
-  memberId: PropTypes.string,
-  t: PropTypes.func,
-  saveTranscript: PropTypes.func,
-  loading: PropTypes.bool,
-  handleListUserAuthEvents: PropTypes.func,
-  open: PropTypes.bool,
-  handleClose: PropTypes.func,
-  meetingID: PropTypes.string,
-  attendeesData: PropTypes.array,
-  meetingTopic: PropTypes.string,
-  meetingPrompt: PropTypes.string,
-  isTeacher: PropTypes.bool,
-  goToTimestamp: PropTypes.func,
-  handleBatchGradeConversations: PropTypes.func,
-  selectedRecording: PropTypes.object,
-  aiGrade: PropTypes.object,
-  s3Url: PropTypes.string,
-  playerRef: PropTypes.object,
-  conversation: PropTypes.array,
-  handleCreateFeedback: PropTypes.func,
-  videoStartTime: PropTypes.string
-};