From c8f44b73f1fe17274c0259658922ac21b5916ee0 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 2 Aug 2024 17:36:16 +0200
Subject: [PATCH] refac: user valves save handler

---
 src/lib/components/chat/Chat.svelte           |  4 ----
 src/lib/components/chat/ChatControls.svelte   |  4 ----
 .../components/chat/Controls/Controls.svelte  |  1 -
 .../components/chat/Controls/Valves.svelte    | 22 ++++++++++++++++++-
 src/lib/components/common/Valves.svelte       | 18 +++++++++++++--
 5 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index 24e74e695..53e3b2721 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -109,7 +109,6 @@
 	};
 
 	let params = {};
-	let valves = {};
 
 	$: if (history.currentId !== null) {
 		let _messages = [];
@@ -812,7 +811,6 @@
 			keep_alive: $settings.keepAlive ?? undefined,
 			tool_ids: selectedToolIds.length > 0 ? selectedToolIds : undefined,
 			files: files.length > 0 ? files : undefined,
-			...(Object.keys(valves).length ? { valves } : {}),
 			session_id: $socket?.id,
 			chat_id: $chatId,
 			id: responseMessageId
@@ -1112,7 +1110,6 @@
 					max_tokens: params?.max_tokens ?? $settings?.params?.max_tokens ?? undefined,
 					tool_ids: selectedToolIds.length > 0 ? selectedToolIds : undefined,
 					files: files.length > 0 ? files : undefined,
-					...(Object.keys(valves).length ? { valves } : {}),
 					session_id: $socket?.id,
 					chat_id: $chatId,
 					id: responseMessageId
@@ -1639,7 +1636,6 @@
 			bind:show={showControls}
 			bind:chatFiles
 			bind:params
-			bind:valves
 		/>
 	</div>
 {/if}
diff --git a/src/lib/components/chat/ChatControls.svelte b/src/lib/components/chat/ChatControls.svelte
index f67e6d6ef..3de095b0d 100644
--- a/src/lib/components/chat/ChatControls.svelte
+++ b/src/lib/components/chat/ChatControls.svelte
@@ -9,9 +9,7 @@
 	export let models = [];
 
 	export let chatId = null;
-
 	export let chatFiles = [];
-	export let valves = {};
 	export let params = {};
 
 	let largeScreen = false;
@@ -50,7 +48,6 @@
 						}}
 						{models}
 						bind:chatFiles
-						bind:valves
 						bind:params
 					/>
 				</div>
@@ -66,7 +63,6 @@
 				}}
 				{models}
 				bind:chatFiles
-				bind:valves
 				bind:params
 			/>
 		</div>
diff --git a/src/lib/components/chat/Controls/Controls.svelte b/src/lib/components/chat/Controls/Controls.svelte
index abecb6a0b..69034a305 100644
--- a/src/lib/components/chat/Controls/Controls.svelte
+++ b/src/lib/components/chat/Controls/Controls.svelte
@@ -12,7 +12,6 @@
 	export let models = [];
 
 	export let chatFiles = [];
-	export let valves = {};
 	export let params = {};
 </script>
 
diff --git a/src/lib/components/chat/Controls/Valves.svelte b/src/lib/components/chat/Controls/Valves.svelte
index 1b2edbb16..17efc019f 100644
--- a/src/lib/components/chat/Controls/Valves.svelte
+++ b/src/lib/components/chat/Controls/Valves.svelte
@@ -31,6 +31,20 @@
 	let valvesSpec = null;
 	let valves = {};
 
+	let debounceTimer;
+
+	const debounceSubmitHandler = async () => {
+		// debounce 1 second
+		if (debounceTimer) {
+			clearTimeout(debounceTimer);
+		}
+
+		// Set a new timer
+		debounceTimer = setTimeout(() => {
+			submitHandler();
+		}, 1000); // 1 second debounce
+	};
+
 	const getUserValves = async () => {
 		loading = true;
 		if (tab === 'tools') {
@@ -157,7 +171,13 @@
 
 			<div class="my-2 text-xs">
 				{#if !loading}
-					<Valves {valvesSpec} bind:valves />
+					<Valves
+						{valvesSpec}
+						bind:valves
+						on:change={() => {
+							debounceSubmitHandler();
+						}}
+					/>
 				{:else}
 					<Spinner className="size-5" />
 				{/if}
diff --git a/src/lib/components/common/Valves.svelte b/src/lib/components/common/Valves.svelte
index 6de35a83b..cf138082f 100644
--- a/src/lib/components/common/Valves.svelte
+++ b/src/lib/components/common/Valves.svelte
@@ -1,5 +1,6 @@
 <script>
-	import { onMount, getContext } from 'svelte';
+	import { onMount, getContext, createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
 	const i18n = getContext('i18n');
 
 	import Switch from './Switch.svelte';
@@ -28,6 +29,8 @@
 							(valves[property] ?? null) === null
 								? valvesSpec.properties[property]?.default ?? ''
 								: null;
+
+						dispatch('change');
 					}}
 				>
 					{#if (valves[property] ?? null) === null}
@@ -52,6 +55,9 @@
 							<select
 								class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none border border-gray-100 dark:border-gray-800"
 								bind:value={valves[property]}
+								on:change={() => {
+									dispatch('change');
+								}}
 							>
 								{#each valvesSpec.properties[property].enum as option}
 									<option value={option} selected={option === valves[property]}>
@@ -66,7 +72,12 @@
 								</div>
 
 								<div class=" pr-2">
-									<Switch bind:state={valves[property]} />
+									<Switch
+										bind:state={valves[property]}
+										on:change={() => {
+											dispatch('change');
+										}}
+									/>
 								</div>
 							</div>
 						{:else}
@@ -77,6 +88,9 @@
 								bind:value={valves[property]}
 								autocomplete="off"
 								required
+								on:change={() => {
+									dispatch('change');
+								}}
 							/>
 						{/if}
 					</div>