ability to set styling for history and message loading

component/src/types/messages.ts

@@ -15,14 +15,24 @@ export type MessageRoleStyles = {
   ai?: MessageElementsStyles;
 } & {[role: string]: MessageElementsStyles};
 
+export interface LoadingHistoryStyles {
+  full?: {styles?: MessageElementsStyles; element?: HTMLElement};
+  small?: {styles?: MessageElementsStyles; element?: HTMLElement};
+}
+
+export interface LoadingStyles {
+  message?: MessageElementsStyles;
+  history?: LoadingHistoryStyles;
+}
+
 export interface MessageStyles {
   default?: MessageRoleStyles;
   image?: MessageRoleStyles;
   audio?: MessageRoleStyles;
   file?: MessageRoleStyles;
   html?: MessageRoleStyles;
   intro?: MessageElementsStyles;
-  loading?: MessageElementsStyles;
+  loading?: LoadingStyles;
   error?: MessageElementsStyles;
 }
 

component/src/utils/loading/loadingStyle.ts

@@ -0,0 +1,40 @@
+import {MessageStyles} from '../../types/messages';
+import {CustomStyle} from '../../types/styles';
+
+export class LoadingStyle {
+  private static colorToHex(color: string) {
+    const dummyElement = document.createElement('div');
+    dummyElement.style.color = color;
+    document.body.appendChild(dummyElement);
+    const computedColor = window.getComputedStyle(dummyElement).color;
+    const hex = (computedColor.match(/\d+/g) as string[])
+      .map((value) => parseInt(value).toString(16).padStart(2, '0'))
+      .join('');
+    return `#${hex}`;
+  }
+
+  public static setDots(bubbleElement: HTMLElement, messageStyles?: MessageStyles) {
+    if (messageStyles?.loading?.message?.bubble?.color) {
+      const color = LoadingStyle.colorToHex(messageStyles.loading.message.bubble.color);
+      bubbleElement.style.setProperty('--loading-message-color', color);
+      bubbleElement.style.setProperty('--loading-message-color-fade', `${color}33`);
+    } else {
+      bubbleElement.style.setProperty('--loading-message-color', '#848484');
+      bubbleElement.style.setProperty('--loading-message-color-fade', '#55555533');
+    }
+  }
+
+  public static setRing(bubbleElement: HTMLElement, style: CustomStyle) {
+    const {color, width, height, margin, border} = style;
+    if (color) {
+      const hexColor = LoadingStyle.colorToHex(color);
+      bubbleElement.style.setProperty('--loading-history-color', hexColor);
+    } else {
+      bubbleElement.style.setProperty('--loading-history-color', '#dbdbdb');
+    }
+    bubbleElement.style.setProperty('--loading-history-height', height || '57px');
+    bubbleElement.style.setProperty('--loading-history-width', width || '57px');
+    bubbleElement.style.setProperty('--loading-history-margin', margin || '7px');
+    bubbleElement.style.setProperty('--loading-history-border', border || '5px');
+  }
+}

component/src/views/chat/messages/fileMessageUtils.ts

