feat: Modify the modal style of creating an agent so that there are more templates in the field of view #2122 (#2123)

### What problem does this PR solve?

feat: Modify the modal style of creating an agent so that there are more
templates in the field of view #2122

### Type of change


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

web/src/pages/flow/list/create-agent-modal.tsx

@@ -0,0 +1,54 @@
+import { IModalManagerChildrenProps } from '@/components/modal-manager';
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Input, Modal } from 'antd';
+
+interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
+  loading: boolean;
+  onOk: (name: string) => void;
+  showModal?(): void;
+}
+
+const CreateAgentModal = ({ visible, hideModal, loading, onOk }: IProps) => {
+  const [form] = Form.useForm();
+  const { t } = useTranslate('common');
+
+  type FieldType = {
+    name?: string;
+  };
+
+  const handleOk = async () => {
+    const ret = await form.validateFields();
+
+    return onOk(ret.name);
+  };
+
+  return (
+    <Modal
+      title={t('createGraph', { keyPrefix: 'flow' })}
+      open={visible}
+      onOk={handleOk}
+      onCancel={hideModal}
+      okButtonProps={{ loading }}
+      confirmLoading={loading}
+    >
+      <Form
+        name="basic"
+        labelCol={{ span: 4 }}
+        wrapperCol={{ span: 20 }}
+        style={{ maxWidth: 600 }}
+        autoComplete="off"
+        form={form}
+      >
+        <Form.Item<FieldType>
+          label={t('name')}
+          name="name"
+          rules={[{ required: true, message: t('namePlaceholder') }]}
+        >
+          <Input />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default CreateAgentModal;