@esvndev/es-react-template-chat 0.0.86 → 0.0.88

package/dist/index.js

@@ -19,6 +19,7 @@ var isNullOrUndefined$2 = require('@src/utility/hooks/isNullOrUndefined');
 var avatarDefault = require('@core/assets/images/avatars/avatar-blank.png');
 require('@draft-js-plugins/mention/lib/plugin.css');
 require('@draft-js-plugins/emoji/lib/plugin.css');
+var configureStore$1 = require('@store/configureStore');
 var reactRouterDom = require('react-router-dom');
 var reactRedux = require('react-redux');
 
@@ -27396,6 +27397,16 @@ const encodeUUID = (uuid) => {
         return uuid;
     }
 };
+const isValidUrl = (string) => {
+    try {
+        // eslint-disable-next-line no-new
+        new URL(string);
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+};
 // ** Checks if the passed date is today
 const isToday = (value) => {
     const today = new Date();
@@ -27417,7 +27428,7 @@ const formatDateToMonthShort = (value, toTimeForCurrentDay = true) => {
     return new Intl.DateTimeFormat('vi-VN', formatting).format(new Date(value));
 };
 
-const getToken = () => {
+const getToken$1 = () => {
     let accessToken = localStorage.getItem('access_token');
     if (!accessToken) {
         const userData = localStorage.getItem('userData');
@@ -27452,7 +27463,7 @@ const mapPinRecordToMessage = (record) => {
     }
     return record;
 };
-const initialState = {
+const initialState$1 = {
     checkInit: true,
     chatRoomId: undefined,
     contactId: undefined,
@@ -27476,7 +27487,7 @@ const get_history = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_HISTORY, asyn
         const response = await fetch(`${CHAT.URL_API.GET_HISTORY_API}?${queryString}`, {
             method: 'GET',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             }
         });
@@ -27496,7 +27507,7 @@ const get_message_by_group_cursor = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.G
         const response = await fetch(`${CHAT.URL_API.GET_MESSAGE_BY_GROUP_CURSOR_API}/${params.chatRoomId}?${queryString}`, {
             method: 'GET',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             }
         });
@@ -27516,7 +27527,7 @@ const get_history_active = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_HISTOR
         const response = await fetch(`${CHAT.URL_API.GET_HISTORY_API}?${queryString}`, {
             method: 'GET',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             }
         });
@@ -27536,7 +27547,7 @@ const get_info = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_INFO, async (par
         const response = await fetch(`${CHAT.URL_API.GET_INFO_API}?${queryString}`, {
             method: 'GET',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             }
         });
@@ -27555,7 +27566,7 @@ const groups = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GROUP, async (params,
         const response = await fetch(CHAT.URL_API.GROUP_API, {
             method: 'POST',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify(params)
@@ -27575,7 +27586,7 @@ const addMemberGroup = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.MEMBER_GROUP,
         const response = await fetch(CHAT.URL_API.ADD_MEMBER_GROUP, {
             method: 'POST',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify(params)
@@ -27595,7 +27606,7 @@ const sen_message = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.SEN_MESSAGE, asyn
         const response = await fetch(`${CHAT.URL_API.SEN_MESSAGE_API}/${params.id}`, {
             method: 'POST',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify({ ...params.formData, tickerDto: params.tickerDto })
@@ -27615,7 +27626,7 @@ const delete_message = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.DELETE_MESSAGE
         const response = await fetch(`${CHAT.URL_API.MESSAGE_API}/${params.chatRoomId}/delete-message/${params.id}`, {
             method: 'DELETE',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             }
         });
@@ -27634,7 +27645,7 @@ const recall_message = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.RECALL_MESSAGE
         const response = await fetch(`${CHAT.URL_API.MESSAGE_API}/${params.chatRoomId}/recall-message/${params.id}`, {
             method: 'PUT',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify({})
@@ -27654,7 +27665,7 @@ const update_group_avatar = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.UPDATE_GR
         const response = await fetch(CHAT.URL_API.UPDATE_GROUP_AVATAR_API, {
             method: 'PUT',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify(params)
@@ -27675,7 +27686,7 @@ const get_message_by_group = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_MESS
         const response = await fetch(`${CHAT.URL_API.GET_MESSAGE_BY_GROUP_API}/${params.chatRoomId}?${queryString}`, {
             method: 'GET',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             }
         });
@@ -27695,7 +27706,7 @@ const get_message_by_contact = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_ME
         const response = await fetch(`${CHAT.URL_API.GET_MESSAGE_BY_CONTACT_API}/${params.chatRoomId}?${queryString}`, {
             method: 'GET',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             }
         });
@@ -27714,7 +27725,7 @@ const contact_add = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.CONTACT_ADD, asyn
         const response = await fetch(CHAT.URL_API.CONTACT_ADD_API, {
             method: 'POST',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify(params)
@@ -27734,7 +27745,7 @@ const connectChatRoomMemberApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.CONN
         const response = await fetch(CHAT.URL_API.CONNECT_CHAT_ROOM_MEMBER_API, {
             method: 'POST',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify(params)
@@ -27754,7 +27765,7 @@ const get_profile = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_PROFILE, asyn
         const response = await fetch(CHAT.URL_API.GET_PROFILE, {
             method: 'GET',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             }
         });
@@ -27774,7 +27785,7 @@ const get_users = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_USERS, async (p
         const response = await fetch(`${CHAT.URL_API.GET_USERS}?${queryString}`, {
             method: 'GET',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             }
         });
@@ -27794,7 +27805,7 @@ const get_contact = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_CONTACT, asyn
         const response = await fetch(`${CHAT.URL_API.GET_CONTACT_API}?${queryString}`, {
             method: 'GET',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             }
         });
@@ -27813,7 +27824,7 @@ const update_chat_room_member = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.CHAT_
         const response = await fetch(`${CHAT.URL_API.CHAT_ROOM_MEMBER_API}/${params}`, {
             method: 'PUT',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify({})
@@ -27834,7 +27845,7 @@ const getPagingEmployeeApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_PAGI
         const response = await fetch(`${CHAT.URL_API.GET_PAGING_EMPLOYEE_API}?${queryString}`, {
             method: 'GET',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             }
         });
@@ -27853,7 +27864,7 @@ const pinMessageChatRoomApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.PIN_MES
         const response = await fetch(`${CHAT.URL_API.PIN_MESSAGE_CHAT_ROOM_API}/${params.id}`, {
             method: 'POST',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify(params)
@@ -27873,7 +27884,7 @@ const getPinMessageChatRoomApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_
         const response = await fetch(`${CHAT.URL_API.GET_PIN_MESSAGE_CHAT_ROOM_API}/${params}`, {
             method: 'GET',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             }
         });
@@ -27892,7 +27903,7 @@ const deletePinMessageApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.DELETE_PI
         const response = await fetch(`${CHAT.URL_API.PIN_MESSAGE_CHAT_ROOM_API}/${pinId}`, {
             method: 'DELETE',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             }
         });
@@ -27911,7 +27922,7 @@ const updateGroupTagApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.UPDATE_GROU
         const response = await fetch(CHAT.URL_API.UPDATE_GROUP_TAG_API, {
             method: 'PUT',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify(params)
@@ -27931,7 +27942,7 @@ const createReminderApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.CREATE_REMI
         const response = await fetch(CHAT.URL_API.CREATE_REMINDER_API, {
             method: 'POST',
             headers: {
-                'Authorization': `Bearer ${getToken()}`,
+                'Authorization': `Bearer ${getToken$1()}`,
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify(params)
@@ -27948,7 +27959,7 @@ const createReminderApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.CREATE_REMI
 });
 const appChatSlice = toolkit.createSlice({
     name: 'appChat',
-    initialState,
+    initialState: initialState$1,
     reducers: {
         selectChat(state, action) {
             state.chatRoomId = action.payload;
@@ -36641,6 +36652,86 @@ var SvgBecoxyApplication = function (_a) {
                 React__namespace.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
 };
 
+var SvgBecoxyBusinessMan = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
+    return (React__namespace.createElement("svg", __assign$1({ width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
+        title ? React__namespace.createElement("title", { id: titleId }, title) : null,
+        React__namespace.createElement("path", { d: "M10.5 16.875H9.375v-.75A1.125 1.125 0 0 0 8.25 15h-1.5a1.125 1.125 0 0 0-1.125 1.125v.75H4.5A1.125 1.125 0 0 0 3.375 18v4.5A1.125 1.125 0 0 0 4.5 23.625h6a1.125 1.125 0 0 0 1.125-1.125V18a1.125 1.125 0 0 0-1.125-1.125Zm-4.125-.75a.375.375 0 0 1 .375-.375h1.5a.375.375 0 0 1 .375.375v.75h-2.25v-.75Zm4.5 6.375a.375.375 0 0 1-.375.375h-6a.375.375 0 0 1-.375-.375v-2.821l1.125.45v.308a.375.375 0 0 0 .75 0v-.187h3v.188a.375.375 0 0 0 .75 0v-.31l1.125-.45V22.5Zm0-3.629-1.125.45v-.009a.375.375 0 0 0-.75 0v.188H6v-.188a.375.375 0 0 0-.75 0v.01l-1.125-.45V18a.375.375 0 0 1 .375-.375h6a.375.375 0 0 1 .375.375v.871ZM17.759 4.168a2.25 2.25 0 1 0-3.268 0A3.377 3.377 0 0 0 11.626 7.5v5.625a1.5 1.5 0 0 0 1.5 1.5h.375v6.82a1.124 1.124 0 0 0-.75 1.055v.75a.375.375 0 0 0 .375.375h6a.375.375 0 0 0 .375-.375v-.75a1.125 1.125 0 0 0-.75-1.056v-6.819h.375a1.5 1.5 0 0 0 1.5-1.5V7.5a3.377 3.377 0 0 0-2.866-3.332Zm-1.634-3.043a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-3 12.75a.75.75 0 0 1-.75-.75H13.5v.75h-.375Zm2.625 9H13.5V22.5a.375.375 0 0 1 .375-.375h1.875v.75Zm.375-9.375a.375.375 0 0 0-.375.375v7.5h-1.5v-9.75H18v9.75h-1.5v-7.5a.375.375 0 0 0-.375-.375Zm2.625 9.375H16.5v-.75h1.875a.375.375 0 0 1 .375.375v.375Zm.375-9h-.375v-.75h1.125a.75.75 0 0 1-.75.75Zm.75-1.5H18.75V7.5a.375.375 0 1 0-.75 0v3.375h-3.75V7.5a.375.375 0 1 0-.75 0v4.875h-1.125V7.5A2.628 2.628 0 0 1 15 4.875h2.25A2.628 2.628 0 0 1 19.875 7.5v4.875Z", fill: props.color || "currentColor" })));
+};
+
+var SvgBecoxyCar = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
+    return (React__namespace.createElement("svg", __assign$1({ width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
+        title ? React__namespace.createElement("title", { id: titleId }, title) : null,
+        React__namespace.createElement("path", { d: "M4.5 13A2.503 2.503 0 0 0 2 15.5C2 16.878 3.122 18 4.5 18S7 16.878 7 15.5 5.878 13 4.5 13Zm0 4c-.827 0-1.5-.673-1.5-1.5S3.673 14 4.5 14s1.5.673 1.5 1.5S5.327 17 4.5 17ZM19.5 13a2.503 2.503 0 0 0-2.5 2.5c0 1.378 1.122 2.5 2.5 2.5s2.5-1.122 2.5-2.5-1.122-2.5-2.5-2.5Zm0 4c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5 1.5.673 1.5 1.5-.673 1.5-1.5 1.5Z", fill: props.color || "currentColor" }),
+        React__namespace.createElement("path", { d: "M21 10h-.846c-.309 0-.612-.106-.854-.3l-3.94-3.152A2.514 2.514 0 0 0 13.798 6H6.57c-.838 0-1.615.416-2.08 1.113l-.851 1.278A1.369 1.369 0 0 1 2.5 9 2.503 2.503 0 0 0 0 11.5v2C0 14.878 1.122 16 2.5 16a.5.5 0 0 0 0-1c-.827 0-1.5-.673-1.5-1.5v-2c0-.827.673-1.5 1.5-1.5.794 0 1.53-.394 1.971-1.055l.851-1.277A1.499 1.499 0 0 1 6.57 7h7.228c.34 0 .672.117.938.329l3.94 3.15c.417.336.943.52 1.479.52H21c1.467 0 2 1.496 2 2.5 0 .986-.754 1.5-1.5 1.5a.5.5 0 0 0 0 1C22.925 16 24 14.926 24 13.5c0-1.697-1.051-3.5-3-3.5Z", fill: props.color || "currentColor" }),
+        React__namespace.createElement("path", { d: "M17.5 15h-11a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1ZM16.5 10H12V8.5a.5.5 0 0 0-1 0v2a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 0-1ZM9.5 10H6.31l.64-1.276a.5.5 0 0 0-.896-.447l-1 2A.498.498 0 0 0 5.5 11h4a.5.5 0 0 0 0-1ZM13.5 12h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1Z", fill: props.color || "currentColor" })));
+};
+
+var SvgBecoxyLateEarly = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
+    return (React__namespace.createElement("svg", __assign$1({ width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
+        title ? React__namespace.createElement("title", { id: titleId }, title) : null,
+        React__namespace.createElement("g", { clipPath: "url(#becoxy-late-early_svg__a)", fill: props.color || "currentColor" },
+            React__namespace.createElement("path", { d: "M16.539 6.252c1.217 0 2.207-.99 2.207-2.207 0-1.218-.99-2.207-2.207-2.207-1.218 0-2.207.99-2.207 2.207 0 1.218.99 2.207 2.207 2.207Zm0-3.408c.66 0 1.2.54 1.2 1.201 0 .66-.54 1.201-1.2 1.201a1.2 1.2 0 1 1 0-2.402Z" }),
+            React__namespace.createElement("path", { d: "M23.16 4.304a1.41 1.41 0 0 0-1.875.6v.003s0 .004-.003.004l-1.137 2.214-1.456-.366a2.015 2.015 0 0 0-.718-.05l-2.885.345h-.003a1.542 1.542 0 0 0-.772.319l-4.813 3.753h-.003c-.292.232-.477.56-.523.926-.048.369.053.735.285 1.026.278.356.694.544 1.113.544.295 0 .594-.094.842-.286l3.01-2.344.381 3.358v.006c.017.135.047.265.091.39l.01.04c.06.198.03.302-.114.61l-1.362 2.633c-.027.05-.077.08-.124.074l-2.73-.295h-.004a1.56 1.56 0 0 0-1.285.456c-.325.335-.48.792-.422 1.258.09.734.67 1.318 1.382 1.392h.003l3.381.369a2.303 2.303 0 0 0 2.274-1.224l1.604-3.096 2.663 1.734-.147 3.676v.02c0 .198.023.37.07.523.074.245.218.474.413.654.295.279.687.43 1.08.43.17 0 .338-.027.503-.087a1.62 1.62 0 0 0 1.03-1.154 1.29 1.29 0 0 0 .026-.201l.004-.03V22.5l.178-4.172a2.304 2.304 0 0 0-1.043-2.013l-2.043-1.328a.145.145 0 0 1-.057-.097l-.59-5.079.69.181h.004a1.98 1.98 0 0 0 2.257-1.026l1.429-2.794v-.004s0-.003.003-.003a1.404 1.404 0 0 0-.617-1.861ZM13.54 20.29l-3.381-.369h-.007c-.238-.023-.456-.255-.49-.517a.518.518 0 0 1 .145-.429.557.557 0 0 1 .463-.158l2.726.292a1.146 1.146 0 0 0 1.127-.614l1.366-2.643c0-.003 0-.003.003-.007 0-.003.003-.006.003-.01a.287.287 0 0 0 .017-.036l.946.617-1.647 3.186a1.29 1.29 0 0 1-1.27.688Zm6.796-11.274-.98-.255a.805.805 0 0 0-.996.865l.624 5.388c.04.339.225.637.507.822l2.042 1.328c.383.248.607.68.59 1.127l-.177 4.16-.004.02c-.003.033-.006.066-.01.083a.6.6 0 0 1-.382.416.566.566 0 0 1-.553-.127.482.482 0 0 1-.138-.215.8.8 0 0 1-.027-.225l.155-3.78a.813.813 0 0 0-.37-.708l-2.864-1.861a.52.52 0 0 0-.08-.067.781.781 0 0 0-.118-.064l-1.506-.98a.986.986 0 0 1-.44-.714l-.432-3.797a.77.77 0 0 0-.46-.617.76.76 0 0 0-.758.11l-3.354 2.617a.388.388 0 0 1-.547-.078.39.39 0 0 1 .07-.546l4.804-3.75a.56.56 0 0 1 .272-.115l2.884-.345a.978.978 0 0 1 .353.027l1.62.41c.006.002.017.002.023.006a.79.79 0 0 0 .872-.406c0-.003.004-.007.007-.01l1.208-2.355c.1-.188.345-.268.526-.174a.398.398 0 0 1 .171.52l-1.425 2.787a.963.963 0 0 1-1.107.503Z" }),
+            React__namespace.createElement("path", { d: "M9.877 16.607a.425.425 0 0 0 .084-.09.99.99 0 0 0 .275-.587.974.974 0 0 0-.218-.725l-2.375-2.898a.986.986 0 0 0-1.389-.14l-1.952 1.596a.99.99 0 0 0-.359.67 1 1 0 0 0 .215.732l2.361 2.898a.99.99 0 0 0 .671.359c.037.003.07.006.108.006a.985.985 0 0 0 .624-.22l1.955-1.6ZM4.89 14.571c-.01-.013-.01-.033-.01-.04 0-.007.004-.027.02-.04l1.953-1.597c.02-.017.05-.01.067.01l2.368 2.891c0 .004.003.004.003.007.007.01.013.02.01.034 0 .013-.007.023-.017.033a.352.352 0 0 0-.07.07l-1.885 1.54c-.014.01-.034.01-.04.01a.055.055 0 0 1-.04-.02l-2.359-2.898Z" }),
+            React__namespace.createElement("path", { d: "m7.013 15.96 1.21.318a.34.34 0 0 0 .413-.241.336.336 0 0 0-.238-.41l-1.214-.318a.192.192 0 0 1-.135-.17l-.09-1.393a.334.334 0 1 0-.668.044l.09 1.392a.853.853 0 0 0 .631.778ZM9.495 6.058a4.664 4.664 0 0 0-1.05-2.949l.235-.238.462.463a.471.471 0 0 0 .665 0 .468.468 0 0 0 0-.664L8.213 1.077a.468.468 0 0 0-.664 0 .468.468 0 0 0 0 .664l.466.466-.23.238A4.65 4.65 0 0 0 5.287 1.41v-.47h.86c.257 0 .469-.211.469-.47A.471.471 0 0 0 6.147 0h-2.66a.47.47 0 0 0-.47.47c0 .258.212.47.47.47h.859v.469A4.68 4.68 0 0 0 .153 6.058a4.678 4.678 0 0 0 4.672 4.672 4.678 4.678 0 0 0 4.67-4.672Zm-8.403 0a3.736 3.736 0 0 1 3.623-3.73.504.504 0 0 0 .104.013c.037 0 .07-.003.104-.013a3.71 3.71 0 0 1 2.472 1.03c.02.03.04.057.067.08a.41.41 0 0 0 .074.06 3.72 3.72 0 0 1 1.02 2.56 3.739 3.739 0 0 1-3.734 3.733 3.736 3.736 0 0 1-3.73-3.733Z" }),
+            React__namespace.createElement("path", { d: "M5.235 6.065V3.626a.42.42 0 0 0-.839 0v2.439a.42.42 0 0 0 .839 0Z" })),
+        React__namespace.createElement("defs", null,
+            React__namespace.createElement("clipPath", { id: "becoxy-late-early_svg__a" },
+                React__namespace.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
+};
+
+var SvgBecoxyMoreTime = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
+    return (React__namespace.createElement("svg", __assign$1({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
+        title ? React__namespace.createElement("title", { id: titleId }, title) : null,
+        React__namespace.createElement("path", { fill: "currentColor", d: "M10 8v6l4.7 2.9.8-1.2-4-2.4V8z" }),
+        React__namespace.createElement("path", { fill: "currentColor", d: "M17.92 12A6.957 6.957 0 0 1 11 20c-3.9 0-7-3.1-7-7s3.1-7 7-7c.7 0 1.37.1 2 .29V4.23c-.64-.15-1.31-.23-2-.23-5 0-9 4-9 9s4 9 9 9a8.963 8.963 0 0 0 8.94-10h-2.02z" }),
+        React__namespace.createElement("path", { fill: "currentColor", d: "M20 5V2h-2v3h-3v2h3v3h2V7h3V5z" })));
+};
+
+var SvgBecoxySwitchShift = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
+    return (React__namespace.createElement("svg", __assign$1({ width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
+        title ? React__namespace.createElement("title", { id: titleId }, title) : null,
+        React__namespace.createElement("g", { clipPath: "url(#becoxy-switch-shift_svg__a)" },
+            React__namespace.createElement("path", { d: "M14.459 2.852a.375.375 0 0 1 .427-.313 6.349 6.349 0 0 1 4.098 2.433 6.36 6.36 0 0 1 1.303 3.605l.537-.544a.375.375 0 0 1 .533.527l-1.211 1.228a.374.374 0 0 1-.53.003L18.387 8.58a.375.375 0 1 1 .527-.534l.625.617a5.613 5.613 0 0 0-1.152-3.235 5.602 5.602 0 0 0-3.616-2.148.375.375 0 0 1-.313-.428ZM9.228 20.72a5.602 5.602 0 0 1-3.616-2.147 5.613 5.613 0 0 1-1.152-3.236l.625.617a.375.375 0 0 0 .527-.533l-1.228-1.212a.375.375 0 0 0-.53.004L2.642 15.44a.375.375 0 1 0 .534.527l.537-.544a6.36 6.36 0 0 0 1.303 3.605 6.348 6.348 0 0 0 4.098 2.433.376.376 0 0 0 .427-.313.375.375 0 0 0-.313-.428Zm-2.604-7.612A6.491 6.491 0 0 1 .141 6.624 6.491 6.491 0 0 1 6.624.141a6.491 6.491 0 0 1 6.484 6.483 6.491 6.491 0 0 1-6.484 6.484Zm0-.75a5.74 5.74 0 0 0 5.734-5.734A5.74 5.74 0 0 0 6.624.891 5.74 5.74 0 0 0 .891 6.624a5.74 5.74 0 0 0 5.733 5.734Zm0-.319A5.42 5.42 0 0 1 1.21 6.624 5.42 5.42 0 0 1 6.624 1.21a5.42 5.42 0 0 1 5.415 5.414 5.42 5.42 0 0 1-5.415 5.415Zm-2.646-1.576a.375.375 0 0 1 .644.374c.5.239 1.05.39 1.627.437v-.263a.375.375 0 0 1 .75 0v.263a4.63 4.63 0 0 0 1.627-.437.375.375 0 0 1 .645-.374c.466-.322.87-.726 1.192-1.192a.375.375 0 0 1 .374-.645c.239-.5.39-1.048.437-1.627h-.263a.375.375 0 0 1 0-.75h.263a4.627 4.627 0 0 0-.437-1.627.374.374 0 0 1-.476-.155.375.375 0 0 1 .102-.49A4.704 4.704 0 0 0 9.27 2.786a.375.375 0 0 1-.644-.373A4.629 4.629 0 0 0 7 1.975v.262a.375.375 0 0 1-.75 0v-.262a4.63 4.63 0 0 0-1.627.437.375.375 0 0 1-.644.373c-.466.322-.87.727-1.193 1.193a.375.375 0 0 1-.373.644c-.239.5-.391 1.049-.437 1.627h.262a.375.375 0 0 1 0 .75h-.262c.046.579.198 1.127.436 1.627a.375.375 0 0 1 .374.645c.322.466.727.87 1.193 1.192Zm.115-2.377a.375.375 0 0 1 .137-.512l1.468-.848a.933.933 0 0 1 .551-.954V3.107a.375.375 0 0 1 .75 0v2.665a.933.933 0 0 1-.375 1.784.926.926 0 0 1-.55-.181l-1.469.848a.373.373 0 0 1-.512-.137Zm2.713-1.462a.182.182 0 1 0-.364 0 .182.182 0 0 0 .364 0ZM23.86 17.376a6.491 6.491 0 0 1-6.483 6.483 6.491 6.491 0 0 1-6.484-6.483 6.491 6.491 0 0 1 6.484-6.484 6.49 6.49 0 0 1 6.483 6.484Zm-6.483 5.733c.736 0 1.44-.14 2.088-.393v-1.86a.375.375 0 0 1 .75 0v1.5c.316-.18.613-.39.888-.626v-.974c0-1.04-.847-1.887-1.887-1.887h-.86l-.633 1.537a.375.375 0 0 1-.693 0l-.632-1.537h-.86c-1.041 0-1.888.846-1.888 1.887v.974c.275.235.573.445.889.626v-1.5a.375.375 0 0 1 .75 0v1.86a5.705 5.705 0 0 0 2.088.393Zm5.733-5.733a5.74 5.74 0 0 0-5.733-5.734 5.74 5.74 0 0 0-5.734 5.734c0 1.352.471 2.597 1.258 3.578v-.198a2.64 2.64 0 0 1 2.636-2.637h1.112c.152 0 .29.092.347.232l.38.926.381-.926a.375.375 0 0 1 .347-.232h1.112a2.64 2.64 0 0 1 2.637 2.637v.199a5.707 5.707 0 0 0 1.257-3.58Zm-3.424-1.818c0 1.36-1.036 2.465-2.31 2.465-1.273 0-2.308-1.106-2.308-2.465 0-1.359 1.035-2.465 2.309-2.465 1.273 0 2.309 1.106 2.309 2.465Zm-.75 0c0-.945-.7-1.715-1.56-1.715-.859 0-1.558.77-1.558 1.715 0 .946.699 1.715 1.559 1.715s1.559-.77 1.559-1.715Z", fill: props.color || "currentColor" })),
+        React__namespace.createElement("defs", null,
+            React__namespace.createElement("clipPath", { id: "becoxy-switch-shift_svg__a" },
+                React__namespace.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
+};
+
+var SvgBecoxyTimeExplanation = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
+    return (React__namespace.createElement("svg", __assign$1({ width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
+        title ? React__namespace.createElement("title", { id: titleId }, title) : null,
+        React__namespace.createElement("g", { clipPath: "url(#becoxy-time-explanation_svg__a)", fill: props.color || "currentColor" },
+            React__namespace.createElement("path", { d: "M13.115 22.523a.264.264 0 0 1-.267-.267v-6.635c0-.149.117-.266.267-.266.149 0 .266.117.266.266v6.635c0 .15-.122.267-.266.267ZM15.381 22.523a.264.264 0 0 1-.266-.267v-6.635c0-.149.117-.266.266-.266.15 0 .267.117.267.266v6.635c0 .15-.117.267-.267.267ZM17.653 22.523a.264.264 0 0 1-.266-.267v-6.635c0-.149.117-.266.266-.266.15 0 .267.117.267.266v6.635c0 .15-.123.267-.267.267ZM19.92 22.523a.264.264 0 0 1-.267-.267v-6.635c0-.149.118-.266.267-.266.15 0 .267.117.267.266v6.635c0 .15-.118.267-.267.267Z" }),
+            React__namespace.createElement("path", { d: "M22.635 23.67h-12.24a1.154 1.154 0 0 1-1.152-1.153v-8.293c0-.635.517-1.152 1.152-1.152h1.648c.149 0 .266.117.266.267 0 .149-.117.266-.266.266h-1.648a.62.62 0 0 0-.619.619v8.293a.62.62 0 0 0 .619.619h12.24a.62.62 0 0 0 .618-.619v-8.293a.62.62 0 0 0-.618-.619h-1.648a.264.264 0 0 1-.267-.266c0-.15.117-.267.267-.267h1.648c.634 0 1.152.517 1.152 1.152v8.293c0 .635-.518 1.152-1.152 1.152ZM19.7 13.604h-2.544a.264.264 0 0 1-.266-.266c0-.15.117-.267.266-.267h2.544c.15 0 .267.117.267.267 0 .149-.117.266-.267.266Zm-3.824 0h-2.544a.264.264 0 0 1-.266-.266c0-.15.117-.267.266-.267h2.544a.267.267 0 0 1 0 .533Z" }),
+            React__namespace.createElement("path", { d: "M22.336 22.523H10.699a.264.264 0 0 1-.267-.267v-6.635c0-.149.117-.266.267-.266H22.34c.15 0 .267.117.267.266v6.635a.272.272 0 0 1-.272.267Zm-11.37-.534h11.109v-6.101h-11.11v6.101ZM12.688 14.95a.906.906 0 0 1-.907-.907v-1.414a.906.906 0 1 1 1.814 0v1.414a.906.906 0 0 1-.907.906Zm0-2.694a.371.371 0 0 0-.373.373v1.414c0 .208.165.373.373.373a.371.371 0 0 0 .373-.373v-1.414a.371.371 0 0 0-.373-.373ZM16.517 14.95a.906.906 0 0 1-.906-.907v-1.414a.906.906 0 1 1 1.813 0v1.414a.906.906 0 0 1-.907.906Zm0-2.694a.371.371 0 0 0-.373.373v1.414c0 .208.165.373.373.373a.371.371 0 0 0 .374-.373v-1.414a.371.371 0 0 0-.374-.373ZM20.347 14.95a.906.906 0 0 1-.907-.907v-1.414a.906.906 0 1 1 1.813 0v1.414a.906.906 0 0 1-.906.906Zm0-2.694a.371.371 0 0 0-.374.373v1.414c0 .208.166.373.374.373a.371.371 0 0 0 .373-.373v-1.414a.374.374 0 0 0-.373-.373ZM14.923 13.605a.264.264 0 0 1-.267-.266V4.81a.672.672 0 0 0-.667-.672h-2.453v1.488c0 .149-.117.266-.267.266a.264.264 0 0 1-.266-.266V4.16c0-.016 0-.032-.006-.048 0-.016-.005-.032-.005-.048a.632.632 0 0 0-.027-.117.254.254 0 0 1 .048-.23.27.27 0 0 1 .214-.106h2.762c.662 0 1.2.538 1.2 1.205v8.528a.263.263 0 0 1-.266.261Z" }),
+            React__namespace.createElement("path", { d: "M10.64 23.67H1.413c-.661 0-1.2-.545-1.2-1.206V4.811c0-.662.539-1.206 1.2-1.206h2.763c.085 0 .16.038.213.107.048.064.07.15.048.23a.764.764 0 0 0-.021.117c-.005.016-.005.032-.005.048s-.006.032-.006.048V5.62c0 .15-.117.267-.266.267a.264.264 0 0 1-.267-.267V4.14H1.42a.668.668 0 0 0-.667.672v17.653c0 .368.299.667.667.667h9.221c.15 0 .267.117.267.266 0 .15-.118.272-.267.272ZM13.168 12.475a.264.264 0 0 1-.267-.267V5.893H11.27a.264.264 0 0 1-.266-.266c0-.15.117-.267.266-.267h1.899c.15 0 .267.117.267.267v6.581a.267.267 0 0 1-.267.267Z" }),
+            React__namespace.createElement("path", { d: "M9.515 21.915h-7.28a.264.264 0 0 1-.267-.267V5.627c0-.15.117-.267.267-.267h1.904c.149 0 .266.117.266.267 0 .149-.117.266-.266.266H2.5v15.488h7.014a.267.267 0 0 1 0 .533Z" }),
+            React__namespace.createElement("path", { d: "M5.333 10.315H4.107a.62.62 0 0 1-.619-.619V8.288a.62.62 0 0 1 .619-.619h1.226a.62.62 0 0 1 .619.619v1.408a.62.62 0 0 1-.619.619ZM4.107 8.203a.084.084 0 0 0-.086.085v1.408c0 .048.038.085.086.085h1.226a.084.084 0 0 0 .086-.085V8.288a.084.084 0 0 0-.086-.085H4.107ZM5.333 14.96H4.107a.62.62 0 0 1-.619-.619v-1.408a.62.62 0 0 1 .619-.618h1.226a.62.62 0 0 1 .619.618v1.408a.62.62 0 0 1-.619.619Zm-1.226-2.112a.084.084 0 0 0-.086.085v1.408c0 .048.038.086.086.086h1.226a.084.084 0 0 0 .086-.086v-1.408a.084.084 0 0 0-.086-.085H4.107ZM5.333 19.605H4.107a.62.62 0 0 1-.619-.618v-1.408a.62.62 0 0 1 .619-.619h1.226a.62.62 0 0 1 .619.619v1.408a.62.62 0 0 1-.619.618Zm-1.226-2.112a.084.084 0 0 0-.086.086v1.408c0 .048.038.085.086.085h1.226a.084.084 0 0 0 .086-.085v-1.408a.084.084 0 0 0-.086-.086H4.107ZM11.355 8.528H7.056a.264.264 0 0 1-.267-.267c0-.149.118-.266.267-.266h4.299c.15 0 .266.117.266.266 0 .15-.117.267-.266.267ZM9.925 9.99H7.061a.264.264 0 0 1-.266-.267c0-.15.117-.267.266-.267h2.864a.267.267 0 0 1 0 .533ZM8.48 13.173H7.061a.264.264 0 0 1-.266-.266c0-.15.117-.267.266-.267H8.48a.267.267 0 0 1 0 .533ZM8.005 14.635h-.949a.264.264 0 0 1-.267-.267c0-.15.118-.267.267-.267h.95c.149 0 .266.118.266.267 0 .15-.117.267-.267.267ZM8.48 17.819H7.061a.264.264 0 0 1-.266-.267c0-.15.117-.267.266-.267H8.48a.267.267 0 0 1 0 .533ZM8.005 19.28h-.949a.264.264 0 0 1-.267-.267c0-.149.118-.266.267-.266h.95c.149 0 .266.117.266.266 0 .15-.117.267-.267.267ZM11.27 6.427H4.132a.264.264 0 0 1-.266-.267V4.224c0-.923.746-1.67 1.669-1.67h.027v-.08c0-1.178.96-2.138 2.138-2.138 1.179 0 2.139.96 2.139 2.139v.08h.027c.922 0 1.669.746 1.669 1.669V6.16c0 .15-.123.267-.267.267ZM4.4 5.893h6.597V4.224c0-.63-.512-1.136-1.136-1.136h-.325a.264.264 0 0 1-.203-.096.292.292 0 0 1-.058-.219A1.607 1.607 0 0 0 7.696.87a1.607 1.607 0 0 0-1.579 1.904.25.25 0 0 1-.058.219.272.272 0 0 1-.203.096h-.325c-.63 0-1.136.512-1.136 1.136l.005 1.67Z" }),
+            React__namespace.createElement("path", { d: "M7.701 3.621A1.154 1.154 0 0 1 6.55 2.47c0-.634.518-1.152 1.152-1.152.635 0 1.152.518 1.152 1.152 0 .635-.517 1.152-1.152 1.152Zm0-1.765a.62.62 0 0 0 0 1.237.624.624 0 0 0 .62-.624.615.615 0 0 0-.62-.613ZM16.384 19.488a.25.25 0 0 1-.187-.08l-.218-.219a.264.264 0 0 1 0-.378.264.264 0 0 1 .378 0l.032.032.379-.379a.264.264 0 0 1 .379 0 .264.264 0 0 1 0 .379l-.566.565a.293.293 0 0 1-.197.08ZM22.336 18.107H10.699a.264.264 0 0 1-.267-.267c0-.15.117-.267.267-.267H22.34c.15 0 .267.118.267.267 0 .15-.123.267-.272.267ZM22.336 20.304H10.699a.264.264 0 0 1-.267-.267c0-.149.117-.266.267-.266H22.34c.15 0 .267.117.267.266 0 .15-.123.267-.272.267Z" })),
+        React__namespace.createElement("defs", null,
+            React__namespace.createElement("clipPath", { id: "becoxy-time-explanation_svg__a" },
+                React__namespace.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
+};
+
+var SvgBecoxyWallet = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
+    return (React__namespace.createElement("svg", __assign$1({ width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
+        title ? React__namespace.createElement("title", { id: titleId }, title) : null,
+        React__namespace.createElement("g", { clipPath: "url(#becoxy-wallet_svg__a)", fill: props.color || "currentColor" },
+            React__namespace.createElement("path", { d: "M23.654 10.89 18.015.187a.358.358 0 0 0-.479-.148L2.186 8.129a.354.354 0 0 0-.063.042H.661a.354.354 0 0 0-.355.355v15.12c0 .195.159.354.355.354h15.293a.354.354 0 1 0 0-.709H1.014V8.88h19.68c.43 0 .78.35.78.78v4.181h-.809a.356.356 0 0 0 .006-.061v-.577a.354.354 0 1 0-.709 0v.577c0 .02.002.041.006.061h-1.163c-.613 0-1.11.498-1.11 1.11v2.269c0 .612.497 1.11 1.11 1.11h1.157v.3a.354.354 0 1 0 .709 0v-.3h.803v4.182c0 .43-.35.78-.78.78h-2.976a.354.354 0 0 0 0 .708h2.977a1.49 1.49 0 0 0 1.488-1.488V18.33h.402a.354.354 0 0 0 .354-.354v-3.78a.354.354 0 0 0-.354-.355h-.402v-1.776l1.323-.697a.358.358 0 0 0 .148-.479ZM4.248 8.17h-.622L17.553.832l2.221 4.215a.354.354 0 0 0-.302-.078l-.583.121-.626-1.187a.354.354 0 0 0-.478-.149c-.363.192-.779.23-1.17.109a1.525 1.525 0 0 1-.905-.751.358.358 0 0 0-.479-.148s-8.923 4.711-8.95 4.742c0 0-1.99.429-2.033.465ZM18.167 5.24l-9.46 1.963 6.566-3.46c.282.377.674.655 1.132.797.458.142.938.134 1.384-.018l.378.718Zm-3.196 2.931 1.302-.27c.035.093.077.183.124.27h-1.425Zm2.297 0a1.526 1.526 0 0 1-.4-.755.358.358 0 0 0-.42-.275l-4.78.992a.353.353 0 0 0-.102.038H7.53l11.74-2.436.506 2.436h-2.507Zm3.427 0h-.196L19.9 5.286l1.672 3.172a1.48 1.48 0 0 0-.877-.287Zm1.535 6.379v3.071h-3.425a.402.402 0 0 1-.402-.401v-2.268c0-.222.18-.402.402-.402h3.425Zm-.047-3.286V9.66l-.001-.044.68 1.29-.679.358Z" }),
+            React__namespace.createElement("path", { d: "M2.52 21.785a.355.355 0 0 0-.702.065v.284c0 .195.159.354.354.354h.284a.354.354 0 0 0 .065-.703ZM2.172 14.578a.354.354 0 0 0-.354.355v.576a.354.354 0 1 0 .709 0v-.576a.354.354 0 0 0-.355-.355ZM2.172 18.037a.354.354 0 0 0-.354.355v.576a.354.354 0 1 0 .709 0v-.576a.354.354 0 0 0-.355-.355ZM2.172 16.308a.354.354 0 0 0-.354.354v.576a.354.354 0 1 0 .709 0v-.576a.354.354 0 0 0-.355-.354ZM2.172 19.766a.354.354 0 0 0-.354.355v.576a.354.354 0 1 0 .709 0v-.576a.354.354 0 0 0-.355-.355ZM2.172 11.12a.354.354 0 0 0-.354.354v.576a.354.354 0 0 0 .709 0v-.576a.354.354 0 0 0-.355-.354ZM2.172 12.849a.354.354 0 0 0-.354.354v.577a.354.354 0 1 0 .709 0v-.577a.354.354 0 0 0-.355-.354ZM2.456 9.683h-.284a.354.354 0 0 0-.354.354v.284a.354.354 0 0 0 .703.065.354.354 0 0 0-.065-.703ZM15.639 9.683h-.55a.354.354 0 1 0 0 .709h.55a.354.354 0 0 0 0-.709ZM4.104 9.683h-.55a.354.354 0 1 0 0 .709h.55a.354.354 0 0 0 0-.709ZM18.934 9.683h-.549a.354.354 0 0 0 0 .709h.55a.354.354 0 1 0 0-.709ZM17.287 9.683h-.55a.354.354 0 1 0 0 .709h.55a.354.354 0 0 0 0-.709ZM9.047 9.683h-.549a.354.354 0 1 0 0 .709h.55a.354.354 0 0 0 0-.709ZM12.343 9.683h-.55a.354.354 0 0 0 0 .709h.55a.354.354 0 1 0 0-.709ZM13.99 9.683h-.549a.354.354 0 0 0 0 .709h.55a.354.354 0 1 0 0-.709ZM10.695 9.683h-.55a.354.354 0 1 0 0 .709h.55a.354.354 0 0 0 0-.709ZM7.4 9.683h-.55a.354.354 0 1 0 0 .709h.55a.354.354 0 0 0 0-.709ZM5.752 9.683h-.55a.354.354 0 1 0 0 .709h.55a.354.354 0 0 0 0-.709ZM20.317 9.683h-.284a.354.354 0 0 0-.065.703.355.355 0 0 0 .703-.065v-.284a.354.354 0 0 0-.354-.354ZM20.317 19.43a.354.354 0 0 0-.355.354v.576a.354.354 0 1 0 .709 0v-.576a.354.354 0 0 0-.354-.355ZM20.317 11.12a.354.354 0 0 0-.355.354v.576a.354.354 0 1 0 .709 0v-.576a.354.354 0 0 0-.354-.354ZM20.317 21.496a.354.354 0 0 0-.349.29.354.354 0 0 0 .065.702h.284a.354.354 0 0 0 .354-.354v-.284a.354.354 0 0 0-.354-.354ZM17.287 21.78h-.55a.354.354 0 1 0 0 .708h.55a.354.354 0 1 0 0-.709ZM13.99 21.78h-.549a.354.354 0 0 0 0 .708h.55a.354.354 0 1 0 0-.709ZM7.4 21.78h-.55a.354.354 0 0 0 0 .708h.55a.354.354 0 1 0 0-.709ZM12.343 21.78h-.55a.354.354 0 0 0 0 .708h.55a.354.354 0 1 0 0-.709ZM10.695 21.78h-.55a.354.354 0 1 0 0 .708h.55a.354.354 0 1 0 0-.709ZM15.639 21.78h-.55a.354.354 0 1 0 0 .708h.55a.354.354 0 1 0 0-.709ZM4.104 21.78h-.55a.354.354 0 0 0 0 .708h.55a.354.354 0 1 0 0-.709ZM5.752 21.78h-.55a.354.354 0 0 0 0 .708h.55a.354.354 0 1 0 0-.709ZM18.934 21.78h-.549a.354.354 0 0 0 0 .708h.55a.354.354 0 1 0 0-.709ZM9.047 21.78h-.549a.354.354 0 0 0 0 .708h.55a.354.354 0 1 0 0-.709ZM20.316 14.975a1.112 1.112 0 0 0 0 2.22 1.112 1.112 0 0 0 0-2.22Zm0 1.512a.402.402 0 1 1 .001-.804.402.402 0 0 1 0 .804ZM11.623 15.731h-.473a1.064 1.064 0 0 1 0-2.126h1.89a.354.354 0 1 0 0-.709h-1.063v-.59a.354.354 0 1 0-.709 0v.59h-.118c-.977 0-1.772.795-1.772 1.772s.795 1.772 1.772 1.772h.473a1.064 1.064 0 0 1 0 2.126h-1.89a.354.354 0 1 0 0 .709h1.535v.59a.354.354 0 1 0 .709 0v-.626a1.775 1.775 0 0 0 1.417-1.736c0-.977-.794-1.772-1.771-1.772Z" })),
+        React__namespace.createElement("defs", null,
+            React__namespace.createElement("clipPath", { id: "becoxy-wallet_svg__a" },
+                React__namespace.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
+};
+
 var SvgBecoxyWriting = function (_a) {
     var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
     return (React__namespace.createElement("svg", __assign$1({ width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
@@ -36663,6 +36754,14 @@ var SvgCopy = function (_a) {
         React__namespace.createElement("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })));
 };
 
+var SvgCreditCard = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
+    return (React__namespace.createElement("svg", __assign$1({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "credit-card_svg__feather credit-card_svg__feather-credit-card", "aria-labelledby": titleId }, props),
+        title ? React__namespace.createElement("title", { id: titleId }, title) : null,
+        React__namespace.createElement("rect", { x: 1, y: 4, width: 22, height: 16, rx: 2, ry: 2 }),
+        React__namespace.createElement("path", { d: "M1 10h22" })));
+};
+
 var SvgEdit3 = function (_a) {
     var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
     return (React__namespace.createElement("svg", __assign$1({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "edit-3_svg__feather edit-3_svg__feather-edit-3", "aria-labelledby": titleId }, props),
@@ -36711,6 +36810,13 @@ var SvgLink = function (_a) {
         React__namespace.createElement("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })));
 };
 
+var SvgListCheck = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
+    return (React__namespace.createElement("svg", __assign$1({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, fill: "currentColor", className: "list-check_svg__bi list-check_svg__bi-list-check", viewBox: "0 0 16 16", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
+        title ? React__namespace.createElement("title", { id: titleId }, title) : null,
+        React__namespace.createElement("path", { fillRule: "evenodd", d: "M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z" })));
+};
+
 var SvgLogOut = function (_a) {
     var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
     return (React__namespace.createElement("svg", __assign$1({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "log-out_svg__feather log-out_svg__feather-log-out", "aria-labelledby": titleId }, props),
@@ -69870,7 +69976,7 @@ const ModalGroupInfo = (props) => {
     const [openModalPreview, setOpenModalPreview] = React.useState(false);
     const [selectedMessage, setSelectedMessage] = React.useState(null);
     const uploading = (args) => {
-        args.currentRequest.setRequestHeader("Authorization", `Bearer ${getToken()}`);
+        args.currentRequest.setRequestHeader("Authorization", `Bearer ${getToken$1()}`);
     };
     const uploadFailure = () => {
         notificationError(t('UploadFail'));
@@ -71823,43 +71929,153 @@ const UserProfileSidebar = (props) => {
     return (jsxRuntime.jsxs("div", { className: classnames('user-profile-sidebar', { show: userSidebarRight === true }), children: [jsxRuntime.jsxs("header", { className: 'user-profile-header', children: [jsxRuntime.jsx("span", { className: 'close-icon', onClick: handleUserSidebarRight, children: jsxRuntime.jsx(SvgX, { fontSize: 14 }) }), jsxRuntime.jsxs("div", { className: 'header-profile-sidebar', children: [jsxRuntime.jsx(AvatarDefault, { className: 'box-shadow-1 avatar-border', size: 'xl', status: user.status === 1 ? 'online' : 'offline', img: userAvatar, imgHeight: '70', imgWidth: '70', color: 'light-secondary' }), jsxRuntime.jsx("h4", { className: 'chat-user-name', children: user.name }), jsxRuntime.jsx("span", { className: 'user-post', children: user.code })] })] }), jsxRuntime.jsx(PerfectScrollbar, { className: 'user-profile-sidebar-area', options: { wheelPropagation: false }, children: jsxRuntime.jsxs("div", { className: 'personal-info', children: [jsxRuntime.jsx("h6", { className: 'section-label mb-1 mt-3', children: t('Personal Information') }), jsxRuntime.jsxs("ul", { className: 'list-unstyled', children: [jsxRuntime.jsxs("li", { className: 'mb-1', children: [jsxRuntime.jsx(SvgMail, { className: 'me-75', fontSize: 17 }), jsxRuntime.jsx("span", { className: 'align-middle', children: user?.email })] }), jsxRuntime.jsxs("li", { className: 'mb-1', children: [jsxRuntime.jsx(SvgPhoneCall, { className: 'me-50', fontSize: 17 }), jsxRuntime.jsx("span", { className: 'align-middle', children: user?.phone })] })] })] }) })] }));
 };
 
+const initialState = {
+    dataUploadFile: [],
+    status: false
+};
+// Helper function to get token
+const getToken = () => {
+    let accessToken = localStorage.getItem('access_token');
+    if (!accessToken) {
+        const userData = localStorage.getItem('userData');
+        if (userData) {
+            accessToken = JSON.parse(userData).id_token;
+        }
+    }
+    return accessToken;
+};
+const baseUrl = process.env.REACT_APP_BASE_URL;
+const uploadFileApi = toolkit.createAsyncThunk(UPLOADFILE.ACTION_TYPES.UPLOAD_FILE, async (params, thunkAPI) => {
+    try {
+        const token = getToken();
+        const response = await fetch(`${baseUrl}/api/file/upload`, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${token}`
+            },
+            body: params
+        });
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+        }
+        return await response.json();
+    }
+    catch (error) {
+        return thunkAPI.rejectWithValue({ error: error.message || error });
+    }
+});
+const uploadImageApi = toolkit.createAsyncThunk(UPLOADFILE.ACTION_TYPES.UPLOAD_IMAGE, async (params, thunkAPI) => {
+    try {
+        const token = getToken();
+        const response = await fetch(`${baseUrl}/api/image/upload`, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${token}`
+            },
+            body: params
+        });
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+        }
+        return await response.json();
+    }
+    catch (error) {
+        return thunkAPI.rejectWithValue({ error: error.message || error });
+    }
+});
+const uploadMultiFileApi = toolkit.createAsyncThunk(UPLOADFILE.ACTION_TYPES.UPLOAD_FILE_MULTI, async (params, thunkAPI) => {
+    try {
+        const token = getToken();
+        const response = await fetch(`${baseUrl}/api/file/upload-mutil`, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${token}`
+            },
+            body: params
+        });
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+        }
+        return await response.json();
+    }
+    catch (error) {
+        return thunkAPI.rejectWithValue({ error: error.message || error });
+    }
+});
+const uploadFileSlice = toolkit.createSlice({
+    name: 'uploadFile',
+    initialState,
+    reducers: {
+        handleAddUploadFile: (state, action) => {
+            state.dataUploadFile.push(action.payload);
+        }
+    },
+    extraReducers: builder => {
+        builder.addCase(uploadImageApi.pending, (state) => {
+            console.log(state);
+        });
+    }
+});
+const { handleAddUploadFile } = uploadFileSlice.actions;
+
+const useUploadFile = () => {
+    const dispatch = configureStore$1.useAppDispatch();
+    const { dataUploadFile, status } = configureStore$1.useAppSelector((state) => state.uploadFile);
+    const uploadFileApi$1 = (params) => {
+        return dispatch(uploadFileApi(params));
+    };
+    const uploadImageApi$1 = (params) => {
+        return dispatch(uploadImageApi(params));
+    };
+    const uploadMultiFileApi$1 = (params) => {
+        return dispatch(uploadMultiFileApi(params));
+    };
+    const handleAddUploadFile$1 = (arr) => { return dispatch(handleAddUploadFile(arr)); };
+    return {
+        uploadFileApi: uploadFileApi$1,
+        uploadImageApi: uploadImageApi$1,
+        uploadMultiFileApi: uploadMultiFileApi$1,
+        dataUploadFile,
+        status,
+        handleAddUploadFile: handleAddUploadFile$1
+    };
+};
+
 const DateHeader = React.memo(({ label }) => (jsxRuntime.jsx("div", { className: "d-flex justify-content-center", children: jsxRuntime.jsx("div", { style: {
             backgroundColor: "rgba(0,0,0,0.2)",
             padding: "2px 15px",
             borderRadius: "6px"
         }, children: jsxRuntime.jsx("p", { className: "m-0", style: { textAlign: "center", color: "#fff" }, children: label }) }) })));
 DateHeader.displayName = 'DateHeader';
+const ADMINISTRATIVE_ITEMS = [
+    { type: 'administrative', label: 'Đơn xin nghỉ', adminType: 'leaveApplication', Icon: SvgBecoxyApplication },
+    { type: 'administrative', label: 'Đăng ký đi muộn về sớm', adminType: 'lateEarly', Icon: SvgBecoxyLateEarly },
+    { type: 'administrative', label: 'Đăng ký xe', adminType: 'registerCars', Icon: SvgBecoxyCar },
+    { type: 'administrative', label: 'Đăng ký công tác', adminType: 'mission', Icon: SvgBecoxyBusinessMan },
+    { type: 'administrative', label: 'Đăng ký làm thêm', adminType: 'overtime', Icon: SvgBecoxyMoreTime },
+    { type: 'administrative', label: 'Đăng ký tạm ứng', adminType: 'advancePays', Icon: SvgBecoxyWallet },
+    { type: 'administrative', label: 'Đề nghị thanh toán', adminType: 'pay', Icon: SvgCreditCard },
+    { type: 'administrative', label: 'Đề nghị đổi ca', adminType: 'shiftChange', Icon: SvgBecoxySwitchShift },
+    { type: 'administrative', label: 'Giải trình chấm công', adminType: 'attendanceExplanation', Icon: SvgBecoxyTimeExplanation }
+];
 const ChatLog = (props) => {
     // ** Props & Store
-    // const clipboard = useClipboard()
-    // const [editor] = useLexicalComposerContext()
-    // const { t } = useTranslation()
-    // const { uploadMultiFileApi } = useUploadFile()
-    const { 
-    //typeChat,
-    contactId, chatRoomId
-    //active,
-    //messageByGroup,
-    // pinnedMessages,
-    // setScroll,
-    // checkScroll,
-    // pinMessageChatRoom,
-    // deleteMessageApi,
-    // recallMessageApi,
-    // get_message_by_group_cursor_api,
-    // getPinMessageChatRoomApi,
-    // deletePinMessage,
-    // //updateGroupTagApi,
-    // createReminderApi,
-    // senMessageApi,
-    // typingUsers
-     } = useChat();
-    //const { connection } = useAppSelector((state: any) => state.hubNotification)
-    //const [dynamicMenuItems, setDynamicMenuItems] = useState<any[]>([])
+    //const clipboard = useClipboard()
+    useLexicalComposerContext();
+    reactI18next.useTranslation();
+    useUploadFile();
+    const { typeChat, contactId, chatRoomId, active, messageByGroup, pinnedMessages, setScroll, checkScroll, pinMessageChatRoom, deleteMessageApi, recallMessageApi, get_message_by_group_cursor_api, getPinMessageChatRoomApi, deletePinMessage, 
+    //updateGroupTagApi,
+    createReminderApi, senMessageApi, typingUsers } = useChat();
+    configureStore.useAppSelector((state) => state.hubNotification);
+    const [dynamicMenuItems, setDynamicMenuItems] = React.useState([]);
     React.useEffect(() => {
         const fetchFormConfig = async () => {
             try {
-                const token = getToken();
+                const token = getToken$1();
                 const response = await fetch(`${BASE_URL}/api/formconfig`, {
                     method: 'GET',
                     headers: {
@@ -71887,106 +72103,76 @@ const ChatLog = (props) => {
         };
         fetchFormConfig();
     }, []);
-    // const menuItems = useMemo(() => [...ADMINISTRATIVE_ITEMS, ...dynamicMenuItems], [dynamicMenuItems])
+    React.useMemo(() => [...ADMINISTRATIVE_ITEMS, ...dynamicMenuItems], [dynamicMenuItems]);
     // // Tách menu items cho Công việc (task + dynamic)
-    // const taskMenuItems = useMemo(() => [
-    //   { type: 'task', label: 'Công việc', Icon: ListCheck },
-    //   ...dynamicMenuItems
-    // ], [dynamicMenuItems])
+    React.useMemo(() => [
+        { type: 'task', label: 'Công việc', Icon: SvgListCheck },
+        ...dynamicMenuItems
+    ], [dynamicMenuItems]);
     // Menu items cho Hành chính (chỉ administrative)
-    // const administrativeMenuItems = useMemo(() => ADMINISTRATIVE_ITEMS, [])
-    // const isTypingRef = useRef(false)
-    // const typingTimeoutRef = useRef<any>(null)
-    // const footerRef: any = useRef(null)
-    // const toolbarRef: any = useRef(null)
-    // const inputContainer: any = useRef(null)
+    React.useMemo(() => ADMINISTRATIVE_ITEMS, []);
+    React.useRef(false);
+    React.useRef(null);
+    React.useRef(null);
+    React.useRef(null);
+    React.useRef(null);
     const containerChatRef = React.useRef(null);
-    // const groupChatUsers: any = dataHistory?.find((dt: any) => dt.id === active)
-    // //const dataInfoAvatar = dataInfo && dataInfo.avatar ? dataInfo.avatar : DEFAULT_AVATAR
-    // const [imgCopy, setImgCopy] = useState<any>([])
-    // const [isOpen, setIsOpen] = useState(false)
-    // const [openModalPreview, setOpenModalPreview] = useState(false)
-    // const [openModalShare, setOpenModalShare] = useState(false)
-    // const [openModalReminder, setOpenModalReminder] = useState(false)
-    // const [openModalDynamic, setOpenModalDynamic] = useState(false)
-    // const [typeDynamic, setTypeDynamic] = useState<string>('')
-    // const [shareItem, setShareItem] = useState<any>(null)
-    // const [currentMessage, setCurrentMessage] = useState<any>(null)
-    // const [replyMessage, setReplyMessage] = useState<any>(null)
-    // const [position, setPosition] = useState({ x: 0, y: 0 })
-    // const [listContextShow, setListContextShow] = useState<any>(undefined)
-    // const [listContextHide, setListContextHide] = useState<any>(undefined)
-    // const [selectedMessage, setSelectedMessage] = useState<any>(null)
-    // const [isMultiLine, setIsMultiLine] = useState<boolean>(false)
-    // const [isAtBottom, setIsAtBottom] = useState(true)
-    // const prevListLength = useRef(0)
-    // const [unreadCount, setUnreadCount] = useState(0)
-    // const [hasMore, setHasMore] = useState<boolean>(true)
-    // const [expandedMessages, setExpandedMessages] = useState<Set<string>>(new Set())
-    // const [clickedImageFile, setClickedImageFile] = useState<any>(null)
-    // const [isMultiSelectMode, setIsMultiSelectMode] = useState(false)
-    // const [selectedMessages, setSelectedMessages] = useState<Set<string>>(new Set())
-    // const MAX_IMAGES = 100
-    // const BASE_CONTEXT_ITEMS = [
-    //   "reply", "share", "pin", "bookmark",
-    //   "selectMultiMessage", "detail", "other", "recall", "delete"
-    // ]
-    // const CONTEXT_CONFIG: Record<string, { show: string[], hide: string[] }> = {
-    //   selection: {
-    //     show: ["copyRangeText", ...BASE_CONTEXT_ITEMS, "save"],
-    //     hide: ["copyText", "save", "copyImage"]
-    //   },
-    //   image: {
-    //     show: ["copyImage", ...BASE_CONTEXT_ITEMS, "save"],
-    //     hide: ["copyText", "copyRangeText"]
-    //   },
-    //   file: {
-    //     show: [...BASE_CONTEXT_ITEMS, "save"],
-    //     hide: ["copyText", "copyRangeText", "copyImage"]
-    //   },
-    //   text: {
-    //     show: ["copyText", ...BASE_CONTEXT_ITEMS],
-    //     hide: ["copyRangeText", "save", "copyImage"]
-    //   },
-    //   voucher: {
-    //     show: ["copyText", ...BASE_CONTEXT_ITEMS],
-    //     hide: ["copyRangeText", "save", "copyImage"]
-    //   },
-    //   default: {
-    //     show: ["copyText", ...BASE_CONTEXT_ITEMS],
-    //     hide: ["copyRangeText", "save", "copyImage"]
-    //   }
-    // }
-    // const [isPinnedCollapsed, setIsPinnedCollapsed] = useState(true)
-    // const scrollToBottom = () => {
-    //   const messagesEndEle = document.getElementById('messagesEnd')
-    //   messagesEndEle?.scrollIntoView({ block: 'end', behavior: "instant" })
-    // }
-    // // Load initial messages
-    // useEffect(() => {
-    //   if (!checkScroll) {
-    //     scrollToBottom()
-    //   }
-    // }, [messageByGroup, checkScroll])
-    // const mentionItems = useMemo(() => {
-    //   if (!groupChatUsers) { return [] }
-    //   const users = Array.isArray(groupChatUsers.users) ? groupChatUsers.users : []
-    //   const mappedUsers = users.map((user: any) => {
-    //     const rawAvatar = user.avatar
-    //     let avatar = DEFAULT_AVATAR
-    //     if (rawAvatar) {
-    //       avatar = isValidUrl(rawAvatar) ? rawAvatar : `${CDN_URL_VIEW}/${rawAvatar}`
-    //     }
-    //     return {
-    //       ...user,
-    //       avatar
-    //     }
-    //   })
-    //   return [{ id: "all", name: "All" }, ...mappedUsers]
-    // }, [groupChatUsers])
-    // const toggleModalPreview = () => {
-    //   setOpenModalPreview(!openModalPreview)
-    // }
+    const { connectHub, dataInfo, dataProfile, handleUser, handleUserSidebarRight, handleSidebar, handleSidebarRight, userSidebarLeft, dataHistory, chatGetType, approveUpdateStatus, handleModalAdministrative, setDataItem, handleModalAddUserGroup, handleModalGroup, typeOpenModalAdd, setTypeOpenModalAdd, unpinMessage, getPinnedMessages } = props;
+    const groupChatUsers = dataHistory?.find((dt) => dt.id === active);
+    //const dataInfoAvatar = dataInfo && dataInfo.avatar ? dataInfo.avatar : DEFAULT_AVATAR
+    React.useState([]);
+    React.useState(false);
+    React.useState(false);
+    React.useState(false);
+    React.useState(false);
+    React.useState(false);
+    React.useState('');
+    React.useState(null);
+    React.useState(null);
+    React.useState(null);
+    React.useState({ x: 0, y: 0 });
+    React.useState(undefined);
+    React.useState(undefined);
+    React.useState(null);
+    React.useState(false);
+    React.useState(true);
+    React.useRef(0);
+    React.useState(0);
+    React.useState(true);
+    React.useState(new Set());
+    React.useState(null);
+    React.useState(false);
+    React.useState(new Set());
+    React.useState(true);
+    const scrollToBottom = () => {
+        const messagesEndEle = document.getElementById('messagesEnd');
+        messagesEndEle?.scrollIntoView({ block: 'end', behavior: "instant" });
+    };
+    //từ đây
+    // Load initial messages
+    React.useEffect(() => {
+        if (!checkScroll) {
+            scrollToBottom();
+        }
+    }, [messageByGroup, checkScroll]);
+    React.useMemo(() => {
+        if (!groupChatUsers) {
+            return [];
+        }
+        const users = Array.isArray(groupChatUsers.users) ? groupChatUsers.users : [];
+        const mappedUsers = users.map((user) => {
+            const rawAvatar = user.avatar;
+            let avatar = DEFAULT_AVATAR;
+            if (rawAvatar) {
+                avatar = isValidUrl(rawAvatar) ? rawAvatar : `${CDN_URL_VIEW}/${rawAvatar}`;
+            }
+            return {
+                ...user,
+                avatar
+            };
+        });
+        return [{ id: "all", name: "All" }, ...mappedUsers];
+    }, [groupChatUsers]);
     // const handlePreview = useCallback((mes: any) => {
     //   setSelectedMessage(mes)
     //   setOpenModalPreview(true)