touchstudy-core 0.1.6 → 0.1.8

package/dist/index.js

@@ -16,6 +16,11 @@ var gapiScript = require('gapi-script');
 var i18n = _interopDefault(require('i18next'));
 var reactI18next = require('react-i18next');
 var io5 = require('react-icons/io5');
+var Select = _interopDefault(require('react-select'));
+var reactRouterDom = require('react-router-dom');
+var io = require('react-icons/io');
+var reactToastify = require('react-toastify');
+var Pusher = _interopDefault(require('pusher-js'));
 
 var setLoading = toolkit.createAction("common/setLoading");
 var setAlert = toolkit.createAction("common/setAlert");
@@ -33,9 +38,10 @@ var BASE_URL = function () {
 }();
 var PUSHER_CONFIG = {
   cluster: "ap1",
-  key: "9018c77328885a14150b"
+  key: "dde049326fbe52b2a749"
 };
-var EXAM_CHANNEL = "EXAM-CHANNEL";
+var EXAM_CHANNEL = "presence-exam-channel";
+var EXAM_STUDENT_CHANNEL = "EXAM-CHANNEL-{examCode}-STUDENT-{studentId}";
 var getAccessToken = function getAccessToken() {
   try {
     return localStorage.getItem(ACCESS_TOKEN);
@@ -639,66 +645,9 @@ var Loading = function Loading() {
   }))) : null;
 };
 
