adding the ability to use custom html to loading messages

OvidijusParsiunas · Sep 4, 2024 · c6e204e · c6e204e
1 parent e92c54e
commit c6e204e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/component/src/utils/loading/loadingStyle.ts b/component/src/utils/loading/loadingStyle.ts
@@ -3,6 +3,7 @@ import {CustomStyle} from '../../types/styles';
 
 export class LoadingStyle {
   public static readonly BUBBLE_CLASS = 'deep-chat-loading-message-bubble';
+  public static readonly DOTS_CONTAINER_CLASS = 'deep-chat-loading-message-dots-container';
 
   private static colorToHex(color: string) {
     const dummyElement = document.createElement('div');

diff --git a/component/src/views/chat/messages/messages.css b/component/src/views/chat/messages/messages.css
@@ -17,7 +17,7 @@
   margin-bottom: 10px;
 }
 
-.deep-chat-loading-message-bubble {
+.deep-chat-loading-message-dots-container {
   width: 1em;
   padding-top: 0.6em;
   padding-bottom: 0.6em;

diff --git a/component/src/views/chat/messages/messages.ts b/component/src/views/chat/messages/messages.ts
@@ -243,17 +243,26 @@ export class Messages extends MessagesBase {
     if (this.isLastMessageError()) MessageUtils.getLastMessageElement(this.elementRef).remove();
   }
 
-  public addLoadingMessage() {
-    if (!this._displayLoadingMessage) return;
+  private addDefaultLoadingMessage() {
     const messageElements = this.createMessageElements('', MessageUtils.AI_ROLE);
     const {outerContainer, bubbleElement} = messageElements;
-    bubbleElement.classList.add(LoadingStyle.BUBBLE_CLASS);
+    messageElements.bubbleElement.classList.add(LoadingStyle.DOTS_CONTAINER_CLASS);
     const dotsElement = document.createElement('div');
     dotsElement.classList.add('loading-message-dots');
     bubbleElement.appendChild(dotsElement);
-    this.applyCustomStyles(messageElements, MessageUtils.AI_ROLE, false, this.messageStyles?.loading?.message?.styles);
     LoadingStyle.setDots(bubbleElement, this.messageStyles);
     this.elementRef.appendChild(outerContainer);
+    return messageElements;
+  }
+
+  public addLoadingMessage() {
+    if (!this._displayLoadingMessage) return;
+    const html = this.messageStyles?.loading?.message?.html;
+    const messageElements = html
+      ? HTMLMessages.createElements(this, html, MessageUtils.AI_ROLE, true)
+      : this.addDefaultLoadingMessage();
+    messageElements.bubbleElement.classList.add(LoadingStyle.BUBBLE_CLASS);
+    this.applyCustomStyles(messageElements, MessageUtils.AI_ROLE, false, this.messageStyles?.loading?.message?.styles);
     ElementUtils.scrollToBottom(this.elementRef);
   }