Global-sales/src/views/Conversations/Components/InputComposer.jsx

import React, { useState } from 'react';
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 { isEmpty } from '@/utils/utils';
import { v4 as uuid } from 'uuid';
import { sentMsgTypeMapped } from '@/lib/msgUtils';
import InputTemplate from './InputTemplate';
import dayjs from 'dayjs';

const InputBox = () => {
  const { loginUser } = useAuthContext();
  const { userId } = loginUser;
  const { websocket, websocketOpened, currentConversation } = useConversationState();
  const dispatch = useConversationDispatch();
  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 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>
      <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'}
        rows={2}
        disabled={!talkabled || gt24h}
        value={textContent}
        onChange={(e) => setTextContent(e.target.value)}
        className='rounded-b-none'
        onPressEnter={(e) => {
          if (!e.shiftKey) {
            e.preventDefault();
            handleSendText();
          }
        }}
        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} />
        </Flex>
        <Button key={'send-btn'} onClick={handleSendText} type='primary' size='middle' icon={<SendOutlined />} disabled={!talkabled || gt24h}>
          Send
        </Button>
      </Flex>
    </div>
  );
};

export default InputBox;