feat: tools integration

src/lib/components/workspace/Tools.svelte

@@ -8,6 +8,7 @@
 	import { createNewPrompt, deletePromptByCommand, getPrompts } from '$lib/apis/prompts';
 
 	import { goto } from '$app/navigation';
+	import { deleteToolById, getTools } from '$lib/apis/tools';
 
 	const i18n = getContext('i18n');
 
@@ -78,7 +79,12 @@
 			<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
 				<a href={`/workspace/tools/edit?id=${encodeURIComponent(tool.id)}`}>
 					<div class=" flex-1 self-center pl-5">
-						<div class=" font-bold">{tool.name}</div>
+						<div class=" font-bold flex items-center gap-1.5">
+							<div>
+								{tool.name}
+							</div>
+							<div class=" text-gray-500 text-xs font-medium">{tool.id}</div>
+						</div>
 						<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
 							{tool.meta.description}
 						</div>
@@ -89,7 +95,7 @@
 				<a
 					class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 					type="button"
-					href={`/workspace/tools/edit?command=${encodeURIComponent(tool.id)}`}
+					href={`/workspace/tools/edit?id=${encodeURIComponent(tool.id)}`}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -134,9 +140,16 @@
 				<button
 					class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 					type="button"
-					on:click={() => {
-						// deletePrompt(prompt.command);
-						// deleteTool
+					on:click={async () => {
+						const res = await deleteToolById(localStorage.token, tool.id).catch((error) => {
+							toast.error(error);
+							return null;
+						});
+
+						if (res) {
+							toast.success('Tool deleted successfully');
+							tools.set(await getTools(localStorage.token));
+						}
 					}}
 				>
 					<svg

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

@@ -7,9 +7,10 @@
 	export let value = '';
 
 	let codeEditor;
-	let boilerplate = `from datetime import datetime
+	let boilerplate = `import os
 import requests
-import os
+from datetime import datetime
+
 
 class Tools:
     def __init__(self):
@@ -27,7 +28,9 @@ class Tools:
         """
         value = os.getenv(variable_name)
         if value is not None:
-            return f"The value of the environment variable '{variable_name}' is '{value}'"
+            return (
+                f"The value of the environment variable '{variable_name}' is '{value}'"
+            )
         else:
             return f"The environment variable '{variable_name}' does not exist."
 
@@ -62,38 +65,35 @@ class Tools:
         :param city: The name of the city to get the weather for.
         :return: The current weather information or an error message.
         """
-        api_key = os.getenv('OPENWEATHER_API_KEY')
+        api_key = os.getenv("OPENWEATHER_API_KEY")
         if not api_key:
-            return "API key is not set in the environment variable 'OPENWEATHER_API_KEY'."
+            return (
+                "API key is not set in the environment variable 'OPENWEATHER_API_KEY'."
+            )
 
         base_url = "http://api.openweathermap.org/data/2.5/weather"
         params = {
-            'q': city,
-            'appid': api_key,
-            'units': 'metric'  # Optional: Use 'imperial' for Fahrenheit
+            "q": city,
+            "appid": api_key,
+            "units": "metric",  # Optional: Use 'imperial' for Fahrenheit
         }
 
         try:
             response = requests.get(base_url, params=params)
             response.raise_for_status()  # Raise HTTPError for bad responses (4xx and 5xx)
             data = response.json()
-            
-            if data.get('cod') != 200:
+
+            if data.get("cod") != 200:
                 return f"Error fetching weather data: {data.get('message')}"
-            
-            weather_description = data['weather'][0]['description']
-            temperature = data['main']['temp']
-            humidity = data['main']['humidity']
-            wind_speed = data['wind']['speed']
-            
-            return (f"Weather in {city}:\n"
-                    f"Description: {weather_description}\n"
-                    f"Temperature: {temperature}°C\n"
-                    f"Humidity: {humidity}%\n"
-                    f"Wind Speed: {wind_speed} m/s")
+
+            weather_description = data["weather"][0]["description"]
+            temperature = data["main"]["temp"]
+            humidity = data["main"]["humidity"]
+            wind_speed = data["wind"]["speed"]
+
+            return f"Weather in {city}: {temperature}°C"
         except requests.RequestException as e:
             return f"Error fetching weather data: {str(e)}"
-
 `;
 
 	export const formatHandler = async () => {

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

@@ -8,15 +8,18 @@
 
 	const dispatch = createEventDispatcher();
 
+	let formElement = null;
+
 	let loading = false;
 
-	let id = '';
-	let name = '';
-	let meta = {
+	export let edit = false;
+
+	export let id = '';
+	export let name = '';
+	export let meta = {
 		description: ''
 	};
-
-	let content = '';
+	export let content = '';
 
 	$: if (name) {
 		id = name.replace(/\s+/g, '_').toLowerCase();
@@ -49,6 +52,7 @@
 <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">
 		<form
+			bind:this={formElement}
 			class=" flex flex-col max-h-[100dvh] h-full"
 			on:submit|preventDefault={() => {
 				submitHandler();
@@ -60,6 +64,7 @@
 					on:click={() => {
 						goto('/workspace/tools');
 					}}
+					type="button"
 				>
 					<div class=" self-center">
 						<svg
@@ -96,6 +101,7 @@
 							placeholder="Toolkit ID (e.g. my_toolkit)"
 							bind:value={id}
 							required
+							disabled={edit}
 						/>
 					</div>
 					<input
@@ -112,8 +118,9 @@
 						bind:value={content}
 						bind:this={codeEditor}
 						on:save={() => {
-							// submit form
-							submitHandler();
+							if (formElement) {
+								formElement.requestSubmit();
+							}
 						}}
 					/>
 				</div>