From ee054551558e56c2498bcd22c13d79d52725c3c6 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 12 Nov 2024 15:46:44 -0800
Subject: [PATCH] refac

---
 .../workspace/Functions/FunctionEditor.svelte | 58 +++++++++--------
 .../workspace/Tools/ToolkitEditor.svelte      | 62 +++++++++++--------
 src/routes/(app)/workspace/+layout.svelte     | 20 +-----
 .../(app)/workspace/functions/+page.svelte    | 16 ++++-
 .../(app)/workspace/knowledge/+page.svelte    | 16 ++++-
 .../(app)/workspace/models/+page.svelte       | 15 ++++-
 .../(app)/workspace/prompts/+page.svelte      | 16 ++++-
 src/routes/(app)/workspace/tools/+page.svelte | 16 ++++-
 8 files changed, 145 insertions(+), 74 deletions(-)

diff --git a/src/lib/components/workspace/Functions/FunctionEditor.svelte b/src/lib/components/workspace/Functions/FunctionEditor.svelte
index ec65bae5d..63f8951e5 100644
--- a/src/lib/components/workspace/Functions/FunctionEditor.svelte
+++ b/src/lib/components/workspace/Functions/FunctionEditor.svelte
@@ -315,13 +315,15 @@ class Pipe:
 						</div>
 
 						<div class="flex-1">
-							<input
-								class="w-full text-2xl font-medium bg-transparent outline-none font-primary"
-								type="text"
-								placeholder={$i18n.t('Function Name (e.g. My Filter)')}
-								bind:value={name}
-								required
-							/>
+							<Tooltip content={$i18n.t('e.g. My Filter')} placement="top-start">
+								<input
+									class="w-full text-2xl font-medium bg-transparent outline-none font-primary"
+									type="text"
+									placeholder={$i18n.t('Function Name')}
+									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
-								class="w-full text-sm disabled:text-gray-500 bg-transparent outline-none"
-								type="text"
-								placeholder={$i18n.t('Function ID (e.g. my_filter)')}
-								bind:value={id}
-								required
-								disabled={edit}
-							/>
+							<Tooltip className="w-full" content={$i18n.t('e.g. my_filter')} placement="top-start">
+								<input
+									class="w-full text-sm disabled:text-gray-500 bg-transparent outline-none"
+									type="text"
+									placeholder={$i18n.t('Function ID')}
+									bind:value={id}
+									required
+									disabled={edit}
+								/>
+							</Tooltip>
 						{/if}
 
-						<input
-							class="w-full text-sm bg-transparent outline-none"
-							type="text"
-							placeholder={$i18n.t(
-								'Function Description (e.g. A filter to remove profanity from text)'
-							)}
-							bind:value={meta.description}
-							required
-						/>
+						<Tooltip
+							className="w-full self-center items-center flex"
+							content={$i18n.t('e.g. A filter to remove profanity from text')}
+							placement="top-start"
+						>
+							<input
+								class="w-full text-sm bg-transparent outline-none"
+								type="text"
+								placeholder={$i18n.t('Function Description')}
+								bind:value={meta.description}
+								required
+							/>
+						</Tooltip>
 					</div>
 				</div>
 
diff --git a/src/lib/components/workspace/Tools/ToolkitEditor.svelte b/src/lib/components/workspace/Tools/ToolkitEditor.svelte
index 362501595..dc6376205 100644
--- a/src/lib/components/workspace/Tools/ToolkitEditor.svelte
+++ b/src/lib/components/workspace/Tools/ToolkitEditor.svelte
@@ -203,13 +203,15 @@ class Tools:
 						</div>
 
 						<div class="flex-1">
-							<input
-								class="w-full text-2xl font-medium bg-transparent outline-none"
-								type="text"
-								placeholder={$i18n.t('Toolkit Name (e.g. My ToolKit)')}
-								bind:value={name}
-								required
-							/>
+							<Tooltip content={$i18n.t('e.g. My ToolKit')} placement="top-start">
+								<input
+									class="w-full text-2xl font-medium bg-transparent outline-none"
+									type="text"
+									placeholder={$i18n.t('Toolkit Name')}
+									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
-								class="w-full text-sm disabled:text-gray-500 bg-transparent outline-none"
-								type="text"
-								placeholder={$i18n.t('Toolkit ID (e.g. my_toolkit)')}
-								bind:value={id}
-								required
-								disabled={edit}
-							/>
+							<Tooltip
+								className="w-full"
+								content={$i18n.t('e.g. my_toolkit')}
+								placement="top-start"
+							>
+								<input
+									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
-							class="w-full text-sm bg-transparent outline-none"
-							type="text"
-							placeholder={$i18n.t(
-								'Toolkit Description (e.g. A toolkit for performing various operations)'
-							)}
-							bind:value={meta.description}
-							required
-						/>
+						<Tooltip
+							className="w-full self-center items-center flex"
+							content={$i18n.t('e.g. A toolkit for performing various operations')}
+							placement="top-start"
+						>
+							<input
+								class="w-full text-sm bg-transparent outline-none"
+								type="text"
+								placeholder={$i18n.t('Toolkit Description')}
+								bind:value={meta.description}
+								required
+							/>
+						</Tooltip>
 					</div>
 				</div>
 
diff --git a/src/routes/(app)/workspace/+layout.svelte b/src/routes/(app)/workspace/+layout.svelte
index 09d5897ca..560e1adb3 100644
--- a/src/routes/(app)/workspace/+layout.svelte
+++ b/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>
diff --git a/src/routes/(app)/workspace/functions/+page.svelte b/src/routes/(app)/workspace/functions/+page.svelte
index 8c6c212fa..8254485b9 100644
--- a/src/routes/(app)/workspace/functions/+page.svelte
+++ b/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}
diff --git a/src/routes/(app)/workspace/knowledge/+page.svelte b/src/routes/(app)/workspace/knowledge/+page.svelte
index 7994ae40d..76acaac14 100644
--- a/src/routes/(app)/workspace/knowledge/+page.svelte
+++ b/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}
diff --git a/src/routes/(app)/workspace/models/+page.svelte b/src/routes/(app)/workspace/models/+page.svelte
index f656ad781..ed8474894 100644
--- a/src/routes/(app)/workspace/models/+page.svelte
+++ b/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}
diff --git a/src/routes/(app)/workspace/prompts/+page.svelte b/src/routes/(app)/workspace/prompts/+page.svelte
index 48c6e65c6..fbe9918b7 100644
--- a/src/routes/(app)/workspace/prompts/+page.svelte
+++ b/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}
diff --git a/src/routes/(app)/workspace/tools/+page.svelte b/src/routes/(app)/workspace/tools/+page.svelte
index e745cfa80..d87cac6c8 100644
--- a/src/routes/(app)/workspace/tools/+page.svelte
+++ b/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}