@esvndev/es-react-template-chat 0.0.92 → 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",
@@ -72503,176 +72690,102 @@ const ChatLog = (props) => {
         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]);
-    // 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])
+    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 {} }