initial implementation of the changeMessage method

component/src/deepChat.ts

@@ -15,6 +15,7 @@ import {ValidationHandler} from './types/validationHandler';
 import {GoogleFont} from './utils/webComponent/googleFont';
 import {DirectConnection} from './types/directConnection';
 import {TextToSpeechConfig} from './types/textToSpeech';
+import {MessageBody} from './types/messagesInternal';
 import {SpeechToTextConfig} from './types/microphone';
 import {ErrorMessages, OnError} from './types/error';
 import {RequestBodyLimits} from './types/chatLimits';
@@ -153,6 +154,8 @@ export class DeepChat extends InternalHTML {
 
   clearMessages: (isReset?: boolean) => void = () => {};
 
+  changeMessage: (index: number, newContent: MessageBody) => void = () => {};
+
   scrollToBottom: () => void = () => {};
 
   disableSubmitButton: DisableSubmitButton = () => {};

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

@@ -3,6 +3,7 @@ import {LoadingStyle} from '../../../utils/loading/loadingStyle';
 import {MessageContent} from '../../../types/messages';
 import {FileMessageUtils} from './fileMessageUtils';
 import {HTMLMessages} from './html/htmlMessages';
+import {Response} from '../../../types/response';
 import {Avatars} from '../../../types/avatars';
 import {MessagesBase} from './messagesBase';
 import {MessageElements} from './messages';
@@ -195,4 +196,26 @@ export class MessageUtils {
       }
     });
   }
+
+  private static changeText(msg: MessagesBase, messageToEls: MessageToElements[0], newText: string) {
+    if (messageToEls[1].text) {
+      msg.renderText(messageToEls[1].text.bubbleElement, newText);
+    } else {
+      const messageElements = msg.createElements(newText, messageToEls[0].role);
+      msg.elementRef.insertBefore(messageElements.outerContainer, msg.elementRef.firstChild);
+      // update messageElementRefs element reference
+      messageToEls[1].text = messageElements;
+    }
+    messageToEls[0].text = newText;
+  }
+
+  public static changeMessage(msg: MessagesBase, messageToEls: MessageToElements[0], newContent: Response) {
+    if (messageToEls) {
+      if (newContent.text) {
+        MessageUtils.changeText(msg, messageToEls, newContent.text);
+      }
+    } else {
+      console.error('Message index not found. Please use the `getMessages` method to find the correct index');
+    }
+  }
 }

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

@@ -42,6 +42,7 @@ export class MessagesBase {
     this._names = deepChat.names;
     this._onMessage = FireEvents.onMessage.bind(this, deepChat);
     if (deepChat.htmlClassUtilities) this.htmlClassUtilities = deepChat.htmlClassUtilities;
+    deepChat.changeMessage = this.changeMessage.bind(this);
     setTimeout(() => {
       this.submitUserMessage = deepChat.submitUserMessage; // wait for it to be available in input.ts
     });
@@ -131,7 +132,7 @@ export class MessagesBase {
     return MessagesBase.isLoadingMessage(elements) || HTMLDeepChatElements.isElementTemporary(elements);
   }
 
-  private createElements(text: string, role: string) {
+  public createElements(text: string, role: string) {
     const messageElements = MessagesBase.createBaseElements(role);
     const {outerContainer, innerContainer, bubbleElement} = messageElements;
     outerContainer.appendChild(innerContainer);
@@ -229,4 +230,9 @@ export class MessagesBase {
       if (msgToEls[1].text && msgToEls[0].text) this.renderText(msgToEls[1].text.bubbleElement, msgToEls[0].text);
     });
   }
+
+  private changeMessage(index: number, newContent: Response) {
+    const messageToEls = this.messageToElements[index];
+    MessageUtils.changeMessage(this, messageToEls, newContent);
+  }
 }