连接ws:// 传参opisn

src/lib/msgUtils.js

@@ -1,3 +1,4 @@
+import { v4 as uuid } from "uuid";
 
 export const replaceTemplateString = (str, replacements) => {
   let result = str;
@@ -23,21 +24,22 @@ export const replaceTemplateString = (str, replacements) => {
 export const sentMsgTypeMapped = {
   text: {
     type: 'text',
-    contentToSend: (msg) => ({ renderId: msg.id, to: msg.to, msgtype: 'text', msgcontent: { body: msg.text } }),
+    contentToSend: (msg) => ({ action: 'message', actionId: uuid(), renderId: msg.id, to: msg.to, msgtype: 'text', msgcontent: { body: msg.text } }),
     contentToRender: (msg) => ({ ...msg }),
   },
   whatsappTemplate: {
-    contentToSend: (msg) => ({ renderId: msg.id, to: msg.to, msgtype: 'template', msgcontent: msg.template }),
+    contentToSend: (msg) => ({ action: 'message', actionId: uuid(), renderId: msg.id, to: msg.to, msgtype: 'template', msgcontent: msg.template }),
     contentToRender: (msg) => {
       console.log(msg);
       const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({...r, [v.type]: v}), {}) : null;
       const templateParam = (templateDataMapped?.body?.parameters || []).map(e => e.text);
       const fillTemplate = templateParam.length ? replaceTemplateString(msg.template_origin.components.body?.[0]?.text || '', templateParam) : (msg.template_origin.components.body?.[0]?.text || '');
+      const footer = msg.template_origin.components?.footer?.[0]?.text || '';
       return {
         ...msg,
         type: 'text',
         title: msg.template_origin.components.header?.[0]?.text || '',
-        text: fillTemplate, // msg.template_origin.components.body?.[0]?.text || '',
+        text: `${fillTemplate}`, // msg.template_origin.components.body?.[0]?.text || '',
       };
     },
   },
@@ -60,6 +62,8 @@ export const whatsappMsgMapped = {
       return result?.whatsappMessage || null;
     },
     contentToRender: (msgcontent) => {
+      return null; // todo: 仅更新消息状态， 没有输出
+
       let contentObj = msgcontent?.whatsappMessage || msgcontent; // debug:
       if ((contentObj?.status === 'failed' )) {
         contentObj = {
@@ -68,7 +72,9 @@ export const whatsappMsgMapped = {
           id: contentObj.id,
           wamid: contentObj.id,
         };
+        return contentObj;
       }
+      return null;
       console.log('whatsapp.message.updated to render', contentObj);
       const _r = parseRenderMessageItem(contentObj);
       console.log('_r', _r);
@@ -144,12 +150,16 @@ export const whatsappMsgTypeMapped = {
   // 'contact-card-with-photo': 'contact-card-with-photo',
   // 'contact-card-with-photo-and-label': 'contact-card-with-photo-and-label',
 };
+/**
+ * render received msg
+ */
 export const parseRenderMessageItem = (msg) => {
   console.log('parseRenderMessageItem', msg);
   return {
     date: msg?.sendTime || '',
     ...(whatsappMsgTypeMapped?.[msg.type]?.data(msg) || {}),
-    ...(whatsappMsgTypeMapped?.[msg.type]?.type(msg) || { type: 'text' }), // type: whatsappMsgTypeMapped?.[msg.type]?.type || 'text',
+    ...(typeof whatsappMsgTypeMapped?.[msg.type]?.type === 'function' ? whatsappMsgTypeMapped?.[msg.type]?.type(msg) : { type: whatsappMsgTypeMapped?.[msg.type]?.type || 'text' }),
+    // type: whatsappMsgTypeMapped?.[msg.type]?.type || 'text',
     sender: msg.from,
     status: msg?.status || 'waiting',
     // title: msg.customerProfile.name,

src/lib/realTimeAPI.js

@@ -4,15 +4,16 @@ import { v4 as uuid } from "uuid";
 
 export class RealTimeAPI {
   constructor(param) {
-    this.webSocket = webSocket(param).pipe(
+    this.webSocket = webSocket(param)
-      retryWhen(errors =>
+    // .pipe(
-        errors.pipe(
+    //   retryWhen(errors =>
-          tap(val => console.error(`WebSocket connection failed with error: ${val}`)),
+    //     errors.pipe(
-          delay(5000), // retry after 5 seconds
+    //       tap(val => console.error(`WebSocket connection failed with error: ${val}`)),
-          take(5)
+    //       delay(5000), // retry after 5 seconds
-        )
+    //       take(5)
-      )
+    //     )
-    );
+    //   )
+    // );
   }
 
   getObservable() {

src/main.jsx

@@ -38,7 +38,7 @@ const router = createBrowserRouter([
       { path: 'order/follow', element: <OrderFollow /> },
       { path: 'chat/history', element: <ChatHistory /> },
       { path: 'sales/management', element: <SalesManagement /> },
-      { path: 'order/chat/:order_id', element: <Conversations /> },
+      { path: 'order/chat/:order_sn', element: <Conversations /> },
       { path: 'order/chat', element: <Conversations /> },
       { path: 'account/profile', element: <AccountProfile /> },
     ],

src/stores/Conversations/ConversationContext.js

@@ -18,14 +18,9 @@ export async function fetchJSON(url, data) {
   return await response.json();
 }
 
-// const API_HOST = 'http://202.103.68.144:8888';
 const API_HOST = 'http://202.103.68.144:8888';
-// const WS_URL = 'ws://202.103.68.144:8888/whatever/';
-const WS_URL = 'ws://202.103.68.157:8888/whatever/';
-// let realtimeAPI = new RealTimeAPI({ url: URL, protocol: 'aaa' });
-let realtimeAPI = new RealTimeAPI({ url: WS_URL, protocol: 'WhatsApp' });
 
-export const useConversations = () => {
+export const useConversations = ({loginUser, realtimeAPI}) => {
 
   const [errors, setErrors] = useState([]);
   const [messages, setMessages] = useState([]); // active conversation
@@ -42,12 +37,11 @@ export const useConversations = () => {
   }, [currentConversation]);
 
   useEffect(() => {
-    console.log(errors, 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww');
+    console.log(errors, 'eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee');
 
     return () => {};
   }, [errors])
 
-
   useEffect(() => {
     realtimeAPI.onError(addError.bind(null, 'Error'));
     realtimeAPI.onMessage(handleMessage);
@@ -165,6 +159,7 @@ export const useConversations = () => {
         if (ele.id === message.id) {
           return {...ele, id: message.id, status: message.status}; // todo: renderId 需要返回
         }
+        // return {...ele, status: 'failed', dateString: '❌'}; // debug: 0
         return ele;
       });
     });
@@ -180,8 +175,11 @@ export const useConversations = () => {
     if (!result) {
       return false;
     }
+    if (errcode !== 0) {
+      // addError('Error Connecting to Server');
+    }
     if (typeof result.type === 'string' && result.type === 'error') {
-      addError('Error Connecting to Server');
+      // addError('Error Connecting to Server');
     }
     console.log(result.type, 'result.type');
     const msgObj = whatsappMsgMapped[result.type].getMsg(result);

src/views/Conversations/Components/InputBox.jsx

@@ -4,11 +4,12 @@ import { Input, Button, Tabs, List, Space, Popover, Flex } from 'antd';
 import { useConversationContext } from '@/stores/Conversations/ConversationContext';
 import { LikeOutlined, MessageOutlined, StarOutlined, SendOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons';
 import { isEmpty } from '@/utils/utils';
+import { v4 as uuid } from "uuid";
 
 const InputBox = (({ onSend }) => {
   const { currentConversation, templates } = useConversationContext();
   const [textContent, setTextContent] = useState('');
-  console.log('ttt');
+  console.log('ttt', uuid());
 
   const handleSendText = () => {
     // console.log(textContent);
@@ -19,7 +20,7 @@ const InputBox = (({ onSend }) => {
         sender: 'me',
         // from: '',
         to: currentConversation.channel_id,
-        id: Date.now().toString(16),
+        id: uuid(), // Date.now().toString(16),
         date: new Date(),
         status: 'waiting',
         //         renderAddCmp: () => (
@@ -43,7 +44,7 @@ const InputBox = (({ onSend }) => {
       const msgObj = {
         type: 'whatsappTemplate',
         to: currentConversation.channel_id,
-        id: Date.now().toString(16),
+        id: uuid(), // Date.now().toString(16),
         date: new Date(),
         status: 'waiting',
         statusTitle: 'Ready to send',

src/views/Conversations/Components/Messages.jsx

@@ -31,15 +31,20 @@ const Messages = (() => {
     <div>
       {messagesList.map((message, index) => (
         <MessageBox
-          className={message.sender === 'me' ? 'whatsappme-container' : ''}
+          // className={message.sender === 'me' ? 'whatsappme-container' : ''}
           key={message.id}
           position={message.sender === 'me' ? 'right' : 'left'}
           {...message}
           onOpen={() => handlePreview(message)}
-          letterItem={{ id: 1, letter: 'AS' }}
+          // letterItem={{ id: 1, letter: 'AS' }}
           // 'waiting'| 'sent' | 'received' | 'read'
-          styles={{backgroundColor: message.sender === 'me' ? '#ccd5ae' : 'inherit'}}
+          styles={{backgroundColor: message.sender === 'me' ? '#ccd5ae' : ''}}
-          notchStyle={{fill: '#ccd5ae'}}
+          {...(message.sender === 'me' ? {
+            style: { backgroundColor: '#ccd5ae' },
+            notchStyle: {fill: '#ccd5ae'},
+            className: 'whatsappme-container',
+          } : {})}
+          // notchStyle={{fill: '#ccd5ae'}}
           // copiableDate={false}
         />
       ))}

src/views/Conversations/ConversationProvider.jsx

@@ -1,9 +1,28 @@
+import { useContext } from 'react';
 import { ConversationContext, useConversations, } from '@/stores/Conversations/ConversationContext';
+import { AuthContext } from '@/stores/AuthContext';
+import { RealTimeAPI } from '@/lib/realTimeAPI';
 
-export const ConversationProvider = ({ children }) => {
+const WS_URL = 'ws://202.103.68.157:8888/whatever/';
 
-  const conversations = useConversations();
+export const ConversationProvider = ({ children, loginUser, realtimeAPI }) => {
+
+  const conversations = useConversations({loginUser, realtimeAPI});
   return <ConversationContext.Provider value={conversations}>{children}</ConversationContext.Provider>;
 };
 
-export default ConversationProvider;
+// export default ConversationProvider;
+
+const AuthAndConversationProvider = ({ children }) => {
+  const { loginUser } = useContext(AuthContext);
+  const {userId} = loginUser;
+  const realtimeAPI = new RealTimeAPI({ url: `${WS_URL}?opisn=${userId || ''}&aa=m&_spam=${Date.now().toString()}`, protocol: 'WhatsApp' });
+
+  return (
+    <ConversationProvider loginUser={loginUser} realtimeAPI={realtimeAPI} >
+      {children}
+    </ConversationProvider>
+  );
+};
+
+export default AuthAndConversationProvider;

src/views/Conversations/Conversations.css

@@ -20,16 +20,9 @@
 }
 
 /** Chat Window */
-.chatwindow-wrapper .rce-container-mbox.whatsappme-container .rce-mbox{
-    background-color: darkseagreen;
-    /* box-shadow: 0px 1px 1px 1px darkseagreen; */
-}
 .chatwindow-wrapper .rce-container-mbox .rce-mbox{
     max-width: 400px;
 }
-.chatwindow-wrapper .rce-container-mbox.whatsappme-container .rce-mbox-right-notch{
-    fill: darkseagreen;
-}
 .chatwindow-wrapper .rce-mbox-time-block{
     background: linear-gradient(0deg,#00000014,#0000);
     color: #00000073;