Skip to content

fix: render standalone HTML documents consistently in WebChat#6157

Closed
tsubasakong wants to merge 2 commits intoAstrBotDevs:masterfrom
tsubasakong:fix/5988-webchat-html-document
Closed

fix: render standalone HTML documents consistently in WebChat#6157
tsubasakong wants to merge 2 commits intoAstrBotDevs:masterfrom
tsubasakong:fix/5988-webchat-html-document

Conversation

@tsubasakong
Copy link
Copy Markdown
Contributor

@tsubasakong tsubasakong commented Mar 12, 2026

Fixes #5988.

Modifications / 改动点

  • Detect plain-text assistant messages that are actually standalone HTML documents.

  • Wrap those full-document HTML responses in an html fenced code block before passing them to MarkdownRender, so WebChat shows the whole page consistently as code instead of partially rendering live form elements.

  • Leave mixed-content messages unchanged, so normal markdown / inline HTML behavior is unaffected.

  • This is NOT a breaking change. / 这不是一个破坏性变更。

Screenshots or Test Results / 运行截图或测试结果

Verification steps:

  1. Send a standalone HTML document response in WebChat (for example a full <!DOCTYPE html> ... </html> page).
  2. Confirm the full response is rendered as a single HTML code block instead of partially creating interactive DOM elements.
  3. Send a normal mixed-content message (plain text plus embedded HTML snippet) and confirm it still renders the existing way.

Test logs:

$ node <<'JS'
fullDocWrapped= true
mixedUnchanged= true
$ git diff --check
(no output)

Checklist / 检查清单

  • 😊 如果 PR 中有新加入的功能,已经通过 Issue / 邮件等方式和作者讨论过。/ If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
  • 👀 我的更改经过了良好的测试,并已在上方提供了“验证步骤”和“运行截图”。/ My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
  • 🤓 我确保没有引入新依赖库,或者引入了新依赖库的同时将其添加到了 requirements.txtpyproject.toml 文件相应位置。/ I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in requirements.txt and pyproject.toml.
  • 😮 我的更改没有引入恶意代码。/ My changes do not introduce malicious code.

Summary by Sourcery

错误修复:

  • 在纯文本消息部分中检测独立的 HTML 文档响应,并将其包裹在 HTML 代码围栏块中,以便在 WebChat 中作为代码渲染,而不是作为实时 DOM 元素渲染。
Original summary in English

Summary by Sourcery

Bug Fixes:

  • Detect standalone HTML document responses in plain-text message parts and wrap them in HTML fenced code blocks so they render as code instead of live DOM elements in WebChat.

@auto-assign auto-assign bot requested review from Raven95676 and Soulter March 12, 2026 19:25
@dosubot dosubot bot added the size:S This PR changes 10-29 lines, ignoring generated files. label Mar 12, 2026
@gemini-code-assist
Copy link
Copy Markdown
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses an issue in WebChat where standalone HTML documents sent as assistant messages were partially rendered as interactive DOM elements. The changes introduce a mechanism to identify these full HTML documents and preprocess them by wrapping them in Markdown HTML code blocks. This ensures that such responses are consistently displayed as code, preventing unintended live rendering, while maintaining the expected behavior for messages with mixed content.

Highlights

  • HTML Document Detection: Implemented logic to detect plain-text assistant messages that are complete standalone HTML documents.
  • Consistent HTML Rendering: Wrapped detected full-document HTML responses in an html fenced code block before passing them to MarkdownRender to ensure they are displayed consistently as code in WebChat.
  • Preservation of Mixed Content: Ensured that messages containing a mix of plain text and inline HTML snippets remain unchanged, preserving their existing rendering behavior.
Changelog
  • dashboard/src/components/chat/message_list_comps/MessagePartsRenderer.vue
    • Added a new utility function normalizeMarkdownContent to preprocess text content.
    • Introduced a regular expression FULL_HTML_DOCUMENT_RE to identify complete HTML documents.
    • Modified the MarkdownRender component to use normalizeMarkdownContent for its content prop, ensuring proper handling of HTML documents.
