|
|
|
|
@ -1,9 +1,20 @@
|
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
|
import { Input, Flex, Button, } from 'antd';
|
|
|
|
|
import { Input, Flex, Button, Image } from 'antd';
|
|
|
|
|
// import { Input } from 'react-chat-elements';
|
|
|
|
|
import useAuthStore from '@/stores/AuthStore'
|
|
|
|
|
import useAuthStore from '@/stores/AuthStore';
|
|
|
|
|
import useConversationStore from '@/stores/ConversationStore';
|
|
|
|
|
import { SendOutlined, MessageOutlined, SmileOutlined, PictureOutlined, CommentOutlined, UploadOutlined, CloudUploadOutlined, FolderAddOutlined, FilePdfOutlined, CloseCircleOutlined } from '@ant-design/icons';
|
|
|
|
|
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';
|
|
|
|
|
@ -12,17 +23,15 @@ import InputImageUpload from './Input/ImageUpload';
|
|
|
|
|
import dayjs from 'dayjs';
|
|
|
|
|
|
|
|
|
|
const InputBox = () => {
|
|
|
|
|
const { loadUser } = useAuthStore();
|
|
|
|
|
const loginUser = loadUser();
|
|
|
|
|
const { userId } = loginUser;
|
|
|
|
|
const { websocket, websocketOpened, currentConversation, referenceMsg, setReferenceMsg, sentOrReceivedNewMessage } = useConversationStore();
|
|
|
|
|
const { loginUser: { userId } } = useAuthStore()
|
|
|
|
|
const { websocket, websocketOpened, currentConversation, referenceMsg, setReferenceMsg, complexMsg, setComplexMsg, sentOrReceivedNewMessage } = useConversationStore();
|
|
|
|
|
const [textContent, setTextContent] = useState('');
|
|
|
|
|
|
|
|
|
|
const talkabled = !isEmpty(currentConversation.sn) && websocketOpened;
|
|
|
|
|
|
|
|
|
|
const gt24h = currentConversation.last_received_time ? dayjs().diff(dayjs(currentConversation.last_received_time), 'hour') > 24 : true;
|
|
|
|
|
|
|
|
|
|
const textabled = (talkabled && !gt24h);
|
|
|
|
|
const textabled = talkabled && !gt24h;
|
|
|
|
|
|
|
|
|
|
const invokeSendMessage = (msgObj) => {
|
|
|
|
|
const msgObjMerge = {
|
|
|
|
|
@ -44,13 +53,15 @@ const InputBox = () => {
|
|
|
|
|
|
|
|
|
|
setTextContent('');
|
|
|
|
|
setReferenceMsg({});
|
|
|
|
|
setComplexMsg({});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleSendText = () => {
|
|
|
|
|
if (textContent.trim() !== '') {
|
|
|
|
|
if (textContent.trim() !== '' || !isEmpty(complexMsg) ) {
|
|
|
|
|
const msgObj = {
|
|
|
|
|
type: 'text',
|
|
|
|
|
text: textContent,
|
|
|
|
|
...complexMsg,
|
|
|
|
|
};
|
|
|
|
|
invokeSendMessage(msgObj);
|
|
|
|
|
}
|
|
|
|
|
@ -61,8 +72,19 @@ const InputBox = () => {
|
|
|
|
|
{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'>
|
|
|
|
|
<span className=' text-primary pr-1 italic'>{referenceMsg.senderName}</span>{referenceMsg.originText}</div>
|
|
|
|
|
<Button type='text' title='取消引用' className=' rounded-none text-slate-500' icon={<CloseCircleOutlined />} size={'middle'} onClick={() => (setReferenceMsg({}))} />
|
|
|
|
|
<span className=' text-primary pr-1 italic'>{referenceMsg.senderName}</span>
|
|
|
|
|
{referenceMsg.originText}
|
|
|
|
|
</div>
|
|
|
|
|
<Button type='text' title='取消引用' className=' rounded-none text-slate-500' icon={<CloseCircleOutlined />} size={'middle'} onClick={() => setReferenceMsg({})} />
|
|
|
|
|
</Flex>
|
|
|
|
|
)}
|
|
|
|
|
{complexMsg.id && (
|
|
|
|
|
<Flex justify='space-between' className='reply-to bg-gray-100 p-1 rounded-none text-slate-500'>
|
|
|
|
|
<div className='pl-2 pr-1 py-1'>
|
|
|
|
|
<Image width={100} src={complexMsg.data.uri} />
|
|
|
|
|
<span className=' pl-1 '></span>
|
|
|
|
|
</div>
|
|
|
|
|
<Button type='text' title='删除' className=' rounded-none text-slate-500' icon={<CloseCircleOutlined />} size={'middle'} onClick={() => setComplexMsg({})} />
|
|
|
|
|
</Flex>
|
|
|
|
|
)}
|
|
|
|
|
<Input.TextArea
|
|
|
|
|
@ -82,16 +104,14 @@ const InputBox = () => {
|
|
|
|
|
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 *:text-primary *:rounded-none'>
|
|
|
|
|
<Flex gap={4} className='*:text-primary *:rounded-none'>
|
|
|
|
|
<InputTemplate key='templates' disabled={!talkabled} invokeSendMessage={invokeSendMessage} />
|
|
|
|
|
{/* <InputImageUpload key={'addNewPic'} disabled={!textabled} invokeSendMessage={invokeSendMessage} /> */}
|
|
|
|
|
{/* <Button type='text' className='' icon={<FolderAddOutlined />} size={'middle'} /> */}
|
|
|
|
|
{/* <Button type='text' className='' icon={<CloudUploadOutlined />} size={'middle'} /> */}
|
|
|
|
|
{/* <Button type='text' className='' icon={<FilePdfOutlined />} size={'middle'} /> */}
|
|
|
|
|
{/* <Button type='text' className='' icon={<FolderAddOutlined />} size={'middle'} />
|
|
|
|
|
<Button type='text' className='' icon={<CloudUploadOutlined />} size={'middle'} />
|
|
|
|
|
<Button type='text' className='' icon={<FilePdfOutlined />} size={'middle'} /> */}
|
|
|
|
|
</Flex>
|
|
|
|
|
<Button key={'send-btn'} onClick={handleSendText} type='primary' size='middle' icon={<SendOutlined />}
|
|
|
|
|
disabled={!textabled}
|
|
|
|
|
>
|
|
|
|
|
<Button key={'send-btn'} onClick={handleSendText} type='primary' size='middle' icon={<SendOutlined />} disabled={!textabled}>
|
|
|
|
|
Send
|
|
|
|
|
</Button>
|
|
|
|
|
</Flex>
|
|
|
|
|
|
Lei OT
2 years ago