@esvndev/es-react-template-chat 0.0.77 → 0.0.79

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/Chat.d.ts +0 -22
  2. package/dist/index.js +2443 -29
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +2445 -31
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -27417,7 +27417,7 @@ const formatDateToMonthShort = (value, toTimeForCurrentDay = true) => {
27417
27417
  return new Intl.DateTimeFormat('vi-VN', formatting).format(new Date(value));
27418
27418
  };
27419
27419
 
27420
- const getToken = () => {
27420
+ const getToken$1 = () => {
27421
27421
  let accessToken = localStorage.getItem('access_token');
27422
27422
  if (!accessToken) {
27423
27423
  const userData = localStorage.getItem('userData');
@@ -27452,7 +27452,7 @@ const mapPinRecordToMessage = (record) => {
27452
27452
  }
27453
27453
  return record;
27454
27454
  };
27455
- const initialState = {
27455
+ const initialState$1 = {
27456
27456
  checkInit: true,
27457
27457
  chatRoomId: undefined,
27458
27458
  contactId: undefined,
@@ -27476,7 +27476,7 @@ const get_history = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_HISTORY, asyn
27476
27476
  const response = await fetch(`${CHAT.URL_API.GET_HISTORY_API}?${queryString}`, {
27477
27477
  method: 'GET',
27478
27478
  headers: {
27479
- 'Authorization': `Bearer ${getToken()}`,
27479
+ 'Authorization': `Bearer ${getToken$1()}`,
27480
27480
  'Content-Type': 'application/json'
27481
27481
  }
27482
27482
  });
@@ -27496,7 +27496,7 @@ const get_message_by_group_cursor = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.G
27496
27496
  const response = await fetch(`${CHAT.URL_API.GET_MESSAGE_BY_GROUP_CURSOR_API}/${params.chatRoomId}?${queryString}`, {
27497
27497
  method: 'GET',
27498
27498
  headers: {
27499
- 'Authorization': `Bearer ${getToken()}`,
27499
+ 'Authorization': `Bearer ${getToken$1()}`,
27500
27500
  'Content-Type': 'application/json'
27501
27501
  }
27502
27502
  });
@@ -27516,7 +27516,7 @@ const get_history_active = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_HISTOR
27516
27516
  const response = await fetch(`${CHAT.URL_API.GET_HISTORY_API}?${queryString}`, {
27517
27517
  method: 'GET',
27518
27518
  headers: {
27519
- 'Authorization': `Bearer ${getToken()}`,
27519
+ 'Authorization': `Bearer ${getToken$1()}`,
27520
27520
  'Content-Type': 'application/json'
27521
27521
  }
27522
27522
  });
@@ -27536,7 +27536,7 @@ const get_info = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_INFO, async (par
27536
27536
  const response = await fetch(`${CHAT.URL_API.GET_INFO_API}?${queryString}`, {
27537
27537
  method: 'GET',
27538
27538
  headers: {
27539
- 'Authorization': `Bearer ${getToken()}`,
27539
+ 'Authorization': `Bearer ${getToken$1()}`,
27540
27540
  'Content-Type': 'application/json'
27541
27541
  }
27542
27542
  });
@@ -27555,7 +27555,7 @@ const groups = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GROUP, async (params,
27555
27555
  const response = await fetch(CHAT.URL_API.GROUP_API, {
27556
27556
  method: 'POST',
27557
27557
  headers: {
27558
- 'Authorization': `Bearer ${getToken()}`,
27558
+ 'Authorization': `Bearer ${getToken$1()}`,
27559
27559
  'Content-Type': 'application/json'
27560
27560
  },
27561
27561
  body: JSON.stringify(params)
@@ -27575,7 +27575,7 @@ const addMemberGroup = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.MEMBER_GROUP,
27575
27575
  const response = await fetch(CHAT.URL_API.ADD_MEMBER_GROUP, {
27576
27576
  method: 'POST',
27577
27577
  headers: {
27578
- 'Authorization': `Bearer ${getToken()}`,
27578
+ 'Authorization': `Bearer ${getToken$1()}`,
27579
27579
  'Content-Type': 'application/json'
27580
27580
  },
27581
27581
  body: JSON.stringify(params)
@@ -27595,7 +27595,7 @@ const sen_message = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.SEN_MESSAGE, asyn
27595
27595
  const response = await fetch(`${CHAT.URL_API.SEN_MESSAGE_API}/${params.id}`, {
27596
27596
  method: 'POST',
27597
27597
  headers: {
27598
- 'Authorization': `Bearer ${getToken()}`,
27598
+ 'Authorization': `Bearer ${getToken$1()}`,
27599
27599
  'Content-Type': 'application/json'
27600
27600
  },
27601
27601
  body: JSON.stringify({ ...params.formData, tickerDto: params.tickerDto })
@@ -27615,7 +27615,7 @@ const delete_message = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.DELETE_MESSAGE
27615
27615
  const response = await fetch(`${CHAT.URL_API.MESSAGE_API}/${params.chatRoomId}/delete-message/${params.id}`, {
27616
27616
  method: 'DELETE',
27617
27617
  headers: {
27618
- 'Authorization': `Bearer ${getToken()}`,
27618
+ 'Authorization': `Bearer ${getToken$1()}`,
27619
27619
  'Content-Type': 'application/json'
27620
27620
  }
27621
27621
  });
@@ -27634,7 +27634,7 @@ const recall_message = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.RECALL_MESSAGE
27634
27634
  const response = await fetch(`${CHAT.URL_API.MESSAGE_API}/${params.chatRoomId}/recall-message/${params.id}`, {
27635
27635
  method: 'PUT',
27636
27636
  headers: {
27637
- 'Authorization': `Bearer ${getToken()}`,
27637
+ 'Authorization': `Bearer ${getToken$1()}`,
27638
27638
  'Content-Type': 'application/json'
27639
27639
  },
27640
27640
  body: JSON.stringify({})
@@ -27654,7 +27654,7 @@ const update_group_avatar = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.UPDATE_GR
27654
27654
  const response = await fetch(CHAT.URL_API.UPDATE_GROUP_AVATAR_API, {
27655
27655
  method: 'PUT',
27656
27656
  headers: {
27657
- 'Authorization': `Bearer ${getToken()}`,
27657
+ 'Authorization': `Bearer ${getToken$1()}`,
27658
27658
  'Content-Type': 'application/json'
27659
27659
  },
27660
27660
  body: JSON.stringify(params)
@@ -27675,7 +27675,7 @@ const get_message_by_group = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_MESS
27675
27675
  const response = await fetch(`${CHAT.URL_API.GET_MESSAGE_BY_GROUP_API}/${params.chatRoomId}?${queryString}`, {
27676
27676
  method: 'GET',
27677
27677
  headers: {
27678
- 'Authorization': `Bearer ${getToken()}`,
27678
+ 'Authorization': `Bearer ${getToken$1()}`,
27679
27679
  'Content-Type': 'application/json'
27680
27680
  }
27681
27681
  });
@@ -27695,7 +27695,7 @@ const get_message_by_contact = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_ME
27695
27695
  const response = await fetch(`${CHAT.URL_API.GET_MESSAGE_BY_CONTACT_API}/${params.chatRoomId}?${queryString}`, {
27696
27696
  method: 'GET',
27697
27697
  headers: {
27698
- 'Authorization': `Bearer ${getToken()}`,
27698
+ 'Authorization': `Bearer ${getToken$1()}`,
27699
27699
  'Content-Type': 'application/json'
27700
27700
  }
27701
27701
  });
@@ -27714,7 +27714,7 @@ const contact_add = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.CONTACT_ADD, asyn
27714
27714
  const response = await fetch(CHAT.URL_API.CONTACT_ADD_API, {
27715
27715
  method: 'POST',
27716
27716
  headers: {
27717
- 'Authorization': `Bearer ${getToken()}`,
27717
+ 'Authorization': `Bearer ${getToken$1()}`,
27718
27718
  'Content-Type': 'application/json'
27719
27719
  },
27720
27720
  body: JSON.stringify(params)
@@ -27734,7 +27734,7 @@ const connectChatRoomMemberApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.CONN
27734
27734
  const response = await fetch(CHAT.URL_API.CONNECT_CHAT_ROOM_MEMBER_API, {
27735
27735
  method: 'POST',
27736
27736
  headers: {
27737
- 'Authorization': `Bearer ${getToken()}`,
27737
+ 'Authorization': `Bearer ${getToken$1()}`,
27738
27738
  'Content-Type': 'application/json'
27739
27739
  },
27740
27740
  body: JSON.stringify(params)
@@ -27754,7 +27754,7 @@ const get_profile = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_PROFILE, asyn
27754
27754
  const response = await fetch(CHAT.URL_API.GET_PROFILE, {
27755
27755
  method: 'GET',
27756
27756
  headers: {
27757
- 'Authorization': `Bearer ${getToken()}`,
27757
+ 'Authorization': `Bearer ${getToken$1()}`,
27758
27758
  'Content-Type': 'application/json'
27759
27759
  }
27760
27760
  });
@@ -27774,7 +27774,7 @@ const get_users = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_USERS, async (p
27774
27774
  const response = await fetch(`${CHAT.URL_API.GET_USERS}?${queryString}`, {
27775
27775
  method: 'GET',
27776
27776
  headers: {
27777
- 'Authorization': `Bearer ${getToken()}`,
27777
+ 'Authorization': `Bearer ${getToken$1()}`,
27778
27778
  'Content-Type': 'application/json'
27779
27779
  }
27780
27780
  });
@@ -27794,7 +27794,7 @@ const get_contact = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_CONTACT, asyn
27794
27794
  const response = await fetch(`${CHAT.URL_API.GET_CONTACT_API}?${queryString}`, {
27795
27795
  method: 'GET',
27796
27796
  headers: {
27797
- 'Authorization': `Bearer ${getToken()}`,
27797
+ 'Authorization': `Bearer ${getToken$1()}`,
27798
27798
  'Content-Type': 'application/json'
27799
27799
  }
27800
27800
  });
@@ -27813,7 +27813,7 @@ const update_chat_room_member = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.CHAT_
27813
27813
  const response = await fetch(`${CHAT.URL_API.CHAT_ROOM_MEMBER_API}/${params}`, {
27814
27814
  method: 'PUT',
27815
27815
  headers: {
27816
- 'Authorization': `Bearer ${getToken()}`,
27816
+ 'Authorization': `Bearer ${getToken$1()}`,
27817
27817
  'Content-Type': 'application/json'
27818
27818
  },
27819
27819
  body: JSON.stringify({})
@@ -27834,7 +27834,7 @@ const getPagingEmployeeApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_PAGI
27834
27834
  const response = await fetch(`${CHAT.URL_API.GET_PAGING_EMPLOYEE_API}?${queryString}`, {
27835
27835
  method: 'GET',
27836
27836
  headers: {
27837
- 'Authorization': `Bearer ${getToken()}`,
27837
+ 'Authorization': `Bearer ${getToken$1()}`,
27838
27838
  'Content-Type': 'application/json'
27839
27839
  }
27840
27840
  });
@@ -27853,7 +27853,7 @@ const pinMessageChatRoomApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.PIN_MES
27853
27853
  const response = await fetch(`${CHAT.URL_API.PIN_MESSAGE_CHAT_ROOM_API}/${params.id}`, {
27854
27854
  method: 'POST',
27855
27855
  headers: {
27856
- 'Authorization': `Bearer ${getToken()}`,
27856
+ 'Authorization': `Bearer ${getToken$1()}`,
27857
27857
  'Content-Type': 'application/json'
27858
27858
  },
27859
27859
  body: JSON.stringify(params)
@@ -27873,7 +27873,7 @@ const getPinMessageChatRoomApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.GET_
27873
27873
  const response = await fetch(`${CHAT.URL_API.GET_PIN_MESSAGE_CHAT_ROOM_API}/${params}`, {
27874
27874
  method: 'GET',
27875
27875
  headers: {
27876
- 'Authorization': `Bearer ${getToken()}`,
27876
+ 'Authorization': `Bearer ${getToken$1()}`,
27877
27877
  'Content-Type': 'application/json'
27878
27878
  }
27879
27879
  });
@@ -27892,7 +27892,7 @@ const deletePinMessageApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.DELETE_PI
27892
27892
  const response = await fetch(`${CHAT.URL_API.PIN_MESSAGE_CHAT_ROOM_API}/${pinId}`, {
27893
27893
  method: 'DELETE',
27894
27894
  headers: {
27895
- 'Authorization': `Bearer ${getToken()}`,
27895
+ 'Authorization': `Bearer ${getToken$1()}`,
27896
27896
  'Content-Type': 'application/json'
27897
27897
  }
27898
27898
  });
@@ -27911,7 +27911,7 @@ const updateGroupTagApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.UPDATE_GROU
27911
27911
  const response = await fetch(CHAT.URL_API.UPDATE_GROUP_TAG_API, {
27912
27912
  method: 'PUT',
27913
27913
  headers: {
27914
- 'Authorization': `Bearer ${getToken()}`,
27914
+ 'Authorization': `Bearer ${getToken$1()}`,
27915
27915
  'Content-Type': 'application/json'
27916
27916
  },
27917
27917
  body: JSON.stringify(params)
@@ -27931,7 +27931,7 @@ const createReminderApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.CREATE_REMI
27931
27931
  const response = await fetch(CHAT.URL_API.CREATE_REMINDER_API, {
27932
27932
  method: 'POST',
27933
27933
  headers: {
27934
- 'Authorization': `Bearer ${getToken()}`,
27934
+ 'Authorization': `Bearer ${getToken$1()}`,
27935
27935
  'Content-Type': 'application/json'
27936
27936
  },
27937
27937
  body: JSON.stringify(params)
@@ -27948,7 +27948,7 @@ const createReminderApi = toolkit.createAsyncThunk(CHAT.ACTION_TYPES.CREATE_REMI
27948
27948
  });
27949
27949
  const appChatSlice = toolkit.createSlice({
27950
27950
  name: 'appChat',
27951
- initialState,
27951
+ initialState: initialState$1,
27952
27952
  reducers: {
27953
27953
  selectChat(state, action) {
27954
27954
  state.chatRoomId = action.payload;
@@ -36628,6 +36628,99 @@ var SvgArrowRight = function (_a) {
36628
36628
  React__namespace.createElement("path", { d: "M5 12h14M12 5l7 7-7 7" })));
36629
36629
  };
36630
36630
 
36631
+ var SvgBecoxyApplication = function (_a) {
36632
+ var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36633
+ 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),
36634
+ title ? React__namespace.createElement("title", { id: titleId }, title) : null,
36635
+ React__namespace.createElement("g", { clipPath: "url(#becoxy-application_svg__a)", fill: props.color || "currentColor" },
36636
+ React__namespace.createElement("path", { d: "M3.692 5.077H14.77a.462.462 0 1 0 0-.923H3.692a.462.462 0 1 0 0 .923ZM3.692 7.846H14.77a.462.462 0 1 0 0-.923H3.692a.462.462 0 1 0 0 .923ZM3.692 10.615H14.77a.462.462 0 0 0 0-.923H3.692a.462.462 0 1 0 0 .923ZM15.23 12.923a.462.462 0 0 0-.46-.462H3.691a.462.462 0 0 0 0 .923H14.77a.462.462 0 0 0 .462-.461Z" }),
36637
+ React__namespace.createElement("path", { d: "M22.774 3.043 20.18 2.09a.462.462 0 0 0-.593.275L17.538 7.96V1.384a.462.462 0 0 0-.461-.461H1.385a.462.462 0 0 0-.462.461v21.231c0 .255.207.462.462.462h15.692a.462.462 0 0 0 .461-.462V18.7c.36-.98 5.136-14.04 5.51-15.065a.462.462 0 0 0-.274-.591Zm-2.479.073 1.728.634-.633 1.733-1.73-.634.635-1.733Zm-3.662 15.37-1.733-.635 4.443-12.135 1.73.633-4.44 12.137Zm-.65.745-.86.696-.209-1.087 1.07.391ZM1.847 22.154V1.846h14.77v8.636c-2.924 7.987-2.757 7.5-2.767 7.6a.452.452 0 0 0 .005.125l.507 2.649c.066.341.473.49.743.272l1.511-1.22v2.246H1.846Z" }),
36638
+ React__namespace.createElement("path", { d: "M12.279 20.068c-.457.197-1.035.324-1.225.276a.756.756 0 0 0-.398-.483c-.508-.247-1.224.087-1.915.41-.217.1-.44.205-.556.237-.415.115-1.433.045-1.732-.105a.462.462 0 0 0-.91.023.7.7 0 0 0 .249.637c.547.482 2.097.484 2.638.335.19-.052.427-.163.701-.29.276-.13.816-.382 1.066-.41.073.2.216.36.41.459.632.318 1.72-.105 2.037-.242a.462.462 0 0 0-.365-.847Z" })),
36639
+ React__namespace.createElement("defs", null,
36640
+ React__namespace.createElement("clipPath", { id: "becoxy-application_svg__a" },
36641
+ React__namespace.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
36642
+ };
36643
+
36644
+ var SvgBecoxyBusinessMan = function (_a) {
36645
+ var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36646
+ 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),
36647
+ title ? React__namespace.createElement("title", { id: titleId }, title) : null,
36648
+ 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" })));
36649
+ };
36650
+
36651
+ var SvgBecoxyCar = function (_a) {
36652
+ var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36653
+ 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),
36654
+ title ? React__namespace.createElement("title", { id: titleId }, title) : null,
36655
+ 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" }),
36656
+ 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" }),
36657
+ 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" })));
36658
+ };
36659
+
36660
+ var SvgBecoxyLateEarly = function (_a) {
36661
+ var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36662
+ 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
+ title ? React__namespace.createElement("title", { id: titleId }, title) : null,
36664
+ React__namespace.createElement("g", { clipPath: "url(#becoxy-late-early_svg__a)", fill: props.color || "currentColor" },
36665
+ 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" }),
36666
+ 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" }),
36667
+ 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" }),
36668
+ 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" }),
36669
+ 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" })),
36670
+ React__namespace.createElement("defs", null,
36671
+ React__namespace.createElement("clipPath", { id: "becoxy-late-early_svg__a" },
36672
+ React__namespace.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
36673
+ };
36674
+
36675
+ var SvgBecoxyMoreTime = function (_a) {
36676
+ var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36677
+ 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),
36678
+ title ? React__namespace.createElement("title", { id: titleId }, title) : null,
36679
+ React__namespace.createElement("path", { fill: "currentColor", d: "M10 8v6l4.7 2.9.8-1.2-4-2.4V8z" }),
36680
+ 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" }),
36681
+ React__namespace.createElement("path", { fill: "currentColor", d: "M20 5V2h-2v3h-3v2h3v3h2V7h3V5z" })));
36682
+ };
36683
+
36684
+ var SvgBecoxySwitchShift = function (_a) {
36685
+ var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36686
+ 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),
36687
+ title ? React__namespace.createElement("title", { id: titleId }, title) : null,
36688
+ React__namespace.createElement("g", { clipPath: "url(#becoxy-switch-shift_svg__a)" },
36689
+ 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" })),
36690
+ React__namespace.createElement("defs", null,
36691
+ React__namespace.createElement("clipPath", { id: "becoxy-switch-shift_svg__a" },
36692
+ React__namespace.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
36693
+ };
36694
+
36695
+ var SvgBecoxyTimeExplanation = function (_a) {
36696
+ var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36697
+ 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),
36698
+ title ? React__namespace.createElement("title", { id: titleId }, title) : null,
36699
+ React__namespace.createElement("g", { clipPath: "url(#becoxy-time-explanation_svg__a)", fill: props.color || "currentColor" },
36700
+ 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" }),
36701
+ 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" }),
36702
+ 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" }),
36703
+ 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" }),
36704
+ 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" }),
36705
+ 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" }),
36706
+ 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" })),
36707
+ React__namespace.createElement("defs", null,
36708
+ React__namespace.createElement("clipPath", { id: "becoxy-time-explanation_svg__a" },
36709
+ React__namespace.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
36710
+ };
36711
+
36712
+ var SvgBecoxyWallet = function (_a) {
36713
+ var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36714
+ 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),
36715
+ title ? React__namespace.createElement("title", { id: titleId }, title) : null,
36716
+ React__namespace.createElement("g", { clipPath: "url(#becoxy-wallet_svg__a)", fill: props.color || "currentColor" },
36717
+ 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" }),
36718
+ 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" })),
36719
+ React__namespace.createElement("defs", null,
36720
+ React__namespace.createElement("clipPath", { id: "becoxy-wallet_svg__a" },
36721
+ React__namespace.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
36722
+ };
36723
+
36631
36724
  var SvgBecoxyWriting = function (_a) {
36632
36725
  var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36633
36726
  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),
@@ -36650,6 +36743,14 @@ var SvgCopy = function (_a) {
36650
36743
  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" })));
36651
36744
  };
36652
36745
 
36746
+ var SvgCreditCard = function (_a) {
36747
+ var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36748
+ 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),
36749
+ title ? React__namespace.createElement("title", { id: titleId }, title) : null,
36750
+ React__namespace.createElement("rect", { x: 1, y: 4, width: 22, height: 16, rx: 2, ry: 2 }),
36751
+ React__namespace.createElement("path", { d: "M1 10h22" })));
36752
+ };
36753
+
36653
36754
  var SvgEdit3 = function (_a) {
36654
36755
  var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36655
36756
  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),
@@ -36698,6 +36799,13 @@ var SvgLink = function (_a) {
36698
36799
  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" })));
36699
36800
  };
36700
36801
 
36802
+ var SvgListCheck = function (_a) {
36803
+ var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36804
+ 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),
36805
+ title ? React__namespace.createElement("title", { id: titleId }, title) : null,
36806
+ 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" })));
36807
+ };
36808
+
36701
36809
  var SvgLogOut = function (_a) {
36702
36810
  var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
36703
36811
  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),
@@ -69857,7 +69965,7 @@ const ModalGroupInfo = (props) => {
69857
69965
  const [openModalPreview, setOpenModalPreview] = React.useState(false);
69858
69966
  const [selectedMessage, setSelectedMessage] = React.useState(null);
69859
69967
  const uploading = (args) => {
69860
- args.currentRequest.setRequestHeader("Authorization", `Bearer ${getToken()}`);
69968
+ args.currentRequest.setRequestHeader("Authorization", `Bearer ${getToken$1()}`);
69861
69969
  };
69862
69970
  const uploadFailure = () => {
69863
69971
  notificationError(t('UploadFail'));
@@ -71810,17 +71918,2323 @@ const UserProfileSidebar = (props) => {
71810
71918
  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 })] })] })] }) })] }));
71811
71919
  };
71812
71920
 
71921
+ const initialState = {
71922
+ dataUploadFile: [],
71923
+ status: false
71924
+ };
71925
+ // Helper function to get token
71926
+ const getToken = () => {
71927
+ let accessToken = localStorage.getItem('access_token');
71928
+ if (!accessToken) {
71929
+ const userData = localStorage.getItem('userData');
71930
+ if (userData) {
71931
+ accessToken = JSON.parse(userData).id_token;
71932
+ }
71933
+ }
71934
+ return accessToken;
71935
+ };
71936
+ const baseUrl = process.env.REACT_APP_BASE_URL;
71937
+ const uploadFileApi = toolkit.createAsyncThunk(UPLOADFILE.ACTION_TYPES.UPLOAD_FILE, async (params, thunkAPI) => {
71938
+ try {
71939
+ const token = getToken();
71940
+ const response = await fetch(`${baseUrl}/api/file/upload`, {
71941
+ method: 'POST',
71942
+ headers: {
71943
+ 'Authorization': `Bearer ${token}`
71944
+ },
71945
+ body: params
71946
+ });
71947
+ if (!response.ok) {
71948
+ const errorData = await response.json().catch(() => ({}));
71949
+ throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
71950
+ }
71951
+ return await response.json();
71952
+ }
71953
+ catch (error) {
71954
+ return thunkAPI.rejectWithValue({ error: error.message || error });
71955
+ }
71956
+ });
71957
+ const uploadImageApi = toolkit.createAsyncThunk(UPLOADFILE.ACTION_TYPES.UPLOAD_IMAGE, async (params, thunkAPI) => {
71958
+ try {
71959
+ const token = getToken();
71960
+ const response = await fetch(`${baseUrl}/api/image/upload`, {
71961
+ method: 'POST',
71962
+ headers: {
71963
+ 'Authorization': `Bearer ${token}`
71964
+ },
71965
+ body: params
71966
+ });
71967
+ if (!response.ok) {
71968
+ const errorData = await response.json().catch(() => ({}));
71969
+ throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
71970
+ }
71971
+ return await response.json();
71972
+ }
71973
+ catch (error) {
71974
+ return thunkAPI.rejectWithValue({ error: error.message || error });
71975
+ }
71976
+ });
71977
+ const uploadMultiFileApi = toolkit.createAsyncThunk(UPLOADFILE.ACTION_TYPES.UPLOAD_FILE_MULTI, async (params, thunkAPI) => {
71978
+ try {
71979
+ const token = getToken();
71980
+ const response = await fetch(`${baseUrl}/api/file/upload-mutil`, {
71981
+ method: 'POST',
71982
+ headers: {
71983
+ 'Authorization': `Bearer ${token}`
71984
+ },
71985
+ body: params
71986
+ });
71987
+ if (!response.ok) {
71988
+ const errorData = await response.json().catch(() => ({}));
71989
+ throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
71990
+ }
71991
+ return await response.json();
71992
+ }
71993
+ catch (error) {
71994
+ return thunkAPI.rejectWithValue({ error: error.message || error });
71995
+ }
71996
+ });
71997
+ const uploadFileSlice = toolkit.createSlice({
71998
+ name: 'uploadFile',
71999
+ initialState,
72000
+ reducers: {
72001
+ handleAddUploadFile: (state, action) => {
72002
+ state.dataUploadFile.push(action.payload);
72003
+ }
72004
+ },
72005
+ extraReducers: builder => {
72006
+ builder.addCase(uploadImageApi.pending, (state) => {
72007
+ console.log(state);
72008
+ });
72009
+ }
72010
+ });
72011
+ const { handleAddUploadFile } = uploadFileSlice.actions;
72012
+
72013
+ const useUploadFile = () => {
72014
+ const dispatch = useAppDispatch();
72015
+ const { dataUploadFile, status } = configureStore.useAppSelector((state) => state.uploadFile);
72016
+ const uploadFileApi$1 = (params) => {
72017
+ return dispatch(uploadFileApi(params));
72018
+ };
72019
+ const uploadImageApi$1 = (params) => {
72020
+ return dispatch(uploadImageApi(params));
72021
+ };
72022
+ const uploadMultiFileApi$1 = (params) => {
72023
+ return dispatch(uploadMultiFileApi(params));
72024
+ };
72025
+ const handleAddUploadFile$1 = (arr) => { return dispatch(handleAddUploadFile(arr)); };
72026
+ return {
72027
+ uploadFileApi: uploadFileApi$1,
72028
+ uploadImageApi: uploadImageApi$1,
72029
+ uploadMultiFileApi: uploadMultiFileApi$1,
72030
+ dataUploadFile,
72031
+ status,
72032
+ handleAddUploadFile: handleAddUploadFile$1
72033
+ };
72034
+ };
72035
+
71813
72036
  const DateHeader = React.memo(({ label }) => (jsxRuntime.jsx("div", { className: "d-flex justify-content-center", children: jsxRuntime.jsx("div", { style: {
71814
72037
  backgroundColor: "rgba(0,0,0,0.2)",
71815
72038
  padding: "2px 15px",
71816
72039
  borderRadius: "6px"
71817
72040
  }, children: jsxRuntime.jsx("p", { className: "m-0", style: { textAlign: "center", color: "#fff" }, children: label }) }) })));
71818
72041
  DateHeader.displayName = 'DateHeader';
72042
+ const ADMINISTRATIVE_ITEMS = [
72043
+ { type: 'administrative', label: 'Đơn xin nghỉ', adminType: 'leaveApplication', Icon: SvgBecoxyApplication },
72044
+ { type: 'administrative', label: 'Đăng ký đi muộn về sớm', adminType: 'lateEarly', Icon: SvgBecoxyLateEarly },
72045
+ { type: 'administrative', label: 'Đăng ký xe', adminType: 'registerCars', Icon: SvgBecoxyCar },
72046
+ { type: 'administrative', label: 'Đăng ký công tác', adminType: 'mission', Icon: SvgBecoxyBusinessMan },
72047
+ { type: 'administrative', label: 'Đăng ký làm thêm', adminType: 'overtime', Icon: SvgBecoxyMoreTime },
72048
+ { type: 'administrative', label: 'Đăng ký tạm ứng', adminType: 'advancePays', Icon: SvgBecoxyWallet },
72049
+ { type: 'administrative', label: 'Đề nghị thanh toán', adminType: 'pay', Icon: SvgCreditCard },
72050
+ { type: 'administrative', label: 'Đề nghị đổi ca', adminType: 'shiftChange', Icon: SvgBecoxySwitchShift },
72051
+ { type: 'administrative', label: 'Giải trình chấm công', adminType: 'attendanceExplanation', Icon: SvgBecoxyTimeExplanation }
72052
+ ];
71819
72053
  const ChatLog = (props) => {
71820
72054
  // ** Props & Store
71821
72055
  // const clipboard = useClipboard()
71822
- const { contactId, chatRoomId } = useChat();
72056
+ useLexicalComposerContext();
72057
+ reactI18next.useTranslation();
72058
+ useUploadFile();
72059
+ const { typeChat, contactId, chatRoomId, active, messageByGroup, pinnedMessages, setScroll, checkScroll, pinMessageChatRoom, deleteMessageApi, recallMessageApi, get_message_by_group_cursor_api, getPinMessageChatRoomApi, deletePinMessage,
72060
+ //updateGroupTagApi,
72061
+ createReminderApi, senMessageApi, typingUsers } = useChat();
72062
+ configureStore.useAppSelector((state) => state.hubNotification);
72063
+ const [dynamicMenuItems, setDynamicMenuItems] = React.useState([]);
72064
+ React.useEffect(() => {
72065
+ const fetchFormConfig = async () => {
72066
+ try {
72067
+ const token = getToken$1();
72068
+ const response = await fetch(`${BASE_URL}/api/formconfig`, {
72069
+ method: 'GET',
72070
+ headers: {
72071
+ 'Authorization': `Bearer ${token}`,
72072
+ 'Content-Type': 'application/json'
72073
+ }
72074
+ });
72075
+ if (!response.ok) {
72076
+ throw new Error(`HTTP error! status: ${response.status}`);
72077
+ }
72078
+ const res = await response.json();
72079
+ if (res) {
72080
+ const items = res.map((item) => ({
72081
+ type: 'dynamic',
72082
+ label: item.title,
72083
+ dynamicType: item.type,
72084
+ Icon: SvgBecoxyApplication
72085
+ }));
72086
+ setDynamicMenuItems(items);
72087
+ }
72088
+ }
72089
+ catch (err) {
72090
+ console.log(err);
72091
+ }
72092
+ };
72093
+ fetchFormConfig();
72094
+ }, []);
72095
+ //const menuItems = useMemo(() => [...ADMINISTRATIVE_ITEMS, ...dynamicMenuItems], [dynamicMenuItems])
72096
+ // Tách menu items cho Công việc (task + dynamic)
72097
+ React.useMemo(() => [
72098
+ { type: 'task', label: 'Công việc', Icon: SvgListCheck },
72099
+ ...dynamicMenuItems
72100
+ ], [dynamicMenuItems]);
72101
+ // Menu items cho Hành chính (chỉ administrative)
72102
+ React.useMemo(() => ADMINISTRATIVE_ITEMS, []);
72103
+ React.useRef(false);
72104
+ React.useRef(null);
72105
+ React.useRef(null);
72106
+ React.useRef(null);
72107
+ React.useRef(null);
71823
72108
  const containerChatRef = React.useRef(null);
72109
+ const { connectHub, dataInfo, dataProfile,
72110
+ //handleUser,
72111
+ //handleUserSidebarRight,
72112
+ handleSidebar, handleSidebarRight, userSidebarLeft, dataHistory, chatGetType, approveUpdateStatus, handleModalAdministrative, setDataItem, handleModalAddUserGroup, handleModalGroup, typeOpenModalAdd, setTypeOpenModalAdd
72113
+ //unpinMessage
72114
+ //getPinnedMessages
72115
+ } = props;
72116
+ dataHistory?.find((dt) => dt.id === active);
72117
+ //const dataInfoAvatar = dataInfo && dataInfo.avatar ? dataInfo.avatar : DEFAULT_AVATAR
72118
+ React.useState([]);
72119
+ React.useState(false);
72120
+ React.useState(false);
72121
+ React.useState(false);
72122
+ React.useState(false);
72123
+ React.useState(false);
72124
+ React.useState('');
72125
+ React.useState(null);
72126
+ React.useState(null);
72127
+ React.useState(null);
72128
+ React.useState({ x: 0, y: 0 });
72129
+ React.useState(undefined);
72130
+ React.useState(undefined);
72131
+ React.useState(null);
72132
+ React.useState(false);
72133
+ React.useState(true);
72134
+ React.useRef(0);
72135
+ React.useState(0);
72136
+ React.useState(true);
72137
+ React.useState(new Set());
72138
+ React.useState(null);
72139
+ React.useState(false);
72140
+ React.useState(new Set());
72141
+ // const [isPinnedCollapsed, setIsPinnedCollapsed] = useState(true)
72142
+ // const scrollToBottom = () => {
72143
+ // const messagesEndEle = document.getElementById('messagesEnd')
72144
+ // messagesEndEle?.scrollIntoView({ block: 'end', behavior: "instant" })
72145
+ // }
72146
+ // // Load initial messages
72147
+ // useEffect(() => {
72148
+ // if (!checkScroll) {
72149
+ // scrollToBottom()
72150
+ // }
72151
+ // }, [messageByGroup, checkScroll])
72152
+ // const mentionItems = useMemo(() => {
72153
+ // if (!groupChatUsers) { return [] }
72154
+ // const users = Array.isArray(groupChatUsers.users) ? groupChatUsers.users : []
72155
+ // const mappedUsers = users.map((user: any) => {
72156
+ // const rawAvatar = user.avatar
72157
+ // let avatar = DEFAULT_AVATAR
72158
+ // if (rawAvatar) {
72159
+ // avatar = isValidUrl(rawAvatar) ? rawAvatar : `${CDN_URL_VIEW}/${rawAvatar}`
72160
+ // }
72161
+ // return {
72162
+ // ...user,
72163
+ // avatar
72164
+ // }
72165
+ // })
72166
+ // return [{ id: "all", name: "All" }, ...mappedUsers]
72167
+ // }, [groupChatUsers])
72168
+ // const toggleModalPreview = () => {
72169
+ // setOpenModalPreview(!openModalPreview)
72170
+ // }
72171
+ // const handlePreview = useCallback((mes: any) => {
72172
+ // setSelectedMessage(mes)
72173
+ // setOpenModalPreview(true)
72174
+ // }, [])
72175
+ // const [isFetching, setIsFetching] = useState(false)
72176
+ // const dispatch = useDispatch()
72177
+ // const handleStartConversation = () => {
72178
+ // if (
72179
+ // !Object.keys({}).length &&
72180
+ // !userSidebarLeft &&
72181
+ // window.innerWidth < 992
72182
+ // ) {
72183
+ // handleSidebar()
72184
+ // }
72185
+ // }
72186
+ // const uploadGroup = async (files: File[], type: 'image' | 'file') => {
72187
+ // if (files.length === 0) { return }
72188
+ // const batchId = newGuid()
72189
+ // const errors: Array<{ file: File; error: any }> = []
72190
+ // // Upload và gửi từng file một
72191
+ // for (const file of files) {
72192
+ // try {
72193
+ // const result = await uploadWithRetry(file)
72194
+ // if (result.success && chatRoomId) {
72195
+ // const infoFiles = result.data?.infoFiles || []
72196
+ // const items = type === 'image' ? infoFiles.map((x: any) => ({ ...x, batchId, createdDate: new Date().toISOString() })) : infoFiles
72197
+ // // Gửi message ngay sau khi upload thành công
72198
+ // connectHub(chatRoomId, {
72199
+ // sendTo: dataInfo.id,
72200
+ // content: '',
72201
+ // type,
72202
+ // path: JSON.stringify(items),
72203
+ // typeChat
72204
+ // })
72205
+ // } else {
72206
+ // errors.push({ file, error: result.error })
72207
+ // }
72208
+ // } catch (error) {
72209
+ // errors.push({ file, error })
72210
+ // }
72211
+ // }
72212
+ // // Thông báo lỗi nếu có
72213
+ // if (errors.length > 0) {
72214
+ // notificationError(`${errors.length}/${files.length} ${type === 'image' ? 'ảnh' : 'file'} upload thất bại`)
72215
+ // }
72216
+ // }
72217
+ // const dataURLToFile = (dataUrl: string, fileName: string) => {
72218
+ // const [header, data] = dataUrl.split(',')
72219
+ // const mime = header.match(/data:(.*?);/)?.[1] || 'image/png'
72220
+ // const binary = atob(data)
72221
+ // const len = binary.length
72222
+ // const u8 = new Uint8Array(len)
72223
+ // for (let i = 0; i < len; i++) { u8[i] = binary.charCodeAt(i) }
72224
+ // return new File([u8], fileName, { type: mime })
72225
+ // }
72226
+ // // ** Extract tagUserIds from editor mentions
72227
+ // const extractTagUserIds = (): string[] => {
72228
+ // const tagUserIds: string[] = []
72229
+ // let hasAllMention = false
72230
+ // editor.getEditorState().read(() => {
72231
+ // const root = $getRoot()
72232
+ // const nodes = root.getAllTextNodes()
72233
+ // nodes.forEach((node) => {
72234
+ // if ($isMentionNode(node)) {
72235
+ // const userId = (node as any).__userId
72236
+ // if (userId === 'all') {
72237
+ // hasAllMention = true
72238
+ // } else if (userId && !tagUserIds.includes(userId)) {
72239
+ // tagUserIds.push(userId)
72240
+ // }
72241
+ // }
72242
+ // })
72243
+ // })
72244
+ // // Nếu có @All, lấy tất cả userId trong nhóm
72245
+ // if (hasAllMention && groupChatUsers?.users) {
72246
+ // const allUserIds = groupChatUsers.users
72247
+ // .map((user: any) => user.id)
72248
+ // .filter((id: string) => id !== dataProfile?.id) // Loại bỏ chính mình
72249
+ // return allUserIds
72250
+ // }
72251
+ // return tagUserIds
72252
+ // }
72253
+ // // ** Sends New Msg
72254
+ // const handleSendMsg = (message: any) => {
72255
+ // if (imgCopy.length > 0) {
72256
+ // const imageFiles: File[] = []
72257
+ // const otherFiles: File[] = []
72258
+ // imgCopy.forEach((item: any, idx: number) => {
72259
+ // const data = item?.data || item
72260
+ // if (typeof data === 'string' && data.startsWith('data:image')) {
72261
+ // imageFiles.push(dataURLToFile(data, item.name || `pasted_${Date.now()}_${idx}.png`))
72262
+ // } else if (data instanceof File) {
72263
+ // if (data.type?.startsWith('image')) {
72264
+ // imageFiles.push(data)
72265
+ // } else {
72266
+ // otherFiles.push(data)
72267
+ // }
72268
+ // }
72269
+ // })
72270
+ // // Gửi ảnh trước rồi file
72271
+ // uploadGroup(imageFiles, 'image')
72272
+ // uploadGroup(otherFiles, 'file')
72273
+ // }
72274
+ // if (message.trim().length) {
72275
+ // if (typingTimeoutRef.current) {
72276
+ // clearTimeout(typingTimeoutRef.current)
72277
+ // }
72278
+ // isTypingRef.current = false
72279
+ // if (connection && chatRoomId) {
72280
+ // connection.invoke('StopTyping', chatRoomId).catch(console.error)
72281
+ // }
72282
+ // const tagUserIds = extractTagUserIds()
72283
+ // const id = typeChat === 'CHAT' ? chatRoomId : contactId
72284
+ // if (id) {
72285
+ // connectHub(id, {
72286
+ // sendTo: dataInfo.id,
72287
+ // content: message.trim(),
72288
+ // replyContent: replyMessage?.currentMessage ? JSON.stringify(replyMessage.currentMessage) : null,
72289
+ // path: null,
72290
+ // type: 'text',
72291
+ // typeChat,
72292
+ // tagUserIds
72293
+ // })
72294
+ // }
72295
+ // }
72296
+ // setImgCopy([])
72297
+ // }
72298
+ // const uploadWithRetry = async (file: File, maxRetries = 2) => {
72299
+ // let lastError
72300
+ // for (let attempt = 0; attempt <= maxRetries; attempt++) {
72301
+ // try {
72302
+ // const formDataFile = new FormData()
72303
+ // formDataFile.append('files', file, file.name)
72304
+ // const rs = await uploadMultiFileApi(formDataFile).unwrap()
72305
+ // return { success: true, data: rs }
72306
+ // } catch (error: any) {
72307
+ // lastError = error
72308
+ // // Không retry nếu là lỗi validation từ server
72309
+ // if (error?.status === 400 || error?.status === 413) {
72310
+ // break
72311
+ // }
72312
+ // if (attempt < maxRetries) {
72313
+ // // Exponential backoff: 1s, 2s, 4s...
72314
+ // await new Promise(resolve => setTimeout(resolve, 1000 * Math.pow(2, attempt))
72315
+ // )
72316
+ // }
72317
+ // }
72318
+ // }
72319
+ // return {
72320
+ // success: false,
72321
+ // error: lastError?.message || 'Upload thất bại'
72322
+ // }
72323
+ // }
72324
+ // const sendFile = async (event: any) => {
72325
+ // if (event.target.files && event.target.files[0]) {
72326
+ // const filesToUpload: File[] = Array.from(event.target.files)
72327
+ // const errors: Array<{ file: File, error: any }> = []
72328
+ // for (const file of filesToUpload) {
72329
+ // const result = await uploadWithRetry(file)
72330
+ // if (result.success && chatRoomId) {
72331
+ // connectHub(chatRoomId, {
72332
+ // sendTo: dataInfo.id,
72333
+ // content: '',
72334
+ // type: 'file',
72335
+ // path: JSON.stringify(result.data?.infoFiles),
72336
+ // typeChat
72337
+ // })
72338
+ // } else {
72339
+ // errors.push({ file, error: result.error })
72340
+ // }
72341
+ // }
72342
+ // if (errors.length > 0) {
72343
+ // notificationError(`${errors.length} file upload thất bại`)
72344
+ // }
72345
+ // event.target.value = ''
72346
+ // }
72347
+ // }
72348
+ // const sendImage = async (event: any) => {
72349
+ // if (event.target.files && event.target.files[0]) {
72350
+ // const filesToUpload: File[] = Array.from(event.target.files)
72351
+ // const errors: Array<{ file: File, error: any }> = []
72352
+ // const batchId = newGuid()
72353
+ // for (const file of filesToUpload) {
72354
+ // const result = await uploadWithRetry(file)
72355
+ // const item = result.data?.infoFiles?.map((x: any) => ({ ...x, batchId, createdDate: new Date().toISOString() })) || []
72356
+ // if (result.success && chatRoomId && result?.data?.status) {
72357
+ // connectHub(chatRoomId, {
72358
+ // sendTo: dataInfo.id,
72359
+ // content: '',
72360
+ // type: 'image',
72361
+ // path: JSON.stringify(item),
72362
+ // typeChat
72363
+ // })
72364
+ // } else {
72365
+ // errors.push({ file, error: result.error })
72366
+ // }
72367
+ // }
72368
+ // if (errors.length > 0) {
72369
+ // notificationError(`${errors.length} ảnh upload thất bại`)
72370
+ // }
72371
+ // event.target.value = ''
72372
+ // }
72373
+ // }
72374
+ // const handleRemoveImage = useCallback((idx: number) => {
72375
+ // const newArr = [...imgCopy]
72376
+ // newArr.splice(idx, 1)
72377
+ // setImgCopy(newArr)
72378
+ // }, [imgCopy])
72379
+ // const onContextMenu = useCallback((e: any, chatMessage: any) => {
72380
+ // const selection: any = window.document.getSelection()
72381
+ // setIsOpen(true)
72382
+ // setPosition({ x: e.clientX, y: e.clientY })
72383
+ // if (e.target) {
72384
+ // setCurrentMessage(chatMessage)
72385
+ // }
72386
+ // // Detect ảnh được click từ data attribute
72387
+ // const fileIndex = e.target?.dataset?.fileIndex
72388
+ // if (fileIndex !== undefined && chatMessage?.path) {
72389
+ // setClickedImageFile(chatMessage.path[parseInt(fileIndex)])
72390
+ // } else {
72391
+ // setClickedImageFile(null)
72392
+ // }
72393
+ // e.preventDefault()
72394
+ // const contextType = selection.toString() ? 'selection' : chatMessage?.type ? chatMessage.type : 'default'
72395
+ // const config = CONTEXT_CONFIG[contextType]
72396
+ // setListContextShow({ list: config.show, type: "SHOW" })
72397
+ // setListContextHide({ list: config.hide, type: "HIDE" })
72398
+ // }, [])
72399
+ // const clearReply = () => {
72400
+ // setReplyMessage(null)
72401
+ // }
72402
+ // const handleTypingStart = () => {
72403
+ // if (!isTypingRef.current && connection && chatRoomId) {
72404
+ // connection.invoke('StartTyping', chatRoomId).catch(console.error)
72405
+ // isTypingRef.current = true
72406
+ // }
72407
+ // }
72408
+ // const handleTypingStop = () => {
72409
+ // if (typingTimeoutRef.current) { clearTimeout(typingTimeoutRef.current) }
72410
+ // typingTimeoutRef.current = setTimeout(() => {
72411
+ // if (isTypingRef.current && connection && chatRoomId) {
72412
+ // connection.invoke('StopTyping', chatRoomId).catch(console.error)
72413
+ // isTypingRef.current = false
72414
+ // }
72415
+ // }, 2000)
72416
+ // }
72417
+ // const handleChange = useCallback(
72418
+ // (editorState: EditorState) => {
72419
+ // if (
72420
+ // inputContainer &&
72421
+ // inputContainer.current &&
72422
+ // inputContainer.current.clientHeight > 50
72423
+ // ) {
72424
+ // setIsMultiLine(true)
72425
+ // } else {
72426
+ // setIsMultiLine(false)
72427
+ // }
72428
+ // editorState.read(() => {
72429
+ // handleTypingStart()
72430
+ // handleTypingStop()
72431
+ // })
72432
+ // },
72433
+ // [inputContainer, connection, chatRoomId]
72434
+ // )
72435
+ // const onEnter = (val: any) => {
72436
+ // handleSendMsg(val)
72437
+ // clearReply()
72438
+ // setReplyMessage(null)
72439
+ // }
72440
+ // useEffect(() => {
72441
+ // if (active) {
72442
+ // setReplyMessage(null)
72443
+ // setImgCopy([])
72444
+ // setIsAtBottom(true)
72445
+ // prevListLength.current = 0
72446
+ // }
72447
+ // }, [
72448
+ // active,
72449
+ // dataInfo
72450
+ // //chatRoomId,
72451
+ // //chatGetType
72452
+ // ])
72453
+ // // Chuyển phòng thì load lại message + pinned messages
72454
+ // useEffect(() => {
72455
+ // if (!chatRoomId && handleSidebar) { return }
72456
+ // chatGetType(chatRoomId, undefined, "", "", undefined, undefined, 0, 0)
72457
+ // if (chatRoomId) {
72458
+ // getPinMessageChatRoomApi(chatRoomId)
72459
+ // }
72460
+ // }, [chatRoomId])
72461
+ // const handleUnpinMessage = useCallback(async (message: any) => {
72462
+ // const pinId = message?.pinId || message?.id
72463
+ // if (!pinId) { return }
72464
+ // await deletePinMessage(pinId)
72465
+ // }, [deletePinMessage, chatRoomId])
72466
+ // const handleViewPinnedMessage = useCallback((message: any) => {
72467
+ // if (message?.id) {
72468
+ // //setViewingPinnedMessage(message.id)
72469
+ // // Tìm message element
72470
+ // const element = document.getElementById(`msg-${message.id}`)
72471
+ // const chatContainer = document.getElementById('scrollableDivChat')
72472
+ // if (element && chatContainer) {
72473
+ // // Lấy vị trí của element và container
72474
+ // const elementRect = element.getBoundingClientRect()
72475
+ // const containerRect = chatContainer.getBoundingClientRect()
72476
+ // // Tính toán scroll position để đưa element vào giữa container
72477
+ // const scrollTop = chatContainer.scrollTop
72478
+ // const offset = elementRect.top - containerRect.top - (containerRect.height / 2) + (elementRect.height / 2)
72479
+ // // Scroll trong container, không scroll toàn page
72480
+ // chatContainer.scrollTo({
72481
+ // top: scrollTop + offset,
72482
+ // behavior: 'smooth'
72483
+ // })
72484
+ // // Highlight message
72485
+ // const originalBg = element.style.backgroundColor
72486
+ // const originalZIndex = element.style.zIndex
72487
+ // element.style.backgroundColor = '#fff3cd'
72488
+ // element.style.zIndex = '1000'
72489
+ // element.style.position = 'relative'
72490
+ // element.style.transition = 'background-color 0.3s'
72491
+ // // Auto close sau 500ms
72492
+ // setTimeout(() => {
72493
+ // element.style.backgroundColor = originalBg || ''
72494
+ // element.style.zIndex = originalZIndex || ''
72495
+ // //setViewingPinnedMessage(null)
72496
+ // }, 500)
72497
+ // } else {
72498
+ // console.log('Message not found in current view, may need to load more messages')
72499
+ // setTimeout(() => {
72500
+ // //setViewingPinnedMessage(null)
72501
+ // }, 2000)
72502
+ // }
72503
+ // }
72504
+ // }, [])
72505
+ // const onKeyDown = (event: any) => {
72506
+ // if (event.code === 'NumpadEnter') {
72507
+ // event.preventDefault()
72508
+ // const baseOptions = {
72509
+ // key: 'Enter',
72510
+ // code: 'Enter',
72511
+ // which: 13,
72512
+ // keyCode: 13,
72513
+ // bubbles: true,
72514
+ // shiftKey: event.shiftKey,
72515
+ // altKey: event.altKey,
72516
+ // ctrlKey: event.ctrlKey,
72517
+ // metaKey: event.metaKey
72518
+ // }
72519
+ // const newEvent = new KeyboardEvent('keydown', baseOptions)
72520
+ // event.target.dispatchEvent(newEvent)
72521
+ // }
72522
+ // }
72523
+ // const useParsedChatData = (chatMsg: string) => {
72524
+ // if (!chatMsg) { return {} }
72525
+ // try {
72526
+ // return typeof chatMsg === 'string' ? JSON.parse(chatMsg) : chatMsg
72527
+ // } catch (err) {
72528
+ // console.error('JSON parse error:', err)
72529
+ // return {}
72530
+ // }
72531
+ // }
72532
+ // const renderChatText = useCallback((chat: any) => {
72533
+ // const isPath = Array.isArray(chat?.path) && typeof chat.path[0]?.path === "string" ? chat.path[0].path.trim() : ""
72534
+ // const img = isPath ? `${CDN_URL_VIEW}/${isPath}` : ""
72535
+ // const toggleExpanded = (messageId: string) => {
72536
+ // const newExpanded = new Set(expandedMessages)
72537
+ // if (newExpanded.has(messageId)) {
72538
+ // newExpanded.delete(messageId)
72539
+ // } else {
72540
+ // newExpanded.add(messageId)
72541
+ // }
72542
+ // setExpandedMessages(newExpanded)
72543
+ // }
72544
+ // const formatMentionsReact = (text: string, mentions: any[], messageId: string) => {
72545
+ // if (!text || !mentions || mentions.length === 0) { return text }
72546
+ // const maxLength = 200
72547
+ // const isExpanded = expandedMessages.has(messageId)
72548
+ // let displayText = text
72549
+ // let isTruncated = false
72550
+ // if (!isExpanded && text.length > maxLength) {
72551
+ // displayText = text.substring(0, maxLength)
72552
+ // isTruncated = true
72553
+ // }
72554
+ // // Chỉ highlight những mention có trong danh sách
72555
+ // let result: any = displayText
72556
+ // // Hàm helper để xử lý mention trong cả string và array
72557
+ // const processMention = (text: string, mention: any): any => {
72558
+ // const escapedName = mention?.name?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
72559
+ // const mentionRegex = new RegExp(`@${escapedName}(?=\\s|$|[.,;:!?()[\\]{}'"\`~@])`, 'g')
72560
+ // const parts = text.split(mentionRegex)
72561
+ // const matches = text.match(mentionRegex) || []
72562
+ // if (matches.length === 0) {
72563
+ // return text
72564
+ // }
72565
+ // const newParts: any[] = []
72566
+ // parts.forEach((part: any, index: any) => {
72567
+ // newParts.push(part)
72568
+ // if (matches[index]) {
72569
+ // newParts.push(
72570
+ // <span key={`mention-${messageId}-${mention.id || mention.name}-${index}`} className="chat-mention">
72571
+ // {matches[index]}
72572
+ // </span>
72573
+ // )
72574
+ // }
72575
+ // })
72576
+ // return newParts
72577
+ // }
72578
+ // mentions.forEach((mention: any) => {
72579
+ // if (typeof result === 'string') {
72580
+ // result = processMention(result, mention)
72581
+ // } else if (Array.isArray(result)) {
72582
+ // // Xử lý từng phần tử trong array
72583
+ // const processedArray: any[] = []
72584
+ // result.forEach((item: any) => {
72585
+ // if (typeof item === 'string') {
72586
+ // const processed = processMention(item, mention)
72587
+ // if (Array.isArray(processed)) {
72588
+ // processedArray.push(...processed)
72589
+ // } else {
72590
+ // processedArray.push(processed)
72591
+ // }
72592
+ // } else {
72593
+ // // Giữ nguyên các React elements đã được xử lý
72594
+ // processedArray.push(item)
72595
+ // }
72596
+ // })
72597
+ // result = processedArray
72598
+ // }
72599
+ // })
72600
+ // // Add expand/collapse functionality
72601
+ // if (isTruncated || (isExpanded && text.length > maxLength)) {
72602
+ // const expandButton = (
72603
+ // <span
72604
+ // key={`expand-${messageId}`}
72605
+ // onClick={() => toggleExpanded(messageId)}
72606
+ // style={{
72607
+ // color: '#006edc',
72608
+ // cursor: 'pointer',
72609
+ // fontWeight: 500,
72610
+ // marginLeft: 5
72611
+ // }}
72612
+ // >
72613
+ // {isExpanded ? ' Thu gọn' : '... Mở rộng'}
72614
+ // </span>
72615
+ // )
72616
+ // if (Array.isArray(result)) {
72617
+ // result.push(expandButton)
72618
+ // } else {
72619
+ // result = [result, expandButton]
72620
+ // }
72621
+ // }
72622
+ // return result
72623
+ // }
72624
+ // return (
72625
+ // <>
72626
+ // <div>
72627
+ // <div>
72628
+ // {chat.path && chat.path.length === 1 && (
72629
+ // <div className="image-container">
72630
+ // {img && <img src={img} alt="" />}
72631
+ // </div>
72632
+ // )}
72633
+ // {isValidUrl(chat.msg) && renderLinkPreview(chat.msg)}
72634
+ // {chat.msg && !isValidUrl(chat.msg) ? (
72635
+ // <div>{formatMentionsReact(chat.msg, mentionItems, chat.id)}</div>
72636
+ // ) : (
72637
+ // <></>
72638
+ // )}
72639
+ // {chat.path && chat.path.length > 1 && (
72640
+ // <div className="group-image">
72641
+ // {chat.path.map((it: any, index: any) => {
72642
+ // return (
72643
+ // <div
72644
+ // key={index}
72645
+ // className="group-image-item image-container"
72646
+ // >
72647
+ // <img
72648
+ // style={{ maxWidth: "100%", maxHeight: 360 }}
72649
+ // src={`${CDN_URL_VIEW}/${it.path.trim()}`}
72650
+ // onClick={() => handlePreview(it)}
72651
+ // alt=""
72652
+ // />
72653
+ // </div>
72654
+ // )
72655
+ // })}
72656
+ // </div>
72657
+ // )}
72658
+ // <div className="" style={{ fontSize: "12px", color: "#476285" }}>
72659
+ // {moment(chat.time).format("HH:mm")}
72660
+ // </div>
72661
+ // </div>
72662
+ // </div>
72663
+ // </>
72664
+ // )
72665
+ // }, [expandedMessages, handlePreview, mentionItems])
72666
+ // const getLinkPreviewData = (urlString: string) => {
72667
+ // try {
72668
+ // const hasProtocol = /^https?:\/\//i.test(urlString)
72669
+ // const href = hasProtocol ? urlString : `https://${urlString}`
72670
+ // const url = new URL(href)
72671
+ // const displayUrl =
72672
+ // urlString.length > 80 ? `${urlString.slice(0, 77)}...` : urlString
72673
+ // return {
72674
+ // href,
72675
+ // displayUrl,
72676
+ // host: url.host
72677
+ // }
72678
+ // } catch (e) {
72679
+ // return {
72680
+ // href: urlString,
72681
+ // displayUrl: urlString,
72682
+ // host: ''
72683
+ // }
72684
+ // }
72685
+ // }
72686
+ // const renderLinkPreview = (urlString: string) => {
72687
+ // const { href, displayUrl, host } = getLinkPreviewData(urlString)
72688
+ // return (
72689
+ // <>
72690
+ // <a
72691
+ // href={href}
72692
+ // target="_blank"
72693
+ // rel="noreferrer"
72694
+ // style={{
72695
+ // textDecoration: 'none',
72696
+ // color: 'inherit'
72697
+ // }}
72698
+ // >
72699
+ // <div
72700
+ // style={{
72701
+ // marginTop: 4,
72702
+ // marginBottom: 4,
72703
+ // padding: '8px 10px',
72704
+ // borderRadius: 8,
72705
+ // backgroundColor: '#eef5ff',
72706
+ // border: '1px solid #d3e2ff',
72707
+ // maxWidth: 420
72708
+ // }}
72709
+ // >
72710
+ // <div
72711
+ // style={{
72712
+ // fontSize: 14,
72713
+ // fontWeight: 500,
72714
+ // color: '#1d4f91',
72715
+ // wordBreak: 'break-word'
72716
+ // }}
72717
+ // >
72718
+ // {displayUrl}
72719
+ // </div>
72720
+ // {host && (
72721
+ // <div
72722
+ // style={{
72723
+ // marginTop: 4,
72724
+ // fontSize: 12,
72725
+ // color: '#6f6b7d'
72726
+ // }}
72727
+ // >
72728
+ // {host}
72729
+ // </div>
72730
+ // )}
72731
+ // </div>
72732
+ // </a>
72733
+ // </>
72734
+ // )
72735
+ // }
72736
+ // const renderNotifyLeaveGroup = useCallback((chat: any) => {
72737
+ // const msg = JSON.parse(chat?.msg)
72738
+ // if (chat?.createdById === dataProfile?.id) {
72739
+ // return (
72740
+ // <>
72741
+ // <div>
72742
+ // <span style={{ fontWeight: "bold", marginRight: "5px" }}>
72743
+ // {msg?.name}
72744
+ // </span>
72745
+ // <span>được bạn xoá khỏi nhóm</span>
72746
+ // </div>
72747
+ // </>
72748
+ // )
72749
+ // }
72750
+ // if (chat?.createdById === msg?.id) {
72751
+ // return (
72752
+ // <>
72753
+ // <div>
72754
+ // <span style={{ fontWeight: "bold", marginRight: "5px" }}>
72755
+ // {msg?.name}
72756
+ // </span>
72757
+ // <span>đã rời khỏi nhóm</span>
72758
+ // </div>
72759
+ // </>
72760
+ // )
72761
+ // }
72762
+ // return (
72763
+ // <>
72764
+ // <div>
72765
+ // <span style={{ fontWeight: "bold", marginRight: "5px" }}>
72766
+ // {msg?.name}
72767
+ // </span>
72768
+ // <span>được <span style={{ fontWeight: "bold", marginRight: "5px" }}>{chat?.createdBy?.name}</span> xoá khỏi nhóm</span>
72769
+ // </div>
72770
+ // </>
72771
+ // )
72772
+ // }, [dataProfile])
72773
+ // const renderChatNotification = useCallback((chat: any) => {
72774
+ // const parseChatMsg = (msg: string) => {
72775
+ // if (!msg) { return [] }
72776
+ // try {
72777
+ // const parsed = typeof msg === 'string' ? JSON.parse(msg) : msg
72778
+ // return Array.isArray(parsed) ? parsed : [parsed]
72779
+ // } catch (err) {
72780
+ // console.error('JSON parse error:', err)
72781
+ // return []
72782
+ // }
72783
+ // }
72784
+ // const dataParse = parseChatMsg(chat.msg)
72785
+ // // ✅ FIX: Kiểm tra array trước khi dùng slice
72786
+ // if (!Array.isArray(dataParse) || dataParse.length === 0) {
72787
+ // return (
72788
+ // <div>
72789
+ // <span>Đã có thay đổi trong nhóm</span>
72790
+ // </div>
72791
+ // )
72792
+ // }
72793
+ // const displayedItems = dataParse.slice(0, 2)
72794
+ // const extraCount = Math.max(0, dataParse.length - displayedItems.length)
72795
+ // return (
72796
+ // <>
72797
+ // <div>
72798
+ // {displayedItems.map((item: any, index: any) => (
72799
+ // <strong key={index}>
72800
+ // {item.name}
72801
+ // {index < displayedItems.length - 1 && ", "}
72802
+ // </strong>
72803
+ // ))}
72804
+ // {dataParse.length > 3 && (
72805
+ // <strong>
72806
+ // <span style={{ fontWeight: "normal" }}>{" và "}</span>{" "}
72807
+ // {extraCount} người khác
72808
+ // </strong>
72809
+ // )}
72810
+ // {" được "}
72811
+ // {chat?.createdBy?.id === dataProfile?.id ? (
72812
+ // <span>bạn </span>
72813
+ // ) : (
72814
+ // <strong style={{ marginRight: "5px" }}>{chat?.createdByName}</strong>
72815
+ // )}
72816
+ // thêm vào nhóm
72817
+ // </div>
72818
+ // </>
72819
+ // )
72820
+ // }, [dataProfile])
72821
+ // const renderChatImage = useCallback((chat: any) => {
72822
+ // const files = chat.path
72823
+ // if (!files || !Array.isArray(files) || files.length === 0) {
72824
+ // return null
72825
+ // }
72826
+ // // Ảnh đơn lẻ
72827
+ // if (files.length === 1) {
72828
+ // const imagePath = files[0]?.path?.trim()
72829
+ // if (!imagePath) { return null }
72830
+ // return (
72831
+ // <>
72832
+ // <div className="image-container" style={{ maxWidth: "100%", position: "relative" }}>
72833
+ // <img
72834
+ // src={`${CDN_URL_VIEW}/${imagePath}`}
72835
+ // alt={`Chat image ${chat.id + 1}`}
72836
+ // data-file-index={chat.id}
72837
+ // style={{
72838
+ // maxWidth: "100%",
72839
+ // maxHeight: 400,
72840
+ // borderRadius: 8,
72841
+ // cursor: "pointer"
72842
+ // }}
72843
+ // onClick={() => handlePreview(files[0])}
72844
+ // />
72845
+ // {/* HD Badge */}
72846
+ // <div
72847
+ // style={{
72848
+ // position: "absolute",
72849
+ // top: 6,
72850
+ // left: 6,
72851
+ // backgroundColor: "rgba(0, 0, 0, 0.6)",
72852
+ // color: "white",
72853
+ // padding: "2px 6px",
72854
+ // borderRadius: 4,
72855
+ // fontSize: "10px",
72856
+ // fontWeight: "bold"
72857
+ // }}
72858
+ // >
72859
+ // HD
72860
+ // </div>
72861
+ // </div>
72862
+ // <div className="px-1 py-75">{moment(chat.time).format("HH:mm")}</div>
72863
+ // </>
72864
+ // )
72865
+ // }
72866
+ // // Nhiều ảnh - hiển thị dạng grid 2 cột, tối đa 6 ảnh
72867
+ // const imagesToShow = files.slice(0, 6)
72868
+ // const remainingCount = files.length - 6
72869
+ // return (
72870
+ // <>
72871
+ // <div
72872
+ // className="images-grid-container"
72873
+ // style={{
72874
+ // display: "flex",
72875
+ // flexWrap: "wrap",
72876
+ // maxWidth: "600px",
72877
+ // gap: "4px"
72878
+ // }}
72879
+ // >
72880
+ // {imagesToShow.map((file: any, index: number) => {
72881
+ // const imagePath = file?.path?.trim()
72882
+ // if (!imagePath) { return null }
72883
+ // const imageUrl = `${CDN_URL_VIEW}/${imagePath}`
72884
+ // const isLastImage = index === 5 && remainingCount > 0
72885
+ // // ✅ THÊM: Kiểm tra ảnh cuối khi số lượng lẻ
72886
+ // const isOddCount = imagesToShow.length % 2 !== 0
72887
+ // const isLastItem = index === imagesToShow.length - 1
72888
+ // const isFullWidth = isOddCount && isLastItem && !isLastImage
72889
+ // return (
72890
+ // <div
72891
+ // key={`image-${chat.id}-${index}`}
72892
+ // style={{
72893
+ // width: isFullWidth ? "100%" : "calc(50% - 2px)",
72894
+ // height: "140px",
72895
+ // position: "relative",
72896
+ // overflow: "hidden",
72897
+ // borderRadius: 8,
72898
+ // border: "1px solid #e0e0e0"
72899
+ // }}
72900
+ // >
72901
+ // <img
72902
+ // src={imageUrl}
72903
+ // alt={`Chat image ${index + 1}`}
72904
+ // style={{
72905
+ // width: "100%",
72906
+ // height: "100%",
72907
+ // objectFit: "cover",
72908
+ // borderRadius: 8,
72909
+ // display: "block",
72910
+ // cursor: "pointer"
72911
+ // }}
72912
+ // onClick={() => handlePreview(file)}
72913
+ // />
72914
+ // {/* HD Badge */}
72915
+ // <div
72916
+ // style={{
72917
+ // position: "absolute",
72918
+ // top: 6,
72919
+ // left: 6,
72920
+ // backgroundColor: "rgba(0, 0, 0, 0.6)",
72921
+ // color: "white",
72922
+ // padding: "2px 6px",
72923
+ // borderRadius: 4,
72924
+ // fontSize: "10px",
72925
+ // fontWeight: "bold",
72926
+ // zIndex: 1
72927
+ // }}
72928
+ // >
72929
+ // HD
72930
+ // </div>
72931
+ // {/* Overlay cho ảnh cuối nếu có nhiều hơn 6 ảnh */}
72932
+ // {isLastImage && (
72933
+ // <div
72934
+ // style={{
72935
+ // position: "absolute",
72936
+ // top: 0,
72937
+ // left: 0,
72938
+ // right: 0,
72939
+ // bottom: 0,
72940
+ // backgroundColor: "rgba(0, 0, 0, 0.6)",
72941
+ // display: "flex",
72942
+ // alignItems: "center",
72943
+ // justifyContent: "center",
72944
+ // color: "white",
72945
+ // fontSize: "20px",
72946
+ // fontWeight: "bold",
72947
+ // borderRadius: 8,
72948
+ // cursor: "pointer"
72949
+ // }}
72950
+ // onClick={() => handlePreview(file)}
72951
+ // >
72952
+ // +{remainingCount}
72953
+ // </div>
72954
+ // )}
72955
+ // </div>
72956
+ // )
72957
+ // })}
72958
+ // </div>
72959
+ // <div className="px-1 py-75">{moment(chat.time).format("HH:mm")}</div>
72960
+ // </>
72961
+ // )
72962
+ // }, [handlePreview])
72963
+ // const renderChatFile = useCallback((chat: any) => {
72964
+ // const files = chat?.path
72965
+ // return (
72966
+ // <>
72967
+ // {files?.map((file: any, index: number) => {
72968
+ // return (
72969
+ // <div key={index}>
72970
+ // <div className="d-flex p-50">
72971
+ // <div className="me-1" onClick={() => handlePreview(file)}>
72972
+ // {/*<IconFileType fileType={file?.type} fontSize={50} />*/}
72973
+ // <IconFileTypeColor fileType={file?.type} width={35} />
72974
+ // </div>
72975
+ // <div>
72976
+ // <p className="file-name-chat">{file.name}</p>
72977
+ // <p>{formatBytes({ size: file.size })}</p>
72978
+ // </div>
72979
+ // </div>
72980
+ // {index + 1 === files.length && (
72981
+ // <div className="px-1 pb-75">
72982
+ // {moment(chat.time).format("HH:mm")}
72983
+ // </div>
72984
+ // )}
72985
+ // </div>
72986
+ // )
72987
+ // })}
72988
+ // </>
72989
+ // )
72990
+ // }, [handlePreview])
72991
+ // const renderTaskApplication = useCallback((chat: any) => {
72992
+ // const safeParse = (str: any) => {
72993
+ // if (!str) { return {} }
72994
+ // try {
72995
+ // return typeof str === 'string' ? JSON.parse(str) : str
72996
+ // } catch (err) {
72997
+ // //console.error('JSON parse error:', err)
72998
+ // return {}
72999
+ // }
73000
+ // }
73001
+ // // Helper function to strip HTML tags and get clean text
73002
+ // const stripHtml = (html: string) => {
73003
+ // if (!html) { return '' }
73004
+ // const tmp = document.createElement('div')
73005
+ // tmp.innerHTML = html
73006
+ // return tmp.textContent || tmp.innerText || ''
73007
+ // }
73008
+ // const taskData = safeParse(chat.msg)
73009
+ // const cleanDescription = taskData.description ? stripHtml(taskData.description) : ''
73010
+ // return (
73011
+ // <div
73012
+ // style={{
73013
+ // width: 320,
73014
+ // backgroundColor: "#f8f9fa",
73015
+ // borderRadius: 12,
73016
+ // border: "1px solid #e3e8ef",
73017
+ // padding: "12px",
73018
+ // boxShadow: "0 2px 4px rgba(0,0,0,0.04)"
73019
+ // }}
73020
+ // >
73021
+ // {/* Header với icon và tiêu đề */}
73022
+ // <div className="d-flex align-items-start" style={{ marginBottom: 10 }}>
73023
+ // <div style={{
73024
+ // backgroundColor: "#e7f3ff",
73025
+ // borderRadius: 8,
73026
+ // padding: 6,
73027
+ // display: "flex",
73028
+ // alignItems: "center",
73029
+ // justifyContent: "center",
73030
+ // marginRight: 8,
73031
+ // flexShrink: 0
73032
+ // }}>
73033
+ // <BecoxyWriting color="#006edc" fontSize={24} />
73034
+ // </div>
73035
+ // <div style={{ flex: 1, minWidth: 0 }}>
73036
+ // <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 2, fontWeight: 500 }}>
73037
+ // Công việc
73038
+ // </div>
73039
+ // <div style={{
73040
+ // fontWeight: 600,
73041
+ // fontSize: 14,
73042
+ // color: "#283046",
73043
+ // lineHeight: "1.4",
73044
+ // wordBreak: "break-word"
73045
+ // }}>
73046
+ // {taskData.subject || 'Không có tiêu đề'}
73047
+ // </div>
73048
+ // </div>
73049
+ // </div>
73050
+ // {/* Nội dung */}
73051
+ // {cleanDescription && (
73052
+ // <div
73053
+ // style={{
73054
+ // marginBottom: 10,
73055
+ // padding: "8px 10px",
73056
+ // backgroundColor: "white",
73057
+ // borderRadius: 8,
73058
+ // fontSize: 12,
73059
+ // color: "#5e5873",
73060
+ // lineHeight: "1.5",
73061
+ // border: "1px solid #eff1f5",
73062
+ // wordBreak: "break-word",
73063
+ // whiteSpace: "pre-wrap"
73064
+ // }}
73065
+ // dangerouslySetInnerHTML={{ __html: taskData.description }}
73066
+ // />
73067
+ // )}
73068
+ // {/* Thông tin người tham gia */}
73069
+ // <div style={{
73070
+ // backgroundColor: "white",
73071
+ // borderRadius: 8,
73072
+ // padding: "8px 10px",
73073
+ // marginBottom: 8,
73074
+ // border: "1px solid #eff1f5"
73075
+ // }}>
73076
+ // {/* Người tạo phiếu */}
73077
+ // {taskData.createdByName && (
73078
+ // <div style={{ marginBottom: taskData.hostPerson?.length > 0 || taskData.thePerformer?.length > 0 ? 8 : 0 }}>
73079
+ // <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }}>
73080
+ // Người tạo phiếu
73081
+ // </div>
73082
+ // <div className="d-flex align-items-center">
73083
+ // <AvatarDefault
73084
+ // imgWidth={20}
73085
+ // imgHeight={20}
73086
+ // color="light-primary"
73087
+ // className="me-50"
73088
+ // img={taskData?.createdByImg}
73089
+ // />
73090
+ // <span style={{ fontSize: 12, color: "#283046", fontWeight: 500 }}>
73091
+ // {taskData.createdByName}
73092
+ // </span>
73093
+ // </div>
73094
+ // </div>
73095
+ // )}
73096
+ // {/* Người chủ trì */}
73097
+ // {taskData.hostPerson && taskData.hostPerson.length > 0 && (
73098
+ // <div style={{ marginBottom: taskData.thePerformer?.length > 0 ? 8 : 0 }}>
73099
+ // <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }}>
73100
+ // Người chủ trì
73101
+ // </div>
73102
+ // <div className="d-flex align-items-center flex-wrap" style={{ gap: 4 }}>
73103
+ // {taskData.hostPerson.slice(0, 2).map((person: any, index: number) => (
73104
+ // <div key={index} className="d-flex align-items-center" style={{
73105
+ // backgroundColor: "#f8f9fa",
73106
+ // borderRadius: 6,
73107
+ // padding: "3px 6px",
73108
+ // marginRight: 4
73109
+ // }}>
73110
+ // <AvatarDefault
73111
+ // imgWidth={18}
73112
+ // imgHeight={18}
73113
+ // color="light-info"
73114
+ // className="me-50"
73115
+ // img={person.img}
73116
+ // />
73117
+ // <span style={{ fontSize: 11, color: "#5e5873", fontWeight: 500 }}>
73118
+ // {person.name || person.fullName || 'N/A'}
73119
+ // </span>
73120
+ // </div>
73121
+ // ))}
73122
+ // {taskData.hostPerson.length > 2 && (
73123
+ // <span style={{
73124
+ // fontSize: 11,
73125
+ // color: "#8b92a7",
73126
+ // backgroundColor: "#f8f9fa",
73127
+ // padding: "3px 8px",
73128
+ // borderRadius: 6,
73129
+ // fontWeight: 500
73130
+ // }}>
73131
+ // +{taskData.hostPerson.length - 2}
73132
+ // </span>
73133
+ // )}
73134
+ // </div>
73135
+ // </div>
73136
+ // )}
73137
+ // {/* Người thực hiện */}
73138
+ // {taskData.thePerformer && taskData.thePerformer.length > 0 && (
73139
+ // <div>
73140
+ // <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }}>
73141
+ // Người thực hiện
73142
+ // </div>
73143
+ // <div className="d-flex align-items-center flex-wrap" style={{ gap: 4 }}>
73144
+ // {taskData.thePerformer.slice(0, 2).map((performer: any, index: number) => (
73145
+ // <div key={index} className="d-flex align-items-center" style={{
73146
+ // backgroundColor: "#f8f9fa",
73147
+ // borderRadius: 6,
73148
+ // padding: "3px 6px",
73149
+ // marginRight: 4
73150
+ // }}>
73151
+ // <AvatarDefault
73152
+ // imgWidth={18}
73153
+ // imgHeight={18}
73154
+ // color="light-secondary"
73155
+ // className="me-50"
73156
+ // img={performer.img}
73157
+ // />
73158
+ // <span style={{ fontSize: 11, color: "#5e5873", fontWeight: 500 }}>
73159
+ // {performer.name || performer.fullName || 'N/A'}
73160
+ // </span>
73161
+ // </div>
73162
+ // ))}
73163
+ // {taskData.thePerformer.length > 2 && (
73164
+ // <span style={{
73165
+ // fontSize: 11,
73166
+ // color: "#8b92a7",
73167
+ // backgroundColor: "#f8f9fa",
73168
+ // padding: "3px 8px",
73169
+ // borderRadius: 6,
73170
+ // fontWeight: 500
73171
+ // }}>
73172
+ // +{taskData.thePerformer.length - 2}
73173
+ // </span>
73174
+ // )}
73175
+ // </div>
73176
+ // </div>
73177
+ // )}
73178
+ // </div>
73179
+ // {/* Hạn hoàn thành */}
73180
+ // {taskData.dueDate && (
73181
+ // <div style={{
73182
+ // display: "flex",
73183
+ // alignItems: "center",
73184
+ // justifyContent: "space-between",
73185
+ // backgroundColor: "#fff5f5",
73186
+ // padding: "6px 10px",
73187
+ // borderRadius: 8,
73188
+ // marginBottom: 8,
73189
+ // border: "1px solid #ffe5e5"
73190
+ // }}>
73191
+ // <div style={{ display: "flex", alignItems: "center" }}>
73192
+ // <Clock fontSize={14} style={{ color: "#ea5455", marginRight: 6 }} />
73193
+ // <span style={{ fontSize: 10, color: "#8b92a7", fontWeight: 500 }}>
73194
+ // Hạn hoàn thành
73195
+ // </span>
73196
+ // </div>
73197
+ // <span style={{ fontSize: 12, color: "#ea5455", fontWeight: 600 }}>
73198
+ // {moment(taskData.dueDate).format('DD/MM/YYYY HH:mm')}
73199
+ // </span>
73200
+ // </div>
73201
+ // )}
73202
+ // {/* Footer time */}
73203
+ // <div style={{
73204
+ // fontSize: 11,
73205
+ // color: "#adb5bd",
73206
+ // textAlign: "right",
73207
+ // fontWeight: 500
73208
+ // }}>
73209
+ // {moment(chat.time).format("HH:mm")}
73210
+ // </div>
73211
+ // </div>
73212
+ // )
73213
+ // }, [])
73214
+ // const renderChatReminder = useCallback((chat: any) => {
73215
+ // let msgContent = chat.msg
73216
+ // let timeDisplay = chat.time
73217
+ // try {
73218
+ // const parsed = JSON.parse(chat.msg)
73219
+ // if (parsed && typeof parsed === 'object') {
73220
+ // msgContent = parsed.content || chat.msg
73221
+ // timeDisplay = parsed.scheduleTime || chat.time
73222
+ // }
73223
+ // } catch (e) {
73224
+ // // Not JSON, use original
73225
+ // }
73226
+ // return (
73227
+ // <div
73228
+ // style={{
73229
+ // borderTopRightRadius: 6,
73230
+ // borderBottomRightRadius: 6,
73231
+ // // borderTopLeftRadius: 6, // Should be conditional or default
73232
+ // borderBottomLeftRadius: 6,
73233
+ // backgroundColor: '#fff',
73234
+ // padding: '20px 20px 15px 20px',
73235
+ // boxShadow: '0 4px 24px 0 rgba(34, 41, 47, 0.1)',
73236
+ // minWidth: 300,
73237
+ // textAlign: 'center',
73238
+ // marginBottom: 15
73239
+ // }}
73240
+ // >
73241
+ // <div style={{ marginBottom: 8, display: 'flex', justifyContent: 'center' }}>
73242
+ // <Clock color="#ea5455" fontSize={32} />
73243
+ // </div>
73244
+ // <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 4, color: '#5e5873' }}>
73245
+ // {msgContent}
73246
+ // </div>
73247
+ // <div style={{ color: '#6e6b7b', fontSize: 12, marginBottom: 16, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
73248
+ // <Clock fontSize={12} style={{ marginRight: 4 }} />
73249
+ // {moment(timeDisplay).calendar(null, {
73250
+ // lastDay: '[Hôm qua lúc] HH:mm',
73251
+ // sameDay: '[Hôm nay lúc] HH:mm',
73252
+ // nextDay: '[Ngày mai lúc] HH:mm',
73253
+ // lastWeek: 'dddd [lúc] HH:mm',
73254
+ // nextWeek: 'dddd [lúc] HH:mm',
73255
+ // sameElse: 'DD/MM/YYYY HH:mm'
73256
+ // })}
73257
+ // </div>
73258
+ // <div
73259
+ // style={{
73260
+ // border: '1px solid #00cfe8',
73261
+ // color: '#00cfe8',
73262
+ // padding: '8px',
73263
+ // borderRadius: 4,
73264
+ // cursor: 'pointer',
73265
+ // fontWeight: 600,
73266
+ // fontSize: 14,
73267
+ // width: '100%'
73268
+ // }}
73269
+ // onClick={() => {
73270
+ // setOpenModalReminder(true)
73271
+ // }}
73272
+ // >
73273
+ // Xem chi tiết
73274
+ // </div>
73275
+ // </div>
73276
+ // )
73277
+ // }, [])
73278
+ // const renderMessageReply = useCallback((type: IArchiveType, msg?: string, path?: any[]) => {
73279
+ // switch (type) {
73280
+ // case "file": // ✅ THÊM CASE NÀY
73281
+ // const fileName = path?.[0]?.name || ''
73282
+ // return `[File] ${fileName}`
73283
+ // case "image":
73284
+ // return "[Hình ảnh]"
73285
+ // default:
73286
+ // return msg
73287
+ // }
73288
+ // }, [])
73289
+ // const renderReplyContent = useCallback((replyMsg: any) => {
73290
+ // const replyData = useParsedChatData(replyMsg)
73291
+ // return (
73292
+ // <div
73293
+ // className={classnames("chat-app-reply p-0 mb-50", {
73294
+ // show: true
73295
+ // })}
73296
+ // >
73297
+ // <div className="reply-container">
73298
+ // <div className="reply-quote" />
73299
+ // {replyData?.type === "image" && (
73300
+ // <div
73301
+ // className="reply-image"
73302
+ // style={{
73303
+ // backgroundImage: `url(${`${CDN_URL_VIEW}/${replyData?.path[0].path.trim()}`})`
73304
+ // }}
73305
+ // />
73306
+ // )}
73307
+ // {/* ✅ THÊM: File */}
73308
+ // {replyData?.type === "file" && (
73309
+ // <div style={{ marginRight: 8 }}>
73310
+ // <IconFileTypeColor
73311
+ // fileType={replyData?.path?.[0]?.type}
73312
+ // width={35}
73313
+ // />
73314
+ // </div>
73315
+ // )}
73316
+ // <div className="reply-content d-flex flex-column">
73317
+ // <div className="fw-bold">{replyData?.createdByName}</div>
73318
+ // <div>{renderMessageReply(replyData?.type, replyData?.msg)}</div>
73319
+ // </div>
73320
+ // </div>
73321
+ // </div>
73322
+ // )
73323
+ // }, [renderMessageReply])
73324
+ // const downloadFile = useCallback(async (path: string) => {
73325
+ // const url = `${CDN_URL_VIEW}/${path}`
73326
+ // try {
73327
+ // const response = await axios.get(url, { responseType: "blob" })
73328
+ // const dataUrl = URL.createObjectURL(new Blob([response.data]))
73329
+ // const fileName = path.split("/").pop() || "downloaded-file"
73330
+ // const a = document.createElement("a")
73331
+ // a.href = dataUrl
73332
+ // a.download = fileName
73333
+ // document.body.appendChild(a)
73334
+ // a.click()
73335
+ // a.remove()
73336
+ // } catch (error) {
73337
+ // console.error(error)
73338
+ // }
73339
+ // }, [])
73340
+ // const handleDownloadClick = useCallback((param: any) => {
73341
+ // // Ưu tiên ảnh được click, fallback về ảnh đầu tiên
73342
+ // const targetFile = clickedImageFile || param?.path?.[0]
73343
+ // if (targetFile?.path) {
73344
+ // downloadFile(targetFile.path)
73345
+ // } else {
73346
+ // console.error("No valid path found in param")
73347
+ // }
73348
+ // }, [clickedImageFile, downloadFile])
73349
+ // const handleDelete = useCallback(async (param: any) => {
73350
+ // try {
73351
+ // const result = await MySwal.fire({
73352
+ // title: "Xác nhận",
73353
+ // html: "Tin nhắn sẽ bị xóa vĩnh viễn. <br> Bạn có chắc muốn xóa?",
73354
+ // allowOutsideClick: false,
73355
+ // showCancelButton: true,
73356
+ // confirmButtonText: "Xoá",
73357
+ // cancelButtonText: "Hủy",
73358
+ // customClass: {
73359
+ // confirmButton: "btn btn-primary",
73360
+ // cancelButton: "btn btn-danger ms-1"
73361
+ // },
73362
+ // buttonsStyling: false
73363
+ // })
73364
+ // if (result.value) {
73365
+ // const data = { id: param.id, chatRoomId: groupChatUsers.id }
73366
+ // await deleteMessageApi(data)
73367
+ // } else if (result.dismiss === MySwal.DismissReason.cancel) {
73368
+ // console.log("Hủy xóa tin nhắn")
73369
+ // }
73370
+ // } catch (error) {
73371
+ // console.error("Error deleting message:", error)
73372
+ // }
73373
+ // }, [deleteMessageApi, groupChatUsers?.id])
73374
+ // const handleRecall = useCallback(async (param: any) => {
73375
+ // try {
73376
+ // const result = await MySwal.fire({
73377
+ // title: "Xác nhận",
73378
+ // html: "Bạn có chắc muốn thu hồi tin nhắn này?<br>Tin nhắn sẽ bị ẩn với tất cả mọi người.",
73379
+ // allowOutsideClick: false,
73380
+ // showCancelButton: true,
73381
+ // confirmButtonText: "Thu hồi",
73382
+ // cancelButtonText: "Hủy",
73383
+ // customClass: {
73384
+ // confirmButton: "btn btn-primary",
73385
+ // cancelButton: "btn btn-danger ms-1"
73386
+ // },
73387
+ // buttonsStyling: false
73388
+ // })
73389
+ // if (result.value) {
73390
+ // const data = { id: param.id, chatRoomId: groupChatUsers.id }
73391
+ // await recallMessageApi(data)
73392
+ // } else if (result.dismiss === MySwal.DismissReason.cancel) {
73393
+ // console.log("Hủy thu hồi tin nhắn")
73394
+ // }
73395
+ // } catch (error) {
73396
+ // console.error("Error recalling message:", error)
73397
+ // }
73398
+ // }, [recallMessageApi, groupChatUsers?.id])
73399
+ // const contextMenuClick = useCallback(async (val: any) => {
73400
+ // switch (val.id) {
73401
+ // case "copyImage":
73402
+ // try {
73403
+ // // Ưu tiên ảnh được click, fallback về ảnh đầu tiên
73404
+ // const targetFile = clickedImageFile || val?.currentMessage?.path?.[0]
73405
+ // const imagePath = targetFile?.path
73406
+ // if (!imagePath) {
73407
+ // console.error('Không tìm thấy đường dẫn ảnh')
73408
+ // return
73409
+ // }
73410
+ // const imgUrl = `${CDN_URL_VIEW}/${imagePath}`
73411
+ // const response = await fetch(imgUrl)
73412
+ // const blob = await response.blob()
73413
+ // await navigator.clipboard.write([
73414
+ // new ClipboardItem({
73415
+ // [blob.type]: blob
73416
+ // })
73417
+ // ])
73418
+ // } catch (error) {
73419
+ // console.error('Lỗi khi copy ảnh:', error)
73420
+ // }
73421
+ // break
73422
+ // case "copyText":
73423
+ // navigator.clipboard.writeText(val?.currentMessage.msg)
73424
+ // break
73425
+ // case "reply":
73426
+ // setReplyMessage(val)
73427
+ // break
73428
+ // case "save":
73429
+ // handleDownloadClick(val.currentMessage)
73430
+ // break
73431
+ // case "delete":
73432
+ // handleDelete(val.currentMessage)
73433
+ // break
73434
+ // case "recall":
73435
+ // handleRecall(val.currentMessage)
73436
+ // break
73437
+ // default:
73438
+ // break
73439
+ // }
73440
+ // }, [clickedImageFile, handleDelete, handleDownloadClick, handleRecall])
73441
+ // const handleFocus = useCallback(() => {
73442
+ // editor.focus()
73443
+ // }, [editor])
73444
+ // const handleReply = useCallback((data: any) => {
73445
+ // handleFocus()
73446
+ // setReplyMessage({ id: "reply", currentMessage: data })
73447
+ // }, [handleFocus])
73448
+ // const handleEnterMultiSelectMode = useCallback((message: any) => {
73449
+ // setIsMultiSelectMode(true)
73450
+ // setSelectedMessages(new Set([message.id]))
73451
+ // }, [])
73452
+ // const handleExitMultiSelectMode = useCallback(() => {
73453
+ // setIsMultiSelectMode(false)
73454
+ // setSelectedMessages(new Set())
73455
+ // }, [])
73456
+ // const handleToggleMessageSelection = useCallback((messageId: string) => {
73457
+ // setSelectedMessages(prev => {
73458
+ // const newSet = new Set(prev)
73459
+ // if (newSet.has(messageId)) {
73460
+ // newSet.delete(messageId)
73461
+ // } else {
73462
+ // newSet.add(messageId)
73463
+ // }
73464
+ // return newSet
73465
+ // })
73466
+ // }, [])
73467
+ // const handleBatchDelete = useCallback(async () => {
73468
+ // if (selectedMessages.size === 0) { return }
73469
+ // MySwal.fire({
73470
+ // title: t("Confirm"),
73471
+ // html: `Bạn có chắc muốn xóa ${selectedMessages.size} tin nhắn đã chọn?`,
73472
+ // allowOutsideClick: false,
73473
+ // showCancelButton: true,
73474
+ // confirmButtonText: t("Delete"),
73475
+ // cancelButtonText: t("Cancel"),
73476
+ // customClass: {
73477
+ // confirmButton: "btn btn-primary",
73478
+ // cancelButton: "btn btn-danger ms-1"
73479
+ // },
73480
+ // buttonsStyling: false
73481
+ // }).then(async (result) => {
73482
+ // if (result.value) {
73483
+ // try {
73484
+ // const deletePromises = Array.from(selectedMessages).map(id => deleteMessageApi({ id, chatRoomId: groupChatUsers?.id })
73485
+ // )
73486
+ // await Promise.all(deletePromises)
73487
+ // handleExitMultiSelectMode()
73488
+ // } catch (error) {
73489
+ // console.error('Error deleting messages:', error)
73490
+ // }
73491
+ // }
73492
+ // })
73493
+ // }, [selectedMessages, deleteMessageApi, groupChatUsers?.id, handleExitMultiSelectMode, t])
73494
+ // const handleBatchRecall = useCallback(async () => {
73495
+ // if (selectedMessages.size === 0) { return }
73496
+ // MySwal.fire({
73497
+ // title: t("Confirm"),
73498
+ // html: `Bạn có chắc muốn thu hồi ${selectedMessages.size} tin nhắn đã chọn?`,
73499
+ // allowOutsideClick: false,
73500
+ // showCancelButton: true,
73501
+ // confirmButtonText: t("Recall"),
73502
+ // cancelButtonText: t("Cancel"),
73503
+ // customClass: {
73504
+ // confirmButton: "btn btn-primary",
73505
+ // cancelButton: "btn btn-danger ms-1"
73506
+ // },
73507
+ // buttonsStyling: false
73508
+ // }).then(async (result) => {
73509
+ // if (result.value) {
73510
+ // try {
73511
+ // const recallPromises = Array.from(selectedMessages).map(id => recallMessageApi({ id, chatRoomId: groupChatUsers?.id }))
73512
+ // await Promise.all(recallPromises)
73513
+ // handleExitMultiSelectMode()
73514
+ // } catch (error) {
73515
+ // console.error('Error recalling messages:', error)
73516
+ // }
73517
+ // }
73518
+ // })
73519
+ // }, [selectedMessages, recallMessageApi, groupChatUsers?.id, handleExitMultiSelectMode, t])
73520
+ // const handleBatchCopy = useCallback(async () => {
73521
+ // if (selectedMessages.size === 0) { return }
73522
+ // const getMessageContent = (msg: any) => {
73523
+ // if (!msg) { return '' }
73524
+ // const content = msg.msg || msg.content || ''
73525
+ // switch (msg.type) {
73526
+ // case "text":
73527
+ // return content
73528
+ // case "image":
73529
+ // return "[Hình ảnh]"
73530
+ // case "file":
73531
+ // const fileName = msg.path?.[0]?.name || ''
73532
+ // return `[File] ${fileName}`
73533
+ // case "reminder":
73534
+ // try {
73535
+ // const parsed = JSON.parse(content)
73536
+ // return parsed.content || content
73537
+ // } catch {
73538
+ // return content
73539
+ // }
73540
+ // default:
73541
+ // return content
73542
+ // }
73543
+ // }
73544
+ // const messages = Array.from(selectedMessages).map(id => {
73545
+ // // Find message in messageByGroup.items
73546
+ // if (!messageByGroup?.items) { return '' }
73547
+ // const msg = messageByGroup.items?.find((m: any) => m.id === id)
73548
+ // if (msg) { return getMessageContent(msg) }
73549
+ // return ''
73550
+ // }).filter(Boolean).join('\n\n')
73551
+ // if (!messages) {
73552
+ // notificationError('Không có nội dung để sao chép')
73553
+ // return
73554
+ // }
73555
+ // try {
73556
+ // // Tạo HTML content với line breaks rõ ràng cho Lexical
73557
+ // const htmlLines = messages.split('\n\n').map(msg => {
73558
+ // // Mỗi tin nhắn là một paragraph
73559
+ // return `<p class="editor-paragraph" dir="ltr"><span style="white-space: pre-wrap;">${msg.replace(/\n/g, '</span><br><span style="white-space: pre-wrap;">')}</span></p>`
73560
+ // }).join('')
73561
+ // const htmlContent = `<div>${htmlLines}</div>`
73562
+ // // Copy cả plain text và HTML
73563
+ // const html = new Blob([htmlContent], { type: 'text/html' })
73564
+ // const text = new Blob([messages], { type: 'text/plain' })
73565
+ // await navigator.clipboard.write([
73566
+ // new ClipboardItem({
73567
+ // 'text/html': html,
73568
+ // 'text/plain': text
73569
+ // })
73570
+ // ])
73571
+ // notificationSuccess('Đã sao chép tin nhắn')
73572
+ // } catch (err) {
73573
+ // // Fallback sang phương pháp cũ nếu Clipboard API thất bại
73574
+ // console.warn('Clipboard API failed, using fallback:', err)
73575
+ // try {
73576
+ // const textarea = document.createElement('textarea')
73577
+ // textarea.value = messages
73578
+ // textarea.style.position = 'fixed'
73579
+ // textarea.style.left = '-9999px'
73580
+ // textarea.style.top = '0'
73581
+ // textarea.setAttribute('readonly', '')
73582
+ // document.body.appendChild(textarea)
73583
+ // textarea.focus()
73584
+ // textarea.select()
73585
+ // const successful = document.execCommand('copy')
73586
+ // document.body.removeChild(textarea)
73587
+ // if (successful) {
73588
+ // notificationSuccess('Đã sao chép tin nhắn')
73589
+ // } else {
73590
+ // notificationError('Không thể sao chép tin nhắn')
73591
+ // }
73592
+ // } catch (fallbackErr) {
73593
+ // console.error('Fallback copy failed:', fallbackErr)
73594
+ // notificationError('Không thể sao chép tin nhắn')
73595
+ // }
73596
+ // } finally {
73597
+ // handleExitMultiSelectMode()
73598
+ // }
73599
+ // }, [selectedMessages, messageByGroup, handleExitMultiSelectMode])
73600
+ // const isNotificationType = (chatType: string) => {
73601
+ // return ["notifyAddUser", "notifyLeaveGroup", "reminder"].includes(chatType)
73602
+ // }
73603
+ // const renderChatBlock = useCallback((item: any) => {
73604
+ // const userAvatar2 = item && item.avatar ? item.avatar : DEFAULT_AVATAR
73605
+ // if (!item?.messages) { return null }
73606
+ // return (
73607
+ // <>
73608
+ // {item.messages?.map((chat: any, i: number) => {
73609
+ // const messageKey = chat?.id || `${item.id}-${i}`
73610
+ // return (
73611
+ // <div
73612
+ // key={messageKey}
73613
+ // className={classnames("chat", {
73614
+ // "chat-left": item.senderId !== dataProfile.id,
73615
+ // "chat-selected": isMultiSelectMode && selectedMessages.has(chat.id)
73616
+ // })}
73617
+ // style={{ position: 'relative' }}
73618
+ // onClick={() => {
73619
+ // if (isMultiSelectMode && chat.id && !isNotificationType(chat.type)) {
73620
+ // handleToggleMessageSelection(chat.id)
73621
+ // }
73622
+ // }}
73623
+ // >
73624
+ // {item.senderId !== dataProfile.id && i === item?.messages.length - 1 && (
73625
+ // <div className="chat-avatar " style={{ position: 'absolute', top: 10 }}>
73626
+ // <AvatarDefault
73627
+ // imgWidth={36}
73628
+ // imgHeight={36}
73629
+ // color="light-secondary"
73630
+ // className="cursor-pointer"
73631
+ // img={userAvatar2}
73632
+ // />
73633
+ // </div>
73634
+ // )}
73635
+ // {isMultiSelectMode && chat.id && !isNotificationType(chat.type) && (
73636
+ // <div
73637
+ // className="message-checkbox"
73638
+ // style={{
73639
+ // position: 'absolute',
73640
+ // left: item.senderId !== dataProfile.id ? '50px' : 'auto',
73641
+ // right: item.senderId === dataProfile.id ? '10px' : 'auto',
73642
+ // top: '50%',
73643
+ // transform: 'translateY(-50%)',
73644
+ // zIndex: 5
73645
+ // }}
73646
+ // onClick={(e) => {
73647
+ // e.stopPropagation()
73648
+ // handleToggleMessageSelection(chat.id)
73649
+ // }}
73650
+ // >
73651
+ // <div
73652
+ // style={{
73653
+ // width: 22,
73654
+ // height: 22,
73655
+ // borderRadius: '50%',
73656
+ // border: selectedMessages.has(chat.id) ? '2px solid #7367f0' : '2px solid #d8d6de',
73657
+ // backgroundColor: selectedMessages.has(chat.id) ? '#7367f0' : '#fff',
73658
+ // display: 'flex',
73659
+ // alignItems: 'center',
73660
+ // justifyContent: 'center',
73661
+ // cursor: 'pointer',
73662
+ // transition: 'all 0.2s ease'
73663
+ // }}
73664
+ // >
73665
+ // {selectedMessages.has(chat.id) && (
73666
+ // <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
73667
+ // <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="white"/>
73668
+ // </svg>
73669
+ // )}
73670
+ // </div>
73671
+ // </div>
73672
+ // )}
73673
+ // <div className="chat-body">
73674
+ // <div
73675
+ // key={i}
73676
+ // id={chat.id ? `msg-${chat.id}` : undefined}
73677
+ // className={classnames(
73678
+ // "d-flex align-items-end chat-message-item",
73679
+ // {
73680
+ // "justify-content-end": item.senderId === dataProfile.id && !isNotificationType(chat.type),
73681
+ // "justify-content-center": isNotificationType(chat.type),
73682
+ // 'ms-3': true
73683
+ // }
73684
+ // )}
73685
+ // >
73686
+ // {!isNotificationType(chat.type) && (
73687
+ // <div
73688
+ // className="message-action"
73689
+ // style={{
73690
+ // order: item.senderId !== dataProfile.id ? 1 : 0
73691
+ // }}
73692
+ // >
73693
+ // <div
73694
+ // className={classnames(
73695
+ // "d-flex align-items-center px-1 py-50 mb-75 ",
73696
+ // {
73697
+ // "me-1": item.senderId === dataProfile.id,
73698
+ // "ms-1": item.senderId !== dataProfile.id
73699
+ // }
73700
+ // )}
73701
+ // style={{
73702
+ // background: "#fff",
73703
+ // borderRadius: 6
73704
+ // }}
73705
+ // >
73706
+ // <QuoteRight
73707
+ // onClick={() => handleReply(chat)}
73708
+ // fontSize={14}
73709
+ // className="me-1 cursor-pointer btn-action"
73710
+ // />
73711
+ // <OutlineReply
73712
+ // fontSize={20}
73713
+ // className="me-1 cursor-pointer btn-action"
73714
+ // onClick={() => {
73715
+ // setShareItem(chat)
73716
+ // setOpenModalShare(true)
73717
+ // }}
73718
+ // />
73719
+ // <DMenuContainer
73720
+ // label=""
73721
+ // customLabel={<MoreHorizontal />}
73722
+ // className="btn-action"
73723
+ // >
73724
+ // {chat.type === "LeaveApplication" && (
73725
+ // <DMenuItem
73726
+ // label="Duyệt"
73727
+ // icon={
73728
+ // <CheckSquare
73729
+ // color="gray"
73730
+ // fontSize={16}
73731
+ // className="me-50"
73732
+ // />
73733
+ // }
73734
+ // />
73735
+ // )}
73736
+ // {chat.type !== "LeaveApplication" && (
73737
+ // <DMenuItem
73738
+ // onClick={() => navigator.clipboard.writeText(chat?.msg)
73739
+ // }
73740
+ // label="Copy tin nhắn"
73741
+ // icon={
73742
+ // <Copy
73743
+ // color="gray"
73744
+ // fontSize={16}
73745
+ // className="me-50"
73746
+ // />
73747
+ // }
73748
+ // />
73749
+ // )}
73750
+ // <hr style={{ margin: "3px 12px" }} />
73751
+ // <DMenuItem
73752
+ // label="Ghim tin nhắn"
73753
+ // icon={
73754
+ // <Clock
73755
+ // color="gray"
73756
+ // fontSize={16}
73757
+ // className="me-50"
73758
+ // />
73759
+ // }
73760
+ // onClick={() => {
73761
+ // if (chat?.id && chatRoomId) {
73762
+ // const item = {
73763
+ // id: chatRoomId,
73764
+ // content: JSON.stringify(chat)
73765
+ // }
73766
+ // pinMessageChatRoom(item)
73767
+ // }
73768
+ // }}
73769
+ // />
73770
+ // <DMenuItem
73771
+ // label="Đánh dấu tin nhắn"
73772
+ // icon={
73773
+ // <Star
73774
+ // color="gray"
73775
+ // fontSize={16}
73776
+ // className="me-50"
73777
+ // />
73778
+ // }
73779
+ // />
73780
+ // <DMenuItem
73781
+ // label="Lưu về máy"
73782
+ // icon={
73783
+ // <Download
73784
+ // color="gray"
73785
+ // fontSize={16}
73786
+ // className="me-50"
73787
+ // />
73788
+ // }
73789
+ // onClick={() => handleDownloadClick(chat)}
73790
+ // />
73791
+ // <DMenuItem
73792
+ // label="Chọn nhiều tin nhắn"
73793
+ // icon={
73794
+ // <ListCheck
73795
+ // color="gray"
73796
+ // fontSize={16}
73797
+ // className="me-50"
73798
+ // />
73799
+ // }
73800
+ // onClick={() => handleEnterMultiSelectMode(chat)}
73801
+ // />
73802
+ // <DMenuItem
73803
+ // label="Xem chi tiết"
73804
+ // icon={
73805
+ // <InfoCircle
73806
+ // color="gray"
73807
+ // fontSize={16}
73808
+ // className="me-50"
73809
+ // />
73810
+ // }
73811
+ // />
73812
+ // <DMenu label="Tùy chọn khác">
73813
+ // <DMenuItem
73814
+ // label="Giao việc"
73815
+ // icon={
73816
+ // <CheckSquare
73817
+ // color="gray"
73818
+ // fontSize={16}
73819
+ // className="me-50"
73820
+ // />
73821
+ // }
73822
+ // />
73823
+ // <DMenuItem
73824
+ // label="Tạo nhắc hẹn"
73825
+ // icon={
73826
+ // <Clock
73827
+ // color="gray"
73828
+ // fontSize={16}
73829
+ // className="me-50"
73830
+ // />
73831
+ // }
73832
+ // onClick={() => setOpenModalReminder(true)}
73833
+ // />
73834
+ // </DMenu>
73835
+ // <hr style={{ margin: "3px 12px" }} />
73836
+ // <DMenuItem
73837
+ // label="Xóa tin nhắn"
73838
+ // icon={
73839
+ // <Trash2
73840
+ // color="red"
73841
+ // fontSize={16}
73842
+ // className="me-50"
73843
+ // />
73844
+ // }
73845
+ // style={{ color: "red" }}
73846
+ // onClick={() => handleDelete(chat)}
73847
+ // />
73848
+ // </DMenuContainer>
73849
+ // </div>
73850
+ // </div>
73851
+ // )}
73852
+ // <div
73853
+ // id={chat.type === "attachment" ? `image-${i}` : `text-${i}`}
73854
+ // className={
73855
+ // chat.type === "notifyAddUser" ? classnames("chat-content px-1") : classnames("chat-content p-1")
73856
+ // }
73857
+ // onContextMenu={(event: any) => onContextMenu(event, chat)}
73858
+ // >
73859
+ // {item?.senderId !== dataProfile?.id &&
73860
+ // groupChatUsers?.type === "multi" &&
73861
+ // !isNotificationType(chat.type) && (
73862
+ // <div>
73863
+ // <span style={{ color: "gray" }}>
73864
+ // {item?.user?.name}
73865
+ // </span>
73866
+ // </div>
73867
+ // )}
73868
+ // {chat.replyContent && renderReplyContent(chat.replyContent)}
73869
+ // {chat.status === 1 ? (
73870
+ // <div className="chat-message" style={{
73871
+ // fontStyle: 'italic',
73872
+ // color: '#999',
73873
+ // padding: '8px 12px'
73874
+ // }}>
73875
+ // Tin nhắn đã được thu hồi
73876
+ // </div>
73877
+ // ) : (
73878
+ // <>
73879
+ // {chat.type === "text" && (
73880
+ // <div className="chat-message">{renderChatText(chat)}</div>
73881
+ // )}
73882
+ // {chat.type === "file" && (
73883
+ // <div className="chat-message__image">
73884
+ // {renderChatFile(chat)}
73885
+ // </div>
73886
+ // )}
73887
+ // </>
73888
+ // )}
73889
+ // {chat.type === "notifyLeaveGroup" && (
73890
+ // <div className="" style={{ marginTop: "5px" }}>
73891
+ // {renderNotifyLeaveGroup(chat)}
73892
+ // </div>
73893
+ // )}
73894
+ // {chat.type === "notifyAddUser" && (
73895
+ // <div className="" style={{ marginTop: "5px" }}>
73896
+ // {renderChatNotification(chat)}
73897
+ // </div>
73898
+ // )}
73899
+ // {chat.status !== 1 && (
73900
+ // <>
73901
+ // {chat.type === "image" && (
73902
+ // <div className="chat-message__image">
73903
+ // {renderChatImage(chat)}
73904
+ // </div>
73905
+ // )}
73906
+ // {/* {chat.type === "leaveApplication" && (
73907
+ // <div className="chat-message__image">
73908
+ // {renderChatApplication(chat)}
73909
+ // </div>
73910
+ // )}
73911
+ // {chat.type === "lateEarly" && (
73912
+ // <div className="chat-message__image">
73913
+ // {renderChatApplication(chat)}
73914
+ // </div>
73915
+ // )}
73916
+ // {chat.type === "registerCars" && (
73917
+ // <div className="chat-message__image">
73918
+ // {renderChatApplication(chat)}
73919
+ // </div>
73920
+ // )}
73921
+ // {chat.type === "mission" && (
73922
+ // <div className="chat-message__image">
73923
+ // {renderChatApplication(chat)}
73924
+ // </div>
73925
+ // )}
73926
+ // {chat.type === "overtime" && (
73927
+ // <div className="chat-message__image">
73928
+ // {renderChatApplication(chat)}
73929
+ // </div>
73930
+ // )}
73931
+ // {chat.type === "advancePays" && (
73932
+ // <div className="chat-message__image">
73933
+ // {renderChatApplication(chat)}
73934
+ // </div>
73935
+ // )}
73936
+ // {chat.type === "pay" && (
73937
+ // <div className="chat-message__image">
73938
+ // {renderChatApplication(chat)}
73939
+ // </div>
73940
+ // )}
73941
+ // {chat.type === "shiftChange" && (
73942
+ // <div className="chat-message__image">
73943
+ // {renderChatApplication(chat)}
73944
+ // </div>
73945
+ // )}
73946
+ // {chat.type === "attendanceExplanation" && (
73947
+ // <div className="chat-message__image">
73948
+ // {renderChatApplication(chat)}
73949
+ // </div>
73950
+ // )} */}
73951
+ // {(chat.type === "TASK" || chat.type === "voucher") && (
73952
+ // <div className="chat-message__image">
73953
+ // {renderTaskApplication(chat)}
73954
+ // </div>
73955
+ // )}
73956
+ // {chat.type === "reminder" && (
73957
+ // <div className="chat-message__image">
73958
+ // {renderChatReminder(chat)}
73959
+ // </div>
73960
+ // )}
73961
+ // </>
73962
+ // )}
73963
+ // </div>
73964
+ // </div>
73965
+ // </div>
73966
+ // </div>
73967
+ // )
73968
+ // })}
73969
+ // </>
73970
+ // )
73971
+ // }, [
73972
+ // dataProfile?.id,
73973
+ // groupChatUsers?.type,
73974
+ // handleDelete,
73975
+ // handleDownloadClick,
73976
+ // handleReply,
73977
+ // isNotificationType,
73978
+ // onContextMenu,
73979
+ // //renderChatApplication,
73980
+ // renderChatFile,
73981
+ // renderChatImage,
73982
+ // renderChatNotification,
73983
+ // renderChatText,
73984
+ // renderNotifyLeaveGroup,
73985
+ // renderReplyContent,
73986
+ // renderChatReminder,
73987
+ // isMultiSelectMode,
73988
+ // selectedMessages,
73989
+ // handleToggleMessageSelection,
73990
+ // handleEnterMultiSelectMode
73991
+ // ])
73992
+ // const handleOpenAddMember = () => {
73993
+ // setTypeOpenModalAdd(!typeOpenModalAdd)
73994
+ // if (groupChatUsers && groupChatUsers.type === "single") {
73995
+ // handleModalGroup()
73996
+ // } else {
73997
+ // handleModalAddUserGroup()
73998
+ // }
73999
+ // }
74000
+ // const handlePaste = (event: any) => {
74001
+ // event.preventDefault()
74002
+ // const items = event.clipboardData.items
74003
+ // // Duyệt qua các item trong clipboard
74004
+ // // eslint-disable-next-line no-restricted-syntax
74005
+ // for (const item of items) {
74006
+ // // Nếu item là dạng file (image)
74007
+ // if (item.type.indexOf("image") !== -1) {
74008
+ // const file = item.getAsFile()
74009
+ // const reader = new FileReader()
74010
+ // reader.onload = function onLoad(e) {
74011
+ // setImgCopy((prevImages: any) => [...prevImages, { id: newGuid(), data: e?.target?.result, name: file?.name }])
74012
+ // }
74013
+ // if (file) {
74014
+ // reader.readAsDataURL(file)
74015
+ // }
74016
+ // }
74017
+ // }
74018
+ // }
74019
+ // const virtualList = useMemo(() => {
74020
+ // const grouped = formatMessage(sortByDateFast(messageByGroup?.items, 'createdDate') || [], groupChatUsers)
74021
+ // const result: Array<{
74022
+ // type: "header" | "item";
74023
+ // header?: string;
74024
+ // item?: any;
74025
+ // }> = []
74026
+ // grouped.forEach((d: any) => {
74027
+ // d.items.forEach((it: any) => result.push({ type: "item", item: it }))
74028
+ // result.push({
74029
+ // type: "header",
74030
+ // header: formatGroupDate(d.day)
74031
+ // })
74032
+ // })
74033
+ // return result
74034
+ // }, [messageByGroup, groupChatUsers])
74035
+ // const loadMore = useCallback(() => {
74036
+ // setScroll(true)
74037
+ // if (!hasMore || !chatRoomId) { return }
74038
+ // setIsFetching(true)
74039
+ // setHasMore(false)
74040
+ // get_message_by_group_cursor_api({
74041
+ // chatRoomId,
74042
+ // after: messageByGroup?.cursor?.afterCursor,
74043
+ // size: 20
74044
+ // })
74045
+ // .unwrap()
74046
+ // .then((response: any) => {
74047
+ // dispatch(setMessageByGroup(response))
74048
+ // })
74049
+ // .finally(() => {
74050
+ // setIsFetching(false)
74051
+ // setHasMore(true)
74052
+ // })
74053
+ // if (messageByGroup?.totalCount) {
74054
+ // setHasMore(false)
74055
+ // }
74056
+ // }, [
74057
+ // chatRoomId,
74058
+ // dispatch,
74059
+ // get_message_by_group_cursor_api,
74060
+ // hasMore,
74061
+ // messageByGroup,
74062
+ // setScroll
74063
+ // ])
74064
+ // const currentMessageCount = messageByGroup?.items?.length ?? 0
74065
+ // const totalMessageCount = messageByGroup?.totalCount ?? 0
74066
+ // const canLoadMore = useMemo(() => {
74067
+ // return hasMore && currentMessageCount < totalMessageCount
74068
+ // }, [hasMore, currentMessageCount, totalMessageCount])
74069
+ // const handleClearAllImages = () => {
74070
+ // setImgCopy([])
74071
+ // }
74072
+ // const isFileLike = (v: any) => v && typeof v === 'object' && 'name' in v && ('size' in v || 'type' in v)
74073
+ // const getFileExtension = (item: any): string => {
74074
+ // if (!item) { return '' }
74075
+ // // Data URL
74076
+ // if (typeof item === 'string' && item.startsWith('data:')) {
74077
+ // const semi = item.indexOf(';')
74078
+ // if (semi === -1) { return '' }
74079
+ // const mime = item.slice(5, semi).toLowerCase()
74080
+ // return MIME_EXT_MAP[mime] || mime.split('/').pop() || ''
74081
+ // }
74082
+ // // Real File or file-like object
74083
+ // if (item instanceof File || isFileLike(item)) {
74084
+ // // Prefer name
74085
+ // const name: string = item.name || ''
74086
+ // const m = name.match(/(\.[a-z0-9]+)$/)
74087
+ // if (m) { return m[1].toLowerCase() }
74088
+ // // Fallback to MIME if name has no dot
74089
+ // const mime: string = (item.type || '').toLowerCase()
74090
+ // if (mime) { return MIME_EXT_MAP[mime] || mime.split('/').pop() || '' }
74091
+ // }
74092
+ // return ''
74093
+ // }
74094
+ // const isImageItem = (item: any) => {
74095
+ // const data = item?.data || item
74096
+ // if (typeof data === 'string') { return data.startsWith('data:image') }
74097
+ // return data instanceof File ? data.type?.startsWith('image') : false
74098
+ // }
74099
+ // const previewCounts = useMemo(() => {
74100
+ // let image = 0
74101
+ // let file = 0
74102
+ // imgCopy.forEach((it: any) => (isImageItem(it) ? image++ : file++))
74103
+ // return { image, file }
74104
+ // }, [imgCopy])
74105
+ // const handlePickAny = (e: React.ChangeEvent<HTMLInputElement>) => {
74106
+ // const files = Array.from(e.target.files || [])
74107
+ // if (files.length) {
74108
+ // const filesWithId = files.map(file => ({ id: newGuid(), data: file }))
74109
+ // setImgCopy((prev: any[]) => [...prev, ...filesWithId])
74110
+ // }
74111
+ // // reset để lần sau chọn cùng file vẫn trigger onChange
74112
+ // e.target.value = ''
74113
+ // }
74114
+ // const allPaths = useMemo(() => {
74115
+ // if (!openModalPreview) { return [] }
74116
+ // const collected: any[] = []
74117
+ // // Add imgCopy items (pending images before sending)
74118
+ // if (imgCopy && imgCopy.length > 0) {
74119
+ // imgCopy.forEach((item: any) => {
74120
+ // const data = item?.data || item
74121
+ // const isImage = (typeof data === 'string' && data.startsWith('data:image')) || (data instanceof File && data.type?.startsWith('image'))
74122
+ // if (isImage) {
74123
+ // let path = ''
74124
+ // if (typeof data === 'string') {
74125
+ // path = data
74126
+ // } else if (data instanceof File) {
74127
+ // path = URL.createObjectURL(data)
74128
+ // }
74129
+ // if (path) {
74130
+ // collected.push({
74131
+ // id: item.id || newGuid(),
74132
+ // path,
74133
+ // type: '.jpg',
74134
+ // name: (data instanceof File ? data.name : 'image'),
74135
+ // isBase64: true,
74136
+ // createdDate: new Date().toISOString()
74137
+ // })
74138
+ // }
74139
+ // }
74140
+ // })
74141
+ // }
74142
+ // // Add existing messages from chat
74143
+ // virtualList.forEach((entry: any) => {
74144
+ // if (entry.type !== 'item' || !entry.item?.messages) { return }
74145
+ // entry.item.messages.forEach((msg: any) => {
74146
+ // if (!Array.isArray(msg.path) || msg.path.length === 0) { return }
74147
+ // const sortedPaths = [...msg.path].sort(
74148
+ // (a: any, b: any) => new Date(a.createdDate).getTime() - new Date(b.createdDate).getTime()
74149
+ // )
74150
+ // sortedPaths.forEach((p: any) => collected.push({ ...p }))
74151
+ // })
74152
+ // })
74153
+ // return collected.reverse()
74154
+ // }, [openModalPreview, virtualList, imgCopy])
74155
+ // const handleChatScroll = useCallback(() => {
74156
+ // const container = document.getElementById("scrollableDivChat")
74157
+ // if (!container) { return }
74158
+ // const threshold = -(window.innerHeight - 250)
74159
+ // if (container.scrollTop < threshold) {
74160
+ // setIsAtBottom(false)
74161
+ // }
74162
+ // if (container.scrollTop > threshold) {
74163
+ // setIsAtBottom(true)
74164
+ // }
74165
+ // }, [])
74166
+ // // Thêm state mới
74167
+ // const chatListContent = useMemo(() => (
74168
+ // <InfiniteScroll
74169
+ // //dataLength={totalMessages}
74170
+ // dataLength={messageByGroup?.items ? messageByGroup?.items.length : 0}
74171
+ // next={loadMore}
74172
+ // inverse
74173
+ // hasMore={canLoadMore}
74174
+ // scrollableTarget="scrollableDivChat"
74175
+ // onScroll={handleChatScroll}
74176
+ // scrollThreshold={20}
74177
+ // loader={
74178
+ // isFetching ? (
74179
+ // <div
74180
+ // style={{
74181
+ // padding: "1rem",
74182
+ // textAlign: "center"
74183
+ // }}
74184
+ // >
74185
+ // {"Đang tải tin nhắn..."}
74186
+ // </div>
74187
+ // ) : (
74188
+ // <></>
74189
+ // )
74190
+ // }
74191
+ // style={{
74192
+ // display: "flex", // Khi collapsed (true) thì hiển thị
74193
+ // flexDirection: "column-reverse"
74194
+ // }}
74195
+ // initialScrollY={0}
74196
+ // className={'chats'}
74197
+ // >
74198
+ // {virtualList.map((it, index) => {
74199
+ // if (it.type === "header") {
74200
+ // return <DateHeader key={`header-${index}`} label={it.header as string} />
74201
+ // }
74202
+ // return renderChatBlock(it.item)
74203
+ // })}
74204
+ // </InfiniteScroll>
74205
+ // ), [canLoadMore, handleChatScroll, isFetching, loadMore, renderChatBlock, virtualList, isPinnedCollapsed])
74206
+ // // Handler cho collapse change
74207
+ // const handlePinnedCollapseChange = useCallback((collapsed: boolean) => {
74208
+ // setIsPinnedCollapsed(collapsed)
74209
+ // }, [])
74210
+ // const renderAvatarGroup = () => {
74211
+ // if (groupChatUsers) {
74212
+ // const { type, avatar, users } = groupChatUsers
74213
+ // if (type === 'single' || (type === 'multi' && avatar)) {
74214
+ // return (
74215
+ // <AvatarDefault
74216
+ // imgHeight={56}
74217
+ // imgWidth={56}
74218
+ // img={avatar}
74219
+ // color={'light-secondary'}
74220
+ // className='avatar-border pull-up user-profile-toggle m-0'
74221
+ // //onClick={handleModalGroupInfo}
74222
+ // />
74223
+ // )
74224
+ // }
74225
+ // if (type === 'multi' && users) {
74226
+ // return (
74227
+ // <AvatarGroup2
74228
+ // groupClassName={'avatar-group-chat'}
74229
+ // avatarClassName={'pull-up'}
74230
+ // data={users.map((it: any) => ({ ...it, img: it.avatar }))}
74231
+ // containerWidth={56}
74232
+ // />
74233
+ // )
74234
+ // }
74235
+ // }
74236
+ // return null
74237
+ // }
71824
74238
  return (jsxRuntime.jsx("div", { id: "chat-app-window", className: "chat-app-window", ref: containerChatRef, children: jsxRuntime.jsxs("div", { className: classnames("start-chat-area", {
71825
74239
  "d-none": contactId || chatRoomId
71826
74240
  }), children: [jsxRuntime.jsx("div", { className: "start-chat-icon mb-1", children: jsxRuntime.jsx(SvgMessageSquare, {}) }), jsxRuntime.jsx("h4", { className: "sidebar-toggle start-chat-text", children: "B\u1EAFt \u0111\u1EA7u tr\u00F2 chuy\u1EC7n" })] }) }));