@esvndev/es-react-template-chat 0.0.91 → 0.0.93

package/dist/index.js

@@ -21,6 +21,14 @@ require('@draft-js-plugins/mention/lib/plugin.css');
 require('@draft-js-plugins/emoji/lib/plugin.css');
 var reactRedux = require('react-redux');
 var configureStore$1 = require('@store/configureStore');
+var photo = require('@core/assets/images/icons/file-icons/icon-photo.svg');
+var word = require('@core/assets/images/icons/file-icons/icon-word.svg');
+var excel = require('@core/assets/images/icons/file-icons/icon-excel.svg');
+var ppt = require('@core/assets/images/icons/file-icons/icon-powerpoint.svg');
+var music = require('@core/assets/images/icons/file-icons/icon-music.svg');
+var video = require('@core/assets/images/icons/file-icons/icon-video.svg');
+var pdf = require('@core/assets/images/icons/file-icons/icon-pdf.svg');
+var zip = require('@core/assets/images/icons/file-icons/icon-zip.svg');
 var reactRouterDom = require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -49,6 +57,14 @@ var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var toast__default = /*#__PURE__*/_interopDefaultLegacy(toast);
 var avatarDefault__default = /*#__PURE__*/_interopDefaultLegacy(avatarDefault);
+var photo__default = /*#__PURE__*/_interopDefaultLegacy(photo);
+var word__default = /*#__PURE__*/_interopDefaultLegacy(word);
+var excel__default = /*#__PURE__*/_interopDefaultLegacy(excel);
+var ppt__default = /*#__PURE__*/_interopDefaultLegacy(ppt);
+var music__default = /*#__PURE__*/_interopDefaultLegacy(music);
+var video__default = /*#__PURE__*/_interopDefaultLegacy(video);
+var pdf__default = /*#__PURE__*/_interopDefaultLegacy(pdf);
+var zip__default = /*#__PURE__*/_interopDefaultLegacy(zip);
 
 var instances = 'ej2_instances';
 var uid = 0;
@@ -27397,6 +27413,16 @@ const encodeUUID = (uuid) => {
         return uuid;
     }
 };
