ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-13 21:05:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

UPD: Add Validators & Error Toast for Mermaid & Vega diagrams

Browse source 
### UPD: Feat:  Add Validators & Error Toast for Mermaid & Vega diagrams

Description:
As many time the diagrams generated or entered have syntax errors the diagrams are not rendered due to that errors, but as there isn't any notification is difficult to know what happend.

This PR add validator and toast notification when error on Mermaid and Vega/Vega-Lite diagrams, helping the user to fix its.
This commit is contained in:
_00_ 2025-10-04 14:17:04 +02:00
parent 039358e049
commit 2e08bda19d
2 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/lib/components/chat/Messages/CodeBlock.svelte
View file

@ -326,12 +326,12 @@
const render = async () => { const render = async () => {
onUpdate(token); onUpdate(token);
if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) { if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
mermaidHtml = await renderMermaidDiagram(code); mermaidHtml = await renderMermaidDiagram(code, $i18n);
} else if ( } else if (
(lang === 'vega' || lang === 'vega-lite') && (lang === 'vega' || lang === 'vega-lite') &&
(token?.raw ?? '').slice(-4).includes('```') (token?.raw ?? '').slice(-4).includes('```')
) { ) {
vegaHtml = await renderVegaVisualization(code); vegaHtml = await renderVegaVisualization(code, $i18n);
} }
}; };

44
src/lib/utils/index.ts
View file

@ -22,6 +22,8 @@ import markedExtension from '$lib/utils/marked/extension';
import markedKatexExtension from '$lib/utils/marked/katex-extension'; import markedKatexExtension from '$lib/utils/marked/katex-extension';
import hljs from 'highlight.js'; import hljs from 'highlight.js';
import { toast } from 'svelte-sonner';
////////////////////////// //////////////////////////
// Helper functions // Helper functions
////////////////////////// //////////////////////////
@ -1579,40 +1581,56 @@ export const decodeString = (str: string) => {
} }
}; };
export const renderMermaidDiagram = async (code: string) => { export const renderMermaidDiagram = async (code: string, i18n?: any) => {
try { try {
const { default: mermaid } = await import('mermaid'); const { default: mermaid } = await import('mermaid');
mermaid.initialize({ mermaid.initialize({
startOnLoad: true, startOnLoad: false, // Should be false when using render API
theme: document.documentElement.classList.contains('dark') ? 'dark' : 'default', theme: document.documentElement.classList.contains('dark') ? 'dark' : 'default',
securityLevel: 'loose' securityLevel: 'loose'
}); });
if (await mermaid.parse(code)) { const parseResult = await mermaid.parse(code, { suppressErrors: false });
if (parseResult) {
const { svg } = await mermaid.render(`mermaid-${uuidv4()}`, code); const { svg } = await mermaid.render(`mermaid-${uuidv4()}`, code);
return svg; return svg;
} }
return '';
} catch (error) { } catch (error) {
console.log('Failed to render mermaid diagram:', error); console.error('Failed to render mermaid diagram:', error);
const errorMsg = error instanceof Error ? error.message : String(error);
toast.error(i18n.t('Failed to render diagram') + `: ${errorMsg}`);
return ''; return '';
} }
}; };
export const renderVegaVisualization = async (spec: string) => { export const renderVegaVisualization = async (spec: string, i18n?: any) => {
try { try {
const vega = await import('vega'); const vega = await import('vega');
const parsedSpec = JSON.parse(spec); const parsedSpec = JSON.parse(spec);
if (!parsedSpec.$schema) {
const errorMsg = 'Specification missing $schema property';
toast.error(i18n.t('Failed to render diagram') + `: ${errorMsg}`);
throw new Error(errorMsg);
}
let vegaSpec; let vegaSpec;
if (parsedSpec.$schema && parsedSpec.$schema.includes('vega-lite')) { if (parsedSpec.$schema.includes('vega-lite')) {
const vegaLite = await import('vega-lite'); const vegaLite = await import('vega-lite');
vegaSpec = vegaLite.compile(parsedSpec).spec; vegaSpec = vegaLite.compile(parsedSpec).spec;
} else { } else if (parsedSpec.$schema.includes('vega')) {
vegaSpec = parsedSpec; vegaSpec = parsedSpec;
} } else {
const view = new vega.View(vega.parse(vegaSpec), {renderer: 'none'}); const errorMsg = 'Unknown schema format: ' + parsedSpec.$schema;
toast.error(i18n.t('Failed to render diagram') + `: ${errorMsg}`);
throw new Error(errorMsg);
}
const runtime = vega.parse(vegaSpec);
const view = new vega.View(runtime, {renderer: 'none'});
const svg = await view.toSVG(); const svg = await view.toSVG();
return svg; return svg;
} catch (error) { } catch (error) {
console.log('Failed to render Vega visualization:', error); console.error('Failed to render Vega visualization:', error);
const errorMsg = error instanceof Error ? error.message : String(error);
toast.error(i18n.t('Failed to render diagram') + `: ${errorMsg}`);
return ''; return '';
} }
}; };