touchstudy-core 0.1.194 → 0.1.196

package/dist/index.modern.js

@@ -13,11 +13,11 @@ export { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 export { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 import React__default, { useState, useEffect, Fragment as Fragment$1, useRef, useCallback, useMemo, memo, createElement } from 'react';
-import { useTheme, Container, Typography, Stack, List, ListItem, FormGroup, FormControlLabel, Checkbox, Button, Box, Dialog, DialogTitle, IconButton, useMediaQuery, DialogContent, TextField, DialogActions, styled, FormLabel, Pagination, Paper, InputBase, Tooltip, tooltipClasses, Grid, ClickAwayListener, CircularProgress, FormControl, RadioGroup, Radio, Accordion, AccordionSummary, AccordionDetails, InputAdornment, Card as Card$1, Avatar, Table, TableHead, TableRow, TableCell, TableBody, Divider, Skeleton, Tabs, Tab, Drawer, TableContainer, tableCellClasses, Popover, Switch, InputLabel, Chip, ListItemButton, ListItemAvatar, ListItemText, Badge, CardMedia as CardMedia$1, MenuList } from '@mui/material';
+import { useTheme, Container, Typography, Stack, List, ListItem, FormGroup, FormControlLabel, Checkbox, Button, Box, Dialog, DialogTitle, IconButton, useMediaQuery, DialogContent, TextField, DialogActions, styled, FormLabel, Pagination, Paper, InputBase, Tooltip, tooltipClasses, Grid, ClickAwayListener, Slider, Slide, AppBar, Toolbar, Divider, CircularProgress, FormControl, RadioGroup, Radio, Accordion, AccordionSummary, AccordionDetails, InputAdornment, Card as Card$1, Avatar, Table, TableHead, TableRow, TableCell, TableBody, Skeleton, Tabs, Tab, Drawer, TableContainer, tableCellClasses, Popover, Switch, InputLabel, Chip, ListItemButton, ListItemAvatar, ListItemText, Badge, CardMedia as CardMedia$1, MenuList } from '@mui/material';
 import moment from 'moment';
 export { default as moment } from 'moment';
-import { FaSave, FaCaretDown, FaTrash, FaTimes, FaSortUp, FaSortDown, FaPlusCircle, FaEye, FaPlus, FaCalendar, FaUser, FaBookOpen, FaUpload, FaCheckCircle, FaShare, FaExchangeAlt, FaPencilAlt, FaBell } from 'react-icons/fa';
-import { IoMdArrowBack, IoIosAdd, IoMdSync, IoIosAlert, IoIosArrowDown, IoIosSearch, IoIosArrowUp, IoMdAdd } from 'react-icons/io';
+import { FaSave, FaCaretDown, FaImage, FaPencilAlt, FaEraser, FaTrash, FaTimes, FaSortUp, FaSortDown, FaPlusCircle, FaEye, FaPlus, FaCalendar, FaUser, FaBookOpen, FaUpload, FaCheckCircle, FaShare, FaExchangeAlt, FaBell } from 'react-icons/fa';
+import { IoMdArrowBack, IoIosColorFill, IoMdUndo, IoMdRedo, IoIosAdd, IoMdSync, IoIosAlert, IoIosArrowDown, IoIosSearch, IoIosArrowUp, IoMdAdd } from 'react-icons/io';
 import { IoClose, IoSearch, IoTime, IoChatbubbleEllipsesSharp, IoPrint, IoChevronDown, IoCheckmarkCircle, IoChevronUpOutline, IoChevronDownOutline, IoReceiptSharp, IoBook, IoWarning, IoCalendarClear, IoPerson, IoInformationCircle, IoTrash, IoAddCircle, IoCheckmark, IoCloseCircle, IoLogOut } from 'react-icons/io5';
 import _$a from 'lodash';
 import { useSelector, useDispatch } from 'react-redux';
@@ -40,8 +40,10 @@ import CreatableSelect from 'react-select/creatable';
 import tinymce from 'tinymce';
 import '@wiris/mathtype-tinymce6';
 import { Editor } from '@tinymce/tinymce-react';
+import { ReactSketchCanvas } from 'react-sketch-canvas';
+import { MdAlignHorizontalRight, MdAlignVerticalBottom, MdAlignHorizontalCenter, MdAlignVerticalCenter, MdAlignHorizontalLeft, MdAlignVerticalTop, MdOutlineZoomOutMap, MdDraw, MdExpandMore, MdVisibilityOff, MdVisibility, MdAutorenew, MdMoreHoriz, MdDownload, MdError } from 'react-icons/md';
+import { GrClear, GrClearOption, GrNext, GrPrevious } from 'react-icons/gr';
 import { FaTrashCan, FaCirclePlus, FaX, FaEye as FaEye$1, FaRotateRight, FaPencil, FaClockRotateLeft } from 'react-icons/fa6';
-import { MdExpandMore, MdVisibilityOff, MdVisibility, MdAutorenew, MdMoreHoriz, MdDownload, MdError } from 'react-icons/md';
 import { yellow as yellow$1, blue, grey as grey$1 } from '@mui/material/colors';
 import Grid$1 from '@mui/material/Grid';
 import Card from '@mui/material/Card';
@@ -64,8 +66,7 @@ import { HiOutlinePencilAlt } from 'react-icons/hi';
 import TableCell$1 from '@mui/material/TableCell';
 import TableRow$1 from '@mui/material/TableRow';
 import html2pdf from 'html2pdf.js';
-import Slider from 'react-slick';
-import { GrNext, GrPrevious } from 'react-icons/gr';
+import Slider$1 from 'react-slick';
 import Table$1 from '@mui/material/Table';
 import TableBody$1 from '@mui/material/TableBody';
 import TableHead$1 from '@mui/material/TableHead';
@@ -1581,6 +1582,8 @@ var there_are_no_problems_you_were_working_on = "풀던 문제가 없습니다."
 var incomplete_exam = "미참가";
 var completed_exam = "참가";
 var failed_to_send_the_image_error = "이미지를 보내지 못했습니다: {{ message }}";
+var sketch = "스케치";
+var sketch_canvas = "스케치 캔버스";
 var lang_ko = {
 	problem_solving: problem_solving,
 	my_story: my_story,
@@ -2789,7 +2792,9 @@ var lang_ko = {
 	there_are_no_problems_you_were_working_on: there_are_no_problems_you_were_working_on,
 	incomplete_exam: incomplete_exam,
 	completed_exam: completed_exam,
-	failed_to_send_the_image_error: failed_to_send_the_image_error
+	failed_to_send_the_image_error: failed_to_send_the_image_error,
+	sketch: sketch,
+	sketch_canvas: sketch_canvas
 };
 
 var problem_solving$1 = "Problem Solving";
@@ -4025,6 +4030,8 @@ var there_are_no_problems_you_were_working_on$1 = "There are no problems you wer
 var incomplete_exam$1 = "Incomplete";
 var completed_exam$1 = "Completed";
 var failed_to_send_the_image_error$1 = "Failed to send the image: {{ message }}";
+var sketch$1 = "Sketch";
+var sketch_canvas$1 = "Sketch canvas";
 var lang_en = {
 	problem_solving: problem_solving$1,
 	my_story: my_story$1,
@@ -5235,7 +5242,9 @@ var lang_en = {
 	there_are_no_problems_you_were_working_on: there_are_no_problems_you_were_working_on$1,
 	incomplete_exam: incomplete_exam$1,
 	completed_exam: completed_exam$1,
-	failed_to_send_the_image_error: failed_to_send_the_image_error$1
+	failed_to_send_the_image_error: failed_to_send_the_image_error$1,
+	sketch: sketch$1,
+	sketch_canvas: sketch_canvas$1
 };
 
 i18n.use(initReactI18next).init({
@@ -9023,7 +9032,9 @@ var ChatRightItem = function ChatRightItem(_ref) {
     style: {
       height: "200px",
       position: "relative",
-      objectFit: "contain"
+      objectFit: "contain",
+      cursor: "pointer",
+      borderRadius: "6px"
     }
   }) : React__default.createElement("div", {
     className: styles$2["wrap-content"] + " " + styles$2["content-chat-receiver"],
@@ -9106,7 +9117,9 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
     style: {
       height: "200px",
       position: "relative",
-      objectFit: "contain"
+      objectFit: "contain",
+      cursor: "pointer",
+      borderRadius: "6px"
     }
   }) : React__default.createElement("div", {
     className: styles$2["wrap-content"] + " " + styles$2["content-chat-sender"],
@@ -9616,8 +9629,847 @@ var iconSendMessage = function iconSendMessage(_ref) {
   }));
 };
 
+var CanvasOverlay = function CanvasOverlay(_ref) {
+  var open = _ref.open,
+    width = _ref.width,
+    height = _ref.height,
+    size = _ref.size,
+    color = _ref.color,
+    isEraser = _ref.isEraser;
+  var overlayRef = useRef(null);
+  var _useState = useState({
+      x: 0,
+      y: 0
+    }),
+    cursorPosition = _useState[0],
+    setCursorPosition = _useState[1];
+  var _useState2 = useState(true),
+    hideCursor = _useState2[0],
+    setHideCursor = _useState2[1];
+  useEffect(function () {
+    var updateCursorPosition = function updateCursorPosition(clientX, clientY) {
+      var _overlayRef$current;
+      var rect = (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.getBoundingClientRect();
+      var isInside = rect && clientX > rect.left && clientX < rect.right && clientY > rect.top && clientY < rect.bottom;
+      setHideCursor(!isInside);
+      if (rect) setCursorPosition({
+        x: clientX - rect.left,
+        y: clientY - rect.top
+      });
+    };
+    var handleMouseMove = function handleMouseMove(e) {
+      updateCursorPosition(e.clientX, e.clientY);
+    };
+    var handleTouchMove = function handleTouchMove(e) {
+      if (e.touches.length > 0) {
+        var touch = e.touches[0];
+        updateCursorPosition(touch.clientX, touch.clientY);
+      }
+    };
+    if (open) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("touchmove", handleTouchMove);
+    }
+    return function () {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("touchmove", handleTouchMove);
+    };
+  }, [open]);
+  var left = cursorPosition.x - size / 2;
+  var top = cursorPosition.y - size / 2;
+  return React__default.createElement(Box, {
+    ref: overlayRef,
+    sx: {
+      position: "absolute",
+      top: 0,
+      left: "50%",
+      transform: "translateX(-50%)",
+      width: width + "px",
+      height: height + "px",
+      pointerEvents: "none",
+      overflow: "hidden"
+    },
+    width: width,
+    height: height
+  }, React__default.createElement(Box, {
+    sx: {
+      position: "fixed",
+      top: top,
+      left: left,
+      width: size + "px",
+      height: size + "px",
+      borderRadius: "50%",
+      border: "1px solid " + (isEraser ? "red" : color),
+      backgroundColor: isEraser ? "rgba(255,0,0,0.1)" : "transparent",
+      pointerEvents: "none",
+      zIndex: 10,
+      display: size > 0 && !hideCursor ? "block" : "none"
+    }
+  }));
+};
+
+var MessageSortBy;
+(function (MessageSortBy) {
+  MessageSortBy["CreatedAt"] = "CreatedAt";
+})(MessageSortBy || (MessageSortBy = {}));
+var OrderBy$1;
+(function (OrderBy) {
+  OrderBy["ASC"] = "ASC";
+  OrderBy["DESC"] = "DESC";
+})(OrderBy$1 || (OrderBy$1 = {}));
+var StudentSortBy;
+(function (StudentSortBy) {
+  StudentSortBy["CreatedAt"] = "CreatedAt";
+  StudentSortBy["FullName"] = "FullName";
+})(StudentSortBy || (StudentSortBy = {}));
+var StudentOrderBy;
+(function (StudentOrderBy) {
+  StudentOrderBy["ASC"] = "ASC";
+  StudentOrderBy["DESC"] = "DESC";
+})(StudentOrderBy || (StudentOrderBy = {}));
+var MessageAction;
+(function (MessageAction) {
+  MessageAction[MessageAction["Default"] = 0] = "Default";
+  MessageAction[MessageAction["Took"] = 1] = "Took";
+})(MessageAction || (MessageAction = {}));
+var MessageSourceType;
+(function (MessageSourceType) {
+  MessageSourceType[MessageSourceType["Default"] = 0] = "Default";
+  MessageSourceType[MessageSourceType["Exam"] = 1] = "Exam";
+  MessageSourceType[MessageSourceType["Class"] = 2] = "Class";
+})(MessageSourceType || (MessageSourceType = {}));
+var MessageStatus;
+(function (MessageStatus) {
+  MessageStatus["Default"] = "Sent";
+  MessageStatus["Sending"] = "Sending...";
+  MessageStatus["SentError"] = "Sent fail, Retry";
+})(MessageStatus || (MessageStatus = {}));
+
+var types = {
+	__proto__: null,
+	get MessageSortBy () { return MessageSortBy; },
+	get OrderBy () { return OrderBy$1; },
+	get StudentSortBy () { return StudentSortBy; },
+	get StudentOrderBy () { return StudentOrderBy; },
+	get MessageAction () { return MessageAction; },
+	get MessageSourceType () { return MessageSourceType; },
+	get MessageStatus () { return MessageStatus; }
+};
+
+var ExamStatus$1;
+(function (ExamStatus) {
+  ExamStatus["Default"] = "Default";
+  ExamStatus["Pending"] = "Pending";
+  ExamStatus["Inprogress"] = "Inprogress";
+  ExamStatus["Completed"] = "Completed";
+})(ExamStatus$1 || (ExamStatus$1 = {}));
+var Roles;
+(function (Roles) {
+  Roles["Student"] = "Student";
+  Roles["Teacher"] = "Teacher";
+  Roles["Admin"] = "Admin";
+})(Roles || (Roles = {}));
+var MESSAGE_DEFAULT_FILTER = {
+  currentPage: 1,
+  pageSize: 15,
+  textSearch: "",
+  sortColumnDirection: OrderBy$1.DESC,
+  sortColumnName: MessageSortBy.CreatedAt
+};
+var AlignList = ["Min", "Mid", "Max"];
+var DEFAULT_STROKE_COLOR = "#000000";
+var DEFAULT_BG_COLOR = "#FFFFFF";
+var DEFAULT_STROKE_WIDTH = 4;
+var DEFAULT_ERASER_WIDTH = 10;
+var CANVAS_WIDTH = 800;
+var CANVAS_HEIGHT = 600;
+
+var BgImgAlignTool = function BgImgAlignTool(_ref) {
+  var aspect = _ref.aspect,
+    axis = _ref.axis,
+    align = _ref.align,
+    onAlignChange = _ref.onAlignChange;
+  var handleChangeAlign = function handleChangeAlign() {
+    onAlignChange(axis, align);
+  };
+  var icon = useMemo(function () {
+    switch (align) {
+      case "Min":
+        return axis === "x" ? React__default.createElement(MdAlignHorizontalLeft, {
+          size: 14
+        }) : React__default.createElement(MdAlignVerticalTop, {
+          size: 14
+        });
+      case "Mid":
+        return axis === "x" ? React__default.createElement(MdAlignHorizontalCenter, {
+          size: 14
+        }) : React__default.createElement(MdAlignVerticalCenter, {
+          size: 14
+        });
+      default:
+        return axis === "x" ? React__default.createElement(MdAlignHorizontalRight, {
+          size: 14
+        }) : React__default.createElement(MdAlignVerticalBottom, {
+          size: 14
+        });
+    }
+  }, [axis, align]);
+  var selected = useMemo(function () {
+    return axis === "x" ? aspect.startsWith("" + axis + align) : aspect.endsWith("" + axis.toUpperCase() + align);
+  }, [axis, align, aspect]);
+  return React__default.createElement(IconButton, {
+    size: "small",
+    onClick: handleChangeAlign,
+    sx: {
+      p: 1
+    },
+    color: selected ? "success" : undefined
+  }, icon);
+};
+
+var BgImgAlignToolList = function BgImgAlignToolList(_ref) {
+  var axis = _ref.axis,
+    aspect = _ref.aspect,
+    onAlignChange = _ref.onAlignChange;
+  return React__default.createElement(Stack, {
+    direction: "row",
+    spacing: 1
+  }, AlignList.map(function (align) {
+    return React__default.createElement(BgImgAlignTool, {
+      key: "" + axis + align,
+      aspect: aspect,
+      axis: axis,
+      align: align,
+      onAlignChange: onAlignChange
+    });
+  }));
+};
+
+var BgImgTool = function BgImgTool(_ref) {
+  var inputRef = _ref.inputRef,
+    value = _ref.value,
+    apsect = _ref.apsect,
+    onClear = _ref.onClear,
+    onPick = _ref.onPick,
+    onChange = _ref.onChange,
+    onAspectChange = _ref.onAspectChange;
+  return React__default.createElement(Stack, {
+    direction: "row",
+    spacing: 1,
+    alignItems: "center"
+  }, React__default.createElement(IconButton, {
+    sx: {
+      width: "32px",
+      height: "32px",
+      background: grey[100]
+    },
+    size: "small",
+    onClick: onPick
+  }, React__default.createElement(FaImage, {
+    size: 16
+  }), React__default.createElement("input", {
+    ref: inputRef,
+    hidden: true,
+    type: "file",
+    accept: "image/*",
+    onChange: onChange
+  })), value && React__default.createElement(IconButton, {
+    sx: {
+      width: "32px",
+      height: "32px",
+      background: red[900],
+      "&:hover": {
+        background: red[500]
+      }
+    },
+    onClick: onClear
+  }, React__default.createElement(GrClear, {
+    size: 16,
+    color: "#FFF"
+  })), value && React__default.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: 1
+  }, React__default.createElement(Stack, {
+    direction: "column"
+  }, React__default.createElement(IconButton, {
+    size: "small",
+    onClick: function onClick() {
+      return onAspectChange();
+    },
+    sx: {
+      p: 1
+    },
+    color: apsect === "none" ? "success" : undefined
+  }, React__default.createElement(MdOutlineZoomOutMap, {
+    size: 14
+  }))), React__default.createElement(Stack, {
+    direction: "column"
+  }, React__default.createElement(BgImgAlignToolList, {
+    aspect: apsect,
+    axis: "x",
+    onAlignChange: onAspectChange
+  }), React__default.createElement(BgImgAlignToolList, {
+    aspect: apsect,
+    axis: "y",
+    onAlignChange: onAspectChange
+  }))));
+};
+
+var ColorPicker = function ColorPicker(_ref) {
+  var disabled = _ref.disabled,
+    inputRef = _ref.inputRef,
+    onChange = _ref.onChange;
+  return React__default.createElement(Box, {
+    width: "32px",
+    height: "32px",
+    borderRadius: "50%",
+    overflow: "hidden",
+    border: "1px solid " + grey[500]
+  }, React__default.createElement("input", {
+    ref: inputRef,
+    onChange: onChange,
+    type: "color",
+    disabled: disabled,
+    style: {
+      width: "200%",
+      height: "200%",
+      borderStyle: "none",
+      backgroundColor: "none",
+      transform: "translate(-25%, -25%)",
+      cursor: "pointer"
+    }
+  }));
+};
+
+var boxShadow = "0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)";
+var CustomSlider = styled(Slider)(function (_ref) {
+  var theme = _ref.theme;
+  return _extends({
+    color: green[500],
+    height: 5,
+    width: 120,
+    marginInline: "8px",
+    "& .MuiSlider-thumb": {
+      height: 20,
+      width: 20,
+      backgroundColor: "#fff",
+      boxShadow: "0 0 2px 0px rgba(0, 0, 0, 0.1)",
+      "&:focus, &:hover, &.Mui-active": {
+        boxShadow: "0px 0px 3px 1px rgba(0, 0, 0, 0.1)",
+        "@media (hover: none)": {
+          boxShadow: boxShadow
+        }
+      },
+      "&:before": {
+        boxShadow: "0px 0px 1px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.12)"
+      }
+    },
+    "& .MuiSlider-valueLabel": {
+      fontSize: 12,
+      fontWeight: "normal",
+      top: 4,
+      backgroundColor: "unset",
+      color: theme.palette.text.primary,
+      "&::before": {
+        display: "none"
+      },
+      "& *": _extends({
+        background: "transparent",
+        color: "#000"
+      }, theme.applyStyles("dark", {
+        color: "#fff"
+      }))
+    },
+    "& .MuiSlider-track": {
+      border: "none",
+      boxShadow: "inset 0px 0px 4px -2px #000",
+      height: 5
+    },
+    "& .MuiSlider-rail": {
+      opacity: 0.5,
+      boxShadow: "inset 0px 0px 4px -2px #000",
+      backgroundColor: "#d0d0d0"
+    }
+  }, theme.applyStyles("dark", {
+    color: green[700]
+  }));
+});
+var WidthSlider = function WidthSlider(_ref2) {
+  var value = _ref2.value,
+    onChange = _ref2.onChange;
+  return React__default.createElement(CustomSlider, {
+    defaultValue: value,
+    onChange: onChange,
+    min: 1,
+    valueLabelDisplay: "on"
+  });
+};
+
+var PencilTool = function PencilTool(_ref) {
+  var inputRef = _ref.inputRef,
+    selected = _ref.selected,
+    width = _ref.width,
+    onSelect = _ref.onSelect,
+    onChangeColor = _ref.onChangeColor,
+    onChangeWidth = _ref.onChangeWidth;
+  return React__default.createElement(Stack, {
+    direction: "row",
+    spacing: 1,
+    alignItems: "center"
+  }, React__default.createElement(IconButton, {
+    sx: _extends({
+      width: "32px",
+      height: "32px",
+      background: !selected ? grey[100] : green[500]
+    }, selected && {
+      color: "#FFFF"
+    }, {
+      "&:hover": {
+        background: !selected ? grey[100] : green[500]
+      }
+    }),
+    size: "small",
+    onClick: onSelect
+  }, React__default.createElement(FaPencilAlt, {
+    size: 14
+  })), React__default.createElement(ColorPicker, {
+    inputRef: inputRef,
+    onChange: onChangeColor
+  }), React__default.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    px: 1
+  }, React__default.createElement(WidthSlider, {
+    value: width,
+    onChange: onChangeWidth
+  })));
+};
+
+var EraserTool = function EraserTool(_ref) {
+  var selected = _ref.selected,
+    width = _ref.width,
+    onSelect = _ref.onSelect,
+    onChangeWidth = _ref.onChangeWidth;
+  return React__default.createElement(Stack, {
+    direction: "row",
+    spacing: 1,
+    alignItems: "center"
+  }, React__default.createElement(IconButton, {
+    sx: _extends({
+      width: "32px",
+      height: "32px",
+      background: !selected ? grey[100] : red[900]
+    }, selected && {
+      color: "#FFFF"
+    }, {
+      "&:hover": {
+        background: !selected ? grey[100] : red[900]
+      }
+    }),
+    size: "small",
+    onClick: onSelect
+  }, React__default.createElement(FaEraser, {
+    size: 16
+  })), React__default.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    px: 1
+  }, React__default.createElement(WidthSlider, {
+    value: width,
+    onChange: onChangeWidth
+  })));
+};
+
+var BgColorTool = function BgColorTool(_ref) {
+  var inputRef = _ref.inputRef,
+    onPick = _ref.onPick,
+    onChange = _ref.onChange;
+  return React__default.createElement(Stack, {
+    direction: "row",
+    spacing: 1,
+    alignItems: "center"
+  }, React__default.createElement(Button, {
+    onClick: onPick
+  }, React__default.createElement(Box, {
+    width: "32px",
+    height: "32px",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  }, React__default.createElement(IoIosColorFill, {
+    color: grey[600],
+    size: 20
+  })), React__default.createElement(ColorPicker, {
+    inputRef: inputRef,
+    onChange: onChange
+  })));
+};
+
+var ToolContainerStyles = {
+  display: "flex",
+  gap: 2,
+  flexWrap: "nowrap",
+  justifyContent: {
+    lg: "center",
+    sx: "start"
+  },
+  alignItems: "center",
+  px: 4,
+  pb: 2,
+  pt: 1,
+  width: "100%",
+  overflowX: "auto",
+  overflowY: "hidden"
+};
+var CanvasContainerStyles = {
+  position: "relative",
+  flexGrow: 1,
+  display: "flex",
+  justifyContent: {
+    lg: "center",
+    sx: "start"
+  }
+};
+var CanvasWrapperStyles = {
+  flexGrow: 1,
+  overflow: "scroll",
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  justifyContent: {
+    lg: "center",
+    sx: "start"
+  },
+  padding: "8px 24px 24px"
+};
+var IconButtonStyles = {
+  width: "32px",
+  height: "32px",
+  background: grey[100]
+};
+
+var Transition = React__default.forwardRef(function Transition(props, ref) {
+  return React__default.createElement(Slide, Object.assign({
+    direction: "up",
+    ref: ref
+  }, props));
+});
+var SketchDialog = function SketchDialog(_ref) {
+  var open = _ref.open,
+    drawPath = _ref.drawPath,
+    onClose = _ref.onClose,
+    onSave = _ref.onSave;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var canvasRef = useRef(null);
+  var _useState = useState(DEFAULT_STROKE_COLOR),
+    strokeColor = _useState[0],
+    setStrokeColor = _useState[1];
+  var _useState2 = useState(DEFAULT_STROKE_WIDTH),
+    strokeWidth = _useState2[0],
+    setStrokeWidth = _useState2[1];
+  var _useState3 = useState(DEFAULT_ERASER_WIDTH),
+    eraserWidth = _useState3[0],
+    setEraserWidth = _useState3[1];
+  var _useState4 = useState(DEFAULT_BG_COLOR),
+    backgroundColor = _useState4[0],
+    setBackgroundColor = _useState4[1];
+  var _useState5 = useState(null),
+    backgroundImage = _useState5[0],
+    setBackgroundImage = _useState5[1];
+  var _useState6 = useState(false),
+    isEraser = _useState6[0],
+    setIsEraser = _useState6[1];
+  var bgImageInputRef = useRef(null);
+  var bgColorRef = useRef(null);
+  var colorRef = useRef(null);
+  var _useState7 = useState("none"),
+    bgImageAspect = _useState7[0],
+    setBgImageAspect = _useState7[1];
+  var getNewAlign = function getNewAlign(axis, align) {
+    if (!axis || !align) return "none";
+    var _bgImageAspect$split = bgImageAspect.split("Y"),
+      xAlign = _bgImageAspect$split[0],
+      yAlign = _bgImageAspect$split[1];
+    if (bgImageAspect === "none" || !xAlign && !yAlign) return axis === "y" ? "xMinY" + align : "x" + align + "YMin";
+    return axis === "y" ? xAlign + "Y" + align : "x" + align + "Y" + yAlign;
+  };
+  var handleChangeAlign = function handleChangeAlign(axis, pos) {
+    var newValue = getNewAlign(axis, pos);
+    setBgImageAspect(newValue);
+  };
+  var handleClickBgColor = function handleClickBgColor() {
+    var _bgColorRef$current;
+    (_bgColorRef$current = bgColorRef.current) === null || _bgColorRef$current === void 0 ? void 0 : _bgColorRef$current.click();
+  };
+  var clearCanvas = function clearCanvas() {
+    var _canvasRef$current;
+    (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.clearCanvas();
+    setBackgroundImage(null);
+    if (bgColorRef.current) bgColorRef.current.value = DEFAULT_BG_COLOR;
+    setBackgroundColor(DEFAULT_BG_COLOR);
+  };
+  var undo = function undo() {
+    var _canvasRef$current2;
+    (_canvasRef$current2 = canvasRef.current) === null || _canvasRef$current2 === void 0 ? void 0 : _canvasRef$current2.undo();
+  };
+  var redo = function redo() {
+    var _canvasRef$current3;
+    (_canvasRef$current3 = canvasRef.current) === null || _canvasRef$current3 === void 0 ? void 0 : _canvasRef$current3.redo();
+  };
+  var saveImage = function saveImage() {
+    try {
+      var _canvasRef$current4;
+      return Promise.resolve((_canvasRef$current4 = canvasRef.current) === null || _canvasRef$current4 === void 0 ? void 0 : _canvasRef$current4.exportImage("png")).then(function (imageData) {
+        var _canvasRef$current5;
+        return Promise.resolve((_canvasRef$current5 = canvasRef.current) === null || _canvasRef$current5 === void 0 ? void 0 : _canvasRef$current5.exportPaths()).then(function (data) {
+          onSave(imageData, data);
+          onClose();
+        });
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleEraserMode = function handleEraserMode() {
+    var _canvasRef$current6;
+    setIsEraser(true);
+    (_canvasRef$current6 = canvasRef.current) === null || _canvasRef$current6 === void 0 ? void 0 : _canvasRef$current6.eraseMode(true);
+  };
+  var handlePencilMode = function handlePencilMode() {
+    var _canvasRef$current7;
+    setIsEraser(false);
+    (_canvasRef$current7 = canvasRef.current) === null || _canvasRef$current7 === void 0 ? void 0 : _canvasRef$current7.eraseMode(false);
+  };
+  var handleClickChangeBgImage = function handleClickChangeBgImage() {
+    var _bgImageInputRef$curr;
+    (_bgImageInputRef$curr = bgImageInputRef.current) === null || _bgImageInputRef$curr === void 0 ? void 0 : _bgImageInputRef$curr.click();
+  };
+  var handleBackgroundImageChange = function handleBackgroundImageChange(event) {
+    var _event$target$files;
+    var file = (_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files[0];
+    if (file) {
+      var reader = new FileReader();
+      reader.onload = function () {
+        setBackgroundImage(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+  var handleChangePencilColor = function handleChangePencilColor(e) {
+    setStrokeColor(e.target.value);
+  };
+  var handleChangeBgColor = function handleChangeBgColor(e) {
+    setBackgroundColor(e.target.value);
+  };
+  var handleChangeEraserWidth = function handleChangeEraserWidth(e) {
+    return setEraserWidth(Number(e.target.value));
+  };
+  var handleChangePencilWidth = function handleChangePencilWidth(e) {
+    return setStrokeWidth(Number(e.target.value));
+  };
+  var debounceChangeBgColor = _$a.debounce(handleChangeBgColor, 300);
+  var debounceChangePencilColor = _$a.debounce(handleChangePencilColor, 300);
+  var debounceChangeEraserWidth = _$a.debounce(handleChangeEraserWidth, 300);
+  var debounceChangePencilWidth = _$a.debounce(handleChangePencilWidth, 300);
+  var currentToolSize = isEraser ? eraserWidth : strokeWidth;
+  var handleClearBgImage = function handleClearBgImage() {
+    setBackgroundImage(null);
+  };
+  var handleLoad = function handleLoad(data) {
+    try {
+      var _temp = function () {
+        if (data) {
+          var _canvasRef$current8;
+          return Promise.resolve((_canvasRef$current8 = canvasRef.current) === null || _canvasRef$current8 === void 0 ? void 0 : _canvasRef$current8.loadPaths(data)).then(function () {
+            if (bgColorRef.current) bgColorRef.current.value = backgroundColor;
+          });
+        } else {
+          var _canvasRef$current9;
+          return Promise.resolve((_canvasRef$current9 = canvasRef.current) === null || _canvasRef$current9 === void 0 ? void 0 : _canvasRef$current9.clearCanvas()).then(function () {
+            if (bgColorRef.current) bgColorRef.current.value = DEFAULT_BG_COLOR;
+            setBackgroundColor(DEFAULT_BG_COLOR);
+            setBackgroundImage(null);
+            setBgImageAspect("none");
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  useEffect(function () {
+    if (open) {
+      setTimeout(function () {
+        if (canvasRef.current) {
+          handleLoad(drawPath);
+        }
+      }, 0);
+    } else {
+      if (bgColorRef.current) bgColorRef.current.value = DEFAULT_BG_COLOR;
+      if (colorRef.current) colorRef.current.value = DEFAULT_STROKE_COLOR;
+      setStrokeColor(DEFAULT_STROKE_COLOR);
+      setStrokeWidth(DEFAULT_STROKE_WIDTH);
+      setEraserWidth(DEFAULT_ERASER_WIDTH);
+      setIsEraser(false);
+    }
+  }, [open, drawPath]);
+  return React__default.createElement(Dialog, {
+    fullScreen: true,
+    open: open,
+    onClose: onClose,
+    TransitionComponent: Transition
+  }, React__default.createElement(AppBar, {
+    color: "success",
+    sx: {
+      position: "relative"
+    }
+  }, React__default.createElement(Toolbar, null, React__default.createElement(IconButton, {
+    sx: {
+      width: "32px",
+      height: "32px"
+    },
+    edge: "start",
+    color: "inherit",
+    onClick: onClose,
+    "aria-label": "close"
+  }, React__default.createElement(IoClose, null)), React__default.createElement(Typography, {
+    sx: {
+      ml: 2,
+      flex: 1
+    },
+    variant: "h6",
+    component: "div"
+  }, t("sketch_canvas")), React__default.createElement(Stack, {
+    direction: "row",
+    gap: 1
+  }, React__default.createElement(Button, {
+    sx: {
+      px: 2
+    },
+    startIcon: React__default.createElement(FaSave, {
+      size: 14
+    }),
+    color: "inherit",
+    onClick: saveImage
+  }, t("save")), React__default.createElement(Button, {
+    sx: {
+      px: 2
+    },
+    startIcon: React__default.createElement(GrClearOption, {
+      size: 14
+    }),
+    color: "inherit",
+    onClick: clearCanvas
+  }, t("clear"))))), React__default.createElement(Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      padding: 2
+    }
+  }, React__default.createElement(Box, {
+    sx: ToolContainerStyles
+  }, React__default.createElement(PencilTool, {
+    inputRef: colorRef,
+    width: strokeWidth,
+    selected: !isEraser,
+    onSelect: handlePencilMode,
+    onChangeColor: debounceChangePencilColor,
+    onChangeWidth: debounceChangePencilWidth
+  }), React__default.createElement(Divider, {
+    orientation: "vertical",
+    flexItem: true,
+    sx: {
+      borderColor: grey[300]
+    }
+  }), React__default.createElement(EraserTool, {
+    width: eraserWidth,
+    selected: isEraser,
+    onSelect: handleEraserMode,
+    onChangeWidth: debounceChangeEraserWidth
+  }), React__default.createElement(Divider, {
+    orientation: "vertical",
+    flexItem: true,
+    sx: {
+      borderColor: grey[300]
+    }
+  }), React__default.createElement(BgColorTool, {
+    inputRef: bgColorRef,
+    onChange: debounceChangeBgColor,
+    onPick: handleClickBgColor
+  }), React__default.createElement(Divider, {
+    orientation: "vertical",
+    flexItem: true,
+    sx: {
+      borderColor: grey[300]
+    }
+  }), React__default.createElement(Stack, {
+    direction: "row",
+    spacing: 1,
+    alignItems: "center"
+  }, React__default.createElement(IconButton, {
+    sx: IconButtonStyles,
+    size: "small",
+    onClick: undo
+  }, React__default.createElement(IoMdUndo, {
+    size: 20
+  })), React__default.createElement(IconButton, {
+    sx: IconButtonStyles,
+    size: "small",
+    onClick: redo
+  }, React__default.createElement(IoMdRedo, {
+    size: 20
+  }))), React__default.createElement(Divider, {
+    orientation: "vertical",
+    flexItem: true,
+    sx: {
+      borderColor: grey[300]
+    }
+  }), React__default.createElement(BgImgTool, {
+    apsect: bgImageAspect,
+    inputRef: bgImageInputRef,
+    value: backgroundImage,
+    onAspectChange: handleChangeAlign,
+    onChange: handleBackgroundImageChange,
+    onClear: handleClearBgImage,
+    onPick: handleClickChangeBgImage
+  })), React__default.createElement(Box, {
+    sx: CanvasWrapperStyles
+  }, React__default.createElement(Box, {
+    sx: CanvasContainerStyles
+  }, React__default.createElement(ReactSketchCanvas, {
+    ref: canvasRef,
+    style: {
+      border: "2px solid " + green[500]
+    },
+    width: CANVAS_WIDTH + "px",
+    height: CANVAS_HEIGHT + "px",
+    strokeWidth: strokeWidth,
+    strokeColor: strokeColor,
+    canvasColor: backgroundColor,
+    backgroundImage: backgroundImage != null ? backgroundImage : undefined,
+    eraserWidth: eraserWidth,
+    preserveBackgroundImageAspectRatio: backgroundImage ? bgImageAspect : undefined
+  }), React__default.createElement(CanvasOverlay, {
+    width: CANVAS_WIDTH,
+    height: CANVAS_HEIGHT,
+    size: currentToolSize,
+    color: strokeColor,
+    open: open,
+    isEraser: isEraser
+  })))));
+};
+
 var InputChat = function InputChat(_ref) {
-  var text = _ref.text,
+  var isSending = _ref.isSending,
+    role = _ref.role,
+    text = _ref.text,
+    drawPath = _ref.drawPath,
+    onClearCanvas = _ref.onClearCanvas,
+    onSaveCanvas = _ref.onSaveCanvas,
     onChangeInput = _ref.onChangeInput,
     onSubmit = _ref.onSubmit,
     isCompleted = _ref.isCompleted,
@@ -9626,10 +10478,20 @@ var InputChat = function InputChat(_ref) {
     handleDeleteSelectedImage = _ref.handleDeleteSelectedImage;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var isStudent = role === Role.Student;
   var fileInputRef = useRef(null);
+  var _useState = useState(false),
+    open = _useState[0],
+    setOpen = _useState[1];
+  var disabled = isCompleted || isSending;
   var handleSubmit = function handleSubmit() {
     onSubmit();
   };
+  var handleToggleSketchDialog = function handleToggleSketchDialog() {
+    setOpen(function (state) {
+      return !state;
+    });
+  };
   var handleSelectedFile = function handleSelectedFile(e) {
     var files = e.target.files;
     handleUploadImage(files[0]);
@@ -9637,13 +10499,26 @@ var InputChat = function InputChat(_ref) {
       fileInputRef.current.value = "";
     }
   };
+  var handleSaveCanvas = function handleSaveCanvas(data, drawPath) {
+    onSaveCanvas(data, drawPath);
+  };
+  var handleClickImage = function handleClickImage() {
+    if (!drawPath) return;
+    handleToggleSketchDialog();
+  };
+  var handleopenSketchDialog = function handleopenSketchDialog() {
+    handleToggleSketchDialog();
+    onClearCanvas();
+  };
   return React__default.createElement(Grid, {
     item: true,
     xs: 12,
     padding: "16px"
-  }, React__default.createElement(Box, {
-    display: "flex",
-    flexDirection: "row",
+  }, React__default.createElement(Stack, {
+    direction: {
+      sx: "column",
+      lg: "row"
+    },
     gap: "24px"
   }, React__default.createElement(Box, {
     display: "flex",
@@ -9655,12 +10530,14 @@ var InputChat = function InputChat(_ref) {
     border: selectedFile ? "1px solid #97A1AF" : undefined,
     borderRadius: selectedFile ? "6px" : undefined,
     flexDirection: "column"
-  }, selectedFile && React__default.createElement("div", {
+  }, selectedFile && React__default.createElement(Box, {
     style: {
       position: "relative",
       margin: "10px",
-      width: "fit-content"
-    }
+      width: "fit-content",
+      cursor: drawPath ? "pointer" : "unset"
+    },
+    onClick: handleClickImage
   }, React__default.createElement("img", {
     src: selectedFile,
     style: {
@@ -9679,21 +10556,21 @@ var InputChat = function InputChat(_ref) {
       cursor: "pointer",
       background: grey[100]
     },
+    disabled: isSending,
     onClick: handleDeleteSelectedImage
   }, React__default.createElement(FaTrash, {
     size: 16
   }))), !selectedFile && React__default.createElement(TinyChatEditor, {
     initValue: text,
     onChange: onChangeInput,
-    disabled: isCompleted
+    disabled: disabled
   })), React__default.createElement(Typography, {
     fontWeight: 500,
     fontSize: "10px",
     lineHeight: "11.93px",
     color: "#97A1AF"
-  }, t('this_is_the_guidance_text'))), React__default.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
+  }, t("this_is_the_guidance_text"))), React__default.createElement(Stack, {
+    direction: "column",
     justifyContent: "flex-start",
     alignItems: "flex-end",
     gap: "16px"
@@ -9702,11 +10579,19 @@ var InputChat = function InputChat(_ref) {
     fullWidth: true,
     className: styles$2["btn-send"],
     sx: {
-      bgcolor: isCompleted ? styles.light + " !important" : styles.less_dark
+      bgcolor: disabled ? styles.light + " !important" : styles.less_dark
     },
-    disabled: isCompleted,
+    disabled: disabled,
     onClick: handleSubmit
-  }, React__default.createElement(iconSendMessage, null), React__default.createElement(Typography, {
+  }, isSending ? React__default.createElement(Stack, {
+    justifyContent: "center",
+    alignItems: "center"
+  }, React__default.createElement(CircularProgress, {
+    sx: {
+      color: "#FFF"
+    },
+    size: 14
+  })) : React__default.createElement(iconSendMessage, null), React__default.createElement(Typography, {
     fontWeight: 700,
     fontSize: "13px",
     lineHeight: "15.51px"
@@ -9714,12 +10599,12 @@ var InputChat = function InputChat(_ref) {
     variant: "outlined",
     component: "label",
     fullWidth: true,
-    disabled: isCompleted,
+    disabled: disabled,
     sx: {
       display: "flex",
       gap: "8px",
       padding: "12px !important",
-      borderColor: isCompleted ? "transparent" : styles.less_dark,
+      borderColor: disabled ? "transparent" : styles.less_dark,
       borderWidth: "1px"
     }
   }, React__default.createElement(iconPlusCircle, {
@@ -9735,9 +10620,20 @@ var InputChat = function InputChat(_ref) {
     type: "file",
     hidden: true,
     ref: fileInputRef,
-    disabled: isCompleted,
+    disabled: disabled,
     accept: "image/png, image/gif, image/jpeg",
     onChangeCapture: handleSelectedFile
+  })), !isStudent && React__default.createElement(Fragment$1, null, React__default.createElement(Button, {
+    startIcon: React__default.createElement(MdDraw, null),
+    variant: "contained",
+    disabled: disabled,
+    fullWidth: true,
+    onClick: handleopenSketchDialog
+  }, t("sketch")), React__default.createElement(SketchDialog, {
+    open: open,
+    drawPath: drawPath,
+    onClose: handleToggleSketchDialog,
+    onSave: handleSaveCanvas
   })))));
 };
 
@@ -10003,7 +10899,8 @@ var ChatHeader = function ChatHeader(_ref) {
 };
 
 var ChatContainer = function ChatContainer(_ref) {
-  var chatHeaderProps = _ref.chatHeaderProps,
+  var role = _ref.role,
+    chatHeaderProps = _ref.chatHeaderProps,
     chatListProps = _ref.chatListProps,
     inputProps = _ref.inputProps,
     _ref$scrollOffset = _ref.scrollOffset,
@@ -10096,76 +10993,9 @@ var ChatContainer = function ChatContainer(_ref) {
     className: "d-flex justify-content-center align-items-center"
   }, React__default.createElement(CircularProgress, null)), React__default.createElement(ChatList, Object.assign({}, chatListProps, {
     listItemRef: listItemRef
-  }))), React__default.createElement(InputChat, Object.assign({}, inputProps)));
-};
-
-var MessageSortBy;
-(function (MessageSortBy) {
-  MessageSortBy["CreatedAt"] = "CreatedAt";
-})(MessageSortBy || (MessageSortBy = {}));
-var OrderBy$1;
-(function (OrderBy) {
-  OrderBy["ASC"] = "ASC";
-  OrderBy["DESC"] = "DESC";
-})(OrderBy$1 || (OrderBy$1 = {}));
-var StudentSortBy;
-(function (StudentSortBy) {
-  StudentSortBy["CreatedAt"] = "CreatedAt";
-  StudentSortBy["FullName"] = "FullName";
-})(StudentSortBy || (StudentSortBy = {}));
-var StudentOrderBy;
-(function (StudentOrderBy) {
-  StudentOrderBy["ASC"] = "ASC";
-  StudentOrderBy["DESC"] = "DESC";
-})(StudentOrderBy || (StudentOrderBy = {}));
-var MessageAction;
-(function (MessageAction) {
-  MessageAction[MessageAction["Default"] = 0] = "Default";
-  MessageAction[MessageAction["Took"] = 1] = "Took";
-})(MessageAction || (MessageAction = {}));
-var MessageSourceType;
-(function (MessageSourceType) {
-  MessageSourceType[MessageSourceType["Default"] = 0] = "Default";
-  MessageSourceType[MessageSourceType["Exam"] = 1] = "Exam";
-  MessageSourceType[MessageSourceType["Class"] = 2] = "Class";
-})(MessageSourceType || (MessageSourceType = {}));
-var MessageStatus;
-(function (MessageStatus) {
-  MessageStatus["Default"] = "Sent";
-  MessageStatus["Sending"] = "Sending...";
-  MessageStatus["SentError"] = "Sent fail, Retry";
-})(MessageStatus || (MessageStatus = {}));
-
-var types = {
-	__proto__: null,
-	get MessageSortBy () { return MessageSortBy; },
-	get OrderBy () { return OrderBy$1; },
-	get StudentSortBy () { return StudentSortBy; },
-	get StudentOrderBy () { return StudentOrderBy; },
-	get MessageAction () { return MessageAction; },
-	get MessageSourceType () { return MessageSourceType; },
-	get MessageStatus () { return MessageStatus; }
-};
-
-var ExamStatus$1;
-(function (ExamStatus) {
-  ExamStatus["Default"] = "Default";
-  ExamStatus["Pending"] = "Pending";
-  ExamStatus["Inprogress"] = "Inprogress";
-  ExamStatus["Completed"] = "Completed";
-})(ExamStatus$1 || (ExamStatus$1 = {}));
-var Roles;
-(function (Roles) {
-  Roles["Student"] = "Student";
-  Roles["Teacher"] = "Teacher";
-  Roles["Admin"] = "Admin";
-})(Roles || (Roles = {}));
-var MESSAGE_DEFAULT_FILTER = {
-  currentPage: 1,
-  pageSize: 15,
-  textSearch: "",
-  sortColumnDirection: OrderBy$1.DESC,
-  sortColumnName: MessageSortBy.CreatedAt
+  }))), React__default.createElement(InputChat, Object.assign({
+    role: role
+  }, inputProps)));
 };
 
 var RECENT_USER_URL = BASE_URL + "/api/recentUsers";
@@ -10394,6 +11224,12 @@ var useChatContainer = function useChatContainer(props) {
   var _useState5 = useState(true),
     isScrollToEnd = _useState5[0],
     setScrollToEnd = _useState5[1];
+  var _useState6 = useState(),
+    drawPath = _useState6[0],
+    setDrawPath = _useState6[1];
+  var _useState7 = useState(false),
+    isSending = _useState7[0],
+    setSending = _useState7[1];
   var isAdmin = roles === null || roles === void 0 ? void 0 : roles.includes(Role.Admin);
   var _useMessageList = useMessageList({
       student: student
@@ -10418,6 +11254,7 @@ var useChatContainer = function useChatContainer(props) {
     try {
       var _temp3 = function _temp3(_result2) {
         if (_exit) return _result2;
+        setSending(false);
         loadingRef.current = false;
       };
       var _exit = false;
@@ -10425,6 +11262,7 @@ var useChatContainer = function useChatContainer(props) {
       loadingRef.current = true;
       if (!(selectedConversation !== null && selectedConversation !== void 0 && selectedConversation.id)) return Promise.resolve();
       setScrollToEnd(true);
+      setSending(true);
       var _temp2 = _catch(function () {
         if (file) {
           return Promise.resolve(handleUploadImageData(file)).then(function (selectedFile) {
@@ -10464,6 +11302,7 @@ var useChatContainer = function useChatContainer(props) {
   };
   var handleUploadImage = function handleUploadImage(file) {
     try {
+      handleClearCanvas();
       if (file) {
         setFile(file);
         var reader = new FileReader();
@@ -10477,11 +11316,29 @@ var useChatContainer = function useChatContainer(props) {
       return Promise.reject(e);
     }
   };
+  var handleSaveCanvas = function handleSaveCanvas(data, drawPath) {
+    try {
+      return Promise.resolve(fetch(data)).then(function (_fetch) {
+        return Promise.resolve(_fetch.blob()).then(function (blob) {
+          setFile(blob);
+          setBackgroundImage(data);
+          setDrawPath(drawPath);
+        });
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleClearCanvas = function handleClearCanvas() {
+    setBackgroundImage(null);
+    setDrawPath(undefined);
+    setFile(undefined);
+  };
   var handleUploadImageData = function handleUploadImageData(file) {
     try {
       return Promise.resolve(_catch(function () {
         var formData = new FormData();
-        formData.append("upload", file);
+        if (file instanceof Blob) formData.append("upload", file, 'drawing.png');else formData.append("upload", file);
         return Promise.resolve(apiUploadImageFile(formData)).then(function (res) {
           var _res$data;
           return {
@@ -10554,7 +11411,8 @@ var useChatContainer = function useChatContainer(props) {
       return Promise.reject(e);
     }
   };
-  var handleDeleteSelectedImage = function handleDeleteSelectedImage() {
+  var handleDeleteSelectedImage = function handleDeleteSelectedImage(e) {
+    e === null || e === void 0 ? void 0 : e.stopPropagation();
     setFile(undefined);
     setBackgroundImage(null);
   };
@@ -10642,12 +11500,16 @@ var useChatContainer = function useChatContainer(props) {
       handleDeleteMessage: handleDeleteMessage
     },
     inputProps: {
+      isSending: isSending,
+      drawPath: drawPath,
       selectedFile: backgroundImage,
       text: (message === null || message === void 0 ? void 0 : message.content) || "",
       onChangeInput: handleChangeInput,
       onSubmit: handleAddMessage,
       handleDeleteSelectedImage: handleDeleteSelectedImage,
       handleUploadImage: handleUploadImage,
+      onSaveCanvas: handleSaveCanvas,
+      onClearCanvas: handleClearCanvas,
       isCompleted: selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.isCompleted
     },
     isScrollToEnd: isScrollToEnd,
@@ -23211,12 +24073,12 @@ var useExamResultData = function useExamResultData(props) {
   var _useState9 = useState(),
     openProblem = _useState9[0],
     setOpenProblem = _useState9[1];
-  var _useState0 = useState(),
-    selectedQuestion = _useState0[0],
-    setSelectedQuestion = _useState0[1];
-  var _useState1 = useState(),
-    errorMessage = _useState1[0],
-    setErrorMessage = _useState1[1];
+  var _useState10 = useState(),
+    selectedQuestion = _useState10[0],
+    setSelectedQuestion = _useState10[1];
+  var _useState11 = useState(),
+    errorMessage = _useState11[0],
+    setErrorMessage = _useState11[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var isBelongAcademy = !!user && user.academyDomain && !user.isLearningSpace;
@@ -24109,7 +24971,7 @@ var useOverallChartContainer = function useOverallChartContainer(isStudent, exam
     return [texts.slice(0, middle), texts.slice(middle)];
   }, [JSON.stringify(categories)]);
   var formatTooltip = useCallback(function (_ref2) {
-    var _overallData$data$0$h, _overallData$data$, _overallData$data$1$h, _overallData$data$2, _overallData$data$2$h, _overallData$data$0$q, _overallData$data$3, _overallData$data$1$q, _overallData$data$4, _overallData$data$0$p, _overallData$data$5, _overallData$data$1$p, _overallData$data$6, _overallData$data$0$t, _overallData$data$7, _overallData$data$1$t, _overallData$data$8, _overallData$data$8$t, _overallData$data$0$l, _overallData$data$9, _overallData$data$1$l, _overallData$data$0, _overallData$data$0$l2, _overallData$data$0$c, _overallData$data$1, _overallData$data$1$c, _overallData$data$1$c2, _overallData$data$10, _overallData$data$10$;
+    var _overallData$data$0$h, _overallData$data$, _overallData$data$1$h, _overallData$data$2, _overallData$data$2$h, _overallData$data$0$q, _overallData$data$3, _overallData$data$1$q, _overallData$data$4, _overallData$data$0$p, _overallData$data$5, _overallData$data$1$p, _overallData$data$6, _overallData$data$0$t, _overallData$data$7, _overallData$data$1$t, _overallData$data$8, _overallData$data$8$t, _overallData$data$0$l, _overallData$data$9, _overallData$data$1$l, _overallData$data$10, _overallData$data$10$, _overallData$data$0$c, _overallData$data$11, _overallData$data$11$, _overallData$data$1$c, _overallData$data$12, _overallData$data$12$;
     var dataPointIndex = _ref2.dataPointIndex,
       w = _ref2.w;
     var label = categories[dataPointIndex];
@@ -24153,12 +25015,12 @@ var useOverallChartContainer = function useOverallChartContainer(isStudent, exam
           total: (_overallData$data$0$l = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$9 = overallData.data[0]) === null || _overallData$data$9 === void 0 ? void 0 : _overallData$data$9.lowLevelQuestions) != null ? _overallData$data$0$l : 0
         });
         avgValue = "" + t("n_questions", {
-          total: (_overallData$data$1$l = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$0 = overallData.data[1]) === null || _overallData$data$0 === void 0 ? void 0 : (_overallData$data$0$l2 = _overallData$data$0.lowLevelQuestions) === null || _overallData$data$0$l2 === void 0 ? void 0 : _overallData$data$0$l2.toFixed(2)) != null ? _overallData$data$1$l : 0
+          total: (_overallData$data$1$l = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$10 = overallData.data[1]) === null || _overallData$data$10 === void 0 ? void 0 : (_overallData$data$10$ = _overallData$data$10.lowLevelQuestions) === null || _overallData$data$10$ === void 0 ? void 0 : _overallData$data$10$.toFixed(2)) != null ? _overallData$data$1$l : 0
         });
         break;
       default:
-        myValue = ((_overallData$data$0$c = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$1 = overallData.data[0]) === null || _overallData$data$1 === void 0 ? void 0 : (_overallData$data$1$c = _overallData$data$1.correctRate) === null || _overallData$data$1$c === void 0 ? void 0 : _overallData$data$1$c.toFixed(2)) != null ? _overallData$data$0$c : 0) + "%";
-        avgValue = ((_overallData$data$1$c2 = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$10 = overallData.data[1]) === null || _overallData$data$10 === void 0 ? void 0 : (_overallData$data$10$ = _overallData$data$10.correctRate) === null || _overallData$data$10$ === void 0 ? void 0 : _overallData$data$10$.toFixed(2)) != null ? _overallData$data$1$c2 : 0) + "%";
+        myValue = ((_overallData$data$0$c = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$11 = overallData.data[0]) === null || _overallData$data$11 === void 0 ? void 0 : (_overallData$data$11$ = _overallData$data$11.correctRate) === null || _overallData$data$11$ === void 0 ? void 0 : _overallData$data$11$.toFixed(2)) != null ? _overallData$data$0$c : 0) + "%";
+        avgValue = ((_overallData$data$1$c = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$12 = overallData.data[1]) === null || _overallData$data$12 === void 0 ? void 0 : (_overallData$data$12$ = _overallData$data$12.correctRate) === null || _overallData$data$12$ === void 0 ? void 0 : _overallData$data$12$.toFixed(2)) != null ? _overallData$data$1$c : 0) + "%";
         break;
     }
     return "<div style=\"padding: 8px; background: #fff; border-radius: 4px;\">\n                    <div style=\"border-bottom: 1px solid #f3f3f3; margin-bottom: 4px\"><strong>" + label + "</strong></div>\n                    <div style=\"display: flex; justify-content: space-between\">\n                        <p style=\"margin-right: 4px\"><strong style=\"color: " + w.globals.colors[0] + "\">" + t("my_data") + ":</strong></p>\n                        <p>" + myValue + "</p>\n                    </div>\n                    <div style=\"display: flex; justify-content: space-between\">\n                        <p style=\"margin-right: 4px\"><strong style=\"color: " + w.globals.colors[1] + "\">" + t("avg_data") + ":</strong></p>\n                        <p>" + avgValue + "</p>\n                    </div>\n                </div>";
@@ -27797,7 +28659,7 @@ var PreparedItem = function PreparedItem(_ref) {
           margin: "0 1rem",
           width: "800px"
         }
-      }, React__default.createElement(Slider, Object.assign({}, settings), subjectOptions.map(function (option) {
+      }, React__default.createElement(Slider$1, Object.assign({}, settings), subjectOptions.map(function (option) {
         return React__default.createElement(Tooltip, {
           title: option.label
         }, React__default.createElement(FormControlLabel, {
@@ -29842,13 +30704,13 @@ var useClassDetail = function useClassDetail(_ref) {
   };
   var handleAddToClass = function handleAddToClass(userIds) {
     try {
-      var _temp10 = function _temp10() {
+      var _temp12 = function _temp12() {
         dispatch(setLoading(false));
       };
       if (!classId || !openSelectDialog) return Promise.resolve();
       dispatch(setLoading(true));
-      var _temp1 = _catch(function () {
-        function _temp0() {
+      var _temp11 = _catch(function () {
+        function _temp10() {
           return Promise.resolve(handleGetDetailData(false)).then(function () {
             toast.success(t(classId ? "update_class_successfully" : "create_class_successfully"));
             handleCloseSelectDialog();
@@ -29865,18 +30727,18 @@ var useClassDetail = function useClassDetail(_ref) {
             });
           }
         }();
-        return _temp9 && _temp9.then ? _temp9.then(_temp0) : _temp0(_temp9);
+        return _temp9 && _temp9.then ? _temp9.then(_temp10) : _temp10(_temp9);
       }, function (error) {
         toast.error(getErrorMessage(t, error));
       });
-      return Promise.resolve(_temp1 && _temp1.then ? _temp1.then(_temp10) : _temp10(_temp1));
+      return Promise.resolve(_temp11 && _temp11.then ? _temp11.then(_temp12) : _temp12(_temp11));
     } catch (e) {
       return Promise.reject(e);
     }
   };
   var handleSubmit = function handleSubmit(values, _) {
     try {
-      var _temp14 = function _temp14() {
+      var _temp16 = function _temp16() {
         dispatch(setLoading(false));
       };
       if (values.courseWeeklyDays.some(function (i) {
@@ -29893,11 +30755,11 @@ var useClassDetail = function useClassDetail(_ref) {
       }
       var body = convertToRequestBody(values);
       dispatch(setLoading(true));
-      var _temp13 = _catch(function () {
-        function _temp12() {
+      var _temp15 = _catch(function () {
+        function _temp14() {
           toast.success(t(classId ? "update_class_successfully" : "create_class_successfully"));
         }
-        var _temp11 = function () {
+        var _temp13 = function () {
           if (!classId) {
             return Promise.resolve(createClassApi(body)).then(function (res) {
               pushTo(history, classListUrl + "/" + res.data.id);
@@ -29908,11 +30770,11 @@ var useClassDetail = function useClassDetail(_ref) {
             });
           }
         }();
-        return _temp11 && _temp11.then ? _temp11.then(_temp12) : _temp12(_temp11);
+        return _temp13 && _temp13.then ? _temp13.then(_temp14) : _temp14(_temp13);
       }, function (error) {
         toast.error(getErrorMessage(t, error));
       });
-      return Promise.resolve(_temp13 && _temp13.then ? _temp13.then(_temp14) : _temp14(_temp13));
+      return Promise.resolve(_temp15 && _temp15.then ? _temp15.then(_temp16) : _temp16(_temp15));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -29920,7 +30782,7 @@ var useClassDetail = function useClassDetail(_ref) {
   var getStudentNotInClassList = function getStudentNotInClassList() {
     try {
       if (!classId) return Promise.resolve();
-      var _temp15 = _catch(function () {
+      var _temp17 = _catch(function () {
         var _textSearchRef$curren;
         return Promise.resolve(getStudentClassApi(classId, _extends({}, filter, {
           textSearch: (_textSearchRef$curren = textSearchRef.current) === null || _textSearchRef$curren === void 0 ? void 0 : _textSearchRef$curren.value,
@@ -29951,7 +30813,7 @@ var useClassDetail = function useClassDetail(_ref) {
         setStudents([]);
         toast.error(getErrorMessage(t, error));
       });
-      return Promise.resolve(_temp15 && _temp15.then ? _temp15.then(function () {}) : void 0);
+      return Promise.resolve(_temp17 && _temp17.then ? _temp17.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
@@ -29959,7 +30821,7 @@ var useClassDetail = function useClassDetail(_ref) {
   var getTeacherNotInClassList = function getTeacherNotInClassList() {
     try {
       if (!classId) return Promise.resolve();
-      var _temp16 = _catch(function () {
+      var _temp18 = _catch(function () {
         var _textSearchRef$curren2;
         return Promise.resolve(getTeacherClassApi(classId, _extends({}, filter, {
           textSearch: (_textSearchRef$curren2 = textSearchRef.current) === null || _textSearchRef$curren2 === void 0 ? void 0 : _textSearchRef$curren2.value,
@@ -29990,7 +30852,7 @@ var useClassDetail = function useClassDetail(_ref) {
         setTeachers([]);
         toast.error(getErrorMessage(t, error));
       });
-      return Promise.resolve(_temp16 && _temp16.then ? _temp16.then(function () {}) : void 0);
+      return Promise.resolve(_temp18 && _temp18.then ? _temp18.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
@@ -31748,9 +32610,9 @@ var useUserList = function useUserList(role) {
   var _useState9 = useState(),
     deleteFile = _useState9[0],
     setDeleteFile = _useState9[1];
-  var _useState0 = useState(false),
-    isOpenDeleteUserCsv = _useState0[0],
-    setOpenDeleteUserCsv = _useState0[1];
+  var _useState10 = useState(false),
+    isOpenDeleteUserCsv = _useState10[0],
+    setOpenDeleteUserCsv = _useState10[1];
   var inputFileRef = useRef(null);
   var firstLoadRef = useRef(true);
   var handleChangeSelectedStudent = function handleChangeSelectedStudent(student) {
@@ -31906,7 +32768,7 @@ var useUserList = function useUserList(role) {
   };
   var getUserList = function getUserList() {
     try {
-      var _temp0 = function _temp0() {
+      var _temp10 = function _temp10() {
         firstLoadRef.current && dispatch(setLoading(false));
         if (firstLoadRef.current) firstLoadRef.current = false;
       };
@@ -31935,7 +32797,7 @@ var useUserList = function useUserList(role) {
         setPaging(DEFAULT_PAGING_RESPONSE);
         console.log(error);
       });
-      return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(_temp0) : _temp0(_temp9));
+      return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(_temp10) : _temp10(_temp9));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -31951,7 +32813,7 @@ var useUserList = function useUserList(role) {
       setSelectedUser(user);
       setOpenUserDialog(true);
       return Promise.resolve(_catch(function () {
-        var _temp1 = function () {
+        var _temp11 = function () {
           if (!!user.id && !!user.email) {
             return Promise.resolve(createRecentUserActionListApi({
               userId: user === null || user === void 0 ? void 0 : user.id,
@@ -31961,7 +32823,7 @@ var useUserList = function useUserList(role) {
             })).then(function () {});
           }
         }();
-        if (_temp1 && _temp1.then) return _temp1.then(function () {});
+        if (_temp11 && _temp11.then) return _temp11.then(function () {});
       }, function (error) {
         console.error(getErrorMessage(t, error));
       }));
@@ -31990,18 +32852,18 @@ var useUserList = function useUserList(role) {
   };
   var handleCreateOrUpdateUser = function handleCreateOrUpdateUser(value) {
     try {
-      var _temp13 = function _temp13() {
+      var _temp15 = function _temp15() {
         dispatch(setLoading(false));
       };
       if (value.fullName === "marcus") return Promise.resolve();
       dispatch(setLoading(true));
-      var _temp12 = _catch(function () {
-        function _temp11() {
+      var _temp14 = _catch(function () {
+        function _temp13() {
           return Promise.resolve(getUserList()).then(function () {
             handleCloseUserDialog();
           });
         }
-        var _temp10 = function () {
+        var _temp12 = function () {
           if (!!(selectedUser !== null && selectedUser !== void 0 && selectedUser.id)) {
             return Promise.resolve(updateUserApi(_extends({}, value, {
               grade: value.grade == null ? undefined : value.grade
@@ -32012,23 +32874,23 @@ var useUserList = function useUserList(role) {
             }))).then(function () {});
           }
         }();
-        return _temp10 && _temp10.then ? _temp10.then(_temp11) : _temp11(_temp10);
+        return _temp12 && _temp12.then ? _temp12.then(_temp13) : _temp13(_temp12);
       }, function (error) {
         toast.error(getErrorMessage(t, error));
       });
-      return Promise.resolve(_temp12 && _temp12.then ? _temp12.then(_temp13) : _temp13(_temp12));
+      return Promise.resolve(_temp14 && _temp14.then ? _temp14.then(_temp15) : _temp15(_temp14));
     } catch (e) {
       return Promise.reject(e);
     }
   };
   var handleDeleteUser = function handleDeleteUser() {
     try {
-      var _temp15 = function _temp15() {
+      var _temp17 = function _temp17() {
         dispatch(setLoading(false));
       };
       if (!(selectedUser !== null && selectedUser !== void 0 && selectedUser.id)) return Promise.resolve();
       dispatch(setLoading(true));
-      var _temp14 = _catch(function () {
+      var _temp16 = _catch(function () {
         return Promise.resolve(deleteUserApi(selectedUser.id)).then(function () {
           toggleConfirmDialog();
           getUserList();
@@ -32036,7 +32898,7 @@ var useUserList = function useUserList(role) {
       }, function (error) {
         toast.error(getErrorMessage(t, error));
       });
-      return Promise.resolve(_temp14 && _temp14.then ? _temp14.then(_temp15) : _temp15(_temp14));
+      return Promise.resolve(_temp16 && _temp16.then ? _temp16.then(_temp17) : _temp17(_temp16));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -32869,7 +33731,7 @@ var useCategoryOptions = function useCategoryOptions(subjectId, isMath, filter,
   };
   var getQuestionTypes = function getQuestionTypes(categoryId, subCategoryId) {
     try {
-      var _temp0 = function _temp0() {
+      var _temp10 = function _temp10() {
         setLoadingQuestionTypes(false);
       };
       setLoadingQuestionTypes(true);
@@ -32892,7 +33754,7 @@ var useCategoryOptions = function useCategoryOptions(subjectId, isMath, filter,
       }, function () {
         setQuestionTypes([]);
       });
-      return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(_temp0) : _temp0(_temp9));
+      return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(_temp10) : _temp10(_temp9));
     } catch (e) {
       return Promise.reject(e);
     }