From 351ba167f56bb31e13bb18101a91b667c7c36059 Mon Sep 17 00:00:00 2001
From: _00_ <131402327+rgaricano@users.noreply.github.com>
Date: Fri, 3 Oct 2025 19:42:04 +0200
Subject: [PATCH] FEAT: Add Vega Char Visualizer Renderer

### FEAT: Add Vega Char Visualizer Renderer

Feature required in https://github.com/open-webui/open-webui/discussions/18022

Added npm vega lib to package.json
Added function for visualization renderer to src/libs/utils/index.ts
Added logic to src/lib/components/chat/Messages/CodeBlock.svelte

The treatment is similar as for mermaid diagrams.

Reference: https://vega.github.io/vega/
---
 package.json                                   |  1 +
 .../components/chat/Messages/CodeBlock.svelte  | 18 +++++++++++++++++-
 src/lib/utils/index.ts                         | 13 +++++++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 658964de0b..57aa011167 100644
--- a/package.json
+++ b/package.json
@@ -137,6 +137,7 @@
 		"turndown-plugin-gfm": "^1.0.2",
 		"undici": "^7.3.0",
 		"uuid": "^9.0.1",
+		"vega": "^6.2.0",
 		"vite-plugin-static-copy": "^2.2.0",
 		"y-prosemirror": "^1.3.7",
 		"yaml": "^2.7.1",
diff --git a/src/lib/components/chat/Messages/CodeBlock.svelte b/src/lib/components/chat/Messages/CodeBlock.svelte
index 6d6f0a5124..13bc7ec2a1 100644
--- a/src/lib/components/chat/Messages/CodeBlock.svelte
+++ b/src/lib/components/chat/Messages/CodeBlock.svelte
@@ -6,7 +6,7 @@
 
 	import PyodideWorker from '$lib/workers/pyodide.worker?worker';
 	import { executeCode } from '$lib/apis/utils';
-	import { copyToClipboard, renderMermaidDiagram } from '$lib/utils';
+	import { copyToClipboard, renderMermaidDiagram, renderVegaVisualization } from '$lib/utils';
 
 	import 'highlight.js/styles/github-dark.min.css';
 
@@ -55,6 +55,7 @@
 	let _token = null;
 
 	let mermaidHtml = null;
+	let vegaHtml = null;
 
 	let highlightedCode = null;
 	let executing = false;
@@ -326,6 +327,11 @@
 		onUpdate(token);
 		if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
 			mermaidHtml = await renderMermaidDiagram(code);
+		} else if (
+			(lang === 'vega' || lang === 'vega-lite') &&
+			(token?.raw ?? '').slice(-4).includes('```')
+		) {
+			vegaHtml = await renderVegaVisualization(code);
 		}
 	};
 
@@ -397,6 +403,16 @@
 			{:else}
 				<pre class="mermaid">{code}</pre>
 			{/if}
+		{:else if lang === 'vega' || lang === 'vega-lite'}
+			{#if vegaHtml}
+				<SvgPanZoom
+					className="rounded-3xl max-h-fit overflow-hidden"
+					svg={vegaHtml}
+					content={_token.text}
+				/>
+			{:else}
+				<pre class="vega">{code}</pre>
+			{/if}
 		{:else}
 			<div
 				class="absolute left-0 right-0 py-2.5 pr-3 text-text-300 pl-4.5 text-xs font-medium dark:text-white"
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 2b55063174..51ec9e75cb 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -1596,3 +1596,16 @@ export const renderMermaidDiagram = async (code: string) => {
 		return '';
 	}
 };
+
+export const renderVegaVisualization = async (spec: string) => {
+	try {
+		const vega = await import('vega');
+		const parsedSpec = JSON.parse(spec);
+		const view = new vega.View(vega.parse(parsedSpec), { renderer: 'none' });
+		const svg = await view.toSVG();
+		return svg;
+	} catch (error) {
+		console.log('Failed to render Vega visualization:', error);
+		return '';
+	}
+};