修复: Web 端手机查看 AI 回复撑宽页面 + 图片无法显示

[lx3133584]

问题描述

Web 端在手机上查看 AI 回复时存在两个问题：

1. 页面被撑宽：AI 回复中的 Markdown 表格使用了 w-max（width: max-content）+ whitespace-nowrap，在手机窄屏上表格内容超出视口宽度，导致整个页面可水平滚动。
2. 图片无法显示：AI 回复中如果包含 HTML <img> 标签，由于缺少 rehype-raw 插件，react-markdown 默认将 HTML 标签当作纯文本显示而非渲染为实际图片。同时 rehype-sanitize 的 img 属性白名单依赖全局 * 属性的隐式继承，不够稳健。

修复方案

web/src/components/chat/MarkdownRenderer.tsx

手机端表格宽度：

• 移除表格的 w-max 样式，保留 min-w-full 确保表格至少填满容器宽度
• 将 th/td 单元格的 whitespace-nowrap break-normal 改为 break-words，允许文本在手机端自然换行
• 表格外层容器的 overflow-x-auto 仍保留，内容确实较宽时仍可水平滚动

图片渲染：

• 在 rehype 管道中新增 rehype-raw 插件（位于 rehype-sanitize 之前），支持解析 Markdown 中嵌入的 HTML 标签
• 仅在非 streaming 模式下启用（streaming 模式无 sanitize，不应解析不可信 HTML）
• 显式声明 img 标签允许的属性列表（src/alt/width/height/loading/longDesc/title），不再依赖 defaultSchema 全局属性的隐式继承

web/package.json

• 新增 rehype-raw@^7.0.0 依赖

[lx3133584]

我是手机端web用户，感觉页面问题还挺多的，想帮忙改一下