消息解析 链接和表情

src/views/Conversations/Components/Input/Emoji.jsx

@@ -15,7 +15,7 @@ const InputTemplate = ({ disabled = false, inputEmoji }) => {
         overlayClassName='p-0'
         placement={'right'}
         overlayInnerStyle={{ padding: 0, borderRadius: '8px' }}
-        fresh
+        // fresh
         content={<EmojiPicker skinTonesDisabled={true} emojiStyle='facebook' onEmojiClick={handlePickEmoji} />}
         // title='😀'
         trigger='click'

src/views/Conversations/Components/InputComposer.jsx

@@ -90,7 +90,7 @@ const InputComposer = () => {
     <div>
       {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'>
+          <div className='referrer-msg 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.originText}
           </div>

src/views/Conversations/Components/Messages.jsx

@@ -11,30 +11,9 @@ const Messages = () => {
   const currentConversation = useConversationStore(useShallow((state) => state.currentConversation));
   const setReferenceMsg = useConversationStore(useShallow((state) => state.setReferenceMsg));
   const msgListLoading = useConversationStore(useShallow((state) => state.msgListLoading));
-  const activeMessages = useConversationStore(useShallow((state) => (currentConversation.sn ? state.activeConversations[currentConversation.sn] : [])));
+  const activeMessages = useConversationStore(useShallow((state) => (state.currentConversation.sn ? state.activeConversations[state.currentConversation.sn] : [])));
   olog('invoke msg list');
 
-  const messagesList = useMemo(
-    () =>
-      (activeMessages || []).map((message) => ({
-        ...message,
-        key: message.id,
-        position: message.sender === 'me' ? 'right' : 'left',
-        ...(message.sender === 'me'
-          ? {
-              styles: { backgroundColor: '#ccd4ae' },
-              notchStyle: { fill: '#ccd4ae' },
-              replyButton: ['text'].includes(message.whatsapp_msg_type) && message.status !== 'failed' ? true : false,
-              className: 'whatsappme-container whitespace-pre-wrap',
-            }
-          : {
-              replyButton: ['text'].includes(message.whatsapp_msg_type) ? true : false,
-            }),
-      })),
-    [activeMessages]
-  );
-  // console.log('messagesList----------------------------------------------------', messagesList);
-
   const messagesEndRef = useRef(null);
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -64,7 +43,8 @@ const Messages = () => {
           if (/\p{Emoji_Presentation}/u.test(part)) {
             const code = [...part].map((e) => e.codePointAt(0).toString(16)).join(`-`);
             return <Emoji key={`${part}${index}${code}`} unified={code} size={24} emojiStyle='facebook' />;
-          } else if (/https?:\/\/[\S]+/gi.test(part)) {
+          } else
+          if (/https?:\/\/[\S]+/gi.test(part)) {
             return (
               <a href={part} target='_blank' key={`${part}${index}`} rel='noreferrer'>
                 {part}
@@ -83,7 +63,7 @@ const Messages = () => {
   return (
     <div>
       <Spin spinning={msgListLoading} tip={'正在读取...'} wrapperClassName='pt-8 '>
-        {messagesList.map((message, index) => (
+        {activeMessages.map((message, index) => (
           <Dropdown
             key={message.key}
             menu={{
@@ -99,14 +79,24 @@ const Messages = () => {
                 }
               },
             }}
-            trigger={['contextMenu']}
-          >
+            trigger={['contextMenu']}>
             <MessageBox
-              key={message.key}
+              key={message.id}
               {...message}
+              position={message.sender === 'me' ? 'right' : 'left'}
               onReplyClick={() => setReferenceMsg(message)}
               onOpen={() => handlePreview(message)}
               text={<RenderText str={message?.text || ''} />}
+              {...(message.sender === 'me'
+                ? {
+                    styles: { backgroundColor: '#ccd4ae' },
+                    notchStyle: { fill: '#ccd4ae' },
+                    replyButton: ['text'].includes(message.whatsapp_msg_type) && message.status !== 'failed' ? true : false,
+                    className: 'whatsappme-container whitespace-pre-wrap',
+                  }
+                : {
+                    replyButton: ['text'].includes(message.whatsapp_msg_type) ? true : false,
+                  })}
             />
           </Dropdown>
         ))}

src/views/Conversations/Conversations.css

@@ -9,7 +9,7 @@
 
 /** Chat Window */
 .chatwindow-wrapper .rce-container-mbox .rce-mbox{
-    max-width: 400px;
+    max-width: 500px;
 }
 .chatwindow-wrapper .rce-citem {
     background: transparent;
@@ -18,7 +18,7 @@
     background: linear-gradient(0deg,#00000014,#0000);
     color: #00000073;
 }
-.chatwindow-wrapper .rce-mbox-text {
+.chatwindow-wrapper .rce-mbox-text, .chatwindow-wrapper .referrer-msg {
     font-family: 'Twemoji Mozilla', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji', sans-serif;
 }
 .chatwindow-wrapper .rce-mbox-text a{