style: 历史记录; 即时聊天页的点击滚动

src/lib/msgUtils.js

@@ -213,6 +213,13 @@ export const msgStatusRenderMapped = {
   'read': 'read',
   'failed': 'failed',
 };
+export const msgStatusRenderMappedCN = {
+  'accepted': '[发送ing]',
+  'sent': '[已发送]',
+  'delivered': '[已送达]',
+  'read': '[已读]',
+  'failed': '❗',
+};
 export const receivedMsgTypeMapped = {
   ...cloneDeep(whatsappMsgMapped),
   'message': {
@@ -272,7 +279,7 @@ export const whatsappMsgTypeMapped = {
       photoURL: msg.image.link,
       width: '100%',
       height: 200,
-      alt: '',
+      alt: msg.image?.caption || '',
     }),
   },
   sticker: {
@@ -333,6 +340,10 @@ export const whatsappMsgTypeMapped = {
         audioURL: msg.audio.link,
       },
     }),
+    renderForReply: (msg) => ({
+      id: msg.wamid,
+      message: '[语音]',
+    }),
   },
   // unsupported: { type: 'system', data: (msg) => ({ text: 'Message type is currently not supported.' }) },
   unsupported: {
@@ -367,6 +378,10 @@ export const whatsappMsgTypeMapped = {
       text: msg.contacts.map((ele) => `${ele.name.formatted_name}: ${ele.phones[0].wa_id}`).join('\n'),
       data: msg.contacts.map((ele) => ({ id: ele.phones[0].wa_id, wa_id: ele.phones[0].wa_id, name: ele.name.formatted_name })),
     }),
+    renderForReply: (msg) => ({
+      id: msg.wamid,
+      message: '[联系人]',
+    }),
   },
   location: {
     type: 'location',
@@ -381,6 +396,10 @@ export const whatsappMsgTypeMapped = {
       },
       originText: msg.location?.address || '',
     }),
+    renderForReply: (msg) => ({
+      id: msg.wamid,
+      message: '[位置]',
+    }),
   },
   // contact: 'contact',
   // 'contact-card': 'contact-card',
