touchstudy-core 0.1.14 → 0.1.16

package/dist/index.modern.js

@@ -3,26 +3,26 @@ 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, Input, ModalFooter, Button, Alert, Pagination, PaginationItem, PaginationLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Collapse, InputGroup, Spinner, FormGroup, Label } from 'reactstrap';
+import { Row, Col, Form, Modal, ModalHeader, ModalBody, Input, ModalFooter, Button, Alert, Pagination, PaginationItem, PaginationLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, FormGroup, Label } from 'reactstrap';
 import { Formik } from 'formik';
 import { object, string, boolean } from 'yup';
 import GoogleLogin, { useGoogleLogout } from '@leecheuk/react-google-login';
-import axios from 'axios';
 import { useDispatch, useSelector } from 'react-redux';
+import axios from 'axios';
+import { useTranslation, initReactI18next } from 'react-i18next';
+export { I18nextProvider, useTranslation } from 'react-i18next';
 import { gapi } from 'gapi-script';
 import i18n from 'i18next';
-import { initReactI18next, useTranslation } from 'react-i18next';
-export { I18nextProvider, useTranslation } from 'react-i18next';
-import { IoChevronDown } from 'react-icons/io5';
+import { IoChevronDown, IoCloseOutline } from 'react-icons/io5';
 import 'moment/locale/ko.js';
 import 'moment/locale/en-au.js';
-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 Pusher from 'pusher-js';
+import { GoArrowSwitch } from 'react-icons/go';
 import { toast } from 'react-toastify';
 export { ToastContainer, toast } from 'react-toastify';
+import Select, { components } from 'react-select';
+import { FaCaretDown, FaImage, FaPlusCircle } from 'react-icons/fa';
+import { Typography, Grid, Box, Button as Button$1, CircularProgress } from '@mui/material';
+import Pusher from 'pusher-js';
 import CreatableSelect from 'react-select/creatable';
 import { PiDotsNineLight } from 'react-icons/pi';
 import _ from 'lodash';
@@ -32,20 +32,23 @@ var setAlert = createAction("common/setAlert");
 var setUser = createAction("common/setUser");
 var setLanguage = createAction("common/setLanguage");
 var reset = createAction("common/reset");
-
-var isLocalHost = Boolean(window.location.hostname === "localhost" || window.location.hostname === "[::1]" || window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));
-
-var GOOGLE_CLIENT_ID = "64118819726-0qlur4qjrs9jbuu6rnoa0u91g680lmpg.apps.googleusercontent.com";
+var setReFetchUserAcademies = createAction("common/setReFetchUserAcademies");
+
+var GOOGLE_RECAPTCHA_KEY = process.env.REACT_APP_GOOGLE_RECAPTCHA_KEY || "";
+var GOOGLE_CLIENT_ID = process.env.REACT_APP_GOOGLE_CLIENT_ID || "";
+var GOOGLE_RECAPTCHA_ID = process.env.REACT_APP_GOOGLE_RECAPTCHA_ID || "";
+var GOOGLE_RECAPTCHA_SECRET = process.env.REACT_APP_GOOGLE_RECAPTCHA_SECRET || "";
+var BASE_URL = process.env.REACT_APP_BASE_URL || "";
+var SUPER_ADMIN_BASE_URL = process.env.REACT_APP_SUPER_ADMIN_BASE_URL || "";
+var PUSHER_CONFIG = {
+  cluster: process.env.REACT_APP_PUSHER_CONFIG_CLUSTER || "",
+  key: process.env.REACT_APP_PUSHER_CONFIG_KEY || ""
+};
 var ACCESS_TOKEN = "ACCESS_TOKEN";
+var ACADEMY_DOMAIN = "ACADEMY_DOMAIN";
+var AcademyHeaders = "Academy-Headers";
 var DATE_MIN_VALUE = "0001-01-01T00:00:00+00:00";
 var DATE_TIME_MIN_VALUE = "0001-01-01T00:00:00";
-var BASE_URL = function () {
-  return isLocalHost ? "https://localhost:7045" : "https://api.studypeak.io";
-}();
-var PUSHER_CONFIG = {
-  cluster: "ap1",
-  key: "9018c77328885a14150b"
-};
 var EXAM_CHANNEL = "presence-exam-channel";
 var EXAM_STUDENT_CHANNEL = "EXAM-CHANNEL-{examCode}-STUDENT-{studentId}";
 var getAccessToken = function getAccessToken() {
@@ -55,6 +58,13 @@ var getAccessToken = function getAccessToken() {
     return null;
   }
 };
