adding a new method to change existing HTMLMessages

component/src/deepChat.ts

@@ -159,6 +159,8 @@ export class DeepChat extends InternalHTML {
 
   setPlaceholderText: (text: string) => void = () => {};
 
+  updateHTMLMessage: (html: string, index: number) => void = () => {};
+
   @Property('function')
   onMessage?: OnMessage;
 

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

@@ -18,14 +18,16 @@ export class HTMLMessages {
     return messageElements;
   }
 
-  private static overwrite(messages: MessagesBase, html: string, role: string, messagesEls: MessageElements[]) {
+  public static overwrite(messages: MessagesBase, html: string, elements: MessageElements) {
+    elements.bubbleElement.innerHTML = html;
+    HTMLUtils.apply(messages, elements.outerContainer);
+    Legacy.flagHTMLUpdateClass(elements.bubbleElement);
+  }
+
+  private static overwriteLast(messages: MessagesBase, html: string, role: string, messagesEls: MessageElements[]) {
     const {messages: aMessages} = messages;
     const overwrittenElements = MessageUtils.overwriteMessage(aMessages, messagesEls, html, role, 'html', 'html-message');
-    if (overwrittenElements) {
-      overwrittenElements.bubbleElement.innerHTML = html;
-      HTMLUtils.apply(messages, overwrittenElements.outerContainer);
-      Legacy.flagHTMLUpdateClass(overwrittenElements.bubbleElement);
-    }
+    if (overwrittenElements) HTMLMessages.overwrite(messages, html, overwrittenElements);
     return overwrittenElements;
   }
 
@@ -34,7 +36,7 @@ export class HTMLMessages {
       messages: MessagesBase, html: string, role: string,
       messagesEls: MessageElements[], overwrite?: Overwrite, isTop = false) {
     if (overwrite?.status) {
-      const overwrittenElements = this.overwrite(messages, html, role, messagesEls);
+      const overwrittenElements = this.overwriteLast(messages, html, role, messagesEls);
       if (overwrittenElements) return overwrittenElements;
       overwrite.status = false;
     }

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

@@ -65,6 +65,7 @@ export class Messages extends MessagesBase {
     deepChat.addMessage = (message: ResponseI, isUpdate?: boolean) => {
       this.addAnyMessage({...message, sendUpdate: !!isUpdate}, !isUpdate);
     };
+    deepChat.updateHTMLMessage = this.updateHTMLMessage.bind(this);
     // interface - setUpMessagesForService
     if (serviceIO.isWebModel()) (serviceIO as WebModel).setUpMessages(this);
     if (demo) this.prepareDemo(demo);
@@ -166,6 +167,10 @@ export class Messages extends MessagesBase {
     if (message.html !== undefined && message.html !== null) {
       const elements = HTMLMessages.add(this, message.html, message.role, this.messageElementRefs, overwrite, isTop);
       if (HTMLDeepChatElements.isElementTemporary(elements)) delete message.html;
+      if (message.html) {
+        const htmlElements: [MessageElements, MessageContentI] = [elements, message];
+        MessageUtils.updateRefArr(this.htmlElementsToMessage, htmlElements, isTop);
+      }
     }
     if (this.isValidMessageContent(message) && !isTop) {
       this.updateStateOnMessage(message, data.overwrite, data.sendUpdate, isHistory);
@@ -349,4 +354,25 @@ export class Messages extends MessagesBase {
     this._onClearMessages?.();
     delete serviceIO.sessionId;
   }
+
+  private updateHTMLMessage(html: string, index: number) {
+    if (html === undefined || typeof html !== 'string') {
+      return console.error('The first argument of updateHTMLMessage must be of type String');
+    }
+    if (index === undefined || typeof index !== 'number') {
+      return console.error('The second argument of updateHTMLMessage must be of type Number');
+    }
+    const processedIndex = Math.floor(index);
+    const message = this.messages[processedIndex];
+    if (!message?.html) {
+      return console.error(`The message at index ${processedIndex} does not contain a 'html' message`);
+    }
+    const elToMessage = this.htmlElementsToMessage.find((htmlElementToMessage) => htmlElementToMessage[1] === message);
+    if (elToMessage) {
+      HTMLMessages.overwrite(this, html, elToMessage[0]);
+      elToMessage[1].html = html;
+    } else {
+      return console.error('Deep Chat error - HTML message was not found');
+    }
+  }
 }

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

@@ -27,6 +27,7 @@ export class MessagesBase {
   readonly messages: MessageContentI[] = [];
   readonly htmlClassUtilities: HTMLClassUtilities = {};
   textElementsToText: [MessageElements, string][] = [];
+  htmlElementsToMessage: [MessageElements, MessageContentI][] = [];
   protected _introPanel?: IntroPanel;
   protected readonly _avatars?: Avatars;
   protected readonly _names?: Names;