Feat: Allow users to enter SQL in the SQL operator #9897 (#9898)

### What problem does this PR solve?

Feat: Allow users to enter SQL in the SQL operator #9897

### Type of change


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

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

@@ -1,5 +1,6 @@
 import NumberInput from '@/components/originui/number-input';
 import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { RAGFlowFormItem } from '@/components/ragflow-form';
 import { ButtonLoading } from '@/components/ui/button';
 import {
   Form,
@@ -14,6 +15,7 @@ import { useTranslate } from '@/hooks/common-hooks';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { memo } from 'react';
 import { useForm, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { initialExeSqlValues } from '../../constant';
 import { useFormValues } from '../../hooks/use-form-values';
@@ -23,7 +25,7 @@ import { ExeSQLOptions } from '../../options';
 import { buildOutputList } from '../../utils/build-output-list';
 import { FormWrapper } from '../components/form-wrapper';
 import { Output } from '../components/output';
-import { QueryVariable } from '../components/query-variable';
+import { PromptEditor } from '../components/prompt-editor';
 import { FormSchema, useSubmitForm } from './use-submit-form';
 
 const outputList = buildOutputList(initialExeSqlValues.outputs);
@@ -141,6 +143,7 @@ export function ExeSQLFormWidgets({ loading }: { loading: boolean }) {
 
 function ExeSQLForm({ node }: INextOperatorForm) {
   const defaultValues = useFormValues(initialExeSqlValues, node);
+  const { t } = useTranslation();
 
   const { onSubmit, loading } = useSubmitForm();
 
@@ -154,7 +157,13 @@ function ExeSQLForm({ node }: INextOperatorForm) {
   return (
     <Form {...form}>
       <FormWrapper onSubmit={form.handleSubmit(onSubmit)}>
-        <QueryVariable name="sql"></QueryVariable>
+        <RAGFlowFormItem
+          name="sql"
+          label={t('flow.sqlStatement')}
+          tooltip={t('flow.sqlStatementTip')}
+        >
+          <PromptEditor></PromptEditor>
+        </RAGFlowFormItem>
         <ExeSQLFormWidgets loading={loading}></ExeSQLFormWidgets>
       </FormWrapper>
       <div className="p-5">