Style leakage in gr.Chatbot when rendering HTML code snippet

快速结论：当 gr.Chatbot 的 content 字段包含带 <style> 标签的 HTML 代码片断时，该样式会泄漏到整个 Gradio 应用页面，导致 Style leakage in gr.Chatbot when rendering HTML code snippet。优先排查是否在 Chatbot 消息中混入了未转义的 HTML 块，并考虑对内容做转义或剥离样式。

适用环境：Issue 中确认为 Gradio 5.23.0、Windows 系统、Python 3.x；其他平台未复现。Chatbot 使用 type='messages' 模式。

最快修复方案：暂无确认的一步修复方案。可优先尝试在传递内容前对尖括号手动转义（msg.replace("<", "<").replace(">", ">")），或直接移除内容中的 <style> 标签。

注意事项：手动转义将导致 HTML 标签无法正常渲染（代码块变为纯文本），因此仅适用于不需要保留 HTML 结构的场景。升级 Gradio 至最新版本可能已隐含修复，但未在 Issue 中验证。

问题场景

用户在使用 Gradio 的 gr.Chatbot 组件（type='messages'）时，某条消息的 "content" 字段包含完整的 HTML 字符串（如代码片段、富文本等），该 HTML 内部存在 <style> 标签。页面加载后，该标签中定义的 CSS 规则（如 body { background: #f4f1ec; }）会覆盖整个 Gradio 应用的外观，导致按钮、面板等全局样式异常。

报错原文

Style leakage in gr.Chatbot when rendering HTML code snippet

（注：此问题不产生终端报错，而是通过页面样式异常表现出来。）

原因分析

可能原因：gr.Chatbot 在渲染消息内容时，直接将含 <style> 标签的 HTML 字符串注入到 DOM 中，且未使用 Shadow DOM、Scoped CSS 或 iframe 等隔离机制。因此，任何内联样式定义都会作用于整个 Gradio 应用文档，造成样式泄漏。

环境排查

确认 Gradio 版本：5.23.0（该版本已知存在此问题）
确认 Chatbot 的构建方式：使用 gr.Chatbot(value=[{"role": "user", "content": "..."}], type='messages')
测试内容前是否带有非空文本（如 “Explain following code:”）——Issue 发现该前缀会稳定触发泄漏；纯空 HTML 则不会。
操作系统：Windows（其他系统可能相同，未验证）

解决步骤

尝试升级 Gradio：检查并安装最新版（>=5.23.0 的后续版本），看是否已修复样式隔离问题。
手动转义尖括号：在将内容送入 Chatbot 前，对 < 和 > 进行 HTML 实体转义（.replace("<", "<").replace(">", ">")）。这会丧失 HTML 渲染能力，但能彻底避免样式泄漏。
剥离 <style> 标签：用正则或 HTML 解析器移除内容中的所有 <style>... 部分，保留其他 HTML 元素。