refac: user valves

src/lib/components/chat/Controls/Controls.svelte

@@ -5,7 +5,7 @@
 
 	import XMark from '$lib/components/icons/XMark.svelte';
 	import AdvancedParams from '../Settings/Advanced/AdvancedParams.svelte';
-	import Valves from '$lib/components/common/Valves.svelte';
+	import Valves from '$lib/components/chat/Controls/Valves.svelte';
 	import FileItem from '$lib/components/common/FileItem.svelte';
 	import Collapsible from '$lib/components/common/Collapsible.svelte';
 
@@ -55,17 +55,13 @@
 			<hr class="my-2 border-gray-100 dark:border-gray-800" />
 		{/if}
 
-		{#if models.length === 1 && models[0]?.pipe?.valves_spec}
+		<Collapsible title={$i18n.t('Valves')}>
-			<div>
+			<div class="text-sm mt-1.5" slot="content">
-				<div class=" font-medium">{$i18n.t('Valves')}</div>
+				<Valves />
-
-				<div>
-					<Valves valvesSpec={models[0]?.pipe?.valves_spec} bind:valves />
-				</div>
 			</div>
+		</Collapsible>
 
-			<hr class="my-2 border-gray-100 dark:border-gray-800" />
+		<hr class="my-2 border-gray-100 dark:border-gray-800" />
-		{/if}
 
 		<Collapsible title={$i18n.t('System Prompt')} open={true}>
 			<div class=" mt-1.5" slot="content">

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

@@ -15,18 +15,14 @@
 		updateUserValvesById as updateFunctionUserValvesById
 	} from '$lib/apis/functions';
 
-	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';
 	import Valves from '$lib/components/common/Valves.svelte';
 
 	const dispatch = createEventDispatcher();
 
 	const i18n = getContext('i18n');
 
-	export let saveSettings: Function;
-
 	let tab = 'tools';
 	let selectedId = '';
 
@@ -112,18 +108,12 @@
 		dispatch('save');
 	}}
 >
-	<div class="flex flex-col pr-1.5 overflow-y-scroll max-h-[25rem]">
+	<div class="flex flex-col">
-		<div>
+		<div class="space-y-1">
-			<div class="flex items-center justify-between mb-2">
+			<div class="flex gap-2">
-				<Tooltip content="">
+				<div class="flex-1">
-					<div class="text-sm font-medium">
-						{$i18n.t('Manage Valves')}
-					</div>
-				</Tooltip>
-
-				<div class=" self-end">
 					<select
-						class=" dark:bg-gray-900 w-fit pr-8 rounded text-xs bg-transparent outline-none text-right"
+						class="  w-full rounded text-xs py-2 px-1 bg-transparent outline-none"
 						bind:value={tab}
 						placeholder="Select"
 					>
@@ -131,14 +121,10 @@
 						<option value="functions">{$i18n.t('Functions')}</option>
 					</select>
 				</div>
-			</div>
-		</div>
 
-		<div class="space-y-1">
-			<div class="flex gap-2">
 				<div class="flex-1">
 					<select
-						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+						class="w-full rounded py-2 px-1 text-xs bg-transparent outline-none"
 						bind:value={selectedId}
 						on:change={async () => {
 							await tick();
@@ -167,9 +153,9 @@
 		</div>
 
 		{#if selectedId}
-			<hr class="dark:border-gray-800 my-3 w-full" />
+			<hr class="dark:border-gray-800 my-1 w-full" />
 
-			<div>
+			<div class="my-2 text-xs">
 				{#if !loading}
 					<Valves {valvesSpec} bind:valves />
 				{:else}
@@ -178,13 +164,4 @@
 			</div>
 		{/if}
 	</div>
-
-	<div class="flex justify-end text-sm font-medium">
-		<button
-			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
-			type="submit"
-		>
-			{$i18n.t('Save')}
-		</button>
-	</div>
 </form>

src/lib/components/chat/SettingsModal.svelte

@@ -15,7 +15,6 @@
 	import Chats from './Settings/Chats.svelte';
 	import User from '../icons/User.svelte';
 	import Personalization from './Settings/Personalization.svelte';
-	import Valves from './Settings/Valves.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -188,30 +187,6 @@
 					<div class=" self-center">{$i18n.t('Audio')}</div>
 				</button>
 
-				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
-					'valves'
-						? 'bg-gray-200 dark:bg-gray-800'
-						: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
-					on:click={() => {
-						selectedTab = 'valves';
-					}}
-				>
-					<div class=" self-center mr-2">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 24 24"
-							fill="currentColor"
-							class="size-4"
-						>
-							<path
-								d="M18.75 12.75h1.5a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM12 6a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 6ZM12 18a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 18ZM3.75 6.75h1.5a.75.75 0 1 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM5.25 18.75h-1.5a.75.75 0 0 1 0-1.5h1.5a.75.75 0 0 1 0 1.5ZM3 12a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 3 12ZM9 3.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM12.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM9 15.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z"
-							/>
-						</svg>
-					</div>
-					<div class=" self-center">{$i18n.t('Valves')}</div>
-				</button>
-
 				<button
 					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 					'chats'
@@ -349,13 +324,6 @@
 							toast.success($i18n.t('Settings saved successfully!'));
 						}}
 					/>
-				{:else if selectedTab === 'valves'}
-					<Valves
-						{saveSettings}
-						on:save={() => {
-							toast.success($i18n.t('Settings saved successfully!'));
-						}}
-					/>
 				{:else if selectedTab === 'chats'}
 					<Chats {saveSettings} />
 				{:else if selectedTab === 'account'}

src/lib/components/common/Valves.svelte

@@ -8,7 +8,7 @@
 	export let valves = {};
 </script>
 
-{#if valvesSpec}
+{#if valvesSpec && Object.keys(valvesSpec?.properties ?? {}).length}
 	{#each Object.keys(valvesSpec.properties) as property, idx}
 		<div class=" py-0.5 w-full justify-between">
 			<div class="flex w-full justify-between">
@@ -91,5 +91,5 @@
 		</div>
 	{/each}
 {:else}
-	<div class="text-sm">No valves</div>
+	<div class="text-xs">No valves</div>
 {/if}