React Js / redux middlware чат-бот

Question

Здравствуйте, в основном у меня есть чат-бот, где я отправляю свой текст в свой магазин и отображаю его в моем чате

хорошо, но я хотел сделать следующее: когда пользователь отправляет текст, немедленно показывать его в тело чата

и затем установить время для ответа бота, но я немного запутался, как это сделать и как я могу структурировать ответ бота

код :

Действие:

export const ON_MESSAGE = 'ON_MESSAGE';
export const BOT_MESSAGE = 'BOT_MESSAGE';

export const sendMessage = (text, user = true) => ({
  type: ON_MESSAGE,
  payload: { text, user },
});

export const botMessage = (text, bot = true) => ({
  type: BOT_MESSAGE,
  payload: { text, bot },
});


export  const checkMessage = (text, user = true) => {
  return (dispatch)  => {
      dispatch(sendMessage());
      // response

      if(text === 'a'){

      }
  }
}

редуктор:

import { ON_MESSAGE } from 'Redux/actions/Chat_action';

const initalState = [
  {
    text: 'Mdsdassssssssssadas',
    user: false,
    bot: false,
  },
];

const messageReducer = (state = initalState, action) => {
  switch (action.type) {
    case ON_MESSAGE:
      return [...state, action.payload];
    default:
      return state;
  }
};

export default messageReducer;

jsx код:

const Chat = props => {
  const dispatch = useDispatch();
  const messages = useSelector(state => state.Chat);
  const widget = useSelector(state => state.WidgetStatus.widgetStatus);
  const [text, setText] = useState('');
  const handleClick = () => {
    dispatch(sendMessage(text));
    setText('');
  };

  return (
    <Styled.ChatBox widget={widget}>
      <Styled.ChatHeader>
        <p>Chat Bot</p>
        <div>
          <FontAwesomeIcon
            onClick={id => dispatch({ type: 'TOGGLE_WIDGET' })}
            icon={faAngleDown}
            size="1x"
            color="white"
          />
          <FontAwesomeIcon
            onClick={id => dispatch({ type: 'TOGGLE_WIDGET' })}
            icon={faTimes}
            size="1x"
            color="white"
          />
        </div>
      </Styled.ChatHeader>
      <Styled.ChatLog>

        {messages.map(message => (
          <Styled.MessageWrapper user={message.user}>
            <Styled.BotImg src={BotLogo} user={message.user} />
            <Styled.ChatMessage user={message.user}>
              {message.text}
            </Styled.ChatMessage>
          </Styled.MessageWrapper>
        ))}
      </Styled.ChatLog>
      <Styled.ChatInput>
        <textarea
          onKeyPress={e => {
            if (e.key === 'Enter') {
              e.preventDefault();
            }
            if (e.key === 'Enter') {
              console.log('ae');
              handleClick();
            }
          }}
          value={text}
          onChange={e => setText(e.target.value)}
          placeholder="Digite aqui sua mensagem"
        />
        <button onClick={handleClick}>
          <FontAwesomeIcon icon={faPaperPlane} size="lg" color="black" />
        </button>
      </Styled.ChatInput>
    </Styled.ChatBox>
  );
};

img: