From 2a40e298621081032d91835df4dfa1efbed1c3a1 Mon Sep 17 00:00:00 2001
From: Ovidijus Parsiunas <oparsiunas@googlemail.com>
Date: Sun, 3 Nov 2024 21:45:32 +0900
Subject: [PATCH] adding a new method to change existing HTMLMessages

---
 component/src/deepChat.ts                     |  2 ++
 .../views/chat/messages/html/htmlMessages.ts  | 16 +++++++-----
 component/src/views/chat/messages/messages.ts | 26 +++++++++++++++++++
 .../src/views/chat/messages/messagesBase.ts   |  1 +
 4 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/component/src/deepChat.ts b/component/src/deepChat.ts
index 569cbd762..237836812 100644
--- a/component/src/deepChat.ts
+++ b/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;
 
diff --git a/component/src/views/chat/messages/html/htmlMessages.ts b/component/src/views/chat/messages/html/htmlMessages.ts
index 24281f416..9c28ef800 100644
--- a/component/src/views/chat/messages/html/htmlMessages.ts
+++ b/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;
     }
diff --git a/component/src/views/chat/messages/messages.ts b/component/src/views/chat/messages/messages.ts
index f1d462bd4..5e6b4fd4c 100644
--- a/component/src/views/chat/messages/messages.ts
+++ b/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');
+    }
+  }
 }
diff --git a/component/src/views/chat/messages/messagesBase.ts b/component/src/views/chat/messages/messagesBase.ts
index 6530eb82d..4bcef4f59 100644
--- a/component/src/views/chat/messages/messagesBase.ts
+++ b/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;