+var getAcademyDomain = function getAcademyDomain() {
+  try {
+    return localStorage.getItem(ACADEMY_DOMAIN);
+  } catch (err) {
+    return null;
+  }
+};
 var encodeParams = function encodeParams(params) {
   return Object.keys(params).filter(function (key) {
     return params[key] || params[key] === 0 || params[key] === false;
@@ -77,6 +87,47 @@ var utcToLocalTime = (function (time, FORMAT) {
   }
 });
 
+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 stylesGlobal = {"btn-login-google":"_2HqmH","block-login":"_wWIyO","box-login":"_38Lo1","dropdown-menu":"_1krbH","header-avatar":"_RQaHE","dropdown-menu-flag":"_XK8oS","dropdown-content":"_3ys4W","dropdown-change":"_ToOW_","item-address":"_3sQlR","item-logout":"_3bqSM","title-address":"_1jgSI","img-avatar":"_35Ttz","item-contact":"_1wc7o","content-text":"_3S4f2","dropdown-content-language":"_3ajui","dropdown-item-language":"_3Y_y4","dropdown-item-language-active":"_CzNMi","dropdown-academy":"_3CMVp","image-academy":"_2ibYC","academy-btn":"_1JMRU","switch-icon":"_N4FNf","dropdown-content-academy":"_31Dr0","dropdown-academy-item":"_3bjcz","noGutters":"_31ZQk","custom-col-2":"_3yXyK","custom-col-3":"_1RsJQ","custom-col-5":"_L42CP","custom-col-10":"_2u6eL","custom-row":"_8x7OP","custom-col":"_1JmTh","custom-col-4":"_3HO1e","custom-col-8":"_Oy31M","custom-col-12":"_3aUKo","custom-container":"_39LRs","form-label":"__Ut-u","form-control":"_2k4dX","btn-outline-primary":"_2PWdX"};
+
+var AuthenticationMessage;
+(function (AuthenticationMessage) {
+  AuthenticationMessage["NotAllowedToRegister"] = "NotAllowedToRegister";
+  AuthenticationMessage["InvalidGoogleToken"] = "InvalidGoogleToken";
+})(AuthenticationMessage || (AuthenticationMessage = {}));
+var Role;
+(function (Role) {
+  Role["Student"] = "Student";
+  Role["Teacher"] = "Teacher";
+  Role["Admin"] = "Admin";
+})(Role || (Role = {}));
+
 // A type of promise-like that resolves synchronously and supports only one observer
 
 const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
@@ -96,7 +147,18 @@ function _catch(body, recover) {
 	return result;
 }
 
-var styles = {"btn-login-google":"_2HqmH","block-login":"_wWIyO","box-login":"_38Lo1","dropdown-menu":"_1krbH","header-avatar":"_RQaHE","dropdown-menu-flag":"_XK8oS","dropdown-content":"_3ys4W","dropdown-change":"_ToOW_","item-address":"_3sQlR","item-logout":"_3bqSM","title-address":"_1jgSI","img-avatar":"_35Ttz","item-contact":"_1wc7o","content-text":"_3S4f2","dropdown-content-language":"_3ajui","dropdown-item-language":"_3Y_y4","dropdown-item-language-active":"_CzNMi"};
+// Asynchronously await a promise and invoke a finally continuation that always overrides the result
+function _finally(body, finalizer) {
+	try {
+		var result = body();
+	} catch (e) {
+		return finalizer();
+	}
+	if (result && result.then) {
+		return result.then(finalizer, finalizer);
+	}
+	return finalizer();
+}
 
 var api = axios.create({
   baseURL: BASE_URL,
@@ -118,10 +180,17 @@ var apiUpload = axios.create({
 [api, apiUpload].forEach(function (i) {
   return i.interceptors.request.use(function (config) {
     var token = getAccessToken();
+    var searchParams = new URLSearchParams(window.location.search);
+    var paramDomain = searchParams.get('domain');
+    var academyDomainStorage = getAcademyDomain();
+    var academyDomain = paramDomain || academyDomainStorage;
     if (token) {
       config.headers.Authorization = "Bearer " + token;
       localStorage.setItem("LAST_TIME_REQUETST", moment().utc().format("YYYY-MM-DD HH:mm:ss"));
     }
+    if (academyDomain && !config.headers[AcademyHeaders]) {
+      config.headers[AcademyHeaders] = "" + academyDomain;
+    }
     return config;
   }, function (error) {
     return Promise.reject(error);
@@ -135,33 +204,34 @@ var apiUpload = axios.create({
     console.log({
       error: error
     });
-    if (((_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) === 401) {
-      window.location.href = "/login";
-    }
-    if (((_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.status) == 403) {
+    if (((_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) === 401 || ((_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.status) == 403) {
       localStorage.removeItem(ACCESS_TOKEN);
-      localStorage.removeItem("USER_EMAIL");
       window.location.href = "/login";
     }
     return Promise.reject(error);
   });
 });
 
-var apiLoginGoogle = function apiLoginGoogle(body, role) {
-  return api.post(BASE_URL + "/api/auth/" + role + "/login", body);
+var AUTH_URL = BASE_URL + "/api/auth";
+var AUTH_SUPER_ADMIN_URL = SUPER_ADMIN_BASE_URL + "/api/auth";
+var getInfo = function getInfo() {
+  return api.get(AUTH_URL + "/info");
+};
+var getSuperAdminInfoFromWeb = function getSuperAdminInfoFromWeb() {
+  return api.get(AUTH_SUPER_ADMIN_URL + "/info");
+};
+var apiLoginGoogle = function apiLoginGoogle(body) {
+  return api.post(AUTH_URL + "/login", body);
+};
+var apiLoginGoogleSuperAdmin = function apiLoginGoogleSuperAdmin(body) {
+  return api.post(AUTH_SUPER_ADMIN_URL + "/login", body);
+};
+var apiLoginWithAccessToken = function apiLoginWithAccessToken(body, domain) {
+  var _headers;
+  return api.post(AUTH_URL + "/login/access-token", body, {
+    headers: (_headers = {}, _headers[AcademyHeaders] = domain, _headers)
+  });
 };
-
-var AuthenticationMessage;
-(function (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();
@@ -180,9 +250,15 @@ var useGoogleSignOut = function useGoogleSignOut(props) {
     }),
     signOut = _useGoogleLogout.signOut,
     loaded = _useGoogleLogout.loaded;
-  var handleSignOut = function handleSignOut() {
+  var handleSignOut = function handleSignOut(isRemoveDomainStorage) {
+    if (isRemoveDomainStorage === void 0) {
+      isRemoveDomainStorage = false;
+    }
     localStorage.removeItem("USER_INFORMATION");
     localStorage.removeItem(ACCESS_TOKEN);
+    if (isRemoveDomainStorage) {
+      localStorage.removeItem(ACADEMY_DOMAIN);
+    }
     try {
       signOut();
     } catch (error) {
@@ -199,7 +275,120 @@ var useGoogleSignOut = function useGoogleSignOut(props) {
   };
 };
 
-var ERROR_MESSAGE = "Login fail!";
+var ERROR_MESSAGE = "request_login_fail";
+var useLogin = function useLogin(onNavigate, homeAcademyUrl, homeUrl, registerUrl) {
+  var dispatch = useDispatch();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useGoogleSignOut = useGoogleSignOut({
+      onNavigate: onNavigate
+    }),
+    handleSignOut = _useGoogleSignOut.handleSignOut;
+  var searchParams = new URLSearchParams(window.location.search);
+  var paramDomain = searchParams.get('domain');
+  var handleLoginGoogle = function handleLoginGoogle(data, isLogout) {
+    if (isLogout === void 0) {
+      isLogout = true;
+    }
+    try {
+      var academyDomain = paramDomain || getAcademyDomain();
+      var isStudent = data.role === Role.Student;
+      return Promise.resolve(handleLogin(function () {
+        return new Promise(function (resolve, reject) {
+          try {
+            var _temp = _catch(function () {
+              return Promise.resolve(academyDomain ? apiLoginGoogle(data) : apiLoginGoogleSuperAdmin(data)).then(function (loginResponse) {
+                var result = loginResponse.data;
+                resolve(result);
+              });
+            }, function (error) {
+              !!academyDomain && localStorage.removeItem(ACADEMY_DOMAIN);
+              reject(error);
+            });
+            return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        });
+      }, isStudent, isLogout)).then(function () {});
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleLoginAccessToken = function handleLoginAccessToken(data, isLogout, domain) {
+    if (isLogout === void 0) {
+      isLogout = true;
+    }
+    try {
+      var isStudent = data.role === Role.Student;
+      return Promise.resolve(handleLogin(function () {
+        return new Promise(function (resolve, reject) {
+          try {
+            var _temp2 = _catch(function () {
+              return Promise.resolve(apiLoginWithAccessToken(data, domain)).then(function (loginResponse) {
+                var result = loginResponse.data;
+                resolve(result);
+              });
+            }, function (error) {
+              reject(error);
+            });
+            return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        });
+      }, isStudent, isLogout)).then(function () {});
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleLogin = function handleLogin(apiLogin, isStudent, isLogout) {
+    if (isLogout === void 0) {
+      isLogout = true;
+    }
+    try {
+      var _temp4 = function _temp4() {
+        dispatch(setLoading(false));
+      };
+      dispatch(setLoading(true));
+      var _temp3 = _catch(function () {
+        return Promise.resolve(apiLogin()).then(function (loginResponse) {
+          var isFirstLogin = loginResponse.isFirstLogin,
+            token = loginResponse.token,
+            user = loginResponse.user;
+          var isAcademy = !!(user !== null && user !== void 0 && user.academyDomain);
+          var needToRegister = isStudent && isFirstLogin && isAcademy;
+          var redirectUrl = needToRegister ? registerUrl : isAcademy ? homeAcademyUrl : homeUrl;
+          redirectLoginUser(user, token, redirectUrl);
+        });
+      }, function (error) {
+        var _error$response, _error$response$data, _error$response2, _error$response2$data, _error$response3;
+        var message = undefined;
+        message = t((error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : _error$response$data.message) || (error === null || error === void 0 ? void 0 : (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : (_error$response2$data = _error$response2.data) === null || _error$response2$data === void 0 ? void 0 : _error$response2$data.title) || (error === null || error === void 0 ? void 0 : (_error$response3 = error.response) === null || _error$response3 === void 0 ? void 0 : _error$response3.data) || ERROR_MESSAGE);
+        message && alert(message);
+        isLogout && handleSignOut();
+      });
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var redirectLoginUser = function redirectLoginUser(data, token, redirectUrl) {
+    localStorage.setItem(ACCESS_TOKEN, token);
+    !data.academyDomain && localStorage.removeItem(ACADEMY_DOMAIN);
+    !!data.academyDomain && localStorage.setItem(ACADEMY_DOMAIN, data.academyDomain);
+    dispatch(setUser(_extends({}, data)));
+    if (redirectUrl) {
+      onNavigate(redirectUrl);
+    }
+  };
+  return {
+    handleLoginGoogle: handleLoginGoogle,
+    handleLoginAccessToken: handleLoginAccessToken,
+    redirectLoginUser: redirectLoginUser
+  };
+};
+
 var schema = object({
   email: string().email("Email is invalid").required("Email is required"),
   password: string().required("Password is required"),
@@ -209,65 +398,32 @@ var BlockLogin = function BlockLogin(_ref) {
   var defaultInfo = _ref.defaultInfo,
     onNavigate = _ref.onNavigate,
     _ref$role = _ref.role,
-    role = _ref$role === void 0 ? Role.Student : _ref$role;
-  var dispatch = useDispatch();
-  var _useGoogleSignOut = useGoogleSignOut({
-      onNavigate: onNavigate
-    }),
-    handleSignOut = _useGoogleSignOut.handleSignOut;
+    role = _ref$role === void 0 ? Role.Student : _ref$role,
+    homeAcademyUrl = _ref.homeAcademyUrl,
+    homeUrl = _ref.homeUrl,
+    registerUrl = _ref.registerUrl;
+  var _useLogin = useLogin(onNavigate, homeAcademyUrl, homeUrl, registerUrl),
+    handleLoginGoogle = _useLogin.handleLoginGoogle;
   var onSuccessGoogle = function onSuccessGoogle(res) {
     try {
-      var _temp3 = function () {
-        if (!!(res !== null && res !== void 0 && res.accessToken)) {
-          var _temp2 = function _temp2() {
-            dispatch(setLoading(false));
-          };
-          var _res$profileObj = res.profileObj,
-            email = _res$profileObj.email,
-            imageUrl = _res$profileObj.imageUrl,
-            name = _res$profileObj.name;
-          var accessToken = res.tokenObj.id_token;
-          var googleId = res.googleId;
-          var infoLogin = {
-            imageUrl: imageUrl,
-            fullName: name,
-            email: email,
-            token: accessToken,
-            googleId: googleId
-          };
-          dispatch(setLoading(true));
-          var _temp = _catch(function () {
-            return Promise.resolve(apiLoginGoogle(infoLogin, role)).then(function (res1) {
-              var isFirstLogin = res1.data.isFirstLogin;
-              var tokenJWT = res1.data.token;
-              localStorage.setItem("USER_INFORMATION", JSON.stringify(infoLogin));
-              localStorage.setItem(ACCESS_TOKEN, tokenJWT);
-              if (role === Role.Student && isFirstLogin) {
-                onNavigate("/register/info");
-              } else {
-                onNavigate("/");
-              }
-            });
-          }, function (error) {
-            var _error$response, _error$response$data;
-            var message = undefined;
-            var type = error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : _error$response$data.type;
-            if (type === AuthenticationMessage.NotAllowedToRegister) {
-              alert("가입 권한이 없는 계정입니다. 관리자에게 문의하세요.");
-            } else if (type) {
-              var _error$response2, _error$response2$data;
-              message = (error === null || error === void 0 ? void 0 : (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : (_error$response2$data = _error$response2.data) === null || _error$response2$data === void 0 ? void 0 : _error$response2$data.message) || ERROR_MESSAGE;
-            } else {
-              var _error$response3;
-              message = (error === null || error === void 0 ? void 0 : (_error$response3 = error.response) === null || _error$response3 === void 0 ? void 0 : _error$response3.data) || ERROR_MESSAGE;
-            }
-            message && alert(message);
-            handleSignOut();
-          });
-          return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
-        }
-      }();
-      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+      if (!!(res !== null && res !== void 0 && res.accessToken)) {
+        var _res$profileObj = res.profileObj,
+          email = _res$profileObj.email,
+          imageUrl = _res$profileObj.imageUrl,
+          name = _res$profileObj.name;
+        var accessToken = res.tokenObj.id_token;
+        var googleId = res.googleId;
+        var infoLogin = {
+          imageUrl: imageUrl,
+          fullName: name,
+          email: email,
+          token: accessToken,
+          googleId: googleId,
+          role: role
+        };
+        handleLoginGoogle(infoLogin);
+      }
+      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
@@ -283,17 +439,17 @@ var BlockLogin = function BlockLogin(_ref) {
   }, function (formikProps) {
     var handleSubmit = formikProps.handleSubmit;
     return React.createElement(Row, {
-      className: "" + styles["box-login"]
+      className: "" + stylesGlobal["box-login"]
     }, React.createElement(Col, {
       className: "p-0 d-flex justify-content-center"
     }, React.createElement(Form, {
-      className: "" + styles["block-login"],
+      className: "" + stylesGlobal["block-login"],
       onSubmit: handleSubmit
     }, React.createElement("div", {
-      className: "" + styles["block-form"]
+      className: "" + stylesGlobal["block-form"]
     }, React.createElement("img", {
       src: "/images/logo.jpeg",
-      className: "" + styles["img-login-rectangle"]
+      className: "" + stylesGlobal["img-login-rectangle"]
     }), React.createElement(Col, {
       className: "p-0 mt-1 mb-4"
     }, React.createElement(GoogleLogin, {
@@ -302,7 +458,7 @@ var BlockLogin = function BlockLogin(_ref) {
       onSuccess: onSuccessGoogle,
       onFailure: onFailureGoogle,
       cookiePolicy: "single_host_origin",
-      className: "" + styles["btn-login-google"],
+      className: "" + stylesGlobal["btn-login-google"],
       isSignedIn: true
     }))))));
   });
@@ -322,7 +478,7 @@ var defaultInfo = {
   captcha: "",
   rememberMe: false
 };
-var useLogin = function useLogin(onNavigate) {
+var useLogin$1 = function useLogin(onNavigate) {
   var _useState = useState(false),
     openLogin = _useState[0],
     setOpenLogin = _useState[1];
@@ -359,13 +515,14 @@ var useLogin = function useLogin(onNavigate) {
   };
 };
 
+var _excluded = ["onNavigate"];
 var Login = function Login(_ref) {
   var onNavigate = _ref.onNavigate,
-    role = _ref.role;
-  var _useLogin = useLogin(onNavigate),
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useLogin = useLogin$1(onNavigate),
     defaultInfo = _useLogin.defaultInfo;
   return React.createElement("div", {
-    className: styles["login"] + " container-fluid font-family-lato"
+    className: stylesGlobal["login"] + " container-fluid font-family-lato"
   }, React.createElement(Row, {
     className: "h-100"
   }, React.createElement(Col, {
@@ -373,11 +530,10 @@ var Login = function Login(_ref) {
     md: 12,
     xs: 12,
     className: "d-flex justify-content-center h-100 align-items-center"
-  }, React.createElement(BlockLogin, {
+  }, React.createElement(BlockLogin, Object.assign({
     defaultInfo: defaultInfo,
-    onNavigate: onNavigate,
-    role: role
-  }))));
+    onNavigate: onNavigate
+  }, rest)))));
 };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -582,7 +738,8 @@ var initialState = {
     type: "",
     message: ""
   },
-  user: null
+  user: null,
+  isReFetchUserAcademies: false
 };
 var commonReducer = createReducer(initialState, function (builder) {
   builder.addCase(setLoading, function (state, action) {
@@ -595,6 +752,8 @@ var commonReducer = createReducer(initialState, function (builder) {
     state.language = action.payload;
   }).addCase(reset, function (_state, _action) {
     return initialState;
+  }).addCase(setReFetchUserAcademies, function (state, action) {
+    state.isReFetchUserAcademies = action.payload;
   });
 });
 
@@ -658,11 +817,6 @@ var Loading = function Loading() {
   }))) : null;
 };
 
-var AUTH_URL = BASE_URL + "/api/auth";
-var getInfo = function getInfo() {
-  return api.get(AUTH_URL + "/info");
-};
-
 var LayoutContext = function LayoutContext(_ref) {
   var children = _ref.children,
     role = _ref.role,
@@ -671,6 +825,8 @@ var LayoutContext = function LayoutContext(_ref) {
       onNavigate: onNavigate
     }),
     handleSignOut = _useGoogleSignOut.handleSignOut;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var dispatch = useDispatch();
   var user = useSelector(function (state) {
     var _state$common;
@@ -682,7 +838,7 @@ var LayoutContext = function LayoutContext(_ref) {
   };
   var checkRoleUser = useCallback(function () {
     if (!user) return;
-    if (!roles.includes(role)) {
+    if (!roles.includes(role) && !!user.academyDomain) {
       alert(user.email + " not allow to register " + role);
       resetAuth();
     }
@@ -699,7 +855,7 @@ var LayoutContext = function LayoutContext(_ref) {
       }
       dispatch(setLoading(true));
       var _temp = _catch(function () {
-        return Promise.resolve(getInfo()).then(function (info) {
+        return Promise.resolve(getAcademyDomain() ? getInfo() : getSuperAdminInfoFromWeb()).then(function (info) {
           if (!info) {
             resetAuth();
           }
@@ -709,7 +865,7 @@ var LayoutContext = function LayoutContext(_ref) {
         console.log({
           err: err
         });
-        role === "Student" ? alert("학생, 다시 로그인해주세요.") : alert("선생님, 다시 로그인해주세요.");
+        alert(t(role === Role.Student ? "student_login_again" : role === Role.Admin ? "admin_login_again" : "teacher_login_again"));
         resetAuth();
       });
       return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
@@ -728,12 +884,12 @@ var ConfirmDialog = function ConfirmDialog(_ref) {
   var open = _ref.open,
     text = _ref.text,
     _ref$cancelText = _ref.cancelText,
-    cancelText = _ref$cancelText === void 0 ? "No" : _ref$cancelText,
+    cancelText = _ref$cancelText === void 0 ? "아니요" : _ref$cancelText,
     _ref$okText = _ref.okText,
-    okText = _ref$okText === void 0 ? "Yes" : _ref$okText,
+    okText = _ref$okText === void 0 ? "예" : _ref$okText,
     isDelete = _ref.isDelete,
     _ref$title = _ref.title,
-    title = _ref$title === void 0 ? "Confirmation" : _ref$title,
+    title = _ref$title === void 0 ? "확인" : _ref$title,
     toggle = _ref.toggle,
     onConfirm = _ref.onConfirm,
     confirmText = _ref.confirmText;
@@ -998,6 +1154,7 @@ var number_question = "{{number}}번";
 var answer_rate = "정답률";
 var seconds = "초";
 var search_placeholder = "시험 이름으로 검색하기";
+var search_by_student = "학생명으로 검색하기";
 var study_touch = "영어연구소";
 var exam_information = "시험정보";
 var issue_number = "문제번호";
@@ -1065,6 +1222,55 @@ var the_seventh = "일곱번째";
 var the_eighth = "여덟번째";
 var the_ninth = "아홉번째";
 var the_tenth = "열번째";
+var full_name_required = "성명은 필수 항목입니다";
+var email_required = "이메일은 필수입니다";
+var enter_full_name = "이름을 입력하세요";
+var enter_email = "이메일을 입력하세요";
+var admin = "관리자";
+var active = "활동적인";
+var create_new_user = "새 사용자 만들기";
+var update_user = "사용자 업데이트";
+var save = "구하다";
+var create_academy = "아카데미 만들기";
+var update_academy = "아카데미 업데이트";
+var connection_string = "연결 문자열";
+var image = "영상";
+var enter_academy_name = "학원명을 입력하세요";
+var enter_connection_string = "연결 문자열을 입력하세요";
+var academy_name_required = "아카데미 이름이 필요합니다";
+var connection_string_required = "연결 문자열 이름이 필요합니다";
+var not_allow_register_account_contact_admin = "가입 권한이 없는 계정입니다. 관리자에게 문의하세요.";
+var request_login_fail = "로그인 실패 요청!";
+var student_login_again = "학생, 다시 로그인해주세요.";
+var teacher_login_again = "선생님, 다시 로그인해주세요.";
+var admin_login_again = "선생님, 다시 로그인해주세요.";
+var domain_required = "도메인 이름이 필요합니다";
+var domain_name = "도메인 이름";
+var enter_academy_domain = "아카데미 도메인을 입력하세요";
+var created_by = "창조자";
+var modification_code = "시험 코드 수정은 불가능합니다.";
+var total_student_joined = "학생이 합류했습니다";
+var copy_to_clipboard = "클립 보드에 복사";
+var code_exam = "시험 코드";
+var button = {
+	close: "닫기",
+	send: "보내기"
+};
+var question_and_answer = "질문 및 답변";
+var problem_number_question = "문제 {{number}}번";
+var teacher_in_charge = "담당 교사";
+var counselor = "상담교사";
+var new_question = "새로운 질문";
+var hour = "시간";
+var minute = "분";
+var second = "두번째";
+var question_order = "{{number}} 번";
+var send_message = "메시지 보내기";
+var class_inquiry = "수업 문의";
+var no_academies_available = "이용 가능한 아카데미가 없습니다";
+var not_allow_register = "역할 등록을 허용하지 않음";
+var credentials_invalid = "자격 증명이 잘못되었습니다.";
+var role_is_invalid = "역할이 잘못되었습니다";
 var lang_ko = {
 	problem_solving: problem_solving,
 	my_story: my_story,
@@ -1110,6 +1316,7 @@ var lang_ko = {
 	answer_rate: answer_rate,
 	seconds: seconds,
 	search_placeholder: search_placeholder,
+	search_by_student: search_by_student,
 	study_touch: study_touch,
 	exam_information: exam_information,
 	issue_number: issue_number,
@@ -1176,7 +1383,54 @@ var lang_ko = {
 	the_seventh: the_seventh,
 	the_eighth: the_eighth,
 	the_ninth: the_ninth,
-	the_tenth: the_tenth
+	the_tenth: the_tenth,
+	full_name_required: full_name_required,
+	email_required: email_required,
+	enter_full_name: enter_full_name,
+	enter_email: enter_email,
+	admin: admin,
+	active: active,
+	create_new_user: create_new_user,
+	update_user: update_user,
+	save: save,
+	create_academy: create_academy,
+	update_academy: update_academy,
+	connection_string: connection_string,
+	image: image,
+	enter_academy_name: enter_academy_name,
+	enter_connection_string: enter_connection_string,
+	academy_name_required: academy_name_required,
+	connection_string_required: connection_string_required,
+	not_allow_register_account_contact_admin: not_allow_register_account_contact_admin,
+	request_login_fail: request_login_fail,
+	student_login_again: student_login_again,
+	teacher_login_again: teacher_login_again,
+	admin_login_again: admin_login_again,
+	domain_required: domain_required,
+	domain_name: domain_name,
+	enter_academy_domain: enter_academy_domain,
+	created_by: created_by,
+	modification_code: modification_code,
+	total_student_joined: total_student_joined,
+	copy_to_clipboard: copy_to_clipboard,
+	code_exam: code_exam,
+	button: button,
+	question_and_answer: question_and_answer,
+	problem_number_question: problem_number_question,
+	teacher_in_charge: teacher_in_charge,
+	counselor: counselor,
+	new_question: new_question,
+	hour: hour,
+	minute: minute,
+	second: second,
+	question_order: question_order,
+	send_message: send_message,
+	class_inquiry: class_inquiry,
+	no_academies_available: no_academies_available,
+	not_allow_register: not_allow_register,
+	credentials_invalid: credentials_invalid,
+	role_is_invalid: role_is_invalid,
+	"q&a": "질의응답"
 };
 
 var problem_solving$1 = "Problem Solving";
@@ -1223,6 +1477,7 @@ var number_question$1 = "No.{{number}}";
 var answer_rate$1 = "Answer rate";
 var seconds$1 = "s";
 var search_placeholder$1 = "Search by exam name";
+var search_by_student$1 = "Search by student name";
 var study_touch$1 = "Study touch";
 var exam_information$1 = "Exam information";
 var issue_number$1 = "Issue number";
@@ -1326,6 +1581,55 @@ var the_seventh$1 = "The seventh";
 var the_eighth$1 = "The eighth";
 var the_ninth$1 = "The ninth";
 var the_tenth$1 = "The tenth";
+var full_name_required$1 = "Full name is required";
+var email_required$1 = "Email is required";
+var enter_full_name$1 = "Enter full name";
+var enter_email$1 = "Enter email";
+var admin$1 = "Admin";
+var active$1 = "Active";
+var create_new_user$1 = "Create new user";
+var update_user$1 = "Update user";
+var save$1 = "Save";
+var create_academy$1 = "Create academy";
+var update_academy$1 = "Update academy";
+var connection_string$1 = "Connection string";
+var image$1 = "Image";
+var enter_academy_name$1 = "Enter academy name";
+var enter_connection_string$1 = "Enter connection string";
+var academy_name_required$1 = "Academy name required";
+var connection_string_required$1 = "Connection string name required";
+var not_allow_register_account_contact_admin$1 = "This account does not have permission to sign up. Please contact your administrator.";
+var request_login_fail$1 = "Request login failure!";
+var student_login_again$1 = "Student, please log in again.";
+var teacher_login_again$1 = "Teacher, please log in again.";
+var admin_login_again$1 = "Admin, please log in again.";
+var domain_required$1 = "Domain name required";
+var domain_name$1 = "Domain name";
+var enter_academy_domain$1 = "Enter academy domain";
+var created_by$1 = "Created by";
+var modification_code$1 = "Modification of test code is not possible";
+var total_student_joined$1 = "Students have joined";
+var code_exam$1 = "Exam code";
+var copy_to_clipboard$1 = "Copy to clipboard";
+var button$1 = {
+	close: "Close",
+	send: "Send"
+};
+var question_and_answer$1 = "Question And Answer";
+var problem_number_question$1 = "Problem No.{{number}}";
+var teacher_in_charge$1 = "Teacher In Charge";
+var counselor$1 = "Counselor";
+var new_question$1 = "New Question";
+var hour$1 = "hour";
+var minute$1 = "minutes";
+var second$1 = "second";
+var question_order$1 = "Number {{number}}";
+var send_message$1 = "Send Message";
+var class_inquiry$1 = "Class inquiry";
+var no_academies_available$1 = "No academies available";
+var not_allow_register$1 = "Not allow to register role";
+var credentials_invalid$1 = "Credentials is invalid";
+var role_is_invalid$1 = "Role is invalid";
 var lang_en = {
 	problem_solving: problem_solving$1,
 	my_story: my_story$1,
@@ -1371,6 +1675,7 @@ var lang_en = {
 	answer_rate: answer_rate$1,
 	seconds: seconds$1,
 	search_placeholder: search_placeholder$1,
+	search_by_student: search_by_student$1,
 	study_touch: study_touch$1,
 	exam_information: exam_information$1,
 	issue_number: issue_number$1,
@@ -1473,7 +1778,54 @@ var lang_en = {
 	the_seventh: the_seventh$1,
 	the_eighth: the_eighth$1,
 	the_ninth: the_ninth$1,
-	the_tenth: the_tenth$1
+	the_tenth: the_tenth$1,
+	full_name_required: full_name_required$1,
+	email_required: email_required$1,
+	enter_full_name: enter_full_name$1,
+	enter_email: enter_email$1,
+	admin: admin$1,
+	active: active$1,
+	create_new_user: create_new_user$1,
+	update_user: update_user$1,
+	save: save$1,
+	create_academy: create_academy$1,
+	update_academy: update_academy$1,
+	connection_string: connection_string$1,
+	image: image$1,
+	enter_academy_name: enter_academy_name$1,
+	enter_connection_string: enter_connection_string$1,
+	academy_name_required: academy_name_required$1,
+	connection_string_required: connection_string_required$1,
+	not_allow_register_account_contact_admin: not_allow_register_account_contact_admin$1,
+	request_login_fail: request_login_fail$1,
+	student_login_again: student_login_again$1,
+	teacher_login_again: teacher_login_again$1,
+	admin_login_again: admin_login_again$1,
+	domain_required: domain_required$1,
+	domain_name: domain_name$1,
+	enter_academy_domain: enter_academy_domain$1,
+	created_by: created_by$1,
+	modification_code: modification_code$1,
+	total_student_joined: total_student_joined$1,
+	code_exam: code_exam$1,
+	copy_to_clipboard: copy_to_clipboard$1,
+	button: button$1,
+	question_and_answer: question_and_answer$1,
+	problem_number_question: problem_number_question$1,
+	teacher_in_charge: teacher_in_charge$1,
+	counselor: counselor$1,
+	new_question: new_question$1,
+	hour: hour$1,
+	minute: minute$1,
+	second: second$1,
+	question_order: question_order$1,
+	send_message: send_message$1,
+	class_inquiry: class_inquiry$1,
+	no_academies_available: no_academies_available$1,
+	not_allow_register: not_allow_register$1,
+	credentials_invalid: credentials_invalid$1,
+	role_is_invalid: role_is_invalid$1,
+	"q&a": "Q&A"
 };
 
 i18n.use(initReactI18next).init({
@@ -1567,9 +1919,9 @@ var TheLanguageDropdown = function TheLanguageDropdown() {
   return React.createElement(Dropdown, {
     isOpen: dropdownOpen,
     toggle: toggle,
-    className: "" + styles["dropdown-menu"]
+    className: "" + stylesGlobal["dropdown-menu"]
   }, React.createElement(DropdownToggle, {
-    className: styles["header-avatar"] + " d-flex align-items-center"
+    className: stylesGlobal["header-avatar"] + " d-flex align-items-center"
   }, React.createElement("span", {
     style: {
       color: "#000",
@@ -1578,7 +1930,7 @@ var TheLanguageDropdown = function TheLanguageDropdown() {
       alignItems: 'center'
     }
   }, !!currentLanguage && React.createElement("img", {
-    className: "mr-2 " + styles['dropdown-menu-flag'],
+    className: "mr-2 " + stylesGlobal['dropdown-menu-flag'],
     src: currentLanguage.image
   }), !!currentLanguage && currentLanguage.shortName, React.createElement(IoChevronDown, {
     className: "ml-2",
@@ -1588,16 +1940,16 @@ var TheLanguageDropdown = function TheLanguageDropdown() {
       marginTop: "2px"
     }
   }))), React.createElement(DropdownMenu, {
-    className: styles["dropdown-content-language"]
+    className: stylesGlobal["dropdown-content-language"]
   }, LANGUAGES.map(function (lang, index) {
     return React.createElement(DropdownItem, {
       key: lang.code,
-      className: styles["dropdown-change"] + " px-0 py-0 " + (index === LANGUAGES.length - 1 ? "pb-2" : "pt-2"),
+      className: stylesGlobal["dropdown-change"] + " px-0 py-0 " + (index === LANGUAGES.length - 1 ? "pb-2" : "pt-2"),
       onClick: function onClick() {
         return setItemLanguage(lang.code);
       }
     }, React.createElement("div", {
-      className: styles["dropdown-item-language"] + " " + styles["item-logout"] + " " + (language == lang.code ? styles['dropdown-item-language-active'] : "") + " d-flex align-items-center w-100"
+      className: stylesGlobal["dropdown-item-language"] + " " + stylesGlobal["item-logout"] + " " + (language == lang.code ? stylesGlobal['dropdown-item-language-active'] : "") + " d-flex align-items-center w-100"
     }, React.createElement("span", {
       className: "mr-2 d-flex hover-opacity"
     }, React.createElement("img", {
@@ -1610,6 +1962,196 @@ var TheLanguageDropdown = function TheLanguageDropdown() {
   })));
 };
 
+var ACADEMY_URL = BASE_URL + "/api/academy";
+var SUPER_ADMIN_ACADEMY_URL = SUPER_ADMIN_BASE_URL + "/api/academies";
+var getAcademyList = function getAcademyList(role) {
+  return api.get(SUPER_ADMIN_ACADEMY_URL + "/active", {
+    params: {
+      role: role
+    }
+  });
+};
+var getUserAcademies = function getUserAcademies(role) {
+  return api.get("" + ACADEMY_URL, {
+    params: {
+      role: role
+    }
+  });
+};
+var switchAcademy = function switchAcademy(academyId) {
+  return api.post(ACADEMY_URL + "/switch-academy?academyId=" + academyId);
+};
+
+var useSwitchAcademy = function useSwitchAcademy(role, navigate, homeAcademyUrl, homeUrl) {
+  if (role === void 0) {
+    role = Role.Student;
+  }
+  var dispatch = useDispatch();
+  var _useLogin = useLogin(navigate, homeAcademyUrl, homeUrl),
+    handleLoginAccessToken = _useLogin.handleLoginAccessToken;
+  var _useState = useState(false),
+    dropdownOpen = _useState[0],
+    setDropdownOpen = _useState[1];
+  var toggleDropdown = function toggleDropdown() {
+    return setDropdownOpen(function (prevState) {
+      return !prevState;
+    });
+  };
+  var _useState2 = useState([]),
+    academyList = _useState2[0],
+    setAcademyList = _useState2[1];
+  var user = 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 isReFetchUserAcademies = useSelector(function (state) {
+    var _state$common2;
+    return state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : _state$common2.isReFetchUserAcademies;
+  });
+  var getAcademies = function getAcademies(isLoading) {
+    if (isLoading === void 0) {
+      isLoading = true;
+    }
+    try {
+      var _temp3 = function _temp3() {
+        isLoading && dispatch(setLoading(false));
+      };
+      if (!user) return Promise.resolve();
+      var isSuperAdminUser = user && !user.academyDomain;
+      var isSuperAdminRole = user.roles.includes(Role.Admin);
+      isLoading && dispatch(setLoading(true));
+      var _temp2 = _catch(function () {
+        return Promise.resolve(isSuperAdminUser ? getAcademyList(role) : getUserAcademies(role)).then(function (res) {
+          var items = res.data.items || [];
+          if (isReFetchUserAcademies) dispatch(setReFetchUserAcademies(false));
+          setAcademyList(items);
+          var _temp = function () {
+            if (!isSuperAdminRole && isSuperAdminUser && role == Role.Admin && items.length > 0) {
+              return Promise.resolve(handleSwitchAcademy(items[0], false)).then(function () {});
+            }
+          }();
+          if (_temp && _temp.then) return _temp.then(function () {});
+        });
+      }, function (error) {
+        var _error$response, _error$response$data;
+        toast.error((error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : _error$response$data.tile) || "Get user academies failed");
+      });
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleSwitchAcademy = function handleSwitchAcademy(selectedAcademy, isLoading) {
+    if (isLoading === void 0) {
+      isLoading = true;
+    }
+    try {
+      var _temp5 = function _temp5() {
+        isLoading && dispatch(setLoading(false));
+      };
+      isLoading && dispatch(setLoading(true));
+      var academyId = selectedAcademy ? selectedAcademy.id : 0;
+      var academyDomain = selectedAcademy ? selectedAcademy.domain : undefined;
+      var _temp4 = _catch(function () {
+        return Promise.resolve(switchAcademy(academyId)).then(function (res) {
+          var data = res.data;
+          var requestBody = {
+            accessToken: data.accessToken,
+            email: user.email,
+            academyId: academyId,
+            role: role
+          };
+          academyDomain && localStorage.setItem(ACADEMY_DOMAIN, academyDomain);
+          !academyDomain && localStorage.removeItem(ACADEMY_DOMAIN);
+          return Promise.resolve(handleLoginAccessToken(requestBody, false, user.academyDomain ? academyDomain : undefined)).then(function () {});
+        });
+      }, function (error) {
+        var _error$response2, _error$response2$data;
+        toast.error((error === null || error === void 0 ? void 0 : (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : (_error$response2$data = _error$response2.data) === null || _error$response2$data === void 0 ? void 0 : _error$response2$data.title) || "Switch academy failed");
+      });
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  useEffect(function () {
+    getAcademies();
+  }, [user === null || user === void 0 ? void 0 : user.academyDomain, user === null || user === void 0 ? void 0 : user.email]);
+  useEffect(function () {
+    isReFetchUserAcademies && getAcademies(false);
+  }, [isReFetchUserAcademies]);
+  var selectedAcademy = useMemo(function () {
+    return academyList.find(function (i) {
+      var _user$academyDomain;
+      return i.domain.trim().toLowerCase() === (user === null || user === void 0 ? void 0 : (_user$academyDomain = user.academyDomain) === null || _user$academyDomain === void 0 ? void 0 : _user$academyDomain.trim().toLowerCase());
+    });
+  }, [user === null || user === void 0 ? void 0 : user.academyDomain, JSON.stringify(academyList)]);
+  return {
+    selectedAcademy: selectedAcademy,
+    dropdownOpen: dropdownOpen,
+    academyList: academyList,
+    toggleDropdown: toggleDropdown,
+    handleSwitchAcademy: handleSwitchAcademy
+  };
+};
+
+var TheAcademyDropdown = function TheAcademyDropdown(_ref) {
+  var _selectedAcademy$name, _selectedAcademy$name2;
+  var homeAcademyUrl = _ref.homeAcademyUrl,
+    homeUrl = _ref.homeUrl,
+    navigate = _ref.navigate,
+    role = _ref.role;
+  var _useSwitchAcademy = useSwitchAcademy(role, navigate, homeAcademyUrl, homeUrl),
+    dropdownOpen = _useSwitchAcademy.dropdownOpen,
+    academyList = _useSwitchAcademy.academyList,
+    toggleDropdown = _useSwitchAcademy.toggleDropdown,
+    handleSwitchAcademy = _useSwitchAcademy.handleSwitchAcademy,
+    selectedAcademy = _useSwitchAcademy.selectedAcademy;
+  var firstLetter = selectedAcademy === null || selectedAcademy === void 0 ? void 0 : (_selectedAcademy$name = selectedAcademy.name) === null || _selectedAcademy$name === void 0 ? void 0 : (_selectedAcademy$name2 = _selectedAcademy$name.charAt(0)) === null || _selectedAcademy$name2 === void 0 ? void 0 : _selectedAcademy$name2.toUpperCase();
+  return React.createElement(Dropdown, {
+    isOpen: dropdownOpen,
+    toggle: toggleDropdown,
+    className: stylesGlobal["dropdown-menu"] + " " + stylesGlobal["dropdown-academy"]
+  }, React.createElement(DropdownToggle, {
+    className: stylesGlobal["header-avatar"] + " d-flex align-items-center"
+  }, React.createElement("div", {
+    className: "" + stylesGlobal["image-academy"]
+  }, selectedAcademy !== null && selectedAcademy !== void 0 && selectedAcademy.image ? React.createElement("img", {
+    src: selectedAcademy === null || selectedAcademy === void 0 ? void 0 : selectedAcademy.image,
+    alt: selectedAcademy === null || selectedAcademy === void 0 ? void 0 : selectedAcademy.name
+  }) : React.createElement("span", null, firstLetter)), React.createElement("p", {
+    className: "text-start mb-0",
+    style: {
+      fontSize: 14,
+      fontWeight: 600,
+      color: "#5458D5",
+      minWidth: 150
+    }
+  }, (selectedAcademy === null || selectedAcademy === void 0 ? void 0 : selectedAcademy.name) || "No selected academy"), React.createElement("div", {
+    className: "" + stylesGlobal["switch-icon"]
+  }, React.createElement(GoArrowSwitch, {
+    size: 14
+  }))), React.createElement(DropdownMenu, {
+    className: stylesGlobal["dropdown-content-academy"]
+  }, academyList.map(function (academy) {
+    return React.createElement(DropdownItem, {
+      key: academy.id,
+      className: stylesGlobal["dropdown-academy-item"] + " px-0 py-0",
+      onClick: function onClick() {
+        return handleSwitchAcademy(academy);
+      }
+    }, React.createElement("div", {
+      className: stylesGlobal["dropdown-item-language"] + " " + stylesGlobal["item-logout"] + " " + (academy.id == (selectedAcademy === null || selectedAcademy === void 0 ? void 0 : selectedAcademy.id) ? stylesGlobal["dropdown-item-language-active"] : "") + " d-flex align-items-center w-100"
+    }, React.createElement("span", {
+      className: "mr-2 d-flex hover-opacity " + stylesGlobal["image-academy"]
+    }, academy.image ? React.createElement("img", {
+      src: academy.image
+    }) : React.createElement("span", null, academy.name.charAt(0).toUpperCase())), academy.name));
+  }), !academyList.length && React.createElement("p", {
+    className: "px-2 text-center"
+  }, "No academies available")));
+};
+
 var minutesToTimeSpan = (function (time) {
   var h = Math.floor(time / 60);
   var m = time % 60;
@@ -1637,34 +2179,7 @@ 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 = ["isDefault", "defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
+var _excluded$1 = ["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"
@@ -1709,7 +2224,7 @@ var CustomSelect = function CustomSelect(_ref) {
     scrollBottom = _ref.scrollBottom,
     value = _ref.value,
     isMulti = _ref.isMulti,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var initialValues = Array.isArray(value) ? options.filter(function (i) {
@@ -1738,7 +2253,164 @@ var CustomSelect = function CustomSelect(_ref) {
   }, 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 styles = {"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","container-custom":"_38A9k","student-row-col-1":"_Jt5t0","student-row-col-1-active":"_14DKj","row-col-2":"_qHGiR","inputBox":"_2iY67","inputBoxTable":"_3pCw0","background-chat":"_zILbw","wrap-content":"_38gsM","name-sender":"_Lfzyw","content-chat-sender":"_1X73E","content-chat-receiver":"_32V7T","custom-scroll":"_2Uul2","btn-send":"_395lb","btn-chat":"_gDYwm","input-chat":"_22TX5","btn-cancel":"_1u-eg","btn-register":"_22r6_","form-label-dialog":"_jADIA","form-select-width":"_WncPd","padding-content":"_3hz3H"};
+
+var iconPersonNoActive = function iconPersonNoActive(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "16" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "16" : _ref$height,
+    color = _ref.color;
+  return React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 16 16",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("path", {
+    d: "M10.395 2.01813C9.78691 1.36156 8.93753 1 8.00003 1C7.05753 1 6.20534 1.35937 5.60003 2.01187C4.98815 2.67156 4.69003 3.56813 4.76003 4.53625C4.89878 6.44625 6.35222 8 8.00003 8C9.64784 8 11.0988 6.44656 11.2397 4.53687C11.3107 3.5775 11.0107 2.68281 10.395 2.01813Z",
+    fill: "#5458D5"
+  }), React.createElement("path", {
+    d: "M13.5001 15H2.50006C2.35608 15.0019 2.21349 14.9716 2.08267 14.9115C1.95185 14.8513 1.83609 14.7627 1.74381 14.6522C1.54068 14.4094 1.45881 14.0778 1.51943 13.7425C1.78318 12.2794 2.60631 11.0503 3.90006 10.1875C5.04943 9.42156 6.50537 9 8.00006 9C9.49474 9 10.9507 9.42188 12.1001 10.1875C13.3938 11.05 14.2169 12.2791 14.4807 13.7422C14.5413 14.0775 14.4594 14.4091 14.2563 14.6519C14.1641 14.7625 14.0483 14.8511 13.9175 14.9113C13.7867 14.9715 13.6441 15.0018 13.5001 15Z",
+    fill: "#5458D5"
+  }));
+};
+
+var ChatRightItem = function ChatRightItem(_ref) {
+  var content = _ref.content,
+    createdAt = _ref.createdAt,
+    sender = _ref.sender,
+    showTimestamp = _ref.showTimestamp,
+    isStudent = _ref.isStudent,
+    showName = _ref.showName,
+    contentType = _ref.contentType;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return React.createElement("div", null, showTimestamp && React.createElement(Typography, {
+    fontWeight: 500,
+    fontSize: "12px",
+    lineHeight: "14.32px",
+    color: "#97A1AF",
+    textAlign: "center"
+  }, utcToLocalTime(createdAt, t("date_time_format"))), React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    display: "flex",
+    justifyContent: "flex-end",
+    padding: "4px 0"
+  }, React.createElement(Box, null, showName && isStudent && React.createElement(Box, {
+    gap: "8px",
+    className: " " + styles["name-sender"],
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "row"
+  }, React.createElement(iconPersonNoActive, null), React.createElement(Typography, {
+    fontWeight: 700,
+    fontSize: 14,
+    padding: "4px",
+    lineHeight: "16.71px",
+    color: "#5458D5"
+  }, sender === null || sender === void 0 ? void 0 : sender.fullName)), contentType ? React.createElement("img", {
+    src: content,
+    style: {
+      backgroundRepeat: "no-repeat",
+      width: "200px",
+      height: "200px",
+      position: "relative",
+      backgroundSize: "cover",
+      objectFit: "cover"
+    }
+  }) : React.createElement("div", {
+    className: styles["wrap-content"] + " " + styles["content-chat-receiver"],
+    style: {
+      "float": "inline-end"
+    }
+  }, React.createElement(Typography, {
+    fontWeight: 500,
+    fontSize: "14px",
+    lineHeight: "16.71px",
+    color: "#fffff"
+  }, content)))));
+};
+
+var ChatLeftItem = function ChatLeftItem(_ref) {
+  var content = _ref.content,
+    sender = _ref.sender,
+    createdAt = _ref.createdAt,
+    showTimestamp = _ref.showTimestamp,
+    isStudent = _ref.isStudent,
+    showName = _ref.showName,
+    contentType = _ref.contentType;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return React.createElement("div", null, showTimestamp && React.createElement(Typography, {
+    fontWeight: 500,
+    fontSize: "12px",
+    lineHeight: "14.32px",
+    color: "#97A1AF",
+    textAlign: "center"
+  }, utcToLocalTime(createdAt, t("date_time_format"))), React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    padding: "4px 0"
+  }, showName && React.createElement(Box, {
+    gap: "4px",
+    display: "flex",
+    padding: "4px",
+    flexDirection: "row",
+    className: "" + styles["name-sender"]
+  }, isStudent ? React.createElement(Fragment, null, React.createElement(Typography, {
+    fontWeight: 500,
+    fontSize: 14,
+    lineHeight: "16.71px",
+    color: "#97A1AF"
+  }, t("counselor")), React.createElement(Typography, {
+    fontWeight: 700,
+    fontSize: 14,
+    lineHeight: "16.71px",
+    color: "#97A1AF"
+  }, sender === null || sender === void 0 ? void 0 : sender.fullName)) : React.createElement(Fragment, null, React.createElement(Typography, {
+    fontWeight: 700,
+    fontSize: 14,
+    lineHeight: "16.71px",
+    color: "#5458D5"
+  }, sender === null || sender === void 0 ? void 0 : sender.fullName), React.createElement(Typography, {
+    fontWeight: 500,
+    fontSize: 14,
+    lineHeight: "16.71px",
+    color: "#5458D5"
+  }, t("student")))), React.createElement(Box, {
+    padding: "4px 0px"
+  }), contentType ? React.createElement("img", {
+    src: content,
+    style: {
+      backgroundRepeat: "no-repeat",
+      width: "200px",
+      height: "200px",
+      position: "relative",
+      backgroundSize: "cover",
+      objectFit: "cover"
+    }
+  }) : React.createElement("div", {
+    className: styles["wrap-content"] + " " + styles["content-chat-sender"]
+  }, React.createElement(Typography, {
+    fontWeight: 500,
+    fontSize: "14px",
+    lineHeight: "16.71px",
+    color: "#414E62"
+  }, content))));
+};
+
+var ChatItemType;
+(function (ChatItemType) {
+  ChatItemType[ChatItemType["Default"] = 0] = "Default";
+  ChatItemType[ChatItemType["Exam"] = 1] = "Exam";
+  ChatItemType[ChatItemType["Class"] = 2] = "Class";
+})(ChatItemType || (ChatItemType = {}));
+var ChatItem = function ChatItem(props) {
+  var isMe = props.isMe;
+  return React.createElement(Fragment, null, isMe ? React.createElement(ChatRightItem, Object.assign({}, props)) : React.createElement(ChatLeftItem, Object.assign({}, props)));
+};
 
 var MessageSortBy;
 (function (MessageSortBy) {
@@ -1752,7 +2424,7 @@ var OrderBy;
 var StudentSortBy;
 (function (StudentSortBy) {
   StudentSortBy["CreatedAt"] = "CreatedAt";
-  StudentSortBy["DisplayName"] = "DisplayName";
+  StudentSortBy["FullName"] = "FullName";
 })(StudentSortBy || (StudentSortBy = {}));
 var StudentOrderBy;
 (function (StudentOrderBy) {
@@ -1777,371 +2449,460 @@ var MessageStatus;
   MessageStatus["SentError"] = "Sent fail, Retry";
 })(MessageStatus || (MessageStatus = {}));
 
-var ChatRightItem = function ChatRightItem(_ref) {
-  var id = _ref.id,
-    content = _ref.content,
-    createdAt = _ref.createdAt,
-    isRead = _ref.isRead,
-    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,
-    selectedReplyMessageId = _ref.selectedReplyMessageId,
-    selectedReplyItemRef = _ref.selectedReplyItemRef,
-    onAddExamMessage = _ref.onAddExamMessage,
-    onReTrySendMessage = _ref.onReTrySendMessage,
-    onGotoParentMessage = _ref.onGotoParentMessage;
-  var _useState = useState(false),
-    isShowTime = _useState[0],
-    setShowTime = _useState[1];
-  var _useState2 = useState(false),
-    isShowInfo = _useState2[0],
-    setShowInfo = _useState2[1];
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  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
-    });
-  };
-  useEffect(function () {
-    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 && !!examCode && React.createElement("span", {
-    className: "pointer text-black",
-    onClick: function onClick() {
-      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"
-  }, utcToLocalTime(createdAt, t("date_time_format"))) : React.createElement(Collapse, {
-    className: "w-100",
-    isOpen: isShowTime
-  }, React.createElement("p", {
-    className: "mb-0 py-1 px-3 fs-6 text-muted text-center"
-  }, utcToLocalTime(createdAt, t("date_time_format")))), isSystemLog ? React.createElement("div", {
-    className: "text-center w-100"
-  }, React.createElement(Link, {
-    to: "" + (actionLink || "/"),
-    title: "See the results",
-    className: "text-primary"
-  }, content)) : React.createElement("div", {
-    className: "d-flex align-items-start w-100 flex-row-reverse"
-  }, React.createElement("div", {
-    className: "d-flex flex-column align-items-end"
-  }, parentId && React.createElement("p", {
-    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), !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"
-  }, isRead ? "seen" : "sent")))));
+var types = {
+  __proto__: null,
+  get MessageSortBy () { return MessageSortBy; },
+  get OrderBy () { return OrderBy; },
+  get StudentSortBy () { return StudentSortBy; },
+  get StudentOrderBy () { return StudentOrderBy; },
+  get MessageAction () { return MessageAction; },
+  get MessageSourceType () { return MessageSourceType; },
+  get MessageStatus () { return MessageStatus; }
 };
 
-var 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,
-    onGotoParentMessage = _ref.onGotoParentMessage;
-  var _useState = useState(false),
-    isShowTime = _useState[0],
-    setShowTime = _useState[1];
-  var _useState2 = useState(false),
-    isShowInfo = _useState2[0],
-    setShowInfo = _useState2[1];
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  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);
-  };
-  useEffect(function () {
-    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 && !!examCode && React.createElement("span", {
-    className: "pointer text-black",
-    onClick: function onClick() {
-      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"
-  }, utcToLocalTime(createdAt, t("date_time_format"))) : React.createElement(Collapse, {
-    className: "w-100",
-    isOpen: isShowTime
-  }, React.createElement("p", {
-    className: "mb-0 py-1 px-3 fs-6 text-muted text-center"
-  }, utcToLocalTime(createdAt, t("date_time_format")))), isSystemLog ? React.createElement("div", {
-    className: "text-center w-100"
-  }, React.createElement(Link, {
-    to: "" + (actionLink || "/"),
-    title: "See the results",
-    className: "text-primary"
-  }, content)) : React.createElement("div", {
-    className: "d-flex align-items-start w-100"
-  }, React.createElement("div", {
-    className: "rounded-circle " + styles$1["list__item__avatar-container"] + " bg-light me-2 mt-1 " + (isFirst ? "" : "opacity-0")
-  }, isFirst && React.createElement("img", {
-    className: styles$1["list__item__avatar"] + " bg-light rounded-circle",
-    src: avatar
-  })), React.createElement("div", {
-    className: "d-flex flex-column"
-  }, parentId && React.createElement("p", {
-    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
-  }, content), !isSystemLog && React.createElement(Collapse, {
-    className: "w-100",
-    isOpen: selectedReplyMessageId === id
-  }, React.createElement("p", {
-    onClick: handleReply,
-    className: "mb-0 py-1 px-3 fs-6 text-primary text-left pointer"
-  }, "Reply")))));
-};
-
-var ChatItemType;
-(function (ChatItemType) {
-  ChatItemType[ChatItemType["Default"] = 0] = "Default";
-  ChatItemType[ChatItemType["Exam"] = 1] = "Exam";
-  ChatItemType[ChatItemType["Class"] = 2] = "Class";
-})(ChatItemType || (ChatItemType = {}));
-var ChatItem = function ChatItem(props) {
-  var isMe = props.isMe,
-    onReTrySendMessage = props.onReTrySendMessage;
-  return React.createElement(Fragment, null, isMe ? React.createElement(ChatRightItem, Object.assign({}, props, {
-    onReTrySendMessage: onReTrySendMessage
-  })) : React.createElement(ChatLeftItem, Object.assign({}, props)));
+var ExamStatus;
+(function (ExamStatus) {
+  ExamStatus["Default"] = "Default";
+  ExamStatus["Pending"] = "Pending";
+  ExamStatus["Inprogress"] = "Inprogress";
+  ExamStatus["Completed"] = "Completed";
+})(ExamStatus || (ExamStatus = {}));
+var Roles;
+(function (Roles) {
+  Roles["Student"] = "Student";
+  Roles["Teacher"] = "Teacher";
+  Roles["Admin"] = "Admin";
+})(Roles || (Roles = {}));
+var MESSAGE_DEFAULT_FILTER = {
+  currentPage: 1,
+  pageSize: 15,
+  textSearch: "",
+  sortColumnDirection: OrderBy.DESC,
+  sortColumnName: MessageSortBy.CreatedAt
 };
 
 var ChatList = function ChatList(_ref) {
   var _ref$messages = _ref.messages,
     messages = _ref$messages === void 0 ? [] : _ref$messages,
-    onAddExamMessage = _ref.onAddExamMessage,
-    onReply = _ref.onReply,
+    roles = _ref.roles,
     onReTrySendMessage = _ref.onReTrySendMessage,
     listItemRef = _ref.listItemRef;
-  var _useState = useState(),
-    selectedReplyMessageId = _useState[0],
-    setSelectedReplyMessageId = _useState[1];
-  var selectedReplyItemRef = useRef(null);
-  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"
+  var filterMessage = useMemo(function () {
+    var prevTime = 0;
+    var prevSender;
+    return messages.map(function (message) {
+      var _message$sender, _message$sender2;
+      var currentTime = new Date(message.createdAt).getTime();
+      var showTimestamp = !prevTime || currentTime - prevTime > 20 * 60 * 1000;
+      var showName = ((_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.fullName) !== prevSender;
+      prevSender = (_message$sender2 = message.sender) === null || _message$sender2 === void 0 ? void 0 : _message$sender2.fullName;
+      prevTime = currentTime;
+      return _extends({}, message, {
+        showTimestamp: showTimestamp,
+        showName: showName
+      });
     });
-  }, [selectedReplyMessageId, selectedReplyItemRef.current]);
+  }, [JSON.stringify(messages)]);
+  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Roles.Student);
   return React.createElement("ul", {
     ref: listItemRef,
-    className: styles$1["list"] + " h-100 d-flex flex-column py-3 px-0 mb-0"
-  }, React.createElement("li", {
-    className: "flex-grow-1",
-    key: "start-of-list"
-  }), !(messages !== null && messages !== void 0 && messages.length) && React.createElement("li", {
+    className: styles["list"] + " " + styles["padding-content"] + " d-flex h-100 flex-column mb-0  " + (!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) ? 'justify-content-center' : '')
+  }, !(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) && React.createElement("li", {
     className: "text-muted text-center fst-italic fs-6"
-  }, "No message"), !!(messages !== null && messages !== void 0 && messages.length) && messages.map(function (message) {
+  }, "No message"), !!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) && filterMessage.map(function (message) {
     return React.createElement(ChatItem, Object.assign({
       key: message.id
     }, message, {
-      onAddExamMessage: onAddExamMessage,
-      onReply: onReply,
-      selectedReplyMessageId: selectedReplyMessageId,
-      onToggleReply: handleToggleReply,
-      selectedReplyItemRef: selectedReplyItemRef,
-      onReTrySendMessage: onReTrySendMessage,
-      onGotoParentMessage: handleSelectParentMessage
+      isStudent: isStudent,
+      onReTrySendMessage: onReTrySendMessage
     }));
   }));
 };
 
+var iconSendMessage = function iconSendMessage(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "16" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "16" : _ref$height,
+    color = _ref.color;
+  return React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 16 16",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("path", {
+    d: "M14.8934 7.09539L14.8884 7.0932L1.54219 1.55758C1.42993 1.51059 1.30778 1.49217 1.18666 1.50395C1.06554 1.51573 0.949225 1.55734 0.848125 1.62508C0.741311 1.69507 0.653573 1.79052 0.592805 1.90283C0.532037 2.01515 0.500145 2.14081 0.5 2.26852V5.80883C0.50006 5.98341 0.561019 6.15249 0.67237 6.28695C0.783722 6.42141 0.938491 6.5128 1.11 6.54539L8.38906 7.89133C8.41767 7.89675 8.44348 7.91199 8.46205 7.93441C8.48062 7.95683 8.49078 7.98503 8.49078 8.01414C8.49078 8.04325 8.48062 8.07145 8.46205 8.09387C8.44348 8.1163 8.41767 8.13153 8.38906 8.13695L1.11031 9.48289C0.938851 9.5154 0.784092 9.60667 0.67269 9.74101C0.561288 9.87534 0.500219 10.0443 0.5 10.2188V13.7598C0.499917 13.8817 0.530111 14.0018 0.587871 14.1092C0.645632 14.2166 0.729152 14.3079 0.830938 14.3751C0.953375 14.4564 1.09706 14.4999 1.24406 14.5001C1.34626 14.5 1.4474 14.4795 1.54156 14.4398L14.8875 8.9357L14.8934 8.93289C15.0731 8.85569 15.2262 8.72751 15.3337 8.56421C15.4413 8.40092 15.4986 8.20968 15.4986 8.01414C15.4986 7.81861 15.4413 7.62736 15.3337 7.46407C15.2262 7.30077 15.0731 7.1726 14.8934 7.09539Z",
+    fill: "white"
+  }));
+};
+
 var InputChat = function InputChat(_ref) {
   var text = _ref.text,
-    parentText = _ref.parentText,
-    examTitle = _ref.examTitle,
     inputRef = _ref.inputRef,
     onChangeInput = _ref.onChangeInput,
     onSubmit = _ref.onSubmit,
-    onClearReply = _ref.onClearReply;
+    isCompleted = _ref.isCompleted,
+    handleUploadImage = _ref.handleUploadImage,
+    selectedFile = _ref.selectedFile,
+    handleDeleteSelectedImage = _ref.handleDeleteSelectedImage;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var fileInputRef = useRef(null);
   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();
+    if (e.key === "Enter") {
+      handleSubmit();
+      return;
+    }
   };
-  var handleClearReply = function handleClearReply() {
-    onClearReply === null || onClearReply === void 0 ? void 0 : onClearReply();
+  var handleSelectedFile = function handleSelectedFile(e) {
+    var files = e.target.files;
+    handleUploadImage(files[0]);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
   };
-  return React.createElement("div", {
-    className: "bg-light rounded-3 p-2"
-  }, React.createElement(Collapse, {
-    isOpen: !!parentText || !!examTitle && !parentText
-  }, !!parentText ? React.createElement("div", {
-    className: "d-flex justify-content-between align-items-center"
-  }, React.createElement("p", {
-    className: "mb-3 " + styles$1["reply-text"]
-  }, React.createElement("b", null, "Reply to:"), " " + parentText), !!onClearReply && React.createElement("span", {
-    className: "pointer ms-3 mb-3 d-flex justify-content-center align-items-center",
-    onClick: handleClearReply
-  }, React.createElement(IoIosCloseCircle, null))) : React.createElement("div", {
-    className: "d-flex justify-content-between align-items-center"
-  }, React.createElement("p", {
-    className: "mb-3 " + styles$1["reply-text"]
-  }, React.createElement("b", null, "Reply to", examTitle ? " exam" : "", ": "), " " + examTitle), !!onClearReply && React.createElement("span", {
-    className: "pointer ms-3 mb-3 d-flex justify-content-center align-items-center",
-    onClick: handleClearReply
-  }, React.createElement(IoIosCloseCircle, null)))), React.createElement(InputGroup, {
-    className: "d-flex align-items"
-  }, React.createElement(Input, {
-    innerRef: inputRef,
-    value: text,
-    placeholder: "Enter something",
-    onKeyUp: handleKeyPressEnter,
-    className: "rounded-pill px-3",
-    onChange: handleInputChange
+  return React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    padding: "16px"
+  }, React.createElement(Box, {
+    display: "flex",
+    flexDirection: "row",
+    gap: "24px"
+  }, React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "7px",
+    width: "100%"
+  }, React.createElement(Box, {
+    display: "flex",
+    border: "1px solid #97A1AF",
+    borderRadius: "6px",
+    flexDirection: "column"
+  }, selectedFile && React.createElement("div", {
+    style: {
+      position: "relative",
+      margin: "10px",
+      width: "fit-content"
+    }
+  }, React.createElement("img", {
+    src: selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.content,
+    style: {
+      backgroundRepeat: "no-repeat",
+      width: "100px",
+      height: "100px",
+      backgroundSize: "cover"
+    }
   }), React.createElement("div", {
-    className: "p-2 pointer d-flex align-items-center",
+    style: {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      cursor: "pointer"
+    },
+    onClick: handleDeleteSelectedImage
+  }, React.createElement(IoCloseOutline, {
+    color: "#fff",
+    size: 30
+  }))), React.createElement("input", {
+    className: styles["input-chat"],
+    style: {
+      border: "none"
+    },
+    placeholder: t("send_message"),
+    ref: inputRef,
+    value: text,
+    width: "100%",
+    onKeyPress: handleKeyPressEnter,
+    onChange: handleInputChange,
+    disabled: isCompleted
+  })), React.createElement(Typography, {
+    fontWeight: 500,
+    fontSize: "10px",
+    lineHeight: "11.93px",
+    color: "#97A1AF"
+  }, "\uC548\uB0B4 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4.")), React.createElement(Box, {
+    display: "flex",
+    justifyContent: "flex-end",
+    alignItems: "flex-start",
+    gap: "8px"
+  }, React.createElement(Button$1, {
+    variant: "outlined",
+    component: "label"
+  }, React.createElement(FaImage, null), React.createElement("input", {
+    type: "file",
+    hidden: true,
+    ref: fileInputRef,
+    accept: "image/png, image/gif, image/jpeg",
+    onChangeCapture: handleSelectedFile
+  })), React.createElement(Button$1, {
+    variant: "contained",
+    sx: {
+      bgcolor: isCompleted ? "#EBEBFF !important" : "#5458D5 !important"
+    },
+    className: styles["btn-send"],
+    disabled: isCompleted,
     onClick: handleSubmit
-  }, React.createElement(IoMdSend, {
-    className: "text-primary fs-4"
-  }))));
+  }, React.createElement(iconSendMessage, null), React.createElement(Typography, {
+    fontWeight: 700,
+    fontSize: "13px",
+    lineHeight: "15.51px"
+  }, t("button.send"))))));
 };
 
-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);
-  var language = 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.language;
+var iconChecked = function iconChecked(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "16" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "16" : _ref$height,
+    color = _ref.color;
+  return React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 16 16",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("path", {
+    d: "M8 1.5C4.41594 1.5 1.5 4.41594 1.5 8C1.5 11.5841 4.41594 14.5 8 14.5C11.5841 14.5 14.5 11.5841 14.5 8C14.5 4.41594 11.5841 1.5 8 1.5ZM11.3828 5.82156L7.18281 10.8216C7.13674 10.8764 7.07941 10.9208 7.01471 10.9516C6.95001 10.9823 6.87945 10.9989 6.80781 11H6.79938C6.72929 11 6.66 10.9852 6.59599 10.9567C6.53198 10.9282 6.47468 10.8865 6.42781 10.8344L4.62781 8.83438C4.5821 8.78589 4.54654 8.72876 4.52322 8.66633C4.4999 8.60391 4.4893 8.53745 4.49203 8.47087C4.49477 8.40429 4.51078 8.33892 4.53914 8.27862C4.56749 8.21831 4.60761 8.16429 4.65715 8.11971C4.70668 8.07514 4.76463 8.04091 4.82757 8.01905C4.89052 7.99719 4.95721 7.98813 5.02371 7.9924C5.09021 7.99668 5.15518 8.01421 5.21481 8.04396C5.27444 8.0737 5.32752 8.11507 5.37094 8.16562L6.78625 9.73812L10.6172 5.17844C10.7031 5.07909 10.8247 5.01754 10.9556 5.00711C11.0866 4.99668 11.2164 5.03819 11.317 5.12268C11.4175 5.20717 11.4808 5.32784 11.4931 5.45862C11.5055 5.5894 11.4658 5.71977 11.3828 5.82156Z",
+    fill: "#5458D5"
+  }));
+};
+
+var CONVERSATION_URL = BASE_URL + "/api/conversation";
+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 completeConversation = function completeConversation(conversationId) {
+  return api.post(CONVERSATION_URL + "/" + conversationId + "/finish");
+};
+var apiUploadFile = function apiUploadFile(file) {
+  return apiUpload.post(BASE_URL + "/api/file/upload", file);
+};
+
+var useDialog = function useDialog() {
+  var _useState = useState(false),
+    openConfirmDialog = _useState[0],
+    setOpenConfirmDialog = _useState[1];
+  var toggleConfirmDialog = function toggleConfirmDialog() {
+    setOpenConfirmDialog(function (state) {
+      return !state;
+    });
+  };
+  var handleConfirm = function handleConfirm(conversationId) {
+    try {
+      var _temp2 = function _temp2() {
+        setLoading(false);
+      };
+      setLoading(true);
+      var _temp = _catch(function () {
+        return Promise.resolve(completeConversation(conversationId)).then(function () {
+          toggleConfirmDialog();
+          toast.success("Complete conversation success");
+        });
+      }, function () {
+        toast.error("Failed to complete conversation");
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return {
+    openConfirmDialog: openConfirmDialog,
+    toggleConfirmDialog: toggleConfirmDialog,
+    handleConfirm: handleConfirm
+  };
+};
+
+var ChatHeader = function ChatHeader(_ref) {
+  var fullName = _ref.fullName,
+    examTitle = _ref.examTitle,
+    questionOrder = _ref.questionOrder,
+    conversationId = _ref.conversationId,
+    isCompleted = _ref.isCompleted,
+    durationExam = _ref.durationExam,
+    createdAt = _ref.createdAt,
+    teacherName = _ref.teacherName,
+    roles = _ref.roles;
+  var _useDialog = useDialog(),
+    openConfirmDialog = _useDialog.openConfirmDialog,
+    toggleConfirmDialog = _useDialog.toggleConfirmDialog,
+    handleConfirm = _useDialog.handleConfirm;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var handleChangeOption = function handleChangeOption(val) {
-    onChangeOption === null || onChangeOption === void 0 ? void 0 : onChangeOption(val);
+  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Roles.Student);
+  var filterDurationExam = useMemo(function () {
+    if (!durationExam) return;
+    return moment.duration(durationExam);
+  }, [durationExam]);
+  var renderHeader = function renderHeader() {
+    return isStudent ? React.createElement(Grid, {
+      item: true,
+      xs: 12,
+      borderTop: "1px solid #E4E7EC",
+      borderBottom: "1px solid #E4E7EC",
+      minHeight: "64px",
+      padding: "16px 8px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between"
+    }, React.createElement(Box, {
+      padding: "8px 12px",
+      display: "flex",
+      alignItems: "center",
+      gap: "24px",
+      border: "1px solid #EBEBFF",
+      borderRadius: "6px"
+    }, React.createElement(Box, {
+      display: "flex",
+      alignItems: "center",
+      flexDirection: "row",
+      gap: "8px"
+    }, React.createElement(iconPersonNoActive, null), React.createElement(Typography, {
+      fontWeight: 500,
+      fontSize: "14px",
+      lineHeight: "16.71px",
+      color: "#5458D5"
+    }, t("counselor"))), React.createElement(Typography, {
+      fontWeight: 700,
+      fontSize: "14px",
+      lineHeight: "16.71px",
+      color: "#5458D5"
+    }, teacherName)), React.createElement(Box, {
+      display: "flex",
+      alignItems: "start",
+      color: "#5458D5",
+      gap: "6px",
+      flexDirection: "column"
+    }, React.createElement(Typography, {
+      fontWeight: 600,
+      fontSize: "12px",
+      lineHeight: "14.32px"
+    }, examTitle), React.createElement(Box, {
+      display: "flex",
+      flexDirection: "row",
+      gap: "4px"
+    }, React.createElement(Typography, {
+      fontWeight: 600,
+      fontSize: "12px",
+      lineHeight: "14.2px"
+    }, "LIVE \uC2DC\uD5D8"), filterDurationExam && React.createElement(Typography, {
+      fontWeight: 500,
+      fontSize: "12px",
+      lineHeight: "14.32px"
+    }, (!!filterDurationExam.hours() ? filterDurationExam.hours() + " " + t("hour") : "") + " " + (!!filterDurationExam.minutes() ? filterDurationExam.minutes() + " " + t("minute") : "") + " " + (!!filterDurationExam.seconds() ? filterDurationExam.seconds() + " " + t("second") : "")))), React.createElement(Box, {
+      display: "flex",
+      alignItems: "center",
+      gap: "6px",
+      flexDirection: "column"
+    }, React.createElement(Typography, {
+      fontWeight: 700,
+      fontSize: "12px",
+      lineHeight: "14.32px",
+      color: "#5458D5"
+    }, questionOrder != undefined ? t("problem_number_question", {
+      number: questionOrder + 1
+    }) : t("class_inquiry")), React.createElement(Typography, {
+      fontWeight: 500,
+      fontSize: "12px",
+      lineHeight: "14.32px",
+      color: "#97A1AF"
+    }, utcToLocalTime(createdAt, t("date_time_format"))))) : React.createElement(Grid, {
+      item: true,
+      xs: 12,
+      borderTop: "1px solid #E4E7EC",
+      borderBottom: "1px solid #E4E7EC",
+      minHeight: "64px",
+      padding: "16px 8px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between"
+    }, React.createElement(Box, {
+      display: "flex",
+      alignItems: "center",
+      gap: "24px",
+      color: "#5458D5"
+    }, React.createElement(Box, {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      gap: "8px"
+    }, React.createElement(iconPersonNoActive, null), React.createElement(Typography, {
+      fontWeight: 500,
+      fontSize: "14px",
+      lineHeight: "16.71px"
+    }, t("student"))), React.createElement(Typography, {
+      fontWeight: 700,
+      fontSize: "14px",
+      lineHeight: "16.71px"
+    }, fullName)), React.createElement(Box, {
+      display: "flex",
+      alignItems: "center",
+      gap: "24px",
+      color: "#5458D5"
+    }, examTitle && React.createElement(Typography, {
+      fontWeight: 600,
+      fontSize: "12px",
+      lineHeight: "14.32px"
+    }, examTitle), React.createElement(Typography, {
+      fontWeight: 700,
+      fontSize: "14px",
+      lineHeight: "16.71px"
+    }, questionOrder != undefined ? t("problem_number_question", {
+      number: questionOrder + 1
+    }) : t("class_inquiry"))), !isCompleted ? React.createElement("div", {
+      onClick: toggleConfirmDialog
+    }, React.createElement(Box, {
+      padding: "8px 12px",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      border: "1px solid #5458D5",
+      borderRadius: "6px"
+    }, React.createElement(iconChecked, null), React.createElement(Typography, {
+      fontWeight: 700,
+      fontSize: "13px",
+      lineHeight: "15.51px",
+      color: "#5458D5"
+    }, "\uC644\uB8CC \uCC98\uB9AC"))) : React.createElement("div", null));
   };
-  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 = useMemo(function () {
-    return options === null || options === void 0 ? void 0 : options.map(function (i) {
-      return {
-        value: i.id,
-        label: i.title + " (" + utcToLocalTime(i.startTime, t("date_time_format")) + ")"
-      };
-    });
-  }, [JSON.stringify(options), language]);
-  return React.createElement("div", {
-    className: "d-flex bg-light rounded-3 p-3"
-  }, React.createElement("div", null, React.createElement("img", {
-    className: "rounded-circle " + styles$1["header__avatar"],
-    src: avatar,
-    alt: name
-  })), React.createElement("div", {
-    className: "flex-grow-1 px-3 d-flex align-items-center"
-  }, React.createElement("p", {
-    className: "mb-0 text-primary fw-medium"
-  }, name)), React.createElement("div", {
-    className: "d-flex align-items-center"
-  }, selectOptions !== undefined && React.createElement("div", {
-    className: styles$1["header__select"] + " mx-3"
-  }, React.createElement(CustomSelect, {
-    value: selectedOption,
-    options: selectOptions,
-    onChange: handleChangeOption,
-    isClearable: true
-  })), React.createElement("div", {
-    className: "actions d-flex align-items-center"
-  })));
+  return React.createElement(Grid, {
+    container: true
+  }, React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    paddingLeft: "32px",
+    paddingTop: "20px",
+    paddingBottom: "16px",
+    minHeight: "60px"
+  }, React.createElement(Typography, {
+    fontWeight: 800,
+    fontSize: "20px",
+    color: "#5458D5",
+    lineHeight: "23.87px"
+  }, t("question_and_answer"))), renderHeader(), React.createElement(ConfirmDialog, {
+    open: openConfirmDialog,
+    toggle: toggleConfirmDialog,
+    text: "정말로 이 채팅 베팅을 완료하시겠습니까?",
+    onConfirm: function onConfirm() {
+      return handleConfirm(conversationId || 0);
+    },
+    title: t("confirmation"),
+    okText: t("yes"),
+    cancelText: t("no")
+  }));
 };
 
 var ChatContainer = function ChatContainer(_ref) {
@@ -2153,55 +2914,47 @@ var ChatContainer = function ChatContainer(_ref) {
     _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;
   var inputRef = useRef(null);
   var listRef = useRef(null);
   var listItemRef = useRef(null);
   var scrollRef = useRef();
-  var focusRef = useRef();
   var addEventTimeout = 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, examCode) {
-    var _inputRef$current2;
-    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-    onAddExamMessage(examId, examTitle, examCode);
-  };
-  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 (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();
-      }
+    try {
+      var _temp4 = function _temp4() {
+        if (scrollRef.current) clearTimeout(scrollRef.current);
+      };
+      var _temp3 = function () {
+        if (listRef.current) {
+          var scrollTop = listRef.current.scrollTop;
+          var scrollHeight = listRef.current.scrollHeight;
+          var clientHeight = listRef.current.clientHeight;
+          var _temp2 = function () {
+            if (scrollTop + clientHeight + scrollOffset >= scrollHeight) {
+              onReachBottom === null || onReachBottom === void 0 ? void 0 : onReachBottom();
+            } else {
+              var _temp5 = function () {
+                if (scrollTop <= scrollOffset) {
+                  return Promise.resolve(onReachTop === null || onReachTop === void 0 ? void 0 : onReachTop()).then(function (isSuccessLoad) {
+                    if (isSuccessLoad) {
+                      listRef.current.scrollTop = listRef.current.scrollHeight - scrollHeight;
+                    }
+                  });
+                }
+              }();
+              if (_temp5 && _temp5.then) return _temp5.then(function () {});
+            }
+          }();
+          if (_temp2 && _temp2.then) return _temp2.then(function () {});
+        }
+      }();
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
+    } catch (e) {
+      return Promise.reject(e);
     }
-    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();
-    }, 300);
   };
   useEffect(function () {
     var _listRef$current, _chatListProps$messag, _listRef$current3;
@@ -2218,138 +2971,41 @@ var ChatContainer = function ChatContainer(_ref) {
         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$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);
-    };
-  }, [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);
-      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, {
-    onChangeOption: handleChangeExamOption
-  }))), React.createElement("div", {
-    ref: listRef,
-    className: "flex-grow-1 " + styles$1["body"]
-  }, 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
-  }))));
-};
-
-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: 12,
-  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 = 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);
+    } else (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.addEventListener("scroll", handleScroll);
+    return function () {
+      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);
+    };
+  }, [JSON.stringify(chatListProps.messages), scrollOffset, isLoading, onEndScrollToEnd, isScrollToEnd]);
+  useEffect(function () {
+    onReachBottom === null || onReachBottom === void 0 ? void 0 : onReachBottom();
+  }, [JSON.stringify(chatListProps.messages)]);
+  return React.createElement(Grid, {
+    container: true
+  }, React.createElement(ChatHeader, Object.assign({}, chatHeaderProps)), React.createElement("div", {
+    ref: listRef,
+    className: "flex-grow-1 " + styles["body"],
+    style: {
+      height: "60vh",
+      overflowY: "scroll",
+      background: "#F9FAFB"
     }
-  };
-  return {
-    getListExam: getListExam,
-    exams: exams
-  };
+  }, isLoading && React.createElement("div", {
+    style: {
+      height: "100%",
+      width: "100%"
+    },
+    className: "d-flex justify-content-center align-items-center"
+  }, React.createElement(CircularProgress, null)), React.createElement(ChatList, Object.assign({}, chatListProps, {
+    listItemRef: listItemRef
+  }))), React.createElement(InputChat, Object.assign({}, inputProps, {
+    inputRef: inputRef
+  })));
 };
 
-var useMessageList = function useMessageList(userId, getListExamOptions) {
+var useMessageList = function useMessageList() {
   var _useState = useState([]),
     messages = _useState[0],
     setMessages = _useState[1];
@@ -2359,58 +3015,70 @@ var useMessageList = function useMessageList(userId, getListExamOptions) {
   var _useState3 = useState(false),
     isLoading = _useState3[0],
     setLoading = _useState3[1];
-  var getMessageList = function getMessageList(conversationId, examId) {
+  var getMessageList = function getMessageList(conversationId) {
     try {
-      var _temp3 = function _temp3() {
+      var _temp2 = function _temp2() {
         setLoading(false);
       };
       setLoading(true);
-      var _temp2 = _catch(function () {
-        var filter = _extends({}, messageFilter, {
-          examId: !examId ? messageFilter.examId : examId
-        });
+      var _temp = _catch(function () {
+        var filter = _extends({}, messageFilter);
         return Promise.resolve(getMessagesByConversation(conversationId, filter)).then(function (res) {
-          var _res$data$items2;
-          function _temp(_getListExamOptions) {
-            _getListExamOptions;
-          }
-          if (messageFilter.beforeDate) setMessages(function (state) {
+          setMessages(function (prev) {
             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 [].concat((_res$data$items = res.data.items) === null || _res$data$items === void 0 ? void 0 : _res$data$items.reverse(), prev);
+          });
+          setMessageFilter(function (prev) {
+            return _extends({}, prev, {
+              totalItems: res.data.totalItems,
+              totalPages: res.data.totalPages
+            });
+          });
         });
+      }, function () {
+        toast.error("Fail to fetch data!");
       });
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2));
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
     } 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) {
+  var handleLoadMore = function handleLoadMore(conversationId) {
     try {
-      var _temp4 = _catch(function () {
-        return Promise.resolve(apiMarkReadMessage(conversationId, messageId)).then(function () {});
-      }, function (error) {
-        console.log({
-          error: error
+      var _temp4 = function _temp4(_result) {
+        if (_exit) return _result;
+        setLoading(false);
+        return true;
+      };
+      var _exit = false;
+      if (isLoading) return Promise.resolve();
+      var filter = _extends({}, messageFilter, {
+        currentPage: ((messageFilter === null || messageFilter === void 0 ? void 0 : messageFilter.currentPage) || 1) + 1
+      });
+      setMessageFilter(filter);
+      setLoading(true);
+      var _temp3 = _catch(function () {
+        return Promise.resolve(getMessagesByConversation(conversationId, filter)).then(function (res) {
+          setMessages(function (prev) {
+            var _res$data$items2;
+            var data = [].concat((_res$data$items2 = res.data.items) === null || _res$data$items2 === void 0 ? void 0 : _res$data$items2.reverse(), prev);
+            var dataFilter = new Set(data);
+            return Array.from(dataFilter);
+          });
+          if (res.data.items) {
+            setMessageFilter(function (prev) {
+              return _extends({}, prev, {
+                totalItems: res.data.totalItems,
+                totalPages: res.data.totalPages
+              });
+            });
+          }
         });
+      }, function () {
+        toast.error("Fail to fetch data!");
+        _exit = true;
       });
-      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -2419,12 +3087,6 @@ var useMessageList = function useMessageList(userId, getListExamOptions) {
     setMessageFilter(MESSAGE_DEFAULT_FILTER);
     setMessages([]);
   };
-  var handleChangeExamId = function handleChangeExamId(value) {
-    setMessageFilter(_extends({}, messageFilter, {
-      examId: value === null || value === void 0 ? void 0 : value.value,
-      currentPage: 1
-    }));
-  };
   return {
     isLoading: isLoading,
     messageFilter: messageFilter,
@@ -2432,53 +3094,45 @@ var useMessageList = function useMessageList(userId, getListExamOptions) {
     getMessageList: getMessageList,
     setMessages: setMessages,
     resetMessages: resetMessages,
-    handleChangeExamId: handleChangeExamId,
-    handleMarkReadMessage: handleMarkReadMessage,
     handleLoadMore: handleLoadMore
   };
 };
 
 var useChatContainer = function useChatContainer(props) {
-  var _selectedConversation, _selectedConversation2, _selectedConversation3, _selectedConversation4, _selectedConversation5, _selectedConversation6;
+  var _selectedConversation;
   var conversation = props.conversation,
-    userId = props.userId,
-    examId = props.examId,
-    onUpdateLastMessage = props.onUpdateLastMessage,
-    onCreateConversationSuccess = props.onCreateConversationSuccess,
-    onGetMessagesSuccess = props.onGetMessagesSuccess;
+    student = props.student;
   var pusher = useRef();
   var channel = useRef();
   var channelName = useRef();
   var loadingRef = useRef(false);
-  var firstLoadRef = useRef(true);
-  var dispatch = useDispatch();
+  var infoUser = 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 academyDomain = infoUser === null || infoUser === void 0 ? void 0 : infoUser.academyDomain;
   var roles = 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 _state$common2, _state$common2$user;
+    return (state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : (_state$common2$user = _state$common2.user) === null || _state$common2$user === void 0 ? void 0 : _state$common2$user.roles) || [];
+  });
   var _useState = useState(),
     selectedConversation = _useState[0],
     setSelectedConversation = _useState[1];
   var _useState2 = useState(),
-    message = _useState2[0],
-    setMessage = _useState2[1];
-  var _useState3 = useState(MessageStatus.Default),
-    messageStatus = _useState3[0],
-    setMessageStatus = _useState3[1];
+    selectedFile = _useState2[0],
+    setSelectedFile = _useState2[1];
+  var _useState3 = useState(),
+    message = _useState3[0],
+    setMessage = _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),
+  var _useMessageList = useMessageList(),
     isLoadingMessages = _useMessageList.isLoading,
     messages = _useMessageList.messages,
     messageFilter = _useMessageList.messageFilter,
     getMessageList = _useMessageList.getMessageList,
     resetMessages = _useMessageList.resetMessages,
-    handleChangeExamId = _useMessageList.handleChangeExamId,
     setMessages = _useMessageList.setMessages,
     handleLoadMore = _useMessageList.handleLoadMore;
   var handleToggleScrollToEnd = function handleToggleScrollToEnd() {
@@ -2488,309 +3142,150 @@ var useChatContainer = function useChatContainer(props) {
   };
   var handleAddMessage = function handleAddMessage() {
     try {
-      var _message$content, _message$content$trim;
-      var _temp2 = function _temp2() {
+      var _temp6 = function _temp6() {
         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();
+      if (!(selectedConversation !== null && selectedConversation !== void 0 && selectedConversation.id)) return Promise.resolve();
       setScrollToEnd(true);
-      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: message.examCode || "",
-            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 () {});
+      var _temp5 = _catch(function () {
+        function _temp4() {
+          function _temp2() {
+            handleChangeInput('');
+            setSelectedFile(null);
+          }
+          var _temp = function (_message$content) {
+            if (message !== null && message !== void 0 && (_message$content = message.content) !== null && _message$content !== void 0 && _message$content.trim().length) {
+              return Promise.resolve(apiAddMessage(selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id, _extends({}, message))).then(function () {});
+            }
+          }();
+          return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+        }
+        var _temp3 = function () {
+          if (selectedFile !== null && selectedFile !== void 0 && selectedFile.content) {
+            return Promise.resolve(apiAddMessage(selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id, _extends({}, selectedFile, {
+              contentType: 1
+            }))).then(function () {});
+          }
+        }();
+        return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
       }, 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;
+            return (i === null || i === void 0 ? void 0 : i.id) !== 0;
           }));
         });
         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));
+      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  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,
-      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 handleUploadImage = function handleUploadImage(file) {
+    try {
+      console.log({
+        file: file
+      });
+      if (!file) return Promise.resolve();
+      return Promise.resolve(_finally(function () {
+        return _catch(function () {
+          var formData = new FormData();
+          formData.append("upload", file);
+          return Promise.resolve(apiUploadFile(formData)).then(function (res) {
+            var _res$data;
+            setSelectedFile({
+              content: res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.url
+            });
+          });
+        }, function (error) {
+          var _error$response2;
+          setMessages(function (state) {
+            return [].concat(state.filter(function (i) {
+              return (i === null || i === void 0 ? void 0 : i.id) !== 0;
+            }));
+          });
+          toast.error((_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.data);
+        });
+      }, function () {}));
+    } catch (e) {
+      return Promise.reject(e);
+    }
   };
   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: ""
+      content: text
     });
-    handleChangeExamId(val);
   };
-  var messageList = 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 ? 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 && !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;
-        })) 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) {
+    if (!data) return;
+    setScrollToEnd(true);
     setMessages(function (state) {
-      return [].concat(state.map(function (i) {
-        return _extends({}, i, {
-          isRead: data.includes(i.id || 0) ? true : i.isRead
-        });
-      }));
+      return [].concat(state, [data]);
     });
   };
+  var handleCompletedConversation = function handleCompletedConversation(data) {
+    if (!data) return;
+    setSelectedConversation(JSON.parse(data));
+  };
   var handleLoadMoreMessages = function handleLoadMoreMessages() {
-    if (handleLoadMore()) {
-      getMessageConversation();
+    try {
+      if ((selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id) === undefined) return Promise.resolve();
+      return Promise.resolve(handleLoadMore(selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id));
+    } catch (e) {
+      return Promise.reject(e);
     }
   };
+  var handleDeleteSelectedImage = function handleDeleteSelectedImage() {
+    setSelectedFile(null);
+  };
   var cleanupPusher = function cleanupPusher() {
-    var _pusher$current, _pusher$current2;
+    var _pusher$current;
     (_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);
   };
   useEffect(function () {
-    if (PUSHER_CONFIG.cluster && PUSHER_CONFIG.key && !!(selectedConversation !== null && selectedConversation !== void 0 && selectedConversation.id)) {
+    if (PUSHER_CONFIG.cluster && PUSHER_CONFIG.key && academyDomain && !!(selectedConversation !== null && selectedConversation !== void 0 && selectedConversation.id)) {
+      var _headers;
       var token = getAccessToken();
       pusher.current = new Pusher(PUSHER_CONFIG.key, {
         cluster: PUSHER_CONFIG.cluster,
         authEndpoint: BASE_URL + "/api/auth/pusher",
         auth: {
           params: {},
-          headers: {
+          headers: (_headers = {
             Authorization: "Bearer " + token
-          }
+          }, _headers[AcademyHeaders] = academyDomain, _headers)
         }
       });
       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);
+      pusher.current.bind("completed-conversation-event", handleCompletedConversation);
     }
     return cleanupPusher;
-  }, [selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id, messageFilter.examId, examId]);
+  }, [selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id, academyDomain]);
   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();
-        }
-        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));
+        if (!(conversation !== null && conversation !== void 0 && conversation.id)) return Promise.resolve();
+        setSelectedConversation(conversation);
+        return Promise.resolve();
       } catch (e) {
         return Promise.reject(e);
       }
     };
     getConversation();
-  }, [conversation === null || conversation === void 0 ? void 0 : conversation.id, userId]);
-  var handleMarkRead = useCallback(function () {
-    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);
-    }
-  }, [selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id]);
+  }, [conversation === null || conversation === void 0 ? void 0 : conversation.id]);
   var getMessageConversation = function getMessageConversation() {
     try {
-      if (!roles.length) return Promise.resolve();
       if ((selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id) === undefined) return Promise.resolve();
-      return Promise.resolve(_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 (firstLoadRef.current) {
-                return Promise.resolve(handleMarkRead()).then(function () {
-                  firstLoadRef.current = false;
-                });
-              }
-            }();
-            return _temp8 && _temp8.then ? _temp8.then(_temp9) : _temp9(_temp8);
-          }
-        }();
-        if (_temp10 && _temp10.then) return _temp10.then(function () {});
-      }, function () {
-        toast.error("Fail to fetch data!");
-      }));
+      getMessageList(selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id);
+      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
@@ -2799,231 +3294,55 @@ var useChatContainer = function useChatContainer(props) {
     resetMessages();
     setScrollToEnd(true);
   };
+  var messageList = useMemo(function () {
+    var results = messages.map(function (i) {
+      var _i$sender;
+      return _extends({}, i, {
+        isMe: (infoUser === null || infoUser === void 0 ? void 0 : infoUser.id) === ((_i$sender = i.sender) === null || _i$sender === void 0 ? void 0 : _i$sender.id)
+      });
+    });
+    return results;
+  }, [JSON.stringify(messages), infoUser === null || infoUser === void 0 ? void 0 : infoUser.id]);
   useEffect(function () {
     getMessageConversation();
-  }, [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) || "";
+  }, [JSON.stringify(selectedConversation)]);
   return {
     chatHeaderProps: {
-      name: userName,
-      avatar: userAvatar,
-      options: exams,
-      selectedOption: messageFilter.examId,
-      onChangeOption: handleFilterExam
+      fullName: student === null || student === void 0 ? void 0 : student.fullName,
+      examTitle: selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.examTitle,
+      questionOrder: selectedConversation === null || selectedConversation === void 0 ? void 0 : (_selectedConversation = selectedConversation.question) === null || _selectedConversation === void 0 ? void 0 : _selectedConversation.questionOrder,
+      conversationId: selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.id,
+      isCompleted: selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.isCompleted,
+      durationExam: selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.duration,
+      createdAt: selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.createdAt,
+      teacherName: selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.teacherName,
+      roles: roles
     },
     chatListProps: {
       messages: messageList,
-      onAddExamMessage: handleAddExamMessage,
-      onReply: handleReplyMessage,
-      onReTrySendMessage: handleAddMessage
+      onReTrySendMessage: handleAddMessage,
+      roles: roles
     },
     inputProps: {
+      selectedFile: selectedFile,
       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
+      handleDeleteSelectedImage: handleDeleteSelectedImage,
+      handleUploadImage: handleUploadImage,
+      isCompleted: selectedConversation === null || selectedConversation === void 0 ? void 0 : selectedConversation.isCompleted
     },
     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: handleConversationChange,
-    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 = useDispatch();
-  var user = 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 = useState(),
-    selectedConversation = _useState[0],
-    setSelectedConversation = _useState[1];
-  var _useState2 = useState([]),
-    conversations = _useState2[0],
-    setConversations = _useState2[1];
-  var _useState3 = 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 [val].concat(state.slice(0, index), state.slice(index + 1));
-      } else return [val].concat(state);
-    });
-    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;
-      console.log({
-        lastMessage: lastMessage
-      });
-      return [_extends({}, state[updateIndex], {
-        lastMessage: lastMessage
-      })].concat(state.slice(0, updateIndex), 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);
-    }
-  };
-  useEffect(function () {
-    getConversationList();
-  }, [JSON.stringify(conversationFilter), roles.length]);
-  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
+    getMessageConversation: getMessageConversation
   };
 };
 
@@ -3031,10 +3350,12 @@ var usePusherConversation = function usePusherConversation(onNewMessageConversat
   var pusher = useRef();
   var channel = useRef();
   var channelName = useRef();
-  var userId = 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 user = 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 userId = user === null || user === void 0 ? void 0 : user.id;
+  var academyDomain = user === null || user === void 0 ? void 0 : user.academyDomain;
   var handleNewMessageConversationCreated = function handleNewMessageConversationCreated(data) {
     onNewMessageConversation === null || onNewMessageConversation === void 0 ? void 0 : onNewMessageConversation(data);
   };
@@ -3047,16 +3368,17 @@ var usePusherConversation = function usePusherConversation(onNewMessageConversat
     channelName.current && pusher.current && pusher.current.unsubscribe(channelName.current);
   };
   useEffect(function () {
-    if (PUSHER_CONFIG.cluster && PUSHER_CONFIG.key && !!userId) {
+    if (PUSHER_CONFIG.cluster && PUSHER_CONFIG.key && academyDomain && !!userId) {
+      var _headers;
       var token = getAccessToken$1();
       pusher.current = new Pusher(PUSHER_CONFIG.key, {
         cluster: PUSHER_CONFIG.cluster,
         authEndpoint: BASE_URL + "/api/auth/pusher",
         auth: {
           params: {},
-          headers: {
+          headers: (_headers = {
             Authorization: "Bearer " + token
-          }
+          }, _headers[AcademyHeaders] = academyDomain, _headers)
         }
       });
       channelName.current = "presence-conversation-channel-userId-" + userId;
@@ -3065,18 +3387,18 @@ var usePusherConversation = function usePusherConversation(onNewMessageConversat
       channel.current.bind("message-conversation-read-event", handleReadMessageConversation);
     }
     return cleanupPusher;
-  }, [userId]);
+  }, [userId, academyDomain]);
   return {};
 };
 
-var _excluded$1 = ["defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
+var _excluded$2 = ["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);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var initialValues = Array.isArray(value) ? options.filter(function (i) {
     return value.includes(i.value);
   }) : isMulti ? options.filter(function (i) {
@@ -3094,7 +3416,7 @@ var CustomCreatable = function CustomCreatable(_ref) {
   }, rest));
 };
 
-var _excluded$2 = ["isDefault", "defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
+var _excluded$3 = ["isDefault", "defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
 var CustomAsyncSelect = function CustomAsyncSelect(_ref) {
   var isDefault = _ref.isDefault,
     options = _ref.options,
@@ -3102,7 +3424,7 @@ var CustomAsyncSelect = function CustomAsyncSelect(_ref) {
     scrollBottom = _ref.scrollBottom,
     value = _ref.value,
     isMulti = _ref.isMulti,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var initialValues = Array.isArray(value) ? options.filter(function (i) {
     return value.includes(i.value);
   }) : isMulti ? options.filter(function (i) {
@@ -3120,7 +3442,7 @@ var CustomAsyncSelect = function CustomAsyncSelect(_ref) {
   }, 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 styles$1 = {"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
@@ -3163,7 +3485,7 @@ var QuestionView = function QuestionView(_ref) {
   }, React.createElement("div", {
     className: "d-flex flex-grow-1"
   }, React.createElement("div", {
-    className: styles$2["question-title"] + " me-2"
+    className: styles$1["question-title"] + " me-2"
   }, "\uBB38\uC81C ", question.questionOrder + 1, "\uBC88"), React.createElement("div", {
     className: "d-flex flex-grow-1"
   }, Array.from({
@@ -3172,15 +3494,16 @@ var QuestionView = function QuestionView(_ref) {
     return i + 1;
   }).map(function (i) {
     return React.createElement(FormGroup, {
-      className: "d-flex flex-column px-4"
+      className: "d-flex flex-column px-4",
+      key: i
     }, React.createElement(Label, {
       htmlFor: "answer-" + i,
-      className: "" + styles$2["question-label"]
+      className: "" + styles$1["question-label"]
     }, i, "\uBC88"), React.createElement(Input, {
       id: "answer-" + i,
       type: "radio",
       checked: question.correctAnswers.includes(i),
-      onClick: function onClick() {
+      onChange: function onChange() {
         return onChangeCorrectAnswers(i, index);
       },
       disabled: isDisabled
@@ -3246,7 +3569,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     };
   });
   return React.createElement("div", {
-    className: "d-flex " + styles$2["question"] + " " + (isActive ? styles$2["question--active"] : "")
+    className: "d-flex " + styles$1["question"] + " " + (isActive ? styles$1["question--active"] : "")
   }, React.createElement("div", {
     className: "py-1"
   }, React.createElement(PiDotsNineLight, {
@@ -3256,16 +3579,16 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
   }, React.createElement(Row, null, React.createElement(Col, {
     xs: 12
   }, React.createElement("p", {
-    className: "mb-0 " + styles$2["question-article"]
+    className: "mb-0 " + styles$1["question-article"]
   }, "\uBB38\uD56D"), React.createElement("p", {
-    className: "text-center " + styles$2["question-article"]
+    className: "text-center " + styles$1["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"]
+    className: "" + styles$1["question-label"]
   }, t("question_count")), React.createElement(CustomSelect, {
     inputId: "question_count",
     value: questionCount,
@@ -3276,7 +3599,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     xs: 3
   }, React.createElement(FormGroup, null, React.createElement(Label, {
     htmlFor: "category",
-    className: "" + styles$2["question-label"]
+    className: "" + styles$1["question-label"]
   }, t("category")), React.createElement(CustomSelect, {
     inputId: "category",
     value: categoryId,
@@ -3287,7 +3610,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     xs: 3
   }, React.createElement(FormGroup, null, React.createElement(Label, {
     htmlFor: "answer_count",
-    className: "" + styles$2["question-label"]
+    className: "" + styles$1["question-label"]
   }, t("answer_count")), React.createElement(CustomSelect, {
     inputId: "answer_count",
     value: answerCount,
@@ -3400,9 +3723,10 @@ var useExamDetailView = function useExamDetailView(props) {
     } else {
       onChangeExam(_extends({}, exam, {
         questions: [].concat(otherQuestions, questions.map(function (q) {
+          var _q$correctAnswers;
           return _extends({}, q, {
             numberOfAnswers: newAnswerCount,
-            correctAnswers: q.correctAnswers.filter(function (i) {
+            correctAnswers: (_q$correctAnswers = q.correctAnswers) === null || _q$correctAnswers === void 0 ? void 0 : _q$correctAnswers.filter(function (i) {
               return i <= newAnswerCount;
             })
           });
@@ -3543,24 +3867,28 @@ var ExamDetailView = function ExamDetailView(_ref) {
     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"],
+  return React.createElement("div", {
+    className: className + " " + stylesGlobal["custom-row"]
+  }, React.createElement("div", {
+    className: stylesGlobal["custom-col-5"]
+  }, React.createElement("div", {
+    className: 'mb-3'
+  }, React.createElement("label", {
+    className: stylesGlobal["form-label"] + " " + styles$1["question-label"],
     htmlFor: "title"
-  }, t("title")), React.createElement(Input, {
+  }, t("title")), React.createElement("input", {
     disabled: isDisabled,
-    className: "w-100 rounded-2 " + styles$2["question-input"],
+    className: "" + stylesGlobal["form-control"],
     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"],
+  }))), React.createElement("div", {
+    className: stylesGlobal["custom-col-3"]
+  }, React.createElement("div", {
+    className: 'mb-3'
+  }, React.createElement("label", {
+    className: stylesGlobal["form-label"] + " " + styles$1["question-label"],
     htmlFor: "duration"
   }, t("duration")), React.createElement(CustomSelect, {
     inputId: "duration",
@@ -3568,13 +3896,10 @@ var ExamDetailView = function ExamDetailView(_ref) {
     options: durationOptions,
     onChange: handleChangeDuration,
     isDisabled: isDisabled
-  }))), React.createElement(Col, {
-    xs: 4
-  }), examGroupByArticle.map(function (i, index) {
-    return React.createElement(Col, {
-      xs: 12,
+  }))), examGroupByArticle.map(function (i, index) {
+    return React.createElement("div", {
       key: i.article,
-      className: (index === 0 && !isUsingMui ? "mt-3" : "") + " " + (!isUsingMui ? "mb-4" : "")
+      className: stylesGlobal["custom-col-12"] + " " + (index === 0 && !isUsingMui ? "mt-3" : "") + " " + (!isUsingMui ? "mb-4" : "")
     }, React.createElement(ArticleGroupView, Object.assign({}, i, {
       categoryOptions: categoryOptions,
       isActive: index === examGroupByArticle.length - 1,
@@ -3585,20 +3910,74 @@ var ExamDetailView = function ExamDetailView(_ref) {
       onChangeScoreAnswer: handleChangeScoreAnswer,
       isDisabled: isDisabled
     })));
-  }), React.createElement(Col, {
-    xs: 12
-  }, React.createElement(Button, {
+  }), React.createElement("div", {
+    className: stylesGlobal["custom-col-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,
+    className: stylesGlobal["btn-outline-primary"] + " w-100 d-flex justify-content-center align-items-center " + styles$1["question-btn"] + " mt-3",
     onClick: handleAddArticle
   }, React.createElement(FaPlusCircle, {
     className: "me-2"
   }), "\uBB38\uD56D \uCD94\uAC00\uD558\uAE30")));
 };
 
+var useAutoAcademyDomain = function useAutoAcademyDomain(logout, history, superUrls, homeUrl, homeAcademyUrl) {
+  var searchParams = new URLSearchParams(window.location.search);
+  var user = 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 initialAcademySearchParam = function initialAcademySearchParam() {
+    var paramAcademyDomain = searchParams.get("domain");
+    var domain = getAcademyDomain();
+    var pathname = window.location.pathname.toLowerCase();
+    if (!user) return;
+    var academyDomain = user.academyDomain;
+    if (!academyDomain) {
+      if (!superUrls.some(function (i) {
+        return pathname.startsWith(i);
+      })) {
+        pushTo({
+          pathname: homeUrl,
+          search: ""
+        });
+      }
+      if (domain) {
+        searchParams.append("domain", domain);
+        pushTo({
+          pathname: homeUrl,
+          search: ""
+        });
+      }
+    } else {
+      if (superUrls.some(function (i) {
+        return pathname.startsWith(i);
+      })) {
+        pushTo({
+          pathname: homeAcademyUrl,
+          search: ""
+        });
+      }
+      if (paramAcademyDomain && academyDomain.trim().toLocaleLowerCase() != (paramAcademyDomain === null || paramAcademyDomain === void 0 ? void 0 : paramAcademyDomain.trim().toLocaleLowerCase())) {
+        logout();
+      }
+      if (!paramAcademyDomain && academyDomain) {
+        searchParams.append("domain", academyDomain);
+        pushTo(_extends({}, window.location, {
+          search: searchParams.toString()
+        }));
+      }
+    }
+  };
+  var pushTo = function pushTo(data) {
+    if (history.push) history.push(data);else history(data);
+  };
+  useEffect(function () {
+    initialAcademySearchParam();
+  }, [window.location.pathname, user === null || user === void 0 ? void 0 : user.academyDomain]);
+};
+
 var historyCore = createBrowserHistory();
 
-export { ACCESS_TOKEN, BASE_URL, ChatContainer, ChatItemType, CommonAlert, CommonDialog, ConfirmDialog, CustomAsyncSelect, CustomCreatable, CustomPagination, CustomSelect, DATE_MIN_VALUE, DATE_TIME_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 };
+export { ACADEMY_DOMAIN, ACCESS_TOKEN, AcademyHeaders, BASE_URL, ChatContainer, ChatItemType, types as ChatTypes, CommonAlert, CommonDialog, ConfirmDialog, CustomAsyncSelect, CustomCreatable, CustomPagination, CustomSelect, DATE_MIN_VALUE, DATE_TIME_MIN_VALUE, EXAM_CHANNEL, EXAM_STUDENT_CHANNEL, ExamDetailView, ExamEvent, LANGUAGES, LayoutContext, Loading, Login, NotFound, PUSHER_CONFIG, Role, SUPER_ADMIN_BASE_URL, TheAcademyDropdown, TheLanguageDropdown, api, apiUpload, canAccess as canAccessRoute, diffFromNow, formatTime, getAcademyDomain, getAccessToken$1 as getAccessToken, historyCore, i18n, minutesToTimeSpan, setAlert, setLanguage, setLoading, setReFetchUserAcademies, setUser, store, toISOString, useAutoAcademyDomain, useChatContainer, useGoogleSignOut, useLanguage, useLogin, usePusherConversation, useSwitchAcademy, utcToLocalTime };
 //# sourceMappingURL=index.modern.js.map