adding backward compatibility to legacy loading styling interface

component/src/utils/legacy/legacy.ts

@@ -1,5 +1,5 @@
+import {MessageContent, MessageElementsStyles, MessageStyles, OnMessage} from '../../types/messages';
 import {FilesServiceConfig} from '../../types/fileServiceConfigs';
-import {MessageContent, OnMessage} from '../../types/messages';
 import {ValidateInput} from '../../types/validateInput';
 import {MessageFile} from '../../types/messageFile';
 import {CustomStyle} from '../../types/styles';
@@ -116,4 +116,16 @@ export class Legacy {
       if (!legacyConfig.connect) legacyConfig.connect = legacyConfig.request;
     }
   }
+
+  public static processMessageStyles(messageStyles?: MessageStyles) {
+    if (!messageStyles) return;
+    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('Check it out here: https://deepchat.dev/docs/messages/styles#LoadingMessageStyles');
+      messageStylesCp.loading = {message: {styles: loading}};
+    }
+    return messageStylesCp;
+  }
 }

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

@@ -10,6 +10,7 @@ import {LoadingHistory} from './history/loadingHistory';
 import {HTMLClassUtilities} from '../../../types/html';
 import {MessageStyleUtils} from './messageStyleUtils';
 import {IntroPanel} from '../introPanel/introPanel';
+import {Legacy} from '../../../utils/legacy/legacy';
 import {Response} from '../../../types/response';
 import {Avatars} from '../../../types/avatars';
 import {MessageUtils} from './messageUtils';
@@ -35,7 +36,7 @@ export class MessagesBase {
 
   constructor(deepChat: DeepChat) {
     this.elementRef = MessagesBase.createContainerElement();
-    this.messageStyles = deepChat.messageStyles;
+    this.messageStyles = Legacy.processMessageStyles(deepChat.messageStyles);
     this._remarkable = RemarkableConfig.createNew();
     this._avatars = deepChat.avatars;
     this._names = deepChat.names;