jason/ThunderAI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor message rendering to use htmlStringToFragment for improved HTML display and maintainability.

Browse source
This commit is contained in:
Mic 2025-06-18 21:58:28 +02:00
parent 65e07723f5
commit adbdd34070
1 changed files with 23 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
api_webchat/messagesArea.js
View file

@ -268,15 +268,16 @@ class MessagesArea extends HTMLElement {
const messageElement = document.createElement('div'); const messageElement = document.createElement('div');
messageElement.classList.add('message', type); messageElement.classList.add('message', type);
// Replace \n with <br> for correct HTML display // Replace \n with <br> for correct HTML display
messageElement.textContent = messageText; messageElement.appendChild(htmlStringToFragment(messageText));
// Replace \n with <br> elements for correct HTML display // messageElement.textContent = messageText;
messageElement.innerHTML = ''; // // Replace \n with <br> elements for correct HTML display
messageText.split('\n').forEach((line, idx, arr) => { // messageElement.innerHTML = '';
messageElement.appendChild(document.createTextNode(line)); // messageText.split('\n').forEach((line, idx, arr) => {
if (idx < arr.length - 1) { // messageElement.appendChild(document.createTextNode(line));
messageElement.appendChild(document.createElement('br')); // if (idx < arr.length - 1) {
} // messageElement.appendChild(document.createElement('br'));
}); // }
// });
this.messages.appendChild(messageElement); this.messages.appendChild(messageElement);
this.scrollToBottom(); this.scrollToBottom();
} }
@ -558,3 +559,15 @@ class MessagesArea extends HTMLElement {
} }
customElements.define('messages-area', MessagesArea); 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;
}