Display loadingBubble override

[abhinavverma-sf]

Hi I went through the docs mentioned. I found how could I write my own styles for message and chat and inputbox, but not for three dots loading bubble..

Is it possible by any chance that we can override it?

[abhinavverma-sf]

Hi @OvidijusParsiunas any update?

[buzhou9]

There is no custom loading effect provided, but I have found this source code. You can clone the code and make modifications to get your own version

// src /component/src/views/chat/messages/messages.ts
public addLoadingMessage() {
    if (!this._displayLoadingMessage) return;
    const messageElements = this.createMessageElements('', MessageUtils.AI_ROLE);
    const {outerContainer, bubbleElement} = messageElements;
    bubbleElement.classList.add('loading-message-text');
    const dotsElement = document.createElement('div');
    dotsElement.classList.add('dots-flashing');
    bubbleElement.appendChild(dotsElement);
    this.applyCustomStyles(messageElements, MessageUtils.AI_ROLE, false, this.messageStyles?.loading);
    LoadingMessageDotsStyle.set(bubbleElement, this.messageStyles);
    this.elementRef.appendChild(outerContainer);
    ElementUtils.scrollToBottom(this.elementRef);
  }

[buzhou9]

This is a branch where I made modifications to the fork source code repository. Thank you to the author, as the structure of the source code is very easy to expand. We can easily add this feature.

https://github.com/buzhou9/deep-chat/tree/feature-customLoadingContent

To modify the style of the outer container, you can refer to the official documentation of the component. Here is the address

https://deepchat.dev/docs/messages/styles/#MessageElementsStyles

<deep-chat
      id="chat-element"
      demo="true"
      textInput='{"placeholder":{"text": "Welcome to the demo!"}}'
      messageStyles='{
        "loading": {
          "innerContainer": { "width": "100%" },
          "bubble": { "background": "none","width":"100%","maxWidth":"100%" },
          "content": "<div style=\"background: #00e0e0;color: #5d5d5d;text-align: center;\">new loading ....</div>"
        }
      }'
    ></deep-chat>

UI demonstration

[OvidijusParsiunas]

That is a nice demonstration by @buzhou9.

As mentioned, there is no standard way to override the styling of the loading bubble beyond the properties that are provided in the loading property of the messageStyles object.

If you want to change the element and its contents as in your example, you will have to fork/clone this repository, set up the project locally (which is very easy to do following these instructions) and make the necessary changes in the following files: LoadingMessageDotsStyle.ts and loadingIcon.css.