refac: tools

src/lib/components/workspace/Tools.svelte

@@ -1,86 +1,67 @@
-<script>
-	import { getContext } from 'svelte';
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
 
-	const i18n = getContext('i18n');
-
-	import CodeEditor from './Tools/CodeEditor.svelte';
-
-	let loading = false;
-
-	let name = '';
-	let id = '';
-
-	$: if (name) {
-		id = name.replace(/\s+/g, '_').toLowerCase();
-	}
-
-	let codeEditor;
-
-	const saveHandler = async () => {
-		loading = true;
-		// Call the API to save the toolkit
-
-		console.log('saveHandler');
-	};
+	import { onMount, getContext } from 'svelte';
+	import { WEBUI_NAME, prompts } from '$lib/stores';
+	import { createNewPrompt, deletePromptByCommand, getPrompts } from '$lib/apis/prompts';
 
-	const submitHandler = async () => {
-		if (codeEditor) {
-			const res = await codeEditor.formatHandler();
+	import { goto } from '$app/navigation';
 
-			if (res) {
-				console.log('Code formatted successfully');
-				saveHandler();
-			}
-		}
-	};
+	const i18n = getContext('i18n');
+	let query = '';
 </script>
 
-<div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
-	<div class="mx-auto w-full md:px-0 h-full">
-		<div class=" flex flex-col max-h-[100dvh] h-full">
-			<div class="">
-				<div class="flex justify-between items-center">
-					<div class=" text-lg font-semibold self-center">{$i18n.t('Tools')}</div>
-				</div>
-			</div>
-
-			<hr class="  dark:border-gray-850 my-2" />
-
-			<div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg">
-				<div class="w-full flex gap-2 mb-2">
-					<!-- Toolkit Name Input -->
-					<input
-						class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
-						type="text"
-						placeholder="Toolkit Name (e.g. My ToolKit)"
-						bind:value={name}
-						required
-					/>
-
-					<input
-						class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
-						type="text"
-						placeholder="Toolkit ID (e.g. my_toolkit)"
-						bind:value={id}
-						required
-					/>
-				</div>
+<svelte:head>
+	<title>
+		{$i18n.t('Tools')} | {$WEBUI_NAME}
+	</title>
+</svelte:head>
 
-				<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
-					<CodeEditor bind:this={codeEditor} {saveHandler} />
-				</div>
+<div class="mb-3 flex justify-between items-center">
+	<div class=" text-lg font-semibold self-center">{$i18n.t('Tools')}</div>
+</div>
 
-				<div class="pb-3 flex justify-end">
-					<button
-						class="px-3 py-1.5 text-sm font-medium bg-emerald-600 hover:bg-emerald-700 text-gray-50 transition rounded-lg"
-						on:click={() => {
-							submitHandler();
-						}}
-					>
-						{$i18n.t('Save')}
-					</button>
-				</div>
-			</div>
+<div class=" flex w-full space-x-2">
+	<div class="flex flex-1">
+		<div class=" self-center ml-1 mr-3">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				class="w-4 h-4"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+					clip-rule="evenodd"
+				/>
+			</svg>
 		</div>
+		<input
+			class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
+			bind:value={query}
+			placeholder={$i18n.t('Search Tools')}
+		/>
+	</div>
+
+	<div>
+		<a
+			class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
+			href="/workspace/tools/create"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 16 16"
+				fill="currentColor"
+				class="w-4 h-4"
+			>
+				<path
+					d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
+				/>
+			</svg>
+		</a>
 	</div>
 </div>
+<hr class=" dark:border-gray-850 my-2.5" />

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

@@ -0,0 +1,116 @@
+<script>
+	import { getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
+
+	import CodeEditor from './CodeEditor.svelte';
+	import { goto } from '$app/navigation';
+
+	let loading = false;
+
+	let id = '';
+	let name = '';
+	let meta = {
+		description: ''
+	};
+
+	let code = '';
+
+	$: if (name) {
+		id = name.replace(/\s+/g, '_').toLowerCase();
+	}
+
+	let codeEditor;
+
+	const saveHandler = async () => {
+		loading = true;
+		// Call the API to save the toolkit
+		console.log('saveHandler');
+	};
+
+	const submitHandler = async () => {
+		if (codeEditor) {
+			const res = await codeEditor.formatHandler();
+
+			if (res) {
+				console.log('Code formatted successfully');
+				saveHandler();
+			}
+		}
+	};
+</script>
+
+<div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
+	<div class="mx-auto w-full md:px-0 h-full">
+		<div class=" flex flex-col max-h-[100dvh] h-full">
+			<div class="mb-2.5">
+				<button
+					class="flex space-x-1"
+					on:click={() => {
+						goto('/workspace/tools');
+					}}
+				>
+					<div class=" self-center">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</div>
+					<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
+				</button>
+			</div>
+
+			<div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg">
+				<div class="w-full mb-2 flex flex-col gap-1.5">
+					<div class="flex gap-2 w-full">
+						<input
+							class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
+							type="text"
+							placeholder="Toolkit Name (e.g. My ToolKit)"
+							bind:value={name}
+							required
+						/>
+
+						<input
+							class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
+							type="text"
+							placeholder="Toolkit ID (e.g. my_toolkit)"
+							bind:value={id}
+							required
+						/>
+					</div>
+					<input
+						class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
+						type="text"
+						placeholder="Toolkit Description (e.g. A toolkit for performing various operations)"
+						bind:value={meta.description}
+						required
+					/>
+				</div>
+
+				<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
+					<CodeEditor bind:value={code} bind:this={codeEditor} {saveHandler} />
+				</div>
+
+				<div class="pb-3 flex justify-end">
+					<button
+						class="px-3 py-1.5 text-sm font-medium bg-emerald-600 hover:bg-emerald-700 text-gray-50 transition rounded-lg"
+						on:click={() => {
+							submitHandler();
+						}}
+					>
+						{$i18n.t('Save')}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,5 @@
+<script>
+	import ToolkitEditor from '$lib/components/workspace/Tools/ToolkitEditor.svelte';
+</script>
+
+<ToolkitEditor />

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

@@ -0,0 +1,5 @@
+<script>
+	import ToolkitEditor from '$lib/components/workspace/Tools/ToolkitEditor.svelte';
+</script>
+
+<ToolkitEditor />