refine knowldgebase pages

Author: Jicheng Lu

src/routes/page/agent/[agentId]/build/+page.svelte

@@ -1,7 +1,6 @@
 <script>
-	import { onMount } from 'svelte';
 	import { Svelvet, ThemeToggle, Group } from 'svelvet';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { getAgent } from '$lib/services/agent-service.js';
 	import Thickness from './components/Thickness.svelte';
 	import AzureOpenAI from './components/LlmProviders/AzureOpenAI.svelte';
@@ -11,14 +10,15 @@
 	let zoom = 0.8;
 
 	/** @type {import('$agentTypes').AgentModel} */
-    let agent;
+	let agent = $state(/** @type {any} */ (undefined));
 
-	$: agentId = $page.params.agentId;
-	$: if (agentId) {
-		loadAgent(agentId);
-	}
-    	
-	onMount(async () => {});
+	let agentId = $derived(page.params.agentId);
+
+	$effect(() => {
+		if (agentId) {
+			loadAgent(agentId);
+		}
+	});
 
 	async function loadAgent(/** @type {string} */ id) {
 		agent = await getAgent(id);
@@ -31,7 +31,7 @@
 			position={{ x: -100, y: -25 }}
 			width={600}
 			height={700}
-			color="var(--bs-primary)"
+			color="#556ee6"
 			groupName="parameters"
 		>
 			<Thickness />

src/routes/page/agent/[agentId]/build/components/Agent.svelte

@@ -1,10 +1,10 @@
 <script>
-	import CustomAnchor from './CustomAnchor.svelte';
 	import { Node, Anchor } from 'svelvet';
 	import { generateInput, generateOutput } from 'svelvet';
+	import CustomAnchor from './CustomAnchor.svelte';
 
-	/** @type {import('$agentTypes').AgentModel} */
-	export let agent;
+	/** @type {{ agent: import('$agentTypes').AgentModel }} */
+	let { agent } = $props();
 
     /** 
      * @typedef {Object} Inputs 
@@ -17,7 +17,7 @@
 		strokeWidth: 2,
 		noise: 1
 	};
-	const processor = (inputs) => inputs;
+	const processor = (/** @type {any} */ inputs) => inputs;
 	const inputs = generateInput(initialData);
 	const output = generateOutput(inputs, processor);
 </script>

src/routes/page/agent/[agentId]/build/components/CustomAnchor.svelte

@@ -1,13 +1,15 @@
 <script>
-    /** @type boolean */
-	export let linked;
-    /** @type boolean */
-	export let connecting;
-    /** @type boolean */
-	export let hovering;
+	/**
+	 * @type {{
+	 *   linked: boolean,
+	 *   connecting: boolean,
+	 *   hovering: boolean
+	 * }}
+	 */
+	let { linked, connecting, hovering } = $props();
 </script>
 
-<div class:linked class:hovering class:connecting class="my-anchor" />
+<div class:linked class:hovering class:connecting class="my-anchor"></div>
 
 <style>
 	.my-anchor {

src/routes/page/agent/[agentId]/build/components/LlmProviders/AzureOpenAI.svelte

@@ -16,7 +16,7 @@
 		maxResponseTokens: 128
 	};
 	const inputs = generateInput(initialData);
-	const procesor = (inputs) => inputs.temperature;
+	const procesor = (/** @type {any} */ inputs) => inputs.temperature;
 	const output = generateOutput(inputs, procesor);
 </script>
 

src/routes/page/agent/[agentId]/build/components/NodeWrapper.svelte

@@ -1,23 +1,29 @@
 <script>
-	import { Anchor, generateOutput } from 'svelvet';
+	import { Anchor } from 'svelvet';
 	import CustomAnchor from './CustomAnchor.svelte';
 
-    /** @type string */
-	export let title;
-    
-	export let outputStore;
-	export let key = '';
-	export let destroy;
+	/**
+	 * @type {{
+	 *   title: string,
+	 *   outputStore?: any,
+	 *   key?: string,
+	 *   destroy?: (() => void) | undefined,
+	 *   children?: import('svelte').Snippet
+	 * }}
+	 */
+	let { title, outputStore, key = '', destroy, children } = $props();
 </script>
 
 <div class="node">
 	<div class="header">
 		<h1>{title}</h1>
 		{#if destroy}
-			<button class="destroy" on:click={destroy}>X</button>
+			<button class="destroy" onclick={destroy}>X</button>
 		{/if}
 	</div>
-	<slot />
+	{#if children}
+		{@render children()}
+	{/if}
 </div>
 {#if outputStore && key}
 	<div class="output-anchors">

src/routes/page/agent/[agentId]/build/components/Thickness.svelte

@@ -1,6 +1,6 @@
 <script>
-	import NodeWrapper from './NodeWrapper.svelte';
 	import { generateInput, generateOutput, Slider, Node } from 'svelvet';
+	import NodeWrapper from './NodeWrapper.svelte';
 
     /** 
      * @typedef {Object} Inputs 
@@ -12,7 +12,7 @@
 		width: 2.5
 	};
 	const inputs = generateInput(initialData);
-	const procesor = (inputs) => inputs.width;
+	const procesor = (/** @type {any} */ inputs) => inputs.width;
 	const output = generateOutput(inputs, procesor);
 </script>