From 1b39ff352a2fa3b57bd7815f44c50daf96937a14 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 14 Aug 2026 23:50:34 -0600
Subject: [PATCH] refac

---
 .../workspace/Models/BuiltinTools.svelte      | 32 +++++++++-----
 .../workspace/Models/Capabilities.svelte      | 27 +++++++++---
 .../workspace/Models/DefaultFeatures.svelte   | 42 +++++++++++++------
 3 files changed, 73 insertions(+), 28 deletions(-)

diff --git a/src/lib/components/workspace/Models/BuiltinTools.svelte b/src/lib/components/workspace/Models/BuiltinTools.svelte
index b91626aa94..01754c56b6 100644
--- a/src/lib/components/workspace/Models/BuiltinTools.svelte
+++ b/src/lib/components/workspace/Models/BuiltinTools.svelte
@@ -78,6 +78,15 @@
 	const allTools = Object.keys(toolLabels) as Array<keyof typeof toolLabels>;
 
 	export let builtinTools: Record<string, boolean> = {};
+
+	const setBuiltinTool = (tool: keyof typeof toolLabels, checked: boolean) => {
+		if (checked) {
+			delete builtinTools[tool];
+		} else {
+			builtinTools[tool] = false;
+		}
+		builtinTools = builtinTools;
+	};
 </script>
 
 <div>
@@ -89,19 +98,22 @@
 					ariaLabel={$i18n.t(toolLabels[tool].label)}
 					state={builtinTools[tool] !== false ? 'checked' : 'unchecked'}
 					on:change={(e) => {
-						if (e.detail === 'checked') {
-							delete builtinTools[tool];
-						} else {
-							builtinTools[tool] = false;
-						}
-						builtinTools = builtinTools;
+						setBuiltinTool(tool, e.detail === 'checked');
 					}}
 				/>
-				<div class="min-w-0 text-xs text-gray-600 dark:text-gray-400">
-					<Tooltip content={marked.parse(toolLabels[tool].description)}>
-						<span class="truncate">{$i18n.t(toolLabels[tool].label)}</span>
+				<button
+					type="button"
+					class="min-w-0 cursor-pointer text-left text-xs text-gray-600 dark:text-gray-400"
+					on:click={() => setBuiltinTool(tool, builtinTools[tool] === false)}
+				>
+					<Tooltip
+						as="span"
+						className="block min-w-0"
+						content={marked.parse(toolLabels[tool].description)}
+					>
+						<span class="block truncate">{$i18n.t(toolLabels[tool].label)}</span>
 					</Tooltip>
-				</div>
+				</button>
 			</div>
 		{/each}
 	</div>
diff --git a/src/lib/components/workspace/Models/Capabilities.svelte b/src/lib/components/workspace/Models/Capabilities.svelte
index c3db230010..04be7c3939 100644
--- a/src/lib/components/workspace/Models/Capabilities.svelte
+++ b/src/lib/components/workspace/Models/Capabilities.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	import type { i18n as i18nType } from 'i18next';
 	import Checkbox from '$lib/components/common/Checkbox.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import { marked } from 'marked';
 
-	const i18n = getContext('i18n');
+	const i18n: Writable<i18nType> = getContext('i18n');
 
 	const capabilityLabels = {
 		vision: {
@@ -67,6 +69,11 @@
 
 	export let capabilities: Partial<Record<Capability, boolean>> = {};
 
+	const setCapability = (capability: Capability, checked: boolean) => {
+		capabilities[capability] = checked;
+		capabilities = capabilities;
+	};
+
 	// Hide file_context when file_upload is disabled
 	$: visibleCapabilities = (Object.keys(capabilityLabels) as Capability[]).filter((cap) => {
 		if (cap === 'file_context' && !capabilities.file_upload) {
@@ -85,14 +92,22 @@
 					ariaLabel={$i18n.t(capabilityLabels[capability].label)}
 					state={capabilities[capability] ? 'checked' : 'unchecked'}
 					on:change={(e) => {
-						capabilities[capability] = e.detail === 'checked';
+						setCapability(capability, e.detail === 'checked');
 					}}
 				/>
-				<div class="min-w-0 text-xs text-gray-600 dark:text-gray-400">
-					<Tooltip content={marked.parse(capabilityLabels[capability].description)}>
-						<span class="truncate">{$i18n.t(capabilityLabels[capability].label)}</span>
+				<button
+					type="button"
+					class="min-w-0 cursor-pointer text-left text-xs text-gray-600 dark:text-gray-400"
+					on:click={() => setCapability(capability, !capabilities[capability])}
+				>
+					<Tooltip
+						as="span"
+						className="block min-w-0"
+						content={marked.parse(capabilityLabels[capability].description)}
+					>
+						<span class="block truncate">{$i18n.t(capabilityLabels[capability].label)}</span>
 					</Tooltip>
-				</div>
+				</button>
 			</div>
 		{/each}
 	</div>
diff --git a/src/lib/components/workspace/Models/DefaultFeatures.svelte b/src/lib/components/workspace/Models/DefaultFeatures.svelte
index eab401658e..bdbe5ae826 100644
--- a/src/lib/components/workspace/Models/DefaultFeatures.svelte
+++ b/src/lib/components/workspace/Models/DefaultFeatures.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	import type { i18n as i18nType } from 'i18next';
 	import Checkbox from '$lib/components/common/Checkbox.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import { marked } from 'marked';
 
-	const i18n = getContext('i18n');
+	const i18n: Writable<i18nType> = getContext('i18n');
 
 	const featureLabels = {
 		web_search: {
@@ -21,8 +23,20 @@
 		}
 	};
 
-	export let availableFeatures = ['web_search', 'image_generation', 'code_interpreter'];
-	export let featureIds = [];
+	type Feature = keyof typeof featureLabels;
+
+	export let availableFeatures: Feature[] = ['web_search', 'image_generation', 'code_interpreter'];
+	export let featureIds: Feature[] = [];
+
+	const setFeature = (feature: Feature, checked: boolean) => {
+		if (checked) {
+			if (!featureIds.includes(feature)) {
+				featureIds = [...featureIds, feature];
+			}
+		} else {
+			featureIds = featureIds.filter((id) => id !== feature);
+		}
+	};
 </script>
 
 <div>
@@ -34,18 +48,22 @@
 					ariaLabel={$i18n.t(featureLabels[feature].label)}
 					state={featureIds.includes(feature) ? 'checked' : 'unchecked'}
 					on:change={(e) => {
-						if (e.detail === 'checked') {
-							featureIds = [...featureIds, feature];
-						} else {
-							featureIds = featureIds.filter((id) => id !== feature);
-						}
+						setFeature(feature, e.detail === 'checked');
 					}}
 				/>
-				<div class="min-w-0 text-xs text-gray-600 dark:text-gray-400">
-					<Tooltip content={marked.parse(featureLabels[feature].description)}>
-						<span class="truncate">{$i18n.t(featureLabels[feature].label)}</span>
+				<button
+					type="button"
+					class="min-w-0 cursor-pointer text-left text-xs text-gray-600 dark:text-gray-400"
+					on:click={() => setFeature(feature, !featureIds.includes(feature))}
+				>
+					<Tooltip
+						as="span"
+						className="block min-w-0"
+						content={marked.parse(featureLabels[feature].description)}
+					>
+						<span class="block truncate">{$i18n.t(featureLabels[feature].label)}</span>
 					</Tooltip>
-				</div>
+				</button>
 			</div>
 		{/each}
 	</div>