touchstudy-core 0.1.196 → 0.1.197

package/dist/index.js

@@ -37,10 +37,8 @@ var CreatableSelect = _interopDefault(require('react-select/creatable'));
 var tinymce = _interopDefault(require('tinymce'));
 require('@wiris/mathtype-tinymce6');
 var tinymceReact = require('@tinymce/tinymce-react');
-var reactSketchCanvas = require('react-sketch-canvas');
-var md = require('react-icons/md');
-var gr = require('react-icons/gr');
 var fa6 = require('react-icons/fa6');
+var md = require('react-icons/md');
 var colors = require('@mui/material/colors');
 var Grid = _interopDefault(require('@mui/material/Grid'));
 var Card = _interopDefault(require('@mui/material/Card'));
@@ -64,6 +62,7 @@ var TableCell = _interopDefault(require('@mui/material/TableCell'));
 var TableRow = _interopDefault(require('@mui/material/TableRow'));
 var html2pdf = _interopDefault(require('html2pdf.js'));
 var Slider = _interopDefault(require('react-slick'));
+var gr = require('react-icons/gr');
 var Table = _interopDefault(require('@mui/material/Table'));
 var TableBody = _interopDefault(require('@mui/material/TableBody'));
 var TableHead = _interopDefault(require('@mui/material/TableHead'));
@@ -1578,8 +1577,9 @@ 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 exam_session = "시험 세션";
+var must_select_an_exam_first = "먼저 시험을 선택해야 합니다";
+var not_selected = "미선택";
 var lang_ko = {
 	problem_solving: problem_solving,
 	my_story: my_story,
@@ -2789,8 +2789,9 @@ var lang_ko = {
 	incomplete_exam: incomplete_exam,
 	completed_exam: completed_exam,
 	failed_to_send_the_image_error: failed_to_send_the_image_error,
-	sketch: sketch,
-	sketch_canvas: sketch_canvas
+	exam_session: exam_session,
+	must_select_an_exam_first: must_select_an_exam_first,
+	not_selected: not_selected
 };
 
 var problem_solving$1 = "Problem Solving";
@@ -4026,8 +4027,9 @@ 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 exam_session$1 = "Exam session";
+var must_select_an_exam_first$1 = "Must select an exam first";
+var not_selected$1 = "Not selected";
 var lang_en = {
 	problem_solving: problem_solving$1,
 	my_story: my_story$1,
@@ -5239,8 +5241,9 @@ var lang_en = {
 	incomplete_exam: incomplete_exam$1,
 	completed_exam: completed_exam$1,
 	failed_to_send_the_image_error: failed_to_send_the_image_error$1,
-	sketch: sketch$1,
-	sketch_canvas: sketch_canvas$1
+	exam_session: exam_session$1,
+	must_select_an_exam_first: must_select_an_exam_first$1,
+	not_selected: not_selected$1
 };
 
 i18n__default.use(reactI18next.initReactI18next).init({
@@ -7954,7 +7957,7 @@ var CustomSelect = function CustomSelect(_ref) {
   }, rest));
 };
 
-var _excluded$3 = ["defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti", "valueById", "isTextbook"];
+var _excluded$3 = ["defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti", "valueById", "isTextbook", "styles"];
 var CustomSelectOption = function CustomSelectOption(_ref) {
   var defaultValue = _ref.defaultValue,
     options = _ref.options,
@@ -7964,6 +7967,7 @@ var CustomSelectOption = function CustomSelectOption(_ref) {
     isMulti = _ref.isMulti,
     valueById = _ref.valueById,
     isTextbook = _ref.isTextbook,
+    styles = _ref.styles,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -7990,7 +7994,7 @@ var CustomSelectOption = function CustomSelectOption(_ref) {
       DropdownIndicator: DropdownIndicator,
       Option: CustomOption
     },
-    styles: customStyles,
+    styles: _extends({}, customStyles, styles),
     placeholder: t("select_placeholder")
   }, rest)) : React__default.createElement(Select__default, Object.assign({
     isDisabled: isDisabled,
@@ -8006,7 +8010,7 @@ var CustomSelectOption = function CustomSelectOption(_ref) {
       DropdownIndicator: DropdownIndicator,
       Option: CustomOption
     },
-    styles: customStyles,
+    styles: _extends({}, customStyles, styles),
     placeholder: t("select_placeholder")
   }, rest));
 };
