@esvndev/es-react-template-chat 0.0.87 → 0.0.89

package/dist/index.mjs

@@ -17,9 +17,9 @@ import { isNullOrUndefined as isNullOrUndefined$2 } from '@src/utility/hooks/isN
 import avatarDefault from '@core/assets/images/avatars/avatar-blank.png';
 import '@draft-js-plugins/mention/lib/plugin.css';
 import '@draft-js-plugins/emoji/lib/plugin.css';
+import { useDispatch } from 'react-redux';
 import { useAppDispatch as useAppDispatch$1, useAppSelector as useAppSelector$1 } from '@store/configureStore';
 import { useLocation } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
 
 var instances = 'ej2_instances';
 var uid = 0;
@@ -27368,6 +27368,16 @@ const encodeUUID = (uuid) => {
         return uuid;
     }
 };
+const isValidUrl = (string) => {
+    try {
+        // eslint-disable-next-line no-new
+        new URL(string);
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+};
 // ** Checks if the passed date is today
 const isToday = (value) => {
     const today = new Date();
@@ -72079,11 +72089,11 @@ const ChatLog = (props) => {
     useRef(null);
     const containerChatRef = useRef(null);
     const { connectHub, dataInfo, dataProfile, handleUser, handleUserSidebarRight, handleSidebar, handleSidebarRight, userSidebarLeft, dataHistory, chatGetType, approveUpdateStatus, handleModalAdministrative, setDataItem, handleModalAddUserGroup, handleModalGroup, typeOpenModalAdd, setTypeOpenModalAdd, unpinMessage, getPinnedMessages } = props;
-    dataHistory?.find((dt) => dt.id === active);
+    const groupChatUsers = dataHistory?.find((dt) => dt.id === active);
     //const dataInfoAvatar = dataInfo && dataInfo.avatar ? dataInfo.avatar : DEFAULT_AVATAR
     useState([]);
     useState(false);
-    useState(false);
+    const [openModalPreview, setOpenModalPreview] = useState(false);
     useState(false);
     useState(false);
     useState(false);
@@ -72094,7 +72104,7 @@ const ChatLog = (props) => {
     useState({ x: 0, y: 0 });
     useState(undefined);
     useState(undefined);
-    useState(null);
+    const [selectedMessage, setSelectedMessage] = useState(null);
     useState(false);
     useState(true);
     useRef(0);
@@ -72105,184 +72115,41 @@ const ChatLog = (props) => {
     useState(false);
     useState(new Set());
     useState(true);
-    // // Load initial messages
-    // useEffect(() => {
-    //   if (!checkScroll) {
-    //     scrollToBottom()
-    //   }
-    // }, [messageByGroup, checkScroll])
-    // const mentionItems = useMemo(() => {
-    //   if (!groupChatUsers) { return [] }
-    //   const users = Array.isArray(groupChatUsers.users) ? groupChatUsers.users : []
-    //   const mappedUsers = users.map((user: any) => {
-    //     const rawAvatar = user.avatar
-    //     let avatar = DEFAULT_AVATAR
-    //     if (rawAvatar) {
-    //       avatar = isValidUrl(rawAvatar) ? rawAvatar : `${CDN_URL_VIEW}/${rawAvatar}`
-    //     }
-    //     return {
-    //       ...user,
-    //       avatar
-    //     }
-    //   })
-    //   return [{ id: "all", name: "All" }, ...mappedUsers]
-    // }, [groupChatUsers])
-    // const toggleModalPreview = () => {
-    //   setOpenModalPreview(!openModalPreview)
-    // }
-    // const handlePreview = useCallback((mes: any) => {
-    //   setSelectedMessage(mes)
-    //   setOpenModalPreview(true)
-    // }, [])
-    // const [isFetching, setIsFetching] = useState(false)
-    // const dispatch = useDispatch()
-    // const handleStartConversation = () => {
-    //   if (
-    //     !Object.keys({}).length &&
-    //     !userSidebarLeft &&
-    //     window.innerWidth < 992
-    //   ) {
-    //     handleSidebar()
-    //   }
-    // }
-    // const uploadGroup = async (files: File[], type: 'image' | 'file') => {
-    //   if (files.length === 0) { return }
-    //   const batchId = newGuid()
-    //   const errors: Array<{ file: File; error: any }> = []
-    //   // Upload và gửi từng file một
-    //   for (const file of files) {
-    //     try {
-    //       const result = await uploadWithRetry(file)
-    //       if (result.success && chatRoomId) {
-    //         const infoFiles = result.data?.infoFiles || []
-    //         const items = type === 'image' ? infoFiles.map((x: any) => ({ ...x, batchId, createdDate: new Date().toISOString() })) : infoFiles
-    //         // Gửi message ngay sau khi upload thành công
-    //         connectHub(chatRoomId, {
-    //           sendTo: dataInfo.id,
-    //           content: '',
-    //           type,
-    //           path: JSON.stringify(items),
-    //           typeChat
-    //         })
-    //       } else {
-    //         errors.push({ file, error: result.error })
-    //       }
-    //     } catch (error) {
-    //       errors.push({ file, error })
-    //     }
-    //   }
-    //   // Thông báo lỗi nếu có
-    //   if (errors.length > 0) {
-    //     notificationError(`${errors.length}/${files.length} ${type === 'image' ? 'ảnh' : 'file'} upload thất bại`)
-    //   }
-    // }
-    // const dataURLToFile = (dataUrl: string, fileName: string) => {
-    //   const [header, data] = dataUrl.split(',')
-    //   const mime = header.match(/data:(.*?);/)?.[1] || 'image/png'
-    //   const binary = atob(data)
-    //   const len = binary.length
-    //   const u8 = new Uint8Array(len)
-    //   for (let i = 0; i < len; i++) { u8[i] = binary.charCodeAt(i) }
-    //   return new File([u8], fileName, { type: mime })
-    // }
-    // // ** Extract tagUserIds from editor mentions
-    // const extractTagUserIds = (): string[] => {
-    //   const tagUserIds: string[] = []
-    //   let hasAllMention = false
-    //   editor.getEditorState().read(() => {
-    //     const root = $getRoot()
-    //     const nodes = root.getAllTextNodes()
-    //     nodes.forEach((node) => {
-    //       if ($isMentionNode(node)) {
-    //         const userId = (node as any).__userId
-    //         if (userId === 'all') {
-    //           hasAllMention = true
-    //         } else if (userId && !tagUserIds.includes(userId)) {
-    //           tagUserIds.push(userId)
-    //         }
-    //       }
-    //     })
-    //   })
-    //   // Nếu có @All, lấy tất cả userId trong nhóm
-    //   if (hasAllMention && groupChatUsers?.users) {
-    //     const allUserIds = groupChatUsers.users
-    //       .map((user: any) => user.id)
-    //       .filter((id: string) => id !== dataProfile?.id) // Loại bỏ chính mình
-    //     return allUserIds
-    //   }
-    //   return tagUserIds
-    // }
-    // // ** Sends New Msg
-    // const handleSendMsg = (message: any) => {
-    //   if (imgCopy.length > 0) {
-    //     const imageFiles: File[] = []
-    //     const otherFiles: File[] = []
-    //     imgCopy.forEach((item: any, idx: number) => {
-    //       const data = item?.data || item
-    //       if (typeof data === 'string' && data.startsWith('data:image')) {
-    //         imageFiles.push(dataURLToFile(data, item.name || `pasted_${Date.now()}_${idx}.png`))
-    //       } else if (data instanceof File) {
-    //         if (data.type?.startsWith('image')) {
-    //           imageFiles.push(data)
-    //         } else {
-    //           otherFiles.push(data)
-    //         }
-    //       }
-    //     })
-    //     // Gửi ảnh trước rồi file
-    //     uploadGroup(imageFiles, 'image')
-    //     uploadGroup(otherFiles, 'file')
-    //   }
-    //   if (message.trim().length) {
-    //     if (typingTimeoutRef.current) {
-    //       clearTimeout(typingTimeoutRef.current)
-    //     }
-    //     isTypingRef.current = false
-    //     if (connection && chatRoomId) {
-    //       connection.invoke('StopTyping', chatRoomId).catch(console.error)
-    //     }
-    //     const tagUserIds = extractTagUserIds()
-    //     const id = typeChat === 'CHAT' ? chatRoomId : contactId
-    //     if (id) {
-    //       connectHub(id, {
-    //         sendTo: dataInfo.id,
-    //         content: message.trim(),
-    //         replyContent: replyMessage?.currentMessage ? JSON.stringify(replyMessage.currentMessage) : null,
-    //         path: null,
-    //         type: 'text',
-    //         typeChat,
-    //         tagUserIds
-    //       })
-    //     }
-    //   }
-    //   setImgCopy([])
-    // }
-    // const uploadWithRetry = async (file: File, maxRetries = 2) => {
-    //   let lastError
-    //   for (let attempt = 0; attempt <= maxRetries; attempt++) {
-    //     try {
-    //       const formDataFile = new FormData()
-    //       formDataFile.append('files', file, file.name)
-    //       const rs = await uploadMultiFileApi(formDataFile).unwrap()
-    //       return { success: true, data: rs }
-    //     } catch (error: any) {
-    //       lastError = error
-    //       // Không retry nếu là lỗi validation từ server
-    //       if (error?.status === 400 || error?.status === 413) {
-    //         break
-    //       }
-    //       if (attempt < maxRetries) {
-    //         // Exponential backoff: 1s, 2s, 4s...
-    //         await new Promise(resolve => setTimeout(resolve, 1000 * Math.pow(2, attempt))
-    //         )
-    //       }
-    //     }
-    //   }
-    //   return {
-    //     success: false,
-    //     error: lastError?.message || 'Upload thất bại'
-    //   }
-    // }
+    const scrollToBottom = () => {
+        const messagesEndEle = document.getElementById('messagesEnd');
+        messagesEndEle?.scrollIntoView({ block: 'end', behavior: "instant" });
+    };
+    // Load initial messages
+    useEffect(() => {
+        if (!checkScroll) {
+            scrollToBottom();
+        }
+    }, [messageByGroup, checkScroll]);
+    useMemo(() => {
+        if (!groupChatUsers) {
+            return [];
+        }
+        const users = Array.isArray(groupChatUsers.users) ? groupChatUsers.users : [];
+        const mappedUsers = users.map((user) => {
+            const rawAvatar = user.avatar;
+            let avatar = DEFAULT_AVATAR;
+            if (rawAvatar) {
+                avatar = isValidUrl(rawAvatar) ? rawAvatar : `${CDN_URL_VIEW}/${rawAvatar}`;
+            }
+            return {
+                ...user,
+                avatar
+            };
+        });
+        return [{ id: "all", name: "All" }, ...mappedUsers];
+    }, [groupChatUsers]);
+    useCallback((mes) => {
+        setSelectedMessage(mes);
+        setOpenModalPreview(true);
+    }, []);
+    useState(false);
+    useDispatch();
+    //từ đây
     // const sendFile = async (event: any) => {
     //   if (event.target.files && event.target.files[0]) {
     //     const filesToUpload: File[] = Array.from(event.target.files)