WhatsApp发送消息

src/actions/WaiAction.js

@@ -0,0 +1,15 @@
+import { fetchJSON, postForm, postJSON } from '@/utils/request';
+import { API_HOST, WAI_HOST } from '@/config';
+
+export const postSendMsg = async (body) => {
+  const { attaList=[], atta, content, ...bodyData } = body;
+  const formData = new FormData();
+  Object.keys(bodyData).forEach(function (key) {
+    formData.append(key, bodyData[key]);
+  });
+  attaList.forEach(function (item) {
+    formData.append('attachment', item);
+  });
+  const { result } = await postJSON(`${WAI_HOST}/messages/text`, body);
+  return result;
+};

src/config.js

@@ -9,6 +9,7 @@
 // export const API_HOST = 'http://202.103.68.144:8889/v2';
 // export const WS_URL = 'ws://202.103.68.144:8889';
 // export const EMAIL_HOST = 'http://202.103.68.231:888/service-mail';
+export const WAI_HOST = 'http://202.103.68.93:3031/api/v1/whatsapp';
 export const EMAIL_ATTA_HOST = 'https://p9axztuwd7x8a7.mycht.cn/attatchment'; // 邮件附件
 // prod:
 export const EMAIL_HOST = 'https://p9axztuwd7x8a7.mycht.cn/mail-server/service-mail';

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

@@ -8,6 +8,11 @@ import { useShallow } from 'zustand/react/shallow';
 import { WABIcon } from '@/components/Icons';
 import ChannelLogo from './ChannelLogo';
 
