From 1045d74c757bdd08151e2c18e0d44155a590495f Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 14 Oct 2026 15:20:25 +0400
Subject: [PATCH] refac

---
 src/lib/components/AutomationModal.svelte     |  2 +-
 .../admin/Evaluations/Feedbacks.svelte        |  2 +-
 .../calendar/CalendarEventModal.svelte        |  4 +-
 .../calendar/CreateCalendarModal.svelte       |  2 +-
 .../channel/ChannelInfoModal/UserList.svelte  |  2 +-
 .../components/channel/WebhooksModal.svelte   |  2 +-
 src/lib/components/chat/MessageInput.svelte   | 65 ++++++++++++++++++-
 .../chat/MessageInput/InputMenu.svelte        | 26 ++++++++
 .../components/chat/Messages/CodeBlock.svelte | 16 ++---
 .../components/common/DiffEditorModal.svelte  | 50 +++++++++++---
 .../components/common/Tags/TagInput.svelte    |  2 +-
 .../components/layout/SharedChatsModal.svelte |  2 +-
 src/lib/components/playground/Chat.svelte     |  8 +--
 .../components/playground/Completions.svelte  |  4 +-
 src/lib/components/playground/Images.svelte   |  6 +-
 .../Knowledge/CreateKnowledgeBase.svelte      |  2 +-
 .../workspace/Knowledge/KnowledgeBase.svelte  |  2 +-
 .../Knowledge/KnowledgeBase/FileViewer.svelte |  6 +-
 .../KnowledgeBase/NewDirectoryModal.svelte    |  2 +-
 .../workspace/Models/VoiceAvatarEditor.svelte |  2 +-
 20 files changed, 162 insertions(+), 45 deletions(-)

diff --git a/src/lib/components/AutomationModal.svelte b/src/lib/components/AutomationModal.svelte
index 8d440c793f..bb15a58eb9 100644
--- a/src/lib/components/AutomationModal.svelte
+++ b/src/lib/components/AutomationModal.svelte
@@ -199,7 +199,7 @@
 
 			<div class="flex items-center justify-end gap-2 shrink-0">
 				<button
-					class="px-3 py-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 transition"
+					class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 					type="button"
 					on:click={() => (show = false)}
 				>
