enh: bool, literal valves

src/lib/components/chat/Settings/Valves.svelte

@@ -18,6 +18,7 @@
 	import ManageModal from './Personalization/ManageModal.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Switch from '$lib/components/common/Switch.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -185,7 +186,10 @@
 										class="p-1 px-3 text-xs flex rounded transition"
 										type="button"
 										on:click={() => {
-											valves[property] = (valves[property] ?? null) === null ? '' : null;
+											valves[property] =
+												(valves[property] ?? null) === null
+													? valvesSpec.properties[property]?.default ?? ''
+													: null;
 										}}
 									>
 										{#if (valves[property] ?? null) === null}
@@ -203,16 +207,40 @@
 								</div>
 
 								{#if (valves[property] ?? null) !== null}
+									<!-- {valves[property]} -->
 									<div class="flex mt-0.5 mb-1.5 space-x-2">
 										<div class=" flex-1">
-											<input
-												class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-												type="text"
-												placeholder={valvesSpec.properties[property].title}
-												bind:value={valves[property]}
-												autocomplete="off"
-												required
-											/>
+											{#if valvesSpec.properties[property]?.enum ?? null}
+												<select
+													class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+													bind:value={valves[property]}
+												>
+													{#each valvesSpec.properties[property].enum as option}
+														<option value={option} selected={option === valves[property]}>
+															{option}
+														</option>
+													{/each}
+												</select>
+											{:else if (valvesSpec.properties[property]?.type ?? null) === 'boolean'}
+												<div class="flex justify-between items-center">
+													<div class="text-xs text-gray-500">
+														{valves[property] ? 'Enabled' : 'Disabled'}
+													</div>
+
+													<div class=" pr-2">
+														<Switch bind:state={valves[property]} />
+													</div>
+												</div>
+											{:else}
+												<input
+													class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+													type="text"
+													placeholder={valvesSpec.properties[property].title}
+													bind:value={valves[property]}
+													autocomplete="off"
+													required
+												/>
+											{/if}
 										</div>
 									</div>
 								{/if}

src/lib/components/workspace/common/ValvesModal.svelte

@@ -12,6 +12,7 @@
 	} from '$lib/apis/functions';
 	import { getToolValvesById, getToolValvesSpecById, updateToolValvesById } from '$lib/apis/tools';
 	import Spinner from '../../common/Spinner.svelte';
+	import Switch from '$lib/components/common/Switch.svelte';
 
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
@@ -142,7 +143,10 @@
 												class="p-1 px-3 text-xs flex rounded transition"
 												type="button"
 												on:click={() => {
-													valves[property] = (valves[property] ?? null) === null ? '' : null;
+													valves[property] =
+														(valves[property] ?? null) === null
+															? valvesSpec.properties[property]?.default ?? ''
+															: null;
 												}}
 											>
 												{#if (valves[property] ?? null) === null}
@@ -160,16 +164,40 @@
 										</div>
 
 										{#if (valves[property] ?? null) !== null}
+											<!-- {valves[property]} -->
 											<div class="flex mt-0.5 mb-1.5 space-x-2">
 												<div class=" flex-1">
-													<input
-														class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-														type="text"
-														placeholder={valvesSpec.properties[property].title}
-														bind:value={valves[property]}
-														autocomplete="off"
-														required
-													/>
+													{#if valvesSpec.properties[property]?.enum ?? null}
+														<select
+															class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+															bind:value={valves[property]}
+														>
+															{#each valvesSpec.properties[property].enum as option}
+																<option value={option} selected={option === valves[property]}>
+																	{option}
+																</option>
+															{/each}
+														</select>
+													{:else if (valvesSpec.properties[property]?.type ?? null) === 'boolean'}
+														<div class="flex justify-between items-center">
+															<div class="text-xs text-gray-500">
+																{valves[property] ? 'Enabled' : 'Disabled'}
+															</div>
+
+															<div class=" pr-2">
+																<Switch bind:state={valves[property]} />
+															</div>
+														</div>
+													{:else}
+														<input
+															class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+															type="text"
+															placeholder={valvesSpec.properties[property].title}
+															bind:value={valves[property]}
+															autocomplete="off"
+															required
+														/>
+													{/if}
 												</div>
 											</div>
 										{/if}