diff --git a/web/src/pages/agent/gobal-variable-sheet/constant.ts b/web/src/pages/agent/gobal-variable-sheet/constant.ts
index 8470ffa86d..55ac8cf3b8 100644
--- a/web/src/pages/agent/gobal-variable-sheet/constant.ts
+++ b/web/src/pages/agent/gobal-variable-sheet/constant.ts
@@ -1,5 +1,5 @@
 import { FormFieldConfig, FormFieldType } from '@/components/dynamic-form';
-import { t } from 'i18next';
+import { TFunction } from 'i18next';
 import { TypesWithArray } from '../constant';
 import { buildConversationVariableSelectOptions } from '../utils';
 export { TypesWithArray } from '../constant';
@@ -11,39 +11,40 @@ export { TypesWithArray } from '../constant';
 //   ...TypesWithoutArray.map((item) => `array<${item}>`),
 // ];
 
-export const GlobalFormFields = [
-  {
-    label: t('flow.name'),
-    name: 'name',
-    placeholder: t('common.namePlaceholder'),
-    required: true,
-    validation: {
-      pattern: /^[a-zA-Z_0-9]+$/,
-      message: t('flow.variableNameMessage'),
+export const GlobalFormFields = (t: TFunction<'translation', undefined>) =>
+  [
+    {
+      label: t('flow.name'),
+      name: 'name',
+      placeholder: t('common.namePlaceholder'),
+      required: true,
+      validation: {
+        pattern: /^[a-zA-Z_0-9]+$/,
+        message: t('flow.variableNameMessage'),
+      },
+      type: FormFieldType.Text,
     },
-    type: FormFieldType.Text,
-  },
-  {
-    label: t('flow.type'),
-    name: 'type',
-    placeholder: '',
-    required: true,
-    type: FormFieldType.Select,
-    options: buildConversationVariableSelectOptions(),
-  },
-  {
-    label: t('flow.defaultValue'),
-    name: 'value',
-    placeholder: '',
-    type: FormFieldType.Textarea,
-  },
-  {
-    label: t('flow.description'),
-    name: 'description',
-    placeholder: t('flow.variableDescription'),
-    type: FormFieldType.Textarea,
-  },
-] as FormFieldConfig[];
+    {
+      label: t('flow.type'),
+      name: 'type',
+      placeholder: '',
+      required: true,
+      type: FormFieldType.Select,
+      options: buildConversationVariableSelectOptions(),
+    },
+    {
+      label: t('flow.defaultValue'),
+      name: 'value',
+      placeholder: '',
+      type: FormFieldType.Textarea,
+    },
+    {
+      label: t('flow.description'),
+      name: 'description',
+      placeholder: t('flow.variableDescription'),
+      type: FormFieldType.Textarea,
+    },
+  ] as FormFieldConfig[];
 
 export const GlobalVariableFormDefaultValues = {
   name: '',
diff --git a/web/src/pages/agent/gobal-variable-sheet/index.tsx b/web/src/pages/agent/gobal-variable-sheet/index.tsx
index 51648b8d1e..adc9aebf74 100644
--- a/web/src/pages/agent/gobal-variable-sheet/index.tsx
+++ b/web/src/pages/agent/gobal-variable-sheet/index.tsx
@@ -24,6 +24,7 @@ import {
   TypesWithArray,
 } from './constant';
 import { useObjectFields } from './hooks/use-object-fields';
+import { useTranslation } from 'react-i18next';
 
 export type IGlobalParamModalProps = {
   data: any;
@@ -32,8 +33,9 @@ export type IGlobalParamModalProps = {
 export const GlobalParamSheet = (props: IGlobalParamModalProps) => {
   const { hideModal } = props;
   const { data, refetch } = useFetchAgent();
+  const { t } = useTranslation();
   const { visible, showModal, hideModal: hideAddModal } = useSetModalState();
-  const [fields, setFields] = useState<FormFieldConfig[]>(GlobalFormFields);
+  const [fields, setFields] = useState<FormFieldConfig[]>(GlobalFormFields(t));
   const [defaultValues, setDefaultValues] = useState<FieldValues>(
     GlobalVariableFormDefaultValues,
   );
@@ -91,7 +93,7 @@ export const GlobalParamSheet = (props: IGlobalParamModalProps) => {
           <div className="px-5 pb-5">
             <BlockButton
               onClick={() => {
-                setFields(GlobalFormFields);
+                setFields(GlobalFormFields(t));
                 setDefaultValues(GlobalVariableFormDefaultValues);
                 showModal();
               }}