SVG Render (For Math Graphs, Pie Charts, e.t.c) Support For Web UI

[solomon-os]

we need to able to render svgs on the webui for mathematical diagrams like graphs, pie chart, e.t.c

[igor725]

I sure think it would be nice to have this feature. I don't have much experience with Svelte and can't really do much yet without spending quite some time on the research of this framework and WebUI's codebase. This simple patch below adds a preview button for SVG blocks just like for HTML ones... but probably it would be better to have inline SVGs and make the clicking on the preview button to open SVG image on top of codeblock, not fullscreen and then let user to maximize it by double clicking. I'm not that deep into WebUI code to find a better solution for this but I might try to do something (unless somebody who actually knows what they doing pick up the implementation instead).

diff --git a/tools/server/webui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-code-blocks.ts b/tools/server/webui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-code-blocks.ts
index 9d9348a5f..f9959f7c2 100644
--- a/tools/server/webui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-code-blocks.ts
+++ b/tools/server/webui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-code-blocks.ts
@@ -68,7 +68,7 @@ function createPreviewButton(codeId: string): Element {
 function createHeader(language: string, codeId: string): Element {
        const actions: Element[] = [createCopyButton(codeId)];

-       if (language.toLowerCase() === 'html') {
+       if (language.toLowerCase() === 'html' || language.toLowerCase() === 'svg') {
                actions.push(createPreviewButton(codeId));
        }