← Back to PRs

#22333: Fix webchat inline image rendering and size handling

by AIflow-Labs open 2026-02-21 01:56 View on GitHub →
app: web-ui size: S
## What changed - Allow markdown/image sanitizer to preserve `width` and `height` on image nodes for deterministic sizing. - Add explicit image preview wrappers in chat rendering so attachment previews can show controlled dimensions and a clear fallback action. - Add safe image-dimension handling and fallback UI for broken image previews with direct "Open image" link. - Increase and clamp inline image sizing defaults via CSS so images remain constrained to viewport (`--chat-message-image-width` / `--chat-message-image-height`) and avoid oversized overflow. ## Why this fixes the issue Webchat message image previews now render with consistent size controls and do not overflow the chat bubble area. If a preview image fails to load, users still get an explicit open action instead of a dead image placeholder. ## Tests run - `cd ui && pnpm vitest run --config vitest.config.ts src/ui/markdown.test.ts` - `cd ui && pnpm vitest run --config vitest.config.ts src/ui/views/chat.test.ts src/ui/chat/message-extract.test.ts` ## Additional validation - Full `cd ui && pnpm test` currently has unrelated failures in existing navigation/browser tests in this environment, not touched by this patch. ## Edge cases - Handles image `width`/`height` values from structured image blocks and sanitizes to safe CSS lengths. - Falls back to hidden `Open image` link on image load error. - Keeps existing image click-to-open behavior intact for successful loads. <!-- greptile_comment --> <h3>Greptile Summary</h3> Added robust image dimension handling and fallback UI for webchat inline images. The changes properly sanitize `width` and `height` attributes (allowing only px/% units), preserve them through the markdown/image pipeline, and apply them via CSS custom properties to prevent overflow. A fallback "Open image" link displays when images fail to load. **Key improvements:** - `sanitizeImageDimension` validates image dimensions and only allows safe CSS units (px, %) - Image wrapper with error/load handlers toggles fallback UI on load failure - CSS custom properties (`--chat-message-image-width`/`--chat-message-image-height`) enable inline size overrides while respecting max constraints - Added `width` and `height` to DOMPurify's allowed attributes for markdown images <h3>Confidence Score: 4/5</h3> - Safe to merge with minor style optimization suggested - Implementation is well-designed with proper input validation, sanitization, and graceful error handling. The `sanitizeImageDimension` function correctly restricts values to safe CSS units (px/%). Error/load handlers provide good UX. One minor CSS redundancy (`min(100%, 100%)`) should be simplified but doesn't affect functionality. - No files require special attention - one minor style optimization suggested in `layout.css` <sub>Last reviewed commit: 8110973</sub> <!-- greptile_other_comments_section --> <!-- /greptile_comment -->

Most Similar PRs