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/locales/en.ts

@@ -918,7 +918,8 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
       addTools: 'Add Tools',
       sysPromptDefultValue: `
       <role>
-        You are {{agent_name}}, an AI assistant specialized in {{domain_or_task}}.
+        You are a helpful assistant, an AI assistant specialized in problem-solving for the user. 
+        If a specific domain is provided, adapt your expertise to that domain; otherwise, operate as a generalist.
       </role>
       <instructions>
         1. Understand the user’s request.  
@@ -1498,6 +1499,9 @@ This delimiter is used to split the input text into several text pieces echo of
       },
       goto: 'Fail Branch',
       comment: 'Default Value',
+      sqlStatement: 'SQL Statement',
+      sqlStatementTip:
+        'Write your SQL query here. You can use variables, raw SQL, or mix both using variable syntax.',
     },
     llmTools: {
       bad_calculator: {

web/src/locales/zh.ts

@@ -878,7 +878,8 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       addTools: '添加工具',
       sysPromptDefultValue: `
 <role>
-        你是{{agent_name}}，一位专注于{{领域_or_任务}}的AI助手。
+  你是一名乐于助人的助手，一名专注于为用户解决问题的 AI 助手。
+  如果用户指定了特定领域，你需要在该领域展现专业性；如果没有，则以通用助手的方式工作。
 </role>
 <instructions>
         1. 理解用户请求。
@@ -1413,6 +1414,9 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
         httpRequest: '请求接口',
         wenCai: '查询财务数据',
       },
+      sqlStatement: 'SQL 语句',
+      sqlStatementTip:
+        '在此处编写您的 SQL 查询。您可以使用变量、原始 SQL，或使用变量语法混合使用两者。',
     },
     footer: {
       profile: 'All rights reserved @ React',

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">