From d215e46315d5a88d1496b17414e5fd6ca3e5885e Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 15 Feb 2026 22:49:56 -0600
Subject: [PATCH] refac: styling

---
 .../components/chat/Messages/CodeBlock.svelte | 18 ++--
 .../components/common/ToolCallDisplay.svelte  | 82 ++++++++++++-------
 2 files changed, 61 insertions(+), 39 deletions(-)

diff --git a/src/lib/components/chat/Messages/CodeBlock.svelte b/src/lib/components/chat/Messages/CodeBlock.svelte
index c236671f5..e11e4c355 100644
--- a/src/lib/components/chat/Messages/CodeBlock.svelte
+++ b/src/lib/components/chat/Messages/CodeBlock.svelte
@@ -417,13 +417,13 @@
 
 <div>
 	<div
-		class="relative {className} flex flex-col rounded-3xl border border-gray-100/30 dark:border-gray-850/30 my-0.5"
+		class="relative {className} flex flex-col rounded-2xl border border-gray-100/30 dark:border-gray-850/30 my-0.5"
 		dir="ltr"
 	>
 		{#if ['mermaid', 'vega', 'vega-lite'].includes(lang)}
 			{#if renderHTML}
 				<SvgPanZoom
-					className=" rounded-3xl max-h-fit overflow-hidden"
+					className=" rounded-2xl max-h-fit overflow-hidden"
 					svg={renderHTML}
 					content={_token.text}
 				/>
@@ -441,13 +441,13 @@
 			{/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"
+				class="absolute left-0 right-0 py-1.5 pr-3 text-text-300 pl-4.5 text-xs font-medium dark:text-white"
 			>
 				{lang}
 			</div>
 
 			<div
-				class="sticky {stickyButtonsClassName} left-0 right-0 py-2 pr-3 flex items-center justify-end w-full z-10 text-xs text-black dark:text-white"
+				class="sticky {stickyButtonsClassName} left-0 right-0 py-1.5 pr-3 flex items-center justify-end w-full z-10 text-xs text-black dark:text-white"
 			>
 				<div class="flex items-center gap-0.5">
 					<button
@@ -514,13 +514,13 @@
 			</div>
 
 			<div
-				class="language-{lang} rounded-t-3xl -mt-9 {editorClassName
+				class="language-{lang} rounded-t-2xl -mt-8 {editorClassName
 					? editorClassName
 					: executing || stdout || stderr || result
 						? ''
-						: 'rounded-b-3xl'} overflow-hidden"
+						: 'rounded-b-2xl'} overflow-hidden"
 			>
-				<div class=" pt-8 bg-white dark:bg-black"></div>
+				<div class=" pt-6.5 bg-white dark:bg-black"></div>
 
 				{#if !collapsed}
 					{#if edit}
@@ -550,7 +550,7 @@
 					{/if}
 				{:else}
 					<div
-						class="bg-white dark:bg-black dark:text-white rounded-b-3xl! pt-0.5 pb-3 px-4 flex flex-col gap-2 text-xs"
+						class="bg-white dark:bg-black dark:text-white rounded-b-2xl! pt-0.5 pb-3 px-4 flex flex-col gap-2 text-xs"
 					>
 						<span class="text-gray-500 italic">
 							{$i18n.t('{{COUNT}} hidden lines', {
@@ -569,7 +569,7 @@
 
 				{#if executing || stdout || stderr || result || files}
 					<div
-						class="bg-gray-50 dark:bg-black dark:text-white rounded-b-3xl! py-4 px-4 flex flex-col gap-2"
+						class="bg-gray-50 dark:bg-black dark:text-white rounded-b-2xl! py-4 px-4 flex flex-col gap-2"
 					>
 						{#if executing}
 							<div class=" ">
diff --git a/src/lib/components/common/ToolCallDisplay.svelte b/src/lib/components/common/ToolCallDisplay.svelte
index f0e68e027..1c08291cd 100644
--- a/src/lib/components/common/ToolCallDisplay.svelte
+++ b/src/lib/components/common/ToolCallDisplay.svelte
@@ -12,6 +12,8 @@
 	import ChevronDown from '../icons/ChevronDown.svelte';
 	import Spinner from './Spinner.svelte';
 	import Markdown from '../chat/Messages/Markdown.svelte';
+	import WrenchSolid from '../icons/WrenchSolid.svelte';
+	import CheckCircle from '../icons/CheckCircle.svelte';
 	import Image from './Image.svelte';
 	import FullHeightIframe from './FullHeightIframe.svelte';
 
@@ -45,20 +47,16 @@
 	function formatJSONString(str: string) {
 		try {
 			const parsed = parseJSONString(str);
-			// If parsed is an object/array, then it's valid JSON
 			if (typeof parsed === 'object') {
 				return JSON.stringify(parsed, null, 2);
 			} else {
-				// It's a primitive value like a number, boolean, etc.
 				return `${JSON.stringify(String(parsed))}`;
 			}
 		} catch (e) {
-			// Not valid JSON, return as-is
 			return str;
 		}
 	}
 
-	// Decode and parse attributes
 	$: args = decode(attributes?.arguments ?? '');
 	$: result = decode(attributes?.result ?? '');
 	$: files = parseJSONString(decode(attributes?.files ?? ''));
@@ -72,11 +70,8 @@
 		<!-- Embed Mode: Show iframes without collapsible behavior -->
 		<div class="py-1 w-full cursor-pointer">
 			<div class="w-full text-xs text-gray-500">
-				<div class="">
-					{attributes.name}
-				</div>
+				{attributes.name}
 			</div>
-
 			{#each embeds as embed, idx}
 				<div class="my-2" id={`${componentId}-tool-call-embed-${idx}`}>
 					<FullHeightIframe
@@ -91,24 +86,31 @@
 			{/each}
 		</div>
 	{:else}
-		<!-- Standard collapsible tool call display -->
+		<!-- Tool call display -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			class="{buttonClassName} cursor-pointer"
 			on:pointerup={() => {
 				open = !open;
 			}}
 		>
-			<div
-				class="w-full font-medium flex items-center justify-between gap-2 {isExecuting
-					? 'shimmer'
-					: ''}"
-			>
+			<div class="w-full font-medium flex items-center gap-1.5 {isExecuting ? 'shimmer' : ''}">
+				<!-- Status icon -->
 				{#if isExecuting}
 					<div>
 						<Spinner className="size-4" />
 					</div>
+				{:else if isDone}
+					<div class="text-emerald-500 dark:text-emerald-400">
+						<CheckCircle className="size-4" strokeWidth="2" />
+					</div>
+				{:else}
+					<div class="text-gray-400 dark:text-gray-500">
+						<WrenchSolid className="size-3.5" />
+					</div>
 				{/if}
 
+				<!-- Label -->
 				<div class="">
 					{#if isDone}
 						<Markdown
@@ -127,6 +129,7 @@
 					{/if}
 				</div>
 
+				<!-- Chevron -->
 				<div class="flex self-center translate-y-[1px]">
 					{#if open}
 						<ChevronUp strokeWidth="3.5" className="size-3.5" />
@@ -139,22 +142,41 @@
 
 		{#if open}
 			<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
-				{#if isDone}
-					<Markdown
-						id={`${componentId}-tool-call-result`}
-						content={`> \`\`\`json
-> ${formatJSONString(args)}
-> ${formatJSONString(result)}
-> \`\`\``}
-					/>
-				{:else}
-					<Markdown
-						id={`${componentId}-tool-call-args`}
-						content={`> \`\`\`json
-> ${formatJSONString(args)}
-> \`\`\``}
-					/>
-				{/if}
+				<div class="border border-gray-50 dark:border-gray-850/30 rounded-2xl my-1.5 p-3 space-y-3">
+					<!-- Input -->
+					{#if args}
+						<div>
+							<div
+								class="text-[10px] uppercase tracking-wider font-semibold text-gray-400 dark:text-gray-500 mb-1.5 px-1"
+							>
+								{$i18n.t('Input')}
+							</div>
+							<div class="tool-call-body w-full max-w-none!">
+								<Markdown
+									id={`${componentId}-tool-call-args`}
+									content={`\`\`\`json\n${formatJSONString(args)}\n\`\`\``}
+								/>
+							</div>
+						</div>
+					{/if}
+
+					<!-- Output -->
+					{#if isDone && result}
+						<div>
+							<div
+								class="text-[10px] uppercase tracking-wider font-semibold text-gray-400 dark:text-gray-500 mb-1.5 px-1"
+							>
+								{$i18n.t('Output')}
+							</div>
+							<div class="w-full max-w-none!">
+								<Markdown
+									id={`${componentId}-tool-call-result`}
+									content={`\`\`\`json\n${formatJSONString(result)}\n\`\`\``}
+								/>
+							</div>
+						</div>
+					{/if}
+				</div>
 			</div>
 		{/if}
 	{/if}