+const outboundStyle = {
+  'waba': { color: '#ccd4ae' },
+  'whatsapp': { color: '#d9fdd3' },
+}
+
 const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, setNewChatFormValues, scrollToMessage, focusMsg, ...message }) => {
   const { message: appMessage } = App.useApp();
   const setReferenceMsg = useConversationStore(useShallow((state) => state.setReferenceMsg));
@@ -112,7 +117,7 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
       {...(message.sender === 'me'
         ? {
             // styles: { backgroundColor: '#ccd4ae' },
-            notchStyle: { fill: '#ccd4ae' }, // todo: channel[WhatsApp] color '#d9fdd3'
+            notchStyle: { fill: outboundStyle[message.msg_source.toLowerCase()].color },
             title: <><ChannelLogo channel={message.msg_source} />&nbsp;{message.wabaName}&nbsp;-&nbsp;{message.title}</>,
           }
         : {
@@ -126,7 +131,7 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
         focusMsg === message.id ? 'message-box-focus' : '',
         message.status === 'failed' ? 'failed-msg' : '',
         // '*:bg-waba-me'
-        message.sender === 'me' ? '*:!bg-waba-me' : '', // todo: channel color
+        message.sender === 'me' ? `*:!bg-${message.msg_source.toLowerCase()}-me` : '',
       ].join(' ')}
       {...(message.type === 'meetingLink'
         ? {

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

@@ -12,6 +12,7 @@ const ChannelLogo = ({channel, className, ...props}) => {
     case 'waba':
       return <WABIcon key={channel} className={`text-whatsapp ${className}  `} />;
     case 'wa':
+    case 'whatsapp':
       return <WhatsAppOutlined key={channel} className={`text-whatsapp ${className}  `} />;
     case 'email':
       return <MailOutlined key={channel} className={`text-indigo-500 ${className} `} />

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

@@ -21,7 +21,7 @@ const ComposerTools = ({ channel, invokeSendUploadMessage, invokeSendMessage, in
 
         <InputEmoji key='emoji' disabled={!talkabled} inputEmoji={inputEmoji} />
 
-        {['waba', 'wa'].includes(channel) && <InputMediaUpload key={'addNewMedia'} disabled={!talkabled} {...{ invokeUploadFileMessage, invokeSendUploadMessage }} />}
+        {['waba', 'wa', 'whatsapp'].includes(channel) && <InputMediaUpload key={'addNewMedia'} disabled={!talkabled} {...{ invokeUploadFileMessage, invokeSendUploadMessage }} />}
 
         <PaymentlinkBtn />
         <SnippestBtn />

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

@@ -14,6 +14,7 @@ import dayjs from 'dayjs';
 import useStyleStore from '@/stores/StyleStore';
 import ComposerTools from './ComposerTools';
 import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions } from "@/stores/OrderStore";
+import { postSendMsg } from '@/actions/WaiAction';
 
 const ButtonStyleClsMapped =
 {
@@ -26,7 +27,7 @@ const InputComposer = ({ channel, currentActive }) => {
   const { message: appMessage, notification: appNotification } = App.useApp();
   const [mobile] = useStyleStore((state) => [state.mobile]);
 
-  const {userId, whatsAppBusiness} = useAuthStore((state) => state.loginUser);
+  const {userId, whatsAppBusiness, whatsAppNo} = useAuthStore((state) => state.loginUser);
   const [customerDetail] = useOrderStore((s) => [s.customerDetail])
 
   const websocket = useConversationStore((state) => state.websocket);
@@ -66,7 +67,8 @@ const InputComposer = ({ channel, currentActive }) => {
         setFromIM(whatsAppBusiness || DEFAULT_WABA)
         break
       case 'wa':
-        setFromIM('') // todo: 个人WhatsApp号
+      case 'whatsapp':
+        setFromIM(whatsAppNo)
         break
 
       default:
@@ -87,7 +89,7 @@ const InputComposer = ({ channel, currentActive }) => {
   const textInputRef = useRef(null);
   const [textContent, setTextContent] = useState('');
 
-  const invokeSendMessage = (msgObj) => {
+  const invokeSendMessage = async (msgObj) => {
     if (isEmpty(toIM)) {
       appNotification.warning({ message: '缺少WhatsApp号码, 请先在会话列表右键菜单编辑联系人', placement: 'top' });
       return false
@@ -108,7 +110,13 @@ const InputComposer = ({ channel, currentActive }) => {
     // olog('sendMessage------------------', msgObjMerge)
     const contentToSend = sentMsgTypeMapped[msgObjMerge.type].contentToSend(msgObjMerge);
     // console.log('content to send-------------------------------------', contentToSend);
-    websocket.sendMessage({ ...contentToSend, opi_sn: userId, coli_sn: currentConversation.coli_sn || '', conversationid: currentConversation.sn, });
+
+    if (channel === 'whatsapp') {
+      const waObj = { from: fromIM.replace('+', ''), to: toIM.replace('+', ''), content: msgObj.text, };
+      await postSendMsg(waObj);
+    } else if (channel === 'waba') {
+      websocket.sendMessage({ ...contentToSend, opi_sn: userId, coli_sn: currentConversation.coli_sn || '', conversationid: currentConversation.sn, });
+    }
     const contentToRender = sentMsgTypeMapped[msgObjMerge.type].contentToRender(msgObjMerge);
     // console.log(contentToRender, 'contentToRender  sendMessage------------------');
     sentOrReceivedNewMessage(contentToRender.conversationid, contentToRender);
@@ -365,6 +373,6 @@ const InputComposer = ({ channel, currentActive }) => {
   );
 };
 
-InputComposer.propTypes = { channel: PropTypes.oneOf(['waba', 'wa']) };
+InputComposer.propTypes = { channel: PropTypes.oneOf(['waba', 'whatsapp']) };
 
 export default InputComposer;

src/views/Conversations/Online/MessagesList.jsx

@@ -44,7 +44,7 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
   // eslint-disable-next-line react/display-name
   const MessageBoxWithRef = forwardRef((props, ref) => (
     <div ref={ref}>
-      {(props.msg_source || '').toLowerCase() === 'waba'
+      {['waba', 'wa', 'whatsapp'].includes((props.msg_source || '').toLowerCase())
         && <BubbleIM {...props} {...{ scrollToMessage, focusMsg, handleContactClick, setNewChatModalVisible, setNewChatFormValues, handlePreview }} />}
       {props.msg_source === 'email' && <BubbleEmail {...props} onOpenEditor={listProps.onOpenEditor} onOpenEmail={listProps.onOpenEmail} />}
     </div>