-var encodeParams$1 = (function (params) {
-  return Object.keys(params).filter(function (key) {
-    return params[key] || params[key] === 0 || params[key] === false;
-  }).map(function (key) {
-    if (Array.isArray(params[key])) {
-      return params[key].map(function (i) {
-        return encodeURIComponent(key) + "=" + encodeURIComponent(i);
-      }).join('&');
-    }
-    return encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);
-  }).join('&');
-});
-
-var api$1 = axios.create({
-  baseURL: BASE_URL,
-  timeout: 0,
-  headers: {
-    "Content-Type": "application/json"
-  },
-  paramsSerializer: function paramsSerializer(params) {
-    return encodeParams$1(params);
-  }
-});
-var apiUpload$1 = axios.create({
-  baseURL: BASE_URL,
-  timeout: 60000,
-  headers: {
-    "Content-Type": "multipart/form-data"
-  }
-});
-[api$1, apiUpload$1].forEach(function (i) {
-  return i.interceptors.request.use(function (config) {
-    var token = getAccessToken$1();
-    if (token) {
-      config.headers.Authorization = "Bearer " + token;
-    }
-    return config;
-  }, function (error) {
-    return Promise.reject(error);
-  });
-});
-[api$1, apiUpload$1].forEach(function (i) {
-  return i.interceptors.response.use(function (response) {
-    return response;
-  }, function (error) {
-    if (error.response.status === 401) {
-      window.location.href = "/login";
-    }
-    if (error.response.status == 403) {
-      localStorage.removeItem(ACCESS_TOKEN);
-      localStorage.removeItem("USER_EMAIL");
-      window.location.href = "/login";
-    }
-    return Promise.reject(error);
-  });
-});
-
 var AUTH_URL = BASE_URL + "/api/auth";
 var getInfo = function getInfo() {
-  return api$1.get(AUTH_URL + "/info");
+  return api.get(AUTH_URL + "/info");
 };
 
 var LayoutContext = function LayoutContext(_ref) {
@@ -961,10 +910,8 @@ var CustomPagination = function CustomPagination(_ref) {
 (function (ExamEvent) {
   ExamEvent["StartExam"] = "start-exam";
   ExamEvent["TerminateExam"] = "terminate-exam";
-  ExamEvent["JoinExam"] = "join-exam";
   ExamEvent["AddExtraDuration"] = "add-extra-duration-exam";
-  ExamEvent["TeacherDisconnectChannel"] = "teacher-disconnect-channel";
-  ExamEvent["StudentDisconnectChannel"] = "student-disconnect-channel";
+  ExamEvent["TeacherKickOutStudent"] = "teacher-kick-out-student";
 })(exports.ExamEvent || (exports.ExamEvent = {}));
 
 var problem_solving = "문제풀기";
@@ -1023,6 +970,7 @@ var internet_connection_was_lost = "인터넷 연결이 끊어졌습니다";
 var problem = "문제";
 var problem_solving_time = "문제풀이 시간";
 var minutes = "분";
+var correct_rate = "정확한 비율";
 var lang_ko = {
 	problem_solving: problem_solving,
 	my_story: my_story,
@@ -1079,7 +1027,8 @@ var lang_ko = {
 	internet_connection_was_lost: internet_connection_was_lost,
 	problem: problem,
 	problem_solving_time: problem_solving_time,
-	minutes: minutes
+	minutes: minutes,
+	correct_rate: correct_rate
 };
 
 var problem_solving$1 = "Problem Solving";
@@ -1138,6 +1087,7 @@ var internet_connection_was_lost$1 = "Internet connection was lost";
 var problem$1 = "Problem ";
 var problem_solving_time$1 = "Problem solving time";
 var minutes$1 = "m";
+var correct_rate$1 = "Correct rate";
 var lang_en = {
 	problem_solving: problem_solving$1,
 	my_story: my_story$1,
@@ -1194,7 +1144,8 @@ var lang_en = {
 	internet_connection_was_lost: internet_connection_was_lost$1,
 	problem: problem$1,
 	problem_solving_time: problem_solving_time$1,
-	minutes: minutes$1
+	minutes: minutes$1,
+	correct_rate: correct_rate$1
 };
 
 i18n.use(reactI18next.initReactI18next).init({
@@ -1339,6 +1290,1273 @@ var canAccess = function canAccess(userRoles, componentRoles) {
   return true;
 };
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+var _excluded = ["defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
+var CustomSelect = function CustomSelect(_ref) {
+  var options = _ref.options,
+    isDisabled = _ref.isDisabled,
+    scrollBottom = _ref.scrollBottom,
+    value = _ref.value,
+    isMulti = _ref.isMulti,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  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__default.createElement(Select, Object.assign({
+    isDisabled: isDisabled,
+    options: options,
+    value: initialValues,
+    menuPlacement: scrollBottom ? "top" : "auto",
+    isMulti: isMulti
+  }, rest));
+};
+
+var styles$1 = {"header__avatar":"_2oGcJ","header__select":"_2y2XV","body":"_ntGyI","list":"_m7Fwt","list__item__header":"_3BM8N","list__item__avatar":"_1ReOK","list__item__avatar-container":"_2qbld","list__item__message":"_3s01i","list__item__message--reply-from":"_2Qxi3","list__item__message--reply-from-right":"_34Vx4","list__item__message--reply":"_3uheq","list__item__message--reply-right":"_2iBr7","reply-text":"_3ZPjO"};
+
+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["DisplayName"] = "DisplayName";
+})(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 ChatRightItem = function ChatRightItem(_ref) {
+  var content = _ref.content,
+    createdAt = _ref.createdAt,
+    isRead = _ref.isRead,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? exports.ChatItemType.Default : _ref$type,
+    examCode = _ref.examCode,
+    isSystemLog = _ref.isSystemLog,
+    parentId = _ref.parentId,
+    _ref$showExamHeader = _ref.showExamHeader,
+    showExamHeader = _ref$showExamHeader === void 0 ? false : _ref$showExamHeader,
+    _ref$isFirst = _ref.isFirst,
+    isFirst = _ref$isFirst === void 0 ? true : _ref$isFirst,
+    isLast = _ref.isLast,
+    actionLink = _ref.actionLink,
+    examId = _ref.examId,
+    examTitle = _ref.examTitle,
+    parentContent = _ref.parentContent,
+    status = _ref.status,
+    onAddExamMessage = _ref.onAddExamMessage,
+    onReTrySendMessage = _ref.onReTrySendMessage;
+  var _useState = React.useState(false),
+    isShowTime = _useState[0],
+    setShowTime = _useState[1];
+  var _useState2 = React.useState(false),
+    isShowInfo = _useState2[0],
+    setShowInfo = _useState2[1];
+  var handleShowInfo = function handleShowInfo() {
+    setShowInfo(!isShowInfo);
+    !isFirst && !isSystemLog && setShowTime(!isShowInfo);
+  };
+  var handleReTrySendMessage = function handleReTrySendMessage() {
+    if (status !== MessageStatus.SentError || !content) return;
+    onReTrySendMessage === null || onReTrySendMessage === void 0 ? void 0 : onReTrySendMessage({
+      content: content,
+      examId: examId,
+      examTitle: examTitle,
+      parentContent: parentContent,
+      parentId: parentId
+    });
+  };
+  React.useEffect(function () {
+    setShowTime(isSystemLog || !!isFirst);
+  }, [isFirst, isSystemLog]);
+  return React__default.createElement("li", {
+    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__default.createElement("div", {
+    className: "d-flex bg-info justify-content-between px-3 mb-3 py-1 " + styles$1["list__item__header"]
+  }, React__default.createElement(reactRouterDom.Link, {
+    to: "" + (actionLink || "/"),
+    className: "text-black"
+  }, examTitle), !!examId && !!examTitle && React__default.createElement("span", {
+    className: "pointer text-black",
+    onClick: function onClick() {
+      return onAddExamMessage === null || onAddExamMessage === void 0 ? void 0 : onAddExamMessage(examId, examTitle);
+    }
+  }, "Add message to exam")), isSystemLog || !!isFirst ? React__default.createElement("p", {
+    className: "mb-0 py-1 px-3 fs-6 text-muted text-center"
+  }, utcToLocalTime(createdAt, "HH:mm DD MMM YYYY")) : React__default.createElement(reactstrap.Collapse, {
+    className: "w-100",
+    isOpen: isShowTime
+  }, React__default.createElement("p", {
+    className: "mb-0 py-1 px-3 fs-6 text-muted text-center"
+  }, utcToLocalTime(createdAt, "HH:mm DD MMM YYYY"))), isSystemLog ? React__default.createElement("div", {
+    className: "text-center w-100"
+  }, React__default.createElement(reactRouterDom.Link, {
+    to: "" + (actionLink || "/"),
+    title: "See the results",
+    className: "text-primary"
+  }, content)) : React__default.createElement("div", {
+    className: "d-flex align-items-start w-100 flex-row-reverse"
+  }, React__default.createElement("div", {
+    className: "d-flex flex-column align-items-end"
+  }, parentId && React__default.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"
+  }, React__default.createElement("b", null, "Reply To:"), " ", parentContent), React__default.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__default.createElement("p", {
+    onClick: handleReTrySendMessage,
+    className: "fs-6 mb-0 " + (status === MessageStatus.SentError ? "text-danger text-decoration-underline pointer" : "")
+  }, status), (type !== exports.ChatItemType.Exam || !examCode) && status === MessageStatus.Default && React__default.createElement(reactstrap.Collapse, {
+    isOpen: isShowInfo
+  }, React__default.createElement("p", {
+    className: "mb-0 py-1 px-3 fs-6 text-muted text-end"
+  }, isRead ? "seen" : "sent")))));
+};
+
+var ChatLeftItem = function ChatLeftItem(_ref) {
+  var id = _ref.id,
+    avatar = _ref.avatar,
+    content = _ref.content,
+    createdAt = _ref.createdAt,
+    examCode = _ref.examCode,
+    isSystemLog = _ref.isSystemLog,
+    parentId = _ref.parentId,
+    _ref$showExamHeader = _ref.showExamHeader,
+    showExamHeader = _ref$showExamHeader === void 0 ? false : _ref$showExamHeader,
+    _ref$isFirst = _ref.isFirst,
+    isFirst = _ref$isFirst === void 0 ? true : _ref$isFirst,
+    isLast = _ref.isLast,
+    actionLink = _ref.actionLink,
+    examId = _ref.examId,
+    examTitle = _ref.examTitle,
+    parentContent = _ref.parentContent,
+    onAddExamMessage = _ref.onAddExamMessage,
+    onReply = _ref.onReply,
+    selectedReplyMessageId = _ref.selectedReplyMessageId,
+    onToggleReply = _ref.onToggleReply,
+    selectedReplyItemRef = _ref.selectedReplyItemRef;
+  var _useState = React.useState(false),
+    isShowTime = _useState[0],
+    setShowTime = _useState[1];
+  var _useState2 = React.useState(false),
+    isShowInfo = _useState2[0],
+    setShowInfo = _useState2[1];
+  var handleShowInfo = function handleShowInfo() {
+    if (!id) return;
+    setShowInfo(!isShowInfo);
+    onToggleReply === null || onToggleReply === void 0 ? void 0 : onToggleReply(id);
+    !isFirst && !isSystemLog && setShowTime(!isShowInfo);
+  };
+  var handleReply = function handleReply() {
+    if (!id) return;
+    onReply === null || onReply === void 0 ? void 0 : onReply(id, content || "", examId);
+  };
+  React.useEffect(function () {
+    setShowTime(isSystemLog || !!isFirst);
+  }, [isFirst, isSystemLog]);
+  return React__default.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__default.createElement("div", {
+    className: "d-flex bg-info justify-content-between px-3 mb-3 py-1 " + styles$1["list__item__header"]
+  }, React__default.createElement(reactRouterDom.Link, {
+    to: "" + (actionLink || "/"),
+    className: "text-black"
+  }, examTitle), !!examId && !!examTitle && React__default.createElement("span", {
+    className: "pointer text-black",
+    onClick: function onClick() {
+      return onAddExamMessage === null || onAddExamMessage === void 0 ? void 0 : onAddExamMessage(examId, examTitle);
+    }
+  }, "Add message to exam")), isSystemLog || !!isFirst ? React__default.createElement("p", {
+    className: "mb-0 py-1 px-3 fs-6 text-muted text-center"
+  }, utcToLocalTime(createdAt, "HH:mm DD MMM YYYY")) : React__default.createElement(reactstrap.Collapse, {
+    className: "w-100",
+    isOpen: isShowTime
+  }, React__default.createElement("p", {
+    className: "mb-0 py-1 px-3 fs-6 text-muted text-center"
+  }, utcToLocalTime(createdAt, "HH:mm DD MMM YYYY"))), isSystemLog ? React__default.createElement("div", {
+    className: "text-center w-100"
+  }, React__default.createElement(reactRouterDom.Link, {
+    to: "" + (actionLink || "/"),
+    title: "See the results",
+    className: "text-primary"
+  }, content)) : React__default.createElement("div", {
+    className: "d-flex align-items-start w-100"
+  }, React__default.createElement("div", {
+    className: "rounded-circle " + styles$1["list__item__avatar-container"] + " bg-light me-2 mt-1 " + (isFirst ? "" : "opacity-0")
+  }, isFirst && React__default.createElement("img", {
+    className: styles$1["list__item__avatar"] + " bg-light rounded-circle",
+    src: avatar
+  })), React__default.createElement("div", {
+    className: "d-flex flex-column"
+  }, parentId && React__default.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"
+  }, React__default.createElement("b", null, "Reply To:"), " ", parentContent), React__default.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
+  }, content), !isSystemLog && React__default.createElement(reactstrap.Collapse, {
+    className: "w-100",
+    isOpen: selectedReplyMessageId === id
+  }, React__default.createElement("p", {
+    onClick: handleReply,
+    className: "mb-0 py-1 px-3 fs-6 text-primary text-left pointer"
+  }, "Reply")))));
+};
+
+(function (ChatItemType) {
+  ChatItemType[ChatItemType["Default"] = 0] = "Default";
+  ChatItemType[ChatItemType["Exam"] = 1] = "Exam";
+  ChatItemType[ChatItemType["Class"] = 2] = "Class";
+})(exports.ChatItemType || (exports.ChatItemType = {}));
+var ChatItem = function ChatItem(props) {
+  var isMe = props.isMe,
+    onReTrySendMessage = props.onReTrySendMessage;
+  return React__default.createElement(React.Fragment, null, isMe ? React__default.createElement(ChatRightItem, Object.assign({}, props, {
+    onReTrySendMessage: onReTrySendMessage
+  })) : React__default.createElement(ChatLeftItem, Object.assign({}, props)));
+};
+
+var ChatList = function ChatList(_ref) {
+  var _ref$messages = _ref.messages,
+    messages = _ref$messages === void 0 ? [] : _ref$messages,
+    onAddExamMessage = _ref.onAddExamMessage,
+    onReply = _ref.onReply,
+    onReTrySendMessage = _ref.onReTrySendMessage,
+    listItemRef = _ref.listItemRef;
+  var _useState = React.useState(),
+    selectedReplyMessageId = _useState[0],
+    setSelectedReplyMessageId = _useState[1];
+  var selectedReplyItemRef = React.useRef(null);
+  var handleToggleReply = function handleToggleReply(id) {
+    setSelectedReplyMessageId(id === selectedReplyMessageId ? undefined : id);
+  };
+  React.useEffect(function () {
+    selectedReplyMessageId && selectedReplyItemRef.current && selectedReplyItemRef.current.scrollIntoView({
+      behavior: "smooth"
+    });
+  }, [selectedReplyMessageId, selectedReplyItemRef.current]);
+  return React__default.createElement("ul", {
+    ref: listItemRef,
+    className: styles$1["list"] + " h-100 d-flex flex-column py-3 px-0 mb-0"
+  }, React__default.createElement("li", {
+    className: "flex-grow-1",
+    key: "start-of-list"
+  }), !(messages !== null && messages !== void 0 && messages.length) && React__default.createElement("li", {
+    className: "text-muted text-center fst-italic fs-6"
+  }, "No message"), !!(messages !== null && messages !== void 0 && messages.length) && messages.map(function (message) {
+    return React__default.createElement(ChatItem, Object.assign({
+      key: message.id
+    }, message, {
+      onAddExamMessage: onAddExamMessage,
+      onReply: onReply,
+      selectedReplyMessageId: selectedReplyMessageId,
+      onToggleReply: handleToggleReply,
+      selectedReplyItemRef: selectedReplyItemRef,
+      onReTrySendMessage: onReTrySendMessage
+    }));
+  }));
+};
+
+var InputChat = function InputChat(_ref) {
+  var text = _ref.text,
+    parentText = _ref.parentText,
+    examTitle = _ref.examTitle,
+    inputRef = _ref.inputRef,
+    onChangeInput = _ref.onChangeInput,
+    onSubmit = _ref.onSubmit,
+    onClearReply = _ref.onClearReply;
+  var handleSubmit = function handleSubmit() {
+    if (!text.trim().length) return;
+    onSubmit();
+  };
+  var handleInputChange = function handleInputChange(event) {
+    onChangeInput(event.target.value);
+  };
+  var handleKeyPressEnter = function handleKeyPressEnter(e) {
+    if (e.code === "Enter") handleSubmit();
+  };
+  var handleClearReply = function handleClearReply() {
+    onClearReply === null || onClearReply === void 0 ? void 0 : onClearReply();
+  };
+  return React__default.createElement("div", {
+    className: "bg-light rounded-3 p-2"
+  }, React__default.createElement(reactstrap.Collapse, {
+    isOpen: !!parentText || !!examTitle && !parentText
+  }, !!parentText ? React__default.createElement("div", {
+    className: "d-flex justify-content-between align-items-center"
+  }, React__default.createElement("p", {
+    className: "mb-3 " + styles$1["reply-text"]
+  }, React__default.createElement("b", null, "Reply to:"), " " + parentText), !!onClearReply && React__default.createElement("span", {
+    className: "pointer ms-3 mb-3 d-flex justify-content-center align-items-center",
+    onClick: handleClearReply
+  }, React__default.createElement(io.IoIosCloseCircle, null))) : React__default.createElement("div", {
+    className: "d-flex justify-content-between align-items-center"
+  }, React__default.createElement("p", {
+    className: "mb-3 " + styles$1["reply-text"]
+  }, React__default.createElement("b", null, "Reply to", examTitle ? " exam" : "", ": "), " " + examTitle), !!onClearReply && React__default.createElement("span", {
+    className: "pointer ms-3 mb-3 d-flex justify-content-center align-items-center",
+    onClick: handleClearReply
+  }, React__default.createElement(io.IoIosCloseCircle, null)))), React__default.createElement(reactstrap.InputGroup, {
+    className: "d-flex align-items"
+  }, React__default.createElement(reactstrap.Input, {
+    innerRef: inputRef,
+    value: text,
+    placeholder: "Enter something",
+    onKeyUp: handleKeyPressEnter,
+    className: "rounded-pill px-3",
+    onChange: handleInputChange
+  }), React__default.createElement("div", {
+    className: "p-2 pointer d-flex align-items-center",
+    onClick: handleSubmit
+  }, React__default.createElement(io.IoMdSend, {
+    className: "text-primary fs-4"
+  }))));
+};
+
+var ChatHeader = function ChatHeader(_ref) {
+  var name = _ref.name,
+    avatar = _ref.avatar,
+    options = _ref.options,
+    onChangeOption = _ref.onChangeOption;
+  var wrapperRef = React.useRef(null);
+  var actionRef = React.useRef(null);
+  var handleChangeOption = function handleChangeOption(val) {
+    onChangeOption === null || onChangeOption === void 0 ? void 0 : onChangeOption(val);
+  };
+  React.useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target) && actionRef.current && !actionRef.current.contains(event.target)) ;
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [wrapperRef, actionRef]);
+  var selectOptions = React.useMemo(function () {
+    return options === null || options === void 0 ? void 0 : options.map(function (i) {
+      return {
+        value: i.id,
+        label: i.title + " (" + utcToLocalTime(i.startTime) + ")"
+      };
+    });
+  }, [JSON.stringify(options)]);
+  return React__default.createElement("div", {
+    className: "d-flex bg-light rounded-3 p-3"
+  }, React__default.createElement("div", null, React__default.createElement("img", {
+    className: "rounded-circle " + styles$1["header__avatar"],
+    src: avatar,
+    alt: name
+  })), React__default.createElement("div", {
+    className: "flex-grow-1 px-3 d-flex align-items-center"
+  }, React__default.createElement("p", {
+    className: "mb-0 text-primary fw-medium"
+  }, name)), React__default.createElement("div", {
+    className: "d-flex align-items-center"
+  }, selectOptions !== undefined && React__default.createElement("div", {
+    className: styles$1["header__select"] + " mx-3"
+  }, React__default.createElement(CustomSelect, {
+    options: selectOptions,
+    onChange: handleChangeOption,
+    isClearable: true
+  })), React__default.createElement("div", {
+    className: "actions d-flex align-items-center"
+  })));
+};
+
+var ChatContainer = function ChatContainer(_ref) {
+  var chatHeaderProps = _ref.chatHeaderProps,
+    chatListProps = _ref.chatListProps,
+    inputProps = _ref.inputProps,
+    onRead = _ref.onRead;
+  var onReply = chatListProps.onReply,
+    onAddExamMessage = chatListProps.onAddExamMessage;
+  var onChangeOption = chatHeaderProps.onChangeOption;
+  var inputRef = React.useRef(null);
+  var listRef = React.useRef(null);
+  var listItemRef = React.useRef(null);
+  var scrollRef = React.useRef();
+  var focusRef = React.useRef();
+  var addEventTimeout = React.useRef();
+  var handleReply = function handleReply(id, content, examId) {
+    var _inputRef$current;
+    (_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 _inputRef$current2;
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+    onAddExamMessage(examId, examTitle);
+  };
+  var handleChangeExamOption = function handleChangeExamOption(val) {
+    var _inputRef$current3;
+    if (!!(val !== null && val !== void 0 && val.value)) (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
+    onChangeOption === null || onChangeOption === void 0 ? void 0 : onChangeOption(val);
+  };
+  var handleScroll = function handleScroll() {
+    if (scrollRef.current) clearTimeout(scrollRef.current);
+    scrollRef.current = setTimeout(function () {
+      onRead === null || onRead === void 0 ? void 0 : onRead();
+    }, 800);
+  };
+  var handleFocus = function handleFocus() {
+    if (focusRef.current) clearTimeout(focusRef.current);
+    focusRef.current = setTimeout(function () {
+      onRead === null || onRead === void 0 ? void 0 : onRead();
+    }, 800);
+  };
+  React.useEffect(function () {
+    var _listRef$current, _listItemRef$current, _listItemRef$current$;
+    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);
+    return function () {
+      var _listRef$current3;
+      (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.removeEventListener("scroll", handleScroll);
+      scrollRef.current && clearTimeout(scrollRef.current);
+      addEventTimeout.current && clearTimeout(addEventTimeout.current);
+    };
+  }, [listItemRef.current, JSON.stringify(chatListProps.messages)]);
+  React.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);
+    };
+  }, []);
+  return React__default.createElement("div", {
+    className: "d-flex flex-column w-100 h-100 border border-1 border-light rounded-3 shadow-sm"
+  }, React__default.createElement("div", null, React__default.createElement(ChatHeader, Object.assign({}, chatHeaderProps, {
+    onChangeOption: handleChangeExamOption
+  }))), React__default.createElement("div", {
+    ref: listRef,
+    className: "flex-grow-1 " + styles$1["body"]
+  }, React__default.createElement(ChatList, Object.assign({}, chatListProps, {
+    listItemRef: listItemRef,
+    onReply: handleReply,
+    onAddExamMessage: handleAddExamMessage
+  }))), React__default.createElement("div", null, React__default.createElement(InputChat, Object.assign({}, inputProps, {
+    inputRef: inputRef
+  }))), React__default.createElement(reactToastify.ToastContainer, null));
+};
+
+var CONVERSATION_URL = BASE_URL + "/api/conversation";
+var getListConversation = function getListConversation(query) {
+  return api.get("" + CONVERSATION_URL, {
+    params: query
+  });
+};
+var createConversation = function createConversation(studentId) {
+  return api.post("" + CONVERSATION_URL, {
+    targetUserId: "" + studentId
+  });
+};
+var apiAddMessage = function apiAddMessage(conversationId, message) {
+  return api.post(CONVERSATION_URL + "/" + conversationId + "/messages", message);
+};
+var getMessagesByConversation = function getMessagesByConversation(conversationId, filter) {
+  return api.get(CONVERSATION_URL + "/" + conversationId + "/messages", {
+    params: filter
+  });
+};
+var apiMarkReadMessage = function apiMarkReadMessage(conversationId, messageId) {
+  return api.put(CONVERSATION_URL + "/" + conversationId + "/messages/" + messageId + "/mark-read");
+};
+var apiGetConversationByUserId = function apiGetConversationByUserId(userId) {
+  return api.get(CONVERSATION_URL + "/users/" + userId);
+};
+
+var ExamStatus;
+(function (ExamStatus) {
+  ExamStatus["Default"] = "Default";
+  ExamStatus["Pending"] = "Pending";
+  ExamStatus["Inprogress"] = "Inprogress";
+  ExamStatus["Completed"] = "Completed";
+})(ExamStatus || (ExamStatus = {}));
+var CONVERSATION_DEFAULT_FILTER = {
+  currentPage: 1,
+  pageSize: -1,
+  textSearch: ""
+};
+var MESSAGE_DEFAULT_FILTER = {
+  currentPage: 1,
+  pageSize: -1,
+  textSearch: "",
+  sortColumnDirection: OrderBy.DESC,
+  sortColumnName: MessageSortBy.CreatedAt
+};
+
+var EXAM_URL = BASE_URL + "/api/exam";
+var getListExamApi = function getListExamApi(query) {
+  return api.get(EXAM_URL + "/getList", {
+    params: query
+  });
+};
+
+var useExamList = function useExamList(isStudent) {
+  if (isStudent === void 0) {
+    isStudent = true;
+  }
+  var _useState = React.useState(),
+    exams = _useState[0],
+    setExams = _useState[1];
+  var getListExam = function getListExam(userId) {
+    try {
+      setExams([]);
+      var _temp = _catch(function () {
+        return Promise.resolve(getListExamApi({
+          currentPage: 1,
+          pageSize: -1,
+          sortColumnDirection: "DESC",
+          sortColumnName: "CreatedAt",
+          statuses: [ExamStatus.Completed],
+          studentId: !isStudent ? userId : undefined,
+          teacherId: isStudent ? userId : undefined
+        })).then(function (res) {
+          var _res$data;
+          var data = ((_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.items) || [];
+          setExams(data);
+        });
+      }, function (error) {
+        console.log({
+          error: error
+        });
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return {
+    getListExam: getListExam,
+    exams: exams
+  };
+};
+
+var useMessageList = function useMessageList(userId, getListExamOptions) {
+  var _useState = React.useState([]),
+    messages = _useState[0],
+    setMessages = _useState[1];
+  var _useState2 = React.useState(MESSAGE_DEFAULT_FILTER),
+    messageFilter = _useState2[0],
+    setMessageFilter = _useState2[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));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleMarkReadMessage = function handleMarkReadMessage(conversationId, messageId) {
+    try {
+      var _temp2 = _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);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var resetMessages = function resetMessages() {
+    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,
+      currentPage: 1
+    }));
+  };
+  return {
+    messageFilter: messageFilter,
+    messages: messages,
+    getMessageList: getMessageList,
+    setMessages: setMessages,
+    resetMessages: resetMessages,
+    handleChangeMessageFilter: handleChangeMessageFilter,
+    handleChangeExamId: handleChangeExamId,
+    handleMarkReadMessage: handleMarkReadMessage
+  };
+};
+
+var useChatContainer = function useChatContainer(props) {
+  var _selectedConversation, _selectedConversation2, _selectedConversation3, _selectedConversation4, _selectedConversation5, _selectedConversation6;
+  var conversation = props.conversation,
+    userId = props.userId,
+    examId = props.examId,
+    onUpdateLastMessage = props.onUpdateLastMessage,
+    onCreateConversationSuccess = props.onCreateConversationSuccess,
+    onGetMessagesSuccess = props.onGetMessagesSuccess;
+  var pusher = React.useRef();
+  var channel = React.useRef();
+  var channelName = React.useRef();
+  var loadingRef = React.useRef(false);
+  var dispatch = reactRedux.useDispatch();
+  var roles = reactRedux.useSelector(function (state) {
+    var _state$common, _state$common$user;
+    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : (_state$common$user = _state$common.user) === null || _state$common$user === void 0 ? void 0 : _state$common$user.roles;
+  }) || [];
+  var isStudent = roles.includes("Student");
+  var _useState = React.useState(),
+    selectedConversation = _useState[0],
+    setSelectedConversation = _useState[1];
+  var _useState2 = React.useState(),
+    message = _useState2[0],
+    setMessage = _useState2[1];
+  var _useState3 = React.useState(MessageStatus.Default),
+    messageStatus = _useState3[0],
+    setMessageStatus = _useState3[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),
+    messages = _useMessageList.messages,
+    messageFilter = _useMessageList.messageFilter,
+    getMessageList = _useMessageList.getMessageList,
+    resetMessages = _useMessageList.resetMessages,
+    handleChangeExamId = _useMessageList.handleChangeExamId,
+    setMessages = _useMessageList.setMessages;
+  var handleAddMessage = function handleAddMessage() {
+    try {
+      var _message$content, _message$content$trim;
+      var _temp2 = function _temp2() {
+        loadingRef.current = false;
+      };
+      if (loadingRef.current) return Promise.resolve();
+      if (messages.some(function (i) {
+        return i.id === 0;
+      })) 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();
+      setMessages(function (state) {
+        return [].concat(state, [{
+          id: 0,
+          isStudent: isStudent,
+          content: message.content,
+          examId: message.examId,
+          parentId: message.parentId,
+          parentContent: message.parentContent,
+          exam: message.examId ? {
+            id: message.examId,
+            startTime: moment().format("YYYY-MM-DDTHH:mm:ss"),
+            title: message.examTitle || "",
+            code: "temp",
+            createdAt: moment().format("YYYY-MM-DDTHH:mm:ss")
+          } : undefined,
+          isRead: false,
+          createdAt: moment().format("YYYY-MM-DDTHH:mm:ss")
+        }]);
+      });
+      setMessage(function (state) {
+        if (!state) return undefined;
+        return _extends({}, state, {
+          content: "",
+          parentId: undefined,
+          parentContent: "",
+          examId: messageFilter.examId,
+          examTitle: messageFilter.examId ? message.examTitle : ""
+        });
+      });
+      setMessageStatus(MessageStatus.Sending);
+      var _temp = _catch(function () {
+        return Promise.resolve(apiAddMessage(selectedConversation.id, _extends({}, message, {
+          examId: !!userId ? examId : message.examId
+        }))).then(function () {});
+      }, function (error) {
+        var _error$response;
+        console.log({
+          error: error
+        });
+        setMessageStatus(MessageStatus.SentError);
+        setMessages(function (state) {
+          return [].concat(state.filter(function (i) {
+            return i.id !== 0;
+          }));
+        });
+        reactToastify.toast.error((_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.data);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleAddExamMessage = function handleAddExamMessage(examId, title) {
+    setMessage(!!message ? _extends({}, message, {
+      examId: examId,
+      examTitle: title,
+      parentId: undefined,
+      parentContent: ""
+    }) : {
+      examId: examId,
+      content: "",
+      examTitle: title,
+      parentId: undefined,
+      parentContent: ""
+    });
+  };
+  var handleReplyMessage = function handleReplyMessage(parentId, content, examId) {
+    setMessage({
+      content: "",
+      examId: examId,
+      parentId: parentId,
+      parentContent: content,
+      examTitle: message === null || message === void 0 ? void 0 : message.examTitle
+    });
+  };
+  var handleClearReply = function handleClearReply() {
+    message && setMessage(_extends({}, message, {
+      parentId: undefined,
+      examId: messageFilter.examId ? messageFilter.examId : undefined,
+      parentContent: "",
+      examTitle: messageFilter.examId ? message.examTitle : ""
+    }));
+  };
+  var handleChangeInput = function handleChangeInput(text) {
+    setMessage(_extends({}, message, {
+      content: text
+    }));
+  };
+  var handleFilterExam = function handleFilterExam(val) {
+    var _val$label, _val$label$split;
+    var examTitle = val === null || val === void 0 ? void 0 : (_val$label = val.label) === null || _val$label === void 0 ? void 0 : (_val$label$split = _val$label.split(" ")) === null || _val$label$split === void 0 ? void 0 : _val$label$split.slice(0, -1).join(" ");
+    setMessage({
+      examId: val === null || val === void 0 ? void 0 : val.value,
+      content: "",
+      examTitle: examTitle,
+      parentId: undefined,
+      parentContent: ""
+    });
+    handleChangeExamId(val);
+  };
+  var messageList = React.useMemo(function () {
+    if (!selectedConversation) return [];
+    var examCode = undefined;
+    var results = messages.map(function (i, index) {
+      var _i$exam, _i$exam4, _i$exam5, _i$exam6, _i$exam7, _i$exam8, _i$exam9, _i$exam10, _i$exam11;
+      var isFirst = index === 0;
+      var isLast = index === messages.length - 1;
+      if (index > 0 && (messages[index - 1].isStudent !== i.isStudent && !i.isSystemLog || i.isSystemLog || messages[index - 1].examId !== i.examId)) isFirst = true;
+      if (index < messages.length - 1 && (messages[index + 1].isStudent !== i.isStudent && i.examId !== messages[index + 1].examId || i.examId !== messages[index + 1].examId || messages[index + 1].isSystemLog)) isLast = true;
+      var name = isStudent ? "You" : selectedConversation.student.displayName;
+      var content = i === null || i === void 0 ? void 0 : i.content;
+      var showExamHeader = false;
+      if (examCode != ((_i$exam = i.exam) === null || _i$exam === void 0 ? void 0 : _i$exam.code) && !messageFilter.examId && !userId) {
+        var _i$exam2, _i$exam3;
+        if ((_i$exam2 = i.exam) !== null && _i$exam2 !== void 0 && _i$exam2.code) showExamHeader = true;
+        examCode = (_i$exam3 = i.exam) === null || _i$exam3 === void 0 ? void 0 : _i$exam3.code;
+      }
+      switch (i.type) {
+        case MessageSourceType.Exam:
+          switch (i.action) {
+            case MessageAction.Took:
+              content = name + " took the exam " + ((_i$exam4 = i.exam) === null || _i$exam4 === void 0 ? void 0 : _i$exam4.title);
+              break;
+          }
+          break;
+      }
+      return {
+        id: i.id,
+        isMe: isStudent === i.isStudent,
+        avatar: isStudent ? selectedConversation.teacher.avatar : selectedConversation.student.avatar,
+        name: selectedConversation.student.displayName,
+        isRead: i.isRead,
+        createdAt: i.createdAt,
+        content: content,
+        isFirst: isFirst,
+        isLast: isLast,
+        isSystemLog: i.isSystemLog,
+        examCode: !messageFilter.examId && !userId ? (_i$exam5 = i.exam) === null || _i$exam5 === void 0 ? void 0 : _i$exam5.code : undefined,
+        examId: (_i$exam6 = i.exam) === null || _i$exam6 === void 0 ? void 0 : _i$exam6.id,
+        examTitle: (_i$exam7 = i.exam) === null || _i$exam7 === void 0 ? void 0 : _i$exam7.title,
+        type: (_i$exam8 = i.exam) !== null && _i$exam8 !== void 0 && _i$exam8.code ? exports.ChatItemType.Exam : undefined,
+        showExamHeader: showExamHeader,
+        actionLink: ((_i$exam9 = i.exam) === null || _i$exam9 === void 0 ? void 0 : _i$exam9.code) && (isStudent ? "/student/check/live-result?examCode=" + ((_i$exam10 = i.exam) === null || _i$exam10 === void 0 ? void 0 : _i$exam10.code) : "/teacher/exam-status/main?examCode=" + ((_i$exam11 = i.exam) === null || _i$exam11 === void 0 ? void 0 : _i$exam11.code)),
+        parentId: i.parentId,
+        parentContent: i.parentContent,
+        status: i.id ? MessageStatus.Default : messageStatus
+      };
+    });
+    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) {
+      setMessages(function (state) {
+        if (state.some(function (i) {
+          return i.id === 0;
+        })) return [].concat(state.filter(function (i) {
+          return i.id !== 0;
+        }), [data]);else return [].concat(state, [data]);
+      });
+    }
+    onUpdateLastMessage === null || onUpdateLastMessage === void 0 ? void 0 : onUpdateLastMessage(data);
+  };
+  var handleMessageMarkRead = function handleMessageMarkRead(data) {
+    setMessages(function (state) {
+      return [].concat(state.map(function (i) {
+        return _extends({}, i, {
+          isRead: data.includes(i.id || 0) ? true : i.isRead
+        });
+      }));
+    });
+  };
+  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);
+    (_pusher$current2 = pusher.current) === null || _pusher$current2 === void 0 ? void 0 : _pusher$current2.unbind("message-read-event", handleMessageMarkRead);
+    channelName.current && pusher.current && pusher.current.unsubscribe(channelName.current);
+  };
+  React.useEffect(function () {
+    if (PUSHER_CONFIG.cluster && PUSHER_CONFIG.key && !!(selectedConversation !== null && selectedConversation !== void 0 && selectedConversation.id)) {
+      var token = getAccessToken();
+      pusher.current = new Pusher(PUSHER_CONFIG.key, {
+        cluster: PUSHER_CONFIG.cluster,
+        authEndpoint: BASE_URL + "/api/auth/pusher",
+        auth: {
+          params: {},
+          headers: {
+            Authorization: "Bearer " + token
+          }
+        }
+      });
+      channelName.current = "presence-conversation-channel-" + (selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id);
+      channel.current = pusher.current.subscribe(channelName.current);
+      pusher.current.bind("new-message-event", handleNewMessageSent);
+      pusher.current.bind("message-read-event", handleMessageMarkRead);
+    }
+    return cleanupPusher;
+  }, [selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id, messageFilter.examId]);
+  React.useEffect(function () {
+    var getConversation = function getConversation() {
+      try {
+        var _temp6 = function _temp6() {
+          dispatch(setLoading(false));
+        };
+        if ((conversation === null || conversation === void 0 ? void 0 : conversation.id) !== undefined) {
+          setSelectedConversation(conversation);
+          return Promise.resolve();
+        }
+        if (!userId) return Promise.resolve();
+        dispatch(setLoading(true));
+        var _temp5 = _catch(function () {
+          return Promise.resolve(apiGetConversationByUserId(userId)).then(function (res) {
+            function _temp4() {
+              setSelectedConversation(res.data.data);
+            }
+            var _temp3 = function () {
+              if (!res.data.data) {
+                return Promise.resolve(createConversation(userId)).then(function (_createConversation) {
+                  res = _createConversation;
+                });
+              }
+            }();
+            return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+          });
+        }, function (error) {
+          console.log({
+            error: error
+          });
+        });
+        return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+    getConversation();
+  }, [conversation === null || conversation === void 0 ? void 0 : conversation.id, userId]);
+  var handleMarkRead = function handleMarkRead() {
+    try {
+      if (!(selectedConversation !== null && selectedConversation !== void 0 && selectedConversation.id)) return Promise.resolve();
+      var _temp7 = _catch(function () {
+        return Promise.resolve(apiMarkReadMessage(selectedConversation.id, -1)).then(function () {});
+      }, function (error) {
+        console.log({
+          error: error
+        });
+      });
+      return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  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 () {
+        var _temp10 = function () {
+          if (selectedConversation.id === 0) {
+            var _userId = isStudent ? selectedConversation.teacher.id : selectedConversation.student.id;
+            return Promise.resolve(createConversation(_userId)).then(function (res) {
+              var _res$data$data;
+              return Promise.resolve(onCreateConversationSuccess === null || onCreateConversationSuccess === void 0 ? void 0 : onCreateConversationSuccess((_res$data$data = res.data.data) === null || _res$data$data === void 0 ? void 0 : _res$data$data.id)).then(function () {});
+            });
+          } else {
+            var _temp9 = function _temp9() {
+              return Promise.resolve(getMessageList(selectedConversation.id, examId)).then(function () {
+                onGetMessagesSuccess === null || onGetMessagesSuccess === void 0 ? void 0 : onGetMessagesSuccess();
+              });
+            };
+            var _temp8 = function () {
+              if (messageFilter.currentPage === 1) return Promise.resolve(handleMarkRead()).then(function () {});
+            }();
+            return _temp8 && _temp8.then ? _temp8.then(_temp9) : _temp9(_temp8);
+          }
+        }();
+        if (_temp10 && _temp10.then) return _temp10.then(function () {});
+      }, function () {
+        reactToastify.toast.error("Fail to fetch data!");
+      });
+      return Promise.resolve(_temp11 && _temp11.then ? _temp11.then(_temp12) : _temp12(_temp11));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  React.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;
+  return {
+    chatHeaderProps: {
+      name: userName || "",
+      avatar: userAvatar || "",
+      options: exams,
+      onChangeOption: handleFilterExam
+    },
+    chatListProps: {
+      messages: messageList,
+      onAddExamMessage: handleAddExamMessage,
+      onReply: handleReplyMessage,
+      onReTrySendMessage: handleAddMessage
+    },
+    inputProps: {
+      text: (message === null || message === void 0 ? void 0 : message.content) || "",
+      parentText: message === null || message === void 0 ? void 0 : message.parentContent,
+      examTitle: message === null || message === void 0 ? void 0 : message.examTitle,
+      onChangeInput: handleChangeInput,
+      onSubmit: handleAddMessage,
+      onClearReply: !messageFilter.examId || message !== null && message !== void 0 && message.parentContent ? handleClearReply : undefined
+    },
+    exams: exams,
+    messageList: messageList,
+    selectedConversation: selectedConversation,
+    messageStatus: messageStatus,
+    messageFilter: messageFilter,
+    getMessageList: getMessageList,
+    handleFilterExam: handleFilterExam,
+    setMessage: setMessage,
+    resetMessages: resetMessages,
+    getMessageConversation: getMessageConversation,
+    handleMarkRead: handleMarkRead
+  };
+};
+
+var STUDENT_STATUS_URL = BASE_URL + "/api/user";
+var getStudentConversationListApi = function getStudentConversationListApi(query) {
+  return api.get(STUDENT_STATUS_URL + "/GetStudentConversations", {
+    params: query
+  });
+};
+
+var isFirstLoad = true;
+var useConversationList = function useConversationList() {
+  var dispatch = reactRedux.useDispatch();
+  var user = reactRedux.useSelector(function (state) {
+    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 isStudent = roles.includes("Student");
+  var _useState = React.useState(),
+    selectedConversation = _useState[0],
+    setSelectedConversation = _useState[1];
+  var _useState2 = React.useState([]),
+    conversations = _useState2[0],
+    setConversations = _useState2[1];
+  var _useState3 = React.useState(CONVERSATION_DEFAULT_FILTER),
+    conversationFilter = _useState3[0],
+    setConversationFilter = _useState3[1];
+  var handleChangeSelectedConversation = function handleChangeSelectedConversation(val) {
+    setSelectedConversation(val);
+  };
+  var handleNewMessageConversation = function handleNewMessageConversation(val) {
+    setConversations(function (state) {
+      var index = state.findIndex(function (i) {
+        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]);
+    });
+    setSelectedConversation(function (state) {
+      if (!state) return val;
+      return state;
+    });
+  };
+  var handleMessageReadConversation = function handleMessageReadConversation(id, totalUnread) {
+    setConversations(function (state) {
+      var index = state.findIndex(function (i) {
+        return i.id === id;
+      });
+      if (index === -1 || totalUnread === state[index].totalUnReadMessage) return state;
+      return [].concat(state.slice(0, index), [_extends({}, state[index], {
+        totalUnReadMessage: totalUnread
+      })], state.slice(index + 1));
+    });
+    setSelectedConversation(function (state) {
+      if (!!state) return _extends({}, state, {
+        totalUnReadMessage: totalUnread
+      });
+      return state;
+    });
+  };
+  var handleChangeTextSearch = function handleChangeTextSearch(e) {
+    setConversationFilter(function (state) {
+      return _extends({}, state, {
+        textSearch: e.target.value
+      });
+    });
+  };
+  var handleChangeFilter = function handleChangeFilter(filter) {
+    setConversationFilter(function (state) {
+      return _extends({}, state, filter);
+    });
+  };
+  var formatConversationLastMessageContent = function formatConversationLastMessageContent(conversation) {
+    var _conversation$lastMes;
+    if (!(conversation !== null && conversation !== void 0 && conversation.lastMessage)) return "";
+    var content = conversation.lastMessage.content;
+    switch (conversation.lastMessage.type) {
+      case MessageSourceType.Exam:
+        switch (conversation.lastMessage.action) {
+          case MessageAction.Took:
+            content = (isStudent ? "You" : conversation.student.displayName) + " took the exam " + ((_conversation$lastMes = conversation.lastMessage.exam) === null || _conversation$lastMes === void 0 ? void 0 : _conversation$lastMes.title);
+            break;
+        }
+        break;
+    }
+    return content;
+  };
+  var getConversationList = function getConversationList() {
+    try {
+      var _temp2 = function _temp2() {
+        isFirstLoad && dispatch(setLoading(false));
+        if (isFirstLoad) isFirstLoad = false;
+      };
+      if (!roles.length) return Promise.resolve();
+      isFirstLoad && dispatch(setLoading(true));
+      var _temp = _catch(function () {
+        var apiGetConversations = isStudent ? getListConversation : getStudentConversationListApi;
+        return Promise.resolve(apiGetConversations(conversationFilter)).then(function (res) {
+          var _res$data$items;
+          setConversations(res.data.items || []);
+          !selectedConversation && setSelectedConversation((_res$data$items = res.data.items) === null || _res$data$items === void 0 ? void 0 : _res$data$items[0]);
+        });
+      }, function () {
+        setSelectedConversation(undefined);
+        dispatch(setAlert({
+          type: "danger",
+          message: "Fail to fetch data!"
+        }));
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleUpdateTotalUnreadMessage = function handleUpdateTotalUnreadMessage() {
+    if (!(selectedConversation !== null && selectedConversation !== void 0 && selectedConversation.id)) return;
+    setConversations(function (state) {
+      var updateIndex = state.findIndex(function (i) {
+        return i.id === selectedConversation.id;
+      });
+      if (updateIndex < 0) return state;
+      return [].concat(state.slice(0, updateIndex), [_extends({}, state[updateIndex], {
+        totalUnReadMessage: 0
+      })], state.slice(updateIndex + 1));
+    });
+  };
+  var handleUpdateLastMessage = function handleUpdateLastMessage(lastMessage) {
+    setConversations(function (state) {
+      var updateIndex = state.findIndex(function (i) {
+        return i.id === lastMessage.conversationId;
+      });
+      if (updateIndex < 0) return state;
+      return [].concat(state.slice(0, updateIndex), [_extends({}, state[updateIndex], {
+        lastMessage: lastMessage
+      })], state.slice(updateIndex + 1));
+    });
+  };
+  var handleCreateConversationSuccess = function handleCreateConversationSuccess(id) {
+    try {
+      if (!selectedConversation) return Promise.resolve();
+      setSelectedConversation(_extends({}, selectedConversation, {
+        id: id
+      }));
+      var index = conversations.findIndex(function (i) {
+        return i.student.id === (selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.student.id) && i.teacher.id === (selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.teacher.id);
+      });
+      if (index > -1) {
+        setConversations([].concat(conversations.slice(0, index), [_extends({}, selectedConversation, {
+          id: id
+        })], conversations.slice(index + 1)));
+      }
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  React.useEffect(function () {
+    getConversationList();
+  }, [JSON.stringify(conversationFilter), roles.length]);
+  React.useEffect(function () {
+    window.document.title = "Q&A";
+  }, []);
+  return {
+    isStudent: isStudent,
+    conversationFilter: conversationFilter,
+    selectedConversation: selectedConversation,
+    conversations: conversations,
+    handleUpdateTotalUnreadMessage: handleUpdateTotalUnreadMessage,
+    handleChangeFilter: handleChangeFilter,
+    handleChangeSelectedConversation: handleChangeSelectedConversation,
+    handleChangeTextSearch: handleChangeTextSearch,
+    setSelectedConversation: setSelectedConversation,
+    handleUpdateLastMessage: handleUpdateLastMessage,
+    getConversationList: getConversationList,
+    formatConversationLastMessageContent: formatConversationLastMessageContent,
+    handleNewMessageConversation: handleNewMessageConversation,
+    handleCreateConversationSuccess: handleCreateConversationSuccess,
+    handleMessageReadConversation: handleMessageReadConversation
+  };
+};
+
+var usePusherConversation = function usePusherConversation(onNewMessageConversation, onReadMessageConversation) {
+  var pusher = React.useRef();
+  var channel = React.useRef();
+  var channelName = React.useRef();
+  var userId = reactRedux.useSelector(function (state) {
+    var _state$common, _state$common$user;
+    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : (_state$common$user = _state$common.user) === null || _state$common$user === void 0 ? void 0 : _state$common$user.id;
+  });
+  var handleNewMessageConversationCreated = function handleNewMessageConversationCreated(data) {
+    onNewMessageConversation === null || onNewMessageConversation === void 0 ? void 0 : onNewMessageConversation(data);
+  };
+  var handleReadMessageConversation = function handleReadMessageConversation(data) {
+    onReadMessageConversation === null || onReadMessageConversation === void 0 ? void 0 : onReadMessageConversation(data.id, data.totalUnReadMessage);
+  };
+  var cleanupPusher = function cleanupPusher() {
+    channel.current && channel.current.unbind("message-conversation-event", handleNewMessageConversationCreated);
+    channel.current && channel.current.unbind("message-conversation-read-event", handleReadMessageConversation);
+    channelName.current && pusher.current && pusher.current.unsubscribe(channelName.current);
+  };
+  React.useEffect(function () {
+    if (PUSHER_CONFIG.cluster && PUSHER_CONFIG.key && !!userId) {
+      var token = getAccessToken$1();
+      pusher.current = new Pusher(PUSHER_CONFIG.key, {
+        cluster: PUSHER_CONFIG.cluster,
+        authEndpoint: BASE_URL + "/api/auth/pusher",
+        auth: {
+          params: {},
+          headers: {
+            Authorization: "Bearer " + token
+          }
+        }
+      });
+      channelName.current = "presence-conversation-channel-userId-" + userId;
+      channel.current = pusher.current.subscribe(channelName.current);
+      channel.current.bind("message-conversation-event", handleNewMessageConversationCreated);
+      channel.current.bind("message-conversation-read-event", handleReadMessageConversation);
+    }
+    return cleanupPusher;
+  }, [userId]);
+  return {};
+};
+
 var historyCore = history.createBrowserHistory();
 
 Object.defineProperty(exports, 'I18nextProvider', {
@@ -1355,22 +2573,26 @@ Object.defineProperty(exports, 'useTranslation', {
 });
 exports.ACCESS_TOKEN = ACCESS_TOKEN;
 exports.BASE_URL = BASE_URL;
+exports.ChatContainer = ChatContainer;
 exports.CommonAlert = CommonAlert;
 exports.CommonDialog = CommonDialog;
 exports.ConfirmDialog = ConfirmDialog;
 exports.CustomPagination = CustomPagination;
+exports.CustomSelect = CustomSelect;
 exports.DATE_MIN_VALUE = DATE_MIN_VALUE;
 exports.EXAM_CHANNEL = EXAM_CHANNEL;
+exports.EXAM_STUDENT_CHANNEL = EXAM_STUDENT_CHANNEL;
 exports.LayoutContext = LayoutContext;
 exports.Loading = Loading;
 exports.Login = Login;
 exports.NotFound = NotFound;
 exports.PUSHER_CONFIG = PUSHER_CONFIG;
 exports.TheLanguageDropdown = TheLanguageDropdown;
-exports.api = api$1;
+exports.api = api;
 exports.canAccessRoute = canAccess;
 exports.diffFromNow = diffFromNow;
 exports.formatTime = formatTime;
+exports.getAccessToken = getAccessToken$1;
 exports.historyCore = historyCore;
 exports.i18n = i18n;
 exports.minutesToTimeSpan = minutesToTimeSpan;
@@ -1380,6 +2602,9 @@ exports.setLoading = setLoading;
 exports.setUser = setUser;
 exports.store = store;
 exports.toISOString = toISOString;
+exports.useChatContainer = useChatContainer;
+exports.useConversationList = useConversationList;
 exports.useGoogleSignOut = useGoogleSignOut;
+exports.usePusherConversation = usePusherConversation;
 exports.utcToLocalTime = utcToLocalTime;
 //# sourceMappingURL=index.js.map