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

33
api_webchat/messagesArea.js
View file

@ -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);
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;
}