Feat: Add FormDrawer to agent page. #3221 (#5323)

### What problem does this PR solve?

Feat: Add FormDrawer to agent page. #3221

### Type of change


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

web/src/pages/agent/form/relevant-form/hooks.ts

@@ -0,0 +1,53 @@
+import { Edge } from '@xyflow/react';
+import pick from 'lodash/pick';
+import { useCallback, useEffect } from 'react';
+import { IOperatorForm } from '../../interface';
+import useGraphStore from '../../store';
+
+export const useBuildRelevantOptions = () => {
+  const nodes = useGraphStore((state) => state.nodes);
+
+  const buildRelevantOptions = useCallback(
+    (toList: string[]) => {
+      return nodes
+        .filter(
+          (x) => !toList.some((y) => y === x.id), // filter out selected values ​​in other to fields from the current drop-down box options
+        )
+        .map((x) => ({ label: x.data.name, value: x.id }));
+    },
+    [nodes],
+  );
+
+  return buildRelevantOptions;
+};
+
+const getTargetOfEdge = (edges: Edge[], sourceHandle: string) =>
+  edges.find((x) => x.sourceHandle === sourceHandle)?.target;
+
+/**
+ *  monitor changes in the connection and synchronize the target to the yes and no fields of the form
+ *  similar to the categorize-form's useHandleFormValuesChange method
+ * @param param0
+ */
+export const useWatchConnectionChanges = ({ nodeId, form }: IOperatorForm) => {
+  const edges = useGraphStore((state) => state.edges);
+  const getNode = useGraphStore((state) => state.getNode);
+  const node = getNode(nodeId);
+
+  const watchFormChanges = useCallback(() => {
+    if (node) {
+      form?.setFieldsValue(pick(node, ['yes', 'no']));
+    }
+  }, [node, form]);
+
+  const watchConnectionChanges = useCallback(() => {
+    const edgeList = edges.filter((x) => x.source === nodeId);
+    const yes = getTargetOfEdge(edgeList, 'yes');
+    const no = getTargetOfEdge(edgeList, 'no');
+    form?.setFieldsValue({ yes, no });
+  }, [edges, nodeId, form]);
+
+  useEffect(() => {
+    watchFormChanges();
+  }, [watchFormChanges]);
+};

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

@@ -0,0 +1,49 @@
+import LLMSelect from '@/components/llm-select';
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Select } from 'antd';
+import { Operator } from '../../constant';
+import { useBuildFormSelectOptions } from '../../form-hooks';
+import { IOperatorForm } from '../../interface';
+import { useWatchConnectionChanges } from './hooks';
+
+const RelevantForm = ({ onValuesChange, form, node }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+  const buildRelevantOptions = useBuildFormSelectOptions(
+    Operator.Relevant,
+    node?.id,
+  );
+  useWatchConnectionChanges({ nodeId: node?.id, form });
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
+      onValuesChange={onValuesChange}
+      autoComplete="off"
+      form={form}
+    >
+      <Form.Item
+        name={'llm_id'}
+        label={t('model', { keyPrefix: 'chat' })}
+        tooltip={t('modelTip', { keyPrefix: 'chat' })}
+      >
+        <LLMSelect></LLMSelect>
+      </Form.Item>
+      <Form.Item label={t('yes')} name={'yes'}>
+        <Select
+          allowClear
+          options={buildRelevantOptions([form?.getFieldValue('no')])}
+        />
+      </Form.Item>
+      <Form.Item label={t('no')} name={'no'}>
+        <Select
+          allowClear
+          options={buildRelevantOptions([form?.getFieldValue('yes')])}
+        />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default RelevantForm;