发送模板替换变量
Lei OT
1 year ago
parent
44b3dbd8df
commit
c5f1ba1b5e
@ -1,153 +0,0 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import { Input, Button, Tabs, List, Space, Popover, Flex } from 'antd';
|
|
||||||
// import { Input } from 'react-chat-elements';
|
|
||||||
import { useConversationState, useConversationDispatch } from '@/stores/ConversationContext';
|
|
||||||
import { sentNewMessage } from '@/actions/ConversationActions';
|
|
||||||
import { useAuthContext } from '@/stores/AuthContext';
|
|
||||||
import { LikeOutlined, MessageOutlined, StarOutlined, SendOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons';
|
|
||||||
import { cloneDeep, getNestedValue, isEmpty } from '@/utils/utils';
|
|
||||||
import { v4 as uuid } from 'uuid';
|
|
||||||
import { whatsappTemplatesParamMapped, sentMsgTypeMapped, replaceTemplateString } from '@/lib/msgUtils';
|
|
||||||
|
|
||||||
const InputBox = () => {
|
|
||||||
const { loginUser } = useAuthContext();
|
|
||||||
const { userId } = loginUser;
|
|
||||||
const { websocket, currentConversation, templates } = useConversationState();
|
|
||||||
const dispatch = useConversationDispatch();
|
|
||||||
const [textContent, setTextContent] = useState('');
|
|
||||||
|
|
||||||
const talkabled = !isEmpty(currentConversation.sn);
|
|
||||||
|
|
||||||
const invokeSendMessage = (msgObj) => {
|
|
||||||
console.log('sendMessage------------------', msgObj);
|
|
||||||
const contentToSend = sentMsgTypeMapped[msgObj.type].contentToSend(msgObj);
|
|
||||||
console.log('content to send-------------------------------------', contentToSend);
|
|
||||||
websocket.sendMessage({ ...contentToSend, opi_sn: userId, coli_sn: currentConversation.coli_sn });
|
|
||||||
const contentToRender = sentMsgTypeMapped[msgObj.type].contentToRender(msgObj);
|
|
||||||
console.log(contentToRender, 'contentToRender sendMessage------------------');
|
|
||||||
dispatch(sentNewMessage(contentToRender));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSendText = () => {
|
|
||||||
if (textContent.trim() !== '') {
|
|
||||||
const msgObj = {
|
|
||||||
type: 'text',
|
|
||||||
text: textContent,
|
|
||||||
sender: 'me',
|
|
||||||
to: currentConversation.whatsapp_phone_number,
|
|
||||||
id: `${currentConversation.sn}.${uuid()}`, // Date.now().toString(16),
|
|
||||||
date: new Date(),
|
|
||||||
status: 'waiting',
|
|
||||||
};
|
|
||||||
invokeSendMessage(msgObj);
|
|
||||||
setTextContent('');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSendTemplate = (fromTemplate) => {
|
|
||||||
console.log(fromTemplate, 'fromTemplate');
|
|
||||||
const _conversation = { ...cloneDeep(currentConversation) };
|
|
||||||
const msgObj = {
|
|
||||||
type: 'whatsappTemplate',
|
|
||||||
to: currentConversation.whatsapp_phone_number,
|
|
||||||
id: `${currentConversation.sn}.${uuid()}`,
|
|
||||||
date: new Date(),
|
|
||||||
status: 'waiting',
|
|
||||||
statusTitle: 'Ready to send',
|
|
||||||
sender: 'me',
|
|
||||||
template: {
|
|
||||||
name: fromTemplate.name,
|
|
||||||
language: { code: fromTemplate.language },
|
|
||||||
components: fromTemplate.components_origin.map(citem => {
|
|
||||||
const params = whatsappTemplatesParamMapped[fromTemplate.name].map((v) => ({ type: 'text', text: getNestedValue(_conversation, v) || '' }));
|
|
||||||
const paramText = params.map((p) => p.text);
|
|
||||||
const fillTemplate = paramText.length ? replaceTemplateString(citem?.text || '', paramText) : citem?.text || '';
|
|
||||||
|
|
||||||
return {
|
|
||||||
type: citem.type.toLowerCase(),
|
|
||||||
parameters: params,
|
|
||||||
text: fillTemplate,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
// ...(fromTemplate.components.body[0]?.example?.body_text?.[0]?.length > 0
|
|
||||||
// ? {
|
|
||||||
// components: [
|
|
||||||
// {
|
|
||||||
// 'type': 'body',
|
|
||||||
// 'text': fromTemplate.components.body[0]?.text,
|
|
||||||
// 'parameters': whatsappTemplatesParamMapped[fromTemplate.name].map((v) => ({ type: 'text', text: getNestedValue(_conversation, v) || '' })),
|
|
||||||
// // [
|
|
||||||
// // {
|
|
||||||
// // 'type': 'text',
|
|
||||||
// // 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name][0]) ,
|
|
||||||
// // },
|
|
||||||
// // { // debug:
|
|
||||||
// // 'type': 'text',
|
|
||||||
// // 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name]?.[1] || whatsappTemplatesParamMapped[fromTemplate.name][0]) ,
|
|
||||||
// // },
|
|
||||||
// // ],
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// }
|
|
||||||
// : {}),
|
|
||||||
},
|
|
||||||
template_origin: fromTemplate,
|
|
||||||
};
|
|
||||||
invokeSendMessage(msgObj);
|
|
||||||
setOpenTemplates(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const [openTemplates, setOpenTemplates] = useState(false);
|
|
||||||
const handleOpenChange = (newOpen) => {
|
|
||||||
setOpenTemplates(newOpen);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Flex gap={8}>
|
|
||||||
<Popover
|
|
||||||
content={
|
|
||||||
<List
|
|
||||||
className='w-96 h-4/6 overflow-y-auto text-slate-900'
|
|
||||||
itemLayout='horizontal'
|
|
||||||
dataSource={templates}
|
|
||||||
renderItem={(item, index) => (
|
|
||||||
<List.Item>
|
|
||||||
<List.Item.Meta
|
|
||||||
className=' text-neutral-800'
|
|
||||||
title={
|
|
||||||
<Flex justify={'space-between'}>
|
|
||||||
<>{item.components.header?.[0]?.text || item.name}</>
|
|
||||||
<Button onClick={() => handleSendTemplate(item)} size={'small'} type='link' key={'send'} icon={<SendOutlined />}>
|
|
||||||
Send
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
}
|
|
||||||
description={item.components.body?.[0]?.text}
|
|
||||||
/>
|
|
||||||
</List.Item>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
title='🙋打招呼'
|
|
||||||
trigger='click'
|
|
||||||
open={openTemplates}
|
|
||||||
onOpenChange={handleOpenChange}>
|
|
||||||
<Button type='primary' shape='circle' icon={<MessageOutlined />} size={'large'} disabled={!talkabled} />
|
|
||||||
</Popover>
|
|
||||||
<Input.Search
|
|
||||||
disabled={!talkabled}
|
|
||||||
placeholder='Type message here'
|
|
||||||
// enterButton={'Send'}
|
|
||||||
enterButton={<SendOutlined />}
|
|
||||||
size='large'
|
|
||||||
onSearch={handleSendText}
|
|
||||||
value={textContent}
|
|
||||||
onChange={(e) => setTextContent(e.target.value)}
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default InputBox;
|
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Input, Flex } from 'antd';
|
||||||
|
// import { Input } from 'react-chat-elements';
|
||||||
|
import { useConversationState, useConversationDispatch } from '@/stores/ConversationContext';
|
||||||
|
import { useAuthContext } from '@/stores/AuthContext';
|
||||||
|
import { sentNewMessage } from '@/actions/ConversationActions';
|
||||||
|
import { SendOutlined } from '@ant-design/icons';
|
||||||
|
import { isEmpty } from '@/utils/utils';
|
||||||
|
import { v4 as uuid } from 'uuid';
|
||||||
|
import { sentMsgTypeMapped } from '@/lib/msgUtils';
|
||||||
|
import InputTemplate from './InputTemplate';
|
||||||
|
|
||||||
|
const InputBox = () => {
|
||||||
|
const { loginUser } = useAuthContext();
|
||||||
|
const { userId } = loginUser;
|
||||||
|
const { websocket, currentConversation, } = useConversationState();
|
||||||
|
const dispatch = useConversationDispatch();
|
||||||
|
const [textContent, setTextContent] = useState('');
|
||||||
|
|
||||||
|
const talkabled = !isEmpty(currentConversation.sn);
|
||||||
|
|
||||||
|
const invokeSendMessage = (msgObj) => {
|
||||||
|
console.log('sendMessage------------------', msgObj);
|
||||||
|
const contentToSend = sentMsgTypeMapped[msgObj.type].contentToSend(msgObj);
|
||||||
|
console.log('content to send-------------------------------------', contentToSend);
|
||||||
|
websocket.sendMessage({ ...contentToSend, opi_sn: userId, coli_sn: currentConversation.coli_sn });
|
||||||
|
const contentToRender = sentMsgTypeMapped[msgObj.type].contentToRender(msgObj);
|
||||||
|
console.log(contentToRender, 'contentToRender sendMessage------------------');
|
||||||
|
dispatch(sentNewMessage(contentToRender));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSendText = () => {
|
||||||
|
if (textContent.trim() !== '') {
|
||||||
|
const msgObj = {
|
||||||
|
type: 'text',
|
||||||
|
text: textContent,
|
||||||
|
sender: 'me',
|
||||||
|
to: currentConversation.whatsapp_phone_number,
|
||||||
|
id: `${currentConversation.sn}.${uuid()}`, // Date.now().toString(16),
|
||||||
|
date: new Date(),
|
||||||
|
status: 'waiting',
|
||||||
|
};
|
||||||
|
invokeSendMessage(msgObj);
|
||||||
|
setTextContent('');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Flex gap={8}>
|
||||||
|
<InputTemplate disabled={!talkabled} invokeSendMessage={invokeSendMessage} />
|
||||||
|
<Input.Search
|
||||||
|
disabled={!talkabled}
|
||||||
|
placeholder='Type message here'
|
||||||
|
// enterButton={'Send'}
|
||||||
|
enterButton={<SendOutlined />}
|
||||||
|
size='large'
|
||||||
|
onSearch={handleSendText}
|
||||||
|
value={textContent}
|
||||||
|
onChange={(e) => setTextContent(e.target.value)}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InputBox;
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Popover, Flex, Button, List } from 'antd';
|
||||||
|
import { MessageOutlined, SendOutlined } from '@ant-design/icons';
|
||||||
|
import { useAuthContext } from '@/stores/AuthContext';
|
||||||
|
import { useConversationState } from '@/stores/ConversationContext';
|
||||||
|
import { cloneDeep, getNestedValue, objectMapper } from '@/utils/utils';
|
||||||
|
import { v4 as uuid } from 'uuid';
|
||||||
|
import { whatsappTemplatesParamMapped, replaceTemplateString } from '@/lib/msgUtils';
|
||||||
|
|
||||||
|
const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
|
||||||
|
const { loginUser } = useAuthContext();
|
||||||
|
const { currentConversation, templates } = useConversationState();
|
||||||
|
|
||||||
|
const [openTemplates, setOpenTemplates] = useState(false);
|
||||||
|
const handleOpenChange = (newOpen) => {
|
||||||
|
setOpenTemplates(newOpen);
|
||||||
|
};
|
||||||
|
const handleSendTemplate = (fromTemplate) => {
|
||||||
|
// 替换变量: customer, agent
|
||||||
|
const _conversation = { ...cloneDeep(currentConversation), ...objectMapper(loginUser, { username: { key: 'agent_name' } }) };
|
||||||
|
const msgObj = {
|
||||||
|
type: 'whatsappTemplate',
|
||||||
|
to: currentConversation.whatsapp_phone_number,
|
||||||
|
id: `${currentConversation.sn}.${uuid()}`,
|
||||||
|
date: new Date(),
|
||||||
|
status: 'waiting',
|
||||||
|
// statusTitle: 'Ready to send',
|
||||||
|
sender: 'me',
|
||||||
|
template: {
|
||||||
|
name: fromTemplate.name,
|
||||||
|
language: { code: fromTemplate.language },
|
||||||
|
components: fromTemplate.components_origin.map((citem) => {
|
||||||
|
const params = whatsappTemplatesParamMapped[fromTemplate.name].map((v) => ({ type: 'text', text: getNestedValue(_conversation, v) || '' }));
|
||||||
|
const paramText = params.map((p) => p.text);
|
||||||
|
const fillTemplate = paramText.length ? replaceTemplateString(citem?.text || '', paramText) : citem?.text || '';
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: citem.type.toLowerCase(),
|
||||||
|
parameters: params,
|
||||||
|
text: fillTemplate,
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
template_origin: fromTemplate,
|
||||||
|
};
|
||||||
|
invokeSendMessage(msgObj);
|
||||||
|
setOpenTemplates(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Popover
|
||||||
|
content={
|
||||||
|
<List
|
||||||
|
className='w-96 h-4/6 overflow-y-auto text-slate-900'
|
||||||
|
itemLayout='horizontal'
|
||||||
|
dataSource={templates}
|
||||||
|
renderItem={(item, index) => (
|
||||||
|
<List.Item>
|
||||||
|
<List.Item.Meta
|
||||||
|
className=' text-neutral-800'
|
||||||
|
title={
|
||||||
|
<Flex justify={'space-between'}>
|
||||||
|
<>{item.components.header?.[0]?.text || item.name}</>
|
||||||
|
<Button onClick={() => handleSendTemplate(item)} size={'small'} type='link' key={'send'} icon={<SendOutlined />}>
|
||||||
|
Send
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
}
|
||||||
|
description={item.components.body?.[0]?.text}
|
||||||
|
/>
|
||||||
|
</List.Item>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
title='🙋打招呼'
|
||||||
|
trigger='click'
|
||||||
|
open={openTemplates}
|
||||||
|
onOpenChange={handleOpenChange}>
|
||||||
|
<Button type='primary' shape='circle' icon={<MessageOutlined />} size={'large'} disabled={disabled} />
|
||||||
|
</Popover>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default InputTemplate;
|
||||||
Loading…
Reference in New Issue