From fdc0f04a36f05415f84d8cea764781db68abc99e Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 1 Nov 2025 05:56:44 -0400
Subject: [PATCH] refac

---
 src/app.css                                   |  4 +-
 src/lib/components/chat/Chat.svelte           |  4 +-
 .../components/chat/Messages/CodeBlock.svelte | 43 +++++++++----------
 3 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/app.css b/src/app.css
index 6a85c69d7e..f4e3225d3b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -129,8 +129,8 @@ li p {
 }
 
 ::-webkit-scrollbar {
-	height: 0.4rem;
-	width: 0.4rem;
+	height: 0.45rem;
+	width: 0.45rem;
 }
 
 ::-webkit-scrollbar-track {
diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index dae3ff91e3..59bf1fe2a5 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -2632,7 +2632,7 @@
 
 <style>
 	::-webkit-scrollbar {
-		height: 0.6rem;
-		width: 0.6rem;
+		height: 0.5rem;
+		width: 0.5rem;
 	}
 </style>
diff --git a/src/lib/components/chat/Messages/CodeBlock.svelte b/src/lib/components/chat/Messages/CodeBlock.svelte
index e196aa0f3d..fbdb62e550 100644
--- a/src/lib/components/chat/Messages/CodeBlock.svelte
+++ b/src/lib/components/chat/Messages/CodeBlock.svelte
@@ -59,8 +59,8 @@
 
 	let _token = null;
 
-	let mermaidHtml = null;
-	let vegaHtml = null;
+	let renderHTML = null;
+	let renderError = null;
 
 	let highlightedCode = null;
 	let executing = false;
@@ -340,24 +340,24 @@
 		onUpdate(token);
 		if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
 			try {
-				mermaidHtml = await renderMermaid(code);
+				renderHTML = await renderMermaid(code);
 			} catch (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}`);
-				mermaidHtml = null;
+				renderError = $i18n.t('Failed to render diagram') + `: ${errorMsg}`;
+				renderHTML = null;
 			}
 		} else if (
 			(lang === 'vega' || lang === 'vega-lite') &&
 			(token?.raw ?? '').slice(-4).includes('```')
 		) {
 			try {
-				vegaHtml = await renderVegaVisualization(code);
+				renderHTML = await renderVegaVisualization(code);
 			} catch (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}`);
-				vegaHtml = null;
+				renderError = $i18n.t('Failed to render visualization') + `: ${errorMsg}`;
+				renderHTML = null;
 			}
 		}
 	};
@@ -420,25 +420,24 @@
 		class="relative {className} flex flex-col rounded-3xl border border-gray-100 dark:border-gray-850 my-0.5"
 		dir="ltr"
 	>
-		{#if lang === 'mermaid'}
-			{#if mermaidHtml}
+		{#if ['mermaid', 'vega', 'vega-lite'].includes(lang)}
+			{#if renderHTML}
 				<SvgPanZoom
 					className=" rounded-3xl max-h-fit overflow-hidden"
-					svg={mermaidHtml}
+					svg={renderHTML}
 					content={_token.text}
 				/>
 			{: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>
+				<div class="p-3">
+					{#if renderError}
+						<div
+							class="flex gap-2.5 border px-4 py-3 border-red-600/10 bg-red-600/10 rounded-2xl mb-2"
+						>
+							{renderError}
+						</div>
+					{/if}
+					<pre>{code}</pre>
+				</div>
 			{/if}
 		{:else}
 			<div