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