How to add ai message without user request

[ziao-liu]

Hey Ovidijus,

I hope this message finds you well.

I'm trying to make the deep-chat backend response to another button out of the deep-chat. So I need the ai response without a user input shown in the message container.

I have tried to use the 'submitUserMessage'. The message still shows in the messages container, which diverges from my intended outcome.

I also tried to add a div directly in the messages div. But I can't get the div in the container by querySelector. The messages div is undefined.

const chatElementRef = this.$refs.chatElementRef;
const shadowRoot = chatElementRef.shadowRoot;
const messages = shadowRoot.querySelector('#messages');
console.log(messages)

Another question: It seems that if the user inputs two continuous messages, there will be an avatar image bug. I can input two continuous messages because I set the initialMessages as follows:

this.initialMessages = [
        { role: 'ai', text: 'Hi!' },
        { role: 'user', text: 'Hello' }
      ]

Actually, I think the two questions are similar. When I input again, the first user image is hidden:

I would greatly appreciate your insight or guidance on addressing these questions.

[OvidijusParsiunas]

Hi @ziao-liu.

If by "I need the ai response without a user input shown in the message container" - you meant that you don't want to see the user messages in the chat, this can simply be achieved by using the messageStyles property as follows:

messageStyles = {
  default: {
    user: {
      outerContainer: {
        display: 'none',
      }
    }
  }
}

In regards to the question about not displaying multiple avatars, this was an intended change that came in version 1.4.11 as repeating avatars and names looked unappealing, especially if they were big. Only using an avatar/name for the last message (in a repeated group of messages) is a common practice for modern chats such as Facebook Messenger.

However, if you want the avatars/names to appear for every message, I have made a small change in our deep-chat-dev and deep-chat-react-dev packages version 9.0.149 where you can use the following to make them visible:

avatars = {
  ai: {
    styles: {
      container: {
        visibility: 'visible',
      }
    }
  }
}

One thing to mention about the dev packages - they behave the same way as the original ones except their names are different. The next release for Deep Chat is going to be a big one as we are migrating a lot of its logic to another web component called active chat and with that we are changing quite a few property names, such as changing the request property to connect and initialMessages to history. The old properties will still keep working as usual except you will see TS/console warnings for their deprecation which can be ignored.

Let me know if you have any further questions. Thanks!

[ziao-liu]

Hi Ovidijus,

Thank you for your quick response and the solution provided.

Sorry for the incomplete expression. "I need the ai response without a user input shown in the message container" is one of my requirements

I have two requirements :

1. Normal chat with both kinds of texts shown (ai and user) in the deep-chat interface.
2. A button click, external to the deep-chat interface, displays the AI response in the message container without needing user text input in the chat box (ai but not user).

To meet this, setting display: 'none' addresses the second requirement but not the first.

Maybe I need a way to display text or response directly in the chat-view

Thanks!

[OvidijusParsiunas]

I think I know what you are looking for.

Deep Chat has a private method property (in version 1.4.11) called _addMessage that you can use to manually add a message for any role. It accepts a MessageContent object as an argument. You can use it like this:

chatElementRef._addMessage({text: 'example text', role: 'ai'});

We plan to make this an official method in the next release and the dev package has it called as addMessage.

Let me know if this helps. Thanks!

[ziao-liu]

Hey Ovidijus,

Thank you!

I installed the deep-chat-dev and used addMessage to solve my problems successfully.

Thank you so much @OvidijusParsiunas!