touchstudy-core 0.1.9 → 0.1.11

package/dist/index.modern.js

@@ -1,8 +1,9 @@
 import { createBrowserHistory } from 'history';
 import { createAction, createReducer, configureStore } from '@reduxjs/toolkit';
 import moment from 'moment';
+export { default as moment } from 'moment';
 import React, { useState, useCallback, useEffect, Fragment, useRef, useMemo } from 'react';
-import { Row, Col, Form, Modal, ModalHeader, ModalBody, ModalFooter, Button, Alert, Pagination, PaginationItem, PaginationLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Collapse, InputGroup, Input } from 'reactstrap';
+import { Row, Col, Form, Modal, ModalHeader, ModalBody, Input, ModalFooter, Button, Alert, Pagination, PaginationItem, PaginationLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Collapse, InputGroup, Spinner, FormGroup, Label } from 'reactstrap';
 import { Formik } from 'formik';
 import { object, string, boolean } from 'yup';
 import GoogleLogin, { useGoogleLogout } from '@leecheuk/react-google-login';
@@ -13,11 +14,16 @@ import i18n from 'i18next';
 import { initReactI18next, useTranslation } from 'react-i18next';
 export { I18nextProvider, useTranslation } from 'react-i18next';
 import { IoChevronDown } from 'react-icons/io5';
-import Select from 'react-select';
+import Select, { components } from 'react-select';
+import { FaCaretDown, FaPlusCircle } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
 import { IoIosCloseCircle, IoMdSend } from 'react-icons/io';
-import { ToastContainer, toast } from 'react-toastify';
 import Pusher from 'pusher-js';
+import { toast } from 'react-toastify';
+export { ToastContainer, toast } from 'react-toastify';
+import CreatableSelect from 'react-select/creatable';
+import { PiDotsNineLight } from 'react-icons/pi';
+import _ from 'lodash';
 
 var setLoading = createAction("common/setLoading");
 var setAlert = createAction("common/setAlert");
@@ -147,6 +153,12 @@ var AuthenticationMessage;
   AuthenticationMessage["NotAllowedToRegister"] = "NotAllowedToRegister";
   AuthenticationMessage["InvalidGoogleToken"] = "InvalidGoogleToken";
 })(AuthenticationMessage || (AuthenticationMessage = {}));