@@ -9,6 +9,7 @@ export class FileMessageUtils {
   // prettier-ignore
   public static addMessage(
       messages: MessagesBase, elements: MessageElements, styles: keyof MessageStyles, role: string, isTop: boolean) {
+    if (styles === 'loading') return;
     messages.applyCustomStyles(elements, role, true, messages.messageStyles?.[styles]);
     if (!isTop) {
       messages.elementRef.appendChild(elements.outerContainer);

component/src/views/chat/messages/history/loadingHistory.css

@@ -27,13 +27,13 @@
 
 .loading-history div {
   position: absolute;
-  width: 57px;
-  height: 57px;
-  margin: 7px;
-  border: 5px solid;
+  width: var(--loading-history-width);
+  height: var(--loading-history-height);
+  margin: var(--loading-history-margin);
+  border: var(--loading-history-border) solid;
   border-radius: 50%;
   animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: rgb(219, 219, 219) transparent transparent transparent;
+  border-color: var(--loading-history-color) transparent transparent transparent;
 }
 
 .loading-history div:nth-child(1) {

component/src/views/chat/messages/history/loadingHistory.ts

@@ -1,4 +1,7 @@
+import {LoadingStyle} from '../../../../utils/loading/loadingStyle';
+import {MessageElementsStyles} from '../../../../types/messages';
 import {MessageElements, Messages} from '../messages';
+import {MessagesBase} from '../messagesBase';
 import {MessageUtils} from '../messageUtils';
 
 export class LoadingHistory {
@@ -16,6 +19,15 @@ export class LoadingHistory {
     return loadingRingElement;
   }
 
+  private static apply(messages: MessagesBase, messageElements: MessageElements, styles: MessageElementsStyles) {
+    if (styles.bubble) {
+      LoadingStyle.setRing(messageElements.bubbleElement, styles.bubble);
+      styles = JSON.parse(JSON.stringify(styles)) as MessageElementsStyles;
+      delete styles.bubble;
+    }
+    messages.applyCustomStyles(messageElements, 'history', false, styles);
+  }
+
   public static addLoadHistoryMessage(messages: Messages, isInitial = true) {
     const messageElements = messages.createMessageElements('', MessageUtils.AI_ROLE);
     const {outerContainer, bubbleElement} = messageElements;
@@ -24,11 +36,19 @@ export class LoadingHistory {
     bubbleElement.appendChild(loadingRingElement);
     const viewClass = isInitial ? LoadingHistory.FULL_VIEW_CLASS : LoadingHistory.SMALL_CLASS;
     messageElements.outerContainer.classList.add(viewClass);
+    const styles = isInitial
+      ? messages.messageStyles?.loading?.history?.full?.styles
+      : messages.messageStyles?.loading?.history?.small?.styles;
+    if (styles) LoadingHistory.apply(messages, messageElements, styles);
     messages.elementRef.prepend(outerContainer);
     return messageElements;
   }
 
-  public static changeFullViewToSmall(messageElements?: MessageElements) {
-    messageElements?.outerContainer.classList.replace(LoadingHistory.FULL_VIEW_CLASS, LoadingHistory.SMALL_CLASS);
+  public static changeFullViewToSmall(messages: MessagesBase, messageElements?: MessageElements) {
+    if (messageElements?.outerContainer.classList.contains(LoadingHistory.FULL_VIEW_CLASS)) {
+      messageElements.outerContainer.classList.replace(LoadingHistory.FULL_VIEW_CLASS, LoadingHistory.SMALL_CLASS);
+      const styles = messages.messageStyles?.loading?.history?.small?.styles;
+      if (styles) LoadingHistory.apply(messages, messageElements, styles);
+    }
   }
 }

component/src/views/chat/messages/messages.css

@@ -30,8 +30,8 @@
   width: 0.45em;
   height: 0.45em;
   border-radius: 5px;
-  background-color: var(--message-dots-color);
-  color: var(--message-dots-color);
+  background-color: var(--loading-message-color);
+  color: var(--loading-message-color);
   animation: loading-message-bubble 1s infinite linear alternate;
   animation-delay: 0.5s;
 }
@@ -49,8 +49,8 @@
   width: 0.45em;
   height: 0.45em;
   border-radius: 5px;
-  background-color: var(--message-dots-color);
-  color: var(--message-dots-color);
+  background-color: var(--loading-message-color);
+  color: var(--loading-message-color);
   animation: loading-message-bubble 1s infinite alternate;
   animation-delay: 0s;
 }
@@ -60,19 +60,19 @@
   width: 0.45em;
   height: 0.45em;
   border-radius: 5px;
-  background-color: var(--message-dots-color);
-  color: var(--message-dots-color);
+  background-color: var(--loading-message-color);
+  color: var(--loading-message-color);
   animation: loading-message-bubble 1s infinite alternate;
   animation-delay: 1s;
 }
 
 @keyframes loading-message-bubble {
   0% {
-    background-color: var(--message-dots-color);
+    background-color: var(--loading-message-color);
   }
   50%,
   100% {
-    background-color: var(--message-dots-color-fade);
+    background-color: var(--loading-message-color-fade);
   }
 }
 

component/src/views/chat/messages/messages.ts

@@ -1,7 +1,7 @@
 import {MessageContentI, Overwrite} from '../../../types/messagesInternal';
 import {MessageFile, MessageFileType} from '../../../types/messageFile';
 import {CustomErrors, ServiceIO} from '../../../services/serviceIO';
-import {LoadingMessageDotsStyle} from './loadingMessageDotsStyle';
+import {LoadingStyle} from '../../../utils/loading/loadingStyle';
 import {HTMLDeepChatElements} from './html/htmlDeepChatElements';
 import {ElementUtils} from '../../../utils/element/elementUtils';
 import {FireEvents} from '../../../utils/events/fireEvents';
@@ -252,8 +252,8 @@ export class Messages extends MessagesBase {
     const dotsElement = document.createElement('div');
     dotsElement.classList.add('loading-message-bubble');
     bubbleElement.appendChild(dotsElement);
-    this.applyCustomStyles(messageElements, MessageUtils.AI_ROLE, false, this.messageStyles?.loading);
-    LoadingMessageDotsStyle.set(bubbleElement, this.messageStyles);
+    this.applyCustomStyles(messageElements, MessageUtils.AI_ROLE, false, this.messageStyles?.loading?.message);
+    LoadingStyle.setDots(bubbleElement, this.messageStyles);
     this.elementRef.appendChild(outerContainer);
     ElementUtils.scrollToBottom(this.elementRef);
   }

component/src/views/chat/messages/messagesBase.ts

@@ -100,7 +100,7 @@ export class MessagesBase {
   public createNewMessageElement(text: string, role: string, isTop = false) {
     this._introPanel?.hide();
     const lastMessageElements = this.messageElementRefs[this.messageElementRefs.length - 1];
-    LoadingHistory.changeFullViewToSmall(lastMessageElements);
+    LoadingHistory.changeFullViewToSmall(this, lastMessageElements);
     if (MessagesBase.isTemporaryElement(lastMessageElements)) {
       lastMessageElements.outerContainer.remove();
       this.messageElementRefs.pop();