refac

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

@@ -1,16 +1,15 @@
 <script lang="ts">
 	import CodeEditor from '$lib/components/common/CodeEditor.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
 
-	export let saveHandler: Function;
 	export let value = '';
 
 	let codeEditor;
-
-	let boilerplate = `# Tip: Use Ctrl/Cmd + S to format the code
-
-from datetime import datetime
+	let boilerplate = `from datetime import datetime
 import requests
-
+import os
 
 class Tools:
     def __init__(self):
@@ -20,6 +19,18 @@ class Tools:
     # Use Sphinx-style docstrings to document your tools, they will be used for generating tools specifications
     # Please refer to function_calling_filter_pipeline.py file from pipelines project for an example
 
+    def get_environment_variable(self, variable_name: str) -> str:
+        """
+        Get the value of an environment variable.
+        :param variable_name: The name of the environment variable.
+        :return: The value of the environment variable or a message if it doesn't exist.
+        """
+        value = os.getenv(variable_name)
+        if value is not None:
+            return f"The value of the environment variable '{variable_name}' is '{value}'"
+        else:
+            return f"The environment variable '{variable_name}' does not exist."
+
     def get_current_time(self) -> str:
         """
         Get the current time.
@@ -60,6 +71,6 @@ class Tools:
 	{boilerplate}
 	bind:this={codeEditor}
 	on:save={() => {
-		saveHandler();
+		dispatch('save');
 	}}
 />

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

@@ -1,11 +1,13 @@
 <script>
-	import { getContext } from 'svelte';
+	import { getContext, createEventDispatcher } from 'svelte';
 
 	const i18n = getContext('i18n');
 
 	import CodeEditor from './CodeEditor.svelte';
 	import { goto } from '$app/navigation';
 
+	const dispatch = createEventDispatcher();
+
 	let loading = false;
 
 	let id = '';
@@ -24,8 +26,12 @@
 
 	const saveHandler = async () => {
 		loading = true;
-		// Call the API to save the toolkit
-		console.log('saveHandler');
+		dispatch('save', {
+			id,
+			name,
+			meta,
+			content
+		});
 	};
 
 	const submitHandler = async () => {
@@ -42,7 +48,12 @@
 
 <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">
+		<form
+			class=" flex flex-col max-h-[100dvh] h-full"
+			on:submit|preventDefault={() => {
+				submitHandler();
+			}}
+		>
 			<div class="mb-2.5">
 				<button
 					class="flex space-x-1"
@@ -97,20 +108,24 @@
 				</div>
 
 				<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
-					<CodeEditor bind:value={content} bind:this={codeEditor} {saveHandler} />
+					<CodeEditor
+						bind:value={content}
+						bind:this={codeEditor}
+						on:save={() => {
+							// submit form
+							submitHandler();
+						}}
+					/>
 				</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>
+		</form>
 	</div>
 </div>