@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Dialogs/QuickCreateTopicDialog/QuickCreateTopicDialog.js

@@ -1,260 +0,0 @@
-import { useState, useEffect, forwardRef } from "react";
-import TextField from "@mui/material/TextField";
-import MenuItem from "@mui/material/MenuItem";
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid";
-import Paper from "@mui/material/Paper";
-import ImageSelector from "../../Forms/ImageSelector/ImageSelector";
-import PlaceholderImages from "../../utils/placeholder-images/index";
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import TopicNualaAnimation from "../../Misc/QuickCreateNualaAnimations/TopicNualaAnimation";
-import { keyframes } from "@emotion/react";
-import { InputAdornment, Tooltip } from "@mui/material";
-import InfoIcon from "@mui/icons-material/Info";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const peekAnimation = keyframes`
-  0%   { transform: translateX(-150px) rotate(75deg); }
-  13%  { transform: translateX(0)      rotate(60deg); }
-  54%  { transform: translateX(0)      rotate(60deg); }
-  67%  { transform: translateX(-150px) rotate(75deg); }
-  100% { transform: translateX(-150px) rotate(75deg); }
-`;
-const TopicDialogPaper = /*#__PURE__*/forwardRef(function TopicDialogPaper({
-  children,
-  className,
-  style,
-  ...props
-}, ref) {
-  return /*#__PURE__*/_jsxs(Box, {
-    className: className,
-    style: {
-      ...style,
-      overflow: "visible"
-    },
-    sx: {
-      position: "relative"
-    },
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        position: "absolute",
-        top: 70,
-        right: -49,
-        transformOrigin: "bottom center",
-        pointerEvents: "none",
-        zIndex: 0,
-        display: {
-          xs: "none",
-          md: "block"
-        },
-        animation: `${peekAnimation} 12s ease-in-out 2s infinite backwards`
-      },
-      children: /*#__PURE__*/_jsx(TopicNualaAnimation, {
-        size: 200
-      })
-    }), /*#__PURE__*/_jsx(Paper, {
-      ref: ref,
-      ...props,
-      sx: {
-        position: "relative",
-        zIndex: 1,
-        ...props.sx,
-        borderRadius: "16px",
-        maxHeight: "90vh",
-        overflowY: "auto",
-        display: "flex",
-        flexDirection: "column"
-      },
-      children: children
-    })]
-  });
-});
-export default function QuickCreateTopicDialog({
-  open,
-  handleClose,
-  handleCreate,
-  onCreated,
-  t = text => text,
-  difficulties = ["A1", "A2", "B1", "B2", "C1", "C2"],
-  fileSizeLimit,
-  verificationStatus,
-  difficulty,
-  learnLang,
-  forLang,
-  userImage,
-  coursePicture
-}) {
-  const defaultSelectedImage = {
-    image: coursePicture || PlaceholderImages.topic,
-    imageSelectionMethod: "default_image"
-  };
-  const [topicName, setTopicName] = useState("");
-  const [topicDifficulty, setTopicDifficulty] = useState("");
-  const [topicDescription, setTopicDescription] = useState("");
-  const [topicGoal, setTopicGoal] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [selectedImage, setSelectedImage] = useState(defaultSelectedImage);
-  const [picture, setPicture] = useState(coursePicture || "");
-  useEffect(() => {
-    if (difficulty) {
-      setTopicDifficulty(difficulty);
-    }
-  }, [difficulty]);
-  useEffect(() => {
-    if (coursePicture) {
-      setSelectedImage({
-        image: coursePicture,
-        imageSelectionMethod: "default_image"
-      });
-      setPicture(coursePicture);
-    }
-  }, [coursePicture]);
-  useEffect(() => {
-    if (learnLang) {
-      setTopicDescription(`${t("topic_description_default", {
-        learnLang: t(learnLang)
-      })}`);
-    }
-  }, [learnLang]);
-  const handleImageSelection = event => {
-    const {
-      name,
-      value
-    } = event.target;
-    setSelectedImage(prev => ({
-      ...prev,
-      [name]: value
-    }));
-    setPicture(value);
-  };
-  const removeImage = () => {
-    setSelectedImage(defaultSelectedImage);
-    setPicture(coursePicture);
-  };
-  const handleSubmit = async () => {
-    if (!topicName.trim() || !topicDifficulty) return;
-    setIsLoading(true);
-    try {
-      const createdTopic = await handleCreate({
-        topicName: topicName.trim(),
-        description: topicGoal ? topicGoal.trim() : topicDescription,
-        topicGoal: topicGoal,
-        picture: picture || PlaceholderImages.topic,
-        difficulty: topicDifficulty,
-        learnLang: learnLang,
-        forLang: forLang,
-        visibility: "private",
-        userImage: userImage,
-        tags: []
-      });
-      resetAndClose();
-      if (onCreated && createdTopic) {
-        onCreated(createdTopic, selectedImage.image || null);
-      }
-    } catch (error) {
-      console.error("Failed to create topic:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  const resetAndClose = () => {
-    setTopicName("");
-    setTopicDescription("");
-    setTopicGoal("");
-    setSelectedImage(defaultSelectedImage);
-    setPicture("");
-    handleClose();
-  };
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
-    open: open,
-    handleClose: isLoading ? undefined : resetAndClose,
-    handleSubmit: handleSubmit,
-    dialogTitle: t("create_topic") || "Create Topic",
-    isSubmitDisabled: !topicName.trim() || !topicDifficulty || isLoading,
-    closeText: t("cancel") || "Cancel",
-    submitText: t("create") || "Create",
-    PaperComponent: TopicDialogPaper,
-    children: /*#__PURE__*/_jsxs(Box, {
-      display: "flex",
-      flexDirection: "column",
-      gap: 1,
-      pt: 1,
-      children: [/*#__PURE__*/_jsx(TextField, {
-        id: "topicName",
-        name: "topicName",
-        "data-cy": "topicName",
-        label: t("topic_name") || "Topic Name",
-        value: topicName,
-        onChange: e => setTopicName(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, {
-        id: "topicGoal",
-        name: "topicGoal",
-        "data-cy": "topicGoal",
-        label: t("topic_goal"),
-        placeholder: t("topic_goal_placeholder"),
-        value: topicGoal,
-        type: "text",
-        margin: "normal",
-        variant: "outlined",
-        multiline: true,
-        fullWidth: true,
-        onChange: e => setTopicGoal(e.target.value),
-        slotProps: {
-          input: {
-            endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
-              position: "end",
-              children: /*#__PURE__*/_jsx(Tooltip, {
-                title: t("topic_goal_info_text"),
-                placement: "top",
-                children: /*#__PURE__*/_jsx(InfoIcon, {
-                  fontSize: "small",
-                  style: {
-                    color: "lightgrey"
-                  }
-                })
-              })
-            })
-          }
-        }
-      }), /*#__PURE__*/_jsx(TextField, {
-        id: "topicDifficulty",
-        name: "topicDifficulty",
-        "data-cy": "topicDifficulty",
-        select: true,
-        label: t("difficulty") || "Difficulty",
-        value: topicDifficulty,
-        onChange: e => setTopicDifficulty(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(ImageSelector, {
-          t: t,
-          name: "image",
-          value: selectedImage.image,
-          handleChange: handleImageSelection,
-          fileSizeLimit: fileSizeLimit,
-          removeImage: removeImage,
-          autoCrop: true,
-          autoSuggest: false,
-          selectedImage: selectedImage,
-          verificationStatus: verificationStatus
-        })
-      })]
-    })
-  });
-}

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
-};