@esvndev/es-react-template-chat 0.0.88 → 0.0.90

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;
@@ -72041,7 +72041,7 @@ const ChatLog = (props) => {
     const { typeChat, contactId, chatRoomId, active, messageByGroup, pinnedMessages, setScroll, checkScroll, pinMessageChatRoom, deleteMessageApi, recallMessageApi, get_message_by_group_cursor_api, getPinMessageChatRoomApi, deletePinMessage, 
     //updateGroupTagApi,
     createReminderApi, senMessageApi, typingUsers } = useChat();
-    useAppSelector((state) => state.hubNotification);
+    const { connection } = useAppSelector((state) => state.hubNotification);
     const [dynamicMenuItems, setDynamicMenuItems] = useState([]);
     useEffect(() => {
         const fetchFormConfig = async () => {
@@ -72082,44 +72082,73 @@ const ChatLog = (props) => {
     ], [dynamicMenuItems]);
     // Menu items cho Hành chính (chỉ administrative)
     useMemo(() => ADMINISTRATIVE_ITEMS, []);
-    useRef(false);
-    useRef(null);
-    useRef(null);
+    const isTypingRef = useRef(false);
+    const typingTimeoutRef = useRef(null);
     useRef(null);
     useRef(null);
+    const inputContainer = 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;
     const groupChatUsers = dataHistory?.find((dt) => dt.id === active);
     //const dataInfoAvatar = dataInfo && dataInfo.avatar ? dataInfo.avatar : DEFAULT_AVATAR
-    useState([]);
-    useState(false);
-    useState(false);
+    const [imgCopy, setImgCopy] = useState([]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [openModalPreview, setOpenModalPreview] = useState(false);
     useState(false);
     useState(false);
     useState(false);
     useState('');
     useState(null);
-    useState(null);
-    useState(null);
-    useState({ x: 0, y: 0 });
-    useState(undefined);
-    useState(undefined);
-    useState(null);
-    useState(false);
-    useState(true);
-    useRef(0);
+    const [currentMessage, setCurrentMessage] = useState(null);
+    const [replyMessage, setReplyMessage] = useState(null);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [listContextShow, setListContextShow] = useState(undefined);
+    const [listContextHide, setListContextHide] = useState(undefined);
+    const [selectedMessage, setSelectedMessage] = useState(null);
+    const [isMultiLine, setIsMultiLine] = useState(false);
+    const [isAtBottom, setIsAtBottom] = useState(true);
+    const prevListLength = useRef(0);
     useState(0);
     useState(true);
     useState(new Set());
-    useState(null);
+    const [clickedImageFile, setClickedImageFile] = useState(null);
     useState(false);
     useState(new Set());
+    const BASE_CONTEXT_ITEMS = [
+        "reply", "share", "pin", "bookmark",
+        "selectMultiMessage", "detail", "other", "recall", "delete"
+    ];
+    const CONTEXT_CONFIG = {
+        selection: {
+            show: ["copyRangeText", ...BASE_CONTEXT_ITEMS, "save"],
+            hide: ["copyText", "save", "copyImage"]
+        },
+        image: {
+            show: ["copyImage", ...BASE_CONTEXT_ITEMS, "save"],
+            hide: ["copyText", "copyRangeText"]
+        },
+        file: {
+            show: [...BASE_CONTEXT_ITEMS, "save"],
+            hide: ["copyText", "copyRangeText", "copyImage"]
+        },
+        text: {
+            show: ["copyText", ...BASE_CONTEXT_ITEMS],
+            hide: ["copyRangeText", "save", "copyImage"]
+        },
+        voucher: {
+            show: ["copyText", ...BASE_CONTEXT_ITEMS],
+            hide: ["copyRangeText", "save", "copyImage"]
+        },
+        default: {
+            show: ["copyText", ...BASE_CONTEXT_ITEMS],
+            hide: ["copyRangeText", "save", "copyImage"]
+        }
+    };
     useState(true);
     const scrollToBottom = () => {
         const messagesEndEle = document.getElementById('messagesEnd');
         messagesEndEle?.scrollIntoView({ block: 'end', behavior: "instant" });
     };
-    //từ đây
     // Load initial messages
     useEffect(() => {
         if (!checkScroll) {
@@ -72144,340 +72173,139 @@ const ChatLog = (props) => {
         });
         return [{ id: "all", name: "All" }, ...mappedUsers];
     }, [groupChatUsers]);
-    // 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 sendFile = async (event: any) => {
-    //   if (event.target.files && event.target.files[0]) {
-    //     const filesToUpload: File[] = Array.from(event.target.files)
-    //     const errors: Array<{ file: File, error: any }> = []
-    //     for (const file of filesToUpload) {
-    //       const result = await uploadWithRetry(file)
-    //       if (result.success && chatRoomId) {
-    //         connectHub(chatRoomId, {
-    //           sendTo: dataInfo.id,
-    //           content: '',
-    //           type: 'file',
-    //           path: JSON.stringify(result.data?.infoFiles),
-    //           typeChat
-    //         })
-    //       } else {
-    //         errors.push({ file, error: result.error })
-    //       }
-    //     }
-    //     if (errors.length > 0) {
-    //       notificationError(`${errors.length} file upload thất bại`)
-    //     }
-    //     event.target.value = ''
-    //   }
-    // }
-    // const sendImage = async (event: any) => {
-    //   if (event.target.files && event.target.files[0]) {
-    //     const filesToUpload: File[] = Array.from(event.target.files)
-    //     const errors: Array<{ file: File, error: any }> = []
-    //     const batchId = newGuid()
-    //     for (const file of filesToUpload) {
-    //       const result = await uploadWithRetry(file)
-    //       const item = result.data?.infoFiles?.map((x: any) => ({ ...x, batchId, createdDate: new Date().toISOString() })) || []
-    //       if (result.success && chatRoomId && result?.data?.status) {
-    //         connectHub(chatRoomId, {
-    //           sendTo: dataInfo.id,
-    //           content: '',
-    //           type: 'image',
-    //           path: JSON.stringify(item),
-    //           typeChat
-    //         })
-    //       } else {
-    //         errors.push({ file, error: result.error })
-    //       }
-    //     }
-    //     if (errors.length > 0) {
-    //       notificationError(`${errors.length} ảnh upload thất bại`)
-    //     }
-    //     event.target.value = ''
-    //   }
-    // }
-    // const handleRemoveImage = useCallback((idx: number) => {
-    //   const newArr = [...imgCopy]
-    //   newArr.splice(idx, 1)
-    //   setImgCopy(newArr)
-    // }, [imgCopy])
-    // const onContextMenu = useCallback((e: any, chatMessage: any) => {
-    //   const selection: any = window.document.getSelection()
-    //   setIsOpen(true)
-    //   setPosition({ x: e.clientX, y: e.clientY })
-    //   if (e.target) {
-    //     setCurrentMessage(chatMessage)
-    //   }
-    //   // Detect ảnh được click từ data attribute
-    //   const fileIndex = e.target?.dataset?.fileIndex
-    //   if (fileIndex !== undefined && chatMessage?.path) {
-    //     setClickedImageFile(chatMessage.path[parseInt(fileIndex)])
-    //   } else {
-    //     setClickedImageFile(null)
-    //   }
-    //   e.preventDefault()
-    //   const contextType = selection.toString() ? 'selection' : chatMessage?.type ? chatMessage.type : 'default'
-    //   const config = CONTEXT_CONFIG[contextType]
-    //   setListContextShow({ list: config.show, type: "SHOW" })
-    //   setListContextHide({ list: config.hide, type: "HIDE" })
-    // }, [])
-    // const clearReply = () => {
-    //   setReplyMessage(null)
-    // }
-    // const handleTypingStart = () => {
-    //   if (!isTypingRef.current && connection && chatRoomId) {
-    //     connection.invoke('StartTyping', chatRoomId).catch(console.error)
-    //     isTypingRef.current = true
-    //   }
-    // }
-    // const handleTypingStop = () => {
-    //   if (typingTimeoutRef.current) { clearTimeout(typingTimeoutRef.current) }
-    //   typingTimeoutRef.current = setTimeout(() => {
-    //     if (isTypingRef.current && connection && chatRoomId) {
-    //       connection.invoke('StopTyping', chatRoomId).catch(console.error)
-    //       isTypingRef.current = false
-    //     }
-    //   }, 2000)
-    // }
-    // const handleChange = useCallback(
-    //   (editorState: EditorState) => {
-    //     if (
-    //       inputContainer &&
-    //       inputContainer.current &&
-    //       inputContainer.current.clientHeight > 50
-    //     ) {
-    //       setIsMultiLine(true)
-    //     } else {
-    //       setIsMultiLine(false)
-    //     }
-    //     editorState.read(() => {
-    //       handleTypingStart()
-    //       handleTypingStop()
-    //     })
-    //   },
-    //   [inputContainer, connection, chatRoomId]
-    // )
-    // const onEnter = (val: any) => {
-    //   handleSendMsg(val)
-    //   clearReply()
-    //   setReplyMessage(null)
-    // }
-    // useEffect(() => {
-    //   if (active) {
-    //     setReplyMessage(null)
-    //     setImgCopy([])
-    //     setIsAtBottom(true)
-    //     prevListLength.current = 0
-    //   }
-    // }, [
-    //   active,
-    //   dataInfo
-    //   //chatRoomId,
-    //   //chatGetType
-    // ])
-    // // Chuyển phòng thì load lại message + pinned messages
-    // useEffect(() => {
-    //   if (!chatRoomId && handleSidebar) { return }
-    //   chatGetType(chatRoomId, undefined, "", "", undefined, undefined, 0, 0)
-    //   if (chatRoomId) {
-    //     getPinMessageChatRoomApi(chatRoomId)
-    //   }
-    // }, [chatRoomId])
-    // const handleUnpinMessage = useCallback(async (message: any) => {
-    //   const pinId = message?.pinId || message?.id
-    //   if (!pinId) { return }
-    //   await deletePinMessage(pinId)
-    // }, [deletePinMessage, chatRoomId])
-    // const handleViewPinnedMessage = useCallback((message: any) => {
-    //   if (message?.id) {
-    //     //setViewingPinnedMessage(message.id)
-    //     // Tìm message element
-    //     const element = document.getElementById(`msg-${message.id}`)
-    //     const chatContainer = document.getElementById('scrollableDivChat')
-    //     if (element && chatContainer) {
-    //       // Lấy vị trí của element và container
-    //       const elementRect = element.getBoundingClientRect()
-    //       const containerRect = chatContainer.getBoundingClientRect()
-    //       // Tính toán scroll position để đưa element vào giữa container
-    //       const scrollTop = chatContainer.scrollTop
-    //       const offset = elementRect.top - containerRect.top - (containerRect.height / 2) + (elementRect.height / 2)
-    //       // Scroll trong container, không scroll toàn page
-    //       chatContainer.scrollTo({
-    //         top: scrollTop + offset,
-    //         behavior: 'smooth'
-    //       })
-    //       // Highlight message
-    //       const originalBg = element.style.backgroundColor
-    //       const originalZIndex = element.style.zIndex
-    //       element.style.backgroundColor = '#fff3cd'
-    //       element.style.zIndex = '1000'
-    //       element.style.position = 'relative'
-    //       element.style.transition = 'background-color 0.3s'
-    //       // Auto close sau 500ms
-    //       setTimeout(() => {
-    //         element.style.backgroundColor = originalBg || ''
-    //         element.style.zIndex = originalZIndex || ''
-    //         //setViewingPinnedMessage(null)
-    //       }, 500)
-    //     } else {
-    //       console.log('Message not found in current view, may need to load more messages')
-    //       setTimeout(() => {
-    //         //setViewingPinnedMessage(null)
-    //       }, 2000)
-    //     }
-    //   }
-    // }, [])
+    useCallback((mes) => {
+        setSelectedMessage(mes);
+        setOpenModalPreview(true);
+    }, []);
+    useState(false);
+    useDispatch();
+    useCallback((idx) => {
+        const newArr = [...imgCopy];
+        newArr.splice(idx, 1);
+        setImgCopy(newArr);
+    }, [imgCopy]);
+    useCallback((e, chatMessage) => {
+        const selection = window.document.getSelection();
+        setIsOpen(true);
+        setPosition({ x: e.clientX, y: e.clientY });
+        if (e.target) {
+            setCurrentMessage(chatMessage);
+        }
+        // Detect ảnh được click từ data attribute
+        const fileIndex = e.target?.dataset?.fileIndex;
+        if (fileIndex !== undefined && chatMessage?.path) {
+            setClickedImageFile(chatMessage.path[parseInt(fileIndex)]);
+        }
+        else {
+            setClickedImageFile(null);
+        }
+        e.preventDefault();
+        const contextType = selection.toString() ? 'selection' : chatMessage?.type ? chatMessage.type : 'default';
+        const config = CONTEXT_CONFIG[contextType];
+        setListContextShow({ list: config.show, type: "SHOW" });
+        setListContextHide({ list: config.hide, type: "HIDE" });
+    }, []);
+    const handleTypingStart = () => {
+        if (!isTypingRef.current && connection && chatRoomId) {
+            connection.invoke('StartTyping', chatRoomId).catch(console.error);
+            isTypingRef.current = true;
+        }
+    };
+    const handleTypingStop = () => {
+        if (typingTimeoutRef.current) {
+            clearTimeout(typingTimeoutRef.current);
+        }
+        typingTimeoutRef.current = setTimeout(() => {
+            if (isTypingRef.current && connection && chatRoomId) {
+                connection.invoke('StopTyping', chatRoomId).catch(console.error);
+                isTypingRef.current = false;
+            }
+        }, 2000);
+    };
+    useCallback((editorState) => {
+        if (inputContainer &&
+            inputContainer.current &&
+            inputContainer.current.clientHeight > 50) {
+            setIsMultiLine(true);
+        }
+        else {
+            setIsMultiLine(false);
+        }
+        editorState.read(() => {
+            handleTypingStart();
+            handleTypingStop();
+        });
+    }, [inputContainer, connection, chatRoomId]);
+    useEffect(() => {
+        if (active) {
+            setReplyMessage(null);
+            setImgCopy([]);
+            setIsAtBottom(true);
+            prevListLength.current = 0;
+        }
+    }, [
+        active,
+        dataInfo
+        //chatRoomId,
+        //chatGetType
+    ]);
+    // Chuyển phòng thì load lại message + pinned messages
+    useEffect(() => {
+        if (!chatRoomId && handleSidebar) {
+            return;
+        }
+        chatGetType(chatRoomId, undefined, "", "", undefined, undefined, 0, 0);
+        if (chatRoomId) {
+            getPinMessageChatRoomApi(chatRoomId);
+        }
+    }, [chatRoomId]);
+    useCallback(async (message) => {
+        const pinId = message?.pinId || message?.id;
+        if (!pinId) {
+            return;
+        }
+        await deletePinMessage(pinId);
+    }, [deletePinMessage, chatRoomId]);
+    useCallback((message) => {
+        if (message?.id) {
+            //setViewingPinnedMessage(message.id)
+            // Tìm message element
+            const element = document.getElementById(`msg-${message.id}`);
+            const chatContainer = document.getElementById('scrollableDivChat');
+            if (element && chatContainer) {
+                // Lấy vị trí của element và container
+                const elementRect = element.getBoundingClientRect();
+                const containerRect = chatContainer.getBoundingClientRect();
+                // Tính toán scroll position để đưa element vào giữa container
+                const scrollTop = chatContainer.scrollTop;
+                const offset = elementRect.top - containerRect.top - (containerRect.height / 2) + (elementRect.height / 2);
+                // Scroll trong container, không scroll toàn page
+                chatContainer.scrollTo({
+                    top: scrollTop + offset,
+                    behavior: 'smooth'
+                });
+                // Highlight message
+                const originalBg = element.style.backgroundColor;
+                const originalZIndex = element.style.zIndex;
+                element.style.backgroundColor = '#fff3cd';
+                element.style.zIndex = '1000';
+                element.style.position = 'relative';
+                element.style.transition = 'background-color 0.3s';
+                // Auto close sau 500ms
+                setTimeout(() => {
+                    element.style.backgroundColor = originalBg || '';
+                    element.style.zIndex = originalZIndex || '';
+                    //setViewingPinnedMessage(null)
+                }, 500);
+            }
+            else {
+                console.log('Message not found in current view, may need to load more messages');
+                setTimeout(() => {
+                    //setViewingPinnedMessage(null)
+                }, 2000);
+            }
+        }
+    }, []);
     // const onKeyDown = (event: any) => {
     //   if (event.code === 'NumpadEnter') {
     //     event.preventDefault()