Skip to content

feat: add SVG preview and download to artifact panel - #608

Merged
chenyme merged 6 commits into
DEEIX-AI:devfrom
xmengnet:feat/artifact-svg-preview
Aug 17, 2026
Merged

feat: add SVG preview and download to artifact panel#608
chenyme merged 6 commits into
DEEIX-AI:devfrom
xmengnet:feat/artifact-svg-preview

Conversation

@xmengnet

Copy link
Copy Markdown
Contributor

Summary

Closes #606

SVG code blocks in assistant messages were not previewable. This PR adds svg as a new Artifact preview kind, so svg (also svg+xml / image/svg+xml) code blocks get the existing artifact eye-icon button and render inside the sandboxed Artifact panel:

  • Preview: the SVG source is wrapped in a minimal HTML document reusing the existing previewHead (CSP meta, app theme CSS variables, runtime error overlay) and rendered in the sandbox="allow-scripts" iframe, centered with max-width: 100% — same security posture as the HTML/CSS/JS artifact kinds.
  • Auto-open on streaming (desktop): during message streaming the panel opens automatically via the existing artifact auto-open flow, so rendered SVG appears without any click.
  • Sniffing: svg root elements (e.g. <svg ...>) are recognized as SVG when no language or markdown is specified, matching the existing HTML sniffing behavior.
  • Download: downloads the raw .svg file (image/svg+xml) instead of the wrapper document; toolbar label switches to "Download SVG".

This addresses #606 with the Artifact panel approach (preview + download) rather than inline diagram rendering like Mermaid.

Change type

  • Feature
  • Bug fix
  • Documentation
  • Refactor
  • Configuration / deployment
  • Security hardening
  • Other

Affected areas

  • Frontend / UI
  • Backend / API
  • Authentication / authorization
  • Conversations / streaming
  • Files / RAG / extraction
  • Model routing / providers
  • MCP / tools
  • Billing / payments
  • Admin console
  • Deployment / Docker / configuration
  • Documentation

Verification

  • pnpm typecheck — passed
  • pnpm exec biome check on the changed files — passed
  • i18n JSON validation (en-US / zh-CN chat.json) — passed
  • resolveArtifactPreviewKind logic verified with 12 cases (fence languages, markdown/empty-language <svg> sniffing, negative cases)

Screenshots, API examples, or logs

image

Configuration, migration, and compatibility notes

None. Requires the frontend-only change; adds chat.artifacts.downloadSvg i18n key in both en-US and zh-CN.

Documentation

  • Documentation is not needed for this change.
  • Documentation was updated.
  • Documentation still needs to be updated.

Security and privacy

  • No secrets, tokens, credentials, local config, or personal data are included.
  • User data access remains scoped by authenticated user context unless an admin-only path explicitly requires broader access.
  • Security-sensitive behavior was reviewed, including authentication, authorization, provider routing, file processing, billing, and admin APIs where relevant.

Checklist

  • I searched existing issues and pull requests.
  • Changes are focused and do not include unrelated refactors.
  • Tests or static verification were run where practical.
  • User-facing behavior, deployment steps, API contracts, or configuration changes are documented.
  • Generated artifacts are included only when this project explicitly requires them.
  • Caches, build output, .pyc files, .env files, and local storage data are not committed.

@chenyme
chenyme self-requested a review August 17, 2026 10:03
@chenyme chenyme self-assigned this Aug 17, 2026
@chenyme
chenyme merged commit 88a2ecf into DEEIX-AI:dev Aug 17, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: svg 不会自动渲染

2 participants