Feat: Fixed an issue where modifying fields in the agent operator caused the loss of structured data. #10427 (#11388)

### What problem does this PR solve?

Feat: Fixed an issue where modifying fields in the agent operator caused
the loss of structured data. #10427

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

Author: cike8899

web/src/locales/en.ts

@@ -1855,7 +1855,7 @@ Important structured information may include: names, dates, locations, events, k
         desc: 'Descending',
       },
       variableAssignerLogicalOperatorOptions: {
-        overwrite: 'Overwrite',
+        overwrite: 'Overwritten By',
         clear: 'Clear',
         set: 'Set',
         '+=': 'Add',

web/src/pages/agent/form/agent-form/index.tsx

@@ -22,12 +22,13 @@ import { Switch } from '@/components/ui/switch';
 import { LlmModelType } from '@/constants/knowledge';
 import { useFindLlmByUuid } from '@/hooks/use-llm-request';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { memo, useEffect, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import {
   AgentExceptionMethod,
+  AgentStructuredOutputField,
   NodeHandleId,
   VariableType,
 } from '../../constant';
@@ -127,6 +128,17 @@ function AgentForm({ node }: INextOperatorForm) {
     handleStructuredOutputDialogOk,
   } = useShowStructuredOutputDialog(node?.id);
 
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+
+  const handleShowStructuredOutput = useCallback(
+    (val: boolean) => {
+      if (node?.id && val) {
+        updateNodeForm(node?.id, {}, ['outputs', AgentStructuredOutputField]);
+      }
+    },
+    [node?.id, updateNodeForm],
+  );
+
   useEffect(() => {
     if (exceptionMethod !== AgentExceptionMethod.Goto) {
       if (node?.id) {
@@ -293,7 +305,10 @@ function AgentForm({ node }: INextOperatorForm) {
                   <Switch
                     id="airplane-mode"
                     checked={field.value}
-                    onCheckedChange={field.onChange}
+                    onCheckedChange={(val) => {
+                      handleShowStructuredOutput(val);
+                      field.onChange(val);
+                    }}
                   />
                 </div>
               )}

web/src/pages/agent/form/agent-form/use-watch-change.ts

@@ -17,20 +17,13 @@ export function useWatchFormChange(id?: string, form?: UseFormReturn<any>) {
         prompts: [{ role: PromptRole.User, content: values.prompts }],
       };
 
-      if (values.showStructuredOutput) {
-        nextValues = {
-          ...nextValues,
-          outputs: {
-            ...values.outputs,
-            [AgentStructuredOutputField]:
-              values[AgentStructuredOutputField] ?? {},
-          },
-        };
-      } else {
+      if (!values.showStructuredOutput) {
         nextValues = {
           ...nextValues,
           outputs: omit(values.outputs, [AgentStructuredOutputField]),
         };
+      } else {
+        nextValues = omit(nextValues, 'outputs');
       }
       updateNodeForm(id, nextValues);
     }