refac

src/lib/components/workspace/Functions/FunctionEditor.svelte

@@ -315,13 +315,15 @@ class Pipe:
 						</div>
 
 						<div class="flex-1">
-							<input
+							<Tooltip content={$i18n.t('e.g. My Filter')} placement="top-start">
-								class="w-full text-2xl font-medium bg-transparent outline-none font-primary"
+								<input
-								type="text"
+									class="w-full text-2xl font-medium bg-transparent outline-none font-primary"
-								placeholder={$i18n.t('Function Name (e.g. My Filter)')}
+									type="text"
-								bind:value={name}
+									placeholder={$i18n.t('Function Name')}
-								required
+									bind:value={name}
-							/>
+									required
+								/>
+							</Tooltip>
 						</div>
 
 						<div>
@@ -329,31 +331,37 @@ class Pipe:
 						</div>
 					</div>
 
-					<div class=" flex gap-2 px-1">
+					<div class=" flex gap-2 px-1 items-center">
 						{#if edit}
 							<div class="text-sm text-gray-500 flex-shrink-0">
 								{id}
 							</div>
 						{:else}
-							<input
+							<Tooltip className="w-full" content={$i18n.t('e.g. my_filter')} placement="top-start">
-								class="w-full text-sm disabled:text-gray-500 bg-transparent outline-none"
+								<input
-								type="text"
+									class="w-full text-sm disabled:text-gray-500 bg-transparent outline-none"
-								placeholder={$i18n.t('Function ID (e.g. my_filter)')}
+									type="text"
-								bind:value={id}
+									placeholder={$i18n.t('Function ID')}
-								required
+									bind:value={id}
-								disabled={edit}
+									required
-							/>
+									disabled={edit}
+								/>
+							</Tooltip>
 						{/if}
 
-						<input
+						<Tooltip
-							class="w-full text-sm bg-transparent outline-none"
+							className="w-full self-center items-center flex"
-							type="text"
+							content={$i18n.t('e.g. A filter to remove profanity from text')}
-							placeholder={$i18n.t(
+							placement="top-start"
-								'Function Description (e.g. A filter to remove profanity from text)'
+						>
-							)}
+							<input
-							bind:value={meta.description}
+								class="w-full text-sm bg-transparent outline-none"
-							required
+								type="text"
-						/>
+								placeholder={$i18n.t('Function Description')}
+								bind:value={meta.description}
+								required
+							/>
+						</Tooltip>
 					</div>
 				</div>
 

src/lib/components/workspace/Tools/ToolkitEditor.svelte

@@ -203,13 +203,15 @@ class Tools:
 						</div>
 
 						<div class="flex-1">
-							<input
+							<Tooltip content={$i18n.t('e.g. My ToolKit')} placement="top-start">
-								class="w-full text-2xl font-medium bg-transparent outline-none"
+								<input
-								type="text"
+									class="w-full text-2xl font-medium bg-transparent outline-none"
-								placeholder={$i18n.t('Toolkit Name (e.g. My ToolKit)')}
+									type="text"
-								bind:value={name}
+									placeholder={$i18n.t('Toolkit Name')}
-								required
+									bind:value={name}
-							/>
+									required
+								/>
+							</Tooltip>
 						</div>
 
 						<div>
@@ -217,31 +219,41 @@ class Tools:
 						</div>
 					</div>
 
-					<div class=" flex gap-2 px-1">
+					<div class=" flex gap-2 px-1 items-center">
 						{#if edit}
 							<div class="text-sm text-gray-500 flex-shrink-0">
 								{id}
 							</div>
 						{:else}
-							<input
+							<Tooltip
-								class="w-full text-sm disabled:text-gray-500 bg-transparent outline-none"
+								className="w-full"
-								type="text"
+								content={$i18n.t('e.g. my_toolkit')}
-								placeholder={$i18n.t('Toolkit ID (e.g. my_toolkit)')}
+								placement="top-start"
-								bind:value={id}
+							>
-								required
+								<input
-								disabled={edit}
+									class="w-full text-sm disabled:text-gray-500 bg-transparent outline-none"
-							/>
+									type="text"
+									placeholder={$i18n.t('Toolkit ID')}
+									bind:value={id}
+									required
+									disabled={edit}
+								/>
+							</Tooltip>
 						{/if}
 
-						<input
+						<Tooltip
-							class="w-full text-sm bg-transparent outline-none"
+							className="w-full self-center items-center flex"
-							type="text"
+							content={$i18n.t('e.g. A toolkit for performing various operations')}
-							placeholder={$i18n.t(
+							placement="top-start"
-								'Toolkit Description (e.g. A toolkit for performing various operations)'
+						>
-							)}
+							<input
-							bind:value={meta.description}
+								class="w-full text-sm bg-transparent outline-none"
-							required
+								type="text"
-						/>
+								placeholder={$i18n.t('Toolkit Description')}
+								bind:value={meta.description}
+								required
+							/>
+						</Tooltip>
 					</div>
 				</div>
 

src/routes/(app)/workspace/+layout.svelte

@@ -30,24 +30,6 @@
 			await goto('/');
 		}
 
-		await Promise.all([
-			(async () => {
-				models.set(await getModels(localStorage.token));
-			})(),
-			(async () => {
-				knowledge.set(await getKnowledgeItems(localStorage.token));
-			})(),
-			(async () => {
-				prompts.set(await getPrompts(localStorage.token));
-			})(),
-			(async () => {
-				tools.set(await getTools(localStorage.token));
-			})(),
-			(async () => {
-				functions.set(await getFunctions(localStorage.token));
-			})()
-		]);
-
 		loaded = true;
 	});
 </script>
