Haina
/
Global-sales
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

todo: 更新已发送的消息的状态. renderId

Browse Source
dev/chat
Lei OT 2 years ago
parent 7c23a75c26
commit 3f31656630
6 changed files with 203 additions and 259 deletions
Show Stats Download Patch File Download Diff File

11
src/lib/msgUtils.js
Unescape Escape View File

@ -57,7 +57,10 @@ export const whatsappMsgMapped = {
'whatsapp.message.updated': { 'whatsapp.message.updated': {
getMsg: (result) => { getMsg: (result) => {
console.log('getMsg', result); console.log('getMsg', result);
let contentObj = result?.whatsappMessage || null; return result?.whatsappMessage || null;
},
contentToRender: (msgcontent) => {
let contentObj = msgcontent?.whatsappMessage || msgcontent; // debug:
if ((contentObj?.status === 'failed' )) { if ((contentObj?.status === 'failed' )) {
contentObj = { contentObj = {
type: 'error', type: 'error',
@ -66,16 +69,12 @@ export const whatsappMsgMapped = {
wamid: contentObj.id, wamid: contentObj.id,
}; };
} }
return contentObj;
},
contentToRender: (msgcontent) => {
const contentObj = msgcontent?.whatsappMessage || msgcontent; // debug:
console.log('whatsapp.message.updated to render', contentObj); console.log('whatsapp.message.updated to render', contentObj);
const _r = parseRenderMessageItem(contentObj); const _r = parseRenderMessageItem(contentObj);
console.log('_r', _r); console.log('_r', _r);
return parseRenderMessageItem(contentObj); return parseRenderMessageItem(contentObj);
}, },
contentToUpdate: (msg) => ({ ...msg, id: msg.wamid, stauts: msg.status }), contentToUpdate: (msgcontent) => ({ ...msgcontent, id: msgcontent.id, status: msgcontent.status }),
}, },
}; };
export const whatsappMsgTypeMapped = { export const whatsappMsgTypeMapped = {

295
src/stores/ConversationContext.js
Unescape Escape View File

@ -1,7 +1,7 @@
import React, { createContext, useContext, useState, useEffect, useRef } from 'react'; import React, { createContext, useContext, useState, useEffect, useRef } from 'react';
import { RealTimeAPI } from '@/lib/realTimeAPI'; import { RealTimeAPI } from '@/lib/realTimeAPI';
import { whatsappMsgMapped, sentMsgTypeMapped, parseRenderMessageList } from '@/lib/msgUtils'; import { whatsappMsgMapped, sentMsgTypeMapped } from '@/lib/msgUtils';
import { groupBy } from '@/utils/utils'; import { groupBy, isEmpty } from '@/utils/utils';
export const ConversationContext = createContext(); export const ConversationContext = createContext();
export const useConversationContext = () => useContext(ConversationContext); export const useConversationContext = () => useContext(ConversationContext);
@ -41,6 +41,13 @@ export const useConversations = () => {
currentConversationRef.current = currentConversation; currentConversationRef.current = currentConversation;
}, [currentConversation]); }, [currentConversation]);
useEffect(() => {
console.log(errors, 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww');
return () => {};
}, [errors])
useEffect(() => { useEffect(() => {
realtimeAPI.onError(addError.bind(null, 'Error')); realtimeAPI.onError(addError.bind(null, 'Error'));
realtimeAPI.onMessage(handleMessage); realtimeAPI.onMessage(handleMessage);
@ -156,16 +163,10 @@ export const useConversations = () => {
setMessages((prevMessages) => { setMessages((prevMessages) => {
return prevMessages.map(ele => { return prevMessages.map(ele => {
if (ele.id === message.id) { if (ele.id === message.id) {
return {...ele, status: message.status}; return {...ele, id: message.id, status: message.status};
} }
return ele; return ele;
}); });
// const updatedList = [...prevMessages];
// const index = prevMessages.findIndex((_m) => _m.id === message.id);
// if (index !== -1) {
// updatedList[index] = message;
// }
// return updatedList;
}); });
}; };
@ -186,12 +187,14 @@ export const useConversations = () => {
const msgObj = whatsappMsgMapped[result.type].getMsg(result); const msgObj = whatsappMsgMapped[result.type].getMsg(result);
const msgRender = whatsappMsgMapped[result.type].contentToRender(msgObj); const msgRender = whatsappMsgMapped[result.type].contentToRender(msgObj);
const msgUpdate = whatsappMsgMapped[result.type].contentToUpdate(msgObj); const msgUpdate = whatsappMsgMapped[result.type].contentToUpdate(msgObj);
console.log('msgRender', msgRender, msgUpdate); console.log('msgRender msgUpdate', msgRender, msgUpdate);
if (result.type === 'whatsapp.message.updated') { if (result.type === 'whatsapp.message.updated') {
updateMessage(msgRender); updateMessage(msgUpdate);
return false; // return false;
} }
if ( ! isEmpty(msgRender)) {
addMessage(msgRender); addMessage(msgRender);
}
console.log('handleMessage*******************', ); console.log('handleMessage*******************', );
}; };
@ -216,141 +219,147 @@ export const useConversations = () => {
customerOrderProfile, customerOrderProfile,
}; };
}; };
// test: 0 "type": "whatsapp.inbound_message.received", // test: 0 "type": "whatsapp.inbound_message.received",
const all = [ const all = [
// { {
// 'id': '65b06828619a1d82777eb4c6', 'id': '65b06828619a1d82777eb4c6',
// 'wamid': 'wamid.HBgNODYxMzMxNzgzNTU4NhUCABIYFDNBQzNDNzBFNjFCREJBNDIyQjQ2AA==', 'wamid': 'wamid.HBgNODYxMzMxNzgzNTU4NhUCABIYFDNBQzNDNzBFNjFCREJBNDIyQjQ2AA==',
// 'wabaId': '190290134156880', 'wabaId': '190290134156880',
// 'from': '+8613317835586', 'from': '+8613317835586',
// 'customerProfile': { 'customerProfile': {
// 'name': 'qqs', 'name': 'qqs',
// }, },
// 'to': '+8617607730395', 'to': '+8617607730395',
// 'sendTime': '2024-01-24T01:30:14.000Z', 'sendTime': '2024-01-24T01:30:14.000Z',
// 'type': 'image', 'type': 'image',
// 'image': { 'image': {
// 'link': 'link':
// 'https://api.ycloud.com/v2/whatsapp/media/download/934379820978291?sig=t%3D1706059814%2Cs%3D91a79a0e4007ad2f6a044a28307affe663f7f81903b3537bd80e758d3c0d0563&payload=eyJpZCI6IjkzNDM3OTgyMDk3ODI5MSIsIndhYmFJZCI6IjE5MDI5MDEzNDE1Njg4MCIsImluYm91bmRNZXNzYWdlSWQiOiI2NWIwNjgyODYxOWExZDgyNzc3ZWI0YzYiLCJtaW1lVHlwZSI6ImltYWdlL2pwZWciLCJzaGEyNTYiOiJPVTJjdkN2eHplMUdMMmQ5NUxyTGVaNmpNb2ZscUZYM1RvcXdTTUNWZkxNPSJ9', 'https://api.ycloud.com/v2/whatsapp/media/download/934379820978291?sig=t%3D1706059814%2Cs%3D91a79a0e4007ad2f6a044a28307affe663f7f81903b3537bd80e758d3c0d0563&payload=eyJpZCI6IjkzNDM3OTgyMDk3ODI5MSIsIndhYmFJZCI6IjE5MDI5MDEzNDE1Njg4MCIsImluYm91bmRNZXNzYWdlSWQiOiI2NWIwNjgyODYxOWExZDgyNzc3ZWI0YzYiLCJtaW1lVHlwZSI6ImltYWdlL2pwZWciLCJzaGEyNTYiOiJPVTJjdkN2eHplMUdMMmQ5NUxyTGVaNmpNb2ZscUZYM1RvcXdTTUNWZkxNPSJ9',
// 'id': '934379820978291', 'id': '934379820978291',
// 'sha256': 'OU2cvCvxze1GL2d95LrLeZ6jMoflqFX3ToqwSMCVfLM=', 'sha256': 'OU2cvCvxze1GL2d95LrLeZ6jMoflqFX3ToqwSMCVfLM=',
// 'mime_type': 'image/jpeg', 'mime_type': 'image/jpeg',
// }, },
// }, },
// { {
// 'id': '65b06ce6619a1d8277c97fc0', 'id': '65b06ce6619a1d8277c97fc0',
// 'wamid': 'wamid.HBgNODYxMzMxNzgzNTU4NhUCABIYFDNBMUJBOUZCODY4NkNBMkM2NUEzAA==', 'wamid': 'wamid.HBgNODYxMzMxNzgzNTU4NhUCABIYFDNBMUJBOUZCODY4NkNBMkM2NUEzAA==',
// 'wabaId': '190290134156880', 'wabaId': '190290134156880',
// 'from': '+8613317835586', 'from': '+8613317835586',
// 'customerProfile': { 'customerProfile': {
// 'name': 'qqs', 'name': 'qqs',
// }, },
// 'to': '+8617607730395', 'to': '+8617607730395',
// 'sendTime': '2024-01-24T01:50:29.000Z', 'sendTime': '2024-01-24T01:50:29.000Z',
// 'type': 'text', 'type': 'text',
// 'text': { 'text': {
// 'body': 'eeee', 'body': 'eeee',
// }, },
// }, },
// { {
// 'id': '65b06b2f619a1d8277b5ab06', 'id': '65b06b2f619a1d8277b5ab06',
// 'wamid': 'wamid.HBgNODYxMzMxNzgzNTU4NhUCABIYFDNBRkU0RUZGRUI1OUQzQUFBMEExAA==', 'wamid': 'wamid.HBgNODYxMzMxNzgzNTU4NhUCABIYFDNBRkU0RUZGRUI1OUQzQUFBMEExAA==',
// 'wabaId': '190290134156880', 'wabaId': '190290134156880',
// 'from': '+8613317835586', 'from': '+8613317835586',
// 'customerProfile': { 'customerProfile': {
// 'name': 'qqs', 'name': 'qqs',
// }, },
// 'to': '+8617607730395', 'to': '+8617607730395',
// 'sendTime': '2024-01-24T01:43:09.000Z', 'sendTime': '2024-01-24T01:43:09.000Z',
// 'type': 'audio', 'type': 'audio',
// 'audio': { 'audio': {
// 'link': 'link':
// 'https://api.ycloud.com/v2/whatsapp/media/download/901696271448320?sig=t%3D1706060589%2Cs%3Dca75dbd57e4867783390c913491263f07c9738d69c141d4ae622c76df9fa033b&payload=eyJpZCI6IjkwMTY5NjI3MTQ0ODMyMCIsIndhYmFJZCI6IjE5MDI5MDEzNDE1Njg4MCIsImluYm91bmRNZXNzYWdlSWQiOiI2NWIwNmIyZjYxOWExZDgyNzdiNWFiMDYiLCJtaW1lVHlwZSI6ImF1ZGlvL29nZzsgY29kZWNzPW9wdXMiLCJzaGEyNTYiOiJoZUNSUDdEMjM3bG9ydkZ4eFhSdHZpU1ZsNDR3Rlk4TytaMFhic2k5cy9rPSJ9', 'https://api.ycloud.com/v2/whatsapp/media/download/901696271448320?sig=t%3D1706060589%2Cs%3Dca75dbd57e4867783390c913491263f07c9738d69c141d4ae622c76df9fa033b&payload=eyJpZCI6IjkwMTY5NjI3MTQ0ODMyMCIsIndhYmFJZCI6IjE5MDI5MDEzNDE1Njg4MCIsImluYm91bmRNZXNzYWdlSWQiOiI2NWIwNmIyZjYxOWExZDgyNzdiNWFiMDYiLCJtaW1lVHlwZSI6ImF1ZGlvL29nZzsgY29kZWNzPW9wdXMiLCJzaGEyNTYiOiJoZUNSUDdEMjM3bG9ydkZ4eFhSdHZpU1ZsNDR3Rlk4TytaMFhic2k5cy9rPSJ9',
// 'id': '901696271448320', 'id': '901696271448320',
// 'sha256': 'heCRP7D237lorvFxxXRtviSVl44wFY8O+Z0Xbsi9s/k=', 'sha256': 'heCRP7D237lorvFxxXRtviSVl44wFY8O+Z0Xbsi9s/k=',
// 'mime_type': 'audio/ogg; codecs=opus', 'mime_type': 'audio/ogg; codecs=opus',
// }, },
// }, },
// { {
// 'id': '65b06b12619a1d8277b3c0c4', 'id': '65b06b12619a1d8277b3c0c4',
// 'wamid': 'wamid.HBgNODYxMzMxNzgzNTU4NhUCABIYFDNBREZEMEM0MURDNjJGREVEQjY3AA==', 'wamid': 'wamid.HBgNODYxMzMxNzgzNTU4NhUCABIYFDNBREZEMEM0MURDNjJGREVEQjY3AA==',
// 'wabaId': '190290134156880', 'wabaId': '190290134156880',
// 'from': '+8613317835586', 'from': '+8613317835586',
// 'customerProfile': { 'customerProfile': {
// 'name': 'qqs', 'name': 'qqs',
// }, },
// 'to': '+8617607730395', 'to': '+8617607730395',
// 'sendTime': '2024-01-24T01:42:40.000Z', 'sendTime': '2024-01-24T01:42:40.000Z',
// 'type': 'video', 'type': 'video',
// 'video': { 'video': {
// 'link': 'link':
// 'https://api.ycloud.com/v2/whatsapp/media/download/742404324517058?sig=t%3D1706060560%2Cs%3D53eeb1508c2103e310fb14a72563a8e07c5a84c7e6192a25f3608ac9bea32334&payload=eyJpZCI6Ijc0MjQwNDMyNDUxNzA1OCIsIndhYmFJZCI6IjE5MDI5MDEzNDE1Njg4MCIsImluYm91bmRNZXNzYWdlSWQiOiI2NWIwNmIxMjYxOWExZDgyNzdiM2MwYzQiLCJtaW1lVHlwZSI6InZpZGVvL21wNCIsInNoYTI1NiI6IlNJcjRlZFlPb1BDTGtETEgrVTY2d3dkMDgra2JndFV5OHRDd2RjQU5FaFU9In0', 'https://api.ycloud.com/v2/whatsapp/media/download/742404324517058?sig=t%3D1706060560%2Cs%3D53eeb1508c2103e310fb14a72563a8e07c5a84c7e6192a25f3608ac9bea32334&payload=eyJpZCI6Ijc0MjQwNDMyNDUxNzA1OCIsIndhYmFJZCI6IjE5MDI5MDEzNDE1Njg4MCIsImluYm91bmRNZXNzYWdlSWQiOiI2NWIwNmIxMjYxOWExZDgyNzdiM2MwYzQiLCJtaW1lVHlwZSI6InZpZGVvL21wNCIsInNoYTI1NiI6IlNJcjRlZFlPb1BDTGtETEgrVTY2d3dkMDgra2JndFV5OHRDd2RjQU5FaFU9In0',
// 'caption': 'and', 'caption': 'and',
// 'id': '742404324517058', 'id': '742404324517058',
// 'sha256': 'SIr4edYOoPCLkDLH+U66wwd08+kbgtUy8tCwdcANEhU=', 'sha256': 'SIr4edYOoPCLkDLH+U66wwd08+kbgtUy8tCwdcANEhU=',
// 'mime_type': 'video/mp4', 'mime_type': 'video/mp4',
// }, },
// }, },
// { {
// 'id': '65b06aa7619a1d8277ac806e', 'id': '65b06aa7619a1d8277ac806e',
// 'wamid': 'wamid.HBgNODYxMzMxNzgzNTU4NhUCABIYFDNBOTFBOTU5RDE2QjgxQTQ1MEE2AA==', 'wamid': 'wamid.HBgNODYxMzMxNzgzNTU4NhUCABIYFDNBOTFBOTU5RDE2QjgxQTQ1MEE2AA==',
// 'wabaId': '190290134156880', 'wabaId': '190290134156880',
// 'from': '+8613317835586', 'from': '+8613317835586',
// 'customerProfile': { 'customerProfile': {
// 'name': 'qqs', 'name': 'qqs',
// }, },
// 'to': '+8617607730395', 'to': '+8617607730395',
// 'sendTime': '2024-01-24T01:40:53.000Z', 'sendTime': '2024-01-24T01:40:53.000Z',
// 'type': 'sticker', 'type': 'sticker',
// 'sticker': { 'sticker': {
// 'link': 'link':
// 'https://api.ycloud.com/v2/whatsapp/media/download/1156118002042289?sig=t%3D1706060453%2Cs%3Dfbd5f881856614e35715b1e3e1097b3bbe56f8a36aaa67bfbef25a37d9143d51&payload=eyJpZCI6IjExNTYxMTgwMDIwNDIyODkiLCJ3YWJhSWQiOiIxOTAyOTAxMzQxNTY4ODAiLCJpbmJvdW5kTWVzc2FnZUlkIjoiNjViMDZhYTc2MTlhMWQ4Mjc3YWM4MDZlIiwibWltZVR5cGUiOiJpbWFnZS93ZWJwIiwic2hhMjU2IjoibUNaLzdhNnNaNlRNYTE0WW9rUkNTZnVsdGpZNmFRRVZFNVoxMVRwanNQOD0ifQ', 'https://api.ycloud.com/v2/whatsapp/media/download/1156118002042289?sig=t%3D1706060453%2Cs%3Dfbd5f881856614e35715b1e3e1097b3bbe56f8a36aaa67bfbef25a37d9143d51&payload=eyJpZCI6IjExNTYxMTgwMDIwNDIyODkiLCJ3YWJhSWQiOiIxOTAyOTAxMzQxNTY4ODAiLCJpbmJvdW5kTWVzc2FnZUlkIjoiNjViMDZhYTc2MTlhMWQ4Mjc3YWM4MDZlIiwibWltZVR5cGUiOiJpbWFnZS93ZWJwIiwic2hhMjU2IjoibUNaLzdhNnNaNlRNYTE0WW9rUkNTZnVsdGpZNmFRRVZFNVoxMVRwanNQOD0ifQ',
// 'id': '1156118002042289', 'id': '1156118002042289',
// 'sha256': 'mCZ/7a6sZ6TMa14YokRCSfultjY6aQEVE5Z11TpjsP8=', 'sha256': 'mCZ/7a6sZ6TMa14YokRCSfultjY6aQEVE5Z11TpjsP8=',
// 'mime_type': 'image/webp', 'mime_type': 'image/webp',
// 'animated': false, 'animated': false,
// }, },
// }, },
// { {
// 'id': '65b06a91619a1d8277aaf05e', 'id': '65b06a91619a1d8277aaf05e',
// 'wamid': 'wamid.HBgNODYxMzMxNzgzNTU4NhUCABIYFDNBRjUxNzdCQ0FEOTlFQzc5MzQ1AA==', 'wamid': 'wamid.HBgNODYxMzMxNzgzNTU4NhUCABIYFDNBRjUxNzdCQ0FEOTlFQzc5MzQ1AA==',
// 'wabaId': '190290134156880', 'wabaId': '190290134156880',
// 'from': '+8613317835586', 'from': '+8613317835586',
// 'customerProfile': { 'customerProfile': {
// 'name': 'qqs', 'name': 'qqs',
// }, },
// 'to': '+8617607730395', 'to': '+8617607730395',
// 'sendTime': '2024-01-24T01:40:32.000Z', 'sendTime': '2024-01-24T01:40:32.000Z',
// 'type': 'unsupported', 'type': 'unsupported',
// 'errors': [ 'errors': [
// { {
// 'code': '131051', 'code': '131051',
// 'title': 'Message type unknown', 'title': 'Message type unknown',
// 'message': 'Message type unknown', 'message': 'Message type unknown',
// 'error_data': { 'error_data': {
// 'details': 'Message type is currently not supported.', 'details': 'Message type is currently not supported.',
// }, },
// }, },
// ], ],
// }, },
]; ];
const all2 = [ const all2 = [
// { {
// 'id': '63f71fb8741c165b434292fb', 'id': '63f71fb8741c165b434292fb',
// 'wamid': 'wamid.HBgNOD...', 'wamid': 'wamid.HBgNOD...',
// 'wabaId': 'WABA-ID', 'wabaId': 'WABA-ID',
// 'from': 'CUSTOMER-PHONE-NUMBER', 'from': 'CUSTOMER-PHONE-NUMBER',
// 'customerProfile': { 'customerProfile': {
// 'name': 'Joe', 'name': 'Joe',
// }, },
// 'to': 'BUSINESS-PHONE-NUMBER', 'to': 'BUSINESS-PHONE-NUMBER',
// 'sendTime': '2023-02-22T12:00:00.000Z', 'sendTime': '2023-02-22T12:00:00.000Z',
// 'type': 'reaction', 'type': 'reaction',
// 'reaction': { 'reaction': {
// 'message_id': 'wamid.HBgNODYxMzMxNzgzNTU4NhUCABIYFDNBMUJBOUZCODY4NkNBMkM2NUEzAA==', 'message_id': 'wamid.HBgNODYxMzMxNzgzNTU4NhUCABIYFDNBMUJBOUZCODY4NkNBMkM2NUEzAA==',
// 'emoji': '👍', 'emoji': '👍',
// }, },
// }, },
{ {
'id': '65b1de2f3f0bb66a91377930', 'id': '65b1de2f3f0bb66a91377930',
'wamid': 'wamid.HBgNODYxODc3NzM5Njk1MRUCABEYEkM4NTU5MjMyRDFCRkE5NjM2RAA=', 'wamid': 'wamid.HBgNODYxODc3NzM5Njk1MRUCABEYEkM4NTU5MjMyRDFCRkE5NjM2RAA=',

11
src/views/Conversations/ChatWindow.jsx
Unescape Escape View File

@ -1,6 +1,6 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { Layout, List, Avatar, Flex, Typography } from 'antd'; import { Layout, List, Avatar, Flex, Typography, Spin } from 'antd';
import Messages from './Components/Messages'; import Messages from './Components/Messages';
import InputBox from './Components/InputBox'; import InputBox from './Components/InputBox';
import ConversationsList from './Components/ConversationsList'; import ConversationsList from './Components/ConversationsList';
@ -22,10 +22,11 @@ const { Sider, Content, Header, Footer } = Layout;
*/ */
const ChatWindow = observer(() => { const ChatWindow = observer(() => {
const { loginUser: currentUser } = useAuthContext(); const { loginUser: currentUser } = useAuthContext();
const { sendMessage, currentConversation, customerOrderProfile: orderInfo } = useConversationContext(); const { errors, sendMessage, currentConversation, customerOrderProfile: orderInfo } = useConversationContext();
const { quotes, contact, last_contact, ...order } = orderInfo; const { quotes, contact, last_contact, ...order } = orderInfo;
return ( return (
<Spin spinning={false} tip={'正在连接...'} >
<Layout className='full-height h-full chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 198px)', height: 'calc(100% - 198px)' }}> <Layout className='full-height h-full chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 198px)', height: 'calc(100% - 198px)' }}>
<Sider width={240} theme={'light'} className='scrollable-column' style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}> <Sider width={240} theme={'light'} className='scrollable-column' style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}>
<ConversationsList /> <ConversationsList />
@ -42,9 +43,10 @@ const ChatWindow = observer(() => {
{/* <Typography.Text>{contact?.phone}</Typography.Text> */} {/* <Typography.Text>{contact?.phone}</Typography.Text> */}
</Flex> </Flex>
<Flex vertical={true} justify='space-between'> <Flex vertical={true} justify='space-between'>
<Typography.Text ><LocalTimeClock /> <Typography.Text strong>{order?.location} </Typography.Text></Typography.Text> <Typography.Text>
<LocalTimeClock /> <Typography.Text strong>{order?.location} </Typography.Text>
</Typography.Text>
{/* <Typography.Text>{customerDateTime}</Typography.Text> */} {/* <Typography.Text>{customerDateTime}</Typography.Text> */}
</Flex> </Flex>
</Flex> </Flex>
</Flex> </Flex>
@ -65,6 +67,7 @@ const ChatWindow = observer(() => {
<CustomerProfile customer={{}} /> <CustomerProfile customer={{}} />
</Sider> </Sider>
</Layout> </Layout>
</Spin>
); );
}); });

72
src/views/Conversations/Components/Messages.jsx
Unescape Escape View File

@ -4,76 +4,6 @@ import { List, Avatar, Timeline, Image } from 'antd';
import { MessageBox } from 'react-chat-elements'; import { MessageBox } from 'react-chat-elements';
import { useConversationContext } from '@/stores/ConversationContext'; import { useConversationContext } from '@/stores/ConversationContext';
const msgTypeMapped = {
text: { type: 'text', data: (msg) => ({ text: msg.text.body }) },
image: {
type: 'photo',
data: (msg) => ({
data: {
uri: msg.image.link,
width: 200,
height: 200,
alt: '',
},
onOpen: () => {
console.log('Open image', msg.image.link);
},
}),
},
sticker: {
type: 'photo',
data: (msg) => ({
data: {
uri: msg.sticker.link,
width: 150,
height: 120,
alt: '',
},
}),
},
video: {
type: 'video',
data: (msg) => ({
data: {
videoURL: msg.video.link,
status: {
click: true,
loading: 0,
download: true,
},
},
}),
},
audio: {
type: 'audio',
data: (msg) => ({
data: {
audioURL: msg.audio.link,
},
}),
},
'unsupported': { type: 'system', data: (msg) => ({ text: 'Message type is currently not supported.' }) },
// 'unsupported': { type: 'text', data: (msg) => ({ text: 'Message type is currently not supported.' }) }
// file: 'file',
// location: 'location',
// contact: 'contact',
// 'contact-card': 'contact-card',
// 'contact-card-with-photo': 'contact-card-with-photo',
// 'contact-card-with-photo-and-label': 'contact-card-with-photo-and-label',
};
const parseMessage = (messages) => {
return messages.map((msg) => {
return {
...(msgTypeMapped?.[msg.type]?.data(msg) || {}),
id: msg.id,
sender: msg.from,
type: msgTypeMapped?.[msg.type]?.type || 'text',
// title: msg.customerProfile.name,
date: msg.sendTime,
};
});
};
const Messages = observer(() => { const Messages = observer(() => {
const { messages: messagesList } = useConversationContext(); const { messages: messagesList } = useConversationContext();
// const messagesList = parseMessage(messages); // const messagesList = parseMessage(messages);
@ -109,6 +39,8 @@ const Messages = observer(() => {
onOpen={() => handlePreview(message)} onOpen={() => handlePreview(message)}
letterItem={{ id: 1, letter: 'AS' }} letterItem={{ id: 1, letter: 'AS' }}
// read | 'waiting'| 'sent' | 'received' | 'read' // read | 'waiting'| 'sent' | 'received' | 'read'
styles={{backgroundColor: message.sender === 'me' ? '#ccd5ae' : 'inherit'}}
notchStyle={{fill: '#ccd5ae'}}
/> />
))} ))}
<Image src={previewSrc} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} /> <Image src={previewSrc} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />

2
src/views/Conversations/Conversations.css
Unescape Escape View File

@ -22,7 +22,7 @@
/** Chat Window */ /** Chat Window */
.chatwindow-wrapper .rce-container-mbox.whatsappme-container .rce-mbox{ .chatwindow-wrapper .rce-container-mbox.whatsappme-container .rce-mbox{
background-color: darkseagreen; background-color: darkseagreen;
box-shadow: 0px 1px 1px 1px darkseagreen; /* box-shadow: 0px 1px 1px 1px darkseagreen; */
} }
.chatwindow-wrapper .rce-container-mbox .rce-mbox{ .chatwindow-wrapper .rce-container-mbox .rce-mbox{
max-width: 400px; max-width: 400px;

3
tailwind.config.js
Unescape Escape View File

@ -6,7 +6,8 @@ export default {
theme: { theme: {
colors: { colors: {
'whatsapp': '#25D366', 'whatsapp': '#25D366',
'whatsappme': '#1ba784', // 'whatsappme': '#1ba784',
'whatsappme': '#ccd5ae',
}, },
extend: { extend: {
// gridTemplateColumns: { // gridTemplateColumns: {

Write Preview
Loading…
Cancel
Save