GeneralBots/botui
2
0
Fork 0
Code Activity Actions

fix: Remove raw HTML display during streaming - show loading indicator instead
All checks were successful
BotUI CI/CD / build (push) Successful in 47s
Details

Browse source
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2026-04-15 07:37:25 -03:00
parent d2ea78cdbd
commit 2081ee8000
1 changed files with 59 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
ui/suite/partials/chat.html
View file

@ -307,32 +307,32 @@ function addMessage(sender, content, msgId) {
'<div class="message-content user-message">' +
processedContent +
"</div>";
} else {
var cleanContent = stripMarkdownBlocks(content);
// Check if content has HTML (any tag, including comments)
var hasHtmlTags = /<\/?[a-zA-Z][^>]*>|<!--|-->/i.test(cleanContent);
console.log("Bot message - hasHtmlTags:", hasHtmlTags, "content length:", cleanContent.length, "msgId:", msgId);
} else {
var cleanContent = stripMarkdownBlocks(content);
// Check if content has HTML (any tag, including comments)
var hasHtmlTags = /<\/?[a-zA-Z][^>]*>|<!--|-->/i.test(cleanContent);
console.log("Bot message - hasHtmlTags:", hasHtmlTags, "content length:", cleanContent.length, "msgId:", msgId);
var parsed;
if (hasHtmlTags && msgId) {
// Streaming HTML content - show as text initially to avoid broken tags
// Will be rendered as HTML at finalizeStreaming
parsed = escapeHtml(cleanContent);
} else if (hasHtmlTags) {
// Complete HTML content - render directly
parsed = cleanContent;
} else {
// Markdown content
parsed = typeof marked !== "undefined" && marked.parse
? marked.parse(cleanContent)
: escapeHtml(cleanContent);
}
parsed = renderMentionInMessage(parsed);
div.innerHTML =
'<div class="message-content bot-message">' +
parsed +
"</div>";
}
var parsed;
if (hasHtmlTags && msgId) {
// Streaming HTML content - don't show raw HTML, show loading indicator
// Content will be rendered at finalizeStreaming
parsed = '<div class="streaming-loading"><span class="loading-dots">...</span></div>';
} else if (hasHtmlTags) {
// Complete HTML content - render directly
parsed = cleanContent;
} else {
// Markdown content
parsed = typeof marked !== "undefined" && marked.parse
? marked.parse(cleanContent)
: escapeHtml(cleanContent);
}
parsed = renderMentionInMessage(parsed);
div.innerHTML =
'<div class="message-content bot-message">' +
parsed +
"</div>";
}
messages.appendChild(div);
@ -775,33 +775,41 @@ function addMessage(sender, content, msgId) {
return true;
}
function updateStreaming(content) {
var el = document.getElementById(streamingMessageId);
if (!el) return;
var msgContent = el.querySelector(".message-content");
var cleanContent = stripMarkdownBlocks(content);
// Detect if it is HTML
var isHtml = /<\/?[a-zA-Z][^>]*>|<!--|-->/i.test(cleanContent);
if (isHtml) {
// If tags are balanced or it's been too long, render
if (isTagBalanced(cleanContent) || (Date.now() - lastRenderTime > 2000)) {
msgContent.innerHTML = renderMentionInMessage(cleanContent);
lastRenderTime = Date.now();
if (!isUserScrolling) scrollToBottom(true);
}
} else {
// Standard markdown/text rendering
var parsed = typeof marked !== "undefined" && marked.parse
? marked.parse(cleanContent)
: escapeHtml(cleanContent);
parsed = renderMentionInMessage(parsed);
msgContent.innerHTML = parsed;
if (!isUserScrolling) scrollToBottom(true);
}
function updateStreaming(content) {
var el = document.getElementById(streamingMessageId);
if (!el) return;
var msgContent = el.querySelector(".message-content");
var cleanContent = stripMarkdownBlocks(content);
// Detect if it is HTML
var isHtml = /<\/?[a-zA-Z][^>]*>|<!--|-->/i.test(cleanContent);
if (isHtml) {
// If tags are balanced or it's been too long, render as HTML
if (isTagBalanced(cleanContent) || (Date.now() - lastRenderTime > 2000)) {
msgContent.innerHTML = renderMentionInMessage(cleanContent);
lastRenderTime = Date.now();
if (!isUserScrolling) scrollToBottom(true);
} else {
// Tags not balanced yet - show escaped HTML to avoid showing raw tags
// This prevents HTML from appearing as raw text before it's ready
var escapedContent = escapeHtml(cleanContent);
// Only update if content changed to avoid flickering
if (msgContent.textContent !== cleanContent) {
msgContent.textContent = cleanContent;
}
}
} else {
// Standard markdown/text rendering
var parsed = typeof marked !== "undefined" && marked.parse
? marked.parse(cleanContent)
: escapeHtml(cleanContent);
parsed = renderMentionInMessage(parsed);
msgContent.innerHTML = parsed;
if (!isUserScrolling) scrollToBottom(true);
}
}
function finalizeStreaming() {
var el = document.getElementById(streamingMessageId);