From adbdd34070acd54e2aec44de731fbbb70921cdb1 Mon Sep 17 00:00:00 2001
From: Mic <m@micz.it>
Date: Wed, 18 Jun 2025 21:58:28 +0200
Subject: [PATCH] Refactor message rendering to use htmlStringToFragment for
 improved HTML display and maintainability.

---
 api_webchat/messagesArea.js | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/api_webchat/messagesArea.js b/api_webchat/messagesArea.js
index 8e0b0832..d1cc115a 100644
--- a/api_webchat/messagesArea.js
+++ b/api_webchat/messagesArea.js
@@ -268,15 +268,16 @@ class MessagesArea extends HTMLElement {
         const messageElement = document.createElement('div');
         messageElement.classList.add('message', type);
         // Replace \n with <br> for correct HTML display
-        messageElement.textContent = messageText;
-        // Replace \n with <br> elements for correct HTML display
-        messageElement.innerHTML = '';
-        messageText.split('\n').forEach((line, idx, arr) => {
-            messageElement.appendChild(document.createTextNode(line));
-            if (idx < arr.length - 1) {
-            messageElement.appendChild(document.createElement('br'));
-            }
-        });
+        messageElement.appendChild(htmlStringToFragment(messageText));
+        // messageElement.textContent = messageText;
+        // // Replace \n with <br> elements for correct HTML display
+        // messageElement.innerHTML = '';
+        // messageText.split('\n').forEach((line, idx, arr) => {
+        //     messageElement.appendChild(document.createTextNode(line));
+        //     if (idx < arr.length - 1) {
+        //     messageElement.appendChild(document.createElement('br'));
+        //     }
+        // });
         this.messages.appendChild(messageElement);
         this.scrollToBottom();
     }
@@ -557,4 +558,16 @@ class MessagesArea extends HTMLElement {
 
 }
 
-customElements.define('messages-area', MessagesArea);
\ No newline at end of file
+customElements.define('messages-area', MessagesArea);
+
+
+function htmlStringToFragment(htmlString) {
+  console.log(">>>>>>>>>>>>>>>> htmlStringToFragment htmlString: " + htmlString);
+  const normalizedHtml = htmlString.replace(/\n/g, '<br>');
+  console.log(">>>>>>>>>>>>>>>> htmlStringToFragment normalizedHtml: " + normalizedHtml);
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(normalizedHtml, 'text/html');
+  const fragment = document.createDocumentFragment();
+  Array.from(doc.body.childNodes).forEach(node => fragment.appendChild(node));
+  return fragment;
+}
\ No newline at end of file