feat: implement HTML GenUI component and register custom markdown tags

[Soulter]

Modifications / 改动点

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

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

---

Checklist / 检查清单

• 😊 If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
  / 如果 PR 中有新加入的功能，已经通过 Issue / 邮件等方式和作者讨论过。

• 👀 My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
  / 我的更改经过了良好的测试，并已在上方提供了“验证步骤”和“运行截图”。

• 🤓 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.
  / 我确保没有引入新依赖库，或者引入了新依赖库的同时将其添加到 requirements.txt 和 pyproject.toml 文件相应位置。

• 😮 My changes do not introduce malicious code.
  / 我的更改没有引入恶意代码。

Summary by Sourcery

Introduce a reusable chat markdown component registry and HTML GenUI preview block for generated HTML UIs in chat messages.

New Features:

• Add HtmlGenUiNode component to render AI-generated HTML UIs with preview and source views inside an iframe sandbox.
• Register a new html-genui custom markdown tag across chat views so models can emit runnable HTML UI blocks.

Enhancements:

• Centralize chat markdown custom component registration and tag configuration in chatMarkdownComponents, reused by all chat message list variants.
• Adjust chat input padding and simplify composer container styles for a cleaner layout around the input area and HTML UI blocks.

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• Since registerChatMarkdownComponents ultimately configures global Markstream state, consider registering these components once at app startup (e.g., in a plugin) instead of calling it in each chat view component to avoid redundant work and potential ordering issues if other code also customizes Markstream.
• The <iframe> sandbox currently allows allow-popups and several powerful capabilities; if you don't have a clear need for all of them, consider tightening the sandbox policy (e.g., dropping allow-popups or others) to reduce the potential impact of untrusted HTML.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Since `registerChatMarkdownComponents` ultimately configures global Markstream state, consider registering these components once at app startup (e.g., in a plugin) instead of calling it in each chat view component to avoid redundant work and potential ordering issues if other code also customizes Markstream.
- The `<iframe>` sandbox currently allows `allow-popups` and several powerful capabilities; if you don't have a clear need for all of them, consider tightening the sandbox policy (e.g., dropping `allow-popups` or others) to reduce the potential impact of untrusted HTML.

## Individual Comments

### Comment 1
<location path="dashboard/src/components/chat/message_list_comps/HtmlGenUiNode.vue" line_range="45-46" />
<code_context>
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+
+const RENDER_THROTTLE_MS = 500;
+const sandboxPolicy =
+  "allow-forms allow-modals allow-pointer-lock allow-popups allow-scripts";
+
+const props = defineProps<{
</code_context>
<issue_to_address>
**🚨 issue (security):** Tighten iframe sandbox permissions to reduce security and UX risks.

The sandbox currently permits forms, modals, pointer lock, popups, and scripts. For an embedded preview in a chat UI, `allow-popups` and `allow-modals` are particularly risky (e.g., repeated `window.open`, disruptive dialogs). Unless there’s a concrete need, drop `allow-popups` and consider removing `allow-modals`/`allow-forms`, whitelisting only what’s strictly required (likely `allow-scripts` plus any essentials).
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

🚨 issue (security): Tighten iframe sandbox permissions to reduce security and UX risks.

The sandbox currently permits forms, modals, pointer lock, popups, and scripts. For an embedded preview in a chat UI, allow-popups and allow-modals are particularly risky (e.g., repeated window.open, disruptive dialogs). Unless there’s a concrete need, drop allow-popups and consider removing allow-modals/allow-forms, whitelisting only what’s strictly required (likely allow-scripts plus any essentials).

[gemini-code-assist]

Code Review

This pull request introduces a new HtmlGenUiNode component to render generated HTML UI previews inside a sandboxed iframe or display their source code, alongside updating the main agent's system prompt to output <html-genui> blocks. It also refactors markdown component registration across chat views into a centralized helper. Feedback includes defensively checking if props.node?.attrs is an array before calling .find() to prevent runtime errors, and setting the iframe background to transparent instead of #fff to avoid a bright white flash in dark mode.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

To prevent potential runtime errors, we should defensively check if props.node?.attrs is an array before calling .find(). If the markdown parser or node structure changes such that attrs is an object or null, calling .find directly would throw a TypeError.

function attrValue(name: string) {
  const attrs = props.node?.attrs;
  if (!Array.isArray(attrs)) return "";
  const attr = attrs.find(
    ([key]) => key.toLowerCase() === name.toLowerCase(),
  );
  return attr?.[1]?.trim() || "";
}

[gemini-code-assist]

Setting the iframe element's background to #fff can cause a bright white flash or background mismatch in dark mode before or during the loading of the generated HTML document. Since buildHeadExtras already explicitly sets the background color of the iframe's document body to match the theme (#111827 for dark mode and #ffffff for light mode), we can safely set the iframe element's background to transparent to ensure a seamless visual transition.

.html-genui-frame {
  display: block;
  width: 100%;
  height: clamp(280px, 52vh, 620px);
  border: 0;
  background: transparent;
}