@@ -9013,9 +9017,7 @@ var ChatRightItem = function ChatRightItem(_ref) {
     style: {
       height: "200px",
       position: "relative",
-      objectFit: "contain",
-      cursor: "pointer",
-      borderRadius: "6px"
+      objectFit: "contain"
     }
   }) : React__default.createElement("div", {
     className: styles$2["wrap-content"] + " " + styles$2["content-chat-receiver"],
@@ -9098,9 +9100,7 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
     style: {
       height: "200px",
       position: "relative",
-      objectFit: "contain",
-      cursor: "pointer",
-      borderRadius: "6px"
+      objectFit: "contain"
     }
   }) : React__default.createElement("div", {
     className: styles$2["wrap-content"] + " " + styles$2["content-chat-sender"],
@@ -9529,928 +9529,89 @@ var ChatItem = function ChatItem(props) {
     open: openConfirmDialog,
     toggle: toggleConfirmDialog,
     text: t("confirm_delete_message"),
-    onConfirm: function onConfirm() {
-      return handleDeleteMessage(conversationId || 0, id || 0, toggleConfirmDialog);
-    },
-    title: t("confirmation"),
-    okText: t("yes"),
-    cancelText: t("no")
-  }), React__default.createElement(UpdateMessageDialog, {
-    open: openUpdateDialog,
-    onClose: toggleUpdateDialog,
-    content: content,
-    handleUploadImage: handleUploadImage,
-    selectedFile: selectedFile,
-    contentType: contentType,
-    handleUpdateMessage: function handleUpdateMessage(content) {
-      return _handleUpdateMessage(conversationId || 0, id || 0, content, toggleUpdateDialog);
-    }
-  }));
-};
-
-var ChatList = function ChatList(_ref) {
-  var _ref$messages = _ref.messages,
-    messages = _ref$messages === void 0 ? [] : _ref$messages,
-    roles = _ref.roles,
-    onReTrySendMessage = _ref.onReTrySendMessage,
-    handleUpdateMessage = _ref.handleUpdateMessage,
-    handleDeleteMessage = _ref.handleDeleteMessage,
-    listItemRef = _ref.listItemRef;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var filterMessage = React.useMemo(function () {
-    var prevTime = 0;
-    var prevSender;
-    return messages.map(function (message) {
-      var _message$sender, _message$sender2;
-      var currentTime = new Date(message.createdAt).getTime();
-      var showTimestamp = !prevTime || currentTime - prevTime > 20 * 60 * 1000;
-      var showName = ((_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.fullName) !== prevSender;
-      prevSender = (_message$sender2 = message.sender) === null || _message$sender2 === void 0 ? void 0 : _message$sender2.fullName;
-      prevTime = currentTime;
-      return _extends({}, message, {
-        showTimestamp: showTimestamp,
-        showName: showName
-      });
-    });
-  }, [JSON.stringify(messages)]);
-  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(exports.Role.Student);
-  return React__default.createElement("ul", {
-    ref: listItemRef,
-    className: styles$2["list"] + " " + styles$2["padding-content"] + " d-flex h-100 flex-column mb-0  " + (!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) ? 'justify-content-center' : '')
-  }, !(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) && React__default.createElement("li", {
-    className: "text-muted text-center fst-italic fs-6"
-  }, t('no_message')), !!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) && filterMessage.map(function (message) {
-    return React__default.createElement(ChatItem, Object.assign({
-      key: message.id
-    }, message, {
-      isStudent: isStudent,
-      handleUpdateMessage: handleUpdateMessage,
-      handleDeleteMessage: handleDeleteMessage,
-      onReTrySendMessage: onReTrySendMessage
-    }));
-  }));
-};
-
-var iconSendMessage = function iconSendMessage(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "16" : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "16" : _ref$height,
-    color = _ref.color;
-  return React__default.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 16 16",
-    fill: color,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("path", {
-    d: "M14.8934 7.09539L14.8884 7.0932L1.54219 1.55758C1.42993 1.51059 1.30778 1.49217 1.18666 1.50395C1.06554 1.51573 0.949225 1.55734 0.848125 1.62508C0.741311 1.69507 0.653573 1.79052 0.592805 1.90283C0.532037 2.01515 0.500145 2.14081 0.5 2.26852V5.80883C0.50006 5.98341 0.561019 6.15249 0.67237 6.28695C0.783722 6.42141 0.938491 6.5128 1.11 6.54539L8.38906 7.89133C8.41767 7.89675 8.44348 7.91199 8.46205 7.93441C8.48062 7.95683 8.49078 7.98503 8.49078 8.01414C8.49078 8.04325 8.48062 8.07145 8.46205 8.09387C8.44348 8.1163 8.41767 8.13153 8.38906 8.13695L1.11031 9.48289C0.938851 9.5154 0.784092 9.60667 0.67269 9.74101C0.561288 9.87534 0.500219 10.0443 0.5 10.2188V13.7598C0.499917 13.8817 0.530111 14.0018 0.587871 14.1092C0.645632 14.2166 0.729152 14.3079 0.830938 14.3751C0.953375 14.4564 1.09706 14.4999 1.24406 14.5001C1.34626 14.5 1.4474 14.4795 1.54156 14.4398L14.8875 8.9357L14.8934 8.93289C15.0731 8.85569 15.2262 8.72751 15.3337 8.56421C15.4413 8.40092 15.4986 8.20968 15.4986 8.01414C15.4986 7.81861 15.4413 7.62736 15.3337 7.46407C15.2262 7.30077 15.0731 7.1726 14.8934 7.09539Z",
-    fill: "white"
-  }));
-};
-
-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 = React.useRef(null);
-  var _useState = React.useState({
-      x: 0,
-      y: 0
-    }),
-    cursorPosition = _useState[0],
-    setCursorPosition = _useState[1];
-  var _useState2 = React.useState(true),
-    hideCursor = _useState2[0],
-    setHideCursor = _useState2[1];
-  React.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(material.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(material.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;
-(function (OrderBy) {
-  OrderBy["ASC"] = "ASC";
-  OrderBy["DESC"] = "DESC";
-})(OrderBy || (OrderBy = {}));
-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; },
-	get StudentSortBy () { return StudentSortBy; },
-	get StudentOrderBy () { return StudentOrderBy; },
-	get MessageAction () { return MessageAction; },
-	get MessageSourceType () { return MessageSourceType; },
-	get MessageStatus () { return MessageStatus; }
-};
-
-var ExamStatus;
-(function (ExamStatus) {
-  ExamStatus["Default"] = "Default";
-  ExamStatus["Pending"] = "Pending";
-  ExamStatus["Inprogress"] = "Inprogress";
-  ExamStatus["Completed"] = "Completed";
-})(ExamStatus || (ExamStatus = {}));
-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.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 = React.useMemo(function () {
-    switch (align) {
-      case "Min":
-        return axis === "x" ? React__default.createElement(md.MdAlignHorizontalLeft, {
-          size: 14
-        }) : React__default.createElement(md.MdAlignVerticalTop, {
-          size: 14
-        });
-      case "Mid":
-        return axis === "x" ? React__default.createElement(md.MdAlignHorizontalCenter, {
-          size: 14
-        }) : React__default.createElement(md.MdAlignVerticalCenter, {
-          size: 14
-        });
-      default:
-        return axis === "x" ? React__default.createElement(md.MdAlignHorizontalRight, {
-          size: 14
-        }) : React__default.createElement(md.MdAlignVerticalBottom, {
-          size: 14
-        });
-    }
-  }, [axis, align]);
-  var selected = React.useMemo(function () {
-    return axis === "x" ? aspect.startsWith("" + axis + align) : aspect.endsWith("" + axis.toUpperCase() + align);
-  }, [axis, align, aspect]);
-  return React__default.createElement(material.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(material.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(material.Stack, {
-    direction: "row",
-    spacing: 1,
-    alignItems: "center"
-  }, React__default.createElement(material.IconButton, {
-    sx: {
-      width: "32px",
-      height: "32px",
-      background: grey[100]
-    },
-    size: "small",
-    onClick: onPick
-  }, React__default.createElement(fa.FaImage, {
-    size: 16
-  }), React__default.createElement("input", {
-    ref: inputRef,
-    hidden: true,
-    type: "file",
-    accept: "image/*",
-    onChange: onChange
-  })), value && React__default.createElement(material.IconButton, {
-    sx: {
-      width: "32px",
-      height: "32px",
-      background: red[900],
-      "&:hover": {
-        background: red[500]
-      }
-    },
-    onClick: onClear
-  }, React__default.createElement(gr.GrClear, {
-    size: 16,
-    color: "#FFF"
-  })), value && React__default.createElement(material.Stack, {
-    direction: "row",
-    alignItems: "center",
-    gap: 1
-  }, React__default.createElement(material.Stack, {
-    direction: "column"
-  }, React__default.createElement(material.IconButton, {
-    size: "small",
-    onClick: function onClick() {
-      return onAspectChange();
-    },
-    sx: {
-      p: 1
-    },
-    color: apsect === "none" ? "success" : undefined
-  }, React__default.createElement(md.MdOutlineZoomOutMap, {
-    size: 14
-  }))), React__default.createElement(material.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(material.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 = material.styled(material.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(material.Stack, {
-    direction: "row",
-    spacing: 1,
-    alignItems: "center"
-  }, React__default.createElement(material.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(fa.FaPencilAlt, {
-    size: 14
-  })), React__default.createElement(ColorPicker, {
-    inputRef: inputRef,
-    onChange: onChangeColor
-  }), React__default.createElement(material.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(material.Stack, {
-    direction: "row",
-    spacing: 1,
-    alignItems: "center"
-  }, React__default.createElement(material.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(fa.FaEraser, {
-    size: 16
-  })), React__default.createElement(material.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(material.Stack, {
-    direction: "row",
-    spacing: 1,
-    alignItems: "center"
-  }, React__default.createElement(material.Button, {
-    onClick: onPick
-  }, React__default.createElement(material.Box, {
-    width: "32px",
-    height: "32px",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center"
-  }, React__default.createElement(io.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(material.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 = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var canvasRef = React.useRef(null);
-  var _useState = React.useState(DEFAULT_STROKE_COLOR),
-    strokeColor = _useState[0],
-    setStrokeColor = _useState[1];
-  var _useState2 = React.useState(DEFAULT_STROKE_WIDTH),
-    strokeWidth = _useState2[0],
-    setStrokeWidth = _useState2[1];
-  var _useState3 = React.useState(DEFAULT_ERASER_WIDTH),
-    eraserWidth = _useState3[0],
-    setEraserWidth = _useState3[1];
-  var _useState4 = React.useState(DEFAULT_BG_COLOR),
-    backgroundColor = _useState4[0],
-    setBackgroundColor = _useState4[1];
-  var _useState5 = React.useState(null),
-    backgroundImage = _useState5[0],
-    setBackgroundImage = _useState5[1];
-  var _useState6 = React.useState(false),
-    isEraser = _useState6[0],
-    setIsEraser = _useState6[1];
-  var bgImageInputRef = React.useRef(null);
-  var bgColorRef = React.useRef(null);
-  var colorRef = React.useRef(null);
-  var _useState7 = React.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);
-    }
-  };
-  React.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(material.Dialog, {
-    fullScreen: true,
-    open: open,
-    onClose: onClose,
-    TransitionComponent: Transition
-  }, React__default.createElement(material.AppBar, {
-    color: "success",
-    sx: {
-      position: "relative"
-    }
-  }, React__default.createElement(material.Toolbar, null, React__default.createElement(material.IconButton, {
-    sx: {
-      width: "32px",
-      height: "32px"
-    },
-    edge: "start",
-    color: "inherit",
-    onClick: onClose,
-    "aria-label": "close"
-  }, React__default.createElement(io5.IoClose, null)), React__default.createElement(material.Typography, {
-    sx: {
-      ml: 2,
-      flex: 1
-    },
-    variant: "h6",
-    component: "div"
-  }, t("sketch_canvas")), React__default.createElement(material.Stack, {
-    direction: "row",
-    gap: 1
-  }, React__default.createElement(material.Button, {
-    sx: {
-      px: 2
-    },
-    startIcon: React__default.createElement(fa.FaSave, {
-      size: 14
-    }),
-    color: "inherit",
-    onClick: saveImage
-  }, t("save")), React__default.createElement(material.Button, {
-    sx: {
-      px: 2
+    onConfirm: function onConfirm() {
+      return handleDeleteMessage(conversationId || 0, id || 0, toggleConfirmDialog);
     },
-    startIcon: React__default.createElement(gr.GrClearOption, {
-      size: 14
-    }),
-    color: "inherit",
-    onClick: clearCanvas
-  }, t("clear"))))), React__default.createElement(material.Box, {
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      height: "100%",
-      padding: 2
-    }
-  }, React__default.createElement(material.Box, {
-    sx: ToolContainerStyles
-  }, React__default.createElement(PencilTool, {
-    inputRef: colorRef,
-    width: strokeWidth,
-    selected: !isEraser,
-    onSelect: handlePencilMode,
-    onChangeColor: debounceChangePencilColor,
-    onChangeWidth: debounceChangePencilWidth
-  }), React__default.createElement(material.Divider, {
-    orientation: "vertical",
-    flexItem: true,
-    sx: {
-      borderColor: grey[300]
-    }
-  }), React__default.createElement(EraserTool, {
-    width: eraserWidth,
-    selected: isEraser,
-    onSelect: handleEraserMode,
-    onChangeWidth: debounceChangeEraserWidth
-  }), React__default.createElement(material.Divider, {
-    orientation: "vertical",
-    flexItem: true,
-    sx: {
-      borderColor: grey[300]
-    }
-  }), React__default.createElement(BgColorTool, {
-    inputRef: bgColorRef,
-    onChange: debounceChangeBgColor,
-    onPick: handleClickBgColor
-  }), React__default.createElement(material.Divider, {
-    orientation: "vertical",
-    flexItem: true,
-    sx: {
-      borderColor: grey[300]
+    title: t("confirmation"),
+    okText: t("yes"),
+    cancelText: t("no")
+  }), React__default.createElement(UpdateMessageDialog, {
+    open: openUpdateDialog,
+    onClose: toggleUpdateDialog,
+    content: content,
+    handleUploadImage: handleUploadImage,
+    selectedFile: selectedFile,
+    contentType: contentType,
+    handleUpdateMessage: function handleUpdateMessage(content) {
+      return _handleUpdateMessage(conversationId || 0, id || 0, content, toggleUpdateDialog);
     }
-  }), React__default.createElement(material.Stack, {
-    direction: "row",
-    spacing: 1,
-    alignItems: "center"
-  }, React__default.createElement(material.IconButton, {
-    sx: IconButtonStyles,
-    size: "small",
-    onClick: undo
-  }, React__default.createElement(io.IoMdUndo, {
-    size: 20
-  })), React__default.createElement(material.IconButton, {
-    sx: IconButtonStyles,
-    size: "small",
-    onClick: redo
-  }, React__default.createElement(io.IoMdRedo, {
-    size: 20
-  }))), React__default.createElement(material.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(material.Box, {
-    sx: CanvasWrapperStyles
-  }, React__default.createElement(material.Box, {
-    sx: CanvasContainerStyles
-  }, React__default.createElement(reactSketchCanvas.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 ChatList = function ChatList(_ref) {
+  var _ref$messages = _ref.messages,
+    messages = _ref$messages === void 0 ? [] : _ref$messages,
+    roles = _ref.roles,
+    onReTrySendMessage = _ref.onReTrySendMessage,
+    handleUpdateMessage = _ref.handleUpdateMessage,
+    handleDeleteMessage = _ref.handleDeleteMessage,
+    listItemRef = _ref.listItemRef;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var filterMessage = React.useMemo(function () {
+    var prevTime = 0;
+    var prevSender;
+    return messages.map(function (message) {
+      var _message$sender, _message$sender2;
+      var currentTime = new Date(message.createdAt).getTime();
+      var showTimestamp = !prevTime || currentTime - prevTime > 20 * 60 * 1000;
+      var showName = ((_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.fullName) !== prevSender;
+      prevSender = (_message$sender2 = message.sender) === null || _message$sender2 === void 0 ? void 0 : _message$sender2.fullName;
+      prevTime = currentTime;
+      return _extends({}, message, {
+        showTimestamp: showTimestamp,
+        showName: showName
+      });
+    });
+  }, [JSON.stringify(messages)]);
+  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(exports.Role.Student);
+  return React__default.createElement("ul", {
+    ref: listItemRef,
+    className: styles$2["list"] + " " + styles$2["padding-content"] + " d-flex h-100 flex-column mb-0  " + (!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) ? 'justify-content-center' : '')
+  }, !(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) && React__default.createElement("li", {
+    className: "text-muted text-center fst-italic fs-6"
+  }, t('no_message')), !!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) && filterMessage.map(function (message) {
+    return React__default.createElement(ChatItem, Object.assign({
+      key: message.id
+    }, message, {
+      isStudent: isStudent,
+      handleUpdateMessage: handleUpdateMessage,
+      handleDeleteMessage: handleDeleteMessage,
+      onReTrySendMessage: onReTrySendMessage
+    }));
+  }));
+};
+
+var iconSendMessage = function iconSendMessage(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "16" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "16" : _ref$height,
+    color = _ref.color;
+  return React__default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 16 16",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M14.8934 7.09539L14.8884 7.0932L1.54219 1.55758C1.42993 1.51059 1.30778 1.49217 1.18666 1.50395C1.06554 1.51573 0.949225 1.55734 0.848125 1.62508C0.741311 1.69507 0.653573 1.79052 0.592805 1.90283C0.532037 2.01515 0.500145 2.14081 0.5 2.26852V5.80883C0.50006 5.98341 0.561019 6.15249 0.67237 6.28695C0.783722 6.42141 0.938491 6.5128 1.11 6.54539L8.38906 7.89133C8.41767 7.89675 8.44348 7.91199 8.46205 7.93441C8.48062 7.95683 8.49078 7.98503 8.49078 8.01414C8.49078 8.04325 8.48062 8.07145 8.46205 8.09387C8.44348 8.1163 8.41767 8.13153 8.38906 8.13695L1.11031 9.48289C0.938851 9.5154 0.784092 9.60667 0.67269 9.74101C0.561288 9.87534 0.500219 10.0443 0.5 10.2188V13.7598C0.499917 13.8817 0.530111 14.0018 0.587871 14.1092C0.645632 14.2166 0.729152 14.3079 0.830938 14.3751C0.953375 14.4564 1.09706 14.4999 1.24406 14.5001C1.34626 14.5 1.4474 14.4795 1.54156 14.4398L14.8875 8.9357L14.8934 8.93289C15.0731 8.85569 15.2262 8.72751 15.3337 8.56421C15.4413 8.40092 15.4986 8.20968 15.4986 8.01414C15.4986 7.81861 15.4413 7.62736 15.3337 7.46407C15.2262 7.30077 15.0731 7.1726 14.8934 7.09539Z",
+    fill: "white"
+  }));
 };
 
 var InputChat = function InputChat(_ref) {
-  var isSending = _ref.isSending,
-    role = _ref.role,
-    text = _ref.text,
-    drawPath = _ref.drawPath,
-    onClearCanvas = _ref.onClearCanvas,
-    onSaveCanvas = _ref.onSaveCanvas,
+  var text = _ref.text,
     onChangeInput = _ref.onChangeInput,
     onSubmit = _ref.onSubmit,
     isCompleted = _ref.isCompleted,
@@ -10459,20 +9620,10 @@ var InputChat = function InputChat(_ref) {
     handleDeleteSelectedImage = _ref.handleDeleteSelectedImage;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var isStudent = role === exports.Role.Student;
   var fileInputRef = React.useRef(null);
-  var _useState = React.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]);
@@ -10480,26 +9631,13 @@ 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(material.Grid, {
     item: true,
     xs: 12,
     padding: "16px"
-  }, React__default.createElement(material.Stack, {
-    direction: {
-      sx: "column",
-      lg: "row"
-    },
+  }, React__default.createElement(material.Box, {
+    display: "flex",
+    flexDirection: "row",
     gap: "24px"
   }, React__default.createElement(material.Box, {
     display: "flex",
@@ -10511,14 +9649,12 @@ var InputChat = function InputChat(_ref) {
     border: selectedFile ? "1px solid #97A1AF" : undefined,
     borderRadius: selectedFile ? "6px" : undefined,
     flexDirection: "column"
-  }, selectedFile && React__default.createElement(material.Box, {
+  }, selectedFile && React__default.createElement("div", {
     style: {
       position: "relative",
       margin: "10px",
-      width: "fit-content",
-      cursor: drawPath ? "pointer" : "unset"
-    },
-    onClick: handleClickImage
+      width: "fit-content"
+    }
   }, React__default.createElement("img", {
     src: selectedFile,
     style: {
@@ -10537,21 +9673,21 @@ var InputChat = function InputChat(_ref) {
       cursor: "pointer",
       background: grey[100]
     },
-    disabled: isSending,
     onClick: handleDeleteSelectedImage
   }, React__default.createElement(fa.FaTrash, {
     size: 16
   }))), !selectedFile && React__default.createElement(TinyChatEditor, {
     initValue: text,
     onChange: onChangeInput,
-    disabled: disabled
+    disabled: isCompleted
   })), React__default.createElement(material.Typography, {
     fontWeight: 500,
     fontSize: "10px",
     lineHeight: "11.93px",
     color: "#97A1AF"
-  }, t("this_is_the_guidance_text"))), React__default.createElement(material.Stack, {
-    direction: "column",
+  }, t('this_is_the_guidance_text'))), React__default.createElement(material.Box, {
+    display: "flex",
+    flexDirection: "column",
     justifyContent: "flex-start",
     alignItems: "flex-end",
     gap: "16px"
@@ -10560,19 +9696,11 @@ var InputChat = function InputChat(_ref) {
     fullWidth: true,
     className: styles$2["btn-send"],
     sx: {
-      bgcolor: disabled ? styles.light + " !important" : styles.less_dark
+      bgcolor: isCompleted ? styles.light + " !important" : styles.less_dark
     },
-    disabled: disabled,
+    disabled: isCompleted,
     onClick: handleSubmit
-  }, isSending ? React__default.createElement(material.Stack, {
-    justifyContent: "center",
-    alignItems: "center"
-  }, React__default.createElement(material.CircularProgress, {
-    sx: {
-      color: "#FFF"
-    },
-    size: 14
-  })) : React__default.createElement(iconSendMessage, null), React__default.createElement(material.Typography, {
+  }, React__default.createElement(iconSendMessage, null), React__default.createElement(material.Typography, {
     fontWeight: 700,
     fontSize: "13px",
     lineHeight: "15.51px"
@@ -10580,12 +9708,12 @@ var InputChat = function InputChat(_ref) {
     variant: "outlined",
     component: "label",
     fullWidth: true,
-    disabled: disabled,
+    disabled: isCompleted,
     sx: {
       display: "flex",
       gap: "8px",
       padding: "12px !important",
-      borderColor: disabled ? "transparent" : styles.less_dark,
+      borderColor: isCompleted ? "transparent" : styles.less_dark,
       borderWidth: "1px"
     }
   }, React__default.createElement(iconPlusCircle, {
@@ -10601,20 +9729,9 @@ var InputChat = function InputChat(_ref) {
     type: "file",
     hidden: true,
     ref: fileInputRef,
-    disabled: disabled,
+    disabled: isCompleted,
     accept: "image/png, image/gif, image/jpeg",
     onChangeCapture: handleSelectedFile
-  })), !isStudent && React__default.createElement(React.Fragment, null, React__default.createElement(material.Button, {
-    startIcon: React__default.createElement(md.MdDraw, null),
-    variant: "contained",
-    disabled: disabled,
-    fullWidth: true,
-    onClick: handleopenSketchDialog
-  }, t("sketch")), React__default.createElement(SketchDialog, {
-    open: open,
-    drawPath: drawPath,
-    onClose: handleToggleSketchDialog,
-    onSave: handleSaveCanvas
   })))));
 };
 
@@ -10880,8 +9997,7 @@ var ChatHeader = function ChatHeader(_ref) {
 };
 
 var ChatContainer = function ChatContainer(_ref) {
-  var role = _ref.role,
-    chatHeaderProps = _ref.chatHeaderProps,
+  var chatHeaderProps = _ref.chatHeaderProps,
     chatListProps = _ref.chatListProps,
     inputProps = _ref.inputProps,
     _ref$scrollOffset = _ref.scrollOffset,
@@ -10974,9 +10090,76 @@ var ChatContainer = function ChatContainer(_ref) {
     className: "d-flex justify-content-center align-items-center"
   }, React__default.createElement(material.CircularProgress, null)), React__default.createElement(ChatList, Object.assign({}, chatListProps, {
     listItemRef: listItemRef
-  }))), React__default.createElement(InputChat, Object.assign({
-    role: role
-  }, inputProps)));
+  }))), React__default.createElement(InputChat, Object.assign({}, inputProps)));
+};
+
+var MessageSortBy;
+(function (MessageSortBy) {
+  MessageSortBy["CreatedAt"] = "CreatedAt";
+})(MessageSortBy || (MessageSortBy = {}));
+var OrderBy;
+(function (OrderBy) {
+  OrderBy["ASC"] = "ASC";
+  OrderBy["DESC"] = "DESC";
+})(OrderBy || (OrderBy = {}));
+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; },
+	get StudentSortBy () { return StudentSortBy; },
+	get StudentOrderBy () { return StudentOrderBy; },
+	get MessageAction () { return MessageAction; },
+	get MessageSourceType () { return MessageSourceType; },
+	get MessageStatus () { return MessageStatus; }
+};
+
+var ExamStatus;
+(function (ExamStatus) {
+  ExamStatus["Default"] = "Default";
+  ExamStatus["Pending"] = "Pending";
+  ExamStatus["Inprogress"] = "Inprogress";
+  ExamStatus["Completed"] = "Completed";
+})(ExamStatus || (ExamStatus = {}));
+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.DESC,
+  sortColumnName: MessageSortBy.CreatedAt
 };
 
 var RECENT_USER_URL = BASE_URL + "/api/recentUsers";
@@ -11205,12 +10388,6 @@ var useChatContainer = function useChatContainer(props) {
   var _useState5 = React.useState(true),
     isScrollToEnd = _useState5[0],
     setScrollToEnd = _useState5[1];
-  var _useState6 = React.useState(),
-    drawPath = _useState6[0],
-    setDrawPath = _useState6[1];
-  var _useState7 = React.useState(false),
-    isSending = _useState7[0],
-    setSending = _useState7[1];
   var isAdmin = roles === null || roles === void 0 ? void 0 : roles.includes(exports.Role.Admin);
   var _useMessageList = useMessageList({
       student: student
@@ -11235,7 +10412,6 @@ var useChatContainer = function useChatContainer(props) {
     try {
       var _temp3 = function _temp3(_result2) {
         if (_exit) return _result2;
-        setSending(false);
         loadingRef.current = false;
       };
       var _exit = false;
@@ -11243,7 +10419,6 @@ 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) {
@@ -11283,7 +10458,6 @@ var useChatContainer = function useChatContainer(props) {
   };
   var handleUploadImage = function handleUploadImage(file) {
     try {
-      handleClearCanvas();
       if (file) {
         setFile(file);
         var reader = new FileReader();
@@ -11297,29 +10471,11 @@ 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();
-        if (file instanceof Blob) formData.append("upload", file, 'drawing.png');else formData.append("upload", file);
+        formData.append("upload", file);
         return Promise.resolve(apiUploadImageFile(formData)).then(function (res) {
           var _res$data;
           return {
@@ -11392,8 +10548,7 @@ var useChatContainer = function useChatContainer(props) {
       return Promise.reject(e);
     }
   };
-  var handleDeleteSelectedImage = function handleDeleteSelectedImage(e) {
-    e === null || e === void 0 ? void 0 : e.stopPropagation();
+  var handleDeleteSelectedImage = function handleDeleteSelectedImage() {
     setFile(undefined);
     setBackgroundImage(null);
   };
@@ -11481,16 +10636,12 @@ 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,
@@ -20215,7 +19366,7 @@ var ChipCustom = material.styled(material.Stack)(function (_ref) {
   };
 });
 var AnswerItem = function AnswerItem(_ref2) {
-  var _data$selectedAnswers, _data$textualAnswers;
+  var _data$selectedAnswers, _data$textualAnswers, _data$skipRate$toFixe, _data$skipRate;
   var data = _ref2.data,
     nextData = _ref2.nextData,
     isFirst = _ref2.isFirst,
@@ -20280,7 +19431,7 @@ var AnswerItem = function AnswerItem(_ref2) {
       width: "80px",
       justifyContent: "center"
     }
-  }, data.answerResponseSignal != null ? React__default.createElement("p", {
+  }, data.duration != 0 ? React__default.createElement("p", {
     style: {
       margin: 0
     },
@@ -20297,7 +19448,7 @@ var AnswerItem = function AnswerItem(_ref2) {
       width: "80px",
       justifyContent: "center"
     }
-  }, data.answerResponseSignal != null && data.topDuration ? React__default.createElement("p", {
+  }, data.duration != 0 && data.topDuration ? React__default.createElement("p", {
     style: {
       margin: 0
     },
@@ -20312,20 +19463,20 @@ var AnswerItem = function AnswerItem(_ref2) {
     style: {
       display: "flex",
       alignItems: "center",
-      width: "80px",
+      width: "150px",
       justifyContent: "center"
     }
-  }, data.answerResponseSignal != null ? React__default.createElement("p", {
+  }, React__default.createElement("p", {
     style: {
       margin: 0
     },
     className: styles$7["answer-response"] + " " + getOverallColorClassName(data.overallCorrectRate, styles$7)
-  }, data.overallCorrectRate.toFixed(2) + "%") : React__default.createElement("p", {
+  }, data.overallCorrectRate.toFixed(2) + "%", React__default.createElement("span", {
     style: {
-      margin: 0
-    },
-    className: styles$7["answerNoTime"]
-  }, t("no_time"))), React__default.createElement("div", {
+      fontSize: "10px",
+      color: red[900]
+    }
+  }, "(" + ((_data$skipRate$toFixe = (_data$skipRate = data.skipRate) === null || _data$skipRate === void 0 ? void 0 : _data$skipRate.toFixed(2)) != null ? _data$skipRate$toFixe : 0) + "%)"))), React__default.createElement("div", {
     className: styles$7["classification"] + " " + printStyles["avoid-break-inside"] + " flex-grow-1 justify-content-start",
     style: {
       paddingInline: "14px",
@@ -20378,7 +19529,7 @@ var AnswerItem = function AnswerItem(_ref2) {
   }, openContextMenu ? React__default.createElement(material.ClickAwayListener, {
     onClickAway: handleCloseContextMenu
   }, React__default.createElement(material.Box, null, React__default.createElement(CustomTooltip, {
-    onClose: onCloseContextMenu,
+    onClose: handleCloseContextMenu,
     open: openContextMenu,
     disableFocusListener: true,
     disableHoverListener: true,
@@ -20524,7 +19675,7 @@ var MyAnswer = function MyAnswer(_ref) {
         display: "flex",
         alignItems: "center",
         gap: "4px",
-        width: "80px",
+        width: "150px",
         justifyContent: "center"
       }
     }, React__default.createElement(material.Typography, {
@@ -20534,9 +19685,15 @@ var MyAnswer = function MyAnswer(_ref) {
         fontWeight: 600,
         color: "#97A1AF",
         display: "flex",
-        alignItems: "center"
+        alignItems: "baseline",
+        gap: "2px"
       }
-    }, t("total_correct_rate")))), React__default.createElement("div", {
+    }, t("total_correct_rate"), React__default.createElement("span", {
+      style: {
+        fontSize: "10px",
+        color: red[900]
+      }
+    }, "(" + t("not_selected") + ")")))), React__default.createElement("div", {
       className: styles$7["titleMyAnswer2"]
     }, React__default.createElement(material.Typography, {
       sx: {
@@ -22069,7 +21226,7 @@ var TimeOrderChart = function TimeOrderChart(_ref) {
 };
 
 var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
-  var _data$selectedAnswers, _data$textualAnswers, _data$selectedAnswers2, _data$textualAnswers2, _data$selectedAnswers3, _data$textualAnswers3;
+  var _data$selectedAnswers, _data$textualAnswers, _data$selectedAnswers2, _data$textualAnswers2, _data$selectedAnswers3, _data$textualAnswers3, _data$skipRate$toFixe, _data$skipRate;
   var data = _ref.data,
     nextData = _ref.nextData,
     isFirst = _ref.isFirst,
@@ -22135,7 +21292,7 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
       display: "flex",
       alignItems: "center"
     }
-  }, data.answerResponseSignal != null ? React__default.createElement("p", {
+  }, data.duration != 0 ? React__default.createElement("p", {
     style: {
       margin: 0
     },
@@ -22151,7 +21308,7 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
       display: "flex",
       alignItems: "center"
     }
-  }, data.answerResponseSignal != null && data.topDuration ? React__default.createElement("p", {
+  }, data.duration != 0 && data.topDuration ? React__default.createElement("p", {
     style: {
       margin: 0
     },
@@ -22168,22 +21325,22 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
       display: "flex",
       alignItems: "center"
     }
-  }, data.answerResponseSignal != null ? React__default.createElement("p", {
+  }, React__default.createElement("p", {
     style: {
       margin: 0
     },
     className: styles$7["answer-response"] + " " + getOverallColorClassName(data.overallCorrectRate, styles$7)
-  }, data.overallCorrectRate.toFixed(2) + "%") : React__default.createElement("p", {
+  }, data.overallCorrectRate.toFixed(2) + "%", React__default.createElement("span", {
     style: {
-      margin: 0
-    },
-    className: styles$7["answerNoTime"]
-  }, t("no_time"))), isStudent && !isLearningSpace && React__default.createElement(material.Box, {
+      fontSize: "10px",
+      color: red[900]
+    }
+  }, "(" + ((_data$skipRate$toFixe = (_data$skipRate = data.skipRate) === null || _data$skipRate === void 0 ? void 0 : _data$skipRate.toFixed(2)) != null ? _data$skipRate$toFixe : 0) + "%)"))), isStudent && !isLearningSpace && React__default.createElement(material.Box, {
     className: styles["custom-col-2"]
   }, openContextMenu ? React__default.createElement(material.ClickAwayListener, {
     onClickAway: handleCloseContextMenu
   }, React__default.createElement(material.Box, null, React__default.createElement(CustomTooltip, {
-    onClose: onCloseContextMenu,
+    onClose: handleCloseContextMenu,
     open: openContextMenu,
     disableFocusListener: true,
     disableHoverListener: true,
@@ -22336,9 +21493,15 @@ var TextbookMyAnswer = function TextbookMyAnswer(_ref) {
         fontWeight: 600,
         color: "#97A1AF",
         display: "flex",
-        alignItems: "center"
+        alignItems: "baseline",
+        gap: "2px"
+      }
+    }, t("total_correct_rate"), React__default.createElement("span", {
+      style: {
+        fontSize: "10px",
+        color: red[900]
       }
-    }, t("total_correct_rate")))), React__default.createElement("div", {
+    }, "(" + t("not_selected") + ")")))), React__default.createElement("div", {
       className: styles$7["titleMyAnswer2"]
     }, React__default.createElement(material.Typography, {
       sx: {
@@ -24952,7 +24115,7 @@ var useOverallChartContainer = function useOverallChartContainer(isStudent, exam
     return [texts.slice(0, middle), texts.slice(middle)];
   }, [JSON.stringify(categories)]);
   var formatTooltip = React.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$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 _overallData$data$0$h, _overallData$data$, _overallData$maxData$, _overallData$data$1$h, _overallData$data$2, _overallData$maxData$2, _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$maxData$3, _overallData$data$1$t, _overallData$data$8, _overallData$maxData$4, _overallData$data$0$l, _overallData$data$9, _overallData$maxData$5, _overallData$data$1$l, _overallData$data$10, _overallData$maxData$6, _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];
@@ -24961,42 +24124,34 @@ var useOverallChartContainer = function useOverallChartContainer(isStudent, exam
     switch (dataPointIndex) {
       case 1:
         myValue = "" + t("n_questions", {
-          total: (_overallData$data$0$h = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$ = overallData.data[0]) === null || _overallData$data$ === void 0 ? void 0 : _overallData$data$.highLevelQuestions) != null ? _overallData$data$0$h : 0
+          total: ((_overallData$data$0$h = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$ = overallData.data[0]) === null || _overallData$data$ === void 0 ? void 0 : _overallData$data$.highLevelQuestions) != null ? _overallData$data$0$h : 0) + "/" + ((_overallData$maxData$ = overallData === null || overallData === void 0 ? void 0 : overallData.maxData.highLevelQuestions) != null ? _overallData$maxData$ : 0)
         });
         avgValue = "" + t("n_questions", {
-          total: (_overallData$data$1$h = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$2 = overallData.data[1]) === null || _overallData$data$2 === void 0 ? void 0 : (_overallData$data$2$h = _overallData$data$2.highLevelQuestions) === null || _overallData$data$2$h === void 0 ? void 0 : _overallData$data$2$h.toFixed(2)) != null ? _overallData$data$1$h : 0
+          total: Math.round((_overallData$data$1$h = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$2 = overallData.data[1]) === null || _overallData$data$2 === void 0 ? void 0 : _overallData$data$2.highLevelQuestions) != null ? _overallData$data$1$h : 0) + "/" + ((_overallData$maxData$2 = overallData === null || overallData === void 0 ? void 0 : overallData.maxData.highLevelQuestions) != null ? _overallData$maxData$2 : 0)
         });
         break;
       case 2:
-        myValue = "" + t("n_seconds", {
-          sec: (((_overallData$data$0$q = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$3 = overallData.data[0]) === null || _overallData$data$3 === void 0 ? void 0 : _overallData$data$3.questionLongestTime) != null ? _overallData$data$0$q : 0) / 1000).toFixed(2)
-        });
-        avgValue = "" + t("n_seconds", {
-          sec: (((_overallData$data$1$q = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$4 = overallData.data[1]) === null || _overallData$data$4 === void 0 ? void 0 : _overallData$data$4.questionLongestTime) != null ? _overallData$data$1$q : 0) / 1000).toFixed(2)
-        });
+        myValue = formatTimeSecond(((_overallData$data$0$q = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$3 = overallData.data[0]) === null || _overallData$data$3 === void 0 ? void 0 : _overallData$data$3.questionLongestTime) != null ? _overallData$data$0$q : 0) / 1000, t);
+        avgValue = formatTimeSecond(((_overallData$data$1$q = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$4 = overallData.data[1]) === null || _overallData$data$4 === void 0 ? void 0 : _overallData$data$4.questionLongestTime) != null ? _overallData$data$1$q : 0) / 1000, t);
         break;
       case 3:
-        myValue = "" + t("n_seconds", {
-          sec: (((_overallData$data$0$p = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$5 = overallData.data[0]) === null || _overallData$data$5 === void 0 ? void 0 : _overallData$data$5.problemSolvingTime) != null ? _overallData$data$0$p : 0) / 1000).toFixed(2)
-        });
-        avgValue = "" + t("n_seconds", {
-          sec: (((_overallData$data$1$p = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$6 = overallData.data[1]) === null || _overallData$data$6 === void 0 ? void 0 : _overallData$data$6.problemSolvingTime) != null ? _overallData$data$1$p : 0) / 1000).toFixed(2)
-        });
+        myValue = formatTimeSecond(((_overallData$data$0$p = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$5 = overallData.data[0]) === null || _overallData$data$5 === void 0 ? void 0 : _overallData$data$5.problemSolvingTime) != null ? _overallData$data$0$p : 0) / 1000, t);
+        avgValue = formatTimeSecond(((_overallData$data$1$p = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$6 = overallData.data[1]) === null || _overallData$data$6 === void 0 ? void 0 : _overallData$data$6.problemSolvingTime) != null ? _overallData$data$1$p : 0) / 1000, t);
         break;
       case 4:
         myValue = "" + t("n_questions", {
-          total: (_overallData$data$0$t = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$7 = overallData.data[0]) === null || _overallData$data$7 === void 0 ? void 0 : _overallData$data$7.totalAsteriskQuestions) != null ? _overallData$data$0$t : 0
+          total: ((_overallData$data$0$t = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$7 = overallData.data[0]) === null || _overallData$data$7 === void 0 ? void 0 : _overallData$data$7.totalAsteriskQuestions) != null ? _overallData$data$0$t : 0) + "/" + ((_overallData$maxData$3 = overallData === null || overallData === void 0 ? void 0 : overallData.maxData.totalAsteriskQuestions) != null ? _overallData$maxData$3 : 0)
         });
         avgValue = "" + t("n_questions", {
-          total: (_overallData$data$1$t = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$8 = overallData.data[1]) === null || _overallData$data$8 === void 0 ? void 0 : (_overallData$data$8$t = _overallData$data$8.totalAsteriskQuestions) === null || _overallData$data$8$t === void 0 ? void 0 : _overallData$data$8$t.toFixed(2)) != null ? _overallData$data$1$t : 0
+          total: Math.round((_overallData$data$1$t = overallData === null || overallData === void 0 ? void 0 : (_overallData$data$8 = overallData.data[1]) === null || _overallData$data$8 === void 0 ? void 0 : _overallData$data$8.totalAsteriskQuestions) != null ? _overallData$data$1$t : 0) + "/" + ((_overallData$maxData$4 = overallData === null || overallData === void 0 ? void 0 : overallData.maxData.totalAsteriskQuestions) != null ? _overallData$maxData$4 : 0)
         });
         break;
       case 5:
         myValue = "" + t("n_questions", {
-          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
+          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) + "/" + ((_overallData$maxData$5 = overallData === null || overallData === void 0 ? void 0 : overallData.maxData.lowLevelQuestions) != null ? _overallData$maxData$5 : 0)
         });
         avgValue = "" + t("n_questions", {
-          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
+          total: Math.round((_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.lowLevelQuestions) != null ? _overallData$data$1$l : 0) + "/" + ((_overallData$maxData$6 = overallData === null || overallData === void 0 ? void 0 : overallData.maxData.lowLevelQuestions) != null ? _overallData$maxData$6 : 0)
         });
         break;
       default:
@@ -27142,7 +26297,7 @@ var ChapterDetail = function ChapterDetail(_ref) {
     gap: "16px",
     justifyContent: "center",
     alignItems: "center"
-  }, React__default.createElement(io5.IoCheckmarkCircle, {
+  }, chapter.completedChapterQuestions === chapter.totalChapterQuestions && React__default.createElement(io5.IoCheckmarkCircle, {
     color: styles.less_dark
   }), React__default.createElement(material.Typography, {
     fontSize: "14px",
@@ -27741,7 +26896,8 @@ var TextbookDrawer = function TextbookDrawer(_ref) {
       borderRadius: "10px",
       width: "100%",
       height: "22px",
-      position: "relative"
+      position: "relative",
+      overflow: "hidden"
     }
   }, React__default.createElement(material.Stack, {
     sx: {