+var Role;
+(function (Role) {
+  Role["Student"] = "Student";
+  Role["Teacher"] = "Teacher";
+  Role["Admin"] = "Admin";
+})(Role || (Role = {}));
 
 var useGoogleSignOut = function useGoogleSignOut(props) {
   var dispatch = useDispatch();
@@ -193,7 +205,8 @@ var schema = object({
 var BlockLogin = function BlockLogin(_ref) {
   var defaultInfo = _ref.defaultInfo,
     onNavigate = _ref.onNavigate,
-    isTeacher = _ref.isTeacher;
+    _ref$role = _ref.role,
+    role = _ref$role === void 0 ? Role.Student : _ref$role;
   var dispatch = useDispatch();
   var _useGoogleSignOut = useGoogleSignOut({
       onNavigate: onNavigate
@@ -219,7 +232,6 @@ var BlockLogin = function BlockLogin(_ref) {
             token: accessToken,
             googleId: googleId
           };
-          var role = isTeacher ? "Teacher" : "Student";
           dispatch(setLoading(true));
           var _temp = _catch(function () {
             return Promise.resolve(apiLoginGoogle(infoLogin, role)).then(function (res1) {
@@ -227,7 +239,7 @@ var BlockLogin = function BlockLogin(_ref) {
               var tokenJWT = res1.data.token;
               localStorage.setItem("USER_INFORMATION", JSON.stringify(infoLogin));
               localStorage.setItem(ACCESS_TOKEN, tokenJWT);
-              if (!isTeacher && isFirstLogin) {
+              if (role === Role.Student && isFirstLogin) {
                 onNavigate("/register/info");
               } else {
                 onNavigate("/");
@@ -346,7 +358,7 @@ var useLogin = function useLogin(onNavigate) {
 
 var Login = function Login(_ref) {
   var onNavigate = _ref.onNavigate,
-    isTeacher = _ref.isTeacher;
+    role = _ref.role;
   var _useLogin = useLogin(onNavigate),
     defaultInfo = _useLogin.defaultInfo;
   return React.createElement("div", {
@@ -361,7 +373,7 @@ var Login = function Login(_ref) {
   }, React.createElement(BlockLogin, {
     defaultInfo: defaultInfo,
     onNavigate: onNavigate,
-    isTeacher: isTeacher
+    role: role
   }))));
 };
 
@@ -602,11 +614,11 @@ var NotFound = function NotFound() {
     document.title = TITLE;
   });
   return React.createElement("div", {
-    className: "not-found"
+    className: "not-found d-flex justify-content-center"
   }, React.createElement("div", {
-    className: "clearfix"
+    className: "clearfix pt-5"
   }, React.createElement("h1", {
-    className: "float-left display-3 mr-4"
+    className: "float-left display-3 fw-bold mr-4 text-center"
   }, "404"), React.createElement("div", {
     className: "float-left"
   }, React.createElement("h4", {
@@ -661,16 +673,13 @@ var LayoutContext = function LayoutContext(_ref) {
     var _state$common;
     return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : _state$common.user;
   });
+  var roles = (user === null || user === void 0 ? void 0 : user.roles) || [];
   var resetAuth = function resetAuth() {
     handleSignOut();
   };
   var checkRoleUser = useCallback(function () {
-    var _user$roles, _user$roles2;
     if (!user) return;
-    var isAdmin = (_user$roles = user.roles) === null || _user$roles === void 0 ? void 0 : _user$roles.includes("Admin");
-    if (isAdmin && role !== "Teacher") alert(user.email + " not allow to register " + role);
-    if (isAdmin) return;
-    if (!((_user$roles2 = user.roles) !== null && _user$roles2 !== void 0 && _user$roles2.includes(role))) {
+    if (!roles.includes(role)) {
       alert(user.email + " not allow to register " + role);
       resetAuth();
     }
@@ -723,19 +732,47 @@ var ConfirmDialog = function ConfirmDialog(_ref) {
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Confirmation" : _ref$title,
     toggle = _ref.toggle,
-    onConfirm = _ref.onConfirm;
+    onConfirm = _ref.onConfirm,
+    confirmText = _ref.confirmText;
+  var _useState = useState(),
+    confirmTextValue = _useState[0],
+    setConfirmTextValue = _useState[1];
+  var handleConfirm = function handleConfirm() {
+    onConfirm();
+  };
+  var handleChangeConfirmText = function handleChangeConfirmText(e) {
+    setConfirmTextValue(e.target.value);
+  };
+  var handlePaste = function handlePaste(e) {
+    e.preventDefault();
+  };
+  useEffect(function () {
+    !open && setConfirmTextValue(undefined);
+  }, [open]);
+  var isValid = !!confirmText && !!confirmTextValue && confirmTextValue.trim() === confirmText.trim();
   return React.createElement(Modal, {
     isOpen: open,
     toggle: toggle,
-    centered: true
+    centered: true,
+    zIndex: 1102
   }, React.createElement(ModalHeader, {
     toggle: toggle
-  }, title), React.createElement(ModalBody, null, text), React.createElement(ModalFooter, null, React.createElement(Button, {
+  }, title), React.createElement(ModalBody, null, React.createElement("p", null, React.createElement("strong", null, text)), !!confirmText && React.createElement("div", null, React.createElement("p", null, "Enter \"", React.createElement("strong", null, confirmText), "\" to confirm delete"), React.createElement(Input, {
+    value: confirmTextValue,
+    onChange: handleChangeConfirmText,
+    placeholder: "Please enter...",
+    onPaste: handlePaste,
+    invalid: !isValid && confirmTextValue !== undefined,
+    valid: isValid
+  }))), React.createElement(ModalFooter, null, React.createElement(Button, {
     color: "secondary",
+    className: "px-3",
     onClick: toggle
   }, cancelText), React.createElement(Button, {
     color: isDelete ? "danger" : "primary",
-    onClick: onConfirm
+    className: "px-3",
+    disabled: !!confirmText && (confirmTextValue === null || confirmTextValue === void 0 ? void 0 : confirmTextValue.trim()) !== confirmText.trim(),
+    onClick: handleConfirm
   }, okText)));
 };
 
@@ -753,7 +790,8 @@ var CommonDialog = function CommonDialog(_ref) {
     isOpen: open,
     toggle: onClose,
     centered: centered,
-    size: size
+    size: size,
+    zIndex: 1102
   }, React.createElement(ModalHeader, {
     toggle: onClose
   }, title), children);
@@ -970,6 +1008,18 @@ var problem = "문제";
 var problem_solving_time = "문제풀이 시간";
 var minutes = "분";
 var correct_rate = "정확한 비율";
+var title = "시험명";
+var duration = "시험 시간";
+var answer_count = "답변 수";
+var question_count = "문제 갯수";
+var category = "문항 카테고리";
+var save_and_exit = "저장 및 종료";
+var update_exam = "시험 업데이트";
+var create_exam = "새 시험 만들기";
+var enter_title = "시험 제목을 입력하세요";
+var select_placeholder = "선택하다...";
+var view_exam = "시험 보기";
+var back = "뒤쪽에";
 var lang_ko = {
 	problem_solving: problem_solving,
 	my_story: my_story,
@@ -1027,7 +1077,19 @@ var lang_ko = {
 	problem: problem,
 	problem_solving_time: problem_solving_time,
 	minutes: minutes,
-	correct_rate: correct_rate
+	correct_rate: correct_rate,
+	title: title,
+	duration: duration,
+	answer_count: answer_count,
+	question_count: question_count,
+	category: category,
+	save_and_exit: save_and_exit,
+	update_exam: update_exam,
+	create_exam: create_exam,
+	enter_title: enter_title,
+	select_placeholder: select_placeholder,
+	view_exam: view_exam,
+	back: back
 };
 
 var problem_solving$1 = "Problem Solving";
@@ -1087,6 +1149,58 @@ var problem$1 = "Problem ";
 var problem_solving_time$1 = "Problem solving time";
 var minutes$1 = "m";
 var correct_rate$1 = "Correct rate";
+var difficult_level = "Difficult level";
+var difficulty_explain = "(The Difficulty Level provides an indication of the difficulty level of each test question)";
+var explain_your_answer = "Explain your answer";
+var hint = "Hint";
+var save_and_add_next_question = "Save and add next question";
+var save_and_exit$1 = "Save and exit";
+var question_text = "Question text";
+var title$1 = "Title";
+var create_question = "Create question";
+var parent_question = "Parent question";
+var edit_question = "Edit question";
+var easy = "Easy";
+var intermediate = "Intermediate";
+var difficult = "Difficult";
+var article = "Article";
+var correct_answer = "Correct answer";
+var mark = "Mark";
+var answer = "Answer";
+var add_new_row = "Add new row";
+var question_text_required = "Question text is required";
+var create_question_success = "Question is created successfully";
+var update_question_success = "Question is updated successfully";
+var number_of_answers = "Number of answers";
+var correct_answers = "Correct answers";
+var category$1 = "Category";
+var score = "Score";
+var enter_title$1 = "Enter title";
+var enter_score = "Enter score";
+var exam_title_required = "Exam title is required";
+var question_category_required = "Question category is required";
+var start_time = "Start time";
+var end_time = "End time";
+var enter_class_name = "Enter class name";
+var class_required = "Class name is required";
+var total_teachers = "Total teachers";
+var start_time_required = "Start time is required";
+var end_time_required = "End time is required";
+var full_name = "Full name";
+var email = "Email";
+var is_paid = "Is paid";
+var payment_time = "Payment time";
+var create_and_continue = "Create and continue";
+var payments = "Payments";
+var duration$1 = "Duration";
+var answer_count$1 = "Answer count";
+var question_count$1 = "Question count";
+var multi_choice = "Is multiple";
+var select_placeholder$1 = "Select...";
+var view_exam$1 = "View exam";
+var update_exam$1 = "Update exam";
+var create_exam$1 = "Create exam";
+var back$1 = "Back";
 var lang_en = {
 	problem_solving: problem_solving$1,
 	my_story: my_story$1,
@@ -1144,7 +1258,59 @@ var lang_en = {
 	problem: problem$1,
 	problem_solving_time: problem_solving_time$1,
 	minutes: minutes$1,
-	correct_rate: correct_rate$1
+	correct_rate: correct_rate$1,
+	difficult_level: difficult_level,
+	difficulty_explain: difficulty_explain,
+	explain_your_answer: explain_your_answer,
+	hint: hint,
+	save_and_add_next_question: save_and_add_next_question,
+	save_and_exit: save_and_exit$1,
+	question_text: question_text,
+	title: title$1,
+	create_question: create_question,
+	parent_question: parent_question,
+	edit_question: edit_question,
+	easy: easy,
+	intermediate: intermediate,
+	difficult: difficult,
+	article: article,
+	correct_answer: correct_answer,
+	mark: mark,
+	answer: answer,
+	add_new_row: add_new_row,
+	question_text_required: question_text_required,
+	create_question_success: create_question_success,
+	update_question_success: update_question_success,
+	number_of_answers: number_of_answers,
+	correct_answers: correct_answers,
+	category: category$1,
+	score: score,
+	enter_title: enter_title$1,
+	enter_score: enter_score,
+	exam_title_required: exam_title_required,
+	question_category_required: question_category_required,
+	start_time: start_time,
+	end_time: end_time,
+	enter_class_name: enter_class_name,
+	class_required: class_required,
+	total_teachers: total_teachers,
+	start_time_required: start_time_required,
+	end_time_required: end_time_required,
+	full_name: full_name,
+	email: email,
+	is_paid: is_paid,
+	payment_time: payment_time,
+	create_and_continue: create_and_continue,
+	payments: payments,
+	duration: duration$1,
+	answer_count: answer_count$1,
+	question_count: question_count$1,
+	multi_choice: multi_choice,
+	select_placeholder: select_placeholder$1,
+	view_exam: view_exam$1,
+	update_exam: update_exam$1,
+	create_exam: create_exam$1,
+	back: back$1
 };
 
 i18n.use(initReactI18next).init({
@@ -1183,7 +1349,7 @@ var SUPPORTED_LANGUAGES_CODE = LANGUAGES.map(function (i) {
   return i.code;
 });
 
-var TheLanguageDropdown = function TheLanguageDropdown() {
+var useLanguage = function useLanguage() {
   var defaultLanguage = !!localStorage.getItem("language") ? localStorage.getItem("language") : navigator.language || DEFAULT_LANGUAGE_CODE;
   var dispatch = useDispatch();
   var _useTranslation = useTranslation(),
@@ -1206,19 +1372,32 @@ var TheLanguageDropdown = function TheLanguageDropdown() {
     setItemLanguage(lang);
     dispatch(setLanguage(lang));
   };
+  useEffect(function () {
+    changeLanguageApp(language);
+  }, [language]);
   var currentLanguage = useMemo(function () {
     var currentLang = LANGUAGES.find(function (i) {
       return i.code === language;
     });
     if (!currentLang) return null;
-    return React.createElement(React.Fragment, null, React.createElement("img", {
-      className: "mr-2 " + styles['dropdown-menu-flag'],
-      src: currentLang.image
-    }), " ", currentLang.shortName);
-  }, [language]);
-  useEffect(function () {
-    changeLanguageApp(language);
+    return currentLang;
   }, [language]);
+  return {
+    language: language,
+    dropdownOpen: dropdownOpen,
+    currentLanguage: currentLanguage,
+    toggle: toggle,
+    setItemLanguage: setItemLanguage
+  };
+};
+
+var TheLanguageDropdown = function TheLanguageDropdown() {
+  var _useLanguage = useLanguage(),
+    currentLanguage = _useLanguage.currentLanguage,
+    language = _useLanguage.language,
+    dropdownOpen = _useLanguage.dropdownOpen,
+    toggle = _useLanguage.toggle,
+    setItemLanguage = _useLanguage.setItemLanguage;
   return React.createElement(Dropdown, {
     isOpen: dropdownOpen,
     toggle: toggle,
@@ -1232,7 +1411,10 @@ var TheLanguageDropdown = function TheLanguageDropdown() {
       display: 'flex',
       alignItems: 'center'
     }
-  }, currentLanguage, React.createElement(IoChevronDown, {
+  }, !!currentLanguage && React.createElement("img", {
+    className: "mr-2 " + styles['dropdown-menu-flag'],
+    src: currentLanguage.image
+  }), !!currentLanguage && currentLanguage.shortName, React.createElement(IoChevronDown, {
     className: "ml-2",
     style: {
       fontSize: '15px',
@@ -1316,14 +1498,54 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded = ["defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
+var _excluded = ["isDefault", "defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
+var DropdownIndicator = function DropdownIndicator(props) {
+  return React.createElement(components.DropdownIndicator, Object.assign({}, props), React.createElement(FaCaretDown, {
+    color: "#5458D5"
+  }));
+};
+var CustomOption = function CustomOption(props) {
+  return React.createElement(components.Option, Object.assign({}, props), React.createElement("div", {
+    style: {
+      fontSize: "14px",
+      fontWeight: 500
+    }
+  }, props.data.label));
+};
+var customStyles = {
+  control: function control(baseStyles, state) {
+    return _extends({}, baseStyles, {
+      fontSize: "14px",
+      fontWeight: 700,
+      color: "#5458D5",
+      borderColor: state.isFocused ? '#5458D5' : '#C3C5FE'
+    });
+  },
+  input: function input(baseStyles, _) {
+    return _extends({}, baseStyles, {
+      fontSize: "14px",
+      fontWeight: 700,
+      color: "#5458D5"
+    });
+  },
+  singleValue: function singleValue(baseStyles) {
+    return _extends({}, baseStyles, {
+      fontSize: "14px",
+      fontWeight: 700,
+      color: "#5458D5"
+    });
+  }
+};
 var CustomSelect = function CustomSelect(_ref) {
-  var options = _ref.options,
+  var isDefault = _ref.isDefault,
+    options = _ref.options,
     isDisabled = _ref.isDisabled,
     scrollBottom = _ref.scrollBottom,
     value = _ref.value,
     isMulti = _ref.isMulti,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var initialValues = Array.isArray(value) ? options.filter(function (i) {
     return value.includes(i.value);
   }) : isMulti ? options.filter(function (i) {
@@ -1334,9 +1556,19 @@ var CustomSelect = function CustomSelect(_ref) {
   return React.createElement(Select, Object.assign({
     isDisabled: isDisabled,
     options: options,
-    value: initialValues,
+    value: !isDefault ? initialValues != null ? initialValues : null : undefined,
+    defaultValue: isDefault ? initialValues : undefined,
     menuPlacement: scrollBottom ? "top" : "auto",
-    isMulti: isMulti
+    isMulti: isMulti,
+    components: {
+      IndicatorSeparator: function IndicatorSeparator() {
+        return null;
+      },
+      DropdownIndicator: DropdownIndicator,
+      Option: CustomOption
+    },
+    styles: customStyles,
+    placeholder: t("select_placeholder")
   }, rest));
 };
 
@@ -1380,11 +1612,10 @@ var MessageStatus;
 })(MessageStatus || (MessageStatus = {}));
 
 var ChatRightItem = function ChatRightItem(_ref) {
-  var content = _ref.content,
+  var id = _ref.id,
+    content = _ref.content,
     createdAt = _ref.createdAt,
     isRead = _ref.isRead,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? ChatItemType.Default : _ref$type,
     examCode = _ref.examCode,
     isSystemLog = _ref.isSystemLog,
     parentId = _ref.parentId,
@@ -1398,8 +1629,11 @@ var ChatRightItem = function ChatRightItem(_ref) {
     examTitle = _ref.examTitle,
     parentContent = _ref.parentContent,
     status = _ref.status,
+    selectedReplyMessageId = _ref.selectedReplyMessageId,
+    selectedReplyItemRef = _ref.selectedReplyItemRef,
     onAddExamMessage = _ref.onAddExamMessage,
-    onReTrySendMessage = _ref.onReTrySendMessage;
+    onReTrySendMessage = _ref.onReTrySendMessage,
+    onGotoParentMessage = _ref.onGotoParentMessage;
   var _useState = useState(false),
     isShowTime = _useState[0],
     setShowTime = _useState[1];
@@ -1424,16 +1658,17 @@ var ChatRightItem = function ChatRightItem(_ref) {
     setShowTime(isSystemLog || !!isFirst);
   }, [isFirst, isSystemLog]);
   return React.createElement("li", {
+    ref: selectedReplyMessageId === id ? selectedReplyItemRef : undefined,
     className: "px-3 " + (!isLast ? "pb-1" : "pb-3") + " " + (!!examCode ? "border border-top-0 border-info" : "") + " " + (!!examCode && isLast ? "border-bottom-1 mb-3" : "border-bottom-0")
   }, showExamHeader && isFirst && React.createElement("div", {
     className: "d-flex bg-info justify-content-between px-3 mb-3 py-1 " + styles$1["list__item__header"]
   }, React.createElement(Link, {
     to: "" + (actionLink || "/"),
     className: "text-black"
-  }, examTitle), !!examId && !!examTitle && React.createElement("span", {
+  }, examTitle), !!examId && !!examTitle && !!examCode && React.createElement("span", {
     className: "pointer text-black",
     onClick: function onClick() {
-      return onAddExamMessage === null || onAddExamMessage === void 0 ? void 0 : onAddExamMessage(examId, examTitle);
+      return onAddExamMessage === null || onAddExamMessage === void 0 ? void 0 : onAddExamMessage(examId, examTitle, examCode);
     }
   }, "Add message to exam")), isSystemLog || !!isFirst ? React.createElement("p", {
     className: "mb-0 py-1 px-3 fs-6 text-muted text-center"
@@ -1453,14 +1688,17 @@ var ChatRightItem = function ChatRightItem(_ref) {
   }, React.createElement("div", {
     className: "d-flex flex-column align-items-end"
   }, parentId && React.createElement("p", {
-    className: "opacity-50 mb-0 py-2 px-3 fw-medium pointer " + styles$1["list__item__message"] + " " + styles$1["list__item__message--reply-from-right"] + " text-end bg-primary text-white"
+    className: "px-3 bg-light opacity-50 pointer " + styles$1["list__item__message"] + " " + styles$1["list__item__message--reply-from-right"] + "  mb-0 fw-medium " + styles$1["reply-text"],
+    onClick: function onClick() {
+      return onGotoParentMessage === null || onGotoParentMessage === void 0 ? void 0 : onGotoParentMessage(parentId);
+    }
   }, React.createElement("b", null, "Reply To:"), " ", parentContent), React.createElement("p", {
     className: "mb-0 py-2 px-3 fw-medium pointer " + styles$1["list__item__message"] + " " + (parentId ? styles$1["list__item__message--reply-right"] : "") + " text-end bg-primary text-white",
     onClick: handleShowInfo
   }, content), status !== MessageStatus.Default && React.createElement("p", {
     onClick: handleReTrySendMessage,
     className: "fs-6 mb-0 " + (status === MessageStatus.SentError ? "text-danger text-decoration-underline pointer" : "")
-  }, status), (type !== ChatItemType.Exam || !examCode) && status === MessageStatus.Default && React.createElement(Collapse, {
+  }, status), !isSystemLog && status === MessageStatus.Default && React.createElement(Collapse, {
     isOpen: isShowInfo
   }, React.createElement("p", {
     className: "mb-0 py-1 px-3 fs-6 text-muted text-end"
@@ -1488,7 +1726,8 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
     onReply = _ref.onReply,
     selectedReplyMessageId = _ref.selectedReplyMessageId,
     onToggleReply = _ref.onToggleReply,
-    selectedReplyItemRef = _ref.selectedReplyItemRef;
+    selectedReplyItemRef = _ref.selectedReplyItemRef,
+    onGotoParentMessage = _ref.onGotoParentMessage;
   var _useState = useState(false),
     isShowTime = _useState[0],
     setShowTime = _useState[1];
@@ -1516,10 +1755,10 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
   }, React.createElement(Link, {
     to: "" + (actionLink || "/"),
     className: "text-black"
-  }, examTitle), !!examId && !!examTitle && React.createElement("span", {
+  }, examTitle), !!examId && !!examTitle && !!examCode && React.createElement("span", {
     className: "pointer text-black",
     onClick: function onClick() {
-      return onAddExamMessage === null || onAddExamMessage === void 0 ? void 0 : onAddExamMessage(examId, examTitle);
+      return onAddExamMessage === null || onAddExamMessage === void 0 ? void 0 : onAddExamMessage(examId, examTitle, examCode);
     }
   }, "Add message to exam")), isSystemLog || !!isFirst ? React.createElement("p", {
     className: "mb-0 py-1 px-3 fs-6 text-muted text-center"
@@ -1544,7 +1783,10 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
   })), React.createElement("div", {
     className: "d-flex flex-column"
   }, parentId && React.createElement("p", {
-    className: "opacity-50 mb-0 py-2 px-3 fw-medium pointer " + styles$1["list__item__message"] + " " + styles$1["list__item__message--reply-from"] + " text-start bg-light"
+    className: "opacity-50 mb-0 px-3 fw-medium pointer " + styles$1["list__item__message"] + " " + styles$1["list__item__message--reply-from"] + " " + styles$1["reply-text"] + " text-start bg-light",
+    onClick: function onClick() {
+      return onGotoParentMessage === null || onGotoParentMessage === void 0 ? void 0 : onGotoParentMessage(parentId);
+    }
   }, React.createElement("b", null, "Reply To:"), " ", parentContent), React.createElement("p", {
     className: "mb-0 py-2 px-3 fw-medium pointer " + styles$1["list__item__message"] + " " + (parentId ? styles$1["list__item__message--reply"] : "") + " text-start bg-light",
     onClick: handleShowInfo
@@ -1585,6 +1827,11 @@ var ChatList = function ChatList(_ref) {
   var handleToggleReply = function handleToggleReply(id) {
     setSelectedReplyMessageId(id === selectedReplyMessageId ? undefined : id);
   };
+  var handleSelectParentMessage = function handleSelectParentMessage(id) {
+    if (id === selectedReplyMessageId) selectedReplyItemRef.current && selectedReplyItemRef.current.scrollIntoView({
+      behavior: "smooth"
+    });else setSelectedReplyMessageId(id);
+  };
   useEffect(function () {
     selectedReplyMessageId && selectedReplyItemRef.current && selectedReplyItemRef.current.scrollIntoView({
       behavior: "smooth"
@@ -1607,7 +1854,8 @@ var ChatList = function ChatList(_ref) {
       selectedReplyMessageId: selectedReplyMessageId,
       onToggleReply: handleToggleReply,
       selectedReplyItemRef: selectedReplyItemRef,
-      onReTrySendMessage: onReTrySendMessage
+      onReTrySendMessage: onReTrySendMessage,
+      onGotoParentMessage: handleSelectParentMessage
     }));
   }));
 };
@@ -1672,6 +1920,7 @@ var ChatHeader = function ChatHeader(_ref) {
   var name = _ref.name,
     avatar = _ref.avatar,
     options = _ref.options,
+    selectedOption = _ref.selectedOption,
     onChangeOption = _ref.onChangeOption;
   var wrapperRef = useRef(null);
   var actionRef = useRef(null);
@@ -1710,6 +1959,7 @@ var ChatHeader = function ChatHeader(_ref) {
   }, selectOptions !== undefined && React.createElement("div", {
     className: styles$1["header__select"] + " mx-3"
   }, React.createElement(CustomSelect, {
+    value: selectedOption,
     options: selectOptions,
     onChange: handleChangeOption,
     isClearable: true
@@ -1722,7 +1972,15 @@ var ChatContainer = function ChatContainer(_ref) {
   var chatHeaderProps = _ref.chatHeaderProps,
     chatListProps = _ref.chatListProps,
     inputProps = _ref.inputProps,
-    onRead = _ref.onRead;
+    _ref$scrollOffset = _ref.scrollOffset,
+    scrollOffset = _ref$scrollOffset === void 0 ? 0 : _ref$scrollOffset,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    isScrollToEnd = _ref.isScrollToEnd,
+    onRead = _ref.onRead,
+    onReachTop = _ref.onReachTop,
+    onReachBottom = _ref.onReachBottom,
+    onEndScrollToEnd = _ref.onEndScrollToEnd;
   var onReply = chatListProps.onReply,
     onAddExamMessage = chatListProps.onAddExamMessage;
   var onChangeOption = chatHeaderProps.onChangeOption;
@@ -1737,10 +1995,10 @@ var ChatContainer = function ChatContainer(_ref) {
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     onReply === null || onReply === void 0 ? void 0 : onReply(id, content, examId);
   };
-  var handleAddExamMessage = function handleAddExamMessage(examId, examTitle) {
+  var handleAddExamMessage = function handleAddExamMessage(examId, examTitle, examCode) {
     var _inputRef$current2;
     (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-    onAddExamMessage(examId, examTitle);
+    onAddExamMessage(examId, examTitle, examCode);
   };
   var handleChangeExamOption = function handleChangeExamOption(val) {
     var _inputRef$current3;
@@ -1748,6 +2006,16 @@ var ChatContainer = function ChatContainer(_ref) {
     onChangeOption === null || onChangeOption === void 0 ? void 0 : onChangeOption(val);
   };
   var handleScroll = function handleScroll() {
+    if (listRef.current) {
+      var scrollTop = listRef.current.scrollTop;
+      var scrollHeight = listRef.current.scrollHeight;
+      var clientHeight = listRef.current.clientHeight;
+      if (scrollTop + clientHeight + scrollOffset >= scrollHeight) {
+        onReachBottom === null || onReachBottom === void 0 ? void 0 : onReachBottom();
+      } else if (scrollTop <= scrollOffset) {
+        onReachTop === null || onReachTop === void 0 ? void 0 : onReachTop();
+      }
+    }
     if (scrollRef.current) clearTimeout(scrollRef.current);
     scrollRef.current = setTimeout(function () {
       onRead === null || onRead === void 0 ? void 0 : onRead();
@@ -1757,36 +2025,40 @@ var ChatContainer = function ChatContainer(_ref) {
     if (focusRef.current) clearTimeout(focusRef.current);
     focusRef.current = setTimeout(function () {
       onRead === null || onRead === void 0 ? void 0 : onRead();
-    }, 800);
+    }, 300);
   };
   useEffect(function () {
-    var _listRef$current, _listItemRef$current, _listItemRef$current$;
+    var _listRef$current, _chatListProps$messag, _listRef$current3;
     scrollRef.current && clearTimeout(scrollRef.current);
     addEventTimeout.current && clearTimeout(addEventTimeout.current);
     (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.removeEventListener("scroll", handleScroll);
-    (_listItemRef$current = listItemRef.current) === null || _listItemRef$current === void 0 ? void 0 : (_listItemRef$current$ = _listItemRef$current.lastElementChild) === null || _listItemRef$current$ === void 0 ? void 0 : _listItemRef$current$.scrollIntoView({
-      behavior: "smooth"
-    });
-    addEventTimeout.current = setTimeout(function () {
-      var _listRef$current2;
-      (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.addEventListener("scroll", handleScroll);
-    }, 800);
+    if (isScrollToEnd && !isLoading && (_chatListProps$messag = chatListProps.messages) !== null && _chatListProps$messag !== void 0 && _chatListProps$messag.length) {
+      var _listItemRef$current, _listItemRef$current$;
+      (_listItemRef$current = listItemRef.current) === null || _listItemRef$current === void 0 ? void 0 : (_listItemRef$current$ = _listItemRef$current.lastElementChild) === null || _listItemRef$current$ === void 0 ? void 0 : _listItemRef$current$.scrollIntoView({
+        behavior: "smooth"
+      });
+      onEndScrollToEnd === null || onEndScrollToEnd === void 0 ? void 0 : onEndScrollToEnd();
+      addEventTimeout.current = setTimeout(function () {
+        var _listRef$current2;
+        (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.addEventListener("scroll", handleScroll);
+      }, 800);
+    } else (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.addEventListener("scroll", handleScroll);
     return function () {
-      var _listRef$current3;
-      (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.removeEventListener("scroll", handleScroll);
+      var _listRef$current4;
+      (_listRef$current4 = listRef.current) === null || _listRef$current4 === void 0 ? void 0 : _listRef$current4.removeEventListener("scroll", handleScroll);
       scrollRef.current && clearTimeout(scrollRef.current);
       addEventTimeout.current && clearTimeout(addEventTimeout.current);
     };
-  }, [listItemRef.current, JSON.stringify(chatListProps.messages)]);
+  }, [JSON.stringify(chatListProps.messages), scrollOffset, isLoading, onEndScrollToEnd, onRead, isScrollToEnd]);
   useEffect(function () {
     var _inputRef$current4;
     (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.addEventListener("focus", handleFocus);
     return function () {
       var _inputRef$current5;
       (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.removeEventListener("focus", handleFocus);
-      if (focusRef.current) clearTimeout(focusRef.current);
+      focusRef.current && clearTimeout(focusRef.current);
     };
-  }, []);
+  }, [onRead]);
   return React.createElement("div", {
     className: "d-flex flex-column w-100 h-100 border border-1 border-light rounded-3 shadow-sm"
   }, React.createElement("div", null, React.createElement(ChatHeader, Object.assign({}, chatHeaderProps, {
@@ -1794,13 +2066,18 @@ var ChatContainer = function ChatContainer(_ref) {
   }))), React.createElement("div", {
     ref: listRef,
     className: "flex-grow-1 " + styles$1["body"]
-  }, React.createElement(ChatList, Object.assign({}, chatListProps, {
+  }, isLoading && React.createElement("div", {
+    className: "d-flex justify-content-center"
+  }, React.createElement(Spinner, {
+    color: "secondary",
+    className: "my-2"
+  }, "Loading...")), React.createElement(ChatList, Object.assign({}, chatListProps, {
     listItemRef: listItemRef,
     onReply: handleReply,
     onAddExamMessage: handleAddExamMessage
   }))), React.createElement("div", null, React.createElement(InputChat, Object.assign({}, inputProps, {
     inputRef: inputRef
-  }))), React.createElement(ToastContainer, null));
+  }))));
 };
 
 var CONVERSATION_URL = BASE_URL + "/api/conversation";
@@ -1843,7 +2120,7 @@ var CONVERSATION_DEFAULT_FILTER = {
 };
 var MESSAGE_DEFAULT_FILTER = {
   currentPage: 1,
-  pageSize: -1,
+  pageSize: 12,
   textSearch: "",
   sortColumnDirection: OrderBy.DESC,
   sortColumnName: MessageSortBy.CreatedAt
@@ -1903,43 +2180,69 @@ var useMessageList = function useMessageList(userId, getListExamOptions) {
   var _useState2 = useState(MESSAGE_DEFAULT_FILTER),
     messageFilter = _useState2[0],
     setMessageFilter = _useState2[1];
+  var _useState3 = useState(false),
+    isLoading = _useState3[0],
+    setLoading = _useState3[1];
   var getMessageList = function getMessageList(conversationId, examId) {
     try {
-      var filter = _extends({}, messageFilter, {
-        examId: !examId ? messageFilter.examId : examId
-      });
-      return Promise.resolve(getMessagesByConversation(conversationId, filter)).then(function (res) {
-        var _res$data$items;
-        function _temp(_getListExamOptions) {
-          _getListExamOptions;
-        }
-        setMessages(((_res$data$items = res.data.items) === null || _res$data$items === void 0 ? void 0 : _res$data$items.reverse()) || []);
-        return getListExamOptions ? Promise.resolve(!!getListExamOptions && getListExamOptions(userId)).then(_temp) : _temp(!!getListExamOptions && getListExamOptions(userId));
+      var _temp3 = function _temp3() {
+        setLoading(false);
+      };
+      setLoading(true);
+      var _temp2 = _catch(function () {
+        var filter = _extends({}, messageFilter, {
+          examId: !examId ? messageFilter.examId : examId
+        });
+        return Promise.resolve(getMessagesByConversation(conversationId, filter)).then(function (res) {
+          var _res$data$items2;
+          function _temp(_getListExamOptions) {
+            _getListExamOptions;
+          }
+          if (messageFilter.beforeDate) setMessages(function (state) {
+            var _res$data$items;
+            return [].concat(((_res$data$items = res.data.items) === null || _res$data$items === void 0 ? void 0 : _res$data$items.reverse()) || [], state);
+          });else setMessages((_res$data$items2 = res.data.items) === null || _res$data$items2 === void 0 ? void 0 : _res$data$items2.reverse());
+          return getListExamOptions ? Promise.resolve(!!getListExamOptions && getListExamOptions(userId)).then(_temp) : _temp(!!getListExamOptions && getListExamOptions(userId));
+        });
+      }, function (error) {
+        console.log({
+          error: error
+        });
       });
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2));
     } catch (e) {
       return Promise.reject(e);
     }
   };
+  var handleLoadMore = function handleLoadMore() {
+    if (isLoading) return;
+    var lastItem = messages[0];
+    if (!lastItem) return;
+    var newFilter = _extends({}, messageFilter, {
+      currentPage: 1,
+      beforeDate: lastItem.createdAt
+    });
+    setMessageFilter(newFilter);
+    return JSON.stringify(newFilter) === JSON.stringify(messageFilter);
+  };
   var handleMarkReadMessage = function handleMarkReadMessage(conversationId, messageId) {
     try {
-      var _temp2 = _catch(function () {
+      var _temp4 = _catch(function () {
         return Promise.resolve(apiMarkReadMessage(conversationId, messageId)).then(function () {});
       }, function (error) {
         console.log({
           error: error
         });
       });
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
   };
   var resetMessages = function resetMessages() {
+    setMessageFilter(MESSAGE_DEFAULT_FILTER);
     setMessages([]);
   };
-  var handleChangeMessageFilter = function handleChangeMessageFilter(filter) {
-    setMessageFilter(_extends({}, messageFilter, filter));
-  };
   var handleChangeExamId = function handleChangeExamId(value) {
     setMessageFilter(_extends({}, messageFilter, {
       examId: value === null || value === void 0 ? void 0 : value.value,
@@ -1947,14 +2250,15 @@ var useMessageList = function useMessageList(userId, getListExamOptions) {
     }));
   };
   return {
+    isLoading: isLoading,
     messageFilter: messageFilter,
     messages: messages,
     getMessageList: getMessageList,
     setMessages: setMessages,
     resetMessages: resetMessages,
-    handleChangeMessageFilter: handleChangeMessageFilter,
     handleChangeExamId: handleChangeExamId,
-    handleMarkReadMessage: handleMarkReadMessage
+    handleMarkReadMessage: handleMarkReadMessage,
+    handleLoadMore: handleLoadMore
   };
 };
 
@@ -1970,6 +2274,7 @@ var useChatContainer = function useChatContainer(props) {
   var channel = useRef();
   var channelName = useRef();
   var loadingRef = useRef(false);
+  var firstLoadRef = useRef(true);
   var dispatch = useDispatch();
   var roles = useSelector(function (state) {
     var _state$common, _state$common$user;
@@ -1985,16 +2290,26 @@ var useChatContainer = function useChatContainer(props) {
   var _useState3 = useState(MessageStatus.Default),
     messageStatus = _useState3[0],
     setMessageStatus = _useState3[1];
+  var _useState4 = useState(true),
+    isScrollToEnd = _useState4[0],
+    setScrollToEnd = _useState4[1];
   var _useExamList = useExamList(isStudent),
     exams = _useExamList.exams,
     getListExam = _useExamList.getListExam;
   var _useMessageList = useMessageList(isStudent ? selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation = selectedConversation.teacher) === null || _selectedConversation === void 0 ? void 0 : _selectedConversation.id : selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation2 = selectedConversation.student) === null || _selectedConversation2 === void 0 ? void 0 : _selectedConversation2.id, !userId ? getListExam : undefined),
+    isLoadingMessages = _useMessageList.isLoading,
     messages = _useMessageList.messages,
     messageFilter = _useMessageList.messageFilter,
     getMessageList = _useMessageList.getMessageList,
     resetMessages = _useMessageList.resetMessages,
     handleChangeExamId = _useMessageList.handleChangeExamId,
-    setMessages = _useMessageList.setMessages;
+    setMessages = _useMessageList.setMessages,
+    handleLoadMore = _useMessageList.handleLoadMore;
+  var handleToggleScrollToEnd = function handleToggleScrollToEnd() {
+    setScrollToEnd(function (state) {
+      return !state;
+    });
+  };
   var handleAddMessage = function handleAddMessage() {
     try {
       var _message$content, _message$content$trim;
@@ -2007,6 +2322,7 @@ var useChatContainer = function useChatContainer(props) {
       })) return Promise.resolve();
       loadingRef.current = true;
       if (!(selectedConversation !== null && selectedConversation !== void 0 && selectedConversation.id) || !(message !== null && message !== void 0 && (_message$content = message.content) !== null && _message$content !== void 0 && (_message$content$trim = _message$content.trim()) !== null && _message$content$trim !== void 0 && _message$content$trim.length)) return Promise.resolve();
+      setScrollToEnd(true);
       setMessages(function (state) {
         return [].concat(state, [{
           id: 0,
@@ -2019,7 +2335,7 @@ var useChatContainer = function useChatContainer(props) {
             id: message.examId,
             startTime: moment().format("YYYY-MM-DDTHH:mm:ss"),
             title: message.examTitle || "",
-            code: "temp",
+            code: message.examCode || "",
             createdAt: moment().format("YYYY-MM-DDTHH:mm:ss")
           } : undefined,
           isRead: false,
@@ -2059,14 +2375,16 @@ var useChatContainer = function useChatContainer(props) {
       return Promise.reject(e);
     }
   };
-  var handleAddExamMessage = function handleAddExamMessage(examId, title) {
+  var handleAddExamMessage = function handleAddExamMessage(examId, title, examCode) {
     setMessage(!!message ? _extends({}, message, {
       examId: examId,
+      examCode: examCode,
       examTitle: title,
       parentId: undefined,
       parentContent: ""
     }) : {
       examId: examId,
+      examCode: examCode,
       content: "",
       examTitle: title,
       parentId: undefined,
@@ -2158,7 +2476,8 @@ var useChatContainer = function useChatContainer(props) {
     return results;
   }, [JSON.stringify(messages), JSON.stringify(message), isStudent, JSON.stringify(selectedConversation), messageFilter.examId, isStudent, userId, messageStatus]);
   var handleNewMessageSent = function handleNewMessageSent(data) {
-    if (!messageFilter.examId || messageFilter.examId && data.examId === messageFilter.examId) {
+    if (!messageFilter.examId && !examId || messageFilter.examId && data.examId === messageFilter.examId || examId && examId === data.examId) {
+      setScrollToEnd(true);
       setMessages(function (state) {
         if (state.some(function (i) {
           return i.id === 0;
@@ -2178,6 +2497,11 @@ var useChatContainer = function useChatContainer(props) {
       }));
     });
   };
+  var handleLoadMoreMessages = function handleLoadMoreMessages() {
+    if (handleLoadMore()) {
+      getMessageConversation();
+    }
+  };
   var cleanupPusher = function cleanupPusher() {
     var _pusher$current, _pusher$current2;
     (_pusher$current = pusher.current) === null || _pusher$current === void 0 ? void 0 : _pusher$current.unbind("new-message-event", handleNewMessageSent);
@@ -2203,13 +2527,15 @@ var useChatContainer = function useChatContainer(props) {
       pusher.current.bind("message-read-event", handleMessageMarkRead);
     }
     return cleanupPusher;
-  }, [selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id, messageFilter.examId]);
+  }, [selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id, messageFilter.examId, examId]);
   useEffect(function () {
     var getConversation = function getConversation() {
       try {
         var _temp6 = function _temp6() {
           dispatch(setLoading(false));
         };
+        resetMessages();
+        setScrollToEnd(true);
         if ((conversation === null || conversation === void 0 ? void 0 : conversation.id) !== undefined) {
           setSelectedConversation(conversation);
           return Promise.resolve();
@@ -2242,7 +2568,7 @@ var useChatContainer = function useChatContainer(props) {
     };
     getConversation();
   }, [conversation === null || conversation === void 0 ? void 0 : conversation.id, userId]);
-  var handleMarkRead = function handleMarkRead() {
+  var handleMarkRead = useCallback(function () {
     try {
       if (!(selectedConversation !== null && selectedConversation !== void 0 && selectedConversation.id)) return Promise.resolve();
       var _temp7 = _catch(function () {
@@ -2256,17 +2582,12 @@ var useChatContainer = function useChatContainer(props) {
     } catch (e) {
       return Promise.reject(e);
     }
-  };
+  }, [selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id]);
   var getMessageConversation = function getMessageConversation() {
     try {
-      var _temp12 = function _temp12() {
-        dispatch(setLoading(false));
-      };
       if (!roles.length) return Promise.resolve();
       if ((selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id) === undefined) return Promise.resolve();
-      if (messageFilter.currentPage === 1) resetMessages();
-      dispatch(setLoading(true));
-      var _temp11 = _catch(function () {
+      return Promise.resolve(_catch(function () {
         var _temp10 = function () {
           if (selectedConversation.id === 0) {
             var _userId = isStudent ? selectedConversation.teacher.id : selectedConversation.student.id;
@@ -2281,7 +2602,11 @@ var useChatContainer = function useChatContainer(props) {
               });
             };
             var _temp8 = function () {
-              if (messageFilter.currentPage === 1) return Promise.resolve(handleMarkRead()).then(function () {});
+              if (firstLoadRef.current) {
+                return Promise.resolve(handleMarkRead()).then(function () {
+                  firstLoadRef.current = false;
+                });
+              }
             }();
             return _temp8 && _temp8.then ? _temp8.then(_temp9) : _temp9(_temp8);
           }
@@ -2289,22 +2614,26 @@ var useChatContainer = function useChatContainer(props) {
         if (_temp10 && _temp10.then) return _temp10.then(function () {});
       }, function () {
         toast.error("Fail to fetch data!");
-      });
-      return Promise.resolve(_temp11 && _temp11.then ? _temp11.then(_temp12) : _temp12(_temp11));
+      }));
     } catch (e) {
       return Promise.reject(e);
     }
   };
+  var handleConversationChange = function handleConversationChange() {
+    resetMessages();
+    setScrollToEnd(true);
+  };
   useEffect(function () {
     getMessageConversation();
-  }, [selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id, selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.teacher.id, selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.student.id, isStudent, roles.length, JSON.stringify(messageFilter), examId]);
-  var userName = isStudent ? selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation3 = selectedConversation.teacher) === null || _selectedConversation3 === void 0 ? void 0 : _selectedConversation3.displayName : selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation4 = selectedConversation.student) === null || _selectedConversation4 === void 0 ? void 0 : _selectedConversation4.displayName;
-  var userAvatar = isStudent ? selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation5 = selectedConversation.teacher) === null || _selectedConversation5 === void 0 ? void 0 : _selectedConversation5.avatar : selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation6 = selectedConversation.student) === null || _selectedConversation6 === void 0 ? void 0 : _selectedConversation6.avatar;
+  }, [JSON.stringify(selectedConversation), JSON.stringify(roles), JSON.stringify(messageFilter), examId]);
+  var userName = (isStudent ? selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation3 = selectedConversation.teacher) === null || _selectedConversation3 === void 0 ? void 0 : _selectedConversation3.displayName : selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation4 = selectedConversation.student) === null || _selectedConversation4 === void 0 ? void 0 : _selectedConversation4.displayName) || "";
+  var userAvatar = (isStudent ? selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation5 = selectedConversation.teacher) === null || _selectedConversation5 === void 0 ? void 0 : _selectedConversation5.avatar : selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation6 = selectedConversation.student) === null || _selectedConversation6 === void 0 ? void 0 : _selectedConversation6.avatar) || "";
   return {
     chatHeaderProps: {
-      name: userName || "",
-      avatar: userAvatar || "",
+      name: userName,
+      avatar: userAvatar,
       options: exams,
+      selectedOption: messageFilter.examId,
       onChangeOption: handleFilterExam
     },
     chatListProps: {
@@ -2321,15 +2650,19 @@ var useChatContainer = function useChatContainer(props) {
       onSubmit: handleAddMessage,
       onClearReply: !messageFilter.examId || message !== null && message !== void 0 && message.parentContent ? handleClearReply : undefined
     },
+    isScrollToEnd: isScrollToEnd,
+    isLoadingMessages: isLoadingMessages,
     exams: exams,
     messageList: messageList,
     selectedConversation: selectedConversation,
     messageStatus: messageStatus,
     messageFilter: messageFilter,
+    handleToggleScrollToEnd: handleToggleScrollToEnd,
+    handleLoadMoreMessages: handleLoadMoreMessages,
     getMessageList: getMessageList,
     handleFilterExam: handleFilterExam,
     setMessage: setMessage,
-    resetMessages: resetMessages,
+    resetMessages: handleConversationChange,
     getMessageConversation: getMessageConversation,
     handleMarkRead: handleMarkRead
   };
@@ -2369,8 +2702,8 @@ var useConversationList = function useConversationList() {
         return i.id === val.id;
       });
       if (index > -1 && JSON.stringify(val) !== JSON.stringify(state[index])) {
-        return [].concat(state.slice(0, index), [val], state.slice(index + 1));
-      } else return [].concat(state, [val]);
+        return [val].concat(state.slice(0, index), state.slice(index + 1));
+      } else return [val].concat(state);
     });
     setSelectedConversation(function (state) {
       if (!state) return val;
@@ -2466,9 +2799,12 @@ var useConversationList = function useConversationList() {
         return i.id === lastMessage.conversationId;
       });
       if (updateIndex < 0) return state;
-      return [].concat(state.slice(0, updateIndex), [_extends({}, state[updateIndex], {
+      console.log({
         lastMessage: lastMessage
-      })], state.slice(updateIndex + 1));
+      });
+      return [_extends({}, state[updateIndex], {
+        lastMessage: lastMessage
+      })].concat(state.slice(0, updateIndex), state.slice(updateIndex + 1));
     });
   };
   var handleCreateConversationSuccess = function handleCreateConversationSuccess(id) {
@@ -2557,7 +2893,536 @@ var usePusherConversation = function usePusherConversation(onNewMessageConversat
   return {};
 };
 
+var _excluded$1 = ["defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
+var CustomCreatable = function CustomCreatable(_ref) {
+  var options = _ref.options,
+    isDisabled = _ref.isDisabled,
+    scrollBottom = _ref.scrollBottom,
+    value = _ref.value,
+    isMulti = _ref.isMulti,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var initialValues = Array.isArray(value) ? options.filter(function (i) {
+    return value.includes(i.value);
+  }) : isMulti ? options.filter(function (i) {
+    return i.value == value;
+  }) : options.find(function (i) {
+    return i.value == value;
+  });
+  return React.createElement(CreatableSelect, Object.assign({
+    isClearable: true,
+    isDisabled: isDisabled,
+    options: options,
+    value: initialValues,
+    menuPlacement: scrollBottom ? "top" : "auto",
+    isMulti: isMulti
+  }, rest));
+};
+
+var _excluded$2 = ["isDefault", "defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
+var CustomAsyncSelect = function CustomAsyncSelect(_ref) {
+  var isDefault = _ref.isDefault,
+    options = _ref.options,
+    isDisabled = _ref.isDisabled,
+    scrollBottom = _ref.scrollBottom,
+    value = _ref.value,
+    isMulti = _ref.isMulti,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var initialValues = Array.isArray(value) ? options.filter(function (i) {
+    return value.includes(i.value);
+  }) : isMulti ? options.filter(function (i) {
+    return i.value == value;
+  }) : options.find(function (i) {
+    return i.value == value;
+  });
+  return React.createElement(Select, Object.assign({
+    isDisabled: isDisabled,
+    options: options,
+    value: !isDefault ? initialValues : undefined,
+    defaultValue: isDefault ? initialValues : undefined,
+    menuPlacement: scrollBottom ? "top" : "auto",
+    isMulti: isMulti
+  }, rest));
+};
+
+var styles$2 = {"question":"_2uc_W","question-article":"_2p7kY","question-title":"_2tHmc","question--active":"_3IHYm","question-label":"_26ATj","question-input":"_3R8PR","question-btn":"_1VZac"};
+
+var DURATION_OPTIONS = Array.from({
+  length: 120
+}, function (_, i) {
+  return i + 1;
+});
+var SCORE_OPTIONS = Array.from({
+  length: 10
+}, function (_, i) {
+  return i + 1;
+});
+var QUESTION_OPTIONS = Array.from({
+  length: 40
+}, function (_, i) {
+  return i + 1;
+});
+var ANSWER_OPTIONS = Array.from({
+  length: 9
+}, function (_, i) {
+  return i + 2;
+});
+var DEFAULT_SCORE = 2;
+var DEFAULT_ANSWER_COUNT = 5;
+
+var QuestionView = function QuestionView(_ref) {
+  var index = _ref.index,
+    question = _ref.question,
+    answerCount = _ref.answerCount,
+    isDisabled = _ref.isDisabled,
+    onChangeCorrectAnswers = _ref.onChangeCorrectAnswers,
+    onChangeScoreAnswer = _ref.onChangeScoreAnswer;
+  var scoreOptions = SCORE_OPTIONS.map(function (i) {
+    return {
+      label: DEFAULT_SCORE === i ? i + "\uC810 (\uAE30\uBCF8\uAC12)" : i + "\uC810",
+      value: i
+    };
+  });
+  return React.createElement("div", {
+    className: "d-flex justify-content-between"
+  }, React.createElement("div", {
+    className: "d-flex flex-grow-1"
+  }, React.createElement("div", {
+    className: styles$2["question-title"] + " me-2"
+  }, "\uBB38\uC81C ", question.questionOrder + 1, "\uBC88"), React.createElement("div", {
+    className: "d-flex flex-grow-1"
+  }, Array.from({
+    length: answerCount
+  }, function (_, i) {
+    return i + 1;
+  }).map(function (i) {
+    return React.createElement(FormGroup, {
+      className: "d-flex flex-column px-4"
+    }, React.createElement(Label, {
+      htmlFor: "answer-" + i,
+      className: "" + styles$2["question-label"]
+    }, i, "\uBC88"), React.createElement(Input, {
+      id: "answer-" + i,
+      type: "radio",
+      checked: question.correctAnswers.includes(i),
+      onClick: function onClick() {
+        return onChangeCorrectAnswers(i, index);
+      },
+      disabled: isDisabled
+    }));
+  }))), React.createElement("div", {
+    className: "d-flex align-items-center"
+  }, React.createElement(FormGroup, {
+    className: "mx-3",
+    style: {
+      width: "140px"
+    }
+  }, React.createElement(CustomSelect, {
+    value: question.score,
+    options: scoreOptions,
+    onChange: function onChange(value) {
+      return onChangeScoreAnswer(value.value, index);
+    },
+    isDisabled: isDisabled
+  }))));
+};
+
+var ArticleGroupView = function ArticleGroupView(_ref) {
+  var categoryOptions = _ref.categoryOptions,
+    article = _ref.article,
+    questions = _ref.questions,
+    answerCount = _ref.answerCount,
+    questionCount = _ref.questionCount,
+    categoryId = _ref.categoryId,
+    isActive = _ref.isActive,
+    isDisabled = _ref.isDisabled,
+    onChangeQuestionCount = _ref.onChangeQuestionCount,
+    onChangeCategory = _ref.onChangeCategory,
+    onChangeAnswerCount = _ref.onChangeAnswerCount,
+    onChangeCorrectAnswers = _ref.onChangeCorrectAnswers,
+    onChangeScoreAnswer = _ref.onChangeScoreAnswer;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleChangeQuestionCount = function handleChangeQuestionCount(value) {
+    onChangeQuestionCount(article, value === null || value === void 0 ? void 0 : value.value, answerCount);
+  };
+  var handleChangeCategory = function handleChangeCategory(value) {
+    onChangeCategory(article, value === null || value === void 0 ? void 0 : value.value);
+  };
+  var handleChangeAnswerCount = function handleChangeAnswerCount(value) {
+    onChangeAnswerCount(article, value === null || value === void 0 ? void 0 : value.value, answerCount);
+  };
+  var handleChangeCorrectAnswers = function handleChangeCorrectAnswers(value, index) {
+    onChangeCorrectAnswers(article, index, value);
+  };
+  var handleChangeScoreAnswer = function handleChangeScoreAnswer(value, index) {
+    onChangeScoreAnswer(article, index, value);
+  };
+  var questionOptions = QUESTION_OPTIONS.map(function (i) {
+    return {
+      label: i + "\uAC1C",
+      value: i
+    };
+  });
+  var answerOptions = ANSWER_OPTIONS.map(function (i) {
+    return {
+      label: i + "\uBC88",
+      value: i
+    };
+  });
+  return React.createElement("div", {
+    className: "d-flex " + styles$2["question"] + " " + (isActive ? styles$2["question--active"] : "")
+  }, React.createElement("div", {
+    className: "py-1"
+  }, React.createElement(PiDotsNineLight, {
+    size: 18
+  })), React.createElement("div", {
+    className: "px-4"
+  }, React.createElement(Row, null, React.createElement(Col, {
+    xs: 12
+  }, React.createElement("p", {
+    className: "mb-0 " + styles$2["question-article"]
+  }, "\uBB38\uD56D"), React.createElement("p", {
+    className: "text-center " + styles$2["question-article"]
+  }, article)))), React.createElement("div", {
+    className: "flex-grow-1"
+  }, React.createElement(Row, null, React.createElement(Col, {
+    xs: 3
+  }, React.createElement(FormGroup, null, React.createElement(Label, {
+    htmlFor: "question_count",
+    className: "" + styles$2["question-label"]
+  }, t("question_count")), React.createElement(CustomSelect, {
+    inputId: "question_count",
+    value: questionCount,
+    options: questionOptions,
+    onChange: handleChangeQuestionCount,
+    isDisabled: isDisabled
+  }))), React.createElement(Col, {
+    xs: 3
+  }, React.createElement(FormGroup, null, React.createElement(Label, {
+    htmlFor: "category",
+    className: "" + styles$2["question-label"]
+  }, t("category")), React.createElement(CustomSelect, {
+    inputId: "category",
+    value: categoryId,
+    options: categoryOptions,
+    onChange: handleChangeCategory,
+    isDisabled: isDisabled
+  }))), React.createElement(Col, {
+    xs: 3
+  }, React.createElement(FormGroup, null, React.createElement(Label, {
+    htmlFor: "answer_count",
+    className: "" + styles$2["question-label"]
+  }, t("answer_count")), React.createElement(CustomSelect, {
+    inputId: "answer_count",
+    value: answerCount,
+    options: answerOptions,
+    onChange: handleChangeAnswerCount,
+    isDisabled: isDisabled
+  }))), React.createElement(Col, {
+    xs: 3
+  })), React.createElement("div", null, questions.map(function (q, index) {
+    return React.createElement(QuestionView, {
+      key: index,
+      question: q,
+      answerCount: answerCount,
+      index: index,
+      onChangeCorrectAnswers: handleChangeCorrectAnswers,
+      onChangeScoreAnswer: handleChangeScoreAnswer,
+      isDisabled: isDisabled
+    });
+  }))));
+};
+
+var useExamDetailView = function useExamDetailView(props) {
+  var exam = props.exam,
+    onChangeExam = props.onChangeExam;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleChangeQuestionCount = function handleChangeQuestionCount(article, questionCount, answerCount) {
+    if (!exam) return;
+    var examQuestions = exam.questions;
+    var questions = examQuestions.filter(function (i) {
+      return i.article === +article;
+    });
+    var prevQuestions = examQuestions.filter(function (i) {
+      return i.article < +article;
+    });
+    var nextQuestions = examQuestions.filter(function (i) {
+      return i.article > +article;
+    });
+    var lastOrder = questions[questions.length - 1].questionOrder;
+    if (questions.length === questionCount) return;
+    if (questions.length < questionCount) {
+      var additionalQuestions = Array.from({
+        length: questionCount - questions.length
+      }).map(function (_, index) {
+        var _questions$;
+        return {
+          article: +article,
+          correctAnswers: [1],
+          numberOfAnswers: answerCount,
+          categoryId: (_questions$ = questions[0]) === null || _questions$ === void 0 ? void 0 : _questions$.categoryId,
+          score: DEFAULT_SCORE,
+          questionOrder: lastOrder + index + 1
+        };
+      });
+      var newQuestions = [].concat(prevQuestions, questions, additionalQuestions, nextQuestions.map(function (i) {
+        return _extends({}, i, {
+          questionOrder: i.questionOrder + questionCount - questions.length
+        });
+      }));
+      onChangeExam(_extends({}, exam, {
+        questions: [].concat(newQuestions)
+      }));
+    } else {
+      var remainQuestions = questions.slice(0, questionCount);
+      var _newQuestions = [].concat(prevQuestions, remainQuestions, nextQuestions.map(function (i) {
+        return _extends({}, i, {
+          questionOrder: i.questionOrder - questions.length + questionCount
+        });
+      }));
+      onChangeExam(_extends({}, exam, {
+        questions: [].concat(_newQuestions)
+      }));
+    }
+  };
+  var handleChangeCategory = function handleChangeCategory(article, categoryId) {
+    if (!exam) return;
+    var examQuestions = exam.questions;
+    var questions = examQuestions.filter(function (i) {
+      return i.article === +article;
+    });
+    var otherQuestions = examQuestions.filter(function (i) {
+      return i.article !== +article;
+    });
+    onChangeExam(_extends({}, exam, {
+      questions: [].concat(otherQuestions, questions.map(function (q) {
+        return _extends({}, q, {
+          categoryId: categoryId
+        });
+      }))
+    }));
+  };
+  var handleChangeAnswerCount = function handleChangeAnswerCount(article, newAnswerCount, answerCount) {
+    if (!exam) return;
+    if (newAnswerCount === answerCount) return;
+    var examQuestions = exam.questions;
+    var questions = examQuestions.filter(function (i) {
+      return i.article === +article;
+    });
+    var otherQuestions = examQuestions.filter(function (i) {
+      return i.article !== +article;
+    });
+    if (answerCount < newAnswerCount) {
+      onChangeExam(_extends({}, exam, {
+        questions: [].concat(otherQuestions, questions.map(function (q) {
+          return _extends({}, q, {
+            numberOfAnswers: newAnswerCount
+          });
+        }))
+      }));
+    } else {
+      onChangeExam(_extends({}, exam, {
+        questions: [].concat(otherQuestions, questions.map(function (q) {
+          return _extends({}, q, {
+            numberOfAnswers: newAnswerCount,
+            correctAnswers: q.correctAnswers.filter(function (i) {
+              return i <= newAnswerCount;
+            })
+          });
+        }))
+      }));
+    }
+  };
+  var handleChangeCorrectAnswers = function handleChangeCorrectAnswers(article, index, answer) {
+    if (!exam) return;
+    var examQuestions = exam.questions;
+    var questions = examQuestions.filter(function (i) {
+      return i.article === +article;
+    });
+    var otherQuestions = examQuestions.filter(function (i) {
+      return i.article !== +article;
+    });
+    var selectedQuestion = questions[index];
+    onChangeExam(_extends({}, exam, {
+      questions: [].concat(otherQuestions, questions.slice(0, index), [_extends({}, selectedQuestion, {
+        correctAnswers: [answer]
+      })], questions.slice(index + 1))
+    }));
+  };
+  var handleChangeScoreAnswer = function handleChangeScoreAnswer(article, index, score) {
+    if (!exam) return;
+    var examQuestions = exam.questions;
+    var questions = examQuestions.filter(function (i) {
+      return i.article === +article;
+    });
+    var otherQuestions = examQuestions.filter(function (i) {
+      return i.article !== +article;
+    });
+    var selectedQuestion = questions[index];
+    if (score === selectedQuestion.score) return;
+    onChangeExam(_extends({}, exam, {
+      questions: [].concat(otherQuestions, questions.slice(0, index), [_extends({}, selectedQuestion, {
+        score: score
+      })], questions.slice(index + 1))
+    }));
+  };
+  var handleChangeDuration = function handleChangeDuration(value) {
+    if (!exam) return;
+    onChangeExam(_extends({}, exam, {
+      duration: value === null || value === void 0 ? void 0 : value.value
+    }));
+  };
+  var handleChangeTitle = function handleChangeTitle(e) {
+    if (!exam) return;
+    onChangeExam(_extends({}, exam, {
+      title: e.target.value
+    }));
+  };
+  var handleAddArticle = function handleAddArticle() {
+    var _$maxBy, _$maxBy2;
+    if (!exam) return;
+    var maxArticle = ((_$maxBy = _.maxBy(exam.questions, "article")) === null || _$maxBy === void 0 ? void 0 : _$maxBy.article) || 0;
+    var maxOrder = ((_$maxBy2 = _.maxBy(exam.questions, "questionOrder")) === null || _$maxBy2 === void 0 ? void 0 : _$maxBy2.questionOrder) || 0;
+    onChangeExam(_extends({}, exam, {
+      questions: [].concat(exam.questions, [{
+        article: maxArticle + 1,
+        correctAnswers: [1],
+        numberOfAnswers: DEFAULT_ANSWER_COUNT,
+        score: DEFAULT_SCORE,
+        questionOrder: maxOrder + 1
+      }])
+    }));
+  };
+  var examGroupByArticle = useMemo(function () {
+    if (!exam) return [];
+    var articles = [];
+    var groupedArticle = _.groupBy(exam.questions, "article");
+    for (var key in groupedArticle) {
+      if (Object.prototype.hasOwnProperty.call(groupedArticle, key)) {
+        var _questions$find, _$maxBy3;
+        var questions = groupedArticle[key];
+        articles.push({
+          article: +key,
+          categoryId: (_questions$find = questions.find(function (i) {
+            return !!i.categoryId;
+          })) === null || _questions$find === void 0 ? void 0 : _questions$find.categoryId,
+          answerCount: ((_$maxBy3 = _.maxBy(questions, "numberOfAnswers")) === null || _$maxBy3 === void 0 ? void 0 : _$maxBy3.numberOfAnswers) || DEFAULT_ANSWER_COUNT,
+          questionCount: questions.length,
+          questions: questions
+        });
+      }
+    }
+    return _.sortBy(articles, "article");
+  }, [JSON.stringify(exam)]);
+  var durationOptions = useMemo(function () {
+    var options = DURATION_OPTIONS.map(function (i) {
+      return {
+        label: i + "\uBD84",
+        value: i
+      };
+    });
+    if (!!exam.duration && exam.duration > DURATION_OPTIONS[DURATION_OPTIONS.length - 1]) return [].concat(options, [{
+      label: exam.duration + "\uBD84",
+      value: exam.duration
+    }]);
+    return options;
+  }, [exam.duration]);
+  return {
+    t: t,
+    durationOptions: durationOptions,
+    examGroupByArticle: examGroupByArticle,
+    handleAddArticle: handleAddArticle,
+    handleChangeScoreAnswer: handleChangeScoreAnswer,
+    handleChangeTitle: handleChangeTitle,
+    handleChangeDuration: handleChangeDuration,
+    handleChangeCorrectAnswers: handleChangeCorrectAnswers,
+    handleChangeAnswerCount: handleChangeAnswerCount,
+    handleChangeQuestionCount: handleChangeQuestionCount,
+    handleChangeCategory: handleChangeCategory
+  };
+};
+
+var ExamDetailView = function ExamDetailView(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    categoryOptions = _ref.categoryOptions,
+    exam = _ref.exam,
+    _ref$isUsingMui = _ref.isUsingMui,
+    isUsingMui = _ref$isUsingMui === void 0 ? true : _ref$isUsingMui,
+    isDisabled = _ref.isDisabled,
+    onChangeExam = _ref.onChangeExam;
+  var _useExamDetailView = useExamDetailView({
+      exam: exam,
+      onChangeExam: onChangeExam
+    }),
+    t = _useExamDetailView.t,
+    durationOptions = _useExamDetailView.durationOptions,
+    examGroupByArticle = _useExamDetailView.examGroupByArticle,
+    handleAddArticle = _useExamDetailView.handleAddArticle,
+    handleChangeScoreAnswer = _useExamDetailView.handleChangeScoreAnswer,
+    handleChangeTitle = _useExamDetailView.handleChangeTitle,
+    handleChangeDuration = _useExamDetailView.handleChangeDuration,
+    handleChangeCorrectAnswers = _useExamDetailView.handleChangeCorrectAnswers,
+    handleChangeAnswerCount = _useExamDetailView.handleChangeAnswerCount,
+    handleChangeQuestionCount = _useExamDetailView.handleChangeQuestionCount,
+    handleChangeCategory = _useExamDetailView.handleChangeCategory;
+  return React.createElement(Row, {
+    className: "" + className
+  }, React.createElement(Col, {
+    xs: 5
+  }, React.createElement(FormGroup, null, React.createElement(Label, {
+    className: "" + styles$2["question-label"],
+    htmlFor: "title"
+  }, t("title")), React.createElement(Input, {
+    disabled: isDisabled,
+    className: "w-100 rounded-2 " + styles$2["question-input"],
+    value: exam.title,
+    id: "title",
+    placeholder: t("enter_title"),
+    onChange: handleChangeTitle
+  }))), React.createElement(Col, {
+    xs: 3
+  }, React.createElement(FormGroup, null, React.createElement(Label, {
+    className: "" + styles$2["question-label"],
+    htmlFor: "duration"
+  }, t("duration")), React.createElement(CustomSelect, {
+    inputId: "duration",
+    value: exam.duration,
+    options: durationOptions,
+    onChange: handleChangeDuration,
+    isDisabled: isDisabled
+  }))), React.createElement(Col, {
+    xs: 4
+  }), examGroupByArticle.map(function (i, index) {
+    return React.createElement(Col, {
+      xs: 12,
+      key: i.article,
+      className: (index === 0 && !isUsingMui ? "mt-3" : "") + " " + (!isUsingMui ? "mb-4" : "")
+    }, React.createElement(ArticleGroupView, Object.assign({}, i, {
+      categoryOptions: categoryOptions,
+      isActive: index === examGroupByArticle.length - 1,
+      onChangeQuestionCount: handleChangeQuestionCount,
+      onChangeCategory: handleChangeCategory,
+      onChangeAnswerCount: handleChangeAnswerCount,
+      onChangeCorrectAnswers: handleChangeCorrectAnswers,
+      onChangeScoreAnswer: handleChangeScoreAnswer,
+      isDisabled: isDisabled
+    })));
+  }), React.createElement(Col, {
+    xs: 12
+  }, React.createElement(Button, {
+    disabled: isDisabled,
+    className: "w-100 d-flex justify-content-center align-items-center " + styles$2["question-btn"],
+    color: "primary",
+    outline: true,
+    onClick: handleAddArticle
+  }, React.createElement(FaPlusCircle, {
+    className: "me-2"
+  }), "\uBB38\uD56D \uCD94\uAC00\uD558\uAE30")));
+};
+
 var historyCore = createBrowserHistory();
 
-export { ACCESS_TOKEN, BASE_URL, ChatContainer, ChatItemType, CommonAlert, CommonDialog, ConfirmDialog, CustomPagination, CustomSelect, DATE_MIN_VALUE, EXAM_CHANNEL, EXAM_STUDENT_CHANNEL, ExamEvent, LayoutContext, Loading, Login, NotFound, PUSHER_CONFIG, TheLanguageDropdown, api, canAccess as canAccessRoute, diffFromNow, formatTime, getAccessToken$1 as getAccessToken, historyCore, i18n, minutesToTimeSpan, setAlert, setLanguage, setLoading, setUser, store, toISOString, useChatContainer, useConversationList, useGoogleSignOut, usePusherConversation, utcToLocalTime };
+export { ACCESS_TOKEN, BASE_URL, ChatContainer, ChatItemType, CommonAlert, CommonDialog, ConfirmDialog, CustomAsyncSelect, CustomCreatable, CustomPagination, CustomSelect, DATE_MIN_VALUE, EXAM_CHANNEL, EXAM_STUDENT_CHANNEL, ExamDetailView, ExamEvent, LANGUAGES, LayoutContext, Loading, Login, NotFound, PUSHER_CONFIG, Role, TheLanguageDropdown, api, canAccess as canAccessRoute, diffFromNow, formatTime, getAccessToken$1 as getAccessToken, historyCore, i18n, minutesToTimeSpan, setAlert, setLanguage, setLoading, setUser, store, toISOString, useChatContainer, useConversationList, useGoogleSignOut, useLanguage, usePusherConversation, utcToLocalTime };
 //# sourceMappingURL=index.modern.js.map