Activity
  • The author provided detailed verification steps to confirm the fix for standalone HTML documents and the preservation of mixed-content messages.
  • Test logs were included, indicating successful execution of verification steps.
  • All items in the provided checklist, including discussions for new features, testing, dependency management, and code safety, were marked as complete by the author.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Copy Markdown
Contributor

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - 我在这里给出一些整体性的反馈:

  • 在将检测到的完整 HTML 文档包裹进 html 代码块之前,建议对其中已有的三反引号进行转义或转换,否则如果内容中包含 (例如脚本里),可能会破坏最终生成的 Markdown 结构。
  • 如果其他组件也会把助手的纯文本作为 Markdown 渲染,建议考虑将 normalizeMarkdownContentFULL_HTML_DOCUMENT_RE 抽到一个共享的工具模块中,这样可以在整个应用中保持 HTML 文档检测逻辑的一致性。
供 AI 代理使用的提示词
Please address the comments from this code review:

## Overall Comments
- Consider escaping or transforming any existing triple backticks inside a detected full HTML document before wrapping it in a ```html fenced block, otherwise content that includes ``` (e.g., in scripts) could break the resulting markdown structure.
- If other components also render assistant plain-text as markdown, it may be worth moving `normalizeMarkdownContent` and `FULL_HTML_DOCUMENT_RE` into a shared utility to keep the HTML-document detection logic consistent across the app.

Sourcery 对开源项目免费——如果你觉得我们的评审有帮助,欢迎分享 ✨
帮我变得更有用!请在每条评论上点 👍 或 👎,我会根据你的反馈来改进后续的代码评审。
Original comment in English

Hey - I've left some high level feedback:

  • Consider escaping or transforming any existing triple backticks inside a detected full HTML document before wrapping it in a html fenced block, otherwise content that includes (e.g., in scripts) could break the resulting markdown structure.
  • If other components also render assistant plain-text as markdown, it may be worth moving normalizeMarkdownContent and FULL_HTML_DOCUMENT_RE into a shared utility to keep the HTML-document detection logic consistent across the app.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- Consider escaping or transforming any existing triple backticks inside a detected full HTML document before wrapping it in a ```html fenced block, otherwise content that includes ``` (e.g., in scripts) could break the resulting markdown structure.
- If other components also render assistant plain-text as markdown, it may be worth moving `normalizeMarkdownContent` and `FULL_HTML_DOCUMENT_RE` into a shared utility to keep the HTML-document detection logic consistent across the app.

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request addresses an issue where standalone HTML documents were being partially rendered in WebChat. The fix involves detecting these documents using a regular expression and wrapping them in a markdown HTML code block. The approach is sound and effectively solves the problem. I have one suggestion to improve the regular expression for better readability and maintainability by using a more modern syntax.

emit('download-file', file);
};

const FULL_HTML_DOCUMENT_RE = /^\s*(?:<!doctype\s+html[^>]*>\s*)?<html\b[\s\S]*<\/html>\s*$/i;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For improved readability and to align with modern JavaScript standards, consider using the s (dotAll) flag in your regular expression. This flag allows . to match newline characters, making the [\s\S] construct unnecessary. The resulting regex is cleaner and easier to understand.

const FULL_HTML_DOCUMENT_RE = /^\s*(?:<!doctype\s+html[^>]*>\s*)?<html\b.*<\/html>\s*$/is;

@dosubot dosubot bot added the feature:chatui The bug / feature is about astrbot's chatui, webchat label Mar 12, 2026
@Soulter
Copy link
Copy Markdown
Member

Soulter commented Mar 21, 2026

already fixed in #6074, thanks!

@Soulter Soulter closed this Mar 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature:chatui The bug / feature is about astrbot's chatui, webchat size:S This PR changes 10-29 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] WebChat 界面中输出一个完整的 HTML 页面时,未能正确识别该内容

2 participants