|
|
|
|
@ -1,10 +1,10 @@
|
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
|
import { Input, Flex, Button } from 'antd';
|
|
|
|
|
import { Input, Flex, Button, } 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, MessageOutlined, SmileOutlined } from '@ant-design/icons';
|
|
|
|
|
import { sentNewMessage, setReplyTo } from '@/actions/ConversationActions';
|
|
|
|
|
import { SendOutlined, MessageOutlined, SmileOutlined, PictureOutlined, CommentOutlined, UploadOutlined, CloudUploadOutlined, FolderAddOutlined, FilePdfOutlined, CloseCircleOutlined } from '@ant-design/icons';
|
|
|
|
|
import { isEmpty } from '@/utils/utils';
|
|
|
|
|
import { v4 as uuid } from 'uuid';
|
|
|
|
|
import { sentMsgTypeMapped } from '@/lib/msgUtils';
|
|
|
|
|
@ -14,7 +14,7 @@ import dayjs from 'dayjs';
|
|
|
|
|
const InputBox = () => {
|
|
|
|
|
const { loginUser } = useAuthContext();
|
|
|
|
|
const { userId } = loginUser;
|
|
|
|
|
const { websocket, websocketOpened, currentConversation } = useConversationState();
|
|
|
|
|
const { websocket, websocketOpened, currentConversation, referenceMsg } = useConversationState();
|
|
|
|
|
const dispatch = useConversationDispatch();
|
|
|
|
|
const [textContent, setTextContent] = useState('');
|
|
|
|
|
|
|
|
|
|
@ -22,6 +22,8 @@ const InputBox = () => {
|
|
|
|
|
|
|
|
|
|
const gt24h = currentConversation.last_received_time ? dayjs().diff(dayjs(currentConversation.last_received_time), 'hour') > 24 : true;
|
|
|
|
|
|
|
|
|
|
const textabled = talkabled && !gt24h;
|
|
|
|
|
|
|
|
|
|
const invokeSendMessage = (msgObj) => {
|
|
|
|
|
console.log('sendMessage------------------', msgObj);
|
|
|
|
|
const contentToSend = sentMsgTypeMapped[msgObj.type].contentToSend(msgObj);
|
|
|
|
|
@ -42,19 +44,27 @@ const InputBox = () => {
|
|
|
|
|
id: `${currentConversation.sn}.${uuid()}`, // Date.now().toString(16),
|
|
|
|
|
date: new Date(),
|
|
|
|
|
status: 'waiting',
|
|
|
|
|
...(referenceMsg.id ? { context: { message_id: referenceMsg.id, message_origin: referenceMsg } } : {}),
|
|
|
|
|
};
|
|
|
|
|
invokeSendMessage(msgObj);
|
|
|
|
|
setTextContent('');
|
|
|
|
|
dispatch(setReplyTo({}));
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
{referenceMsg.id && (
|
|
|
|
|
<Flex justify='space-between' className='reply-to bg-gray-100 p-1 rounded-none text-slate-500'>
|
|
|
|
|
<div className=' border-l-3 border-y-0 border-r-0 border-slate-300 border-solid pl-2 pr-1 py-1'>{referenceMsg.text}</div>
|
|
|
|
|
<Button type='text' title='取消引用' className=' rounded-none text-slate-500' icon={<CloseCircleOutlined />} size={'middle'} onClick={() => dispatch(setReplyTo({}))} />
|
|
|
|
|
</Flex>
|
|
|
|
|
)}
|
|
|
|
|
<Input.TextArea
|
|
|
|
|
size='large'
|
|
|
|
|
placeholder={gt24h ? 'The session has expired, please send a template message to say hello' : 'Enter for Send, Shift+Enter for new line'}
|
|
|
|
|
placeholder={gt24h ? 'This session has expired. Please send a template message to activate the session' : 'Enter for Send, Shift+Enter for new line'}
|
|
|
|
|
rows={2}
|
|
|
|
|
disabled={!talkabled || gt24h}
|
|
|
|
|
disabled={!textabled}
|
|
|
|
|
value={textContent}
|
|
|
|
|
onChange={(e) => setTextContent(e.target.value)}
|
|
|
|
|
className='rounded-b-none'
|
|
|
|
|
@ -64,13 +74,19 @@ const InputBox = () => {
|
|
|
|
|
handleSendText();
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
autoSize={{minRows: 2, maxRows: 6}}
|
|
|
|
|
autoSize={{ minRows: 2, maxRows: 6 }}
|
|
|
|
|
/>
|
|
|
|
|
<Flex justify={'space-between'} className=' bg-gray-200 p-1 rounded-b'>
|
|
|
|
|
<Flex gap={4} className='divide-y-0 divide-x divide-solid divide-gray-500 '>
|
|
|
|
|
<InputTemplate key='templates' disabled={!talkabled} invokeSendMessage={invokeSendMessage} />
|
|
|
|
|
{/* <Button type='text' className=' rounded-none text-primary' icon={<PictureOutlined />} size={'middle'} /> */}
|
|
|
|
|
{/* <Button type='text' className=' rounded-none text-primary' icon={<FolderAddOutlined />} size={'middle'} /> */}
|
|
|
|
|
{/* <Button type='text' className=' rounded-none text-primary' icon={<CloudUploadOutlined />} size={'middle'} /> */}
|
|
|
|
|
{/* <Button type='text' className=' rounded-none text-primary' icon={<FilePdfOutlined />} size={'middle'} /> */}
|
|
|
|
|
</Flex>
|
|
|
|
|
<Button key={'send-btn'} onClick={handleSendText} type='primary' size='middle' icon={<SendOutlined />} disabled={!talkabled || gt24h}>
|
|
|
|
|
<Button key={'send-btn'} onClick={handleSendText} type='primary' size='middle' icon={<SendOutlined />}
|
|
|
|
|
disabled={!textabled}
|
|
|
|
|
>
|
|
|
|
|
Send
|
|
|
|
|
</Button>
|
|
|
|
|
</Flex>
|
|
|
|
|
|
Lei OT
2 years ago