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

package/dist/index.mjs

@@ -72110,7 +72110,7 @@ const ChatLog = (props) => {
     const prevListLength = useRef(0);
     useState(0);
     useState(true);
-    useState(new Set());
+    const [expandedMessages, setExpandedMessages] = useState(new Set());
     const [clickedImageFile, setClickedImageFile] = useState(null);
     useState(false);
     useState(new Set());
@@ -72155,7 +72155,7 @@ const ChatLog = (props) => {
             scrollToBottom();
         }
     }, [messageByGroup, checkScroll]);
-    useMemo(() => {
+    const mentionItems = useMemo(() => {
         if (!groupChatUsers) {
             return [];
         }
@@ -72173,7 +72173,7 @@ const ChatLog = (props) => {
         });
         return [{ id: "all", name: "All" }, ...mappedUsers];
     }, [groupChatUsers]);
-    useCallback((mes) => {
+    const handlePreview = useCallback((mes) => {
         setSelectedMessage(mes);
         setOpenModalPreview(true);
     }, []);
@@ -72306,322 +72306,174 @@ const ChatLog = (props) => {
             }
         }
     }, []);
-    // 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: ''
-    //     }
-    //   }
-    // }
-    // const renderLinkPreview = (urlString: string) => {
-    //   const { href, displayUrl, host } = getLinkPreviewData(urlString)
-    //   return (
-    //     <>
-    //       <a
-    //         href={href}
-    //         target="_blank"
-    //         rel="noreferrer"
-    //         style={{
-    //           textDecoration: 'none',
-    //           color: 'inherit'
-    //         }}
-    //       >
-    //         <div
-    //           style={{
-    //             marginTop: 4,
-    //             marginBottom: 4,
-    //             padding: '8px 10px',
-    //             borderRadius: 8,
-    //             backgroundColor: '#eef5ff',
-    //             border: '1px solid #d3e2ff',
-    //             maxWidth: 420
-    //           }}
-    //         >
-    //           <div
-    //             style={{
-    //               fontSize: 14,
-    //               fontWeight: 500,
-    //               color: '#1d4f91',
-    //               wordBreak: 'break-word'
-    //             }}
-    //           >
-    //             {displayUrl}
-    //           </div>
-    //           {host && (
-    //             <div
-    //               style={{
-    //                 marginTop: 4,
-    //                 fontSize: 12,
-    //                 color: '#6f6b7d'
-    //               }}
-    //             >
-    //               {host}
-    //             </div>
-    //           )}
-    //         </div>
-    //       </a>
-    //     </>
-    //   )
-    // }
-    // const renderNotifyLeaveGroup = useCallback((chat: any) => {
-    //   const msg = JSON.parse(chat?.msg)
-    //   if (chat?.createdById === dataProfile?.id) {
-    //     return (
-    //       <>
-    //         <div>
-    //           <span style={{ fontWeight: "bold", marginRight: "5px" }}>
-    //             {msg?.name}
-    //           </span>
-    //           <span>được bạn xoá khỏi nhóm</span>
-    //         </div>
-    //       </>
-    //     )
-    //   }
-    //   if (chat?.createdById === msg?.id) {
-    //     return (
-    //       <>
-    //         <div>
-    //           <span style={{ fontWeight: "bold", marginRight: "5px" }}>
-    //             {msg?.name}
-    //           </span>
-    //           <span>đã rời khỏi nhóm</span>
-    //         </div>
-    //       </>
-    //     )
-    //   }
-    //   return (
-    //     <>
-    //       <div>
-    //         <span style={{ fontWeight: "bold", marginRight: "5px" }}>
-    //           {msg?.name}
-    //         </span>
-    //         <span>được <span style={{ fontWeight: "bold", marginRight: "5px" }}>{chat?.createdBy?.name}</span> xoá khỏi nhóm</span>
-    //       </div>
-    //     </>
-    //   )
-    // }, [dataProfile])
-    // const renderChatNotification = useCallback((chat: any) => {
-    //   const parseChatMsg = (msg: string) => {
-    //     if (!msg) { return [] }
-    //     try {
-    //       const parsed = typeof msg === 'string' ? JSON.parse(msg) : msg
-    //       return Array.isArray(parsed) ? parsed : [parsed]
-    //     } catch (err) {
-    //       console.error('JSON parse error:', err)
-    //       return []
-    //     }
-    //   }
-    //   const dataParse = parseChatMsg(chat.msg)
-    //   // ✅ FIX: Kiểm tra array trước khi dùng slice
-    //   if (!Array.isArray(dataParse) || dataParse.length === 0) {
-    //     return (
-    //       <div>
-    //         <span>Đã có thay đổi trong nhóm</span>
-    //       </div>
-    //     )
-    //   }
-    //   const displayedItems = dataParse.slice(0, 2)
-    //   const extraCount = Math.max(0, dataParse.length - displayedItems.length)
-    //   return (
-    //     <>
-    //       <div>
-    //         {displayedItems.map((item: any, index: any) => (
-    //           <strong key={index}>
-    //             {item.name}
-    //             {index < displayedItems.length - 1 && ", "}
-    //           </strong>
-    //         ))}
-    //         {dataParse.length > 3 && (
-    //           <strong>
-    //             <span style={{ fontWeight: "normal" }}>{" và "}</span>{" "}
-    //             {extraCount} người khác
-    //           </strong>
-    //         )}
-    //         {" được "}
-    //         {chat?.createdBy?.id === dataProfile?.id ? (
-    //           <span>bạn </span>
-    //         ) : (
-    //           <strong style={{ marginRight: "5px" }}>{chat?.createdByName}</strong>
-    //         )}
-    //         thêm vào nhóm
-    //       </div>
-    //     </>
-    //   )
-    // }, [dataProfile])
+    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(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 = (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 (jsx(Fragment$1, { children: jsx("div", { children: jsxs("div", { children: [chat.path && chat.path.length === 1 && (jsx("div", { className: "image-container", children: img && jsx("img", { src: img, alt: "" }) })), isValidUrl(chat.msg) && renderLinkPreview(chat.msg), chat.msg && !isValidUrl(chat.msg) ? (jsx("div", { children: formatMentionsReact(chat.msg, mentionItems, chat.id) })) : (jsx(Fragment$1, {})), chat.path && chat.path.length > 1 && (jsx("div", { className: "group-image", children: chat.path.map((it, index) => {
+                                return (jsx("div", { className: "group-image-item image-container", children: jsx("img", { style: { maxWidth: "100%", maxHeight: 360 }, src: `${CDN_URL_VIEW}/${it.path.trim()}`, onClick: () => handlePreview(it), alt: "" }) }, index));
+                            }) })), jsx("div", { className: "", style: { fontSize: "12px", color: "#476285" }, children: moment(chat.time).format("HH:mm") })] }) }) }));
+    }, [expandedMessages, handlePreview, mentionItems]);
+    const getLinkPreviewData = (urlString) => {
+        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: ''
+            };
+        }
+    };
+    const renderLinkPreview = (urlString) => {
+        const { href, displayUrl, host } = getLinkPreviewData(urlString);
+        return (jsx(Fragment$1, { children: jsx("a", { href: href, target: "_blank", rel: "noreferrer", style: {
+                    textDecoration: 'none',
+                    color: 'inherit'
+                }, children: jsxs("div", { style: {
+                        marginTop: 4,
+                        marginBottom: 4,
+                        padding: '8px 10px',
+                        borderRadius: 8,
+                        backgroundColor: '#eef5ff',
+                        border: '1px solid #d3e2ff',
+                        maxWidth: 420
+                    }, children: [jsx("div", { style: {
+                                fontSize: 14,
+                                fontWeight: 500,
+                                color: '#1d4f91',
+                                wordBreak: 'break-word'
+                            }, children: displayUrl }), host && (jsx("div", { style: {
+                                marginTop: 4,
+                                fontSize: 12,
+                                color: '#6f6b7d'
+                            }, children: host }))] }) }) }));
+    };
+    useCallback((chat) => {
+        const msg = JSON.parse(chat?.msg);
+        if (chat?.createdById === dataProfile?.id) {
+            return (jsx(Fragment$1, { children: jsxs("div", { children: [jsx("span", { style: { fontWeight: "bold", marginRight: "5px" }, children: msg?.name }), jsx("span", { children: "\u0111\u01B0\u1EE3c b\u1EA1n xo\u00E1 kh\u1ECFi nh\u00F3m" })] }) }));
+        }
+        if (chat?.createdById === msg?.id) {
+            return (jsx(Fragment$1, { children: jsxs("div", { children: [jsx("span", { style: { fontWeight: "bold", marginRight: "5px" }, children: msg?.name }), jsx("span", { children: "\u0111\u00E3 r\u1EDDi kh\u1ECFi nh\u00F3m" })] }) }));
+        }
+        return (jsx(Fragment$1, { children: jsxs("div", { children: [jsx("span", { style: { fontWeight: "bold", marginRight: "5px" }, children: msg?.name }), jsxs("span", { children: ["\u0111\u01B0\u1EE3c ", jsx("span", { style: { fontWeight: "bold", marginRight: "5px" }, children: chat?.createdBy?.name }), " xo\u00E1 kh\u1ECFi nh\u00F3m"] })] }) }));
+    }, [dataProfile]);
+    useCallback((chat) => {
+        const parseChatMsg = (msg) => {
+            if (!msg) {
+                return [];
+            }
+            try {
+                const parsed = typeof msg === 'string' ? JSON.parse(msg) : msg;
+                return Array.isArray(parsed) ? parsed : [parsed];
+            }
+            catch (err) {
+                console.error('JSON parse error:', err);
+                return [];
+            }
+        };
+        const dataParse = parseChatMsg(chat.msg);
+        // ✅ FIX: Kiểm tra array trước khi dùng slice
+        if (!Array.isArray(dataParse) || dataParse.length === 0) {
+            return (jsx("div", { children: jsx("span", { children: "\u0110\u00E3 c\u00F3 thay \u0111\u1ED5i trong nh\u00F3m" }) }));
+        }
+        const displayedItems = dataParse.slice(0, 2);
+        const extraCount = Math.max(0, dataParse.length - displayedItems.length);
+        return (jsx(Fragment$1, { children: jsxs("div", { children: [displayedItems.map((item, index) => (jsxs("strong", { children: [item.name, index < displayedItems.length - 1 && ", "] }, index))), dataParse.length > 3 && (jsxs("strong", { children: [jsx("span", { style: { fontWeight: "normal" }, children: " và " }), " ", extraCount, " ng\u01B0\u1EDDi kh\u00E1c"] })), " được ", chat?.createdBy?.id === dataProfile?.id ? (jsx("span", { children: "b\u1EA1n " })) : (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) {