use derived instead of states

src/lib/components/chat/User.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Send, Settings, X } from '@lucide/svelte';
+	import { Send, X } from '@lucide/svelte';
 	import {
 		Handle,
 		useEdges,
@@ -28,7 +28,7 @@
 	const { update: updateEdges } = useEdges();
 	const { fitView, updateNodeData } = useSvelteFlow();
 
-	let selectedModels = $state.raw<ChatModel[]>(
+	let selectedModels = $derived<ChatModel[]>(
 		(nodeData.current?.data.selectedModels as ChatModel[]) ?? []
 	);
 	let prompt = $state.raw<string>((nodeData.current?.data.prompt as string) ?? '');
@@ -36,25 +36,38 @@
 	let messages = $state.raw<ChatMessage[]>(
 		(nodeData.current?.data?.messages as ChatMessage[]) ?? []
 	);
-	let openSettingsModel = $state.raw<ChatModel | null>(null);
 
 	function addModel(model: ChatModel) {
 		if (!selectedModels.some((m) => m.id === model.id)) {
-			selectedModels = [...selectedModels, model];
+			updateNodeData(
+				id,
+				{
+					...nodeData.current,
+					selectedModels: [...selectedModels, model]
+				},
+				{ replace: true }
+			);
 			if (lastMessage) {
 				handleTriggerAction([model]);
 			}
 		}
 	}
 	function removeModel(model: ChatModel) {
-		selectedModels = selectedModels.filter((m) => m.id !== model.id);
+		updateNodeData(
+			id,
+			{
+				...nodeData.current,
+				selectedModels: selectedModels.filter((m) => m.id !== model.id)
+			},
+			{ replace: true }
+		);
 	}
 
 	function handleTriggerAction(models: ChatModel[] = selectedModels) {
 		const newNodes: Node[] = [];
 		const newEdges: Edge[] = [];
 		messages = [...messages, { role: 'user', content: prompt }];
-		updateNodeData(id, { messages }, { replace: true });
+		updateNodeData(id, { ...nodeData.current?.data, messages }, { replace: true });
 
 		models.forEach((m) => {
 			const newNodeId = `assistant-${crypto.randomUUID()}`;

src/lib/components/model/SettingsModel.svelte

@@ -12,14 +12,18 @@
 		model,
 		children,
 		onSave
-	}: { model: ChatModel; children: Snippet; onSave: (model: ChatModel) => void } = $props();
+	}: {
+		model: ChatModel;
+		children: Snippet;
+		onSave: (model: ChatModel) => void;
+	} = $props();
 
 	// svelte-ignore state_referenced_locally
-	let temperature = $state<number>(model.temperature ?? 0.5);
+	let temperature = $state<number | undefined>(model.temperature ?? undefined);
 	// svelte-ignore state_referenced_locally
 	let max_tokens = $state<number | undefined>(model.max_tokens ?? undefined);
 	// svelte-ignore state_referenced_locally
-	let top_p = $state<number>(model.top_p ?? 0.7);
+	let top_p = $state<number | undefined>(model.top_p ?? undefined);
 	let open = $state<boolean>(false);
 </script>
 
@@ -28,38 +32,58 @@
 	<Popover.Content class="w-80 rounded-2xl p-0">
 		<div class="grid gap-4">
 			<header class="border-b border-border px-5 pt-4 pb-4">
-				<h4 class="text-base leading-none font-medium text-primary/90">Generation Settings</h4>
+				<h4 class="text-sm leading-none font-medium text-primary/90">Generation Settings</h4>
 			</header>
 			<main class="grid gap-5 px-5 py-0">
 				<div class="space-y-1">
 					<div class="flex items-center justify-between">
 						<h4 class="text-sm leading-none font-medium">Temperature</h4>
-						<Input
-							type="number"
+						<div class="flex items-center gap-1">
+							{#if temperature === undefined}
+								<Button variant="blue" size="2xs" onclick={() => (temperature = 0.5)}>Set</Button>
+							{:else}
+								<Input
+									type="number"
+									min={0}
+									max={2}
+									step={0.1}
+									bind:value={temperature}
+									class="h-7! w-24!"
+								/>
+								<Button variant="outline" size="icon-xs" onclick={() => (temperature = undefined)}>
+									<X class="size-3.5" />
+								</Button>
+							{/if}
+						</div>
+					</div>
+					{#if temperature !== undefined}
+						<Slider
+							type="single"
+							bind:value={temperature}
 							min={0}
 							max={2}
-							step={0.1}
-							bind:value={temperature}
-							class="h-7! w-24!"
+							step={0.01}
+							class="mt-2"
 						/>
-					</div>
-					<Slider type="single" bind:value={temperature} min={0} max={2} step={0.01} class="mt-2" />
+					{/if}
 				</div>
 
 				<div class="space-y-1">
 					<div class="flex items-center justify-between">
 						<h4 class="text-sm leading-none font-medium">Max Tokens</h4>
 						<div class="flex items-center gap-1">
-							<Input
-								type="number"
-								min={0}
-								max={204800}
-								step={256}
-								placeholder="—"
-								class="h-7! w-24!"
-								bind:value={max_tokens}
-							/>
-							{#if max_tokens !== undefined}
+							{#if max_tokens === undefined}
+								<Button variant="blue" size="2xs" onclick={() => (max_tokens = 32000)}>Set</Button>
+							{:else}
+								<Input
+									type="number"
+									min={0}
+									max={204800}
+									step={256}
+									placeholder="—"
+									class="h-7! w-24!"
+									bind:value={max_tokens}
+								/>
 								<Button variant="outline" size="icon-xs" onclick={() => (max_tokens = undefined)}>
 									<X class="size-3.5" />
 								</Button>
@@ -75,30 +99,39 @@
 							step={256}
 							class="mt-2"
 						/>
-					{:else}
-						<div class="mt-2 h-1.5 w-full rounded-full bg-muted"></div>
 					{/if}
 				</div>
 
 				<div class="space-y-1">
 					<div class="flex items-center justify-between">
 						<h4 class="text-sm leading-none font-medium">Top-P</h4>
-						<Input
-							type="number"
-							min={0}
-							max={1}
-							step={0.01}
-							bind:value={top_p}
-							class="h-7! w-24!"
-						/>
+						<div class="flex items-center gap-1">
+							{#if top_p === undefined}
+								<Button variant="blue" size="2xs" onclick={() => (top_p = 0.7)}>Set</Button>
+							{:else}
+								<Input
+									type="number"
+									min={0}
+									max={1}
+									step={0.01}
+									bind:value={top_p}
+									class="h-7! w-24!"
+								/>
+								<Button variant="outline" size="icon-xs" onclick={() => (top_p = undefined)}>
+									<X class="size-3.5" />
+								</Button>
+							{/if}
+						</div>
 					</div>
-					<Slider type="single" bind:value={top_p} min={0} max={1} step={0.01} class="mt-2" />
+					{#if top_p !== undefined}
+						<Slider type="single" bind:value={top_p} min={0} max={1} step={0.01} class="mt-2" />
+					{/if}
 				</div>
 			</main>
 			<footer class="flex justify-end border-t border-border px-5 pt-3 pb-3">
 				<Button
 					variant="default"
-					size="sm"
+					size="xs"
 					onclick={() => {
 						onSave({ ...model, temperature, max_tokens, top_p });
 						open = false;

src/lib/components/ui/button/button.svelte

@@ -14,12 +14,14 @@
 					'bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs text-gray-600 dark:text-gray-400',
 				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs',
 				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-				link: 'text-primary underline-offset-4 hover:underline'
+				link: 'text-primary underline-offset-4 hover:underline',
+				blue: 'bg-blue-500/10 text-blue-500 border border-blue-500/20 hover:bg-blue-500/20 shadow-xs'
 			},
 			size: {
 				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
 				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
-				xs: 'h-7 gap-1 rounded-md px-2.5 has-[>svg]:px-2',
+				xs: 'h-7 gap-1 rounded-md px-2.5 has-[>svg]:px-2 text-xs!',
+				'2xs': 'h-6 gap-1 rounded-md px-2.5 has-[>svg]:px-2 text-xs!',
 				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
 				icon: 'size-9',
 				'icon-sm': 'size-8',