diff --git a/component/src/views/chat/messages/html/htmlMessages.ts b/component/src/views/chat/messages/html/htmlMessages.ts
index 1a9e072f8..c5b8f0101 100644
--- a/component/src/views/chat/messages/html/htmlMessages.ts
+++ b/component/src/views/chat/messages/html/htmlMessages.ts
@@ -37,6 +37,15 @@ export class HTMLMessages {
     return overwrittenElements;
   }
 
+  public static create(messages: MessagesBase, html: string, role: string, isTop = false) {
+    const messageElements = HTMLMessages.createElements(messages, html, role, isTop);
+    MessageUtils.fillEmptyMessageElement(messageElements.bubbleElement, html);
+    HTMLUtils.apply(messages, messageElements.outerContainer);
+    Legacy.flagHTMLUpdateClass(messageElements.bubbleElement);
+    messages.applyCustomStyles(messageElements, role, false, messages.messageStyles?.html);
+    return messageElements;
+  }
+
   // prettier-ignore
   public static add(
       messages: MessagesBase, html: string, role: string,
@@ -46,11 +55,7 @@ export class HTMLMessages {
       if (overwrittenElements) return overwrittenElements;
       overwrite.status = false;
     }
-    const messageElements = HTMLMessages.createElements(messages, html, role, isTop);
-    MessageUtils.fillEmptyMessageElement(messageElements.bubbleElement, html);
-    HTMLUtils.apply(messages, messageElements.outerContainer);
-    Legacy.flagHTMLUpdateClass(messageElements.bubbleElement);
-    messages.applyCustomStyles(messageElements, role, false, messages.messageStyles?.html);
+    const messageElements = HTMLMessages.create(messages, html, role, isTop);
     if (!isTop) HTMLMessages.addElement(messages, messageElements.outerContainer);
     return messageElements;
   }
diff --git a/component/src/views/chat/messages/messageUtils.ts b/component/src/views/chat/messages/messageUtils.ts
index c42a12bb2..ce007a669 100644
--- a/component/src/views/chat/messages/messageUtils.ts
+++ b/component/src/views/chat/messages/messageUtils.ts
@@ -200,7 +200,13 @@ export class MessageUtils {
     if (messageToEls[1].html) {
       HTMLMessages.overwriteElements(msg, newHTML, messageToEls[1].html);
     } else {
-      // add new
+      const messageElements = HTMLMessages.create(msg, newHTML, messageToEls[0].role);
+      const previousElements = (messageToEls[1].files?.[messageToEls[1].files?.length - 1] ||
+        messageToEls[1].text) as MessageElements;
+      msg.elementRef.insertBefore(messageElements.outerContainer, previousElements.outerContainer.nextSibling);
+      const prevMsgElsIndex = msg.messageElementRefs.findIndex((messageElements) => messageElements === previousElements);
+      msg.messageElementRefs.splice(prevMsgElsIndex + 1, 0, messageElements);
+      messageToEls[1].html = messageElements;
     }
     messageToEls[0].html = newHTML;
   }