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)
2025-12-08 20:42:30 +08:00 · 2025-02-25 11:32:01 +08:00
parent b3d579e2c1
commit 9c9f2dbe3f
63 changed files with 4005 additions and 70 deletions
--- a/web/src/pages/agent/form/begin-form/index.tsx
+++ b/web/src/pages/agent/form/begin-form/index.tsx
@ -0,0 +1,111 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { Button, Form, Input } from 'antd';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BeginQuery, IOperatorForm } from '../../interface';
+import { useEditQueryRecord } from './hooks';
+import { ModalForm } from './paramater-modal';
+import QueryTable from './query-table';
+
+import styles from './index.less';
+
+type FieldType = {
+  prologue?: string;
+};
+
+const BeginForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslation();
+  const {
+    ok,
+    currentRecord,
+    visible,
+    hideModal,
+    showModal,
+    otherThanCurrentQuery,
+  } = useEditQueryRecord({
+    form,
+    onValuesChange,
+  });
+
+  const handleDeleteRecord = useCallback(
+    (idx: number) => {
+      const query = form?.getFieldValue('query') || [];
+      const nextQuery = query.filter(
+        (item: BeginQuery, index: number) => index !== idx,
+      );
+      onValuesChange?.(
+        { query: nextQuery },
+        { query: nextQuery, prologue: form?.getFieldValue('prologue') },
+      );
+    },
+    [form, onValuesChange],
+  );
+
+  return (
+    <Form.Provider
+      onFormFinish={(name, { values }) => {
+        if (name === 'queryForm') {
+          ok(values as BeginQuery);
+        }
+      }}
+    >
+      <Form
+        name="basicForm"
+        onValuesChange={onValuesChange}
+        autoComplete="off"
+        form={form}
+        layout="vertical"
+      >
+        <Form.Item<FieldType>
+          name={'prologue'}
+          label={t('chat.setAnOpener')}
+          tooltip={t('chat.setAnOpenerTip')}
+          initialValue={t('chat.setAnOpenerInitial')}
+        >
+          <Input.TextArea autoSize={{ minRows: 5 }} />
+        </Form.Item>
+        {/* Create a hidden field to make Form instance record this */}
+        <Form.Item name="query" noStyle />
+
+        <Form.Item
+          shouldUpdate={(prevValues, curValues) =>
+            prevValues.query !== curValues.query
+          }
+        >
+          {({ getFieldValue }) => {
+            const query: BeginQuery[] = getFieldValue('query') || [];
+            return (
+              <QueryTable
+                data={query}
+                showModal={showModal}
+                deleteRecord={handleDeleteRecord}
+              ></QueryTable>
+            );
+          }}
+        </Form.Item>
+
+        <Button
+          htmlType="button"
+          style={{ margin: '0 8px' }}
+          onClick={() => showModal()}
+          icon={<PlusOutlined />}
+          block
+          className={styles.addButton}
+        >
+          {t('flow.addItem')}
+        </Button>
+        {visible && (
+          <ModalForm
+            visible={visible}
+            hideModal={hideModal}
+            initialValue={currentRecord}
+            onOk={ok}
+            otherThanCurrentQuery={otherThanCurrentQuery}
+          />
+        )}
+      </Form>
+    </Form.Provider>
+  );
+};
+
+export default BeginForm;