@esvndev/es-react-template-chat 0.0.92 → 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 +283 -170
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +275 -170
- 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",
|
|
@@ -72474,176 +72653,102 @@ const ChatLog = (props) => {
|
|
|
72474
72653
|
const extraCount = Math.max(0, dataParse.length - displayedItems.length);
|
|
72475
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"] }) }));
|
|
72476
72655
|
}, [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
|
-
// position: "absolute",
|
|
72574
|
-
// top: 6,
|
|
72575
|
-
// left: 6,
|
|
72576
|
-
// backgroundColor: "rgba(0, 0, 0, 0.6)",
|
|
72577
|
-
// color: "white",
|
|
72578
|
-
// padding: "2px 6px",
|
|
72579
|
-
// borderRadius: 4,
|
|
72580
|
-
// fontSize: "10px",
|
|
72581
|
-
// fontWeight: "bold",
|
|
72582
|
-
// zIndex: 1
|
|
72583
|
-
// }}
|
|
72584
|
-
// >
|
|
72585
|
-
// HD
|
|
72586
|
-
// </div>
|
|
72587
|
-
// {/* Overlay cho ảnh cuối nếu có nhiều hơn 6 ảnh */}
|
|
72588
|
-
// {isLastImage && (
|
|
72589
|
-
// <div
|
|
72590
|
-
// style={{
|
|
72591
|
-
// position: "absolute",
|
|
72592
|
-
// top: 0,
|
|
72593
|
-
// left: 0,
|
|
72594
|
-
// right: 0,
|
|
72595
|
-
// bottom: 0,
|
|
72596
|
-
// backgroundColor: "rgba(0, 0, 0, 0.6)",
|
|
72597
|
-
// display: "flex",
|
|
72598
|
-
// alignItems: "center",
|
|
72599
|
-
// justifyContent: "center",
|
|
72600
|
-
// color: "white",
|
|
72601
|
-
// fontSize: "20px",
|
|
72602
|
-
// fontWeight: "bold",
|
|
72603
|
-
// borderRadius: 8,
|
|
72604
|
-
// cursor: "pointer"
|
|
72605
|
-
// }}
|
|
72606
|
-
// onClick={() => handlePreview(file)}
|
|
72607
|
-
// >
|
|
72608
|
-
// +{remainingCount}
|
|
72609
|
-
// </div>
|
|
72610
|
-
// )}
|
|
72611
|
-
// </div>
|
|
72612
|
-
// )
|
|
72613
|
-
// })}
|
|
72614
|
-
// </div>
|
|
72615
|
-
// <div className="px-1 py-75">{moment(chat.time).format("HH:mm")}</div>
|
|
72616
|
-
// </>
|
|
72617
|
-
// )
|
|
72618
|
-
// }, [handlePreview])
|
|
72619
|
-
// const renderChatFile = useCallback((chat: any) => {
|
|
72620
|
-
// const files = chat?.path
|
|
72621
|
-
// return (
|
|
72622
|
-
// <>
|
|
72623
|
-
// {files?.map((file: any, index: number) => {
|
|
72624
|
-
// return (
|
|
72625
|
-
// <div key={index}>
|
|
72626
|
-
// <div className="d-flex p-50">
|
|
72627
|
-
// <div className="me-1" onClick={() => handlePreview(file)}>
|
|
72628
|
-
// {/*<IconFileType fileType={file?.type} fontSize={50} />*/}
|
|
72629
|
-
// <IconFileTypeColor fileType={file?.type} width={35} />
|
|
72630
|
-
// </div>
|
|
72631
|
-
// <div>
|
|
72632
|
-
// <p className="file-name-chat">{file.name}</p>
|
|
72633
|
-
// <p>{formatBytes({ size: file.size })}</p>
|
|
72634
|
-
// </div>
|
|
72635
|
-
// </div>
|
|
72636
|
-
// {index + 1 === files.length && (
|
|
72637
|
-
// <div className="px-1 pb-75">
|
|
72638
|
-
// {moment(chat.time).format("HH:mm")}
|
|
72639
|
-
// </div>
|
|
72640
|
-
// )}
|
|
72641
|
-
// </div>
|
|
72642
|
-
// )
|
|
72643
|
-
// })}
|
|
72644
|
-
// </>
|
|
72645
|
-
// )
|
|
72646
|
-
// }, [handlePreview])
|
|
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]);
|
|
72647
72752
|
// const renderTaskApplication = useCallback((chat: any) => {
|
|
72648
72753
|
// const safeParse = (str: any) => {
|
|
72649
72754
|
// if (!str) { return {} }
|