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}
-			<div>
-				<div class=" font-medium">{$i18n.t('Valves')}</div>
-
-				<div>
-					<Valves valvesSpec={models[0]?.pipe?.valves_spec} bind:valves />
-				</div>
+		<Collapsible title={$i18n.t('Valves')}>
+			<div class="text-sm mt-1.5" slot="content">
+				<Valves />
 			</div>
+		</Collapsible>
 
-			<hr class="my-2 border-gray-100 dark:border-gray-800" />
-		{/if}
+		<hr class="my-2 border-gray-100 dark:border-gray-800" />
 
 		<Collapsible title={$i18n.t('System Prompt')} open={true}>
 			<div class=" mt-1.5" slot="content">

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

@@ -0,0 +1,167 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+
+	import { config, functions, models, settings, tools, user } from '$lib/stores';
+	import { createEventDispatcher, onMount, getContext, tick } from 'svelte';
+
+	import {
+		getUserValvesSpecById as getToolUserValvesSpecById,
+		getUserValvesById as getToolUserValvesById,
+		updateUserValvesById as updateToolUserValvesById
+	} from '$lib/apis/tools';
+	import {
+		getUserValvesSpecById as getFunctionUserValvesSpecById,
+		getUserValvesById as getFunctionUserValvesById,
+		updateUserValvesById as updateFunctionUserValvesById
+	} from '$lib/apis/functions';
+
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Valves from '$lib/components/common/Valves.svelte';
+
+	const dispatch = createEventDispatcher();
+
+	const i18n = getContext('i18n');
+
+	let tab = 'tools';
+	let selectedId = '';
+
+	let loading = false;
+
+	let valvesSpec = null;
+	let valves = {};
+
+	const getUserValves = async () => {
+		loading = true;
+		if (tab === 'tools') {
+			valves = await getToolUserValvesById(localStorage.token, selectedId);
+			valvesSpec = await getToolUserValvesSpecById(localStorage.token, selectedId);
+		} else if (tab === 'functions') {
+			valves = await getFunctionUserValvesById(localStorage.token, selectedId);
+			valvesSpec = await getFunctionUserValvesSpecById(localStorage.token, selectedId);
+		}
+
+		if (valvesSpec) {
+			// Convert array to string
+			for (const property in valvesSpec.properties) {
+				if (valvesSpec.properties[property]?.type === 'array') {
+					valves[property] = (valves[property] ?? []).join(',');
+				}
+			}
+		}
+
+		loading = false;
+	};
+
+	const submitHandler = async () => {
+		if (valvesSpec) {
+			// Convert string to array
+			for (const property in valvesSpec.properties) {
+				if (valvesSpec.properties[property]?.type === 'array') {
+					valves[property] = (valves[property] ?? '').split(',').map((v) => v.trim());
+				}
+			}
+
+			if (tab === 'tools') {
+				const res = await updateToolUserValvesById(localStorage.token, selectedId, valves).catch(
+					(error) => {
+						toast.error(error);
+						return null;
+					}
+				);
+
+				if (res) {
+					toast.success($i18n.t('Valves updated'));
+					valves = res;
+				}
+			} else if (tab === 'functions') {
+				const res = await updateFunctionUserValvesById(
+					localStorage.token,
+					selectedId,
+					valves
+				).catch((error) => {
+					toast.error(error);
+					return null;
+				});
+
+				if (res) {
+					toast.success($i18n.t('Valves updated'));
+					valves = res;
+				}
+			}
+		}
+	};
+
+	$: if (tab) {
+		selectedId = '';
+	}
+
+	$: if (selectedId) {
+		getUserValves();
+	}
+</script>
+
+<form
+	class="flex flex-col h-full justify-between space-y-3 text-sm"
+	on:submit|preventDefault={() => {
+		submitHandler();
+		dispatch('save');
+	}}
+>
+	<div class="flex flex-col">
+		<div class="space-y-1">
+			<div class="flex gap-2">
+				<div class="flex-1">
+					<select
+						class="  w-full rounded text-xs py-2 px-1 bg-transparent outline-none"
+						bind:value={tab}
+						placeholder="Select"
+					>
+						<option value="tools">{$i18n.t('Tools')}</option>
+						<option value="functions">{$i18n.t('Functions')}</option>
+					</select>
+				</div>
+
+				<div class="flex-1">
+					<select
+						class="w-full rounded py-2 px-1 text-xs bg-transparent outline-none"
+						bind:value={selectedId}
+						on:change={async () => {
+							await tick();
+						}}
+					>
+						{#if tab === 'tools'}
+							<option value="" selected disabled class="bg-gray-100 dark:bg-gray-700"
+								>{$i18n.t('Select a tool')}</option
+							>
+
+							{#each $tools as tool, toolIdx}
+								<option value={tool.id} class="bg-gray-100 dark:bg-gray-700">{tool.name}</option>
+							{/each}
+						{:else if tab === 'functions'}
+							<option value="" selected disabled class="bg-gray-100 dark:bg-gray-700"
+								>{$i18n.t('Select a function')}</option
+							>
+
+							{#each $functions as func, funcIdx}
+								<option value={func.id} class="bg-gray-100 dark:bg-700">{func.name}</option>
+							{/each}
+						{/if}
+					</select>
+				</div>
+			</div>
+		</div>
+
+		{#if selectedId}
+			<hr class="dark:border-gray-800 my-1 w-full" />
+
+			<div class="my-2 text-xs">
+				{#if !loading}
+					<Valves {valvesSpec} bind:valves />
+				{:else}
+					<Spinner className="size-5" />
+				{/if}
+			</div>
+		{/if}
+	</div>
+</form>