perf: 历史记录: 显示邮件消息

src/views/ChatHistory.jsx

@@ -8,6 +8,7 @@ import MessagesList from './Conversations/History/MessagesList';
 import ImageAlbumPreview from './Conversations/History/ImageAlumPreview';
 import { flush, pick } from '@/utils/commons';
 import { fetchConversationsSearch, CONVERSATION_PAGE_SIZE } from '@/actions/ConversationActions';
+import EmailDetail from './Conversations/Online/Components/EmailDetail';
 
 const { Sider, Content } = Layout;
 
@@ -45,6 +46,14 @@ const Index = (props) => {
       setSelectedConversation(data[0]);
     }
   };
+
+  const [openEmailDetail, setOpenEmailDetail] = useState(false);
+  const [emailDetail, setEmailDetail] = useState({});
+  const onOpenEmail = (emailMsg) => {
+    setOpenEmailDetail(true);
+    setEmailDetail({...emailMsg, order_opi: Number(selectedConversation?.opi_sn || 0)});
+  }
+
   return (
     <>
       <SearchForm onSubmit={handleSubmit} initialValues={formValues} />
@@ -56,9 +65,10 @@ const Index = (props) => {
         <Content style={{ maxHeight: 'calc(100vh - 300px)', height: 'calc(100vh - 300px)', minWidth: '360px' }}>
           <Flex className='h-full relative'>
             <MessagesMatchList />
-            <MessagesList />
+            <MessagesList onOpenEmail={onOpenEmail} />
           </Flex>
           <ImageAlbumPreview />
+          <EmailDetail open={openEmailDetail} setOpen={setOpenEmailDetail} emailMsg={emailDetail} key={`history-email-detail-${emailDetail.id}`} disabled />
         </Content>
       </Layout>
     </>

src/views/Conversations/History/MessagesList.jsx

@@ -7,9 +7,11 @@ import useFormStore from '@/stores/FormStore';
 import { isEmpty, stringToColour, groupBy, isNotEmpty } from '@/utils/commons';
 import { useShallow } from 'zustand/react/shallow';
 import MergeConversationTo from './MergeConversationTo';
+import BubbleIM from '../Online/Components/BubbleIM';
+import BubbleEmail from '../Online/Components/BubbleEmail';
 
 const BIG_PAGE_SIZE = MESSAGE_PAGE_SIZE * 20;
-const MessagesList = ({ ...props }) => {
+const MessagesList = ({ ...listProps }) => {
   const { message: appMessage } = App.useApp();
 
   const [formValues] = useFormStore((state) => [state.chatHistoryForm]);
@@ -197,8 +199,9 @@ const MessagesList = ({ ...props }) => {
   // eslint-disable-next-line react/display-name
   const MessageBoxWithRef = forwardRef((props, ref) => (
     <li ref={ref}>
-      <MessageBox {...props} />
-    </li>
+      {(props.msg_source || '').toLowerCase() === 'waba' && <MessageBox {...props} />}
+      {props.msg_source === 'email' && <BubbleEmail {...props} reposition='left' onOpenEmail={listProps.onOpenEmail} />}
+      </li>
   ));
 
   const handlePreview = (msg) => {

src/views/Conversations/Online/Components/BubbleEmail.jsx

@@ -66,7 +66,7 @@ const BubbleEmail = ({ onOpenEditor, onOpenEmail, ...message  }) => {
       }
       // titleColor={message.sender !== 'me' ? '#4f46e5' : ''} // 600
       notch={false}
-      position={message.sender === 'me' ? 'right' : 'left'}
+      position={message.reposition || (message.sender === 'me' ? 'right' : 'left')}
       onReplyClick={() => onOpenEditor(message.msgOrigin)}
       onForwardClick={ () => { handleResend(message.msgOrigin); }}
       onOpen={() => handlePreview(message)}

src/views/Conversations/Online/Components/EmailDetail.jsx

@@ -13,7 +13,7 @@ import EmailBindFormModal from './EmailBind';
 /**
  * @property {*} emailMsg - 邮件数据. { conversationid, actionId, order_opi, coli_sn, msgOrigin: { from, to, id, email: { subject, mai_sn, } } }
  */
-const EmailDetail = ({ open, setOpen, emailMsg={}, ...props }) => {
+const EmailDetail = ({ open, setOpen, emailMsg={}, disabled=false, ...props }) => {
 
   // console.log('emailDetail', emailMsg);
 
@@ -77,6 +77,7 @@ const EmailDetail = ({ open, setOpen, emailMsg={}, ...props }) => {
    * * 已保存: []
    * * 已发送: 回复, 转发
    * * 失败: 重发
+   * todo: disabled 不显示
    */
   const ActionBtns = ({className, ...props}) => {
     const { status } = mailData.info