diff --git a/src/lib/components/admin/Evaluations/Feedbacks.svelte b/src/lib/components/admin/Evaluations/Feedbacks.svelte
index 716902cc4a..b63a655499 100644
--- a/src/lib/components/admin/Evaluations/Feedbacks.svelte
+++ b/src/lib/components/admin/Evaluations/Feedbacks.svelte
@@ -272,7 +272,7 @@
 				{#if total > 0}
 					<Dropdown align="end">
 						<button
-							class="flex h-8 shrink-0 items-center gap-1 px-2 py-1.5 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 dark:text-gray-200 transition text-xs"
+							class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-100 px-2.5 text-xs font-normal text-gray-800 transition hover:bg-gray-100/70 disabled:opacity-60 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-850/60"
 						>
 							{$i18n.t('Export')}
 							<ChevronDown className="size-3" strokeWidth="2.5" />
diff --git a/src/lib/components/calendar/CalendarEventModal.svelte b/src/lib/components/calendar/CalendarEventModal.svelte
index ca05c8884e..b1cea0b331 100644
--- a/src/lib/components/calendar/CalendarEventModal.svelte
+++ b/src/lib/components/calendar/CalendarEventModal.svelte
@@ -327,7 +327,7 @@
 			<div class="flex items-center gap-0.5 flex-1 min-w-0">
 				{#if event && !event.meta?.automation_id}
 					<button
-						class="px-3 py-1 text-xs text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition"
+						class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 						type="button"
 						on:click={() => (showDeleteConfirmDialog = true)}
 						disabled={loading}
@@ -339,7 +339,7 @@
 
 			<div class="flex items-center gap-2 shrink-0">
 				<button
-					class="px-3 py-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 transition"
+					class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 					type="button"
 					on:click={() => (show = false)}
 				>
diff --git a/src/lib/components/calendar/CreateCalendarModal.svelte b/src/lib/components/calendar/CreateCalendarModal.svelte
index c493978897..a8dbfcdbcb 100644
--- a/src/lib/components/calendar/CreateCalendarModal.svelte
+++ b/src/lib/components/calendar/CreateCalendarModal.svelte
@@ -124,7 +124,7 @@
 		<!-- Bottom toolbar -->
 		<div class="flex items-center justify-end px-4 pb-3.5 pt-2 gap-2">
 			<button
-				class="px-3 py-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 transition"
+				class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 				type="button"
 				on:click={() => (show = false)}
 			>
diff --git a/src/lib/components/channel/ChannelInfoModal/UserList.svelte b/src/lib/components/channel/ChannelInfoModal/UserList.svelte
index 71ac441a77..7919bd9a5d 100644
--- a/src/lib/components/channel/ChannelInfoModal/UserList.svelte
+++ b/src/lib/components/channel/ChannelInfoModal/UserList.svelte
@@ -124,7 +124,7 @@
 				<div class="">
 					<button
 						type="button"
-						class=" px-3 py-1.5 gap-1 rounded-xl bg-gray-100/50 dark:text-white dark:bg-gray-850/50 text-black transition font-normal text-xs flex items-center justify-center"
+						class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-100 px-2.5 text-xs font-normal text-gray-800 transition hover:bg-gray-100/70 disabled:opacity-60 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-850/60"
 						on:click={onAdd}
 					>
 						<Plus className="size-3.5 " />
diff --git a/src/lib/components/channel/WebhooksModal.svelte b/src/lib/components/channel/WebhooksModal.svelte
index 441c441a07..9d8203542c 100644
--- a/src/lib/components/channel/WebhooksModal.svelte
+++ b/src/lib/components/channel/WebhooksModal.svelte
@@ -108,7 +108,7 @@
 
 					<button
 						type="button"
-						class="px-3 py-1.5 gap-1 rounded-xl bg-gray-100/50 dark:bg-gray-850/50 text-black dark:text-white transition font-normal text-xs flex items-center justify-center"
+						class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-100 px-2.5 text-xs font-normal text-gray-800 transition hover:bg-gray-100/70 disabled:opacity-60 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-850/60"
 						on:click={createHandler}
 						disabled={isSaving}
 					>
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 217c4593ac..7ece579f70 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -743,7 +743,7 @@
 	}
 
 	let chatInputContainerElement;
-	let chatInputElement;
+	let chatInputElement: RichTextInput;
 	let modelSelector;
 
 	let filesInputElement;
@@ -752,6 +752,49 @@
 	let inputFiles;
 
 	let showInputModal = false;
+	let showComparison = false;
+	let comparisonLoading = false;
+	let ComparisonModal: typeof import('../common/DiffEditorModal.svelte').default | null = null;
+	let comparisonTarget: {
+		chatId: string;
+		input: RichTextInput;
+		content: string;
+	} | null = null;
+
+	const openComparison = async () => {
+		if (comparisonLoading) return;
+		comparisonLoading = true;
+		const target = { chatId, input: chatInputElement };
+		try {
+			ComparisonModal = (await import('../common/DiffEditorModal.svelte')).default;
+			if (
+				!target.input ||
+				target.chatId !== chatId ||
+				target.input !== chatInputElement
+			)
+				return;
+			comparisonTarget = { chatId, input: target.input, content: prompt };
+			showComparison = true;
+		} catch {
+			toast.error($i18n.t('Could not open comparison. Please try again.'));
+		} finally {
+			comparisonLoading = false;
+		}
+	};
+
+	const applyComparisonToPrompt = (text: string) => {
+
+		if (
+			!chatInputElement ||
+			comparisonTarget?.chatId !== chatId ||
+			comparisonTarget?.input !== chatInputElement ||
+			comparisonTarget?.content !== prompt
+		)
+			throw new Error($i18n.t('The prompt has changed. Reopen the comparison before applying.'));
+		// The editor's literal setter preserves mentions without expanding prompt variables.
+		if (text !== comparisonTarget.content) chatInputElement.setText(text);
+		void tick().then(() => focus());
+	};
 
 	export let dragged = false;
 	export let dropzoneId = 'chat-pane';
@@ -1653,6 +1696,21 @@
 	});
 </script>
 
