[REACT] submitUserMessage just after onComponentRender is not working

[jlatorre-iriusrisk]

Hi! First thanks for this component :)

I'm trying to use the submitUserMessage method once the deepChat Component has been rendered using the onComponentRender.

I'm using React, and basically I'm trying to do something like this:

import { DeepChat } from 'deep-chat-react';
import React, { createRef } from 'react';

import { DeepChat as DeepChatCore } from 'deep-chat';

export const ModelWithAI = () => {
  let conversationId: string | null = null;
  const deepChatRef = createRef<DeepChatCore>();

  return (
    <DeepChat
      className="deep-chat-container"
      ref={deepChatRef}
      onComponentRender={() => {
        console.log('DeepChat component rendered', deepChatRef.current);
        deepChatRef.current?.submitUserMessage({ text: 'hello' });
      }}
      request={{
        url: 'ws://localhost:8008/chat/ws',
        method: 'POST',
        headers: { TODO: 'AUTH' },
        websocket: true,
        additionalBodyProps: { conversation_id: conversationId },
      }}
    />
  );
};

The chat is working great when I send the messages through the input or after a while using a button with the same submitUserMessage, but I wish I can send an specific message once the component is ready to activate the bot I have in the "other side" with a message. Maybe I'm doing something wrong, help here would be much appreciated!

Thanks in advance!

[OvidijusParsiunas]

Hi @jlatorre-iriusrisk.

Can you elaborate on what you mean by "I wish I can send an specific message once the component is ready to activate the bot". Based on my understanding submitUserMessage does send a message.

Do you perhaps mean just display a message? If that is the case, you can use a method called _addMessage. This method is not part of our official documentation and will be added to the main API on our next release, however it is still available in the current release. The way it works is it accepts a Response object as an argument and adds a message to the chat. E.g. deepChatRef._addMessage({text: 'hello'});

Let me know if this helps. Thanks!

[jlatorre-iriusrisk]

Hi @OvidijusParsiunas. Thanks for your answer.

The problem I had is that once the method onComponentRender makes the callback, the reference of deepChatRef is still undefined. Meaning I cannot use the submitUserMessage (and for the same reasons no methods from the reference). I solved this with a setTimeout, but I'm not quite happy with that solution. However it works now what I wanted:

Render de component of deep-chat -> Automatically send a message to process

Thanks for your help.

[buzhou9]

I think this is caused by the asynchronous update rule of React itself. When onComponentrender is executed, React has not yet updated the content of deepChatRef. As an alternative, this is what I did.

import { DeepChat } from 'deep-chat-react';
import React, { createRef } from 'react';

import { DeepChat as DeepChatCore } from 'deep-chat';

let deepChatInstance = null

export const ModelWithAI = () => {
  let conversationId: string | null = null;
  const deepChatRef = createRef<DeepChatCore>();

  return (
    <DeepChat
      className="deep-chat-container"
      ref={deepChatRef}
      onComponentRender={() => {
        deepChatInstance = document.getElementById('chatbot-core')
        deepChatInstance.submitUserMessage({ text: 'hello' });
      }}
      request={{
        url: 'ws://localhost:8008/chat/ws',
        method: 'POST',
        headers: { TODO: 'AUTH' },
        websocket: true,
        additionalBodyProps: { conversation_id: conversationId },
      }}
    />
  );
};

In addition, you can also try using some hooks of React and use them after the successful assignment of deepChatRef