From 76ad6f97c52db1e3b02926132fd6ea9c1176f40a Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 10 Oct 2026 14:46:56 +0400
Subject: [PATCH] refac

---
 .../Settings/Models/ModelDefaultsPanel.svelte | 95 +++++++++++--------
 src/lib/i18n/locales/en-US/translation.json   |  4 +
 2 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/src/lib/components/admin/Settings/Models/ModelDefaultsPanel.svelte b/src/lib/components/admin/Settings/Models/ModelDefaultsPanel.svelte
index f0718c0347..d1d134177a 100644
--- a/src/lib/components/admin/Settings/Models/ModelDefaultsPanel.svelte
+++ b/src/lib/components/admin/Settings/Models/ModelDefaultsPanel.svelte
@@ -1,5 +1,7 @@
 <script>
 	import { getContext, onMount, tick } from 'svelte';
+	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
+	import ModelSettingsLabel from '$lib/components/workspace/Models/ModelSettingsLabel.svelte';
 	import { toast } from 'svelte-sonner';
 
 	const i18n = getContext('i18n');
@@ -150,52 +152,53 @@
 </script>
 
 <div class="shrink-0">
-	<div class="flex items-center justify-between gap-4 py-0.5">
-		<button
-			class="min-w-0 flex-1 text-left text-xs text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
-			type="button"
-			on:click={() => {
-				expanded = !expanded;
-			}}
-		>
-			{$i18n.t('settings.admin.models.defaults.modelDefaults.label')}
-		</button>
-
-		<button
-			class="shrink-0 text-[0.6875rem] text-gray-400 transition hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-300"
-			type="button"
-			on:click={() => {
-				expanded = !expanded;
-			}}
-		>
-			{expanded ? $i18n.t('Close') : $i18n.t('Configure')}
-		</button>
-	</div>
+	<button
+		class="flex w-full items-center justify-between gap-2 rounded-md px-1 py-1.5 text-left text-xs font-normal text-gray-600 focus-visible:outline focus-visible:outline-2 dark:text-gray-400"
+		type="button"
+		aria-expanded={expanded}
+		on:click={() => (expanded = !expanded)}
+	>
+		<ModelSettingsLabel
+			label={$i18n.t('settings.admin.models.defaults.modelDefaults.label')}
+			description={$i18n.t(
+				'Set default capabilities, parameters, and prompt suggestions for models. Individual model settings can override these defaults.'
+			)}
+		/>
+		<ChevronRight
+			className={`size-3 text-gray-400 transition-transform ${expanded ? 'rotate-90' : ''}`}
+		/>
+	</button>
 
 	{#if expanded}
 		{#if loading}
 			<div class="py-1 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Loading...')}</div>
 		{:else}
-			<div class="space-y-1 mt-0.5">
+			<div class="space-y-0 pl-3">
 				<div>
 					<button
-						class="flex w-full items-center justify-between gap-4 py-0.5 text-left"
+						class="flex w-full items-center justify-between gap-2 rounded-md px-1 py-1.5 text-left font-normal focus-visible:outline focus-visible:outline-2"
 						type="button"
+						aria-expanded={showCapabilities}
 						on:click={() => {
 							showCapabilities = !showCapabilities;
 						}}
 					>
 						<span class="text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('settings.admin.models.defaults.modelCapabilities.label')}
-						</span>
-						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
-							{showCapabilities ? $i18n.t('Close') : $i18n.t('Configure')}
+							<ModelSettingsLabel
+								label={$i18n.t('settings.admin.models.defaults.modelCapabilities.label')}
+								description={$i18n.t(
+									'Set default capabilities, enabled features, and built-in tools for models. Individual models can override these settings.'
+								)}
+							/>
 						</span>
+						<ChevronRight
+							className={`size-3 text-gray-400 transition-transform ${showCapabilities ? 'rotate-90' : ''}`}
+						/>
 					</button>
 
 					{#if showCapabilities}
 						<div
-							class="max-h-[24rem] overflow-y-auto pb-2 pr-1 scrollbar-hover"
+							class="max-h-[24rem] overflow-y-auto pb-2 pl-3 pr-1 scrollbar-hover"
 							on:click={updateDirty}
 							on:change={updateDirty}
 						>
@@ -210,23 +213,29 @@
 
 				<div>
 					<button
-						class="flex w-full items-center justify-between gap-4 py-0.5 text-left"
+						class="flex w-full items-center justify-between gap-2 rounded-md px-1 py-1.5 text-left font-normal focus-visible:outline focus-visible:outline-2"
 						type="button"
+						aria-expanded={showParameters}
 						on:click={() => {
 							showParameters = !showParameters;
 						}}
 					>
 						<span class="text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('settings.admin.models.defaults.modelParameters.label')}
-						</span>
-						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
-							{showParameters ? $i18n.t('Close') : $i18n.t('Configure')}
+							<ModelSettingsLabel
+								label={$i18n.t('settings.admin.models.defaults.modelParameters.label')}
+								description={$i18n.t(
+									'Set default generation parameters for models, such as temperature and token limits. Individual models can override these settings.'
+								)}
+							/>
 						</span>
+						<ChevronRight
+							className={`size-3 text-gray-400 transition-transform ${showParameters ? 'rotate-90' : ''}`}
+						/>
 					</button>
 
 					{#if showParameters}
 						<div
-							class="max-h-[24rem] overflow-y-auto pb-2 pr-1 scrollbar-hover"
+							class="max-h-[24rem] overflow-y-auto pb-2 pl-3 pr-1 scrollbar-hover"
 							on:click={updateDirty}
 							on:change={updateDirty}
 							on:input={updateDirty}
@@ -238,23 +247,29 @@
 
 				<div>
 					<button
-						class="flex w-full items-center justify-between gap-4 py-0.5 text-left"
+						class="flex w-full items-center justify-between gap-2 rounded-md px-1 py-1.5 text-left font-normal focus-visible:outline focus-visible:outline-2"
 						type="button"
+						aria-expanded={showPromptSuggestions}
 						on:click={() => {
 							showPromptSuggestions = !showPromptSuggestions;
 						}}
 					>
 						<span class="text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('settings.admin.models.defaults.promptSuggestions.label')}
-						</span>
-						<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
-							{showPromptSuggestions ? $i18n.t('Close') : $i18n.t('Configure')}
+							<ModelSettingsLabel
+								label={$i18n.t('settings.admin.models.defaults.promptSuggestions.label')}
+								description={$i18n.t(
+									'Set the starter prompts shown in new chats when a model uses default prompt suggestions.'
+								)}
+							/>
 						</span>
+						<ChevronRight
+							className={`size-3 text-gray-400 transition-transform ${showPromptSuggestions ? 'rotate-90' : ''}`}
+						/>
 					</button>
 
 					{#if showPromptSuggestions}
 						<div
-							class="max-h-[24rem] space-y-2 overflow-y-auto pb-2 pr-1 scrollbar-hover"
+							class="max-h-[24rem] space-y-2 overflow-y-auto pb-2 pl-3 pr-1 scrollbar-hover"
 							on:click={updateDirty}
 							on:change={updateDirty}
 							on:input={updateDirty}
diff --git a/src/lib/i18n/locales/en-US/translation.json b/src/lib/i18n/locales/en-US/translation.json
index b31285b016..5041fc5a7f 100644
--- a/src/lib/i18n/locales/en-US/translation.json
+++ b/src/lib/i18n/locales/en-US/translation.json
@@ -1,4 +1,8 @@
 {
+	"Set default capabilities, enabled features, and built-in tools for models. Individual models can override these settings.": "",
+	"Set default generation parameters for models, such as temperature and token limits. Individual models can override these settings.": "",
+	"Set the starter prompts shown in new chats when a model uses default prompt suggestions.": "",
+	"Set default capabilities, parameters, and prompt suggestions for models. Individual model settings can override these defaults.": "",
 	"Choose the terminal server selected by default for chats with this model.": "",
 	"Add tags to organize models and make them easier to find.": "",
 	"Connect tools this model can call to retrieve information or perform actions.": "",