+{#if showComparison && ComparisonModal}
+	<svelte:component
+		this={ComparisonModal}
+		bind:show={showComparison}
+		title={$i18n.t('Compare text')}
+		initialContent={comparisonTarget?.content ?? ''}
+		applyLabel={$i18n.t('Use in prompt')}
+		applyDescription={$i18n.t('Uses the left working copy as your prompt.')}
+		discardMessage={$i18n.t(
+			'Your comparison changes will be discarded. Your prompt will stay unchanged.'
+		)}
+		onApply={applyComparisonToPrompt}
+	/>
+{/if}
+
 <ToolServersModal
 	bind:show={showTools}
 	{selectedToolIds}
@@ -2138,8 +2196,8 @@
 															text,
 															history?.currentId
 																? createMessagesList(history, history.currentId)
-																	: null,
-																'general'
+																: null,
+															'general'
 														).catch((error) => {
 															console.log(error);
 
@@ -2273,6 +2331,7 @@
 							<div class=" flex justify-between mt-0.5 mb-2 mx-0.5 max-w-full" dir="ltr">
 								<div class="ml-1 self-end flex items-center">
 									<InputMenu
+										onCompare={openComparison}
 										bind:files
 										selectedModels={selectedModelIds}
 										fileUploadCapableModels={getFilesystemUploadTerminal(
diff --git a/src/lib/components/chat/MessageInput/InputMenu.svelte b/src/lib/components/chat/MessageInput/InputMenu.svelte
index 4a51de46b7..a0649f4f1e 100644
--- a/src/lib/components/chat/MessageInput/InputMenu.svelte
+++ b/src/lib/components/chat/MessageInput/InputMenu.svelte
@@ -44,6 +44,7 @@
 
 	export let onUpload: Function;
 	export let onClose: Function;
+	export let onCompare: () => void = () => {};
 	export let toolApprovalMode = 'full';
 	export let onToolApprovalModeChange: Function = () => {};
 
@@ -243,6 +244,31 @@
 						</button>
 					</Tooltip>
 
+					<button
+						type="button"
+						class="flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl text-left"
+						on:click={async () => {
+							show = false;
+							await tick();
+							onCompare();
+						}}
+					>
+						<svg
+							class="size-3.5 shrink-0"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							aria-hidden="true"
+						>
+							<rect x="3" y="4" width="18" height="16" rx="2" />
+							<path d="M12 4v16M5.5 12h4M14.5 12h4M16.5 10v4" />
+						</svg>
+						<span>{$i18n.t('Compare text')}</span>
+					</button>
+
 					<Tooltip
 						content={!webUploadEnabled
 							? $i18n.t('You do not have permission to upload web content.')
diff --git a/src/lib/components/chat/Messages/CodeBlock.svelte b/src/lib/components/chat/Messages/CodeBlock.svelte
index 1c61eeb3cc..53d35c9323 100644
--- a/src/lib/components/chat/Messages/CodeBlock.svelte
+++ b/src/lib/components/chat/Messages/CodeBlock.svelte
@@ -473,10 +473,10 @@
 					</Tooltip>
 				</div>
 
-				<div class="flex items-center gap-0.5 shrink-0">
+				<div class="flex max-w-full items-center gap-0.5 shrink-0 overflow-x-auto">
 					{#if isDiff && edit}
 						<button
-							class="bg-none border-none transition rounded-md px-1.5 py-0.5 bg-white dark:bg-black"
+							class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 							aria-pressed={editingDiff}
 							on:click={() => {
 								editingDiff = !editingDiff;
@@ -487,7 +487,7 @@
 						</button>
 					{/if}
 					<button
-						class="flex gap-1 items-center bg-none border-none transition rounded-md px-1.5 py-0.5 bg-white dark:bg-black"
+						class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 						on:click={collapseCodeBlock}
 					>
 						<div class=" -translate-y-[0.5px]">
@@ -502,13 +502,13 @@
 					{#if ($config?.features?.enable_code_execution ?? true) && (lang.toLowerCase() === 'python' || lang.toLowerCase() === 'py' || (lang === '' && checkPythonCode(code)))}
 						{#if executing}
 							<div
-								class="run-code-button bg-none border-none p-0.5 cursor-not-allowed bg-white dark:bg-black"
+								class="run-code-button flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white cursor-not-allowed opacity-60"
 							>
 								{$i18n.t('Running')}
 							</div>
 						{:else if run}
 							<button
-								class="flex gap-1 items-center run-code-button bg-none border-none transition rounded-md px-1.5 py-0.5 bg-white dark:bg-black"
+								class="run-code-button flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 								on:click={async () => {
 									code = _code;
 									await tick();
@@ -524,7 +524,7 @@
 
 					{#if save}
 						<button
-							class="save-code-button bg-none border-none transition rounded-md px-1.5 py-0.5 bg-white dark:bg-black"
+							class="save-code-button flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-900 px-2.5 text-xs font-normal text-white transition hover:bg-black disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
 							on:click={saveCode}
 						>
 							{saved ? $i18n.t('Saved') : $i18n.t('Save')}
@@ -532,13 +532,13 @@
 					{/if}
 
 					<button
-						class="copy-code-button bg-none border-none transition rounded-md px-1.5 py-0.5 bg-white dark:bg-black"
+						class="copy-code-button flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 						on:click={copyCode}>{copied ? $i18n.t('Copied') : $i18n.t('Copy')}</button
 					>
 
 					{#if preview && ['html', 'svg'].includes(lang)}
 						<button
-							class="flex gap-1 items-center run-code-button bg-none border-none transition rounded-md px-1.5 py-0.5 bg-white dark:bg-black"
+							class="run-code-button flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 							on:click={previewCode}
 						>
 							<div>
diff --git a/src/lib/components/common/DiffEditorModal.svelte b/src/lib/components/common/DiffEditorModal.svelte
index c19a2f03b1..0ff40c903d 100644
--- a/src/lib/components/common/DiffEditorModal.svelte
+++ b/src/lib/components/common/DiffEditorModal.svelte
@@ -35,6 +35,9 @@
 	export let proposedContent: string | undefined = undefined;
 	export let filePath: string | null = null;
 	export let title = '';
+	export let applyLabel: string | null = null;
+	export let applyDescription: string | null = null;
+	export let discardMessage: string | null = null;
 	export let onApply: (content: string) => void = () => {};
 	export let onClose: () => void = () => {};
 
@@ -523,11 +526,12 @@
 			</div>
 			<footer class="flex shrink-0 flex-wrap items-center gap-2 px-5 py-3">
 				<p class="mr-auto text-gray-500">
-					{$i18n.t('Apply uses the left working copy. Save your draft afterward.')}
+					{applyDescription ??
+						$i18n.t('Apply uses the left working copy. Save your draft afterward.')}
 				</p>
 				<button type="button" class="secondary" on:click={requestClose}>{$i18n.t('Cancel')}</button>
 				<button type="button" class="primary" disabled={loading} on:click={apply}
-					>{$i18n.t('Apply to draft')}</button
+					>{applyLabel ?? $i18n.t('Apply to draft')}</button
 				>
 			</footer>
 		</div>
@@ -535,9 +539,10 @@
 	<ConfirmDialog
 		bind:show={confirmDiscard}
 		title={$i18n.t('Discard comparison changes?')}
-		message={$i18n.t(
-			'Your changes in this comparison will be discarded. The original draft will stay unchanged.'
-		)}
+		message={discardMessage ??
+			$i18n.t(
+				'Your changes in this comparison will be discarded. The original draft will stay unchanged.'
+			)}
 		confirmLabel={$i18n.t('Discard')}
 		onConfirm={close}
 	/>
@@ -589,32 +594,59 @@
 
 	.secondary,
 	.primary {
+		display: inline-flex;
+		height: 1.75rem;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		gap: 0.375rem;
 		border-radius: 0.5rem;
-		padding: 0.375rem 0.625rem;
+		padding: 0 0.625rem;
+		font-size: 0.75rem;
+		font-weight: 400;
+		transition:
+			background-color 150ms,
+			color 150ms;
 	}
 	.secondary {
 		background: var(--color-gray-100);
-		color: var(--color-gray-700);
+		color: var(--color-gray-800);
+	}
+	.secondary:hover {
+		background: color-mix(in oklab, var(--color-gray-100) 70%, transparent);
 	}
 	.primary {
 		background: var(--color-gray-900);
 		color: white;
 	}
+	.primary:hover {
+		background: black;
+	}
 	button:disabled {
 		opacity: 0.4;
 	}
+	.secondary:disabled,
+	.primary:disabled {
+		opacity: 0.6;
+	}
 	button:focus-visible {
 		outline: 2px solid var(--color-gray-500);
 		outline-offset: 2px;
 	}
 	:global(.dark) .secondary {
-		background: var(--color-gray-800);
-		color: var(--color-gray-200);
+		background: var(--color-gray-850);
+		color: white;
+	}
+	:global(.dark) .secondary:hover {
+		background: color-mix(in oklab, var(--color-gray-850) 60%, transparent);
 	}
 	:global(.dark) .primary {
 		background: var(--color-gray-100);
 		color: var(--color-gray-900);
 	}
+	:global(.dark) .primary:hover {
+		background: white;
+	}
 	.merge-container :global(.cm-mergeView) {
 		height: 100%;
 		overflow: auto;
diff --git a/src/lib/components/common/Tags/TagInput.svelte b/src/lib/components/common/Tags/TagInput.svelte
index 1a26703338..9cade34dfc 100644
--- a/src/lib/components/common/Tags/TagInput.svelte
+++ b/src/lib/components/common/Tags/TagInput.svelte
@@ -58,7 +58,7 @@
 {:else}
 	<button
 		type="button"
-		class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-gray-200/80 dark:bg-gray-700 text-gray-500 dark:text-blue-400 text-sm font-normal hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+		class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-100 px-2.5 text-xs font-normal text-gray-800 transition hover:bg-gray-100/70 disabled:opacity-60 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-850/60"
 		on:click={openInput}
 	>
 		<span>+</span>
diff --git a/src/lib/components/layout/SharedChatsModal.svelte b/src/lib/components/layout/SharedChatsModal.svelte
index 65e79a5db7..9fbdeb17a8 100644
--- a/src/lib/components/layout/SharedChatsModal.svelte
+++ b/src/lib/components/layout/SharedChatsModal.svelte
@@ -157,7 +157,7 @@
 	<div slot="footer">
 		<div class="flex flex-wrap text-sm font-normal gap-1.5 mt-2 m-1 justify-end w-full">
 			<button
-				class=" px-3.5 py-1.5 font-normal hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-100 dark:outline-gray-800 rounded-3xl"
+				class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-100 px-2.5 text-xs font-normal text-gray-800 transition hover:bg-gray-100/70 disabled:opacity-60 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-850/60"
 				disabled={loading}
 				on:click={() => {
 					showUnshareAllConfirmDialog = true;
diff --git a/src/lib/components/playground/Chat.svelte b/src/lib/components/playground/Chat.svelte
index 44d7211386..0f82f5942f 100644
--- a/src/lib/components/playground/Chat.svelte
+++ b/src/lib/components/playground/Chat.svelte
@@ -470,7 +470,7 @@
 						<div class="shrink-0">
 							<button
 								type="button"
-								class="px-3.5 py-1.5 text-sm font-normal bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg shrink-0 {($settings?.highContrastMode ??
+								class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-100 px-2.5 text-xs font-normal text-gray-800 transition hover:bg-gray-100/70 disabled:opacity-60 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-850/60 {($settings?.highContrastMode ??
 								false)
 									? ''
 									: 'outline-hidden'}"
@@ -521,7 +521,7 @@
 								{#if !loading}
 									<button
 										disabled={message === ''}
-										class="px-3.5 py-1.5 text-sm font-normal disabled:bg-gray-50 dark:disabled:hover:bg-gray-850 disabled:cursor-not-allowed bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg"
+										class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-100 px-2.5 text-xs font-normal text-gray-800 transition hover:bg-gray-100/70 disabled:opacity-60 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-850/60 disabled:cursor-not-allowed"
 										on:click={() => {
 											addHandler();
 											role = role === 'user' ? 'assistant' : 'user';
@@ -531,7 +531,7 @@
 									</button>
 
 									<button
-										class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-lg"
+										class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-900 px-2.5 text-xs font-normal text-white transition hover:bg-black disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
 										on:click={() => {
 											submitHandler();
 										}}
@@ -540,7 +540,7 @@
 									</button>
 								{:else}
 									<button
-										class="px-3 py-1.5 text-sm font-normal bg-gray-300 text-black transition rounded-lg"
+										class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 										on:click={() => {
 											stopResponse();
 										}}
diff --git a/src/lib/components/playground/Completions.svelte b/src/lib/components/playground/Completions.svelte
index 90c785f6f0..4aa991c6f1 100644
--- a/src/lib/components/playground/Completions.svelte
+++ b/src/lib/components/playground/Completions.svelte
@@ -150,7 +150,7 @@
 				<div class="flex gap-2 shrink-0 ml-2">
 					{#if !loading}
 						<button
-							class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-lg"
+							class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-900 px-2.5 text-xs font-normal text-white transition hover:bg-black disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
 							on:click={() => {
 								submitHandler();
 							}}
@@ -159,7 +159,7 @@
 						</button>
 					{:else}
 						<button
-							class="px-3.5 py-1.5 text-sm font-normal bg-gray-300 text-black transition rounded-lg flex items-center gap-2"
+							class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 							on:click={() => {
 								stopResponse();
 							}}
diff --git a/src/lib/components/playground/Images.svelte b/src/lib/components/playground/Images.svelte
index d8906babe9..5e7060104c 100644
--- a/src/lib/components/playground/Images.svelte
+++ b/src/lib/components/playground/Images.svelte
@@ -245,7 +245,7 @@
 							/>
 							<button
 								type="button"
-								class="px-3.5 py-1.5 text-sm font-normal bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg"
+								class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-100 px-2.5 text-xs font-normal text-gray-800 transition hover:bg-gray-100/70 disabled:opacity-60 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-850/60"
 								on:click={() => fileInputElement?.click()}
 								on:dragover|preventDefault
 								on:drop={handleDrop}
@@ -258,14 +258,14 @@
 							{#if !loading}
 								<button
 									disabled={prompt.trim() === ''}
-									class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
+									class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-900 px-2.5 text-xs font-normal text-white transition hover:bg-black disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white disabled:cursor-not-allowed"
 									on:click={submitHandler}
 								>
 									{$i18n.t('Run')}
 								</button>
 							{:else}
 								<button
-									class="px-3.5 py-1.5 text-sm font-normal bg-gray-300 text-black transition rounded-lg flex items-center gap-2"
+									class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 									disabled
 								>
 									<Spinner className="size-4" />
diff --git a/src/lib/components/workspace/Knowledge/CreateKnowledgeBase.svelte b/src/lib/components/workspace/Knowledge/CreateKnowledgeBase.svelte
index d8a0796f84..3a3190f4f2 100644
--- a/src/lib/components/workspace/Knowledge/CreateKnowledgeBase.svelte
+++ b/src/lib/components/workspace/Knowledge/CreateKnowledgeBase.svelte
@@ -159,7 +159,7 @@
 		<div class="flex justify-end {modal ? 'pt-3 gap-2' : 'mt-2'}">
 			{#if modal}
 				<button
-					class="px-3 py-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 transition"
+					class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 					type="button"
 					on:click={() => {
 						onBack();
diff --git a/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte b/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
index 55749bb91d..210511e68e 100644
--- a/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
+++ b/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
@@ -962,7 +962,7 @@
 									placeholder={$i18n.t('Ask this knowledge source a test question')}
 								/>
 								<button
-									class="px-3 py-2 rounded-xl bg-black text-white dark:bg-white dark:text-black text-xs"
+									class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-900 px-2.5 text-xs font-normal text-white transition hover:bg-black disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
 									on:click={externalTestHandler}
 								>
 									{$i18n.t('Test')}
diff --git a/src/lib/components/workspace/Knowledge/KnowledgeBase/FileViewer.svelte b/src/lib/components/workspace/Knowledge/KnowledgeBase/FileViewer.svelte
index bc34007ddc..a89876df20 100644
--- a/src/lib/components/workspace/Knowledge/KnowledgeBase/FileViewer.svelte
+++ b/src/lib/components/workspace/Knowledge/KnowledgeBase/FileViewer.svelte
@@ -244,14 +244,14 @@
 			{#if state.editing}
 				<button
 					type="button"
-					class="shrink-0 px-1 py-0.5 text-gray-500"
+					class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 					disabled={saving}
 					on:click={() => (state = { ...state, draft: state.indexed ?? '', editing: false })}
 					>{$i18n.t('Cancel')}</button
 				>
 				<button
 					type="button"
-					class="flex shrink-0 items-center gap-1 px-1 py-0.5"
+					class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-900 px-2.5 text-xs font-normal text-white transition hover:bg-black disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
 					disabled={saving || state.indexed === null}
 					on:click={save}
 				>
@@ -260,7 +260,7 @@
 			{:else}
 				<button
 					type="button"
-					class="shrink-0 px-1 py-0.5 text-gray-500"
+					class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 					on:click={() => {
 						state = { ...state, mode: 'indexed', editing: true, draft: state.indexed ?? '' };
 					}}>{$i18n.t('Edit')}</button
diff --git a/src/lib/components/workspace/Knowledge/KnowledgeBase/NewDirectoryModal.svelte b/src/lib/components/workspace/Knowledge/KnowledgeBase/NewDirectoryModal.svelte
index 65c3a857f3..2c31994a44 100644
--- a/src/lib/components/workspace/Knowledge/KnowledgeBase/NewDirectoryModal.svelte
+++ b/src/lib/components/workspace/Knowledge/KnowledgeBase/NewDirectoryModal.svelte
@@ -61,7 +61,7 @@
 		<!-- Bottom toolbar -->
 		<div class="flex items-center justify-end px-4 pb-3.5 pt-2 gap-2">
 			<button
-				class="px-3 py-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 transition"
+				class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
 				type="button"
 				on:click={() => (show = false)}
 			>
diff --git a/src/lib/components/workspace/Models/VoiceAvatarEditor.svelte b/src/lib/components/workspace/Models/VoiceAvatarEditor.svelte
index b5ab8bdf69..a5d63c78eb 100644
--- a/src/lib/components/workspace/Models/VoiceAvatarEditor.svelte
+++ b/src/lib/components/workspace/Models/VoiceAvatarEditor.svelte
@@ -362,7 +362,7 @@
 	<div class="flex gap-3 items-center mt-3 text-xs">
 		<button
 			type="button"
-			class="px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-850"
+			class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-100 px-2.5 text-xs font-normal text-gray-800 transition hover:bg-gray-100/70 disabled:opacity-60 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-850/60"
 			on:click={() => input.click()}
 			>{value ? $i18n.t('Replace avatar') : $i18n.t('Upload VRM')}</button
 		>