断开连接状态; 发送按钮; 同步显示其他客户端发送的实时消息

src/lib/msgUtils.js

@@ -79,7 +79,14 @@ const whatsappMsgMapped = {
       // * 仅更新消息状态, 没有输出
       return null;
     },
-    contentToUpdate: (msgcontent) => ({ ...msgcontent, id: msgcontent.wamid, status: msgStatusRenderMapped[(msgcontent?.status || 'failed')], dateString: msgcontent.status==='failed' ? '发送失败 ❌' : '', }),
+    contentToUpdate: (msgcontent) => ({
+      ...msgcontent,
+      ...parseRenderMessageItem(msgcontent),
+      id: msgcontent.wamid,
+      status: msgStatusRenderMapped[(msgcontent?.status || 'failed')],
+      sender: 'me',
+      dateString: msgcontent.status==='failed' ? '发送失败 ❌' : '',
+    }),
   },
 };
 export const msgStatusRenderMapped = {
@@ -175,7 +182,7 @@ export const whatsappMsgTypeMapped = {
     type: 'text',
     data: (msg) => {
       const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({...r, [v.type]: v}), {}) : null;
-      return { id: msg.wamid, text: templateDataMapped?.body?.parameters?.[0]?.text || '',  title: msg.template.name }
+      return { id: msg.wamid, text: templateDataMapped?.body?.text || templateDataMapped?.body?.parameters?.[0]?.text || '',  title: msg.template.name }
     },
   },
 };
@@ -202,6 +209,7 @@ export const parseRenderMessageItem = (msg) => {
 export const parseRenderMessageList = (messages, conversationid = null) => {
   return messages.map((msg) => {
     const msgContent = msg.msgtext_AsJOSN;
+    msgContent.template = msg.msgtype === 'template' ? { ...msgContent.template, ...msg.template_AsJOSN } : {};
     const msgType = msgContent.type;
     // const parseMethod = msgContent.bizType === 'whatsapp' ? cloneDeep(whatsappMsgTypeMapped) : {};
     return {

src/reducers/ConversationReducer.js

@@ -65,6 +65,11 @@ const ConversationReducer = (state = initialState, action) => {
         }
         return ele;
       });
+      // 显示会话中其他客户端发送的消息
+      const targetMsgsIds = targetMsgs.map((ele) => ele.id);
+      if ( ! targetMsgsIds.includes(message.id)) {
+        targetMsgs.push(message);
+      }
 
       // 更新列表的时间
       const newConversationList = conversationsList.map((ele) => {
@@ -107,6 +112,10 @@ const ConversationReducer = (state = initialState, action) => {
         ...state,
         activeConversations: { ...activeConversations, [String(targetId)]: [...targetMsgs, message] },
         conversationsList: newConversationList,
+        currentConversation: {
+          ...state.currentConversation,
+          last_received_time: String(targetId) === String(currentConversation.sn) ? message.date : currentConversation.last_received_time,
+        },
       };
     }
     case NAME_SPACE + 'ADD_ERROR': {

src/utils/utils.js

@@ -116,6 +116,7 @@ export function omit(object, keysToOmit) {
  * 深拷贝
  */
 export function cloneDeep(value) {
+  // return structuredClone(value);
   if (typeof value !== 'object' || value === null) {
     return value;
   }

src/views/Conversations/Components/InputComposer.jsx

@@ -67,7 +67,7 @@ const InputBox = () => {
         <Flex gap={4} className='divide-y-0 divide-x divide-solid divide-gray-500 '>
           <InputTemplate key='templates' disabled={!talkabled} invokeSendMessage={invokeSendMessage} />
         </Flex>
-        <Button key={'send-btn'} type='primary' size='middle' icon={<SendOutlined />} disabled={!talkabled}>
+        <Button key={'send-btn'} onClick={handleSendText} type='primary' size='middle' icon={<SendOutlined />} disabled={!talkabled}>
           Send
         </Button>
       </Flex>

src/views/Conversations/Components/Messages.jsx

@@ -11,7 +11,7 @@ const Messages = () => {
   const messagesEndRef = useRef(null);
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messagesList.length]);
+  }, [messagesList, currentConversation.last_received_time]);
 
   const [previewVisible, setPreviewVisible] = useState(false);
   const [previewSrc, setPreviewSrc] = useState();

src/views/Conversations/Components/MessagesHeader.jsx

@@ -9,7 +9,7 @@ const MessagesHeader = () => {
   const { websocketOpened, websocketRetrying, websocketRetrytimes, currentConversation } = useConversationState();
   return (
     <>
-      {!websocketOpened && <Alert type='error' message='断开连接' banner />}
+      {websocketOpened===false && <Alert type='error' message='断开连接' banner />}
       {websocketRetrying && websocketRetrytimes > 0 && <Alert type={'warning'} message={`正在重连, ${websocketRetrytimes}次...`} banner icon={<LoadingOutlined />} />}
       <Flex gap={16} className='p-1'>
         {currentConversation.customer_name && <Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${currentConversation.customer_name}`} />}