feat: 链接识别和可点击

src/lib/msgUtils.js

@@ -13,6 +13,13 @@ export const replaceTemplateString = (str, replacements) => {
 
   return result;
 }
+
+const autoLinkText = (text) => {
+  let regex = /(https?:\/\/[^\s]+)/g;
+
+  let newText = text.replace(regex, '<a href="$1" target="_blank">$1</a>');
+  return newText;
+}
 /**
  *
 // +8618777396951  lyj
@@ -37,6 +44,8 @@ export const sentMsgTypeMapped = {
       ...msg,
       actionId: msg.id,
       conversationid: msg.id.split('.')[0],
+      originText: (msg.text),
+      text: autoLinkText(msg.text),
       ...(msg.context
         ? {
             reply: {
@@ -169,7 +178,7 @@ export const whatsappMsgTypeMapped = {
   },
   text: {
     type: 'text',
-    data: (msg) => ({ id: msg.wamid, text: msg.text.body }),
+    data: (msg) => ({ id: msg.wamid, text: autoLinkText(msg.text.body), originText: msg.text.body }),
     renderForReply: (msg) => ({ id: msg.wamid, message: msg.text.body }),
   },
   image: {

src/views/Conversations/Components/InputComposer.jsx

@@ -72,7 +72,7 @@ const InputBox = () => {
       {referenceMsg.id && (
         <Flex justify='space-between' className='reply-to bg-gray-100 p-1 rounded-none text-slate-500'>
           <div className=' border-l-3 border-y-0 border-r-0 border-slate-300 border-solid pl-2 pr-1 py-1'>
-            <span className=' text-primary pr-1 italic'>{referenceMsg.senderName}</span>{referenceMsg.text}</div>
+            <span className=' text-primary pr-1 italic'>{referenceMsg.senderName}</span>{referenceMsg.originText}</div>
           <Button type='text' title='取消引用' className=' rounded-none text-slate-500' icon={<CloseCircleOutlined />} size={'middle'} onClick={() => (setReferenceMsg({}))} />
         </Flex>
       )}

src/views/Conversations/Components/Messages.jsx

@@ -1,11 +1,12 @@
 import { useEffect, useState, useRef, useMemo } from 'react';
-import { Image, Spin } from 'antd';
+import { Image, Spin, Dropdown } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
 import { MessageBox } from 'react-chat-elements';
 import useConversationStore from '@/stores/ConversationStore';
 import { useShallow } from 'zustand/react/shallow';
 
 const Messages = () => {
-  const { currentConversation, setReferenceMsg, msgListLoading,  } = useConversationStore();
+  const { currentConversation, setReferenceMsg, msgListLoading } = useConversationStore();
   const activeMessages = useConversationStore(useShallow((state) => (currentConversation.sn ? state.activeConversations[currentConversation.sn] : [])));
 
   const messagesList = useMemo(
@@ -25,9 +26,9 @@ const Messages = () => {
               replyButton: ['text'].includes(message.whatsapp_msg_type) ? true : false,
             }),
       })),
-    [activeMessages, currentConversation.sn]
+    [activeMessages]
   );
-  console.log('messagesList----------------------------------------------------', messagesList);
+  // console.log('messagesList----------------------------------------------------', messagesList);
 
   const messagesEndRef = useRef(null);
   useEffect(() => {
@@ -50,13 +51,38 @@ const Messages = () => {
 
   return (
     <div>
-    <Spin spinning={msgListLoading} tip={'正在读取...'} wrapperClassName='pt-8 ' >
-      {messagesList.map((message, index) => (
-        <MessageBox key={message.key} {...message} onReplyClick={() => setReferenceMsg(message)} onOpen={() => handlePreview(message)} />
-      ))}
-      <Image src={previewSrc} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
-      <div ref={messagesEndRef}></div>
-    </Spin>
+      <Spin spinning={msgListLoading} tip={'正在读取...'} wrapperClassName='pt-8 '>
+        {messagesList.map((message, index) => (
+          // <Dropdown
+          //   key={message.key}
+          //   menu={{
+          //     items: [{ label: '回复', key: 'reply' }],
+          //     onClick: ({ key, domEvent }) => {
+          //       domEvent.stopPropagation();
+          //       switch (key) {
+          //         case 'reply':
+          //           return setReferenceMsg(message);
+
+          //         default:
+          //           return;
+          //       }
+          //     },
+          //   }}
+          //   trigger={['contextMenu']}
+          // >
+            <MessageBox
+              key={message.key}
+              {...message}
+              onReplyClick={() => setReferenceMsg(message)}
+              onOpen={() => handlePreview(message)}
+              {...(message.type === 'text' ? { text: <div dangerouslySetInnerHTML={{ __html: message.text }}></div> } : {})}
+            />
+          // </Dropdown>
+        ))}
+
+        <Image src={previewSrc} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
+        <div ref={messagesEndRef}></div>
+      </Spin>
     </div>
   );
 };

src/views/Conversations/Conversations.css

@@ -15,3 +15,6 @@
     background: linear-gradient(0deg,#00000014,#0000);
     color: #00000073;
 }
+.chatwindow-wrapper .rce-mbox-text:after{
+    content: none;
+}