added custom html functionality for loading history

OvidijusParsiunas · Aug 23, 2024 · 918be23 · 918be23
1 parent 0c947a1
commit 918be23
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 17 deletions.
diff --git a/component/src/types/messages.ts b/component/src/types/messages.ts
@@ -7,18 +7,18 @@ export interface LoadingHistoryStyles {
   small?: {styles?: MessageElementsStyles; html?: string};
 }
 
-export interface LoadingStyles {
-  message?: MessageElementsStyles;
-  history?: LoadingHistoryStyles;
-}
-
 export interface MessageElementsStyles {
   outerContainer?: CustomStyle;
   innerContainer?: CustomStyle;
   bubble?: CustomStyle;
   media?: CustomStyle;
 }
 
+export interface LoadingStyles {
+  message?: MessageElementsStyles;
+  history?: LoadingHistoryStyles;
+}
+
 export type MessageRoleStyles = {
   shared?: MessageElementsStyles;
   user?: MessageElementsStyles;
@@ -32,8 +32,8 @@ export interface MessageStyles {
   file?: MessageRoleStyles;
   html?: MessageRoleStyles;
   intro?: MessageElementsStyles;
-  loading?: LoadingStyles;
   error?: MessageElementsStyles;
+  loading?: LoadingStyles;
 }
 
 export type MessageContent = {role?: string; text?: string; files?: MessageFile[]; html?: string; _sessionId?: string};

diff --git a/component/src/views/chat/messages/history/history.ts b/component/src/views/chat/messages/history/history.ts
@@ -23,7 +23,7 @@ export class History {
   }
 
   private async fetchHistory(ioFetchHistory: Required<ServiceIO>['fetchHistory']) {
-    const loadingElements = LoadingHistory.addLoadHistoryMessage(this._messages);
+    const loadingElements = LoadingHistory.addMessage(this._messages);
     const history = await ioFetchHistory();
     this._messages.removeMessage(loadingElements);
     history.forEach((message) => this._messages.addAnyMessage(message, true));
@@ -55,7 +55,7 @@ export class History {
     this._messages.elementRef.onscroll = async () => {
       if (!this._isLoading && !this._isPaginationComplete && this._messages.elementRef.scrollTop === 0) {
         this._isLoading = true;
-        const loadingElements = LoadingHistory.addLoadHistoryMessage(this._messages, false);
+        const loadingElements = LoadingHistory.addMessage(this._messages, false);
         try {
           const messages = await loadHistory(this._index++);
           this._messages.removeMessage(loadingElements);
@@ -80,7 +80,7 @@ export class History {
 
   private async loadInitialHistory(loadHistory: LoadHistory) {
     this._isLoading = true;
-    const loadingElements = LoadingHistory.addLoadHistoryMessage(this._messages);
+    const loadingElements = LoadingHistory.addMessage(this._messages);
     try {
       const messages = await loadHistory(this._index++);
       const scrollTop = this._messages.elementRef.scrollTop;

diff --git a/component/src/views/chat/messages/history/loadingHistory.ts b/component/src/views/chat/messages/history/loadingHistory.ts
@@ -1,6 +1,7 @@
 import {LoadingStyle} from '../../../../utils/loading/loadingStyle';
 import {MessageElementsStyles} from '../../../../types/messages';
 import {MessageElements, Messages} from '../messages';
+import {HTMLMessages} from '../html/htmlMessages';
 import {MessagesBase} from '../messagesBase';
 import {MessageUtils} from '../messageUtils';
 
@@ -28,19 +29,31 @@ export class LoadingHistory {
     messages.applyCustomStyles(messageElements, 'history', false, styles);
   }
 
-  public static addLoadHistoryMessage(messages: Messages, isInitial = true) {
-    const messageElements = messages.createMessageElements('', MessageUtils.AI_ROLE);
-    const {outerContainer, bubbleElement} = messageElements;
-    bubbleElement.classList.add(LoadingHistory.CLASS);
-    const loadingRingElement = LoadingHistory.generateLoadingRingElement();
-    bubbleElement.appendChild(loadingRingElement);
+  private static addLoadHistoryMessage(messageElements: MessageElements, messages: Messages, isInitial = true) {
+    messageElements.bubbleElement.classList.add(LoadingHistory.CLASS);
     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;
     LoadingHistory.apply(messages, messageElements, styles);
-    messages.elementRef.prepend(outerContainer);
+    messages.elementRef.prepend(messageElements.outerContainer);
+  }
+
+  public static createDefaultElements(messages: Messages) {
+    const messageElements = messages.createMessageElements('', MessageUtils.AI_ROLE);
+    const {bubbleElement} = messageElements;
+    const loadingRingElement = LoadingHistory.generateLoadingRingElement();
+    bubbleElement.appendChild(loadingRingElement);
+    return messageElements;
+  }
+
+  public static addMessage(messages: Messages, isInitial = true) {
+    const html = messages.messageStyles?.loading?.history?.full?.html;
+    const messageElements = html
+      ? HTMLMessages.createElements(messages, html, MessageUtils.AI_ROLE, true)
+      : LoadingHistory.createDefaultElements(messages);
+    LoadingHistory.addLoadHistoryMessage(messageElements, messages, isInitial);
     return messageElements;
   }
 

diff --git a/component/src/views/chat/messages/html/htmlMessages.ts b/component/src/views/chat/messages/html/htmlMessages.ts
@@ -11,7 +11,7 @@ export class HTMLMessages {
     messages.elementRef.scrollTop = messages.elementRef.scrollHeight;
   }
 
-  private static createElements(messages: MessagesBase, html: string, role: string, isTop: boolean) {
+  public static createElements(messages: MessagesBase, html: string, role: string, isTop: boolean) {
     const messageElements = messages.createMessageElementsOnOrientation('', role, isTop);
     messageElements.bubbleElement.classList.add('html-message');
     messageElements.bubbleElement.innerHTML = html;