From 9801a2d23fae751f7af788392961b175bfce27b1 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 17 May 2025 03:14:26 +0400
Subject: [PATCH] refac

---
 .../components/chat/Messages/CodeBlock.svelte | 12 +++++------
 .../chat/Messages/ContentRenderer.svelte      | 21 ++++++++++---------
 .../components/chat/Messages/Markdown.svelte  |  5 +++--
 .../Messages/Markdown/MarkdownTokens.svelte   |  8 +++----
 .../chat/Messages/ResponseMessage.svelte      |  2 +-
 5 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/chat/Messages/CodeBlock.svelte b/src/lib/components/chat/Messages/CodeBlock.svelte
index bd5195870..af7c22771 100644
--- a/src/lib/components/chat/Messages/CodeBlock.svelte
+++ b/src/lib/components/chat/Messages/CodeBlock.svelte
@@ -24,7 +24,7 @@
 	export let id = '';
 
 	export let onSave = (e) => {};
-	export let onCode = (e) => {};
+	export let onUpdate = (e) => {};
 	export let onPreview = (e) => {};
 
 	export let save = false;
@@ -340,6 +340,8 @@
 				await drawMermaidDiagram();
 			})();
 		}
+
+		onUpdate(token);
 	};
 
 	$: if (token) {
@@ -352,8 +354,6 @@
 		render();
 	}
 
-	$: onCode({ lang, code });
-
 	$: if (attributes) {
 		onAttributesUpdate();
 	}
@@ -386,10 +386,10 @@
 
 	onMount(async () => {
 		console.log('codeblock', lang, code);
-
-		if (lang) {
-			onCode({ lang, code });
+		if (token) {
+			onUpdate(token);
 		}
+
 		if (document.documentElement.classList.contains('dark')) {
 			mermaid.initialize({
 				startOnLoad: true,
diff --git a/src/lib/components/chat/Messages/ContentRenderer.svelte b/src/lib/components/chat/Messages/ContentRenderer.svelte
index 895390c8e..179559fc0 100644
--- a/src/lib/components/chat/Messages/ContentRenderer.svelte
+++ b/src/lib/components/chat/Messages/ContentRenderer.svelte
@@ -25,7 +25,7 @@
 	export let preview = false;
 	export let floatingButtons = true;
 
-	export let onUpdate = () => {};
+	export let onSave = () => {};
 	export let onSourceClick = () => {};
 	export let onTaskClick = () => {};
 
@@ -164,15 +164,9 @@
 		}, [])}
 		{onSourceClick}
 		{onTaskClick}
-		{onUpdate}
-		onPreview={async (value) => {
-			await artifactCode.set(value);
-			await showControls.set(true);
-			await showArtifacts.set(true);
-			await showOverview.set(false);
-		}}
-		onCode={(value) => {
-			const { lang, code } = value;
+		{onSave}
+		onUpdate={(token) => {
+			const { lang, text: code } = token;
 
 			if (
 				($settings?.detectArtifacts ?? true) &&
@@ -184,6 +178,13 @@
 				showControls.set(true);
 			}
 		}}
+		onPreview={async (value) => {
+			console.log('Preview', value);
+			await artifactCode.set(value);
+			await showControls.set(true);
+			await showArtifacts.set(true);
+			await showOverview.set(false);
+		}}
 	/>
 </div>
 
diff --git a/src/lib/components/chat/Messages/Markdown.svelte b/src/lib/components/chat/Messages/Markdown.svelte
index 6f90c407a..2978def3e 100644
--- a/src/lib/components/chat/Messages/Markdown.svelte
+++ b/src/lib/components/chat/Messages/Markdown.svelte
@@ -16,8 +16,9 @@
 
 	export let sourceIds = [];
 
+	export let onSave = () => {};
 	export let onUpdate = () => {};
-	export let onCode = () => {};
+
 	export let onPreview = () => {};
 
 	export let onSourceClick = () => {};
@@ -49,8 +50,8 @@
 		{preview}
 		{onTaskClick}
 		{onSourceClick}
+		{onSave}
 		{onUpdate}
-		{onCode}
 		{onPreview}
 	/>
 {/key}
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
index 53c61fe80..dbe77a414 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
@@ -31,8 +31,8 @@
 	export let save = false;
 	export let preview = false;
 
+	export let onSave: Function = () => {};
 	export let onUpdate: Function = () => {};
-	export let onCode: Function = () => {};
 	export let onPreview: Function = () => {};
 
 	export let onTaskClick: Function = () => {};
@@ -98,15 +98,15 @@
 				{attributes}
 				{save}
 				{preview}
-				{onCode}
-				{onPreview}
 				onSave={(value) => {
-					onUpdate({
+					onSave({
 						raw: token.raw,
 						oldContent: token.text,
 						newContent: value
 					});
 				}}
+				{onUpdate}
+				{onPreview}
 			/>
 		{:else}
 			{token.text}
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index c421529e4..deb96c153 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -841,7 +841,7 @@
 										onAddMessages={({ modelId, parentId, messages }) => {
 											addMessages({ modelId, parentId, messages });
 										}}
-										onUpdate={({ raw, oldContent, newContent }) => {
+										onSave={({ raw, oldContent, newContent }) => {
 											history.messages[message.id].content = history.messages[
 												message.id
 											].content.replace(raw, raw.replace(oldContent, newContent));