Feat: Add configuration for webhook to the begin node. #10427 (#11875)

### What problem does this PR solve?

Feat: Add configuration for webhook to the begin node. #10427

### Type of change


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

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

@@ -42,9 +42,9 @@ import { FormWrapper } from '../components/form-wrapper';
 import { Output } from '../components/output';
 import { PromptEditor } from '../components/prompt-editor';
 import { QueryVariable } from '../components/query-variable';
+import { SchemaDialog } from '../components/schema-dialog';
+import { SchemaPanel } from '../components/schema-panel';
 import { AgentTools, Agents } from './agent-tools';
-import { StructuredOutputDialog } from './structured-output-dialog';
-import { StructuredOutputPanel } from './structured-output-panel';
 import { useBuildPromptExtraPromptOptions } from './use-build-prompt-options';
 import {
   useHandleShowStructuredOutput,
@@ -327,19 +327,17 @@ function AgentForm({ node }: INextOperatorForm) {
                 </Button>
               </div>
 
-              <StructuredOutputPanel
-                value={structuredOutput}
-              ></StructuredOutputPanel>
+              <SchemaPanel value={structuredOutput}></SchemaPanel>
             </section>
           )}
         </FormWrapper>
       </Form>
       {structuredOutputDialogVisible && (
-        <StructuredOutputDialog
+        <SchemaDialog
           hideModal={hideStructuredOutputDialog}
           onOk={handleStructuredOutputDialogOk}
           initialValues={structuredOutput}
-        ></StructuredOutputDialog>
+        ></SchemaDialog>
       )}
     </>
   );

web/src/pages/agent/form/agent-form/structured-output-dialog.tsx

@@ -1,56 +0,0 @@
-import {
-  JSONSchema,
-  JsonSchemaVisualizer,
-  SchemaVisualEditor,
-} from '@/components/jsonjoy-builder';
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { IModalProps } from '@/interfaces/common';
-import { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-export function StructuredOutputDialog({
-  hideModal,
-  onOk,
-  initialValues,
-}: IModalProps<any>) {
-  const { t } = useTranslation();
-  const [schema, setSchema] = useState<JSONSchema>(initialValues);
-
-  const handleOk = useCallback(() => {
-    onOk?.(schema);
-  }, [onOk, schema]);
-
-  return (
-    <Dialog onOpenChange={hideModal} open>
-      <DialogContent className="md:max-w-[1200px] h-[50vh]">
-        <DialogHeader>
-          <DialogTitle> {t('flow.structuredOutput.configuration')}</DialogTitle>
-        </DialogHeader>
-        <section className="flex overflow-auto">
-          <div className="flex-1">
-            <SchemaVisualEditor schema={schema} onChange={setSchema} />
-          </div>
-          <div className="flex-1">
-            <JsonSchemaVisualizer schema={schema} onChange={setSchema} />
-          </div>
-        </section>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">{t('common.cancel')}</Button>
-          </DialogClose>
-          <Button type="button" onClick={handleOk}>
-            {t('common.save')}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

web/src/pages/agent/form/agent-form/structured-output-panel.tsx

@@ -1,13 +0,0 @@
-import { JSONSchema, JsonSchemaVisualizer } from '@/components/jsonjoy-builder';
-
-export function StructuredOutputPanel({ value }: { value: JSONSchema }) {
-  return (
-    <section className="h-48">
-      <JsonSchemaVisualizer
-        schema={value}
-        readOnly
-        showHeader={false}
-      ></JsonSchemaVisualizer>
-    </section>
-  );
-}