adding displayLoading property to demo, refactoring updateMessage and…

… using MessagesBase.INTRO_CLASS to scroll correctly when loading history

component/src/deepChat.ts

@@ -152,13 +152,13 @@ export class DeepChat extends InternalHTML {
   addMessage: (message: Response, isUpdate?: boolean) => void = () =>
     console.warn('addMessage failed - please wait for chat view to render before calling this property.');
 
-  focusInput: () => void = () => FocusUtils.focusFromParentElement(this._elementRef);
-
-  refreshMessages: () => void = () => {};
+  updateMessage: (messageBody: MessageBody, index: number) => void = () => {};
 
   clearMessages: (isReset?: boolean) => void = () => {};
 
-  updateMessage: (index: number, messageBody: MessageBody) => void = () => {};
+  focusInput: () => void = () => FocusUtils.focusFromParentElement(this._elementRef);
+
+  refreshMessages: () => void = () => {};
 
   scrollToBottom: () => void = () => {};
 

component/src/types/demo.ts

@@ -6,11 +6,13 @@ export type DemoErrors = {[key in keyof ErrorMessageOverrides]?: boolean};
 
 export type DemoResponse = Response | ((message: MessageContent) => Response);
 
+export type DemoLoading = {message?: boolean; history?: {full?: boolean; small?: boolean}};
+
 export type Demo =
   | true
   | {
       response?: DemoResponse;
       displayErrors?: DemoErrors;
-      displayLoadingBubble?: boolean;
+      displayLoading?: DemoLoading;
       displayFileAttachmentContainer?: boolean;
     };

component/src/utils/legacy/legacy.ts

@@ -6,6 +6,7 @@ import {CustomStyle} from '../../types/styles';
 import {Connect} from '../../types/connect';
 import {Stream} from '../../types/stream';
 import {DeepChat} from '../../deepChat';
+import {Demo} from '../../types/demo';
 
 interface LegacyDeepChat {
   request?: Connect;
@@ -122,10 +123,20 @@ export class Legacy {
     const messageStylesCp = structuredClone(messageStyles);
     const loading = messageStylesCp.loading as unknown as MessageElementsStyles;
     if (loading && (loading.outerContainer || loading.innerContainer || loading.bubble || loading.media)) {
-      console.error('The loading message styles are defined using LoadingMessageStyles interface since version 2.0.2.');
+      console.error('The loading message styles are defined using LoadingMessageStyles interface since version 2.1.0.');
       console.error('Check it out here: https://deepchat.dev/docs/messages/styles#LoadingMessageStyles');
       messageStylesCp.loading = {message: {styles: loading}};
     }
     return messageStylesCp;
   }
+
+  public static processDemo(demo: Demo) {
+    if (typeof demo === 'boolean') return demo;
+    if ((demo as unknown as {displayLoadingBubble?: boolean}).displayLoadingBubble) {
+      console.error('The demo displayLoadingBubble property is deprecated since version 2.1.0.');
+      console.error('Please use displayLoading instead: https://deepchat.dev/docs/messages/styles#LoadingMessageStyles');
+      demo.displayLoading = {message: true};
+    }
+    return demo;
+  }
 }

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

@@ -18,6 +18,7 @@ import {MessageStream} from './stream/messageStream';
 import {IntroPanel} from '../introPanel/introPanel';
 import {WebModel} from '../../../webModel/webModel';
 import {UpdateMessage} from './utils/updateMessage';
+import {Legacy} from '../../../utils/legacy/legacy';
 import {CustomStyle} from '../../../types/styles';
 import {MessageUtils} from './utils/messageUtils';
 import {HTMLMessages} from './html/htmlMessages';
@@ -66,10 +67,10 @@ export class Messages extends MessagesBase {
     deepChat.addMessage = (message: ResponseI, isUpdate?: boolean) => {
       this.addAnyMessage({...message, sendUpdate: !!isUpdate}, !isUpdate);
     };
-    deepChat.updateMessage = (index: number, messageBody: MessageBody) => UpdateMessage.update(this, index, messageBody);
+    deepChat.updateMessage = (messageBody: MessageBody, index: number) => UpdateMessage.update(this, messageBody, index);
     // interface - setUpMessagesForService
     if (serviceIO.isWebModel()) (serviceIO as WebModel).setUpMessages(this);
-    if (demo) this.prepareDemo(demo);
+    if (demo) this.prepareDemo(Legacy.processDemo(demo));
     if (deepChat.textToSpeech) {
       TextToSpeech.processConfig(deepChat.textToSpeech, (processedConfig) => {
         this.textToSpeech = processedConfig;
@@ -82,16 +83,22 @@ export class Messages extends MessagesBase {
     return deepChat.displayLoadingBubble ?? true;
   }
 
-  private prepareDemo(demo: Demo) {
+  private prepareDemo(demo: Demo): void {
     if (typeof demo === 'object') {
+      // added here to not overlay error message and loading message bubbles
+      if (demo.displayLoading?.history?.full) LoadingHistory.addMessage(this);
       if (demo.response) this.customDemoResponse = demo.response;
       if (demo.displayErrors) {
         if (demo.displayErrors.default) this.addNewErrorMessage('' as 'service', '');
         if (demo.displayErrors.service) this.addNewErrorMessage('service', '');
         if (demo.displayErrors.speechToText) this.addNewErrorMessage('speechToText', '');
       }
-      if (demo.displayLoadingBubble) {
-        this.addLoadingMessage();
+      // Needs to be here for message loading bubble to not disappear after error
+      if (demo.displayLoading) {
+        const {history} = demo.displayLoading;
+        // check used to make sure that not creating another small loading message
+        if (history?.small && !history.full) LoadingHistory.addMessage(this, false);
+        if (demo.displayLoading.message) this.addLoadingMessage();
       }
     }
   }
@@ -133,13 +140,13 @@ export class Messages extends MessagesBase {
     }
     if (elements) {
       this.applyCustomStyles(elements, MessageUtils.AI_ROLE, false, this.messageStyles?.intro);
-      elements.outerContainer.classList.add('deep-chat-intro');
+      elements.outerContainer.classList.add(MessagesBase.INTRO_CLASS);
     }
   }
 
   public removeIntroductoryMessage() {
     const introMessage = this.messageElementRefs[0];
-    if (introMessage.outerContainer.classList.contains('deep-chat-intro')) {
+    if (introMessage.outerContainer.classList.contains(MessagesBase.INTRO_CLASS)) {
       introMessage.outerContainer.remove();
       this.messageElementRefs.shift();
     }

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

@@ -34,6 +34,7 @@ export class MessagesBase {
   private _remarkable: Remarkable;
   private readonly _onMessage?: (message: MessageContentI, isHistory: boolean) => void;
   public static readonly TEXT_BUBBLE_CLASS = 'text-message';
+  public static readonly INTRO_CLASS = 'deep-chat-intro';
 
   constructor(deepChat: DeepChat) {
     this.elementRef = MessagesBase.createContainerElement();
@@ -86,7 +87,7 @@ export class MessagesBase {
 
   private createAndPrependNewMessageElement(text: string, role: string, isTop: boolean) {
     const messageElements = this.createNewMessageElement(text, role, isTop);
-    if (isTop && (this.elementRef.firstChild as HTMLElement)?.classList.contains('deep-chat-intro')) {
+    if (isTop && (this.elementRef.firstChild as HTMLElement)?.classList.contains(MessagesBase.INTRO_CLASS)) {
       (this.elementRef.firstChild as HTMLElement).insertAdjacentElement('afterend', messageElements.outerContainer);
       // swapping to place intro refs into correct position
       const introRefs = this.messageElementRefs[0];

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

@@ -89,7 +89,7 @@ export class UpdateMessage {
   }
 
   // note that overwrite and 'deep-chat-temporary-message' are used to remove a message
-  public static update(msg: MessagesBase, index: number, messageBody: MessageBody) {
+  public static update(msg: MessagesBase, messageBody: MessageBody, index: number) {
     const messageToEls = msg.messageToElements[index];
     if (messageToEls) {
       if (UpdateMessage.isElementActive(messageToEls[1])) {