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

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,187 +72306,97 @@ 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: ''
-    //     }
-    //   }
-    // }
+    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 renderLinkPreview = (urlString: string) => {
     //   const { href, displayUrl, host } = getLinkPreviewData(urlString)
     //   return (