feat: 显示WhatsApp; WABA仅在配置页切换 todo: 图文集等功能

src/components/DndModal.jsx

@@ -46,10 +46,10 @@ const DnDModal = ({ children, open, setOpen, onCancel, onMove, onResize, initial
       maskClosable={false}
       // theme='dark'
       // className={'!border !border-solid !border-indigo-500 rounded !p-2' }
-      className='!rounded-t !rounded-b-none !border !border-solid !border-indigo-300 !shadow-heavy '
       titleBarClassName='!bg-neutral-100 !rounded !rounded-b-none !border-none !p-3 !font-bold !text-slate-600'
       contentClassName='!p-2'
       footerClassName='!p-2'
+      className={`!rounded-t !rounded-b-none !border !border-solid !shadow-heavy ${props.rootClassName}`}
       zIndex={2}
       initialWidth={(mobile ? window.innerWidth : (initial.width || 680))} // window.innerWidth < 680
       initialHeight={(mobile ? window.innerHeight : (initial.height || 600))} // window.innerHeight < 700

src/components/LexicalEditor/styles.css

@@ -46,7 +46,7 @@
   text-align: center;
 } */
 
-h1 {
+.email-editor-wrapper h1 {
   font-size: 24px;
   color: #333;
 }
@@ -357,7 +357,7 @@ pre::-webkit-scrollbar-thumb {
   text-decoration: underline;
 }
 
-.emoji {
+.email-editor-wrapper .emoji {
   color: transparent;
   background-size: 16px 16px;
   background-position: center;

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

@@ -18,7 +18,7 @@ const ChatboxEmail = ({ onOpenEditor, onOpenEmail, ...message  }) => {
     );
   });
   const handlePreview = (message) => {
-    console.log('handlePreview');
+    // console.log('handlePreview');
     if (typeof onOpenEmail === 'function') {
       onOpenEmail(message);
     }

src/views/Conversations/Online/Input/EmailEditor.css

@@ -1,6 +1,7 @@
 .email-editor-wrapper .ant-upload-list.ant-upload-list-text{
     display: flex;
-    gap: 8px;
+    /* gap: 8px; */
+    flex-wrap: wrap;
 }
 .email-editor-wrapper .ant-upload-list-item-container{
     flex-basis: 200px;

src/views/Conversations/Online/Input/EmailEditorPopup.jsx

@@ -1,6 +1,6 @@
 import { createContext, useEffect, useState } from 'react';
-import { ConfigProvider, Button, Form, Input, Flex, Checkbox, Switch, Mentions, Popover, Popconfirm, Select, Space, Upload } from 'antd';
+import { ConfigProvider, Button, Form, Input, Flex, Checkbox, Switch, Mentions, Popover, Popconfirm, Select, Space, Upload, Divider } from 'antd';
-import { UploadOutlined } from '@ant-design/icons';
+import { DashOutlined, EllipsisOutlined, MenuOutlined, MoreOutlined, UploadOutlined } from '@ant-design/icons';
 import Modal from '@dckj/react-better-modal';
 import '@dckj/react-better-modal/dist/index.css';
 import DnDModal from '@/components/DndModal';
@@ -197,6 +197,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, quote = {}, ini
     <>
       <ConfigProvider theme={{ token: { colorPrimary: '#6366f1' } }}>
         <DnDModal
+          rootClassName='email-editor-wrapper  !border-indigo-300 '
           open={open}
           setOpen={setOpen}
           initial={{ top: isEmpty(reference) ? 20 : 74 }}
@@ -244,10 +245,11 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, quote = {}, ini
                 <Mentions // todo: 用客人列表
                   split='; '
                   options={[
-                    { value: 'afc163', label: 'afc163' },
+                    { value: 'lyt@hainatravel.com', label: 'OT' },
                     { value: 'zombieJ', label: 'zombieJ' },
                     { value: 'yesmeck', label: 'yesmeck' },
                   ]}
+                  placeholder='@'
                 />
                 <Flex gap={4}>
                   {!showCc && (
@@ -296,9 +298,26 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, reference, quote = {}, ini
               valuePropName='fileList'
               getValueFromEvent={normFile}
             >
-              <Upload {...uploadProps} name='file' >
+              <Flex justify='space-between'>
+                <Upload {...uploadProps} name='file' className='w-full' >
                   <Button icon={<UploadOutlined />}>附件</Button>
                 </Upload>
+                <Flex align={'center'} className='absolute right-0'>
+                  {/* todo: 添加图文集、支付链接 */}
+                  <Divider type='vertical' />
+                  <Button type={'link'}>图文集</Button>
+                  <Button type={'link'}>支付链接</Button>
+                  {/* 更多工具 */}
+                  {/* <Popover
+                    content={
+                      <div className='flex flex-col gap-2'>
+                        <Button type={'link'}>??</Button>
+                      </div>
+                    }
+                    trigger='click'
+                  ><MoreOutlined /></Popover> */}
+                </Flex>
+              </Flex>
             </Form.Item>
             <Form.Item name='content' hidden>
               <Input />

src/views/Conversations/Online/Input/InputComposer.jsx

@@ -280,7 +280,7 @@ const InputComposer = ({ isWABA, channel }) => {
         placeholder={
           !talkabled
             ? '请先选择会话'
-            : !textabled0 && isWABA
+            : !textabled0 && channel==='waba'
             ? '会话已超24h不活跃. 请发送打招呼消息激活对话💬.'
             : mobile === false
             ? 'Enter 发送, Shift+Enter 换行\n支持复制粘贴 [截图/文件] 以备发送'
@@ -301,7 +301,7 @@ const InputComposer = ({ isWABA, channel }) => {
       />
       <Flex justify={'space-between'} className=' bg-gray-200 p-1 rounded-b-0'>
         <Flex gap={4} className='*:text-primary *:rounded-none items-center'>
-          {isWABA && <InputTemplate key='templates' disabled={!talkabled} invokeSendMessage={invokeSendMessage} />}
+          {channel==='waba' && <InputTemplate key='templates' disabled={!talkabled} invokeSendMessage={invokeSendMessage} />}
           <InputEmoji key='emoji' disabled={!textabled} inputEmoji={addEmoji} />
           <InputMediaUpload key={'addNewMedia'} disabled={!textabled} {...{ invokeUploadFileMessage, invokeSendUploadMessage }} />
           {/* <Button type='text' className='' icon={<YoutubeOutlined />} size={'middle'} />

src/views/Conversations/Online/ReplyWrapper.jsx

@@ -57,10 +57,11 @@ const ReplyWrapper = () => {
   }, [activeMessages]);
 
   const replyTypes = [
-    { key: 'waba', label: mobile ? '' : (<WABASwitcher />), icon: <WABIcon />, children: <InputComposer isWABA channel={'waba'} /> },
+    // { key: 'waba', label: mobile ? '' : (<WABASwitcher />), icon: <WABIcon />, children: <InputComposer channel={'waba'} /> },
-    // { key: 'waba', label: 'WABA-Global Highlights', icon: <WABIcon />, children: <InputComposer isWABA channel={'waba'} /> },
+    { key: 'waba', label: mobile ? '' : 'WABA-Global Highlights', icon: <WABIcon />, children: <InputComposer channel={'waba'} /> }, // todo: 从配置读取
     { key: 'email', label: mobile ? '' : 'Email', icon: <MailOutlined className='text-indigo-500' />, children: <EmailComposer /> },
     // { key: 'whatsapp', label: mobile ? '' : 'WhatsApp', icon: <WhatsAppOutlined className='text-whatsapp' />, children: <InputComposer channel={'whatsapp'} /> },
+    { key: 'whatsapp', label: mobile ? '' : 'WhatsApp', icon: <WhatsAppOutlined className='text-whatsapp' />, children: <div className='p-2 py-4 text-center text-whatsapp bg-gray-200 rounded rounded-b-none border-gray-300 border-solid border border-b-0 border-x-0'>敬请期待</div> },
   ];
 
   return (