refac

src/lib/components/common/CodeEditor.svelte

@@ -24,7 +24,7 @@
 	let isDarkMode = false;
 	let editorTheme = new Compartment();
 
-	const formatPythonCodeHandler = async () => {
+	export const formatPythonCodeHandler = async () => {
 		if (codeEditor) {
 			console.log('formatPythonCodeHandler');
 			const res = await formatPythonCode(value).catch((error) => {

src/lib/components/workspace/Tools.svelte

@@ -7,9 +7,15 @@
 
 	let loading = false;
 
+	let codeEditor;
+
 	const submitHandler = async () => {
 		loading = true;
 		// Call the API to submit the code
+
+		if (codeEditor) {
+			codeEditor.submitHandler();
+		}
 	};
 </script>
 
@@ -17,7 +23,7 @@
 	<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 flex-1 overflow-auto h-0 rounded-lg">
-				<CodeEditor />
+				<CodeEditor bind:this={codeEditor} />
 			</div>
 			<div class="pb-3">
 				<button

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

@@ -3,6 +3,8 @@
 
 	export let value = '';
 
+	let codeEditor;
+
 	let boilerplate = `# Add your custom tools using pure Python code here, make sure to add type hints
 # 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
@@ -43,6 +45,12 @@ class Tools:
             return "Invalid equation"
 
 `;
+
+	export const submitHandler = async () => {
+		if (codeEditor) {
+			codeEditor.formatPythonCodeHandler();
+		}
+	};
 </script>
 
-<CodeEditor bind:value {boilerplate} />
+<CodeEditor bind:value {boilerplate} bind:this={codeEditor} />