@esvndev/es-react-template-chat 0.0.92 → 0.0.94
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.
- package/dist/index.js +394 -393
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +386 -393
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -19,6 +19,14 @@ import '@draft-js-plugins/mention/lib/plugin.css';
|
|
|
19
19
|
import '@draft-js-plugins/emoji/lib/plugin.css';
|
|
20
20
|
import { useDispatch } from 'react-redux';
|
|
21
21
|
import { useAppDispatch as useAppDispatch$1, useAppSelector as useAppSelector$1 } from '@store/configureStore';
|
|
22
|
+
import photo from '@core/assets/images/icons/file-icons/icon-photo.svg';
|
|
23
|
+
import word from '@core/assets/images/icons/file-icons/icon-word.svg';
|
|
24
|
+
import excel from '@core/assets/images/icons/file-icons/icon-excel.svg';
|
|
25
|
+
import ppt from '@core/assets/images/icons/file-icons/icon-powerpoint.svg';
|
|
26
|
+
import music from '@core/assets/images/icons/file-icons/icon-music.svg';
|
|
27
|
+
import video from '@core/assets/images/icons/file-icons/icon-video.svg';
|
|
28
|
+
import pdf from '@core/assets/images/icons/file-icons/icon-pdf.svg';
|
|
29
|
+
import zip from '@core/assets/images/icons/file-icons/icon-zip.svg';
|
|
22
30
|
import { useLocation } from 'react-router-dom';
|
|
23
31
|
|
|
24
32
|
var instances = 'ej2_instances';
|
|
@@ -27368,6 +27376,16 @@ const encodeUUID = (uuid) => {
|
|
|
27368
27376
|
return uuid;
|
|
27369
27377
|
}
|
|
27370
27378
|
};
|
|
27379
|
+
const formatBytes = (props, decimals = 2) => {
|
|
27380
|
+
if (!+props.size) {
|
|
27381
|
+
return '0 Bytes';
|
|
27382
|
+
}
|
|
27383
|
+
const k = 1024;
|
|
27384
|
+
const dm = decimals < 0 ? 0 : decimals;
|
|
27385
|
+
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
|
27386
|
+
const i = Math.floor(Math.log(props.size) / Math.log(k));
|
|
27387
|
+
return `${parseFloat((props.size / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
|
|
27388
|
+
};
|
|
27371
27389
|
const isValidUrl = (string) => {
|
|
27372
27390
|
try {
|
|
27373
27391
|
// eslint-disable-next-line no-new
|
|
@@ -36717,6 +36735,14 @@ var SvgBell = function (_a) {
|
|
|
36717
36735
|
React.createElement("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0" })));
|
|
36718
36736
|
};
|
|
36719
36737
|
|
|
36738
|
+
var SvgClock = function (_a) {
|
|
36739
|
+
var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
|
|
36740
|
+
return (React.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: "clock_svg__feather clock_svg__feather-clock", "aria-labelledby": titleId }, props),
|
|
36741
|
+
title ? React.createElement("title", { id: titleId }, title) : null,
|
|
36742
|
+
React.createElement("circle", { cx: 12, cy: 12, r: 10 }),
|
|
36743
|
+
React.createElement("path", { d: "M12 6v6l4 2" })));
|
|
36744
|
+
};
|
|
36745
|
+
|
|
36720
36746
|
var SvgCopy = function (_a) {
|
|
36721
36747
|
var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
|
|
36722
36748
|
return (React.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: "copy_svg__feather copy_svg__feather-copy", "aria-labelledby": titleId }, props),
|
|
@@ -72015,6 +72041,167 @@ const useUploadFile = () => {
|
|
|
72015
72041
|
};
|
|
72016
72042
|
};
|
|
72017
72043
|
|
|
72044
|
+
const IconFileTypeColor = (props) => {
|
|
72045
|
+
const { fileType, width, height } = props;
|
|
72046
|
+
const normalizedType = typeof fileType === 'string' ? fileType.toLowerCase() : '';
|
|
72047
|
+
let icon;
|
|
72048
|
+
switch (normalizedType) {
|
|
72049
|
+
case '.jpg':
|
|
72050
|
+
case '.jpeg':
|
|
72051
|
+
case '.png':
|
|
72052
|
+
icon = photo;
|
|
72053
|
+
break;
|
|
72054
|
+
case '.mp3':
|
|
72055
|
+
case '.wma':
|
|
72056
|
+
case '.wma9':
|
|
72057
|
+
case '.wav':
|
|
72058
|
+
case '.flac':
|
|
72059
|
+
case '.aac':
|
|
72060
|
+
case '.aac+':
|
|
72061
|
+
case '.ogg':
|
|
72062
|
+
case '.aiff':
|
|
72063
|
+
case '.lossless':
|
|
72064
|
+
case '.amr':
|
|
72065
|
+
case '.ac3':
|
|
72066
|
+
icon = music;
|
|
72067
|
+
break;
|
|
72068
|
+
case '.avi':
|
|
72069
|
+
case '.mp4':
|
|
72070
|
+
case '.mkv':
|
|
72071
|
+
case '.wmv':
|
|
72072
|
+
case '.vob':
|
|
72073
|
+
case '.flv':
|
|
72074
|
+
case '.webm':
|
|
72075
|
+
case '.3gp':
|
|
72076
|
+
case '.mpeg':
|
|
72077
|
+
icon = video;
|
|
72078
|
+
break;
|
|
72079
|
+
case '.pdf':
|
|
72080
|
+
icon = pdf;
|
|
72081
|
+
break;
|
|
72082
|
+
case '.ppt':
|
|
72083
|
+
icon = ppt;
|
|
72084
|
+
break;
|
|
72085
|
+
case '.xlsx':
|
|
72086
|
+
icon = excel;
|
|
72087
|
+
break;
|
|
72088
|
+
case '.doc':
|
|
72089
|
+
case '.docx':
|
|
72090
|
+
icon = word;
|
|
72091
|
+
break;
|
|
72092
|
+
case '.zip':
|
|
72093
|
+
case '.rar':
|
|
72094
|
+
icon = zip;
|
|
72095
|
+
break;
|
|
72096
|
+
default:
|
|
72097
|
+
icon = '';
|
|
72098
|
+
break;
|
|
72099
|
+
}
|
|
72100
|
+
// if (fileType === "aac") {
|
|
72101
|
+
// icon = "FiletypeAac"
|
|
72102
|
+
// } else if (fileType === ".ai") {
|
|
72103
|
+
// icon = "FiletypeAi"
|
|
72104
|
+
// } else if (fileType === ".bmp") {
|
|
72105
|
+
// icon = "FiletypeBmp"
|
|
72106
|
+
// } else if (fileType === ".cs") {
|
|
72107
|
+
// icon = "FiletypeCs"
|
|
72108
|
+
// } else if (fileType === ".css") {
|
|
72109
|
+
// icon = "FiletypeCss"
|
|
72110
|
+
// } else if (fileType === ".csv") {
|
|
72111
|
+
// icon = "FiletypeCsv"
|
|
72112
|
+
// } else if (fileType === ".doc") {
|
|
72113
|
+
// icon = "FiletypeDoc"
|
|
72114
|
+
// } else if (fileType === ".docx") {
|
|
72115
|
+
// icon = "FiletypeDocx"
|
|
72116
|
+
// } else if (fileType === ".exe") {
|
|
72117
|
+
// icon = "FiletypeExe"
|
|
72118
|
+
// } else if (fileType === ".gif") {
|
|
72119
|
+
// icon = "FiletypeGif"
|
|
72120
|
+
// } else if (fileType === ".heic") {
|
|
72121
|
+
// icon = "FiletypeHeic"
|
|
72122
|
+
// } else if (fileType === ".html") {
|
|
72123
|
+
// icon = "FiletypeHtml"
|
|
72124
|
+
// } else if (fileType === ".java") {
|
|
72125
|
+
// icon = "FiletypeJava"
|
|
72126
|
+
// } else if (fileType === ".jpg" || fileType === ".jpeg") {
|
|
72127
|
+
// icon = "Image"
|
|
72128
|
+
// } else if (fileType === ".js") {
|
|
72129
|
+
// icon = "FiletypeJs"
|
|
72130
|
+
// } else if (fileType === ".json") {
|
|
72131
|
+
// icon = "FiletypeJson"
|
|
72132
|
+
// } else if (fileType === ".jsx") {
|
|
72133
|
+
// icon = "FiletypeJsx"
|
|
72134
|
+
// } else if (fileType === ".key") {
|
|
72135
|
+
// icon = "FiletypeKey"
|
|
72136
|
+
// } else if (fileType === ".m4p") {
|
|
72137
|
+
// icon = "FiletypeM4p"
|
|
72138
|
+
// } else if (fileType === ".md") {
|
|
72139
|
+
// icon = "FiletypeMd"
|
|
72140
|
+
// } else if (fileType === ".mdx") {
|
|
72141
|
+
// icon = "FiletypeMdx"
|
|
72142
|
+
// } else if (fileType === ".mov") {
|
|
72143
|
+
// icon = "FiletypeMov"
|
|
72144
|
+
// } else if (fileType === ".mp3") {
|
|
72145
|
+
// icon = "FiletypeMp3"
|
|
72146
|
+
// } else if (fileType === ".mp4") {
|
|
72147
|
+
// icon = "FiletypeMp4"
|
|
72148
|
+
// } else if (fileType === ".otf") {
|
|
72149
|
+
// icon = "FiletypeOtf"
|
|
72150
|
+
// } else if (fileType === ".pdf") {
|
|
72151
|
+
// icon = "FiletypePdf"
|
|
72152
|
+
// } else if (fileType === ".php") {
|
|
72153
|
+
// icon = "FiletypePhp"
|
|
72154
|
+
// } else if (fileType === ".png") {
|
|
72155
|
+
// icon = "Image"
|
|
72156
|
+
// } else if (fileType === ".ppt") {
|
|
72157
|
+
// icon = "FiletypePpt"
|
|
72158
|
+
// } else if (fileType === ".pptx") {
|
|
72159
|
+
// icon = "FiletypePptx"
|
|
72160
|
+
// } else if (fileType === ".psd") {
|
|
72161
|
+
// icon = "FiletypePsd"
|
|
72162
|
+
// } else if (fileType === ".py") {
|
|
72163
|
+
// icon = "FiletypePy"
|
|
72164
|
+
// } else if (fileType === ".raw") {
|
|
72165
|
+
// icon = "FiletypeRaw"
|
|
72166
|
+
// } else if (fileType === ".rb") {
|
|
72167
|
+
// icon = "FiletypeRb"
|
|
72168
|
+
// } else if (fileType === ".sass") {
|
|
72169
|
+
// icon = "FiletypeSass"
|
|
72170
|
+
// } else if (fileType === ".scss") {
|
|
72171
|
+
// icon = "FiletypeScss"
|
|
72172
|
+
// } else if (fileType === ".sh") {
|
|
72173
|
+
// icon = "FiletypeSh"
|
|
72174
|
+
// } else if (fileType === ".sql") {
|
|
72175
|
+
// icon = "FiletypeSql"
|
|
72176
|
+
// } else if (fileType === ".svg") {
|
|
72177
|
+
// icon = "FiletypeSvg"
|
|
72178
|
+
// } else if (fileType === ".tiff") {
|
|
72179
|
+
// icon = "FiletypeTiff"
|
|
72180
|
+
// } else if (fileType === ".tsx") {
|
|
72181
|
+
// icon = "FiletypeTsx"
|
|
72182
|
+
// } else if (fileType === ".ttf") {
|
|
72183
|
+
// icon = "FiletypeTtf"
|
|
72184
|
+
// } else if (fileType === ".txt") {
|
|
72185
|
+
// icon = "FiletypeTxt"
|
|
72186
|
+
// } else if (fileType === ".wav") {
|
|
72187
|
+
// icon = "FiletypeWav"
|
|
72188
|
+
// } else if (fileType === ".woff") {
|
|
72189
|
+
// icon = "FiletypeWoff"
|
|
72190
|
+
// } else if (fileType === ".xls") {
|
|
72191
|
+
// icon = "FiletypeXls"
|
|
72192
|
+
// } else if (fileType === ".xlsx") {
|
|
72193
|
+
// icon = "FiletypeXlsx"
|
|
72194
|
+
// } else if (fileType === ".xml") {
|
|
72195
|
+
// icon = "FiletypeXml"
|
|
72196
|
+
// } else if (fileType === ".yml") {
|
|
72197
|
+
// icon = "FiletypeYml"
|
|
72198
|
+
// } else if (fileType === ".zip" || fileType === ".rar") {
|
|
72199
|
+
// icon = "FileZip"
|
|
72200
|
+
// }
|
|
72201
|
+
// @ts-ignore
|
|
72202
|
+
return jsx("img", { ...props, src: icon, style: { width: width ? width : 24, height: height ? height : 'auto', ...props.style } });
|
|
72203
|
+
};
|
|
72204
|
+
|
|
72018
72205
|
const DateHeader = memo(({ label }) => (jsx("div", { className: "d-flex justify-content-center", children: jsx("div", { style: {
|
|
72019
72206
|
backgroundColor: "rgba(0,0,0,0.2)",
|
|
72020
72207
|
padding: "2px 15px",
|
|
@@ -72474,399 +72661,205 @@ const ChatLog = (props) => {
|
|
|
72474
72661
|
const extraCount = Math.max(0, dataParse.length - displayedItems.length);
|
|
72475
72662
|
return (jsx(Fragment$1, { children: jsxs("div", { children: [displayedItems.map((item, index) => (jsxs("strong", { children: [item.name, index < displayedItems.length - 1 && ", "] }, index))), dataParse.length > 3 && (jsxs("strong", { children: [jsx("span", { style: { fontWeight: "normal" }, children: " và " }), " ", extraCount, " ng\u01B0\u1EDDi kh\u00E1c"] })), " được ", chat?.createdBy?.id === dataProfile?.id ? (jsx("span", { children: "b\u1EA1n " })) : (jsx("strong", { style: { marginRight: "5px" }, children: chat?.createdByName })), "th\u00EAm v\u00E0o nh\u00F3m"] }) }));
|
|
72476
72663
|
}, [dataProfile]);
|
|
72477
|
-
|
|
72478
|
-
|
|
72479
|
-
|
|
72480
|
-
|
|
72481
|
-
|
|
72482
|
-
|
|
72483
|
-
|
|
72484
|
-
|
|
72485
|
-
|
|
72486
|
-
|
|
72487
|
-
|
|
72488
|
-
|
|
72489
|
-
|
|
72490
|
-
|
|
72491
|
-
|
|
72492
|
-
|
|
72493
|
-
|
|
72494
|
-
|
|
72495
|
-
|
|
72496
|
-
|
|
72497
|
-
|
|
72498
|
-
|
|
72499
|
-
|
|
72500
|
-
|
|
72501
|
-
|
|
72502
|
-
|
|
72503
|
-
|
|
72504
|
-
|
|
72505
|
-
|
|
72506
|
-
|
|
72507
|
-
|
|
72508
|
-
|
|
72509
|
-
|
|
72510
|
-
|
|
72511
|
-
|
|
72512
|
-
|
|
72513
|
-
|
|
72514
|
-
|
|
72515
|
-
|
|
72516
|
-
|
|
72517
|
-
|
|
72518
|
-
|
|
72519
|
-
|
|
72520
|
-
|
|
72521
|
-
|
|
72522
|
-
|
|
72523
|
-
|
|
72524
|
-
|
|
72525
|
-
|
|
72526
|
-
|
|
72527
|
-
|
|
72528
|
-
|
|
72529
|
-
|
|
72530
|
-
|
|
72531
|
-
|
|
72532
|
-
|
|
72533
|
-
|
|
72534
|
-
|
|
72535
|
-
|
|
72536
|
-
|
|
72537
|
-
|
|
72538
|
-
|
|
72539
|
-
|
|
72540
|
-
|
|
72541
|
-
|
|
72542
|
-
|
|
72543
|
-
|
|
72544
|
-
|
|
72545
|
-
|
|
72546
|
-
|
|
72547
|
-
|
|
72548
|
-
|
|
72549
|
-
|
|
72550
|
-
|
|
72551
|
-
|
|
72552
|
-
|
|
72553
|
-
|
|
72554
|
-
|
|
72555
|
-
|
|
72556
|
-
|
|
72557
|
-
|
|
72558
|
-
|
|
72559
|
-
|
|
72560
|
-
|
|
72561
|
-
|
|
72562
|
-
|
|
72563
|
-
|
|
72564
|
-
|
|
72565
|
-
|
|
72566
|
-
|
|
72567
|
-
|
|
72568
|
-
|
|
72569
|
-
|
|
72570
|
-
|
|
72571
|
-
|
|
72572
|
-
|
|
72573
|
-
|
|
72574
|
-
|
|
72575
|
-
|
|
72576
|
-
|
|
72577
|
-
|
|
72578
|
-
|
|
72579
|
-
|
|
72580
|
-
|
|
72581
|
-
|
|
72582
|
-
|
|
72583
|
-
|
|
72584
|
-
|
|
72585
|
-
|
|
72586
|
-
|
|
72587
|
-
|
|
72588
|
-
|
|
72589
|
-
|
|
72590
|
-
|
|
72591
|
-
|
|
72592
|
-
|
|
72593
|
-
|
|
72594
|
-
|
|
72595
|
-
|
|
72596
|
-
|
|
72597
|
-
|
|
72598
|
-
|
|
72599
|
-
|
|
72600
|
-
|
|
72601
|
-
|
|
72602
|
-
|
|
72603
|
-
|
|
72604
|
-
|
|
72605
|
-
|
|
72606
|
-
|
|
72607
|
-
|
|
72608
|
-
|
|
72609
|
-
|
|
72610
|
-
|
|
72611
|
-
|
|
72612
|
-
|
|
72613
|
-
|
|
72614
|
-
|
|
72615
|
-
|
|
72616
|
-
|
|
72617
|
-
|
|
72618
|
-
|
|
72619
|
-
|
|
72620
|
-
|
|
72621
|
-
|
|
72622
|
-
|
|
72623
|
-
|
|
72624
|
-
|
|
72625
|
-
|
|
72626
|
-
|
|
72627
|
-
|
|
72628
|
-
|
|
72629
|
-
|
|
72630
|
-
|
|
72631
|
-
|
|
72632
|
-
|
|
72633
|
-
|
|
72634
|
-
|
|
72635
|
-
|
|
72636
|
-
|
|
72637
|
-
|
|
72638
|
-
|
|
72639
|
-
|
|
72640
|
-
|
|
72641
|
-
|
|
72642
|
-
|
|
72643
|
-
|
|
72644
|
-
|
|
72645
|
-
|
|
72646
|
-
|
|
72647
|
-
|
|
72648
|
-
|
|
72649
|
-
|
|
72650
|
-
|
|
72651
|
-
|
|
72652
|
-
|
|
72653
|
-
|
|
72654
|
-
|
|
72655
|
-
|
|
72656
|
-
|
|
72657
|
-
|
|
72658
|
-
|
|
72659
|
-
|
|
72660
|
-
|
|
72661
|
-
|
|
72662
|
-
|
|
72663
|
-
|
|
72664
|
-
|
|
72665
|
-
|
|
72666
|
-
|
|
72667
|
-
|
|
72668
|
-
|
|
72669
|
-
|
|
72670
|
-
|
|
72671
|
-
|
|
72672
|
-
|
|
72673
|
-
|
|
72674
|
-
|
|
72675
|
-
|
|
72676
|
-
// >
|
|
72677
|
-
// {/* Header với icon và tiêu đề */}
|
|
72678
|
-
// <div className="d-flex align-items-start" style={{ marginBottom: 10 }}>
|
|
72679
|
-
// <div style={{
|
|
72680
|
-
// backgroundColor: "#e7f3ff",
|
|
72681
|
-
// borderRadius: 8,
|
|
72682
|
-
// padding: 6,
|
|
72683
|
-
// display: "flex",
|
|
72684
|
-
// alignItems: "center",
|
|
72685
|
-
// justifyContent: "center",
|
|
72686
|
-
// marginRight: 8,
|
|
72687
|
-
// flexShrink: 0
|
|
72688
|
-
// }}>
|
|
72689
|
-
// <BecoxyWriting color="#006edc" fontSize={24} />
|
|
72690
|
-
// </div>
|
|
72691
|
-
// <div style={{ flex: 1, minWidth: 0 }}>
|
|
72692
|
-
// <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 2, fontWeight: 500 }}>
|
|
72693
|
-
// Công việc
|
|
72694
|
-
// </div>
|
|
72695
|
-
// <div style={{
|
|
72696
|
-
// fontWeight: 600,
|
|
72697
|
-
// fontSize: 14,
|
|
72698
|
-
// color: "#283046",
|
|
72699
|
-
// lineHeight: "1.4",
|
|
72700
|
-
// wordBreak: "break-word"
|
|
72701
|
-
// }}>
|
|
72702
|
-
// {taskData.subject || 'Không có tiêu đề'}
|
|
72703
|
-
// </div>
|
|
72704
|
-
// </div>
|
|
72705
|
-
// </div>
|
|
72706
|
-
// {/* Nội dung */}
|
|
72707
|
-
// {cleanDescription && (
|
|
72708
|
-
// <div
|
|
72709
|
-
// style={{
|
|
72710
|
-
// marginBottom: 10,
|
|
72711
|
-
// padding: "8px 10px",
|
|
72712
|
-
// backgroundColor: "white",
|
|
72713
|
-
// borderRadius: 8,
|
|
72714
|
-
// fontSize: 12,
|
|
72715
|
-
// color: "#5e5873",
|
|
72716
|
-
// lineHeight: "1.5",
|
|
72717
|
-
// border: "1px solid #eff1f5",
|
|
72718
|
-
// wordBreak: "break-word",
|
|
72719
|
-
// whiteSpace: "pre-wrap"
|
|
72720
|
-
// }}
|
|
72721
|
-
// dangerouslySetInnerHTML={{ __html: taskData.description }}
|
|
72722
|
-
// />
|
|
72723
|
-
// )}
|
|
72724
|
-
// {/* Thông tin người tham gia */}
|
|
72725
|
-
// <div style={{
|
|
72726
|
-
// backgroundColor: "white",
|
|
72727
|
-
// borderRadius: 8,
|
|
72728
|
-
// padding: "8px 10px",
|
|
72729
|
-
// marginBottom: 8,
|
|
72730
|
-
// border: "1px solid #eff1f5"
|
|
72731
|
-
// }}>
|
|
72732
|
-
// {/* Người tạo phiếu */}
|
|
72733
|
-
// {taskData.createdByName && (
|
|
72734
|
-
// <div style={{ marginBottom: taskData.hostPerson?.length > 0 || taskData.thePerformer?.length > 0 ? 8 : 0 }}>
|
|
72735
|
-
// <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }}>
|
|
72736
|
-
// Người tạo phiếu
|
|
72737
|
-
// </div>
|
|
72738
|
-
// <div className="d-flex align-items-center">
|
|
72739
|
-
// <AvatarDefault
|
|
72740
|
-
// imgWidth={20}
|
|
72741
|
-
// imgHeight={20}
|
|
72742
|
-
// color="light-primary"
|
|
72743
|
-
// className="me-50"
|
|
72744
|
-
// img={taskData?.createdByImg}
|
|
72745
|
-
// />
|
|
72746
|
-
// <span style={{ fontSize: 12, color: "#283046", fontWeight: 500 }}>
|
|
72747
|
-
// {taskData.createdByName}
|
|
72748
|
-
// </span>
|
|
72749
|
-
// </div>
|
|
72750
|
-
// </div>
|
|
72751
|
-
// )}
|
|
72752
|
-
// {/* Người chủ trì */}
|
|
72753
|
-
// {taskData.hostPerson && taskData.hostPerson.length > 0 && (
|
|
72754
|
-
// <div style={{ marginBottom: taskData.thePerformer?.length > 0 ? 8 : 0 }}>
|
|
72755
|
-
// <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }}>
|
|
72756
|
-
// Người chủ trì
|
|
72757
|
-
// </div>
|
|
72758
|
-
// <div className="d-flex align-items-center flex-wrap" style={{ gap: 4 }}>
|
|
72759
|
-
// {taskData.hostPerson.slice(0, 2).map((person: any, index: number) => (
|
|
72760
|
-
// <div key={index} className="d-flex align-items-center" style={{
|
|
72761
|
-
// backgroundColor: "#f8f9fa",
|
|
72762
|
-
// borderRadius: 6,
|
|
72763
|
-
// padding: "3px 6px",
|
|
72764
|
-
// marginRight: 4
|
|
72765
|
-
// }}>
|
|
72766
|
-
// <AvatarDefault
|
|
72767
|
-
// imgWidth={18}
|
|
72768
|
-
// imgHeight={18}
|
|
72769
|
-
// color="light-info"
|
|
72770
|
-
// className="me-50"
|
|
72771
|
-
// img={person.img}
|
|
72772
|
-
// />
|
|
72773
|
-
// <span style={{ fontSize: 11, color: "#5e5873", fontWeight: 500 }}>
|
|
72774
|
-
// {person.name || person.fullName || 'N/A'}
|
|
72775
|
-
// </span>
|
|
72776
|
-
// </div>
|
|
72777
|
-
// ))}
|
|
72778
|
-
// {taskData.hostPerson.length > 2 && (
|
|
72779
|
-
// <span style={{
|
|
72780
|
-
// fontSize: 11,
|
|
72781
|
-
// color: "#8b92a7",
|
|
72782
|
-
// backgroundColor: "#f8f9fa",
|
|
72783
|
-
// padding: "3px 8px",
|
|
72784
|
-
// borderRadius: 6,
|
|
72785
|
-
// fontWeight: 500
|
|
72786
|
-
// }}>
|
|
72787
|
-
// +{taskData.hostPerson.length - 2}
|
|
72788
|
-
// </span>
|
|
72789
|
-
// )}
|
|
72790
|
-
// </div>
|
|
72791
|
-
// </div>
|
|
72792
|
-
// )}
|
|
72793
|
-
// {/* Người thực hiện */}
|
|
72794
|
-
// {taskData.thePerformer && taskData.thePerformer.length > 0 && (
|
|
72795
|
-
// <div>
|
|
72796
|
-
// <div style={{ fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }}>
|
|
72797
|
-
// Người thực hiện
|
|
72798
|
-
// </div>
|
|
72799
|
-
// <div className="d-flex align-items-center flex-wrap" style={{ gap: 4 }}>
|
|
72800
|
-
// {taskData.thePerformer.slice(0, 2).map((performer: any, index: number) => (
|
|
72801
|
-
// <div key={index} className="d-flex align-items-center" style={{
|
|
72802
|
-
// backgroundColor: "#f8f9fa",
|
|
72803
|
-
// borderRadius: 6,
|
|
72804
|
-
// padding: "3px 6px",
|
|
72805
|
-
// marginRight: 4
|
|
72806
|
-
// }}>
|
|
72807
|
-
// <AvatarDefault
|
|
72808
|
-
// imgWidth={18}
|
|
72809
|
-
// imgHeight={18}
|
|
72810
|
-
// color="light-secondary"
|
|
72811
|
-
// className="me-50"
|
|
72812
|
-
// img={performer.img}
|
|
72813
|
-
// />
|
|
72814
|
-
// <span style={{ fontSize: 11, color: "#5e5873", fontWeight: 500 }}>
|
|
72815
|
-
// {performer.name || performer.fullName || 'N/A'}
|
|
72816
|
-
// </span>
|
|
72817
|
-
// </div>
|
|
72818
|
-
// ))}
|
|
72819
|
-
// {taskData.thePerformer.length > 2 && (
|
|
72820
|
-
// <span style={{
|
|
72821
|
-
// fontSize: 11,
|
|
72822
|
-
// color: "#8b92a7",
|
|
72823
|
-
// backgroundColor: "#f8f9fa",
|
|
72824
|
-
// padding: "3px 8px",
|
|
72825
|
-
// borderRadius: 6,
|
|
72826
|
-
// fontWeight: 500
|
|
72827
|
-
// }}>
|
|
72828
|
-
// +{taskData.thePerformer.length - 2}
|
|
72829
|
-
// </span>
|
|
72830
|
-
// )}
|
|
72831
|
-
// </div>
|
|
72832
|
-
// </div>
|
|
72833
|
-
// )}
|
|
72834
|
-
// </div>
|
|
72835
|
-
// {/* Hạn hoàn thành */}
|
|
72836
|
-
// {taskData.dueDate && (
|
|
72837
|
-
// <div style={{
|
|
72838
|
-
// display: "flex",
|
|
72839
|
-
// alignItems: "center",
|
|
72840
|
-
// justifyContent: "space-between",
|
|
72841
|
-
// backgroundColor: "#fff5f5",
|
|
72842
|
-
// padding: "6px 10px",
|
|
72843
|
-
// borderRadius: 8,
|
|
72844
|
-
// marginBottom: 8,
|
|
72845
|
-
// border: "1px solid #ffe5e5"
|
|
72846
|
-
// }}>
|
|
72847
|
-
// <div style={{ display: "flex", alignItems: "center" }}>
|
|
72848
|
-
// <Clock fontSize={14} style={{ color: "#ea5455", marginRight: 6 }} />
|
|
72849
|
-
// <span style={{ fontSize: 10, color: "#8b92a7", fontWeight: 500 }}>
|
|
72850
|
-
// Hạn hoàn thành
|
|
72851
|
-
// </span>
|
|
72852
|
-
// </div>
|
|
72853
|
-
// <span style={{ fontSize: 12, color: "#ea5455", fontWeight: 600 }}>
|
|
72854
|
-
// {moment(taskData.dueDate).format('DD/MM/YYYY HH:mm')}
|
|
72855
|
-
// </span>
|
|
72856
|
-
// </div>
|
|
72857
|
-
// )}
|
|
72858
|
-
// {/* Footer time */}
|
|
72859
|
-
// <div style={{
|
|
72860
|
-
// fontSize: 11,
|
|
72861
|
-
// color: "#adb5bd",
|
|
72862
|
-
// textAlign: "right",
|
|
72863
|
-
// fontWeight: 500
|
|
72864
|
-
// }}>
|
|
72865
|
-
// {moment(chat.time).format("HH:mm")}
|
|
72866
|
-
// </div>
|
|
72867
|
-
// </div>
|
|
72868
|
-
// )
|
|
72869
|
-
// }, [])
|
|
72664
|
+
useCallback((chat) => {
|
|
72665
|
+
const files = chat.path;
|
|
72666
|
+
if (!files || !Array.isArray(files) || files.length === 0) {
|
|
72667
|
+
return null;
|
|
72668
|
+
}
|
|
72669
|
+
// Ảnh đơn lẻ
|
|
72670
|
+
if (files.length === 1) {
|
|
72671
|
+
const imagePath = files[0]?.path?.trim();
|
|
72672
|
+
if (!imagePath) {
|
|
72673
|
+
return null;
|
|
72674
|
+
}
|
|
72675
|
+
return (jsxs(Fragment$1, { children: [jsxs("div", { className: "image-container", style: { maxWidth: "100%", position: "relative" }, children: [jsx("img", { src: `${CDN_URL_VIEW}/${imagePath}`, alt: `Chat image ${chat.id + 1}`, "data-file-index": chat.id, style: {
|
|
72676
|
+
maxWidth: "100%",
|
|
72677
|
+
maxHeight: 400,
|
|
72678
|
+
borderRadius: 8,
|
|
72679
|
+
cursor: "pointer"
|
|
72680
|
+
}, onClick: () => handlePreview(files[0]) }), jsx("div", { style: {
|
|
72681
|
+
position: "absolute",
|
|
72682
|
+
top: 6,
|
|
72683
|
+
left: 6,
|
|
72684
|
+
backgroundColor: "rgba(0, 0, 0, 0.6)",
|
|
72685
|
+
color: "white",
|
|
72686
|
+
padding: "2px 6px",
|
|
72687
|
+
borderRadius: 4,
|
|
72688
|
+
fontSize: "10px",
|
|
72689
|
+
fontWeight: "bold"
|
|
72690
|
+
}, children: "HD" })] }), jsx("div", { className: "px-1 py-75", children: moment(chat.time).format("HH:mm") })] }));
|
|
72691
|
+
}
|
|
72692
|
+
// Nhiều ảnh - hiển thị dạng grid 2 cột, tối đa 6 ảnh
|
|
72693
|
+
const imagesToShow = files.slice(0, 6);
|
|
72694
|
+
const remainingCount = files.length - 6;
|
|
72695
|
+
return (jsxs(Fragment$1, { children: [jsx("div", { className: "images-grid-container", style: {
|
|
72696
|
+
display: "flex",
|
|
72697
|
+
flexWrap: "wrap",
|
|
72698
|
+
maxWidth: "600px",
|
|
72699
|
+
gap: "4px"
|
|
72700
|
+
}, children: imagesToShow.map((file, index) => {
|
|
72701
|
+
const imagePath = file?.path?.trim();
|
|
72702
|
+
if (!imagePath) {
|
|
72703
|
+
return null;
|
|
72704
|
+
}
|
|
72705
|
+
const imageUrl = `${CDN_URL_VIEW}/${imagePath}`;
|
|
72706
|
+
const isLastImage = index === 5 && remainingCount > 0;
|
|
72707
|
+
// ✅ THÊM: Kiểm tra ảnh cuối khi số lượng lẻ
|
|
72708
|
+
const isOddCount = imagesToShow.length % 2 !== 0;
|
|
72709
|
+
const isLastItem = index === imagesToShow.length - 1;
|
|
72710
|
+
const isFullWidth = isOddCount && isLastItem && !isLastImage;
|
|
72711
|
+
return (jsxs("div", { style: {
|
|
72712
|
+
width: isFullWidth ? "100%" : "calc(50% - 2px)",
|
|
72713
|
+
height: "140px",
|
|
72714
|
+
position: "relative",
|
|
72715
|
+
overflow: "hidden",
|
|
72716
|
+
borderRadius: 8,
|
|
72717
|
+
border: "1px solid #e0e0e0"
|
|
72718
|
+
}, children: [jsx("img", { src: imageUrl, alt: `Chat image ${index + 1}`, style: {
|
|
72719
|
+
width: "100%",
|
|
72720
|
+
height: "100%",
|
|
72721
|
+
objectFit: "cover",
|
|
72722
|
+
borderRadius: 8,
|
|
72723
|
+
display: "block",
|
|
72724
|
+
cursor: "pointer"
|
|
72725
|
+
}, onClick: () => handlePreview(file) }), jsx("div", { style: {
|
|
72726
|
+
position: "absolute",
|
|
72727
|
+
top: 6,
|
|
72728
|
+
left: 6,
|
|
72729
|
+
backgroundColor: "rgba(0, 0, 0, 0.6)",
|
|
72730
|
+
color: "white",
|
|
72731
|
+
padding: "2px 6px",
|
|
72732
|
+
borderRadius: 4,
|
|
72733
|
+
fontSize: "10px",
|
|
72734
|
+
fontWeight: "bold",
|
|
72735
|
+
zIndex: 1
|
|
72736
|
+
}, children: "HD" }), isLastImage && (jsxs("div", { style: {
|
|
72737
|
+
position: "absolute",
|
|
72738
|
+
top: 0,
|
|
72739
|
+
left: 0,
|
|
72740
|
+
right: 0,
|
|
72741
|
+
bottom: 0,
|
|
72742
|
+
backgroundColor: "rgba(0, 0, 0, 0.6)",
|
|
72743
|
+
display: "flex",
|
|
72744
|
+
alignItems: "center",
|
|
72745
|
+
justifyContent: "center",
|
|
72746
|
+
color: "white",
|
|
72747
|
+
fontSize: "20px",
|
|
72748
|
+
fontWeight: "bold",
|
|
72749
|
+
borderRadius: 8,
|
|
72750
|
+
cursor: "pointer"
|
|
72751
|
+
}, onClick: () => handlePreview(file), children: ["+", remainingCount] }))] }, `image-${chat.id}-${index}`));
|
|
72752
|
+
}) }), jsx("div", { className: "px-1 py-75", children: moment(chat.time).format("HH:mm") })] }));
|
|
72753
|
+
}, [handlePreview]);
|
|
72754
|
+
useCallback((chat) => {
|
|
72755
|
+
const files = chat?.path;
|
|
72756
|
+
return (jsx(Fragment$1, { children: files?.map((file, index) => {
|
|
72757
|
+
return (jsxs("div", { children: [jsxs("div", { className: "d-flex p-50", children: [jsx("div", { className: "me-1", onClick: () => handlePreview(file), children: jsx(IconFileTypeColor, { fileType: file?.type, width: 35 }) }), jsxs("div", { children: [jsx("p", { className: "file-name-chat", children: file.name }), jsx("p", { children: formatBytes({ size: file.size }) })] })] }), index + 1 === files.length && (jsx("div", { className: "px-1 pb-75", children: moment(chat.time).format("HH:mm") }))] }, index));
|
|
72758
|
+
}) }));
|
|
72759
|
+
}, [handlePreview]);
|
|
72760
|
+
useCallback((chat) => {
|
|
72761
|
+
const safeParse = (str) => {
|
|
72762
|
+
if (!str) {
|
|
72763
|
+
return {};
|
|
72764
|
+
}
|
|
72765
|
+
try {
|
|
72766
|
+
return typeof str === 'string' ? JSON.parse(str) : str;
|
|
72767
|
+
}
|
|
72768
|
+
catch (err) {
|
|
72769
|
+
//console.error('JSON parse error:', err)
|
|
72770
|
+
return {};
|
|
72771
|
+
}
|
|
72772
|
+
};
|
|
72773
|
+
// Helper function to strip HTML tags and get clean text
|
|
72774
|
+
const stripHtml = (html) => {
|
|
72775
|
+
if (!html) {
|
|
72776
|
+
return '';
|
|
72777
|
+
}
|
|
72778
|
+
const tmp = document.createElement('div');
|
|
72779
|
+
tmp.innerHTML = html;
|
|
72780
|
+
return tmp.textContent || tmp.innerText || '';
|
|
72781
|
+
};
|
|
72782
|
+
const taskData = safeParse(chat.msg);
|
|
72783
|
+
const cleanDescription = taskData.description ? stripHtml(taskData.description) : '';
|
|
72784
|
+
return (jsxs("div", { style: {
|
|
72785
|
+
width: 320,
|
|
72786
|
+
backgroundColor: "#f8f9fa",
|
|
72787
|
+
borderRadius: 12,
|
|
72788
|
+
border: "1px solid #e3e8ef",
|
|
72789
|
+
padding: "12px",
|
|
72790
|
+
boxShadow: "0 2px 4px rgba(0,0,0,0.04)"
|
|
72791
|
+
}, children: [jsxs("div", { className: "d-flex align-items-start", style: { marginBottom: 10 }, children: [jsx("div", { style: {
|
|
72792
|
+
backgroundColor: "#e7f3ff",
|
|
72793
|
+
borderRadius: 8,
|
|
72794
|
+
padding: 6,
|
|
72795
|
+
display: "flex",
|
|
72796
|
+
alignItems: "center",
|
|
72797
|
+
justifyContent: "center",
|
|
72798
|
+
marginRight: 8,
|
|
72799
|
+
flexShrink: 0
|
|
72800
|
+
}, children: jsx(SvgBecoxyWriting, { color: "#006edc", fontSize: 24 }) }), jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [jsx("div", { style: { fontSize: 10, color: "#8b92a7", marginBottom: 2, fontWeight: 500 }, children: "C\u00F4ng vi\u1EC7c" }), jsx("div", { style: {
|
|
72801
|
+
fontWeight: 600,
|
|
72802
|
+
fontSize: 14,
|
|
72803
|
+
color: "#283046",
|
|
72804
|
+
lineHeight: "1.4",
|
|
72805
|
+
wordBreak: "break-word"
|
|
72806
|
+
}, children: taskData.subject || 'Không có tiêu đề' })] })] }), cleanDescription && (jsx("div", { style: {
|
|
72807
|
+
marginBottom: 10,
|
|
72808
|
+
padding: "8px 10px",
|
|
72809
|
+
backgroundColor: "white",
|
|
72810
|
+
borderRadius: 8,
|
|
72811
|
+
fontSize: 12,
|
|
72812
|
+
color: "#5e5873",
|
|
72813
|
+
lineHeight: "1.5",
|
|
72814
|
+
border: "1px solid #eff1f5",
|
|
72815
|
+
wordBreak: "break-word",
|
|
72816
|
+
whiteSpace: "pre-wrap"
|
|
72817
|
+
}, dangerouslySetInnerHTML: { __html: taskData.description } })), jsxs("div", { style: {
|
|
72818
|
+
backgroundColor: "white",
|
|
72819
|
+
borderRadius: 8,
|
|
72820
|
+
padding: "8px 10px",
|
|
72821
|
+
marginBottom: 8,
|
|
72822
|
+
border: "1px solid #eff1f5"
|
|
72823
|
+
}, children: [taskData.createdByName && (jsxs("div", { style: { marginBottom: taskData.hostPerson?.length > 0 || taskData.thePerformer?.length > 0 ? 8 : 0 }, children: [jsx("div", { style: { fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }, children: "Ng\u01B0\u1EDDi t\u1EA1o phi\u1EBFu" }), jsxs("div", { className: "d-flex align-items-center", children: [jsx(AvatarDefault, { imgWidth: 20, imgHeight: 20, color: "light-primary", className: "me-50", img: taskData?.createdByImg }), jsx("span", { style: { fontSize: 12, color: "#283046", fontWeight: 500 }, children: taskData.createdByName })] })] })), taskData.hostPerson && taskData.hostPerson.length > 0 && (jsxs("div", { style: { marginBottom: taskData.thePerformer?.length > 0 ? 8 : 0 }, children: [jsx("div", { style: { fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }, children: "Ng\u01B0\u1EDDi ch\u1EE7 tr\u00EC" }), jsxs("div", { className: "d-flex align-items-center flex-wrap", style: { gap: 4 }, children: [taskData.hostPerson.slice(0, 2).map((person, index) => (jsxs("div", { className: "d-flex align-items-center", style: {
|
|
72824
|
+
backgroundColor: "#f8f9fa",
|
|
72825
|
+
borderRadius: 6,
|
|
72826
|
+
padding: "3px 6px",
|
|
72827
|
+
marginRight: 4
|
|
72828
|
+
}, children: [jsx(AvatarDefault, { imgWidth: 18, imgHeight: 18, color: "light-info", className: "me-50", img: person.img }), jsx("span", { style: { fontSize: 11, color: "#5e5873", fontWeight: 500 }, children: person.name || person.fullName || 'N/A' })] }, index))), taskData.hostPerson.length > 2 && (jsxs("span", { style: {
|
|
72829
|
+
fontSize: 11,
|
|
72830
|
+
color: "#8b92a7",
|
|
72831
|
+
backgroundColor: "#f8f9fa",
|
|
72832
|
+
padding: "3px 8px",
|
|
72833
|
+
borderRadius: 6,
|
|
72834
|
+
fontWeight: 500
|
|
72835
|
+
}, children: ["+", taskData.hostPerson.length - 2] }))] })] })), taskData.thePerformer && taskData.thePerformer.length > 0 && (jsxs("div", { children: [jsx("div", { style: { fontSize: 10, color: "#8b92a7", marginBottom: 4, fontWeight: 500 }, children: "Ng\u01B0\u1EDDi th\u1EF1c hi\u1EC7n" }), jsxs("div", { className: "d-flex align-items-center flex-wrap", style: { gap: 4 }, children: [taskData.thePerformer.slice(0, 2).map((performer, index) => (jsxs("div", { className: "d-flex align-items-center", style: {
|
|
72836
|
+
backgroundColor: "#f8f9fa",
|
|
72837
|
+
borderRadius: 6,
|
|
72838
|
+
padding: "3px 6px",
|
|
72839
|
+
marginRight: 4
|
|
72840
|
+
}, children: [jsx(AvatarDefault, { imgWidth: 18, imgHeight: 18, color: "light-secondary", className: "me-50", img: performer.img }), jsx("span", { style: { fontSize: 11, color: "#5e5873", fontWeight: 500 }, children: performer.name || performer.fullName || 'N/A' })] }, index))), taskData.thePerformer.length > 2 && (jsxs("span", { style: {
|
|
72841
|
+
fontSize: 11,
|
|
72842
|
+
color: "#8b92a7",
|
|
72843
|
+
backgroundColor: "#f8f9fa",
|
|
72844
|
+
padding: "3px 8px",
|
|
72845
|
+
borderRadius: 6,
|
|
72846
|
+
fontWeight: 500
|
|
72847
|
+
}, children: ["+", taskData.thePerformer.length - 2] }))] })] }))] }), taskData.dueDate && (jsxs("div", { style: {
|
|
72848
|
+
display: "flex",
|
|
72849
|
+
alignItems: "center",
|
|
72850
|
+
justifyContent: "space-between",
|
|
72851
|
+
backgroundColor: "#fff5f5",
|
|
72852
|
+
padding: "6px 10px",
|
|
72853
|
+
borderRadius: 8,
|
|
72854
|
+
marginBottom: 8,
|
|
72855
|
+
border: "1px solid #ffe5e5"
|
|
72856
|
+
}, children: [jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [jsx(SvgClock, { fontSize: 14, style: { color: "#ea5455", marginRight: 6 } }), jsx("span", { style: { fontSize: 10, color: "#8b92a7", fontWeight: 500 }, children: "H\u1EA1n ho\u00E0n th\u00E0nh" })] }), jsx("span", { style: { fontSize: 12, color: "#ea5455", fontWeight: 600 }, children: moment(taskData.dueDate).format('DD/MM/YYYY HH:mm') })] })), jsx("div", { style: {
|
|
72857
|
+
fontSize: 11,
|
|
72858
|
+
color: "#adb5bd",
|
|
72859
|
+
textAlign: "right",
|
|
72860
|
+
fontWeight: 500
|
|
72861
|
+
}, children: moment(chat.time).format("HH:mm") })] }));
|
|
72862
|
+
}, []);
|
|
72870
72863
|
// const renderChatReminder = useCallback((chat: any) => {
|
|
72871
72864
|
// let msgContent = chat.msg
|
|
72872
72865
|
// let timeDisplay = chat.time
|