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

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

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

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

@ -1,6 +1,6 @@
import { useEffect, useState } from '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 InputBox from './Components/InputBox';
import ConversationsList from './Components/ConversationsList';
@ -22,49 +22,52 @@ const { Sider, Content, Header, Footer } = Layout;
*/
const ChatWindow = observer(() => {
const { loginUser: currentUser } = useAuthContext();
const { sendMessage, currentConversation, customerOrderProfile: orderInfo } = useConversationContext();
const { errors, sendMessage, currentConversation, customerOrderProfile: orderInfo } = useConversationContext();
const { quotes, contact, last_contact, ...order } = orderInfo;
return (
<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)' }}>
<ConversationsList />
</Sider>
<Content style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}>
<Layout className='h-full'>
<Header className='ant-layout-sider-light ant-card p-1 h-auto'>
<Flex gap={16}>
<Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${currentConversation.name}`}>{currentConversation.name}</Avatar>
<Flex flex={'1'} justify='space-between'>
<Flex vertical={true} justify='space-between'>
<Typography.Text strong>{currentConversation.name}</Typography.Text>
{/* <Typography.Text>{contact?.phone}</Typography.Text> */}
</Flex>
<Flex vertical={true} justify='space-between'>
<Typography.Text ><LocalTimeClock /> <Typography.Text strong>{order?.location} </Typography.Text></Typography.Text>
{/* <Typography.Text>{customerDateTime}</Typography.Text> */}
<Spin spinning={false} tip={'正在连接...'} >
<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)' }}>
<ConversationsList />
</Sider>
<Content style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}>
<Layout className='h-full'>
<Header className='ant-layout-sider-light ant-card p-1 h-auto'>
<Flex gap={16}>
<Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${currentConversation.name}`}>{currentConversation.name}</Avatar>
<Flex flex={'1'} justify='space-between'>
<Flex vertical={true} justify='space-between'>
<Typography.Text strong>{currentConversation.name}</Typography.Text>
{/* <Typography.Text>{contact?.phone}</Typography.Text> */}
</Flex>
<Flex vertical={true} justify='space-between'>
<Typography.Text>
<LocalTimeClock /> <Typography.Text strong>{order?.location} </Typography.Text>
</Typography.Text>
{/* <Typography.Text>{customerDateTime}</Typography.Text> */}
</Flex>
</Flex>
</Flex>
</Flex>
</Header>
<Content style={{ maxHeight: '74vh', height: '74vh' }}>
<div className='scrollable-column'>
<Messages />
</div>
</Content>
<Footer className='ant-layout-sider-light p-1'>
<InputBox onSend={(v) => sendMessage(v)} />
</Footer>
</Layout>
{/* <InputBox onSend={(v) => sendMessage(v)} /> */}
</Content>
</Header>
<Content style={{ maxHeight: '74vh', height: '74vh' }}>
<div className='scrollable-column'>
<Messages />
</div>
</Content>
<Footer className='ant-layout-sider-light p-1'>
<InputBox onSend={(v) => sendMessage(v)} />
</Footer>
</Layout>
{/* <InputBox onSend={(v) => sendMessage(v)} /> */}
</Content>
<Sider width={300} theme={'light'} className='scrollable-column' style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}>
<CustomerProfile customer={{}} />
</Sider>
</Layout>
<Sider width={300} theme={'light'} className='scrollable-column' style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}>
<CustomerProfile customer={{}} />
</Sider>
</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 { 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: messagesList } = useConversationContext();
// const messagesList = parseMessage(messages);
@ -109,6 +39,8 @@ const Messages = observer(() => {
onOpen={() => handlePreview(message)}
letterItem={{ id: 1, letter: 'AS' }}
// 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 }} />

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

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

3
tailwind.config.js
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save