@@ -136,7 +118,7 @@
 			</div>
 		</div>
 
-		<div class=" pb-1 px-[18px] flex-1 max-h-full overflow-y-auto" id="workspace-container">
+		<div class=" -mt-1 pb-1 px-[18px] flex-1 max-h-full overflow-y-auto" id="workspace-container">
 			<slot />
 		</div>
 	</div>

src/routes/(app)/workspace/functions/+page.svelte

@@ -1,5 +1,19 @@
 <script>
+	import { onMount } from 'svelte';
+	import { functions } from '$lib/stores';
+
+	import { getFunctions } from '$lib/apis/functions';
 	import Functions from '$lib/components/workspace/Functions.svelte';
+
+	onMount(async () => {
+		await Promise.all([
+			(async () => {
+				functions.set(await getFunctions(localStorage.token));
+			})()
+		]);
+	});
 </script>
 
-<Functions />
+{#if $functions !== null}
+	<Functions />
+{/if}

src/routes/(app)/workspace/knowledge/+page.svelte

@@ -1,5 +1,19 @@
 <script>
+	import { onMount } from 'svelte';
+	import { knowledge } from '$lib/stores';
+
+	import { getKnowledgeItems } from '$lib/apis/knowledge';
 	import Knowledge from '$lib/components/workspace/Knowledge.svelte';
+
+	onMount(async () => {
+		await Promise.all([
+			(async () => {
+				knowledge.set(await getKnowledgeItems(localStorage.token));
+			})()
+		]);
+	});
 </script>
 
-<Knowledge />
+{#if $knowledge !== null}
+	<Knowledge />
+{/if}

src/routes/(app)/workspace/models/+page.svelte

@@ -1,5 +1,18 @@
 <script>
+	import { onMount } from 'svelte';
+	import { models } from '$lib/stores';
+	import { getModels } from '$lib/apis';
 	import Models from '$lib/components/workspace/Models.svelte';
+
+	onMount(async () => {
+		await Promise.all([
+			(async () => {
+				models.set(await getModels(localStorage.token));
+			})()
+		]);
+	});
 </script>
 
-<Models />
+{#if $models !== null}
+	<Models />
+{/if}

src/routes/(app)/workspace/prompts/+page.svelte

@@ -1,5 +1,19 @@
 <script>
+	import { onMount } from 'svelte';
+	import { prompts } from '$lib/stores';
+
+	import { getPrompts } from '$lib/apis/prompts';
 	import Prompts from '$lib/components/workspace/Prompts.svelte';
+
+	onMount(async () => {
+		await Promise.all([
+			(async () => {
+				prompts.set(await getPrompts(localStorage.token));
+			})()
+		]);
+	});
 </script>
 
-<Prompts />
+{#if $prompts !== null}
+	<Prompts />
+{/if}

src/routes/(app)/workspace/tools/+page.svelte

@@ -1,5 +1,19 @@
 <script>
+	import { onMount } from 'svelte';
+	import { tools } from '$lib/stores';
+
+	import { getTools } from '$lib/apis/tools';
 	import Tools from '$lib/components/workspace/Tools.svelte';
+
+	onMount(async () => {
+		await Promise.all([
+			(async () => {
+				tools.set(await getTools(localStorage.token));
+			})()
+		]);
+	});
 </script>
 
-<Tools />
+{#if $tools !== null}
+	<Tools />
+{/if}