Customize loading and error styles

[TasonIV]

At present, I can only modify the styles of loading and error, but I want to customize the content of loading and error, such as adding the text "Thinking about it..." to loading, and modifying the text "Something wet wrong.. Please try again" to error. How should it be implemented?

[TasonIV]

It would be even better if the input box could display "current input characters/total number of characters that can be inputted", such as "20/100", to limit the number of characters that can be inputted through "characterLimit"!

[OvidijusParsiunas]

Hi @TasonIV. Modifying the loading bubble's content and adding a character input number tracker are features that we will be adding in the future. We currently have multiple higher priority features that we are working on, hence it will take some time before we can work on the aforementioned ones.

Ofcourse, you are welcome to fork/clone the project and modify it as needed. It is very easy to do and the setup steps are documented in create your own Deep Chat component section.

If you want to control the loading message bubble now, you can alternatively use the handler function like a websocket (check the Websocket tab). This will allow you to create a fake loading message via the overwrite property whilst you call your service. Example. Ofcourse the only downside is that you have to write your own fetch logic, but it is not hard to do using this fetch webpage.

Your code would be something like the following:

chatElementRef.request = {
  websocket: true,
  handler: (_, signals) => {
    signals.onOpen(); // enables the user to send messages
    // triggered when the user sends a message
    signals.newUserMessage.listener = async (body) => {
      try {
        signals.onResponse({text: 'Thinking about it...'});
        // await fetch request to your api using the body
        setTimeout(() => signals.onResponse({text: 'Actual result', overwrite: true}), 1000);
      } catch (e) {
        signals.onResponse({error: 'error'}); // displays an error message
      }
    };
  },
};

[OvidijusParsiunas]

I will be closing this issue. If you have any further questions feel free to comment below, for anything else you are more than welcome to create a new issue. Thanks!