Feat: Add VariablePickerMenuPlugin to select variables in the prompt text box by menu #4764 (#4765)

### What problem does this PR solve?

Feat: Add VariablePickerMenuPlugin to select variables in the prompt
text box by menu #4764

### Type of change


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

web/src/pages/flow/flow-drawer/index.tsx

@@ -2,7 +2,7 @@ import { useTranslate } from '@/hooks/common-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { CloseOutlined } from '@ant-design/icons';
 import { Drawer, Flex, Form, Input } from 'antd';
-import { lowerFirst } from 'lodash';
+import { get, isPlainObject, lowerFirst } from 'lodash';
 import { Play } from 'lucide-react';
 import { useEffect, useRef } from 'react';
 import { BeginId, Operator, operatorMap } from '../constant';
@@ -40,10 +40,15 @@ import WikipediaForm from '../form/wikipedia-form';
 import YahooFinanceForm from '../form/yahoo-finance-form';
 import { useHandleFormValuesChange, useHandleNodeNameChange } from '../hooks';
 import OperatorIcon from '../operator-icon';
-import { getDrawerWidth, needsSingleStepDebugging } from '../utils';
+import {
+  buildCategorizeListFromObject,
+  getDrawerWidth,
+  needsSingleStepDebugging,
+} from '../utils';
 import SingleDebugDrawer from './single-debug-drawer';
 
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { FlowFormContext } from '../context';
 import { RunTooltip } from '../flow-tooltip';
 import IterationForm from '../form/iteration-from';
 import styles from './index.less';
@@ -122,10 +127,21 @@ const FormDrawer = ({
       if (node?.id !== previousId.current) {
         form.resetFields();
       }
-      form.setFieldsValue(node?.data?.form);
+
+      if (operatorName === Operator.Categorize) {
+        const items = buildCategorizeListFromObject(
+          get(node, 'data.form.category_description', {}),
+        );
+        const formData = node?.data?.form;
+        if (isPlainObject(formData)) {
+          form.setFieldsValue({ ...formData, items });
+        }
+      } else {
+        form.setFieldsValue(node?.data?.form);
+      }
       previousId.current = node?.id;
     }
-  }, [visible, form, node?.data?.form, node?.id]);
+  }, [visible, form, node?.data?.form, node?.id, node, operatorName]);
 
   return (
     <Drawer
@@ -176,11 +192,13 @@ const FormDrawer = ({
     >
       <section className={styles.formWrapper}>
         {visible && (
-          <OperatorForm
-            onValuesChange={handleValuesChange}
-            form={form}
-            node={node}
-          ></OperatorForm>
+          <FlowFormContext.Provider value={node}>
+            <OperatorForm
+              onValuesChange={handleValuesChange}
+              form={form}
+              node={node}
+            ></OperatorForm>
+          </FlowFormContext.Provider>
         )}
       </section>
       {singleDebugDrawerVisible && (