连接ws:// 传参opisn

1 year ago · 491facce74
parent 806ef7f90f
commit 491facce74
8 changed files with 67 additions and 40 deletions
--- a/src/lib/msgUtils.js
+++ b/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,
--- a/src/lib/realTimeAPI.js
+++ b/src/lib/realTimeAPI.js
@ -4,15 +4,16 @@ import { v4 as uuid } from "uuid";

 export class RealTimeAPI {
  constructor(param) {
-    this.webSocket = webSocket(param).pipe(
-      retryWhen(errors =>
-        errors.pipe(
-          tap(val => console.error(`WebSocket connection failed with error: ${val}`)),
-          delay(5000), // retry after 5 seconds
-          take(5)
-        )
-      )
-    );
+    this.webSocket = webSocket(param)
+    // .pipe(
+    //   retryWhen(errors =>
+    //     errors.pipe(
+    //       tap(val => console.error(`WebSocket connection failed with error: ${val}`)),
+    //       delay(5000), // retry after 5 seconds
+    //       take(5)
+    //     )
+    //   )
+    // );
  }

  getObservable() {
--- a/src/main.jsx
+++ b/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 /> },
    ],
--- a/src/stores/Conversations/ConversationContext.js
+++ b/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);
--- a/src/views/Conversations/Components/InputBox.jsx
+++ b/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',
--- a/src/views/Conversations/Components/Messages.jsx
+++ b/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'}}
-          notchStyle={{fill: '#ccd5ae'}}
+          styles={{backgroundColor: message.sender === 'me' ? '#ccd5ae' : ''}}
+          {...(message.sender === 'me' ? {
+            style: { backgroundColor: '#ccd5ae' },
+            notchStyle: {fill: '#ccd5ae'},
+            className: 'whatsappme-container',
+          } : {})}
+          // notchStyle={{fill: '#ccd5ae'}}
          // copiableDate={false}
        />
      ))}
--- a/src/views/Conversations/ConversationProvider.jsx
+++ b/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;
--- a/src/views/Conversations/Conversations.css
+++ b/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;