@@ -419,6 +438,8 @@ export const parseRenderMessageItem = (msg) => {
     whatsapp_name: msg?.customerProfile?.name || '',
     whatsapp_phone_number: msg.from,
     whatsapp_msg_type: msg.type,
+    statusCN: msgStatusRenderMappedCN[msg?.status || 'failed'],
+    statusTitle: msgStatusRenderMappedCN[msg?.status || 'failed'],
     ...((isEmpty(msg.context) && isEmpty(msg.reaction)) || msg.context?.forwarded === true
       ? {}
       : {
@@ -451,7 +472,7 @@ export const parseRenderMessageList = (messages, conversationid = null) => {
       type: msgContent.type,
       ...(typeof whatsappMsgTypeMapped[msgType].type === 'function' ? whatsappMsgTypeMapped[msgType].type(msg) : { type: whatsappMsgTypeMapped[msgType].type || 'text' }),
       date: msgContent?.sendTime || msg.msgtime || '',
-      localDate: msg.msgtime || '',
+      localDate: (msg.msgtime || '').replace('T', ' '),
       from: msgContent.from,
       sender: msgContent.from,
       senderName: msgContent?.customerProfile?.name || msgContent.from,
@@ -461,6 +482,8 @@ export const parseRenderMessageList = (messages, conversationid = null) => {
             senderName: 'me',
             status: msgStatusRenderMapped[msgContent?.status || 'failed'],
             dateString: msgStatusRenderMapped[msgContent?.status || 'failed'] === 'failed' ? `发送失败 ${whatsappError?.[msgContent.errorCode] || msgContent.errorMessage} ❌` : '',
+            statusCN: msgStatusRenderMappedCN[msgContent?.status || 'failed'],
+            statusTitle: msgStatusRenderMappedCN[msgContent?.status || 'failed'],
           }
         : {}),
       ...((isEmpty(msg.messageorigin_AsJOSN) && isEmpty(msgContent.context))

src/views/ChatHistory.jsx

@@ -11,6 +11,7 @@ import { useShallow } from 'zustand/react/shallow';
 const { Sider, Content, Header, Footer } = Layout;
 const { Search } = Input;
 const { RangePicker } = DatePicker;
+
 // https://media-xsp2-1.cdn.whatsapp.net/v/t61.24694-24/424735646_380563021285029_2962758854250800176_n.jpg?ccb=11-4&oh=01_AdTogiVdUE-ToI9uH-VQKTTLyDbP7bocXUQe1OETOeCgcg&oe=65F7C6AB&_nc_sid=e6ed6c&_nc_cat=104
 const data = [
   {
@@ -86,6 +87,10 @@ const SearchForm = memo(function ({ initialValues, onSubmit }) {
           optionFilterProp='children'
           filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
           options={[
+            {
+              value: 'null',
+              label: '未知',
+            },
             {
               value: '354',
               label: '宁艳',
@@ -287,7 +292,7 @@ function ChatHistory() {
   };
   // eslint-disable-next-line react/display-name
   const MessageBoxWithRef = forwardRef((props, ref) => (
-    <li ref={ref}>
+    <li ref={ref} key={props.key}>
       <MessageBox {...props} />
     </li>
   ));
@@ -340,10 +345,13 @@ function ChatHistory() {
                   onTitleClick={() => handlePreview(message)}
                   notch={false}
                   text={<RenderText str={message?.text || ''} />}
+                  copiableDate={true}
                   dateString={message.dateString || message.localDate}
-                  className={['whitespace-pre-wrap', message.whatsapp_msg_type === 'sticker' ? 'bg-transparent' : '', message.sender === 'me' ? 'whatsappme-container' : ''].join(
-                    ' '
-                  )}
+                  className={[
+                    'whitespace-pre-wrap mb-2',
+                    message.whatsapp_msg_type === 'sticker' ? 'bg-transparent' : '',
+                    message.sender === 'me' ? 'whatsappme-container' : '',
+                  ].join(' ')}
                   style={{
                     backgroundColor: message.sender === 'me' ? '#ccd4ae' : '#fff',
                   }}
@@ -359,6 +367,15 @@ function ChatHistory() {
                         ],
                       }
                     : {})}
+                  renderAddCmp={
+                    <div className='border-dashed border-0 border-t border-slate-300 text-slate-600 space-x-2 emoji'>
+                      <span>{message.senderName}</span>
+                      <span>{message.dateString || message.localDate}</span>
+                      <span>{message.statusCN}</span>
+                    </div>
+                  }
+                  // date={null}
+                  // status={null}
                 />
               )}
             />

src/views/Conversations/Components/MessagesList.jsx

@@ -38,8 +38,8 @@ const MessagesList = ({ messages, handlePreview, reference }) => {
 
   const scrollToMessage = (id, index) => {
     const _i = index || messages.findIndex((msg) => msg.id === id);
-    if (reference.current && messageRefs.current[_i]) {
-      reference.current.scrollTop = messageRefs.current[_i].offsetTop;
+    if (_i >= 0) {
+      messageRefs.current[_i].scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
   };
 
@@ -61,7 +61,7 @@ const MessagesList = ({ messages, handlePreview, reference }) => {
     const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji_Presentation})/gmu).filter((s) => s !== '');
     const links = str.match(/https?:\/\/[\S]+/gi) || [];
     const emojis = str.match(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g) || [];
-    const extraClass = isEmpty(emojis) ? '' : 'text-base leading-5 emoji-text';
+    const extraClass = isEmpty(emojis) ? '' : '';
     const objArr = parts.reduce((prev, curr, index) => {
       if (links.includes(curr)) {
         prev.push({ type: 'link', key: curr });
@@ -73,11 +73,11 @@ const MessagesList = ({ messages, handlePreview, reference }) => {
       return prev;
     }, []);
     return (
-      <span className={extraClass}>
+      <span className={`text-base leading-5 emoji-text ${extraClass}`}>
         {(objArr || []).map((part, index) => {
           if (part.type === 'link') {
             return (
-              <a href={part.key} target='_blank' key={`${part.key}${index}`} rel='noreferrer' className='text-sm'>
+              <a href={part.key} target='_blank' key={`${part.key}${index}`} rel='noreferrer' className='text-base'>
                 {part.key}
               </a>
             );

src/views/Conversations/Conversations.css

@@ -53,7 +53,7 @@
 }
 .chatwindow-wrapper .bg-transparent .rce-mbox{
     background: unset;
-    box-shadow: none;
+    /* box-shadow: none; */
 }
 .chatwindow-wrapper .bg-transparent .rce-mbox-left-notch,
 .chatwindow-wrapper .bg-transparent .rce-mbox-right-notch
@@ -66,6 +66,7 @@
     color: #00000073;
 }
 .chatwindow-wrapper .rce-mbox-text .emoji-text,
+.chatwindow-wrapper .rce-mbox-time,
 .chatwindow-wrapper .referrer-msg,
 .chatwindow-wrapper .rce-mbox-reply-message,
 .chatwindow-wrapper .emoji
@@ -84,6 +85,9 @@
 }
 .chatwindow-wrapper .rce-mbox-photo .rce-mbox-text{
     padding-left: 8px;
+    padding-right: 8px;
+    margin: unset;
+    max-width: unset;
 }
 .chatwindow-wrapper .rce-mbox-left-notch {
     width: 10px;
@@ -120,3 +124,10 @@
 {
     display: inline-block;
 }
+
+/** Chat history */
+/* .chathistory-wrapper .rce-mbox-time {
+    user-select: auto;
+    -webkit-user-select: auto;
+    -moz-user-select: auto;
+}*/