From f9e6ad86b7fe11731ea86e0f6dfa3b1ed27d00bc Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Fri, 23 May 2025 18:57:45 +0800
Subject: [PATCH] Fix: Fixed the issue that the script text of the code
 operator is not displayed after refreshing the page after saving the script
 text of the code operator #4977 (#7825)

### What problem does this PR solve?

Fix: Fixed the issue that the script text of the code operator is not
displayed after refreshing the page after saving the script text of the
code operator #4977

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/pages/flow/form/code-form/index.tsx | 28 +++++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/web/src/pages/flow/form/code-form/index.tsx b/web/src/pages/flow/form/code-form/index.tsx
index fda46dfc8..754ffa3f4 100644
--- a/web/src/pages/flow/form/code-form/index.tsx
+++ b/web/src/pages/flow/form/code-form/index.tsx
@@ -5,7 +5,8 @@ import { DynamicInputVariable } from './dynamic-input-variable';
 
 import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent';
 import { ICodeForm } from '@/interfaces/database/flow';
-import { useEffect } from 'react';
+import { useCallback } from 'react';
+import useGraphStore from '../../store';
 import styles from './index.less';
 
 loader.config({ paths: { vs: '/vs' } });
@@ -17,16 +18,20 @@ const options = [
 
 const CodeForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const formData = node?.data.form as ICodeForm;
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
 
-  useEffect(() => {
-    setTimeout(() => {
-      // TODO: Direct operation zustand is more elegant
-      form?.setFieldValue(
-        'script',
-        CodeTemplateStrMap[formData.lang as ProgrammingLanguage],
-      );
-    }, 0);
-  }, [form, formData.lang]);
+  const handleChange = useCallback(
+    (value: ProgrammingLanguage) => {
+      if (node?.id) {
+        updateNodeForm(
+          node?.id,
+          CodeTemplateStrMap[value as ProgrammingLanguage],
+          ['script'],
+        );
+      }
+    },
+    [node?.id, updateNodeForm],
+  );
 
   return (
     <Form
@@ -42,9 +47,10 @@ const CodeForm = ({ onValuesChange, form, node }: IOperatorForm) => {
         label={
           <Form.Item name={'lang'} className={styles.languageItem}>
             <Select
-              defaultValue={'python'}
+              defaultValue={ProgrammingLanguage.Python}
               popupMatchSelectWidth={false}
               options={options}
+              onChange={handleChange}
             />
           </Form.Item>
         }