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/generate-form/dynamic-parameters.tsx

@@ -0,0 +1,101 @@
+import { EditableCell, EditableRow } from '@/components/editable-cell';
+import { useTranslate } from '@/hooks/common-hooks';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { DeleteOutlined } from '@ant-design/icons';
+import { Button, Flex, Select, Table, TableProps } from 'antd';
+import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
+import { IGenerateParameter } from '../../interface';
+import { useHandleOperateParameters } from './hooks';
+
+import styles from './index.less';
+interface IProps {
+  node?: RAGFlowNodeType;
+}
+
+const components = {
+  body: {
+    row: EditableRow,
+    cell: EditableCell,
+  },
+};
+
+const DynamicParameters = ({ node }: IProps) => {
+  const nodeId = node?.id;
+  const { t } = useTranslate('flow');
+
+  const options = useBuildComponentIdSelectOptions(nodeId, node?.parentId);
+  const {
+    dataSource,
+    handleAdd,
+    handleRemove,
+    handleSave,
+    handleComponentIdChange,
+  } = useHandleOperateParameters(nodeId!);
+
+  const columns: TableProps<IGenerateParameter>['columns'] = [
+    {
+      title: t('key'),
+      dataIndex: 'key',
+      key: 'key',
+      width: '40%',
+      onCell: (record: IGenerateParameter) => ({
+        record,
+        editable: true,
+        dataIndex: 'key',
+        title: 'key',
+        handleSave,
+      }),
+    },
+    {
+      title: t('value'),
+      dataIndex: 'component_id',
+      key: 'component_id',
+      align: 'center',
+      width: '40%',
+      render(text, record) {
+        return (
+          <Select
+            style={{ width: '100%' }}
+            allowClear
+            options={options}
+            value={text}
+            onChange={handleComponentIdChange(record)}
+          />
+        );
+      },
+    },
+    {
+      title: t('operation'),
+      dataIndex: 'operation',
+      width: 20,
+      key: 'operation',
+      align: 'center',
+      fixed: 'right',
+      render(_, record) {
+        return <DeleteOutlined onClick={handleRemove(record.id)} />;
+      },
+    },
+  ];
+
+  return (
+    <section>
+      <Flex justify="end">
+        <Button size="small" onClick={handleAdd}>
+          {t('add')}
+        </Button>
+      </Flex>
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        rowKey={'id'}
+        className={styles.variableTable}
+        components={components}
+        rowClassName={() => styles.editableRow}
+        scroll={{ x: true }}
+        bordered
+      />
+    </section>
+  );
+};
+
+export default DynamicParameters;

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

@@ -0,0 +1,70 @@
+import get from 'lodash/get';
+import { useCallback, useMemo } from 'react';
+import { v4 as uuid } from 'uuid';
+import { IGenerateParameter } from '../../interface';
+import useGraphStore from '../../store';
+
+export const useHandleOperateParameters = (nodeId: string) => {
+  const { getNode, updateNodeForm } = useGraphStore((state) => state);
+  const node = getNode(nodeId);
+  const dataSource: IGenerateParameter[] = useMemo(
+    () => get(node, 'data.form.parameters', []) as IGenerateParameter[],
+    [node],
+  );
+
+  const handleComponentIdChange = useCallback(
+    (row: IGenerateParameter) => (value: string) => {
+      const newData = [...dataSource];
+      const index = newData.findIndex((item) => row.id === item.id);
+      const item = newData[index];
+      newData.splice(index, 1, {
+        ...item,
+        component_id: value,
+      });
+
+      updateNodeForm(nodeId, { parameters: newData });
+    },
+    [updateNodeForm, nodeId, dataSource],
+  );
+
+  const handleRemove = useCallback(
+    (id?: string) => () => {
+      const newData = dataSource.filter((item) => item.id !== id);
+      updateNodeForm(nodeId, { parameters: newData });
+    },
+    [updateNodeForm, nodeId, dataSource],
+  );
+
+  const handleAdd = useCallback(() => {
+    updateNodeForm(nodeId, {
+      parameters: [
+        ...dataSource,
+        {
+          id: uuid(),
+          key: '',
+          component_id: undefined,
+        },
+      ],
+    });
+  }, [dataSource, nodeId, updateNodeForm]);
+
+  const handleSave = (row: IGenerateParameter) => {
+    const newData = [...dataSource];
+    const index = newData.findIndex((item) => row.id === item.id);
+    const item = newData[index];
+    newData.splice(index, 1, {
+      ...item,
+      ...row,
+    });
+
+    updateNodeForm(nodeId, { parameters: newData });
+  };
+
+  return {
+    handleAdd,
+    handleRemove,
+    handleComponentIdChange,
+    handleSave,
+    dataSource,
+  };
+};

web/src/pages/agent/form/generate-form/index.less

@@ -0,0 +1,21 @@
+.variableTable {
+  margin-top: 14px;
+}
+.editableRow {
+  :global(.editable-cell) {
+    position: relative;
+  }
+
+  :global(.editable-cell-value-wrap) {
+    padding: 5px 12px;
+    cursor: pointer;
+    height: 30px !important;
+  }
+  &:hover {
+    :global(.editable-cell-value-wrap) {
+      padding: 4px 11px;
+      border: 1px solid #d9d9d9;
+      border-radius: 2px;
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+import LLMSelect from '@/components/llm-select';
+import MessageHistoryWindowSizeItem from '@/components/message-history-window-size-item';
+import { PromptEditor } from '@/components/prompt-editor';
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Switch } from 'antd';
+import { IOperatorForm } from '../../interface';
+
+const GenerateForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+
+  return (
+    <Form
+      name="basic"
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+      layout={'vertical'}
+    >
+      <Form.Item
+        name={'llm_id'}
+        label={t('model', { keyPrefix: 'chat' })}
+        tooltip={t('modelTip', { keyPrefix: 'chat' })}
+      >
+        <LLMSelect></LLMSelect>
+      </Form.Item>
+      <Form.Item
+        name={['prompt']}
+        label={t('systemPrompt')}
+        initialValue={t('promptText')}
+        tooltip={t('promptTip', { keyPrefix: 'knowledgeConfiguration' })}
+        rules={[
+          {
+            required: true,
+            message: t('promptMessage'),
+          },
+        ]}
+      >
+        {/* <Input.TextArea rows={8}></Input.TextArea> */}
+        <PromptEditor></PromptEditor>
+      </Form.Item>
+      <Form.Item
+        name={['cite']}
+        label={t('cite')}
+        initialValue={true}
+        valuePropName="checked"
+        tooltip={t('citeTip')}
+      >
+        <Switch />
+      </Form.Item>
+      <MessageHistoryWindowSizeItem
+        initialValue={12}
+      ></MessageHistoryWindowSizeItem>
+    </Form>
+  );
+};
+
+export default GenerateForm;