|
|
|
|
@ -1,9 +1,9 @@
|
|
|
|
|
import { useState } from 'react';
|
|
|
|
|
import { useState, useRef, useEffect } from 'react';
|
|
|
|
|
import { App, Popover, Flex, Button, List, Input } from 'antd';
|
|
|
|
|
import { MessageOutlined, SendOutlined } from '@ant-design/icons';
|
|
|
|
|
import { useAuthContext } from '@/stores/AuthContext';
|
|
|
|
|
import { useConversationState } from '@/stores/ConversationContext';
|
|
|
|
|
import { cloneDeep, flush, getNestedValue, objectMapper } from '@/utils/utils';
|
|
|
|
|
import { cloneDeep, getNestedValue, objectMapper } from '@/utils/utils';
|
|
|
|
|
import { v4 as uuid } from 'uuid';
|
|
|
|
|
import { replaceTemplateString } from '@/lib/msgUtils';
|
|
|
|
|
|
|
|
|
|
@ -22,18 +22,33 @@ const splitTemplate = (template) => {
|
|
|
|
|
return obj;
|
|
|
|
|
};
|
|
|
|
|
const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
|
|
|
|
|
const { notification } = App.useApp()
|
|
|
|
|
const searchInputRef = useRef(null);
|
|
|
|
|
const { notification } = App.useApp();
|
|
|
|
|
const { loginUser } = useAuthContext();
|
|
|
|
|
const { currentConversation, templates } = useConversationState();
|
|
|
|
|
// 用于替换变量: customer, agent
|
|
|
|
|
const valueMapped = { ...cloneDeep(currentConversation), ...objectMapper(loginUser, { username: [{ key: 'agent_name' }, { key: 'your_name' }] }) };
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setDataSource(templates);
|
|
|
|
|
return () => {};
|
|
|
|
|
}, [templates]);
|
|
|
|
|
|
|
|
|
|
const [openTemplates, setOpenTemplates] = useState(false);
|
|
|
|
|
const handleOpenChange = (newOpen) => {
|
|
|
|
|
setOpenTemplates(newOpen);
|
|
|
|
|
const [dataSource, setDataSource] = useState(templates);
|
|
|
|
|
const [searchContent, setSearchContent] = useState('');
|
|
|
|
|
const handleSearchTemplates = (val) => {
|
|
|
|
|
if (val.toLowerCase().trim() !== '') {
|
|
|
|
|
const res = templates.filter(
|
|
|
|
|
(item) => item.name.includes(val.toLowerCase().trim()) || item.components_origin.some((itemc) => itemc.text.toLowerCase().includes(val.toLowerCase().trim()))
|
|
|
|
|
);
|
|
|
|
|
setDataSource(res);
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
setDataSource(templates);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleSendTemplate = (fromTemplate) => {
|
|
|
|
|
const mergeInput = {...cloneDeep(valueMapped), ...activeInput[fromTemplate.name]};
|
|
|
|
|
const mergeInput = { ...cloneDeep(valueMapped), ...activeInput[fromTemplate.name] };
|
|
|
|
|
let valid = true;
|
|
|
|
|
const msgObj = {
|
|
|
|
|
type: 'whatsappTemplate',
|
|
|
|
|
@ -51,7 +66,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
|
|
|
|
|
const params = keys.map((v) => ({ type: 'text', text: getNestedValue(mergeInput, [v]) }));
|
|
|
|
|
const paramText = params.map((p) => p.text);
|
|
|
|
|
const fillTemplate = paramText.length ? replaceTemplateString(citem?.text || '', paramText) : citem?.text || '';
|
|
|
|
|
valid = keys.length !== flush(paramText).length ? false : valid;
|
|
|
|
|
valid = keys.length !== paramText.filter((s) => s).length ? false : valid;
|
|
|
|
|
return {
|
|
|
|
|
type: citem.type.toLowerCase(),
|
|
|
|
|
parameters: params,
|
|
|
|
|
@ -67,7 +82,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
|
|
|
|
|
description: '信息未填写完整, 请补充填写',
|
|
|
|
|
placement: 'top',
|
|
|
|
|
duration: 3,
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
invokeSendMessage(msgObj);
|
|
|
|
|
@ -100,6 +115,8 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
|
|
|
|
|
size={'small'}
|
|
|
|
|
title={ele.key}
|
|
|
|
|
placeholder={paramsVal[ele.key] || ele.key}
|
|
|
|
|
defaultValue={paramsVal[ele.key] || ''}
|
|
|
|
|
onPressEnter={() => handleSendTemplate(tempItem)}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
@ -107,41 +124,62 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Popover
|
|
|
|
|
fresh
|
|
|
|
|
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=' '
|
|
|
|
|
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={
|
|
|
|
|
<>
|
|
|
|
|
<div className='divide-dashed divide-x-0 divide-y divide-gray-300'>
|
|
|
|
|
<div className='text-slate-500'>{renderForm(item)}</div>
|
|
|
|
|
{item.components?.footer?.[0] ? <div className=''>{item.components.footer[0].text || ''}</div> : null}
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</List.Item>
|
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
|
<>
|
|
|
|
|
<Input.Search
|
|
|
|
|
ref={searchInputRef}
|
|
|
|
|
onSearch={handleSearchTemplates}
|
|
|
|
|
allowClear
|
|
|
|
|
value={searchContent}
|
|
|
|
|
onChange={(e) => {
|
|
|
|
|
setSearchContent(e.target.value);
|
|
|
|
|
handleSearchTemplates(e.target.value);
|
|
|
|
|
}}
|
|
|
|
|
placeholder='搜索名称'
|
|
|
|
|
/>
|
|
|
|
|
<List
|
|
|
|
|
className='w-96 h-4/6 overflow-y-auto text-slate-900'
|
|
|
|
|
itemLayout='horizontal'
|
|
|
|
|
dataSource={dataSource}
|
|
|
|
|
rowKey={'name'}
|
|
|
|
|
pagination={dataSource.length < 6 ? false : { position: 'bottom', pageSize: 5, align: 'start', size: 'small' }}
|
|
|
|
|
renderItem={(item, index) => (
|
|
|
|
|
<List.Item>
|
|
|
|
|
<List.Item.Meta
|
|
|
|
|
className=' '
|
|
|
|
|
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={
|
|
|
|
|
<>
|
|
|
|
|
<div className='divide-dashed divide-x-0 divide-y divide-gray-300'>
|
|
|
|
|
<div className='text-slate-500'>{renderForm(item)}</div>
|
|
|
|
|
{item.components?.footer?.[0] ? <div className=''>{item.components.footer[0].text || ''}</div> : null}
|
|
|
|
|
</div>
|
|
|
|
|
{/* <div className='text-right px-2'>
|
|
|
|
|
<Button onClick={() => handleSendTemplate(item)} size={'small'} type='link' key={'send'} icon={<SendOutlined />}>
|
|
|
|
|
Send
|
|
|
|
|
</Button>
|
|
|
|
|
</div> */}
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</List.Item>
|
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
title='🙋打招呼'
|
|
|
|
|
trigger='click'
|
|
|
|
|
open={openTemplates}
|
|
|
|
|
onOpenChange={handleOpenChange}>
|
|
|
|
|
<Button type='primary' shape='circle' icon={<MessageOutlined />} size={'large'} disabled={disabled} />
|
|
|
|
|
onOpenChange={setOpenTemplates}>
|
|
|
|
|
<Button type='text' className=' rounded-none text-primary' icon={<MessageOutlined />} size={'middle'} disabled={disabled} />
|
|
|
|
|
</Popover>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
|
Lei OT
2 years ago