perf: 历史记录: 复杂模板的显示

src/views/Conversations/History/MessagesList.jsx

@@ -4,7 +4,7 @@ import { LoadingOutlined } from '@ant-design/icons';
 import { MessageBox } from 'react-chat-elements';
 import { MESSAGE_PAGE_SIZE, fetchMessagesHistory } from '@/actions/ConversationActions';
 import useFormStore from '@/stores/FormStore';
-import { isEmpty, stringToColour } from '@/utils/commons';
+import { isEmpty, stringToColour, groupBy } from '@/utils/commons';
 import { useShallow } from 'zustand/react/shallow';
 
 const BIG_PAGE_SIZE = MESSAGE_PAGE_SIZE * 100;
@@ -132,7 +132,15 @@ const MessagesList = ({ ...props }) => {
     }
   };
 
-  const RenderText = memo(function renderText({ str, className }) {
+  const RenderText = memo(function renderText({ str, className, template }) {
+    let headerObj, footerObj, buttonsArr;
+    if (!isEmpty(template)) {
+      const componentsObj = groupBy(template.components, (item) => item.type);
+      headerObj = componentsObj?.header?.[0];
+      footerObj = componentsObj?.footer?.[0];
+      buttonsArr = componentsObj?.buttons?.reduce((r, c) => r.concat(c.buttons), []);
+    }
+
     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) || [];
@@ -149,6 +157,17 @@ const MessagesList = ({ ...props }) => {
     }, []);
     return (
       <span className={`text-sm leading-5 emoji-text whitespace-pre-wrap ${className} ${extraClass} `} key={'msg-text'}>
+        {headerObj ? (
+          <div className='text-neutral-500 text-center'>
+            {'text' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <div>{headerObj.text}</div>}
+            {'image' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <img src={headerObj.parameters[0].image.link} height={100}></img>}
+            {['document', 'video'].includes((headerObj?.parameters?.[0]?.type || '').toLowerCase()) && (
+              <a href={headerObj.parameters[0][headerObj.parameters[0].type].link} target='_blank' key={headerObj.format} rel='noreferrer' className='text-sm'>
+                [&nbsp;{headerObj.parameters[0].type}&nbsp;]
+              </a>
+            )}
+          </div>
+        ) : null}
         {(objArr || []).map((part, index) => {
           if (part.type === 'link') {
             return (
@@ -218,7 +237,7 @@ const MessagesList = ({ ...props }) => {
                 onTitleClick={() => handlePreview(message)}
                 notch={false}
                 title={message.whatsapp_msg_type === 'text' ? '' : message.title}
-                text={<RenderText str={message?.text || ''} className={message.status === 'failed' ? 'line-through text-neutral-400' : ''} />}
+                text={<RenderText str={message?.text || ''} className={message.status === 'failed' ? 'line-through text-neutral-400' : ''} template={message.template_AsJOSN} />}
                 copiableDate={true}
                 dateString={message.dateString || message.localDate}
                 className={[