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

package/dist/index.js

@@ -72070,7 +72070,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();
-    configureStore.useAppSelector((state) => state.hubNotification);
+    const { connection } = configureStore.useAppSelector((state) => state.hubNotification);
     const [dynamicMenuItems, setDynamicMenuItems] = React.useState([]);
     React.useEffect(() => {
         const fetchFormConfig = async () => {
@@ -72111,38 +72111,68 @@ const ChatLog = (props) => {
     ], [dynamicMenuItems]);
     // Menu items cho Hành chính (chỉ administrative)
     React.useMemo(() => ADMINISTRATIVE_ITEMS, []);
-    React.useRef(false);
-    React.useRef(null);
-    React.useRef(null);
+    const isTypingRef = React.useRef(false);
+    const typingTimeoutRef = React.useRef(null);
     React.useRef(null);
     React.useRef(null);
+    const inputContainer = React.useRef(null);
     const containerChatRef = React.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
-    React.useState([]);
-    React.useState(false);
+    const [imgCopy, setImgCopy] = React.useState([]);
+    const [isOpen, setIsOpen] = React.useState(false);
     const [openModalPreview, setOpenModalPreview] = React.useState(false);
     React.useState(false);
     React.useState(false);
     React.useState(false);
     React.useState('');
     React.useState(null);
-    React.useState(null);
-    React.useState(null);
-    React.useState({ x: 0, y: 0 });
-    React.useState(undefined);
-    React.useState(undefined);
+    const [currentMessage, setCurrentMessage] = React.useState(null);
+    const [replyMessage, setReplyMessage] = React.useState(null);
+    const [position, setPosition] = React.useState({ x: 0, y: 0 });
+    const [listContextShow, setListContextShow] = React.useState(undefined);
+    const [listContextHide, setListContextHide] = React.useState(undefined);
     const [selectedMessage, setSelectedMessage] = React.useState(null);
-    React.useState(false);
-    React.useState(true);
-    React.useRef(0);
+    const [isMultiLine, setIsMultiLine] = React.useState(false);
+    const [isAtBottom, setIsAtBottom] = React.useState(true);
+    const prevListLength = React.useRef(0);
     React.useState(0);
     React.useState(true);
     React.useState(new Set());
-    React.useState(null);
+    const [clickedImageFile, setClickedImageFile] = React.useState(null);
     React.useState(false);
     React.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"]
+        }
+    };
     React.useState(true);
     const scrollToBottom = () => {
         const messagesEndEle = document.getElementById('messagesEnd');
@@ -72178,188 +72208,133 @@ const ChatLog = (props) => {
     }, []);
     React.useState(false);
     reactRedux.useDispatch();
-    //từ đây
-    // 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)
-    //     }
-    //   }
-    // }, [])
+    React.useCallback((idx) => {
+        const newArr = [...imgCopy];
+        newArr.splice(idx, 1);
+        setImgCopy(newArr);
+    }, [imgCopy]);
+    React.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);
+    };
+    React.useCallback((editorState) => {
+        if (inputContainer &&
+            inputContainer.current &&
+            inputContainer.current.clientHeight > 50) {
+            setIsMultiLine(true);
+        }
+        else {
+            setIsMultiLine(false);
+        }
+        editorState.read(() => {
+            handleTypingStart();
+            handleTypingStop();
+        });
+    }, [inputContainer, connection, chatRoomId]);
+    React.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
+    React.useEffect(() => {
+        if (!chatRoomId && handleSidebar) {
+            return;
+        }
+        chatGetType(chatRoomId, undefined, "", "", undefined, undefined, 0, 0);
+        if (chatRoomId) {
+            getPinMessageChatRoomApi(chatRoomId);
+        }
+    }, [chatRoomId]);
+    React.useCallback(async (message) => {
+        const pinId = message?.pinId || message?.id;
+        if (!pinId) {
+            return;
+        }
+        await deletePinMessage(pinId);
+    }, [deletePinMessage, chatRoomId]);
+    React.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()