From 6e7e575a18848aee64b1913fd76bee0a3190fc60 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 10 Jun 2024 17:30:07 -0700
Subject: [PATCH] refac

---
 src/lib/components/common/CodeEditor.svelte          |  2 +-
 src/lib/components/workspace/Tools.svelte            |  8 +++++++-
 src/lib/components/workspace/Tools/CodeEditor.svelte | 10 +++++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/common/CodeEditor.svelte b/src/lib/components/common/CodeEditor.svelte
index aeaa4095c..d505b16a1 100644
--- a/src/lib/components/common/CodeEditor.svelte
+++ b/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) => {
diff --git a/src/lib/components/workspace/Tools.svelte b/src/lib/components/workspace/Tools.svelte
index 4ed44628b..82f402203 100644
--- a/src/lib/components/workspace/Tools.svelte
+++ b/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
diff --git a/src/lib/components/workspace/Tools/CodeEditor.svelte b/src/lib/components/workspace/Tools/CodeEditor.svelte
index 2950e30e0..e55762bbc 100644
--- a/src/lib/components/workspace/Tools/CodeEditor.svelte
+++ b/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} />