Feat: Add a switch to control the display of structured output to the agent form. #10427 (#11344)

### What problem does this PR solve?

Feat: Add a switch to control the display of structured output to the
agent form. #10427

### Type of change


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

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

@@ -6,6 +6,7 @@ import {
 import { LlmSettingSchema } from '@/components/llm-setting-items/next';
 import { MessageHistoryWindowSizeFormField } from '@/components/message-history-window-size-item';
 import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { RAGFlowFormItem } from '@/components/ragflow-form';
 import { Button } from '@/components/ui/button';
 import {
   Form,
@@ -15,6 +16,7 @@ import {
   FormLabel,
 } from '@/components/ui/form';
 import { Input, NumberInput } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
 import { Switch } from '@/components/ui/switch';
 import { LlmModelType } from '@/constants/knowledge';
@@ -26,9 +28,9 @@ import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import {
   AgentExceptionMethod,
+  AgentStructuredOutputField,
   NodeHandleId,
   VariableType,
-  initialAgentValues,
 } from '../../constant';
 import { INextOperatorForm } from '../../interface';
 import useGraphStore from '../../store';
@@ -71,18 +73,20 @@ const FormSchema = z.object({
   exception_default_value: z.string().optional(),
   ...LargeModelFilterFormSchema,
   cite: z.boolean().optional(),
+  showStructuredOutput: z.boolean().optional(),
+  [AgentStructuredOutputField]: z.record(z.any()),
 });
 
 export type AgentFormSchemaType = z.infer<typeof FormSchema>;
 
-const outputList = buildOutputList(initialAgentValues.outputs);
-
 function AgentForm({ node }: INextOperatorForm) {
   const { t } = useTranslation();
   const { edges, deleteEdgesBySourceAndSourceHandle } = useGraphStore(
     (state) => state,
   );
 
+  const outputList = buildOutputList(node?.data.form.outputs);
+
   const defaultValues = useValues(node);
 
   const { extraOptions } = useBuildPromptExtraPromptOptions(edges, node?.id);
@@ -112,13 +116,18 @@ function AgentForm({ node }: INextOperatorForm) {
     name: 'exception_method',
   });
 
+  const showStructuredOutput = useWatch({
+    control: form.control,
+    name: 'showStructuredOutput',
+  });
+
   const {
     initialStructuredOutput,
     showStructuredOutputDialog,
     structuredOutputDialogVisible,
     hideStructuredOutputDialog,
     handleStructuredOutputDialogOk,
-  } = useShowStructuredOutputDialog(node?.id);
+  } = useShowStructuredOutputDialog(form);
 
   useEffect(() => {
     if (exceptionMethod !== AgentExceptionMethod.Goto) {
@@ -275,18 +284,42 @@ function AgentForm({ node }: INextOperatorForm) {
               )}
             </section>
           </Collapse>
-          <Output list={outputList}></Output>
-          <section className="space-y-2">
-            <div className="flex justify-between items-center">
-              {t('flow.structuredOutput.structuredOutput')}
-              <Button variant={'outline'} onClick={showStructuredOutputDialog}>
-                {t('flow.structuredOutput.configuration')}
-              </Button>
-            </div>
-            <StructuredOutputPanel
-              value={initialStructuredOutput}
-            ></StructuredOutputPanel>
-          </section>
+          <RAGFlowFormItem name={AgentStructuredOutputField} className="hidden">
+            <Input></Input>
+          </RAGFlowFormItem>
+          <Output list={outputList}>
+            <RAGFlowFormItem name="showStructuredOutput">
+              {(field) => (
+                <div className="flex items-center space-x-2">
+                  <Label htmlFor="airplane-mode">
+                    {t('flow.structuredOutput.structuredOutput')}
+                  </Label>
+                  <Switch
+                    id="airplane-mode"
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </div>
+              )}
+            </RAGFlowFormItem>
+          </Output>
+          {showStructuredOutput && (
+            <section className="space-y-2">
+              <div className="flex justify-between items-center">
+                {t('flow.structuredOutput.structuredOutput')}
+                <Button
+                  variant={'outline'}
+                  onClick={showStructuredOutputDialog}
+                >
+                  {t('flow.structuredOutput.configuration')}
+                </Button>
+              </div>
+
+              <StructuredOutputPanel
+                value={initialStructuredOutput}
+              ></StructuredOutputPanel>
+            </section>
+          )}
         </FormWrapper>
       </Form>
       {structuredOutputDialogVisible && (