@esvndev/es-react-template-chat 0.0.91 → 0.0.93
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 +360 -305
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +352 -305
- 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
|
|
@@ -72015,6 +72033,167 @@ const useUploadFile = () => {
|
|
|
72015
72033
|
};
|
|
72016
72034
|
};
|
|
72017
72035
|
|
|
72036
|
+
const IconFileTypeColor = (props) => {
|
|
72037
|
+
const { fileType, width, height } = props;
|
|
72038
|
+
const normalizedType = typeof fileType === 'string' ? fileType.toLowerCase() : '';
|
|
72039
|
+
let icon;
|
|
72040
|
+
switch (normalizedType) {
|
|
72041
|
+
case '.jpg':
|
|
72042
|
+
case '.jpeg':
|
|
72043
|
+
case '.png':
|
|
72044
|
+
icon = photo;
|
|
72045
|
+
break;
|
|
72046
|
+
case '.mp3':
|
|
72047
|
+
case '.wma':
|
|
72048
|
+
case '.wma9':
|
|
72049
|
+
case '.wav':
|
|
72050
|
+
case '.flac':
|
|
72051
|
+
case '.aac':
|
|
72052
|
+
case '.aac+':
|
|
72053
|
+
case '.ogg':
|
|
72054
|
+
case '.aiff':
|
|
72055
|
+
case '.lossless':
|
|
72056
|
+
case '.amr':
|
|
72057
|
+
case '.ac3':
|
|
72058
|
+
icon = music;
|
|
72059
|
+
break;
|
|
72060
|
+
case '.avi':
|
|
72061
|
+
case '.mp4':
|
|
72062
|
+
case '.mkv':
|
|
72063
|
+
case '.wmv':
|
|
72064
|
+
case '.vob':
|
|
72065
|
+
case '.flv':
|
|
72066
|
+
case '.webm':
|
|
72067
|
+
case '.3gp':
|
|
72068
|
+
case '.mpeg':
|
|
72069
|
+
icon = video;
|
|
72070
|
+
break;
|
|
72071
|
+
case '.pdf':
|
|
72072
|
+
icon = pdf;
|
|
72073
|
+
break;
|
|
72074
|
+
case '.ppt':
|
|
72075
|
+
icon = ppt;
|
|
72076
|
+
break;
|
|
72077
|
+
case '.xlsx':
|
|
72078
|
+
icon = excel;
|
|
72079
|
+
break;
|
|
72080
|
+
case '.doc':
|
|
72081
|
+
case '.docx':
|
|
72082
|
+
icon = word;
|
|
72083
|
+
break;
|
|
72084
|
+
case '.zip':
|
|
72085
|
+
case '.rar':
|
|
72086
|
+
icon = zip;
|
|
72087
|
+
break;
|
|
72088
|
+
default:
|
|
72089
|
+
icon = '';
|
|
72090
|
+
break;
|
|
72091
|
+
}
|
|
72092
|
+
// if (fileType === "aac") {
|
|
72093
|
+
// icon = "FiletypeAac"
|
|
72094
|
+
// } else if (fileType === ".ai") {
|
|
72095
|
+
// icon = "FiletypeAi"
|
|
72096
|
+
// } else if (fileType === ".bmp") {
|
|
72097
|
+
// icon = "FiletypeBmp"
|
|
72098
|
+
// } else if (fileType === ".cs") {
|
|
72099
|
+
// icon = "FiletypeCs"
|
|
72100
|
+
// } else if (fileType === ".css") {
|
|
72101
|
+
// icon = "FiletypeCss"
|
|
72102
|
+
// } else if (fileType === ".csv") {
|
|
72103
|
+
// icon = "FiletypeCsv"
|
|
72104
|
+
// } else if (fileType === ".doc") {
|
|
72105
|
+
// icon = "FiletypeDoc"
|
|
72106
|
+
// } else if (fileType === ".docx") {
|
|
72107
|
+
// icon = "FiletypeDocx"
|
|
72108
|
+
// } else if (fileType === ".exe") {
|
|
72109
|
+
// icon = "FiletypeExe"
|
|
72110
|
+
// } else if (fileType === ".gif") {
|
|
72111
|
+
// icon = "FiletypeGif"
|
|
72112
|
+
// } else if (fileType === ".heic") {
|
|
72113
|
+
// icon = "FiletypeHeic"
|
|
72114
|
+
// } else if (fileType === ".html") {
|
|
72115
|
+
// icon = "FiletypeHtml"
|
|
72116
|
+
// } else if (fileType === ".java") {
|
|
72117
|
+
// icon = "FiletypeJava"
|
|
72118
|
+
// } else if (fileType === ".jpg" || fileType === ".jpeg") {
|
|
72119
|
+
// icon = "Image"
|
|
72120
|
+
// } else if (fileType === ".js") {
|
|
72121
|
+
// icon = "FiletypeJs"
|
|
72122
|
+
// } else if (fileType === ".json") {
|
|
72123
|
+
// icon = "FiletypeJson"
|
|
72124
|
+
// } else if (fileType === ".jsx") {
|
|
72125
|
+
// icon = "FiletypeJsx"
|
|
72126
|
+
// } else if (fileType === ".key") {
|
|
72127
|
+
// icon = "FiletypeKey"
|
|
72128
|
+
// } else if (fileType === ".m4p") {
|
|
72129
|
+
// icon = "FiletypeM4p"
|
|
72130
|
+
// } else if (fileType === ".md") {
|
|
72131
|
+
// icon = "FiletypeMd"
|
|
72132
|
+
// } else if (fileType === ".mdx") {
|
|
72133
|
+
// icon = "FiletypeMdx"
|
|
72134
|
+
// } else if (fileType === ".mov") {
|
|
72135
|
+
// icon = "FiletypeMov"
|
|
72136
|
+
// } else if (fileType === ".mp3") {
|
|
72137
|
+
// icon = "FiletypeMp3"
|
|
72138
|
+
// } else if (fileType === ".mp4") {
|
|
72139
|
+
// icon = "FiletypeMp4"
|
|
72140
|
+
// } else if (fileType === ".otf") {
|
|
72141
|
+
// icon = "FiletypeOtf"
|
|
72142
|
+
// } else if (fileType === ".pdf") {
|
|
72143
|
+
// icon = "FiletypePdf"
|
|
72144
|
+
// } else if (fileType === ".php") {
|
|
72145
|
+
// icon = "FiletypePhp"
|
|
72146
|
+
// } else if (fileType === ".png") {
|
|
72147
|
+
// icon = "Image"
|
|
72148
|
+
// } else if (fileType === ".ppt") {
|
|
72149
|
+
// icon = "FiletypePpt"
|
|
72150
|
+
// } else if (fileType === ".pptx") {
|
|
72151
|
+
// icon = "FiletypePptx"
|
|
72152
|
+
// } else if (fileType === ".psd") {
|
|
72153
|
+
// icon = "FiletypePsd"
|
|
72154
|
+
// } else if (fileType === ".py") {
|
|
72155
|
+
// icon = "FiletypePy"
|
|
72156
|
+
// } else if (fileType === ".raw") {
|
|
72157
|
+
// icon = "FiletypeRaw"
|
|
72158
|
+
// } else if (fileType === ".rb") {
|
|
72159
|
+
// icon = "FiletypeRb"
|
|
72160
|
+
// } else if (fileType === ".sass") {
|
|
72161
|
+
// icon = "FiletypeSass"
|
|
72162
|
+
// } else if (fileType === ".scss") {
|
|
72163
|
+
// icon = "FiletypeScss"
|
|
72164
|
+
// } else if (fileType === ".sh") {
|
|
72165
|
+
// icon = "FiletypeSh"
|
|
72166
|
+
// } else if (fileType === ".sql") {
|
|
72167
|
+
// icon = "FiletypeSql"
|
|
72168
|
+
// } else if (fileType === ".svg") {
|
|
72169
|
+
// icon = "FiletypeSvg"
|
|
72170
|
+
// } else if (fileType === ".tiff") {
|
|
72171
|
+
// icon = "FiletypeTiff"
|
|
72172
|
+
// } else if (fileType === ".tsx") {
|
|
72173
|
+
// icon = "FiletypeTsx"
|
|
72174
|
+
// } else if (fileType === ".ttf") {
|
|
72175
|
+
// icon = "FiletypeTtf"
|
|
72176
|
+
// } else if (fileType === ".txt") {
|
|
72177
|
+
// icon = "FiletypeTxt"
|
|
72178
|
+
// } else if (fileType === ".wav") {
|
|
72179
|
+
// icon = "FiletypeWav"
|
|
72180
|
+
// } else if (fileType === ".woff") {
|
|
72181
|
+
// icon = "FiletypeWoff"
|
|
72182
|
+
// } else if (fileType === ".xls") {
|
|
72183
|
+
// icon = "FiletypeXls"
|
|
72184
|
+
// } else if (fileType === ".xlsx") {
|
|
72185
|
+
// icon = "FiletypeXlsx"
|
|
72186
|
+
// } else if (fileType === ".xml") {
|
|
72187
|
+
// icon = "FiletypeXml"
|
|
72188
|
+
// } else if (fileType === ".yml") {
|
|
72189
|
+
// icon = "FiletypeYml"
|
|
72190
|
+
// } else if (fileType === ".zip" || fileType === ".rar") {
|
|
72191
|
+
// icon = "FileZip"
|
|
72192
|
+
// }
|
|
72193
|
+
// @ts-ignore
|
|
72194
|
+
return jsx("img", { ...props, src: icon, style: { width: width ? width : 24, height: height ? height : 'auto', ...props.style } });
|
|
72195
|
+
};
|
|
72196
|
+
|
|
72018
72197
|
const DateHeader = memo(({ label }) => (jsx("div", { className: "d-flex justify-content-center", children: jsx("div", { style: {
|
|
72019
72198
|
backgroundColor: "rgba(0,0,0,0.2)",
|
|
72020
72199
|
padding: "2px 15px",
|
|
@@ -72397,311 +72576,179 @@ const ChatLog = (props) => {
|
|
|
72397
72576
|
return (jsx("div", { className: "group-image-item image-container", children: jsx("img", { style: { maxWidth: "100%", maxHeight: 360 }, src: `${CDN_URL_VIEW}/${it.path.trim()}`, onClick: () => handlePreview(it), alt: "" }) }, index));
|
|
72398
72577
|
}) })), jsx("div", { className: "", style: { fontSize: "12px", color: "#476285" }, children: moment(chat.time).format("HH:mm") })] }) }) }));
|
|
72399
72578
|
}, [expandedMessages, handlePreview, mentionItems]);
|
|
72400
|
-
|
|
72401
|
-
|
|
72402
|
-
|
|
72403
|
-
|
|
72404
|
-
|
|
72405
|
-
|
|
72406
|
-
|
|
72407
|
-
|
|
72408
|
-
|
|
72409
|
-
|
|
72410
|
-
|
|
72411
|
-
|
|
72412
|
-
|
|
72413
|
-
|
|
72414
|
-
|
|
72415
|
-
|
|
72416
|
-
|
|
72417
|
-
|
|
72418
|
-
|
|
72419
|
-
|
|
72420
|
-
|
|
72421
|
-
|
|
72422
|
-
|
|
72423
|
-
|
|
72424
|
-
|
|
72425
|
-
|
|
72426
|
-
|
|
72427
|
-
|
|
72428
|
-
|
|
72429
|
-
|
|
72430
|
-
|
|
72431
|
-
|
|
72432
|
-
|
|
72433
|
-
|
|
72434
|
-
|
|
72435
|
-
|
|
72436
|
-
|
|
72437
|
-
|
|
72438
|
-
|
|
72439
|
-
|
|
72440
|
-
|
|
72441
|
-
|
|
72442
|
-
|
|
72443
|
-
|
|
72444
|
-
|
|
72445
|
-
|
|
72446
|
-
|
|
72447
|
-
|
|
72448
|
-
|
|
72449
|
-
|
|
72450
|
-
|
|
72451
|
-
|
|
72452
|
-
|
|
72453
|
-
|
|
72454
|
-
|
|
72455
|
-
|
|
72456
|
-
|
|
72457
|
-
|
|
72458
|
-
|
|
72459
|
-
|
|
72460
|
-
|
|
72461
|
-
|
|
72462
|
-
|
|
72463
|
-
|
|
72464
|
-
|
|
72465
|
-
|
|
72466
|
-
|
|
72467
|
-
|
|
72468
|
-
|
|
72469
|
-
|
|
72470
|
-
|
|
72471
|
-
|
|
72472
|
-
|
|
72473
|
-
|
|
72474
|
-
|
|
72475
|
-
|
|
72476
|
-
|
|
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
|
-
// HD
|
|
72574
|
-
// </div>
|
|
72575
|
-
// </div>
|
|
72576
|
-
// <div className="px-1 py-75">{moment(chat.time).format("HH:mm")}</div>
|
|
72577
|
-
// </>
|
|
72578
|
-
// )
|
|
72579
|
-
// }
|
|
72580
|
-
// // Nhiều ảnh - hiển thị dạng grid 2 cột, tối đa 6 ảnh
|
|
72581
|
-
// const imagesToShow = files.slice(0, 6)
|
|
72582
|
-
// const remainingCount = files.length - 6
|
|
72583
|
-
// return (
|
|
72584
|
-
// <>
|
|
72585
|
-
// <div
|
|
72586
|
-
// className="images-grid-container"
|
|
72587
|
-
// style={{
|
|
72588
|
-
// display: "flex",
|
|
72589
|
-
// flexWrap: "wrap",
|
|
72590
|
-
// maxWidth: "600px",
|
|
72591
|
-
// gap: "4px"
|
|
72592
|
-
// }}
|
|
72593
|
-
// >
|
|
72594
|
-
// {imagesToShow.map((file: any, index: number) => {
|
|
72595
|
-
// const imagePath = file?.path?.trim()
|
|
72596
|
-
// if (!imagePath) { return null }
|
|
72597
|
-
// const imageUrl = `${CDN_URL_VIEW}/${imagePath}`
|
|
72598
|
-
// const isLastImage = index === 5 && remainingCount > 0
|
|
72599
|
-
// // ✅ THÊM: Kiểm tra ảnh cuối khi số lượng lẻ
|
|
72600
|
-
// const isOddCount = imagesToShow.length % 2 !== 0
|
|
72601
|
-
// const isLastItem = index === imagesToShow.length - 1
|
|
72602
|
-
// const isFullWidth = isOddCount && isLastItem && !isLastImage
|
|
72603
|
-
// return (
|
|
72604
|
-
// <div
|
|
72605
|
-
// key={`image-${chat.id}-${index}`}
|
|
72606
|
-
// style={{
|
|
72607
|
-
// width: isFullWidth ? "100%" : "calc(50% - 2px)",
|
|
72608
|
-
// height: "140px",
|
|
72609
|
-
// position: "relative",
|
|
72610
|
-
// overflow: "hidden",
|
|
72611
|
-
// borderRadius: 8,
|
|
72612
|
-
// border: "1px solid #e0e0e0"
|
|
72613
|
-
// }}
|
|
72614
|
-
// >
|
|
72615
|
-
// <img
|
|
72616
|
-
// src={imageUrl}
|
|
72617
|
-
// alt={`Chat image ${index + 1}`}
|
|
72618
|
-
// style={{
|
|
72619
|
-
// width: "100%",
|
|
72620
|
-
// height: "100%",
|
|
72621
|
-
// objectFit: "cover",
|
|
72622
|
-
// borderRadius: 8,
|
|
72623
|
-
// display: "block",
|
|
72624
|
-
// cursor: "pointer"
|
|
72625
|
-
// }}
|
|
72626
|
-
// onClick={() => handlePreview(file)}
|
|
72627
|
-
// />
|
|
72628
|
-
// {/* HD Badge */}
|
|
72629
|
-
// <div
|
|
72630
|
-
// style={{
|
|
72631
|
-
// position: "absolute",
|
|
72632
|
-
// top: 6,
|
|
72633
|
-
// left: 6,
|
|
72634
|
-
// backgroundColor: "rgba(0, 0, 0, 0.6)",
|
|
72635
|
-
// color: "white",
|
|
72636
|
-
// padding: "2px 6px",
|
|
72637
|
-
// borderRadius: 4,
|
|
72638
|
-
// fontSize: "10px",
|
|
72639
|
-
// fontWeight: "bold",
|
|
72640
|
-
// zIndex: 1
|
|
72641
|
-
// }}
|
|
72642
|
-
// >
|
|
72643
|
-
// HD
|
|
72644
|
-
// </div>
|
|
72645
|
-
// {/* Overlay cho ảnh cuối nếu có nhiều hơn 6 ảnh */}
|
|
72646
|
-
// {isLastImage && (
|
|
72647
|
-
// <div
|
|
72648
|
-
// style={{
|
|
72649
|
-
// position: "absolute",
|
|
72650
|
-
// top: 0,
|
|
72651
|
-
// left: 0,
|
|
72652
|
-
// right: 0,
|
|
72653
|
-
// bottom: 0,
|
|
72654
|
-
// backgroundColor: "rgba(0, 0, 0, 0.6)",
|
|
72655
|
-
// display: "flex",
|
|
72656
|
-
// alignItems: "center",
|
|
72657
|
-
// justifyContent: "center",
|
|
72658
|
-
// color: "white",
|
|
72659
|
-
// fontSize: "20px",
|
|
72660
|
-
// fontWeight: "bold",
|
|
72661
|
-
// borderRadius: 8,
|
|
72662
|
-
// cursor: "pointer"
|
|
72663
|
-
// }}
|
|
72664
|
-
// onClick={() => handlePreview(file)}
|
|
72665
|
-
// >
|
|
72666
|
-
// +{remainingCount}
|
|
72667
|
-
// </div>
|
|
72668
|
-
// )}
|
|
72669
|
-
// </div>
|
|
72670
|
-
// )
|
|
72671
|
-
// })}
|
|
72672
|
-
// </div>
|
|
72673
|
-
// <div className="px-1 py-75">{moment(chat.time).format("HH:mm")}</div>
|
|
72674
|
-
// </>
|
|
72675
|
-
// )
|
|
72676
|
-
// }, [handlePreview])
|
|
72677
|
-
// const renderChatFile = useCallback((chat: any) => {
|
|
72678
|
-
// const files = chat?.path
|
|
72679
|
-
// return (
|
|
72680
|
-
// <>
|
|
72681
|
-
// {files?.map((file: any, index: number) => {
|
|
72682
|
-
// return (
|
|
72683
|
-
// <div key={index}>
|
|
72684
|
-
// <div className="d-flex p-50">
|
|
72685
|
-
// <div className="me-1" onClick={() => handlePreview(file)}>
|
|
72686
|
-
// {/*<IconFileType fileType={file?.type} fontSize={50} />*/}
|
|
72687
|
-
// <IconFileTypeColor fileType={file?.type} width={35} />
|
|
72688
|
-
// </div>
|
|
72689
|
-
// <div>
|
|
72690
|
-
// <p className="file-name-chat">{file.name}</p>
|
|
72691
|
-
// <p>{formatBytes({ size: file.size })}</p>
|
|
72692
|
-
// </div>
|
|
72693
|
-
// </div>
|
|
72694
|
-
// {index + 1 === files.length && (
|
|
72695
|
-
// <div className="px-1 pb-75">
|
|
72696
|
-
// {moment(chat.time).format("HH:mm")}
|
|
72697
|
-
// </div>
|
|
72698
|
-
// )}
|
|
72699
|
-
// </div>
|
|
72700
|
-
// )
|
|
72701
|
-
// })}
|
|
72702
|
-
// </>
|
|
72703
|
-
// )
|
|
72704
|
-
// }, [handlePreview])
|
|
72579
|
+
const getLinkPreviewData = (urlString) => {
|
|
72580
|
+
try {
|
|
72581
|
+
const hasProtocol = /^https?:\/\//i.test(urlString);
|
|
72582
|
+
const href = hasProtocol ? urlString : `https://${urlString}`;
|
|
72583
|
+
const url = new URL(href);
|
|
72584
|
+
const displayUrl = urlString.length > 80 ? `${urlString.slice(0, 77)}...` : urlString;
|
|
72585
|
+
return {
|
|
72586
|
+
href,
|
|
72587
|
+
displayUrl,
|
|
72588
|
+
host: url.host
|
|
72589
|
+
};
|
|
72590
|
+
}
|
|
72591
|
+
catch (e) {
|
|
72592
|
+
return {
|
|
72593
|
+
href: urlString,
|
|
72594
|
+
displayUrl: urlString,
|
|
72595
|
+
host: ''
|
|
72596
|
+
};
|
|
72597
|
+
}
|
|
72598
|
+
};
|
|
72599
|
+
const renderLinkPreview = (urlString) => {
|
|
72600
|
+
const { href, displayUrl, host } = getLinkPreviewData(urlString);
|
|
72601
|
+
return (jsx(Fragment$1, { children: jsx("a", { href: href, target: "_blank", rel: "noreferrer", style: {
|
|
72602
|
+
textDecoration: 'none',
|
|
72603
|
+
color: 'inherit'
|
|
72604
|
+
}, children: jsxs("div", { style: {
|
|
72605
|
+
marginTop: 4,
|
|
72606
|
+
marginBottom: 4,
|
|
72607
|
+
padding: '8px 10px',
|
|
72608
|
+
borderRadius: 8,
|
|
72609
|
+
backgroundColor: '#eef5ff',
|
|
72610
|
+
border: '1px solid #d3e2ff',
|
|
72611
|
+
maxWidth: 420
|
|
72612
|
+
}, children: [jsx("div", { style: {
|
|
72613
|
+
fontSize: 14,
|
|
72614
|
+
fontWeight: 500,
|
|
72615
|
+
color: '#1d4f91',
|
|
72616
|
+
wordBreak: 'break-word'
|
|
72617
|
+
}, children: displayUrl }), host && (jsx("div", { style: {
|
|
72618
|
+
marginTop: 4,
|
|
72619
|
+
fontSize: 12,
|
|
72620
|
+
color: '#6f6b7d'
|
|
72621
|
+
}, children: host }))] }) }) }));
|
|
72622
|
+
};
|
|
72623
|
+
useCallback((chat) => {
|
|
72624
|
+
const msg = JSON.parse(chat?.msg);
|
|
72625
|
+
if (chat?.createdById === dataProfile?.id) {
|
|
72626
|
+
return (jsx(Fragment$1, { children: jsxs("div", { children: [jsx("span", { style: { fontWeight: "bold", marginRight: "5px" }, children: msg?.name }), jsx("span", { children: "\u0111\u01B0\u1EE3c b\u1EA1n xo\u00E1 kh\u1ECFi nh\u00F3m" })] }) }));
|
|
72627
|
+
}
|
|
72628
|
+
if (chat?.createdById === msg?.id) {
|
|
72629
|
+
return (jsx(Fragment$1, { children: jsxs("div", { children: [jsx("span", { style: { fontWeight: "bold", marginRight: "5px" }, children: msg?.name }), jsx("span", { children: "\u0111\u00E3 r\u1EDDi kh\u1ECFi nh\u00F3m" })] }) }));
|
|
72630
|
+
}
|
|
72631
|
+
return (jsx(Fragment$1, { children: jsxs("div", { children: [jsx("span", { style: { fontWeight: "bold", marginRight: "5px" }, children: msg?.name }), jsxs("span", { children: ["\u0111\u01B0\u1EE3c ", jsx("span", { style: { fontWeight: "bold", marginRight: "5px" }, children: chat?.createdBy?.name }), " xo\u00E1 kh\u1ECFi nh\u00F3m"] })] }) }));
|
|
72632
|
+
}, [dataProfile]);
|
|
72633
|
+
useCallback((chat) => {
|
|
72634
|
+
const parseChatMsg = (msg) => {
|
|
72635
|
+
if (!msg) {
|
|
72636
|
+
return [];
|
|
72637
|
+
}
|
|
72638
|
+
try {
|
|
72639
|
+
const parsed = typeof msg === 'string' ? JSON.parse(msg) : msg;
|
|
72640
|
+
return Array.isArray(parsed) ? parsed : [parsed];
|
|
72641
|
+
}
|
|
72642
|
+
catch (err) {
|
|
72643
|
+
console.error('JSON parse error:', err);
|
|
72644
|
+
return [];
|
|
72645
|
+
}
|
|
72646
|
+
};
|
|
72647
|
+
const dataParse = parseChatMsg(chat.msg);
|
|
72648
|
+
// ✅ FIX: Kiểm tra array trước khi dùng slice
|
|
72649
|
+
if (!Array.isArray(dataParse) || dataParse.length === 0) {
|
|
72650
|
+
return (jsx("div", { children: jsx("span", { children: "\u0110\u00E3 c\u00F3 thay \u0111\u1ED5i trong nh\u00F3m" }) }));
|
|
72651
|
+
}
|
|
72652
|
+
const displayedItems = dataParse.slice(0, 2);
|
|
72653
|
+
const extraCount = Math.max(0, dataParse.length - displayedItems.length);
|
|
72654
|
+
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"] }) }));
|
|
72655
|
+
}, [dataProfile]);
|
|
72656
|
+
useCallback((chat) => {
|
|
72657
|
+
const files = chat.path;
|
|
72658
|
+
if (!files || !Array.isArray(files) || files.length === 0) {
|
|
72659
|
+
return null;
|
|
72660
|
+
}
|
|
72661
|
+
// Ảnh đơn lẻ
|
|
72662
|
+
if (files.length === 1) {
|
|
72663
|
+
const imagePath = files[0]?.path?.trim();
|
|
72664
|
+
if (!imagePath) {
|
|
72665
|
+
return null;
|
|
72666
|
+
}
|
|
72667
|
+
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: {
|
|
72668
|
+
maxWidth: "100%",
|
|
72669
|
+
maxHeight: 400,
|
|
72670
|
+
borderRadius: 8,
|
|
72671
|
+
cursor: "pointer"
|
|
72672
|
+
}, onClick: () => handlePreview(files[0]) }), jsx("div", { style: {
|
|
72673
|
+
position: "absolute",
|
|
72674
|
+
top: 6,
|
|
72675
|
+
left: 6,
|
|
72676
|
+
backgroundColor: "rgba(0, 0, 0, 0.6)",
|
|
72677
|
+
color: "white",
|
|
72678
|
+
padding: "2px 6px",
|
|
72679
|
+
borderRadius: 4,
|
|
72680
|
+
fontSize: "10px",
|
|
72681
|
+
fontWeight: "bold"
|
|
72682
|
+
}, children: "HD" })] }), jsx("div", { className: "px-1 py-75", children: moment(chat.time).format("HH:mm") })] }));
|
|
72683
|
+
}
|
|
72684
|
+
// Nhiều ảnh - hiển thị dạng grid 2 cột, tối đa 6 ảnh
|
|
72685
|
+
const imagesToShow = files.slice(0, 6);
|
|
72686
|
+
const remainingCount = files.length - 6;
|
|
72687
|
+
return (jsxs(Fragment$1, { children: [jsx("div", { className: "images-grid-container", style: {
|
|
72688
|
+
display: "flex",
|
|
72689
|
+
flexWrap: "wrap",
|
|
72690
|
+
maxWidth: "600px",
|
|
72691
|
+
gap: "4px"
|
|
72692
|
+
}, children: imagesToShow.map((file, index) => {
|
|
72693
|
+
const imagePath = file?.path?.trim();
|
|
72694
|
+
if (!imagePath) {
|
|
72695
|
+
return null;
|
|
72696
|
+
}
|
|
72697
|
+
const imageUrl = `${CDN_URL_VIEW}/${imagePath}`;
|
|
72698
|
+
const isLastImage = index === 5 && remainingCount > 0;
|
|
72699
|
+
// ✅ THÊM: Kiểm tra ảnh cuối khi số lượng lẻ
|
|
72700
|
+
const isOddCount = imagesToShow.length % 2 !== 0;
|
|
72701
|
+
const isLastItem = index === imagesToShow.length - 1;
|
|
72702
|
+
const isFullWidth = isOddCount && isLastItem && !isLastImage;
|
|
72703
|
+
return (jsxs("div", { style: {
|
|
72704
|
+
width: isFullWidth ? "100%" : "calc(50% - 2px)",
|
|
72705
|
+
height: "140px",
|
|
72706
|
+
position: "relative",
|
|
72707
|
+
overflow: "hidden",
|
|
72708
|
+
borderRadius: 8,
|
|
72709
|
+
border: "1px solid #e0e0e0"
|
|
72710
|
+
}, children: [jsx("img", { src: imageUrl, alt: `Chat image ${index + 1}`, style: {
|
|
72711
|
+
width: "100%",
|
|
72712
|
+
height: "100%",
|
|
72713
|
+
objectFit: "cover",
|
|
72714
|
+
borderRadius: 8,
|
|
72715
|
+
display: "block",
|
|
72716
|
+
cursor: "pointer"
|
|
72717
|
+
}, onClick: () => handlePreview(file) }), jsx("div", { style: {
|
|
72718
|
+
position: "absolute",
|
|
72719
|
+
top: 6,
|
|
72720
|
+
left: 6,
|
|
72721
|
+
backgroundColor: "rgba(0, 0, 0, 0.6)",
|
|
72722
|
+
color: "white",
|
|
72723
|
+
padding: "2px 6px",
|
|
72724
|
+
borderRadius: 4,
|
|
72725
|
+
fontSize: "10px",
|
|
72726
|
+
fontWeight: "bold",
|
|
72727
|
+
zIndex: 1
|
|
72728
|
+
}, children: "HD" }), isLastImage && (jsxs("div", { style: {
|
|
72729
|
+
position: "absolute",
|
|
72730
|
+
top: 0,
|
|
72731
|
+
left: 0,
|
|
72732
|
+
right: 0,
|
|
72733
|
+
bottom: 0,
|
|
72734
|
+
backgroundColor: "rgba(0, 0, 0, 0.6)",
|
|
72735
|
+
display: "flex",
|
|
72736
|
+
alignItems: "center",
|
|
72737
|
+
justifyContent: "center",
|
|
72738
|
+
color: "white",
|
|
72739
|
+
fontSize: "20px",
|
|
72740
|
+
fontWeight: "bold",
|
|
72741
|
+
borderRadius: 8,
|
|
72742
|
+
cursor: "pointer"
|
|
72743
|
+
}, onClick: () => handlePreview(file), children: ["+", remainingCount] }))] }, `image-${chat.id}-${index}`));
|
|
72744
|
+
}) }), jsx("div", { className: "px-1 py-75", children: moment(chat.time).format("HH:mm") })] }));
|
|
72745
|
+
}, [handlePreview]);
|
|
72746
|
+
useCallback((chat) => {
|
|
72747
|
+
const files = chat?.path;
|
|
72748
|
+
return (jsx(Fragment$1, { children: files?.map((file, index) => {
|
|
72749
|
+
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));
|
|
72750
|
+
}) }));
|
|
72751
|
+
}, [handlePreview]);
|
|
72705
72752
|
// const renderTaskApplication = useCallback((chat: any) => {
|
|
72706
72753
|
// const safeParse = (str: any) => {
|
|
72707
72754
|
// if (!str) { return {} }
|