+const formatBytes = (props, decimals = 2) => {
+    if (!+props.size) {
+        return '0 Bytes';
+    }
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(props.size) / Math.log(k));
+    return `${parseFloat((props.size / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};
 const isValidUrl = (string) => {
     try {
         // eslint-disable-next-line no-new
@@ -72044,6 +72070,167 @@ const useUploadFile = () => {
     };
 };
 
+const IconFileTypeColor = (props) => {
+    const { fileType, width, height } = props;
+    const normalizedType = typeof fileType === 'string' ? fileType.toLowerCase() : '';
+    let icon;
+    switch (normalizedType) {
+        case '.jpg':
+        case '.jpeg':
+        case '.png':
+            icon = photo__default["default"];
+            break;
+        case '.mp3':
+        case '.wma':
+        case '.wma9':
+        case '.wav':
+        case '.flac':
+        case '.aac':
+        case '.aac+':
+        case '.ogg':
+        case '.aiff':
+        case '.lossless':
+        case '.amr':
+        case '.ac3':
+            icon = music__default["default"];
+            break;
+        case '.avi':
+        case '.mp4':
+        case '.mkv':
+        case '.wmv':
+        case '.vob':
+        case '.flv':
+        case '.webm':
+        case '.3gp':
+        case '.mpeg':
+            icon = video__default["default"];
+            break;
+        case '.pdf':
+            icon = pdf__default["default"];
+            break;
+        case '.ppt':
+            icon = ppt__default["default"];
+            break;
+        case '.xlsx':
+            icon = excel__default["default"];
+            break;
+        case '.doc':
+        case '.docx':
+            icon = word__default["default"];
+            break;
+        case '.zip':
+        case '.rar':
+            icon = zip__default["default"];
+            break;
+        default:
+            icon = '';
+            break;
+    }
+    // if (fileType === "aac") {
+    //   icon = "FiletypeAac"
+    // } else if (fileType === ".ai") {
+    //   icon = "FiletypeAi"
+    // } else if (fileType === ".bmp") {
+    //   icon = "FiletypeBmp"
+    // } else if (fileType === ".cs") {
+    //   icon = "FiletypeCs"
+    // } else if (fileType === ".css") {
+    //   icon = "FiletypeCss"
+    // } else if (fileType === ".csv") {
+    //   icon = "FiletypeCsv"
+    // } else if (fileType === ".doc") {
+    //   icon = "FiletypeDoc"
+    // } else if (fileType === ".docx") {
+    //   icon = "FiletypeDocx"
+    // } else if (fileType === ".exe") {
+    //   icon = "FiletypeExe"
+    // } else if (fileType === ".gif") {
+    //   icon = "FiletypeGif"
+    // } else if (fileType === ".heic") {
+    //   icon = "FiletypeHeic"
+    // } else if (fileType === ".html") {
+    //   icon = "FiletypeHtml"
+    // } else if (fileType === ".java") {
+    //   icon = "FiletypeJava"
+    // } else if (fileType === ".jpg" || fileType === ".jpeg") {
+    //   icon = "Image"
+    // } else if (fileType === ".js") {
+    //   icon = "FiletypeJs"
+    // } else if (fileType === ".json") {
+    //   icon = "FiletypeJson"
+    // } else if (fileType === ".jsx") {
+    //   icon = "FiletypeJsx"
+    // } else if (fileType === ".key") {
+    //   icon = "FiletypeKey"
+    // } else if (fileType === ".m4p") {
+    //   icon = "FiletypeM4p"
+    // } else if (fileType === ".md") {
+    //   icon = "FiletypeMd"
+    // } else if (fileType === ".mdx") {
+    //   icon = "FiletypeMdx"
+    // } else if (fileType === ".mov") {
+    //   icon = "FiletypeMov"
+    // } else if (fileType === ".mp3") {
+    //   icon = "FiletypeMp3"
+    // } else if (fileType === ".mp4") {
+    //   icon = "FiletypeMp4"
+    // } else if (fileType === ".otf") {
+    //   icon = "FiletypeOtf"
+    // } else if (fileType === ".pdf") {
+    //   icon = "FiletypePdf"
+    // } else if (fileType === ".php") {
+    //   icon = "FiletypePhp"
+    // } else if (fileType === ".png") {
+    //   icon = "Image"
+    // } else if (fileType === ".ppt") {
+    //   icon = "FiletypePpt"
+    // } else if (fileType === ".pptx") {
+    //   icon = "FiletypePptx"
+    // } else if (fileType === ".psd") {
+    //   icon = "FiletypePsd"
+    // } else if (fileType === ".py") {
+    //   icon = "FiletypePy"
+    // } else if (fileType === ".raw") {
+    //   icon = "FiletypeRaw"
+    // } else if (fileType === ".rb") {
+    //   icon = "FiletypeRb"
+    // } else if (fileType === ".sass") {
+    //   icon = "FiletypeSass"
+    // } else if (fileType === ".scss") {
+    //   icon = "FiletypeScss"
+    // } else if (fileType === ".sh") {
+    //   icon = "FiletypeSh"
+    // } else if (fileType === ".sql") {
+    //   icon = "FiletypeSql"
+    // } else if (fileType === ".svg") {
+    //   icon = "FiletypeSvg"
+    // } else if (fileType === ".tiff") {
+    //   icon = "FiletypeTiff"
+    // } else if (fileType === ".tsx") {
+    //   icon = "FiletypeTsx"
+    // } else if (fileType === ".ttf") {
+    //   icon = "FiletypeTtf"
+    // } else if (fileType === ".txt") {
+    //   icon = "FiletypeTxt"
+    // } else if (fileType === ".wav") {
+    //   icon = "FiletypeWav"
+    // } else if (fileType === ".woff") {
+    //   icon = "FiletypeWoff"
+    // } else if (fileType === ".xls") {
+    //   icon = "FiletypeXls"
+    // } else if (fileType === ".xlsx") {
+    //   icon = "FiletypeXlsx"
+    // } else if (fileType === ".xml") {
+    //   icon = "FiletypeXml"
+    // } else if (fileType === ".yml") {
+    //   icon = "FiletypeYml"
+    // } else if (fileType === ".zip" || fileType === ".rar") {
+    //   icon = "FileZip"
+    // }
+    // @ts-ignore
+    return jsxRuntime.jsx("img", { ...props, src: icon, style: { width: width ? width : 24, height: height ? height : 'auto', ...props.style } });
+};
+
 const DateHeader = React.memo(({ label }) => (jsxRuntime.jsx("div", { className: "d-flex justify-content-center", children: jsxRuntime.jsx("div", { style: {
             backgroundColor: "rgba(0,0,0,0.2)",
             padding: "2px 15px",
@@ -72426,311 +72613,179 @@ const ChatLog = (props) => {
                                 return (jsxRuntime.jsx("div", { className: "group-image-item image-container", children: jsxRuntime.jsx("img", { style: { maxWidth: "100%", maxHeight: 360 }, src: `${CDN_URL_VIEW}/${it.path.trim()}`, onClick: () => handlePreview(it), alt: "" }) }, index));
                             }) })), jsxRuntime.jsx("div", { className: "", style: { fontSize: "12px", color: "#476285" }, children: moment(chat.time).format("HH:mm") })] }) }) }));
     }, [expandedMessages, handlePreview, mentionItems]);
-    // const renderLinkPreview = (urlString: string) => {
-    //   const { href, displayUrl, host } = getLinkPreviewData(urlString)
-    //   return (
-    //     <>
-    //       <a
-    //         href={href}
-    //         target="_blank"
-    //         rel="noreferrer"
-    //         style={{
-    //           textDecoration: 'none',
-    //           color: 'inherit'
-    //         }}
-    //       >
-    //         <div
-    //           style={{
-    //             marginTop: 4,
-    //             marginBottom: 4,
-    //             padding: '8px 10px',
-    //             borderRadius: 8,
-    //             backgroundColor: '#eef5ff',
-    //             border: '1px solid #d3e2ff',
-    //             maxWidth: 420
-    //           }}
-    //         >
-    //           <div
-    //             style={{
-    //               fontSize: 14,
-    //               fontWeight: 500,
-    //               color: '#1d4f91',
-    //               wordBreak: 'break-word'
-    //             }}
-    //           >
-    //             {displayUrl}
-    //           </div>
-    //           {host && (
-    //             <div
-    //               style={{
-    //                 marginTop: 4,
-    //                 fontSize: 12,
-    //                 color: '#6f6b7d'
-    //               }}
-    //             >
-    //               {host}
-    //             </div>
-    //           )}
-    //         </div>
-    //       </a>
-    //     </>
-    //   )
-    // }
-    // const renderNotifyLeaveGroup = useCallback((chat: any) => {
-    //   const msg = JSON.parse(chat?.msg)
-    //   if (chat?.createdById === dataProfile?.id) {
-    //     return (
-    //       <>
-    //         <div>
-    //           <span style={{ fontWeight: "bold", marginRight: "5px" }}>
-    //             {msg?.name}
-    //           </span>
-    //           <span>được bạn xoá khỏi nhóm</span>
-    //         </div>
-    //       </>
-    //     )
-    //   }
-    //   if (chat?.createdById === msg?.id) {
-    //     return (
-    //       <>
-    //         <div>
-    //           <span style={{ fontWeight: "bold", marginRight: "5px" }}>
-    //             {msg?.name}
-    //           </span>
-    //           <span>đã rời khỏi nhóm</span>
-    //         </div>
-    //       </>
-    //     )
-    //   }
-    //   return (
-    //     <>
-    //       <div>
-    //         <span style={{ fontWeight: "bold", marginRight: "5px" }}>
-    //           {msg?.name}
-    //         </span>
-    //         <span>được <span style={{ fontWeight: "bold", marginRight: "5px" }}>{chat?.createdBy?.name}</span> xoá khỏi nhóm</span>
-    //       </div>
-    //     </>
-    //   )
-    // }, [dataProfile])
-    // const renderChatNotification = useCallback((chat: any) => {
-    //   const parseChatMsg = (msg: string) => {
-    //     if (!msg) { return [] }
-    //     try {
-    //       const parsed = typeof msg === 'string' ? JSON.parse(msg) : msg
-    //       return Array.isArray(parsed) ? parsed : [parsed]
-    //     } catch (err) {
-    //       console.error('JSON parse error:', err)
-    //       return []
-    //     }
-    //   }
-    //   const dataParse = parseChatMsg(chat.msg)
-    //   // ✅ FIX: Kiểm tra array trước khi dùng slice
-    //   if (!Array.isArray(dataParse) || dataParse.length === 0) {
-    //     return (
-    //       <div>
-    //         <span>Đã có thay đổi trong nhóm</span>
-    //       </div>
-    //     )
-    //   }
-    //   const displayedItems = dataParse.slice(0, 2)
-    //   const extraCount = Math.max(0, dataParse.length - displayedItems.length)
-    //   return (
-    //     <>
-    //       <div>
-    //         {displayedItems.map((item: any, index: any) => (
-    //           <strong key={index}>
-    //             {item.name}
-    //             {index < displayedItems.length - 1 && ", "}
-    //           </strong>
-    //         ))}
-    //         {dataParse.length > 3 && (
-    //           <strong>
-    //             <span style={{ fontWeight: "normal" }}>{" và "}</span>{" "}
-    //             {extraCount} người khác
-    //           </strong>
-    //         )}
-    //         {" được "}
-    //         {chat?.createdBy?.id === dataProfile?.id ? (
-    //           <span>bạn </span>
-    //         ) : (
-    //           <strong style={{ marginRight: "5px" }}>{chat?.createdByName}</strong>
-    //         )}
-    //         thêm vào nhóm
-    //       </div>
-    //     </>
-    //   )
-    // }, [dataProfile])
-    // const renderChatImage = useCallback((chat: any) => {
-    //   const files = chat.path
-    //   if (!files || !Array.isArray(files) || files.length === 0) {
-    //     return null
-    //   }
-    //   // Ảnh đơn lẻ
-    //   if (files.length === 1) {
-    //     const imagePath = files[0]?.path?.trim()
-    //     if (!imagePath) { return null }
-    //     return (
-    //       <>
-    //         <div className="image-container" style={{ maxWidth: "100%", position: "relative" }}>
-    //           <img
-    //             src={`${CDN_URL_VIEW}/${imagePath}`}
-    //             alt={`Chat image ${chat.id + 1}`}
-    //             data-file-index={chat.id}
-    //             style={{
-    //               maxWidth: "100%",
-    //               maxHeight: 400,
-    //               borderRadius: 8,
-    //               cursor: "pointer"
-    //             }}
-    //             onClick={() => handlePreview(files[0])}
-    //           />
-    //           {/* HD Badge */}
-    //           <div
-    //             style={{
-    //               position: "absolute",
-    //               top: 6,
-    //               left: 6,
-    //               backgroundColor: "rgba(0, 0, 0, 0.6)",
-    //               color: "white",
-    //               padding: "2px 6px",
-    //               borderRadius: 4,
-    //               fontSize: "10px",
-    //               fontWeight: "bold"
-    //             }}
-    //           >
-    //             HD
-    //           </div>
-    //         </div>
-    //         <div className="px-1 py-75">{moment(chat.time).format("HH:mm")}</div>
-    //       </>
-    //     )
-    //   }
-    //   // Nhiều ảnh - hiển thị dạng grid 2 cột, tối đa 6 ảnh
-    //   const imagesToShow = files.slice(0, 6)
-    //   const remainingCount = files.length - 6
-    //   return (
-    //     <>
-    //       <div
-    //         className="images-grid-container"
-    //         style={{
-    //           display: "flex",
-    //           flexWrap: "wrap",
-    //           maxWidth: "600px",
-    //           gap: "4px"
-    //         }}
-    //       >
-    //         {imagesToShow.map((file: any, index: number) => {
-    //           const imagePath = file?.path?.trim()
-    //           if (!imagePath) { return null }
-    //           const imageUrl = `${CDN_URL_VIEW}/${imagePath}`
-    //           const isLastImage = index === 5 && remainingCount > 0
-    //           // ✅ THÊM: Kiểm tra ảnh cuối khi số lượng lẻ
-    //           const isOddCount = imagesToShow.length % 2 !== 0
-    //           const isLastItem = index === imagesToShow.length - 1
-    //           const isFullWidth = isOddCount && isLastItem && !isLastImage
-    //           return (
-    //             <div
-    //               key={`image-${chat.id}-${index}`}
-    //               style={{
-    //                 width: isFullWidth ? "100%" : "calc(50% - 2px)",
-    //                 height: "140px",
-    //                 position: "relative",
-    //                 overflow: "hidden",
-    //                 borderRadius: 8,
-    //                 border: "1px solid #e0e0e0"
-    //               }}
-    //             >
-    //               <img
-    //                 src={imageUrl}
-    //                 alt={`Chat image ${index + 1}`}
-    //                 style={{
-    //                   width: "100%",
-    //                   height: "100%",
-    //                   objectFit: "cover",
-    //                   borderRadius: 8,
-    //                   display: "block",
-    //                   cursor: "pointer"
-    //                 }}
-    //                 onClick={() => handlePreview(file)}
-    //               />
-    //               {/* HD Badge */}
-    //               <div
-    //                 style={{
-    //                   position: "absolute",
-    //                   top: 6,
-    //                   left: 6,
-    //                   backgroundColor: "rgba(0, 0, 0, 0.6)",
-    //                   color: "white",
-    //                   padding: "2px 6px",
-    //                   borderRadius: 4,
-    //                   fontSize: "10px",
-    //                   fontWeight: "bold",
-    //                   zIndex: 1
-    //                 }}
-    //               >
-    //                 HD
-    //               </div>
-    //               {/* Overlay cho ảnh cuối nếu có nhiều hơn 6 ảnh */}
-    //               {isLastImage && (
-    //                 <div
-    //                   style={{
-    //                     position: "absolute",
-    //                     top: 0,
-    //                     left: 0,
-    //                     right: 0,
-    //                     bottom: 0,
-    //                     backgroundColor: "rgba(0, 0, 0, 0.6)",
-    //                     display: "flex",
-    //                     alignItems: "center",
-    //                     justifyContent: "center",
-    //                     color: "white",
-    //                     fontSize: "20px",
-    //                     fontWeight: "bold",
-    //                     borderRadius: 8,
-    //                     cursor: "pointer"
-    //                   }}
-    //                   onClick={() => handlePreview(file)}
-    //                 >
-    //                   +{remainingCount}
-    //                 </div>
-    //               )}
-    //             </div>
-    //           )
-    //         })}
-    //       </div>
-    //       <div className="px-1 py-75">{moment(chat.time).format("HH:mm")}</div>
-    //     </>
-    //   )
-    // }, [handlePreview])
-    // const renderChatFile = useCallback((chat: any) => {
-    //   const files = chat?.path
-    //   return (
-    //     <>
-    //       {files?.map((file: any, index: number) => {
-    //         return (
-    //           <div key={index}>
-    //             <div className="d-flex p-50">
-    //               <div className="me-1" onClick={() => handlePreview(file)}>
-    //                 {/*<IconFileType fileType={file?.type} fontSize={50} />*/}
-    //                 <IconFileTypeColor fileType={file?.type} width={35} />
-    //               </div>
-    //               <div>
-    //                 <p className="file-name-chat">{file.name}</p>
-    //                 <p>{formatBytes({ size: file.size })}</p>
-    //               </div>
-    //             </div>
-    //             {index + 1 === files.length && (
-    //               <div className="px-1 pb-75">
-    //                 {moment(chat.time).format("HH:mm")}
-    //               </div>
-    //             )}
-    //           </div>
-    //         )
-    //       })}
-    //     </>
-    //   )
-    // }, [handlePreview])
+    const getLinkPreviewData = (urlString) => {
+        try {
+            const hasProtocol = /^https?:\/\//i.test(urlString);
+            const href = hasProtocol ? urlString : `https://${urlString}`;
+            const url = new URL(href);
+            const displayUrl = urlString.length > 80 ? `${urlString.slice(0, 77)}...` : urlString;
+            return {
+                href,
+                displayUrl,
+                host: url.host
+            };
+        }
+        catch (e) {
+            return {
+                href: urlString,
+                displayUrl: urlString,
+                host: ''
+            };
+        }
+    };
+    const renderLinkPreview = (urlString) => {
+        const { href, displayUrl, host } = getLinkPreviewData(urlString);
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("a", { href: href, target: "_blank", rel: "noreferrer", style: {
+                    textDecoration: 'none',
+                    color: 'inherit'
+                }, children: jsxRuntime.jsxs("div", { style: {
+                        marginTop: 4,
+                        marginBottom: 4,
+                        padding: '8px 10px',
+                        borderRadius: 8,
+                        backgroundColor: '#eef5ff',
+                        border: '1px solid #d3e2ff',
+                        maxWidth: 420
+                    }, children: [jsxRuntime.jsx("div", { style: {
+                                fontSize: 14,
+                                fontWeight: 500,
+                                color: '#1d4f91',
+                                wordBreak: 'break-word'
+                            }, children: displayUrl }), host && (jsxRuntime.jsx("div", { style: {
+                                marginTop: 4,
+                                fontSize: 12,
+                                color: '#6f6b7d'
+                            }, children: host }))] }) }) }));
+    };
+    React.useCallback((chat) => {
+        const msg = JSON.parse(chat?.msg);
+        if (chat?.createdById === dataProfile?.id) {
+            return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { style: { fontWeight: "bold", marginRight: "5px" }, children: msg?.name }), jsxRuntime.jsx("span", { children: "\u0111\u01B0\u1EE3c b\u1EA1n xo\u00E1 kh\u1ECFi nh\u00F3m" })] }) }));
+        }
+        if (chat?.createdById === msg?.id) {
+            return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { style: { fontWeight: "bold", marginRight: "5px" }, children: msg?.name }), jsxRuntime.jsx("span", { children: "\u0111\u00E3 r\u1EDDi kh\u1ECFi nh\u00F3m" })] }) }));
+        }
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { style: { fontWeight: "bold", marginRight: "5px" }, children: msg?.name }), jsxRuntime.jsxs("span", { children: ["\u0111\u01B0\u1EE3c ", jsxRuntime.jsx("span", { style: { fontWeight: "bold", marginRight: "5px" }, children: chat?.createdBy?.name }), " xo\u00E1 kh\u1ECFi nh\u00F3m"] })] }) }));
+    }, [dataProfile]);
+    React.useCallback((chat) => {
+        const parseChatMsg = (msg) => {
+            if (!msg) {
+                return [];
+            }
+            try {
+                const parsed = typeof msg === 'string' ? JSON.parse(msg) : msg;
+                return Array.isArray(parsed) ? parsed : [parsed];
+            }
+            catch (err) {
+                console.error('JSON parse error:', err);
+                return [];
+            }
+        };
+        const dataParse = parseChatMsg(chat.msg);
+        // ✅ FIX: Kiểm tra array trước khi dùng slice
+        if (!Array.isArray(dataParse) || dataParse.length === 0) {
+            return (jsxRuntime.jsx("div", { children: jsxRuntime.jsx("span", { children: "\u0110\u00E3 c\u00F3 thay \u0111\u1ED5i trong nh\u00F3m" }) }));
+        }
+        const displayedItems = dataParse.slice(0, 2);
+        const extraCount = Math.max(0, dataParse.length - displayedItems.length);
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { children: [displayedItems.map((item, index) => (jsxRuntime.jsxs("strong", { children: [item.name, index < displayedItems.length - 1 && ", "] }, index))), dataParse.length > 3 && (jsxRuntime.jsxs("strong", { children: [jsxRuntime.jsx("span", { style: { fontWeight: "normal" }, children: " và " }), " ", extraCount, " ng\u01B0\u1EDDi kh\u00E1c"] })), " được ", chat?.createdBy?.id === dataProfile?.id ? (jsxRuntime.jsx("span", { children: "b\u1EA1n " })) : (jsxRuntime.jsx("strong", { style: { marginRight: "5px" }, children: chat?.createdByName })), "th\u00EAm v\u00E0o nh\u00F3m"] }) }));
+    }, [dataProfile]);
+    React.useCallback((chat) => {
+        const files = chat.path;
+        if (!files || !Array.isArray(files) || files.length === 0) {
+            return null;
+        }
+        // Ảnh đơn lẻ
+        if (files.length === 1) {
+            const imagePath = files[0]?.path?.trim();
+            if (!imagePath) {
+                return null;
+            }
+            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "image-container", style: { maxWidth: "100%", position: "relative" }, children: [jsxRuntime.jsx("img", { src: `${CDN_URL_VIEW}/${imagePath}`, alt: `Chat image ${chat.id + 1}`, "data-file-index": chat.id, style: {
+                                    maxWidth: "100%",
+                                    maxHeight: 400,
+                                    borderRadius: 8,
+                                    cursor: "pointer"
+                                }, onClick: () => handlePreview(files[0]) }), jsxRuntime.jsx("div", { style: {
+                                    position: "absolute",
+                                    top: 6,
+                                    left: 6,
+                                    backgroundColor: "rgba(0, 0, 0, 0.6)",
+                                    color: "white",
+                                    padding: "2px 6px",
+                                    borderRadius: 4,
+                                    fontSize: "10px",
+                                    fontWeight: "bold"
+                                }, children: "HD" })] }), jsxRuntime.jsx("div", { className: "px-1 py-75", children: moment(chat.time).format("HH:mm") })] }));
+        }
+        // Nhiều ảnh - hiển thị dạng grid 2 cột, tối đa 6 ảnh
+        const imagesToShow = files.slice(0, 6);
+        const remainingCount = files.length - 6;
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "images-grid-container", style: {
+                        display: "flex",
+                        flexWrap: "wrap",
+                        maxWidth: "600px",
+                        gap: "4px"
+                    }, children: imagesToShow.map((file, index) => {
+                        const imagePath = file?.path?.trim();
+                        if (!imagePath) {
+                            return null;
+                        }
+                        const imageUrl = `${CDN_URL_VIEW}/${imagePath}`;
+                        const isLastImage = index === 5 && remainingCount > 0;
+                        // ✅ THÊM: Kiểm tra ảnh cuối khi số lượng lẻ
+                        const isOddCount = imagesToShow.length % 2 !== 0;
+                        const isLastItem = index === imagesToShow.length - 1;
+                        const isFullWidth = isOddCount && isLastItem && !isLastImage;
+                        return (jsxRuntime.jsxs("div", { style: {
+                                width: isFullWidth ? "100%" : "calc(50% - 2px)",
+                                height: "140px",
+                                position: "relative",
+                                overflow: "hidden",
+                                borderRadius: 8,
+                                border: "1px solid #e0e0e0"
+                            }, children: [jsxRuntime.jsx("img", { src: imageUrl, alt: `Chat image ${index + 1}`, style: {
+                                        width: "100%",
+                                        height: "100%",
+                                        objectFit: "cover",
+                                        borderRadius: 8,
+                                        display: "block",
+                                        cursor: "pointer"
+                                    }, onClick: () => handlePreview(file) }), jsxRuntime.jsx("div", { style: {
+                                        position: "absolute",
+                                        top: 6,
+                                        left: 6,
+                                        backgroundColor: "rgba(0, 0, 0, 0.6)",
+                                        color: "white",
+                                        padding: "2px 6px",
+                                        borderRadius: 4,
+                                        fontSize: "10px",
+                                        fontWeight: "bold",
+                                        zIndex: 1
+                                    }, children: "HD" }), isLastImage && (jsxRuntime.jsxs("div", { style: {
+                                        position: "absolute",
+                                        top: 0,
+                                        left: 0,
+                                        right: 0,
+                                        bottom: 0,
+                                        backgroundColor: "rgba(0, 0, 0, 0.6)",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        color: "white",
+                                        fontSize: "20px",
+                                        fontWeight: "bold",
+                                        borderRadius: 8,
+                                        cursor: "pointer"
+                                    }, onClick: () => handlePreview(file), children: ["+", remainingCount] }))] }, `image-${chat.id}-${index}`));
+                    }) }), jsxRuntime.jsx("div", { className: "px-1 py-75", children: moment(chat.time).format("HH:mm") })] }));
+    }, [handlePreview]);
+    React.useCallback((chat) => {
+        const files = chat?.path;
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: files?.map((file, index) => {
+                return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "d-flex p-50", children: [jsxRuntime.jsx("div", { className: "me-1", onClick: () => handlePreview(file), children: jsxRuntime.jsx(IconFileTypeColor, { fileType: file?.type, width: 35 }) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "file-name-chat", children: file.name }), jsxRuntime.jsx("p", { children: formatBytes({ size: file.size }) })] })] }), index + 1 === files.length && (jsxRuntime.jsx("div", { className: "px-1 pb-75", children: moment(chat.time).format("HH:mm") }))] }, index));
+            }) }));
+    }, [handlePreview]);
     // const renderTaskApplication = useCallback((chat: any) => {
     //   const safeParse = (str: any) => {
     //     if (!str) { return {} }