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

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 [expandedMessages, setExpandedMessages] = React.useState(new Set());
+    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');
@@ -72154,7 +72184,7 @@ const ChatLog = (props) => {
             scrollToBottom();
         }
     }, [messageByGroup, checkScroll]);
-    React.useMemo(() => {
+    const mentionItems = React.useMemo(() => {
         if (!groupChatUsers) {
             return [];
         }
@@ -72172,375 +72202,230 @@ const ChatLog = (props) => {
         });
         return [{ id: "all", name: "All" }, ...mappedUsers];
     }, [groupChatUsers]);
-    React.useCallback((mes) => {
+    const handlePreview = React.useCallback((mes) => {
         setSelectedMessage(mes);
         setOpenModalPreview(true);
     }, []);
     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)
-    //     }
-    //   }
-    // }, [])
-    // const onKeyDown = (event: any) => {
-    //   if (event.code === 'NumpadEnter') {
-    //     event.preventDefault()
-    //     const baseOptions = {
-    //       key: 'Enter',
-    //       code: 'Enter',
-    //       which: 13,
-    //       keyCode: 13,
-    //       bubbles: true,
-    //       shiftKey: event.shiftKey,
-    //       altKey: event.altKey,
-    //       ctrlKey: event.ctrlKey,
-    //       metaKey: event.metaKey
-    //     }
-    //     const newEvent = new KeyboardEvent('keydown', baseOptions)
-    //     event.target.dispatchEvent(newEvent)
-    //   }
-    // }
-    // const useParsedChatData = (chatMsg: string) => {
-    //   if (!chatMsg) { return {} }
-    //   try {
-    //     return typeof chatMsg === 'string' ? JSON.parse(chatMsg) : chatMsg
-    //   } catch (err) {
-    //     console.error('JSON parse error:', err)
-    //     return {}
-    //   }
-    // }
-    // const renderChatText = useCallback((chat: any) => {
-    //   const isPath = Array.isArray(chat?.path) && typeof chat.path[0]?.path === "string" ? chat.path[0].path.trim() : ""
-    //   const img = isPath ? `${CDN_URL_VIEW}/${isPath}` : ""
-    //   const toggleExpanded = (messageId: string) => {
-    //     const newExpanded = new Set(expandedMessages)
-    //     if (newExpanded.has(messageId)) {
-    //       newExpanded.delete(messageId)
-    //     } else {
-    //       newExpanded.add(messageId)
-    //     }
-    //     setExpandedMessages(newExpanded)
-    //   }
-    //   const formatMentionsReact = (text: string, mentions: any[], messageId: string) => {
-    //     if (!text || !mentions || mentions.length === 0) { return text }
-    //     const maxLength = 200
-    //     const isExpanded = expandedMessages.has(messageId)
-    //     let displayText = text
-    //     let isTruncated = false
-    //     if (!isExpanded && text.length > maxLength) {
-    //       displayText = text.substring(0, maxLength)
-    //       isTruncated = true
-    //     }
-    //     // Chỉ highlight những mention có trong danh sách
-    //     let result: any = displayText
-    //     // Hàm helper để xử lý mention trong cả string và array
-    //     const processMention = (text: string, mention: any): any => {
-    //       const escapedName = mention?.name?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-    //       const mentionRegex = new RegExp(`@${escapedName}(?=\\s|$|[.,;:!?()[\\]{}'"\`~@])`, 'g')
-    //       const parts = text.split(mentionRegex)
-    //       const matches = text.match(mentionRegex) || []
-    //       if (matches.length === 0) {
-    //         return text
-    //       }
-    //       const newParts: any[] = []
-    //       parts.forEach((part: any, index: any) => {
-    //         newParts.push(part)
-    //         if (matches[index]) {
-    //           newParts.push(
-    //             <span key={`mention-${messageId}-${mention.id || mention.name}-${index}`} className="chat-mention">
-    //               {matches[index]}
-    //             </span>
-    //           )
-    //         }
-    //       })
-    //       return newParts
-    //     }
-    //     mentions.forEach((mention: any) => {
-    //       if (typeof result === 'string') {
-    //         result = processMention(result, mention)
-    //       } else if (Array.isArray(result)) {
-    //         // Xử lý từng phần tử trong array
-    //         const processedArray: any[] = []
-    //         result.forEach((item: any) => {
-    //           if (typeof item === 'string') {
-    //             const processed = processMention(item, mention)
-    //             if (Array.isArray(processed)) {
-    //               processedArray.push(...processed)
-    //             } else {
-    //               processedArray.push(processed)
-    //             }
-    //           } else {
-    //             // Giữ nguyên các React elements đã được xử lý
-    //             processedArray.push(item)
-    //           }
-    //         })
-    //         result = processedArray
-    //       }
-    //     })
-    //     // Add expand/collapse functionality
-    //     if (isTruncated || (isExpanded && text.length > maxLength)) {
-    //       const expandButton = (
-    //         <span
-    //           key={`expand-${messageId}`}
-    //           onClick={() => toggleExpanded(messageId)}
-    //           style={{
-    //             color: '#006edc',
-    //             cursor: 'pointer',
-    //             fontWeight: 500,
-    //             marginLeft: 5
-    //           }}
-    //         >
-    //           {isExpanded ? ' Thu gọn' : '... Mở rộng'}
-    //         </span>
-    //       )
-    //       if (Array.isArray(result)) {
-    //         result.push(expandButton)
-    //       } else {
-    //         result = [result, expandButton]
-    //       }
-    //     }
-    //     return result
-    //   }
-    //   return (
-    //     <>
-    //       <div>
-    //         <div>
-    //           {chat.path && chat.path.length === 1 && (
-    //             <div className="image-container">
-    //               {img && <img src={img} alt="" />}
-    //             </div>
-    //           )}
-    //           {isValidUrl(chat.msg) && renderLinkPreview(chat.msg)}
-    //           {chat.msg && !isValidUrl(chat.msg) ? (
-    //             <div>{formatMentionsReact(chat.msg, mentionItems, chat.id)}</div>
-    //           ) : (
-    //             <></>
-    //           )}
-    //           {chat.path && chat.path.length > 1 && (
-    //             <div className="group-image">
-    //               {chat.path.map((it: any, index: any) => {
-    //                 return (
-    //                   <div
-    //                     key={index}
-    //                     className="group-image-item image-container"
-    //                   >
-    //                     <img
-    //                       style={{ maxWidth: "100%", maxHeight: 360 }}
-    //                       src={`${CDN_URL_VIEW}/${it.path.trim()}`}
-    //                       onClick={() => handlePreview(it)}
-    //                       alt=""
-    //                     />
-    //                   </div>
-    //                 )
-    //               })}
-    //             </div>
-    //           )}
-    //           <div className="" style={{ fontSize: "12px", color: "#476285" }}>
-    //             {moment(chat.time).format("HH:mm")}
-    //           </div>
-    //         </div>
-    //       </div>
-    //     </>
-    //   )
-    // }, [expandedMessages, handlePreview, mentionItems])
-    // const getLinkPreviewData = (urlString: string) => {
-    //   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: ''
-    //     }
-    //   }
-    // }
+    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);
+            }
+        }
+    }, []);
+    React.useCallback((chat) => {
+        const isPath = Array.isArray(chat?.path) && typeof chat.path[0]?.path === "string" ? chat.path[0].path.trim() : "";
+        const img = isPath ? `${CDN_URL_VIEW}/${isPath}` : "";
+        const toggleExpanded = (messageId) => {
+            const newExpanded = new Set(expandedMessages);
+            if (newExpanded.has(messageId)) {
+                newExpanded.delete(messageId);
+            }
+            else {
+                newExpanded.add(messageId);
+            }
+            setExpandedMessages(newExpanded);
+        };
+        const formatMentionsReact = (text, mentions, messageId) => {
+            if (!text || !mentions || mentions.length === 0) {
+                return text;
+            }
+            const maxLength = 200;
+            const isExpanded = expandedMessages.has(messageId);
+            let displayText = text;
+            let isTruncated = false;
+            if (!isExpanded && text.length > maxLength) {
+                displayText = text.substring(0, maxLength);
+                isTruncated = true;
+            }
+            // Chỉ highlight những mention có trong danh sách
+            let result = displayText;
+            // Hàm helper để xử lý mention trong cả string và array
+            const processMention = (text, mention) => {
+                const escapedName = mention?.name?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                const mentionRegex = new RegExp(`@${escapedName}(?=\\s|$|[.,;:!?()[\\]{}'"\`~@])`, 'g');
+                const parts = text.split(mentionRegex);
+                const matches = text.match(mentionRegex) || [];
+                if (matches.length === 0) {
+                    return text;
+                }
+                const newParts = [];
+                parts.forEach((part, index) => {
+                    newParts.push(part);
+                    if (matches[index]) {
+                        newParts.push(jsxRuntime.jsx("span", { className: "chat-mention", children: matches[index] }, `mention-${messageId}-${mention.id || mention.name}-${index}`));
+                    }
+                });
+                return newParts;
+            };
+            mentions.forEach((mention) => {
+                if (typeof result === 'string') {
+                    result = processMention(result, mention);
+                }
+                else if (Array.isArray(result)) {
+                    // Xử lý từng phần tử trong array
+                    const processedArray = [];
+                    result.forEach((item) => {
+                        if (typeof item === 'string') {
+                            const processed = processMention(item, mention);
+                            if (Array.isArray(processed)) {
+                                processedArray.push(...processed);
+                            }
+                            else {
+                                processedArray.push(processed);
+                            }
+                        }
+                        else {
+                            // Giữ nguyên các React elements đã được xử lý
+                            processedArray.push(item);
+                        }
+                    });
+                    result = processedArray;
+                }
+            });
+            // Add expand/collapse functionality
+            if (isTruncated || (isExpanded && text.length > maxLength)) {
+                const expandButton = (jsxRuntime.jsx("span", { onClick: () => toggleExpanded(messageId), style: {
+                        color: '#006edc',
+                        cursor: 'pointer',
+                        fontWeight: 500,
+                        marginLeft: 5
+                    }, children: isExpanded ? ' Thu gọn' : '... Mở rộng' }, `expand-${messageId}`));
+                if (Array.isArray(result)) {
+                    result.push(expandButton);
+                }
+                else {
+                    result = [result, expandButton];
+                }
+            }
+            return result;
+        };
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("div", { children: [chat.path && chat.path.length === 1 && (jsxRuntime.jsx("div", { className: "image-container", children: img && jsxRuntime.jsx("img", { src: img, alt: "" }) })), isValidUrl(chat.msg) && renderLinkPreview(chat.msg), chat.msg && !isValidUrl(chat.msg) ? (jsxRuntime.jsx("div", { children: formatMentionsReact(chat.msg, mentionItems, chat.id) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {})), chat.path && chat.path.length > 1 && (jsxRuntime.jsx("div", { className: "group-image", children: chat.path.map((it, index) => {
+                                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 (